refactor: move dialogs to a single component (part 2) (#2298)

OffchainLabs · Mar 6, 2025 · c9c3dba · c9c3dba
1 parent ffceb5e
commit c9c3dba
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -20,7 +20,6 @@ import {
 } from './TokenImportDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { useDialog } from '../common/Dialog'
-import { CustomDestinationAddressConfirmationDialog } from './CustomDestinationAddressConfirmationDialog'
 import { TransferPanelSummary } from './TransferPanelSummary'
 import { useAppContextActions } from '../App/AppContext'
 import { trackEvent } from '../../util/AnalyticsUtils'
@@ -33,7 +32,6 @@ import { DOCS_DOMAIN, GET_HELP_LINK } from '../../constants'
 import { AdvancedSettings } from './AdvancedSettings'
 import { USDCDepositConfirmationDialog } from './USDCDeposit/USDCDepositConfirmationDialog'
 import { USDCWithdrawalConfirmationDialog } from './USDCWithdrawal/USDCWithdrawalConfirmationDialog'
-import { CustomFeeTokenApprovalDialog } from './CustomFeeTokenApprovalDialog'
 import { isUserRejectedError } from '../../util/isUserRejectedError'
 import { getUsdcTokenAddressFromSourceChainId } from '../../state/cctpState'
 import { DepositStatus, MergedTransaction } from '../../state/app/state'
@@ -173,8 +171,6 @@ export function TransferPanel() {
 
   const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
-  const [customFeeTokenApprovalDialogProps, openCustomFeeTokenApprovalDialog] =
-    useDialog()
   const [
     usdcWithdrawalConfirmationDialogProps,
     openUSDCWithdrawalConfirmationDialog
@@ -185,10 +181,6 @@ export function TransferPanel() {
   ] = useDialog()
 
   const { openDialog: openTokenImportDialog } = useTokenImportDialogStore()
-  const [
-    customDestinationAddressConfirmationDialogProps,
-    openCustomDestinationAddressConfirmationDialog
-  ] = useDialog()
 
   const isCustomDestinationTransfer = !!latestDestinationAddress.current
 
@@ -330,7 +322,7 @@ export function TransferPanel() {
   }
 
   const customFeeTokenApproval = async () => {
-    const waitForInput = openCustomFeeTokenApprovalDialog()
+    const waitForInput = openDialog('approve_custom_fee_token')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -391,7 +383,7 @@ export function TransferPanel() {
     }, 3000)
 
   const confirmCustomDestinationAddressForSCWallets = async () => {
-    const waitForInput = openCustomDestinationAddressConfirmationDialog()
+    const waitForInput = openDialog('scw_custom_destination_address')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -1166,13 +1158,6 @@ export function TransferPanel() {
     <>
       <DialogWrapper {...dialogProps} />
 
-      {nativeCurrency.isCustom && (
-        <CustomFeeTokenApprovalDialog
-          {...customFeeTokenApprovalDialogProps}
-          customFeeToken={nativeCurrency}
-        />
-      )}
-
       <USDCWithdrawalConfirmationDialog
         {...usdcWithdrawalConfirmationDialogProps}
         amount={amount}
@@ -1183,10 +1168,6 @@ export function TransferPanel() {
         amount={amount}
       />
 
-      <CustomDestinationAddressConfirmationDialog
-        {...customDestinationAddressConfirmationDialogProps}
-      />
-
       <div
         className={twMerge(
           'mb-7 flex flex-col border-y border-white/30 bg-gray-1 p-4 shadow-[0px_4px_20px_rgba(0,0,0,0.2)]',

diff --git a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
@@ -5,6 +5,11 @@ import { useIsOftV2Transfer } from '../TransferPanel/hooks/useIsOftV2Transfer'
 import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { WithdrawalConfirmationDialog } from '../TransferPanel/WithdrawalConfirmationDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
+import { CustomFeeTokenApprovalDialog } from '../TransferPanel/CustomFeeTokenApprovalDialog'
+import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { useNetworks } from '../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { CustomDestinationAddressConfirmationDialog } from '../TransferPanel/CustomDestinationAddressConfirmationDialog'
 /**
  * Returns a promise which resolves to an array [boolean, unknown] value,
  * `false` if the action was canceled and `true` if it was confirmed.
@@ -22,7 +27,12 @@ type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
  */
 type UseDialogResult = [DialogProps, OpenDialogFunction]
 
-type DialogType = 'approve_token' | 'approve_cctp_usdc' | 'withdraw'
+type DialogType =
+  | 'approve_token'
+  | 'approve_cctp_usdc'
+  | 'approve_custom_fee_token'
+  | 'withdraw'
+  | 'scw_custom_destination_address'
 
 export function useDialog2(): UseDialogResult {
   const resolveRef =
@@ -71,6 +81,9 @@ export function DialogWrapper(props: DialogProps) {
   const isOftTransfer = useIsOftV2Transfer()
   const [selectedToken] = useSelectedToken()
   const [{ amount }] = useArbQueryParams()
+  const [networks] = useNetworks()
+  const { childChainProvider } = useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const [isOpen, setIsOpen] = useState(false)
 
@@ -93,8 +106,20 @@ export function DialogWrapper(props: DialogProps) {
           isOft={isOftTransfer}
         />
       )
+    case 'approve_custom_fee_token':
+      if (nativeCurrency.isCustom) {
+        return (
+          <CustomFeeTokenApprovalDialog
+            {...commonProps}
+            customFeeToken={nativeCurrency}
+          />
+        )
+      }
+      return null
     case 'withdraw':
       return <WithdrawalConfirmationDialog {...commonProps} amount={amount} />
+    case 'scw_custom_destination_address':
+      return <CustomDestinationAddressConfirmationDialog {...commonProps} />
     default:
       return null
   }