refactor status and toast hooks

src/transaction/components/TransactionStatusAction.tsx

@@ -1,11 +1,11 @@
 import { cn, text } from '../../styles/theme';
-import { useGetTransactionAction } from '../hooks/useGetTransactionAction';
+import { useGetTransactionStatusAction } from '../hooks/useGetTransactionStatusAction';
 import type { TransactionStatusActionReact } from '../types';
 
 export function TransactionStatusAction({
  className,
 }: TransactionStatusActionReact) {
- const { actionElement } = useGetTransactionAction({ context: 'status' });
+ const { actionElement } = useGetTransactionStatusAction();
 
  return (
  <div className={cn(text.label2, 'min-w-[70px]', className)}>

src/transaction/components/TransactionToastAction.tsx

@@ -1,11 +1,11 @@
 import { cn, text } from '../../styles/theme';
-import { useGetTransactionAction } from '../hooks/useGetTransactionAction';
+import { useGetTransactionToastAction } from '../hooks/useGetTransactionToastAction';
 import type { TransactionToastActionReact } from '../types';
 
 export function TransactionToastAction({
  className,
 }: TransactionToastActionReact) {
- const { actionElement } = useGetTransactionAction({ context: 'toast' });
+ const { actionElement } = useGetTransactionToastAction();
 
  return (
  <div className={cn(text.label1, 'text-nowrap', className)}>

src/transaction/hooks/useGetTransactionStatusAction.tsx

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useChainId } from 'wagmi';
+import { useShowCallsStatus } from 'wagmi/experimental';
+import { getChainExplorer } from '../../network/getChainExplorer';
+import { cn, color, text } from '../../styles/theme';
+import { useTransactionContext } from '../components/TransactionProvider';
+
+export function useGetTransactionStatusAction() {
+ const {
+ chainId,
+ errorMessage,
+ onSubmit,
+ receipt,
+ transactionHash,
+ transactionId,
+ } = useTransactionContext();
+ const accountChainId = chainId ?? useChainId();
+
+ const { showCallsStatus } = useShowCallsStatus();
+
+ return useMemo(() => {
+ const chainExplorer = getChainExplorer(accountChainId);
+
+ let actionElement: ReactNode = null;
+
+ // EOA will have txn hash
+ if (transactionHash) {
+ actionElement = (
+ <a
+ href={`${chainExplorer}/tx/${transactionHash}`}
+ target="_blank"
+ rel="noreferrer"
+ >
+ <span className={cn(text.label1, color.primary)}>
+ View transaction
+ </span>
+ </a>
+ );
+ }
+
+ // SW will have txn id
+ if (transactionId) {
+ actionElement = (
+ <button
+ onClick={() => showCallsStatus({ id: transactionId })}
+ type="button"
+ >
+ <span className={cn(text.label1, color.primary)}>
+ View transaction
+ </span>
+ </button>
+ );
+ }
+
+ if (receipt) {
+ actionElement = null;
+ }
+
+ return { actionElement };
+ }, [
+ accountChainId,
+ errorMessage,
+ onSubmit,
+ receipt,
+ showCallsStatus,
+ transactionHash,
+ transactionId,
+ ]);
+}

src/transaction/hooks/useGetTransactionToastAction.tsx

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useChainId } from 'wagmi';
+import { useShowCallsStatus } from 'wagmi/experimental';
+import { getChainExplorer } from '../../network/getChainExplorer';
+import { cn, color, text } from '../../styles/theme';
+import { useTransactionContext } from '../components/TransactionProvider';
+
+export function useGetTransactionToastAction() {
+ const {
+ chainId,
+ errorMessage,
+ onSubmit,
+ receipt,
+ transactionHash,
+ transactionId,
+ } = useTransactionContext();
+ const accountChainId = chainId ?? useChainId();
+
+ const { showCallsStatus } = useShowCallsStatus();
+
+ return useMemo(() => {
+ const chainExplorer = getChainExplorer(accountChainId);
+
+ let actionElement: ReactNode = null;
+
+ // EOA will have txn hash
+ if (transactionHash) {
+ actionElement = (
+ <a
+ href={`${chainExplorer}/tx/${transactionHash}`}
+ target="_blank"
+ rel="noreferrer"
+ >
+ <span className={cn(text.label1, color.primary)}>
+ View transaction
+ </span>
+ </a>
+ );
+ }
+
+ // SW will have txn id
+ if (transactionId) {
+ actionElement = (
+ <button
+ onClick={() => showCallsStatus({ id: transactionId })}
+ type="button"
+ >
+ <span className={cn(text.label1, color.primary)}>
+ View transaction
+ </span>
+ </button>
+ );
+ }
+
+ if (errorMessage) {
+ actionElement = (
+ <button type="button" onClick={onSubmit}>
+ <span className={cn(text.label1, color.primary)}>Try again</span>
+ </button>
+ );
+ }
+
+ return { actionElement };
+ }, [
+ accountChainId,
+ errorMessage,
+ onSubmit,
+ receipt,
+ showCallsStatus,
+ transactionHash,
+ transactionId,
+ ]);
+}