From efcc7bde23b470c4f3078d9ae39016d8caf05c1f Mon Sep 17 00:00:00 2001
From: Fionna Chan <13184582+fionnachan@users.noreply.github.com>
Date: Fri, 20 Sep 2024 20:18:52 +0800
Subject: [PATCH] refactor: useDestinationAddressError hook cleanup (#1911)

---
 .../TransferPanel/AdvancedSettings.tsx        |  4 --
 .../TransferPanel/TransferPanel.tsx           | 47 ++++++++-----------
 .../TransferPanel/useTransferReadiness.ts     |  8 ++--
 3 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
index 041b5fdae7..1f8fbdec4f 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
@@ -29,17 +29,13 @@ enum DestinationAddressWarnings {
 }
 
 type DestinationAddressStore = {
-  error: DestinationAddressErrors | null
   destinationAddress: string | undefined
-  setError: (error: DestinationAddressErrors | null) => void
   setDestinationAddress: (destinationAddress: string | undefined) => void
 }
 
 export const useDestinationAddressStore = create<DestinationAddressStore>(
   set => ({
-    error: null,
     destinationAddress: undefined,
-    setError: error => set(() => ({ error })),
     setDestinationAddress: destinationAddress =>
       set(() => ({ destinationAddress }))
   })
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
index 55d59c6472..7ddd32024f 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -74,9 +74,11 @@ import { useBalances } from '../../hooks/useBalances'
 import { captureSentryErrorWithExtraData } from '../../util/SentryUtils'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { normalizeTimestamp } from '../../state/app/utils'
-import { getDestinationAddressError } from './hooks/useDestinationAddressError'
+import { useDestinationAddressError } from './hooks/useDestinationAddressError'
 import { useIsCctpTransfer } from './hooks/useIsCctpTransfer'
 
+const signerUndefinedError = 'Signer is undefined'
+
 export function TransferPanel() {
   const { tokenFromSearchParams, setTokenQueryParam } =
     useTokenFromSearchParams()
@@ -172,6 +174,8 @@ export function TransferPanel() {
 
   const { transferReady } = useTransferReadiness()
 
+  const { destinationAddressError } = useDestinationAddressError()
+
   const { color: destinationChainUIcolor } = getBridgeUiConfigForChain(
     networks.destinationChain.id
   )
@@ -389,11 +393,6 @@ export function TransferPanel() {
         if (!withdrawalConfirmation) return
       }
 
-      const destinationAddressError = await getDestinationAddressError({
-        destinationAddress,
-        isSenderSmartContractWallet: isSmartContractWallet,
-        isTeleportMode
-      })
       if (destinationAddressError) {
         console.error(destinationAddressError)
         return
@@ -535,9 +534,20 @@ export function TransferPanel() {
     }
   }
 
-  const transfer = async () => {
-    const signerUndefinedError = 'Signer is undefined'
+  const isTransferAllowed = useMemo(() => {
+    if (!isConnected) {
+      return false
+    }
+    if (!walletAddress) {
+      return false
+    }
+    if (!!destinationAddressError) {
+      return false
+    }
+    return true
+  }, [destinationAddressError, isConnected, walletAddress])
 
+  const transfer = async () => {
     try {
       setTransferring(true)
       if (chainId !== networks.sourceChain.id) {
@@ -547,10 +557,7 @@ export function TransferPanel() {
       setTransferring(false)
     }
 
-    if (!isConnected) {
-      return
-    }
-    if (!walletAddress) {
+    if (!isTransferAllowed) {
       return
     }
 
@@ -559,16 +566,6 @@ export function TransferPanel() {
       throw signerUndefinedError
     }
 
-    const destinationAddressError = await getDestinationAddressError({
-      destinationAddress,
-      isSenderSmartContractWallet: isSmartContractWallet,
-      isTeleportMode
-    })
-    if (destinationAddressError) {
-      console.error(destinationAddressError)
-      return
-    }
-
     // SC ETH transfers aren't enabled yet. Safety check, shouldn't be able to get here.
     if (isSmartContractWallet && !selectedToken) {
       console.error("ETH transfers aren't enabled for smart contract wallets.")
@@ -716,12 +713,6 @@ export function TransferPanel() {
         return
       }
 
-      // if destination address is added, validate it
-      const destinationAddressError = await getDestinationAddressError({
-        destinationAddress,
-        isSenderSmartContractWallet: isSmartContractWallet,
-        isTeleportMode
-      })
       if (destinationAddressError) {
         console.error(destinationAddressError)
         return
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
index 87b05093c8..426f976e54 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts
@@ -10,7 +10,6 @@ import {
   isTokenArbitrumOneNativeUSDC
 } from '../../util/TokenUtils'
 import { useAppContextState } from '../App/AppContext'
-import { useDestinationAddressStore } from './AdvancedSettings'
 import {
   TransferReadinessRichErrorMessage,
   getInsufficientFundsErrorMessage,
@@ -32,6 +31,7 @@ import { useBalances } from '../../hooks/useBalances'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { formatAmount } from '../../util/NumberUtils'
 import { useSelectedTokenIsWithdrawOnly } from './hooks/useSelectedTokenIsWithdrawOnly'
+import { useDestinationAddressError } from './hooks/useDestinationAddressError'
 
 // Add chains IDs that are currently down or disabled
 // It will block transfers and display an info box in the transfer panel
@@ -151,7 +151,7 @@ export function useTransferReadiness(): UseTransferReadinessResult {
     parentWalletAddress: walletAddress,
     childWalletAddress: walletAddress
   })
-  const { error: destinationAddressError } = useDestinationAddressStore()
+  const { destinationAddressError } = useDestinationAddressError()
 
   const ethL1BalanceFloat = ethParentBalance
     ? parseFloat(utils.formatEther(ethParentBalance))
@@ -571,6 +571,8 @@ export function useTransferReadiness(): UseTransferReadinessResult {
     childChain.id,
     parentChain.id,
     networks.sourceChain.name,
-    isTeleportMode
+    isTeleportMode,
+    isSelectedTokenWithdrawOnly,
+    isSelectedTokenWithdrawOnlyLoading
   ])
 }