From 281921534b5f36b81d181dcd801455076bd5ff1f Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Tue, 13 Aug 2024 20:47:51 -0700
Subject: [PATCH] refactor status and toast hooks

---
 .../components/TransactionStatusAction.tsx    |  4 +-
 .../components/TransactionToastAction.tsx     |  4 +-
 .../hooks/useGetTransactionStatusAction.tsx   | 70 ++++++++++++++++++
 .../hooks/useGetTransactionToastAction.tsx    | 74 +++++++++++++++++++
 4 files changed, 148 insertions(+), 4 deletions(-)
 create mode 100644 src/transaction/hooks/useGetTransactionStatusAction.tsx
 create mode 100644 src/transaction/hooks/useGetTransactionToastAction.tsx

diff --git a/src/transaction/components/TransactionStatusAction.tsx b/src/transaction/components/TransactionStatusAction.tsx
index f067f5889f..c83ab6eed0 100644
--- a/src/transaction/components/TransactionStatusAction.tsx
+++ b/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)}>
diff --git a/src/transaction/components/TransactionToastAction.tsx b/src/transaction/components/TransactionToastAction.tsx
index 197109ced4..0a4b64c1b4 100644
--- a/src/transaction/components/TransactionToastAction.tsx
+++ b/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)}>
diff --git a/src/transaction/hooks/useGetTransactionStatusAction.tsx b/src/transaction/hooks/useGetTransactionStatusAction.tsx
new file mode 100644
index 0000000000..31b11c015c
--- /dev/null
+++ b/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,
+  ]);
+}
diff --git a/src/transaction/hooks/useGetTransactionToastAction.tsx b/src/transaction/hooks/useGetTransactionToastAction.tsx
new file mode 100644
index 0000000000..505de58d5d
--- /dev/null
+++ b/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,
+  ]);
+}