Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add transaction components #787

Merged
merged 23 commits into from
Jul 16, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix lint
abcrane123 committed Jul 16, 2024
commit 80fc5a0b211ab43c6500d1d6023d8521c113990b
5 changes: 2 additions & 3 deletions site/docs/components/TransactionWrapper.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ReactNode } from 'react';
import { useAccount } from 'wagmi';
import type { Config } from 'wagmi';
import type { ReactNode } from 'react';
import type {
UseSendCallsParameters,
UseSendCallsReturnType,
@@ -47,11 +47,10 @@ export default function TransactionWrapper({
functionName: 'safeMint',
args: [address],
},
,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I think about it, if we want to test a contract in our docs, probably that should be something super chill on Base Sepolia. Something to think about it on Monday.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah agreed going to ask in the group for help on this

];
return (
<main className="flex flex-col">
<div className="flex items-center p-4 bg-white max-w-[450px] rounded-lg">
<div className="flex max-w-[450px] items-center rounded-lg bg-white p-4">
{children({ address, contracts })}
</div>
</main>
2 changes: 1 addition & 1 deletion src/transaction/components/Transaction.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ export function Transaction({
}: TransactionReact) {
return (
<TransactionProvider address={address} contracts={contracts}>
<div className={cn(className, 'w-full gap-2 flex flex-col')}>
<div className={cn(className, 'flex w-full flex-col gap-2')}>
{children}
</div>
</TransactionProvider>
2 changes: 1 addition & 1 deletion src/transaction/components/TransactionProvider.tsx
Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@ export function TransactionProvider({
} catch (err) {
console.log({ err });
}
}, [contracts, setErrorMessage]);
}, [contracts, writeContracts]);

useEffect(() => {
// TODO: replace with gas estimation call
15 changes: 10 additions & 5 deletions src/transaction/core/useGetTransactionStatus.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { ReactNode, useMemo } from 'react';
import { useMemo } from 'react';
import { useTransactionContext } from '../components/TransactionProvider';
import { cn, color, text } from '../../styles/theme';
import { useOnchainKit } from '../../useOnchainKit';
import { getChainExplorer } from './getChainExplorer';
import type { ReactNode } from 'react';

export function useGetTransactionStatus() {
const { errorMessage, isLoading, transactionId } = useTransactionContext();
@@ -12,13 +13,13 @@ export function useGetTransactionStatus() {
const chainExplorer = getChainExplorer(chain.id);

let actionElement: ReactNode = null;
let label;
let label: string = '';
let labelClassName: string = color.foregroundMuted;

if (isLoading) {
label = 'Transaction in progress...';
actionElement = (
<a>
<a href="">
<span className={cn(text.label1, color.primary)}>
View on explorer
</span>
@@ -28,7 +29,11 @@ export function useGetTransactionStatus() {
if (transactionId) {
label = 'Successful!';
actionElement = (
<a href={`${chainExplorer}/tx/${transactionId}`} target="_blank">
<a
href={`${chainExplorer}/tx/${transactionId}`}
target="_blank"
rel="noreferrer"
>
<span className={cn(text.label1, color.primary)}>
View transaction
</span>
@@ -39,7 +44,7 @@ export function useGetTransactionStatus() {
label = 'Something went wrong. Please try again.';
labelClassName = color.error;
actionElement = (
<button>
<button type="button">
<span className={cn(text.label1, color.primary)}>Try again</span>
</button>
);
2 changes: 1 addition & 1 deletion src/transaction/core/useWriteContracts.ts
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ export function useWriteContracts({
mutation: {
onError: (e) => {
if (
(e as TransactionExecutionError).cause.name ==
(e as TransactionExecutionError).cause.name ===
'UserRejectedRequestError'
) {
setErrorMessage('User rejected request');
2 changes: 1 addition & 1 deletion src/transaction/types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// 🌲☀🌲
import type { ReactNode } from 'react';
import type { Abi, Account, Address, ContractFunctionName, Hex } from 'viem';
import type { Abi, Address, ContractFunctionName, Hex } from 'viem';
import type { Config } from 'wagmi';
import type {
UseSendCallsParameters,