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,
+  ]);
+}