From 709e1ca1d12510b0f73156ea1047321292f68bfd Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 27 Feb 2025 16:44:49 +0100
Subject: [PATCH 01/18] dialog refactoring

---
 .../TransferPanel/TransferPanel.tsx           |  31 +----
 .../src/components/common/NewDialog.tsx       | 129 ++++++++++++++++++
 2 files changed, 136 insertions(+), 24 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx

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 7750358a3a..8bb0aa1e27 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -20,8 +20,6 @@ import {
 } from './TokenImportDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { useDialog } from '../common/Dialog'
-import { TokenApprovalDialog } from './TokenApprovalDialog'
-import { WithdrawalConfirmationDialog } from './WithdrawalConfirmationDialog'
 import { CustomDestinationAddressConfirmationDialog } from './CustomDestinationAddressConfirmationDialog'
 import { TransferPanelSummary } from './TransferPanelSummary'
 import { useAppContextActions } from '../App/AppContext'
@@ -84,6 +82,7 @@ import { useMainContentTabs } from '../MainContent/MainContent'
 import { useIsOftV2Transfer } from './hooks/useIsOftV2Transfer'
 import { OftV2TransferStarter } from '../../token-bridge-sdk/OftV2TransferStarter'
 import { highlightOftTransactionHistoryDisclaimer } from '../TransactionHistory/OftTransactionHistoryDisclaimer'
+import { useNewDialog, DialogWrapper } from '../common/NewDialog'
 
 const signerUndefinedError = 'Signer is undefined'
 const transferNotAllowedError = 'Transfer not allowed'
@@ -167,13 +166,12 @@ export function TransferPanel() {
 
   const latestDestinationAddress = useLatest(destinationAddress)
 
+  const [dialogProps, openDialog] = useNewDialog()
+
   const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
-  const [tokenApprovalDialogProps, openTokenApprovalDialog] = useDialog()
   const [customFeeTokenApprovalDialogProps, openCustomFeeTokenApprovalDialog] =
     useDialog()
-  const [withdrawalConfirmationDialogProps, openWithdrawalConfirmationDialog] =
-    useDialog()
   const [
     usdcWithdrawalConfirmationDialogProps,
     openUSDCWithdrawalConfirmationDialog
@@ -328,7 +326,7 @@ export function TransferPanel() {
 
   const tokenAllowanceApprovalCctp = async () => {
     setIsCctp(true)
-    const waitForInput = openTokenApprovalDialog()
+    const waitForInput = openDialog('approve_token')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -341,7 +339,7 @@ export function TransferPanel() {
 
   const tokenAllowanceApproval = async () => {
     setIsCctp(false)
-    const waitForInput = openTokenApprovalDialog()
+    const waitForInput = openDialog('approve_token')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -383,7 +381,7 @@ export function TransferPanel() {
   }
 
   const confirmWithdrawal = async () => {
-    const waitForInput = openWithdrawalConfirmationDialog()
+    const waitForInput = openDialog('withdrawal_confirmation')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -1148,12 +1146,7 @@ export function TransferPanel() {
 
   return (
     <>
-      <TokenApprovalDialog
-        {...tokenApprovalDialogProps}
-        token={selectedToken}
-        isCctp={isCctp}
-        isOft={isOftTransfer}
-      />
+      <DialogWrapper {...dialogProps} />
 
       {nativeCurrency.isCustom && (
         <CustomFeeTokenApprovalDialog
@@ -1162,16 +1155,6 @@ export function TransferPanel() {
         />
       )}
 
-      <WithdrawalConfirmationDialog
-        {...withdrawalConfirmationDialogProps}
-        amount={amount}
-      />
-
-      <USDCWithdrawalConfirmationDialog
-        {...usdcWithdrawalConfirmationDialogProps}
-        amount={amount}
-      />
-
       <USDCDepositConfirmationDialog
         {...usdcDepositConfirmationDialogProps}
         amount={amount}
diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
new file mode 100644
index 0000000000..d54abd71aa
--- /dev/null
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -0,0 +1,129 @@
+import { useCallback, useRef, useState } from 'react'
+
+import { ButtonProps } from './Button'
+import { TokenApprovalDialog } from '../TransferPanel/TokenApprovalDialog'
+import { useIsOftV2Transfer } from '../TransferPanel/hooks/useIsOftV2Transfer'
+import { useSelectedToken } from '../../hooks/useSelectedToken'
+import { useIsCctpTransfer } from '../TransferPanel/hooks/useIsCctpTransfer'
+import { WithdrawalConfirmationDialog } from '../TransferPanel/WithdrawalConfirmationDialog'
+import { useArbQueryParams } from '../../hooks/useArbQueryParams'
+/**
+ * Returns a promise which resolves to an array [boolean, unknown] value,
+ * `false` if the action was canceled and `true` if it was confirmed.
+ * Second index contain any additional information
+ */
+type WaitForInputFunction = () => Promise<[boolean, unknown]>
+
+/**
+ * Opens the dialog and returns a function which can be called to retreive a {@link WaitForInputFunction}.
+ */
+export type OpenDialogFunction = (
+  dialogType: DialogType
+) => WaitForInputFunction
+
+/**
+ * Contains two props, `isOpen` and `onClose`, which should be passed down to a Dialog component.
+ */
+export type UseDialogProps = Pick<DialogProps, 'openedDialog' | 'onClose'>
+
+/**
+ * Contains additional info about the dialog.
+ */
+export type OtherDialogInfo = { didOpen: boolean }
+
+/**
+ * Returns an array containing {@link UseDialogProps} and {@link OpenDialogFunction}.
+ */
+export type UseDialogResult = [
+  UseDialogProps,
+  OpenDialogFunction,
+  OtherDialogInfo
+]
+
+/**
+ * Initial parameters for the dialog.
+ */
+type UseDialogParams = {
+  /**
+   * Whether the dialog should be open by default.
+   */
+  defaultIsOpen?: boolean
+}
+
+type DialogType = 'approve_token' | 'withdrawal_confirmation'
+
+export function useNewDialog(params?: UseDialogParams): UseDialogResult {
+  const resolveRef =
+    useRef<
+      (value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void
+    >()
+
+  // Whether the dialog is currently open
+  const [openedDialog, setOpenedDialog] = useState<DialogType | null>(null)
+  // Whether the dialog was ever open
+  const [didOpen, setDidOpen] = useState(params?.defaultIsOpen ?? false)
+
+  const openDialog: OpenDialogFunction = useCallback(
+    (dialogType: DialogType) => {
+      setOpenedDialog(dialogType)
+      setDidOpen(true)
+
+      return () => {
+        return new Promise(resolve => {
+          resolveRef.current = resolve
+        })
+      }
+    },
+    []
+  )
+
+  const closeDialog = useCallback(
+    (confirmed: boolean, onCloseData?: unknown) => {
+      if (typeof resolveRef.current !== 'undefined') {
+        resolveRef.current([confirmed, onCloseData])
+      }
+
+      setOpenedDialog(null)
+    },
+    []
+  )
+
+  return [{ openedDialog, onClose: closeDialog }, openDialog, { didOpen }]
+}
+
+type DialogProps = {
+  openedDialog: DialogType | null
+  closeable?: boolean
+  title?: string | JSX.Element
+  initialFocus?: React.MutableRefObject<HTMLElement | null>
+  cancelButtonProps?: Partial<ButtonProps>
+  actionButtonProps?: Partial<ButtonProps>
+  actionButtonTitle?: string
+  isFooterHidden?: boolean
+  onClose: (confirmed: boolean, onCloseData?: unknown) => void
+  className?: string
+}
+
+export function DialogWrapper(props: DialogProps) {
+  const isOftTransfer = useIsOftV2Transfer()
+  const [selectedToken] = useSelectedToken()
+  const isCctp = useIsCctpTransfer()
+  const [{ amount }] = useArbQueryParams()
+
+  switch (props.openedDialog) {
+    case 'approve_token':
+      return (
+        <TokenApprovalDialog
+          {...props}
+          isOpen
+          token={selectedToken}
+          isCctp={isCctp}
+          isOft={isOftTransfer}
+        />
+      )
+    case 'withdrawal_confirmation':
+      return <WithdrawalConfirmationDialog {...props} isOpen amount={amount} />
+    default:
+      return null
+  }
+}

From e587845c0b2e06ad102a5895687bfeefd90ec91d Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 27 Feb 2025 16:48:31 +0100
Subject: [PATCH 02/18] fix

---
 .../src/components/TransferPanel/TransferPanel.tsx           | 5 +++++
 1 file changed, 5 insertions(+)

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 8bb0aa1e27..4aa42c18bd 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -1155,6 +1155,11 @@ export function TransferPanel() {
         />
       )}
 
+      <USDCWithdrawalConfirmationDialog
+        {...usdcWithdrawalConfirmationDialogProps}
+        amount={amount}
+      />
+
       <USDCDepositConfirmationDialog
         {...usdcDepositConfirmationDialogProps}
         amount={amount}

From 1e22e8b80095eb601ab5919f2f644dfdc28fc910 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 09:33:47 +0100
Subject: [PATCH 03/18] fixes and clean ups

---
 .../src/components/common/NewDialog.tsx       | 56 ++++++-------------
 1 file changed, 17 insertions(+), 39 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index d54abd71aa..ba1ab77dfd 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -1,6 +1,5 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { ButtonProps } from './Button'
 import { TokenApprovalDialog } from '../TransferPanel/TokenApprovalDialog'
 import { useIsOftV2Transfer } from '../TransferPanel/hooks/useIsOftV2Transfer'
 import { useSelectedToken } from '../../hooks/useSelectedToken'
@@ -26,33 +25,14 @@ export type OpenDialogFunction = (
  */
 export type UseDialogProps = Pick<DialogProps, 'openedDialog' | 'onClose'>
 
-/**
- * Contains additional info about the dialog.
- */
-export type OtherDialogInfo = { didOpen: boolean }
-
 /**
  * Returns an array containing {@link UseDialogProps} and {@link OpenDialogFunction}.
  */
-export type UseDialogResult = [
-  UseDialogProps,
-  OpenDialogFunction,
-  OtherDialogInfo
-]
-
-/**
- * Initial parameters for the dialog.
- */
-type UseDialogParams = {
-  /**
-   * Whether the dialog should be open by default.
-   */
-  defaultIsOpen?: boolean
-}
+export type UseDialogResult = [UseDialogProps, OpenDialogFunction]
 
 type DialogType = 'approve_token' | 'withdrawal_confirmation'
 
-export function useNewDialog(params?: UseDialogParams): UseDialogResult {
+export function useNewDialog(): UseDialogResult {
   const resolveRef =
     useRef<
       (value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void
@@ -60,13 +40,10 @@ export function useNewDialog(params?: UseDialogParams): UseDialogResult {
 
   // Whether the dialog is currently open
   const [openedDialog, setOpenedDialog] = useState<DialogType | null>(null)
-  // Whether the dialog was ever open
-  const [didOpen, setDidOpen] = useState(params?.defaultIsOpen ?? false)
 
   const openDialog: OpenDialogFunction = useCallback(
     (dialogType: DialogType) => {
       setOpenedDialog(dialogType)
-      setDidOpen(true)
 
       return () => {
         return new Promise(resolve => {
@@ -88,20 +65,12 @@ export function useNewDialog(params?: UseDialogParams): UseDialogResult {
     []
   )
 
-  return [{ openedDialog, onClose: closeDialog }, openDialog, { didOpen }]
+  return [{ openedDialog, onClose: closeDialog }, openDialog]
 }
 
 type DialogProps = {
   openedDialog: DialogType | null
-  closeable?: boolean
-  title?: string | JSX.Element
-  initialFocus?: React.MutableRefObject<HTMLElement | null>
-  cancelButtonProps?: Partial<ButtonProps>
-  actionButtonProps?: Partial<ButtonProps>
-  actionButtonTitle?: string
-  isFooterHidden?: boolean
   onClose: (confirmed: boolean, onCloseData?: unknown) => void
-  className?: string
 }
 
 export function DialogWrapper(props: DialogProps) {
@@ -110,19 +79,28 @@ export function DialogWrapper(props: DialogProps) {
   const isCctp = useIsCctpTransfer()
   const [{ amount }] = useArbQueryParams()
 
-  switch (props.openedDialog) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const { openedDialog } = props
+  const commonProps: DialogProps & { isOpen: boolean } = { ...props, isOpen }
+
+  // By doing this we enable fade in transition when dialog opens.
+  useEffect(() => {
+    setIsOpen(openedDialog !== null)
+  }, [openedDialog])
+
+  switch (openedDialog) {
     case 'approve_token':
       return (
         <TokenApprovalDialog
-          {...props}
-          isOpen
+          {...commonProps}
           token={selectedToken}
           isCctp={isCctp}
           isOft={isOftTransfer}
         />
       )
     case 'withdrawal_confirmation':
-      return <WithdrawalConfirmationDialog {...props} isOpen amount={amount} />
+      return <WithdrawalConfirmationDialog {...commonProps} amount={amount} />
     default:
       return null
   }

From 51a0e09c20af42851e5c85ba0bc68c5ed66c1c9f Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 10:00:29 +0100
Subject: [PATCH 04/18] clean ups

---
 .../src/components/common/NewDialog.tsx       | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index ba1ab77dfd..b8ce7a57dc 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -16,19 +16,12 @@ type WaitForInputFunction = () => Promise<[boolean, unknown]>
 /**
  * Opens the dialog and returns a function which can be called to retreive a {@link WaitForInputFunction}.
  */
-export type OpenDialogFunction = (
-  dialogType: DialogType
-) => WaitForInputFunction
+type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
 
 /**
- * Contains two props, `isOpen` and `onClose`, which should be passed down to a Dialog component.
+ * Returns an array containing {@link DialogProps} and {@link OpenDialogFunction}.
  */
-export type UseDialogProps = Pick<DialogProps, 'openedDialog' | 'onClose'>
-
-/**
- * Returns an array containing {@link UseDialogProps} and {@link OpenDialogFunction}.
- */
-export type UseDialogResult = [UseDialogProps, OpenDialogFunction]
+type UseDialogResult = [DialogProps, OpenDialogFunction]
 
 type DialogType = 'approve_token' | 'withdrawal_confirmation'
 
@@ -39,11 +32,13 @@ export function useNewDialog(): UseDialogResult {
     >()
 
   // Whether the dialog is currently open
-  const [openedDialog, setOpenedDialog] = useState<DialogType | null>(null)
+  const [openedDialogType, setOpenedDialogType] = useState<DialogType | null>(
+    null
+  )
 
   const openDialog: OpenDialogFunction = useCallback(
     (dialogType: DialogType) => {
-      setOpenedDialog(dialogType)
+      setOpenedDialogType(dialogType)
 
       return () => {
         return new Promise(resolve => {
@@ -60,16 +55,16 @@ export function useNewDialog(): UseDialogResult {
         resolveRef.current([confirmed, onCloseData])
       }
 
-      setOpenedDialog(null)
+      setOpenedDialogType(null)
     },
     []
   )
 
-  return [{ openedDialog, onClose: closeDialog }, openDialog]
+  return [{ openedDialogType, onClose: closeDialog }, openDialog]
 }
 
 type DialogProps = {
-  openedDialog: DialogType | null
+  openedDialogType: DialogType | null
   onClose: (confirmed: boolean, onCloseData?: unknown) => void
 }
 
@@ -81,15 +76,15 @@ export function DialogWrapper(props: DialogProps) {
 
   const [isOpen, setIsOpen] = useState(false)
 
-  const { openedDialog } = props
+  const { openedDialogType } = props
   const commonProps: DialogProps & { isOpen: boolean } = { ...props, isOpen }
 
   // By doing this we enable fade in transition when dialog opens.
   useEffect(() => {
-    setIsOpen(openedDialog !== null)
-  }, [openedDialog])
+    setIsOpen(openedDialogType !== null)
+  }, [openedDialogType])
 
-  switch (openedDialog) {
+  switch (openedDialogType) {
     case 'approve_token':
       return (
         <TokenApprovalDialog

From 13b7ce32df9023d0623787e1a9c7e42936c535ad Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 10:10:22 +0100
Subject: [PATCH 05/18] dialogs refactoring 2

---
 .../TransferPanel/TransferPanel.tsx           | 24 ++-----------------
 .../src/components/common/NewDialog.tsx       | 14 ++++++++++-
 2 files changed, 15 insertions(+), 23 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
index 4aa42c18bd..ec93e4ea49 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -31,8 +31,6 @@ import { errorToast, warningToast } from '../common/atoms/Toast'
 import { useAccountType } from '../../hooks/useAccountType'
 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'
@@ -172,14 +170,6 @@ export function TransferPanel() {
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
   const [customFeeTokenApprovalDialogProps, openCustomFeeTokenApprovalDialog] =
     useDialog()
-  const [
-    usdcWithdrawalConfirmationDialogProps,
-    openUSDCWithdrawalConfirmationDialog
-  ] = useDialog()
-  const [
-    usdcDepositConfirmationDialogProps,
-    openUSDCDepositConfirmationDialog
-  ] = useDialog()
 
   const { openDialog: openTokenImportDialog } = useTokenImportDialogStore()
   const [
@@ -301,7 +291,7 @@ export function TransferPanel() {
   const amountBigNumber = useAmountBigNumber()
 
   const confirmUsdcDepositFromNormalOrCctpBridge = async () => {
-    const waitForInput = openUSDCDepositConfirmationDialog()
+    const waitForInput = openDialog('usdc_deposit_confirmation')
     const [confirmed, primaryButtonClicked] = await waitForInput()
 
     // user declined to transfer altogether
@@ -319,7 +309,7 @@ export function TransferPanel() {
   }
 
   const confirmUsdcWithdrawalForCctp = async () => {
-    const waitForInput = openUSDCWithdrawalConfirmationDialog()
+    const waitForInput = openDialog('usdc_withdrawal_confirmation')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -1155,16 +1145,6 @@ export function TransferPanel() {
         />
       )}
 
-      <USDCWithdrawalConfirmationDialog
-        {...usdcWithdrawalConfirmationDialogProps}
-        amount={amount}
-      />
-
-      <USDCDepositConfirmationDialog
-        {...usdcDepositConfirmationDialogProps}
-        amount={amount}
-      />
-
       <CustomDestinationAddressConfirmationDialog
         {...customDestinationAddressConfirmationDialogProps}
       />
diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index b8ce7a57dc..97dd5f2bcd 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -6,6 +6,8 @@ import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { useIsCctpTransfer } from '../TransferPanel/hooks/useIsCctpTransfer'
 import { WithdrawalConfirmationDialog } from '../TransferPanel/WithdrawalConfirmationDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
+import { USDCWithdrawalConfirmationDialog } from '../TransferPanel/USDCWithdrawal/USDCWithdrawalConfirmationDialog'
+import { USDCDepositConfirmationDialog } from '../TransferPanel/USDCDeposit/USDCDepositConfirmationDialog'
 /**
  * Returns a promise which resolves to an array [boolean, unknown] value,
  * `false` if the action was canceled and `true` if it was confirmed.
@@ -23,7 +25,11 @@ type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
  */
 type UseDialogResult = [DialogProps, OpenDialogFunction]
 
-type DialogType = 'approve_token' | 'withdrawal_confirmation'
+type DialogType =
+  | 'approve_token'
+  | 'withdrawal_confirmation'
+  | 'usdc_withdrawal_confirmation'
+  | 'usdc_deposit_confirmation'
 
 export function useNewDialog(): UseDialogResult {
   const resolveRef =
@@ -96,6 +102,12 @@ export function DialogWrapper(props: DialogProps) {
       )
     case 'withdrawal_confirmation':
       return <WithdrawalConfirmationDialog {...commonProps} amount={amount} />
+    case 'usdc_withdrawal_confirmation':
+      return (
+        <USDCWithdrawalConfirmationDialog {...commonProps} amount={amount} />
+      )
+    case 'usdc_deposit_confirmation':
+      return <USDCDepositConfirmationDialog {...commonProps} amount={amount} />
     default:
       return null
   }

From 9aa2ea6c3a8c1549275d7666e1b33400cce15f04 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 11:07:49 +0100
Subject: [PATCH 06/18] native token approval dialog refactor

---
 .../TransferPanel/TransferPanel.tsx           | 12 +---------
 .../src/components/common/NewDialog.tsx       | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 11 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
index ec93e4ea49..461c622ba9 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -31,7 +31,6 @@ import { errorToast, warningToast } from '../common/atoms/Toast'
 import { useAccountType } from '../../hooks/useAccountType'
 import { DOCS_DOMAIN, GET_HELP_LINK } from '../../constants'
 import { AdvancedSettings } from './AdvancedSettings'
-import { CustomFeeTokenApprovalDialog } from './CustomFeeTokenApprovalDialog'
 import { isUserRejectedError } from '../../util/isUserRejectedError'
 import { getUsdcTokenAddressFromSourceChainId } from '../../state/cctpState'
 import { DepositStatus, MergedTransaction } from '../../state/app/state'
@@ -168,8 +167,6 @@ export function TransferPanel() {
 
   const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
-  const [customFeeTokenApprovalDialogProps, openCustomFeeTokenApprovalDialog] =
-    useDialog()
 
   const { openDialog: openTokenImportDialog } = useTokenImportDialogStore()
   const [
@@ -322,7 +319,7 @@ export function TransferPanel() {
   }
 
   const customFeeTokenApproval = async () => {
-    const waitForInput = openCustomFeeTokenApprovalDialog()
+    const waitForInput = openDialog('approve_custom_fee_token')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -1138,13 +1135,6 @@ export function TransferPanel() {
     <>
       <DialogWrapper {...dialogProps} />
 
-      {nativeCurrency.isCustom && (
-        <CustomFeeTokenApprovalDialog
-          {...customFeeTokenApprovalDialogProps}
-          customFeeToken={nativeCurrency}
-        />
-      )}
-
       <CustomDestinationAddressConfirmationDialog
         {...customDestinationAddressConfirmationDialogProps}
       />
diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index 97dd5f2bcd..299dad58db 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -8,6 +8,11 @@ import { WithdrawalConfirmationDialog } from '../TransferPanel/WithdrawalConfirm
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { USDCWithdrawalConfirmationDialog } from '../TransferPanel/USDCWithdrawal/USDCWithdrawalConfirmationDialog'
 import { USDCDepositConfirmationDialog } from '../TransferPanel/USDCDeposit/USDCDepositConfirmationDialog'
+import { CustomFeeTokenApprovalDialog } from '../TransferPanel/CustomFeeTokenApprovalDialog'
+import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { useLatest } from 'react-use'
+import { useNetworks } from '../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 /**
  * Returns a promise which resolves to an array [boolean, unknown] value,
  * `false` if the action was canceled and `true` if it was confirmed.
@@ -27,6 +32,7 @@ type UseDialogResult = [DialogProps, OpenDialogFunction]
 
 type DialogType =
   | 'approve_token'
+  | 'approve_custom_fee_token'
   | 'withdrawal_confirmation'
   | 'usdc_withdrawal_confirmation'
   | 'usdc_deposit_confirmation'
@@ -79,6 +85,12 @@ export function DialogWrapper(props: DialogProps) {
   const [selectedToken] = useSelectedToken()
   const isCctp = useIsCctpTransfer()
   const [{ amount }] = useArbQueryParams()
+  const [networks] = useNetworks()
+  const latestNetworks = useLatest(networks)
+  const {
+    current: { childChainProvider }
+  } = useLatest(useNetworksRelationship(latestNetworks.current))
+  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const [isOpen, setIsOpen] = useState(false)
 
@@ -100,6 +112,16 @@ export function DialogWrapper(props: DialogProps) {
           isOft={isOftTransfer}
         />
       )
+    case 'approve_custom_fee_token':
+      if (nativeCurrency.isCustom) {
+        return (
+          <CustomFeeTokenApprovalDialog
+            {...commonProps}
+            customFeeToken={nativeCurrency}
+          />
+        )
+      }
+      return null
     case 'withdrawal_confirmation':
       return <WithdrawalConfirmationDialog {...commonProps} amount={amount} />
     case 'usdc_withdrawal_confirmation':

From d466feb4197a0c9d7e2111c8428292f94c965dd0 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 11:09:19 +0100
Subject: [PATCH 07/18] rename

---
 .../src/components/TransferPanel/TransferPanel.tsx            | 2 +-
 .../arb-token-bridge-ui/src/components/common/NewDialog.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 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
index 4aa42c18bd..1dfb279b9d 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -381,7 +381,7 @@ export function TransferPanel() {
   }
 
   const confirmWithdrawal = async () => {
-    const waitForInput = openDialog('withdrawal_confirmation')
+    const waitForInput = openDialog('withdraw')
     const [confirmed] = await waitForInput()
     return confirmed
   }
diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index b8ce7a57dc..c2da62d893 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -23,7 +23,7 @@ type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
  */
 type UseDialogResult = [DialogProps, OpenDialogFunction]
 
-type DialogType = 'approve_token' | 'withdrawal_confirmation'
+type DialogType = 'approve_token' | 'withdraw'
 
 export function useNewDialog(): UseDialogResult {
   const resolveRef =
@@ -94,7 +94,7 @@ export function DialogWrapper(props: DialogProps) {
           isOft={isOftTransfer}
         />
       )
-    case 'withdrawal_confirmation':
+    case 'withdraw':
       return <WithdrawalConfirmationDialog {...commonProps} amount={amount} />
     default:
       return null

From 5ec3f12615d78300920e94546736ba2d8b2ef1ac Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 11:23:14 +0100
Subject: [PATCH 08/18] dialogs refactoring 3

---
 .../src/components/TransferPanel/TransferPanel.tsx     | 10 +---------
 .../src/components/common/NewDialog.tsx                |  4 ++++
 2 files changed, 5 insertions(+), 9 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
index 47deb21620..b456ca0081 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -169,10 +169,6 @@ export function TransferPanel() {
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
 
   const { openDialog: openTokenImportDialog } = useTokenImportDialogStore()
-  const [
-    customDestinationAddressConfirmationDialogProps,
-    openCustomDestinationAddressConfirmationDialog
-  ] = useDialog()
 
   const isCustomDestinationTransfer = !!latestDestinationAddress.current
 
@@ -381,7 +377,7 @@ export function TransferPanel() {
     }, 3000)
 
   const confirmCustomDestinationAddressForSCWallets = async () => {
-    const waitForInput = openCustomDestinationAddressConfirmationDialog()
+    const waitForInput = openDialog('scw_custom_destination_address')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -1135,10 +1131,6 @@ export function TransferPanel() {
     <>
       <DialogWrapper {...dialogProps} />
 
-      <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/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index 236f55dca1..a9e6cda7db 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -13,6 +13,7 @@ import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useLatest } from 'react-use'
 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.
@@ -36,6 +37,7 @@ type DialogType =
   | 'withdraw'
   | 'withdraw_usdc'
   | 'deposit_usdc'
+  | 'scw_custom_destination_address'
 
 export function useNewDialog(): UseDialogResult {
   const resolveRef =
@@ -130,6 +132,8 @@ export function DialogWrapper(props: DialogProps) {
       )
     case 'deposit_usdc':
       return <USDCDepositConfirmationDialog {...commonProps} amount={amount} />
+    case 'scw_custom_destination_address':
+      return <CustomDestinationAddressConfirmationDialog {...commonProps} />
     default:
       return null
   }

From 8cd5e96ef2668064d22ee5f62e3882f39ee47833 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 13:26:33 +0100
Subject: [PATCH 09/18] token import refactored dialog

---
 .../TransferPanel/TokenImportDialog.tsx       | 12 +++---
 .../TransferPanel/TransferPanel.tsx           | 43 +++----------------
 .../TransferPanel/TransferPanelUtils.ts       |  7 ---
 .../src/components/common/NewDialog.tsx       | 24 +++++++++--
 4 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
index 650332261e..9846877399 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
@@ -52,11 +52,12 @@ export const useTokenImportDialogStore = create<TokenImportDialogStore>(
   })
 )
 
-type TokenImportDialogProps = Omit<UseDialogProps, 'isOpen'> & {
+type TokenImportDialogProps = UseDialogProps & {
   tokenAddress: string
 }
 
 export function TokenImportDialog({
+  isOpen,
   onClose,
   tokenAddress
 }: TokenImportDialogProps): JSX.Element {
@@ -81,7 +82,6 @@ export function TokenImportDialog({
   const [status, setStatus] = useState<ImportStatus>(ImportStatus.LOADING)
   const [isImportingToken, setIsImportingToken] = useState<boolean>(false)
   const [tokenToImport, setTokenToImport] = useState<ERC20BridgeToken>()
-  const { isOpen } = useTokenImportDialogStore()
   const [isDialogVisible, setIsDialogVisible] = useState(false)
   const { data: l1Address, isLoading: isL1AddressLoading } = useERC20L1Address({
     eitherL1OrL2Address: tokenAddress,
@@ -280,9 +280,11 @@ export function TokenImportDialog({
       selectToken(tokenToImport!)
     } else {
       // Token is not added to the bridge, so we add it
-      storeNewToken(l1Address).catch(() => {
-        setStatus(ImportStatus.ERROR)
-      })
+      storeNewToken(l1Address)
+        .catch(() => {
+          setStatus(ImportStatus.ERROR)
+        })
+        .then(() => onClose(true))
     }
   }
 
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 b456ca0081..f99a92ca1b 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -14,13 +14,8 @@ import {
   TokenDepositCheckDialog,
   TokenDepositCheckDialogType
 } from './TokenDepositCheckDialog'
-import {
-  TokenImportDialog,
-  useTokenImportDialogStore
-} 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'
@@ -39,10 +34,7 @@ import {
   AssetType,
   DepositGasEstimates
 } from '../../hooks/arbTokenBridge.types'
-import {
-  ImportTokenModalStatus,
-  getWarningTokenDescription
-} from './TransferPanelUtils'
+import { getWarningTokenDescription } from './TransferPanelUtils'
 import { useTransactionHistory } from '../../hooks/useTransactionHistory'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
@@ -100,8 +92,6 @@ export function TransferPanel() {
   const [{ token: tokenFromSearchParams }] = useArbQueryParams()
   const [tokenDepositCheckDialogType, setTokenDepositCheckDialogType] =
     useState<TokenDepositCheckDialogType>('new-token')
-  const [importTokenModalStatus, setImportTokenModalStatus] =
-    useState<ImportTokenModalStatus>(ImportTokenModalStatus.IDLE)
   const [showSmartContractWalletTooltip, setShowSmartContractWalletTooltip] =
     useState(false)
 
@@ -165,11 +155,8 @@ export function TransferPanel() {
 
   const [dialogProps, openDialog] = useNewDialog()
 
-  const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
 
-  const { openDialog: openTokenImportDialog } = useTokenImportDialogStore()
-
   const isCustomDestinationTransfer = !!latestDestinationAddress.current
 
   const {
@@ -191,20 +178,6 @@ export function TransferPanel() {
     setShowProjectsListing(false)
   }, [childChain.id, parentChain.id])
 
-  useEffect(() => {
-    if (importTokenModalStatus !== ImportTokenModalStatus.IDLE) {
-      return
-    }
-
-    openTokenImportDialog()
-  }, [importTokenModalStatus, openTokenImportDialog])
-
-  function closeWithResetTokenImportDialog() {
-    setSelectedToken(null)
-    setImportTokenModalStatus(ImportTokenModalStatus.CLOSED)
-    tokenImportDialogProps.onClose(false)
-  }
-
   function clearAmountInput() {
     // clear amount input on transfer panel
     setAmount('')
@@ -245,6 +218,12 @@ export function TransferPanel() {
     tokensFromUser
   ])
 
+  useEffect(() => {
+    if (isTokenAlreadyImported === false && tokenFromSearchParams) {
+      openDialog('import_token')
+    }
+  }, [isTokenAlreadyImported, tokenFromSearchParams])
+
   const isBridgingANewStandardToken = useMemo(() => {
     const isUnbridgedToken =
       selectedToken !== null && typeof selectedToken.l2Address === 'undefined'
@@ -1145,14 +1124,6 @@ export function TransferPanel() {
         />
         <MoveFundsButton onClick={moveFundsButtonOnClick} />
 
-        {isTokenAlreadyImported === false && tokenFromSearchParams && (
-          <TokenImportDialog
-            {...tokenImportDialogProps}
-            onClose={closeWithResetTokenImportDialog}
-            tokenAddress={tokenFromSearchParams}
-          />
-        )}
-
         <TokenDepositCheckDialog
           {...tokenCheckDialogProps}
           type={tokenDepositCheckDialogType}
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelUtils.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelUtils.ts
index ea7514e1a8..37d5b8d8b4 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelUtils.ts
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelUtils.ts
@@ -1,10 +1,3 @@
-export enum ImportTokenModalStatus {
-  // "IDLE" is here to distinguish between the modal never being opened, and being closed after a user interaction
-  IDLE,
-  OPEN,
-  CLOSED
-}
-
 export function getWarningTokenDescription(warningTokenType: number) {
   switch (warningTokenType) {
     case 0:
diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index a9e6cda7db..a51e074510 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useLatest } from 'react-use'
 
 import { TokenApprovalDialog } from '../TransferPanel/TokenApprovalDialog'
 import { useIsOftV2Transfer } from '../TransferPanel/hooks/useIsOftV2Transfer'
@@ -10,10 +11,10 @@ import { USDCWithdrawalConfirmationDialog } from '../TransferPanel/USDCWithdrawa
 import { USDCDepositConfirmationDialog } from '../TransferPanel/USDCDeposit/USDCDepositConfirmationDialog'
 import { CustomFeeTokenApprovalDialog } from '../TransferPanel/CustomFeeTokenApprovalDialog'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
-import { useLatest } from 'react-use'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { CustomDestinationAddressConfirmationDialog } from '../TransferPanel/CustomDestinationAddressConfirmationDialog'
+import { TokenImportDialog } from '../TransferPanel/TokenImportDialog'
 /**
  * Returns a promise which resolves to an array [boolean, unknown] value,
  * `false` if the action was canceled and `true` if it was confirmed.
@@ -33,6 +34,8 @@ type UseDialogResult = [DialogProps, OpenDialogFunction]
 
 type DialogType =
   | 'approve_token'
+  | 'import_token'
+  | 'deposit_token'
   | 'approve_custom_fee_token'
   | 'withdraw'
   | 'withdraw_usdc'
@@ -84,9 +87,9 @@ type DialogProps = {
 
 export function DialogWrapper(props: DialogProps) {
   const isOftTransfer = useIsOftV2Transfer()
-  const [selectedToken] = useSelectedToken()
+  const [selectedToken, setSelectedToken] = useSelectedToken()
   const isCctp = useIsCctpTransfer()
-  const [{ amount }] = useArbQueryParams()
+  const [{ amount, token: tokenFromSearchParams }] = useArbQueryParams()
   const [networks] = useNetworks()
   const latestNetworks = useLatest(networks)
   const {
@@ -114,6 +117,21 @@ export function DialogWrapper(props: DialogProps) {
           isOft={isOftTransfer}
         />
       )
+    case 'import_token':
+      return (
+        <TokenImportDialog
+          {...commonProps}
+          onClose={imported => {
+            if (imported && tokenFromSearchParams) {
+              setSelectedToken(tokenFromSearchParams)
+            } else {
+              setSelectedToken(null)
+            }
+            commonProps.onClose(imported)
+          }}
+          tokenAddress={tokenFromSearchParams!}
+        />
+      )
     case 'approve_custom_fee_token':
       if (nativeCurrency.isCustom) {
         return (

From 57ceed8822e3e756c22b8b7eb022dac6e7dd9f7b Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 13:32:49 +0100
Subject: [PATCH 10/18] clean up

---
 packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
index a51e074510..f671d15fcb 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -35,7 +35,6 @@ type UseDialogResult = [DialogProps, OpenDialogFunction]
 type DialogType =
   | 'approve_token'
   | 'import_token'
-  | 'deposit_token'
   | 'approve_custom_fee_token'
   | 'withdraw'
   | 'withdraw_usdc'

From bcb72ea1bfc5303c77163c4c928cac8f5154b0ba Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 3 Mar 2025 10:50:59 +0100
Subject: [PATCH 11/18] rename to dialog2

---
 .../src/components/TransferPanel/TransferPanel.tsx            | 4 ++--
 .../src/components/common/{NewDialog.tsx => Dialog2.tsx}      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/arb-token-bridge-ui/src/components/common/{NewDialog.tsx => Dialog2.tsx} (98%)

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 1dfb279b9d..3e13836866 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -82,7 +82,7 @@ import { useMainContentTabs } from '../MainContent/MainContent'
 import { useIsOftV2Transfer } from './hooks/useIsOftV2Transfer'
 import { OftV2TransferStarter } from '../../token-bridge-sdk/OftV2TransferStarter'
 import { highlightOftTransactionHistoryDisclaimer } from '../TransactionHistory/OftTransactionHistoryDisclaimer'
-import { useNewDialog, DialogWrapper } from '../common/NewDialog'
+import { useDialog2, DialogWrapper } from '../common/Dialog2'
 
 const signerUndefinedError = 'Signer is undefined'
 const transferNotAllowedError = 'Transfer not allowed'
@@ -166,7 +166,7 @@ export function TransferPanel() {
 
   const latestDestinationAddress = useLatest(destinationAddress)
 
-  const [dialogProps, openDialog] = useNewDialog()
+  const [dialogProps, openDialog] = useDialog2()
 
   const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
diff --git a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
similarity index 98%
rename from packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
rename to packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
index c2da62d893..3413e3f15a 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
@@ -25,7 +25,7 @@ type UseDialogResult = [DialogProps, OpenDialogFunction]
 
 type DialogType = 'approve_token' | 'withdraw'
 
-export function useNewDialog(): UseDialogResult {
+export function useDialog2(): UseDialogResult {
   const resolveRef =
     useRef<
       (value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void

From 59e93e4cc21c159e2cbae4fbd1b9f8a944184364 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 3 Mar 2025 11:48:54 +0100
Subject: [PATCH 12/18] remove import

---
 .../src/components/TransferPanel/TransferPanel.tsx               | 1 -
 1 file changed, 1 deletion(-)

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 c5dbd88c0f..311eb94442 100644
--- 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'

From 40bfdc2c9ce6c382378313aa917c417be823a25c Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 3 Mar 2025 14:43:00 +0100
Subject: [PATCH 13/18] fix cctp for approvals

---
 .../TransferPanel/TransferPanel.tsx           |  9 +---
 .../src/components/common/Dialog2.tsx         | 44 +++++++++++++++----
 2 files changed, 38 insertions(+), 15 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
index 3e13836866..044544eeef 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -195,8 +195,6 @@ export function TransferPanel() {
     updateEthChildBalance
   } = useBalances()
 
-  const [isCctp, setIsCctp] = useState(false)
-
   const { destinationAddressError } = useDestinationAddressError()
 
   const [showProjectsListing, setShowProjectsListing] = useState(false)
@@ -325,8 +323,7 @@ export function TransferPanel() {
   }
 
   const tokenAllowanceApprovalCctp = async () => {
-    setIsCctp(true)
-    const waitForInput = openDialog('approve_token')
+    const waitForInput = openDialog('approve_token', { isCctp: true })
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -338,8 +335,7 @@ export function TransferPanel() {
   }
 
   const tokenAllowanceApproval = async () => {
-    setIsCctp(false)
-    const waitForInput = openDialog('approve_token')
+    const waitForInput = openDialog('approve_token', { isCctp: false })
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -579,7 +575,6 @@ export function TransferPanel() {
       //
     } finally {
       setTransferring(false)
-      setIsCctp(false)
     }
   }
 
diff --git a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
index 3413e3f15a..5a49dfa0e2 100644
--- a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
@@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { TokenApprovalDialog } from '../TransferPanel/TokenApprovalDialog'
 import { useIsOftV2Transfer } from '../TransferPanel/hooks/useIsOftV2Transfer'
 import { useSelectedToken } from '../../hooks/useSelectedToken'
-import { useIsCctpTransfer } from '../TransferPanel/hooks/useIsCctpTransfer'
 import { WithdrawalConfirmationDialog } from '../TransferPanel/WithdrawalConfirmationDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 /**
@@ -13,10 +12,25 @@ import { useArbQueryParams } from '../../hooks/useArbQueryParams'
  */
 type WaitForInputFunction = () => Promise<[boolean, unknown]>
 
+type HasParams<T extends DialogType> = T extends keyof DialogTypeParams
+  ? true
+  : false
+
+type ParamsType<T extends DialogType> = HasParams<T> extends true
+  ? T extends keyof DialogTypeParams
+    ? DialogTypeParams[T]
+    : never
+  : Record<string, unknown> | undefined
+
 /**
  * Opens the dialog and returns a function which can be called to retreive a {@link WaitForInputFunction}.
  */
-type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
+type OpenDialogFunction = <T extends DialogType>(
+  dialogType: T,
+  ...args: T extends keyof DialogTypeParams
+    ? [params: DialogTypeParams[T]]
+    : [params?: undefined]
+) => WaitForInputFunction
 
 /**
  * Returns an array containing {@link DialogProps} and {@link OpenDialogFunction}.
@@ -25,20 +39,33 @@ type UseDialogResult = [DialogProps, OpenDialogFunction]
 
 type DialogType = 'approve_token' | 'withdraw'
 
+// Add additional properties here
+type DialogTypeParams = {
+  approve_token: { isCctp: boolean }
+}
+
 export function useDialog2(): UseDialogResult {
   const resolveRef =
     useRef<
       (value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void
     >()
 
+  const [params, setParams] = useState<ParamsType<DialogType>>()
+
   // Whether the dialog is currently open
   const [openedDialogType, setOpenedDialogType] = useState<DialogType | null>(
     null
   )
 
   const openDialog: OpenDialogFunction = useCallback(
-    (dialogType: DialogType) => {
+    <T extends DialogType>(
+      dialogType: T,
+      ...args: T extends keyof DialogTypeParams
+        ? [params: DialogTypeParams[T]]
+        : [params?: Record<string, unknown>]
+    ) => {
       setOpenedDialogType(dialogType)
+      setParams(args[0])
 
       return () => {
         return new Promise(resolve => {
@@ -60,18 +87,18 @@ export function useDialog2(): UseDialogResult {
     []
   )
 
-  return [{ openedDialogType, onClose: closeDialog }, openDialog]
+  return [{ openedDialogType, onClose: closeDialog, params }, openDialog]
 }
 
-type DialogProps = {
-  openedDialogType: DialogType | null
+type DialogProps<T extends DialogType = DialogType> = {
+  openedDialogType: T | null
   onClose: (confirmed: boolean, onCloseData?: unknown) => void
+  params: ParamsType<T>
 }
 
 export function DialogWrapper(props: DialogProps) {
   const isOftTransfer = useIsOftV2Transfer()
   const [selectedToken] = useSelectedToken()
-  const isCctp = useIsCctpTransfer()
   const [{ amount }] = useArbQueryParams()
 
   const [isOpen, setIsOpen] = useState(false)
@@ -86,11 +113,12 @@ export function DialogWrapper(props: DialogProps) {
 
   switch (openedDialogType) {
     case 'approve_token':
+      const approveTokenParams = props.params as DialogTypeParams['approve_token']
       return (
         <TokenApprovalDialog
           {...commonProps}
           token={selectedToken}
-          isCctp={isCctp}
+          isCctp={approveTokenParams.isCctp}
           isOft={isOftTransfer}
         />
       )

From cab713ab0ce11e21732a2b23d867a9a6184ab17b Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 3 Mar 2025 14:46:33 +0100
Subject: [PATCH 14/18] run prettier

---
 packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
index 5a49dfa0e2..18e86ad95c 100644
--- a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
@@ -113,7 +113,8 @@ export function DialogWrapper(props: DialogProps) {
 
   switch (openedDialogType) {
     case 'approve_token':
-      const approveTokenParams = props.params as DialogTypeParams['approve_token']
+      const approveTokenParams =
+        props.params as DialogTypeParams['approve_token']
       return (
         <TokenApprovalDialog
           {...commonProps}

From 54797e5007b97c658800f14162d67239157eff31 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 3 Mar 2025 16:08:19 +0100
Subject: [PATCH 15/18] better fix

---
 .../TransferPanel/TransferPanel.tsx           |  4 +-
 .../src/components/common/Dialog2.tsx         | 46 ++++---------------
 2 files changed, 10 insertions(+), 40 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
index 044544eeef..9bb27612ce 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -323,7 +323,7 @@ export function TransferPanel() {
   }
 
   const tokenAllowanceApprovalCctp = async () => {
-    const waitForInput = openDialog('approve_token', { isCctp: true })
+    const waitForInput = openDialog('approve_cctp_usdc')
     const [confirmed] = await waitForInput()
     return confirmed
   }
@@ -335,7 +335,7 @@ export function TransferPanel() {
   }
 
   const tokenAllowanceApproval = async () => {
-    const waitForInput = openDialog('approve_token', { isCctp: false })
+    const waitForInput = openDialog('approve_token')
     const [confirmed] = await waitForInput()
     return confirmed
   }
diff --git a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
index 18e86ad95c..9d9e219a4c 100644
--- a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
@@ -12,37 +12,17 @@ import { useArbQueryParams } from '../../hooks/useArbQueryParams'
  */
 type WaitForInputFunction = () => Promise<[boolean, unknown]>
 
-type HasParams<T extends DialogType> = T extends keyof DialogTypeParams
-  ? true
-  : false
-
-type ParamsType<T extends DialogType> = HasParams<T> extends true
-  ? T extends keyof DialogTypeParams
-    ? DialogTypeParams[T]
-    : never
-  : Record<string, unknown> | undefined
-
 /**
  * Opens the dialog and returns a function which can be called to retreive a {@link WaitForInputFunction}.
  */
-type OpenDialogFunction = <T extends DialogType>(
-  dialogType: T,
-  ...args: T extends keyof DialogTypeParams
-    ? [params: DialogTypeParams[T]]
-    : [params?: undefined]
-) => WaitForInputFunction
+type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
 
 /**
  * Returns an array containing {@link DialogProps} and {@link OpenDialogFunction}.
  */
 type UseDialogResult = [DialogProps, OpenDialogFunction]
 
-type DialogType = 'approve_token' | 'withdraw'
-
-// Add additional properties here
-type DialogTypeParams = {
-  approve_token: { isCctp: boolean }
-}
+type DialogType = 'approve_token' | 'approve_cctp_usdc' | 'withdraw'
 
 export function useDialog2(): UseDialogResult {
   const resolveRef =
@@ -50,22 +30,14 @@ export function useDialog2(): UseDialogResult {
       (value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void
     >()
 
-  const [params, setParams] = useState<ParamsType<DialogType>>()
-
   // Whether the dialog is currently open
   const [openedDialogType, setOpenedDialogType] = useState<DialogType | null>(
     null
   )
 
   const openDialog: OpenDialogFunction = useCallback(
-    <T extends DialogType>(
-      dialogType: T,
-      ...args: T extends keyof DialogTypeParams
-        ? [params: DialogTypeParams[T]]
-        : [params?: Record<string, unknown>]
-    ) => {
+    (dialogType: DialogType) => {
       setOpenedDialogType(dialogType)
-      setParams(args[0])
 
       return () => {
         return new Promise(resolve => {
@@ -87,13 +59,12 @@ export function useDialog2(): UseDialogResult {
     []
   )
 
-  return [{ openedDialogType, onClose: closeDialog, params }, openDialog]
+  return [{ openedDialogType, onClose: closeDialog }, openDialog]
 }
 
-type DialogProps<T extends DialogType = DialogType> = {
-  openedDialogType: T | null
+type DialogProps = {
+  openedDialogType: DialogType | null
   onClose: (confirmed: boolean, onCloseData?: unknown) => void
-  params: ParamsType<T>
 }
 
 export function DialogWrapper(props: DialogProps) {
@@ -113,13 +84,12 @@ export function DialogWrapper(props: DialogProps) {
 
   switch (openedDialogType) {
     case 'approve_token':
-      const approveTokenParams =
-        props.params as DialogTypeParams['approve_token']
+    case 'approve_cctp_usdc':
       return (
         <TokenApprovalDialog
           {...commonProps}
           token={selectedToken}
-          isCctp={approveTokenParams.isCctp}
+          isCctp={openedDialogType === 'approve_cctp_usdc'}
           isOft={isOftTransfer}
         />
       )

From fa446ca651a37ae5d97b2c8fcf2acee8032c8fde Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Mon, 3 Mar 2025 16:08:37 +0100
Subject: [PATCH 16/18] typo

---
 packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
index 9d9e219a4c..8279fa804d 100644
--- a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
@@ -13,7 +13,7 @@ import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 type WaitForInputFunction = () => Promise<[boolean, unknown]>
 
 /**
- * Opens the dialog and returns a function which can be called to retreive a {@link WaitForInputFunction}.
+ * Opens the dialog and returns a function which can be called to retrieve a {@link WaitForInputFunction}.
  */
 type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
 

From 7ccafcf92217b06020862a588a6359d92db6ae72 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 6 Mar 2025 14:02:00 +0100
Subject: [PATCH 17/18] clean up

---
 .../TransferPanel/TransferPanel.tsx           |  4 +--
 .../src/components/common/Dialog2.tsx         | 27 +++++++++----------
 2 files changed, 15 insertions(+), 16 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
index a056808205..30a61edbd5 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -106,7 +106,7 @@ export function TransferPanel() {
       warningTokens
     }
   } = useAppState()
-  const [selectedToken, setSelectedToken] = useSelectedToken()
+  const [selectedToken] = useSelectedToken()
   const { address: walletAddress } = useAccount()
   const { switchNetworkAsync } = useSwitchNetworkWithConfig({
     isSwitchingNetworkBeforeTx: true
@@ -234,7 +234,7 @@ export function TransferPanel() {
     if (isTokenAlreadyImported === false && tokenFromSearchParams) {
       openDialog('import_token')
     }
-  }, [isTokenAlreadyImported, tokenFromSearchParams])
+  }, [isTokenAlreadyImported, tokenFromSearchParams, openDialog])
 
   const isBridgingANewStandardToken = useMemo(() => {
     const isUnbridgedToken =
diff --git a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
index 7527e18990..30a79ded91 100644
--- a/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx
@@ -109,20 +109,19 @@ export function DialogWrapper(props: DialogProps) {
         />
       )
     case 'import_token':
-      return (
-        <TokenImportDialog
-          {...commonProps}
-          onClose={imported => {
-            if (imported && tokenFromSearchParams) {
-              setSelectedToken(tokenFromSearchParams)
-            } else {
-              setSelectedToken(null)
-            }
-            commonProps.onClose(imported)
-          }}
-          tokenAddress={tokenFromSearchParams!}
-        />
-      )
+      if (tokenFromSearchParams) {
+        return (
+          <TokenImportDialog
+            {...commonProps}
+            onClose={imported => {
+              setSelectedToken(imported ? tokenFromSearchParams : null)
+              commonProps.onClose(imported)
+            }}
+            tokenAddress={tokenFromSearchParams}
+          />
+        )
+      }
+      return null
     case 'approve_custom_fee_token':
       if (nativeCurrency.isCustom) {
         return (

From c8ebad587c29205b71970f7a53906fcc8a2428b8 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 6 Mar 2025 14:03:16 +0100
Subject: [PATCH 18/18] clean up

---
 .../TransferPanel/TokenImportDialog.tsx           | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
index 54047e0360..f809e47b51 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useLatest } from 'react-use'
-import { create } from 'zustand'
 
 import { useERC20L1Address } from '../../hooks/useERC20L1Address'
 import { useAppState } from '../../state'
@@ -39,20 +38,6 @@ type TokenListSearchResult =
       status: ImportStatus
     }
 
-type TokenImportDialogStore = {
-  isOpen: boolean
-  openDialog: () => void
-  closeDialog: () => void
-}
-
-export const useTokenImportDialogStore = create<TokenImportDialogStore>(
-  set => ({
-    isOpen: false,
-    openDialog: () => set({ isOpen: true }),
-    closeDialog: () => set({ isOpen: false })
-  })
-)
-
 type TokenImportDialogProps = UseDialogProps & {
   tokenAddress: string
 }