From 8ff1a9698a04caee9cc393e235bbb3b1d47f1349 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Fri, 28 Feb 2025 13:48:45 +0100
Subject: [PATCH] dialogs refactoring 5

---
 .../TransferPanel/TokenDepositCheckDialog.tsx | 12 ++++----
 .../TransferPanel/TransferPanel.tsx           | 29 ++++---------------
 .../src/components/common/NewDialog.tsx       | 13 ++++++++-
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenDepositCheckDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenDepositCheckDialog.tsx
index 13ac5eb6e0..2c048e741a 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenDepositCheckDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenDepositCheckDialog.tsx
@@ -7,7 +7,9 @@ import { ExternalLink } from '../common/ExternalLink'
 import { useNetworks } from '../../hooks/useNetworks'
 import { getNetworkName } from '../../util/networks'
 
-export type TokenDepositCheckDialogType = 'user-added-token' | 'new-token'
+export type TokenDepositCheckDialogType =
+  | 'deposit_token_user_added_token'
+  | 'deposit_token_new_token'
 
 export type TokenDepositCheckDialogProps = UseDialogProps & {
   type: TokenDepositCheckDialogType
@@ -23,14 +25,14 @@ export function TokenDepositCheckDialog(props: TokenDepositCheckDialogProps) {
 
   const textContent = useMemo(() => {
     switch (type) {
-      case 'user-added-token':
+      case 'deposit_token_user_added_token':
         return (
           <p className="pb-2">
             You are about to deposit {symbol} to {networkName}
           </p>
         )
 
-      case 'new-token':
+      case 'deposit_token_new_token':
         return (
           <div className="mb-4">
             <p className="pb-2">
@@ -50,10 +52,10 @@ export function TokenDepositCheckDialog(props: TokenDepositCheckDialogProps) {
 
   const title = useMemo(() => {
     switch (type) {
-      case 'user-added-token':
+      case 'deposit_token_user_added_token':
         return `Depositing ${symbol} to ${networkName}`
 
-      case 'new-token':
+      case 'deposit_token_new_token':
         return 'New Token Detected'
     }
   }, [type, symbol, networkName])
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 f99a92ca1b..5f7e1ba188 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -10,12 +10,8 @@ import { scaleFrom18DecimalsToNativeTokenDecimals } from '@arbitrum/sdk'
 
 import { useAppState } from '../../state'
 import { getNetworkName, isNetwork } from '../../util/networks'
-import {
-  TokenDepositCheckDialog,
-  TokenDepositCheckDialogType
-} from './TokenDepositCheckDialog'
+import { TokenDepositCheckDialogType } from './TokenDepositCheckDialog'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
-import { useDialog } from '../common/Dialog'
 import { TransferPanelSummary } from './TransferPanelSummary'
 import { useAppContextActions } from '../App/AppContext'
 import { trackEvent } from '../../util/AnalyticsUtils'
@@ -90,8 +86,6 @@ const networkConnectionWarningToast = () =>
 
 export function TransferPanel() {
   const [{ token: tokenFromSearchParams }] = useArbQueryParams()
-  const [tokenDepositCheckDialogType, setTokenDepositCheckDialogType] =
-    useState<TokenDepositCheckDialogType>('new-token')
   const [showSmartContractWalletTooltip, setShowSmartContractWalletTooltip] =
     useState(false)
 
@@ -101,7 +95,7 @@ export function TransferPanel() {
       warningTokens
     }
   } = useAppState()
-  const [selectedToken, setSelectedToken] = useSelectedToken()
+  const [selectedToken] = useSelectedToken()
   const { address: walletAddress } = useAccount()
   const { switchNetworkAsync } = useSwitchNetworkWithConfig({
     isSwitchingNetworkBeforeTx: true
@@ -155,8 +149,6 @@ export function TransferPanel() {
 
   const [dialogProps, openDialog] = useNewDialog()
 
-  const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
-
   const isCustomDestinationTransfer = !!latestDestinationAddress.current
 
   const {
@@ -247,9 +239,7 @@ export function TransferPanel() {
     const dialogType = getDialogType()
 
     if (dialogType) {
-      setTokenDepositCheckDialogType(dialogType)
-
-      const waitForInput = openTokenCheckDialog()
+      const waitForInput = openDialog(dialogType)
       const [confirmed] = await waitForInput()
 
       if (confirmed) {
@@ -317,7 +307,7 @@ export function TransferPanel() {
 
   function getDialogType(): TokenDepositCheckDialogType | null {
     if (isBridgingANewStandardToken) {
-      return 'new-token'
+      return 'deposit_token_new_token'
     }
 
     const isUserAddedToken =
@@ -325,15 +315,14 @@ export function TransferPanel() {
       selectedToken?.listIds.size === 0 &&
       typeof selectedToken.l2Address === 'undefined'
 
-    return isUserAddedToken ? 'user-added-token' : null
+    return isUserAddedToken ? 'deposit_token_user_added_token' : null
   }
 
   const firstTimeTokenBridgingConfirmation = async () => {
     // Check if we need to show `TokenDepositCheckDialog` for first-time bridging
     const dialogType = getDialogType()
     if (dialogType) {
-      setTokenDepositCheckDialogType(dialogType)
-      const waitForInput = openTokenCheckDialog()
+      const waitForInput = openDialog(dialogType)
       const [confirmed] = await waitForInput()
       return confirmed
     }
@@ -1124,12 +1113,6 @@ export function TransferPanel() {
         />
         <MoveFundsButton onClick={moveFundsButtonOnClick} />
 
-        <TokenDepositCheckDialog
-          {...tokenCheckDialogProps}
-          type={tokenDepositCheckDialogType}
-          symbol={selectedToken ? selectedToken.symbol : nativeCurrency.symbol}
-        />
-
         {showSmartContractWalletTooltip && (
           <Tippy
             placement="bottom-end"
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..3ea0926edd 100644
--- a/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
+++ b/packages/arb-token-bridge-ui/src/components/common/NewDialog.tsx
@@ -15,6 +15,7 @@ import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { CustomDestinationAddressConfirmationDialog } from '../TransferPanel/CustomDestinationAddressConfirmationDialog'
 import { TokenImportDialog } from '../TransferPanel/TokenImportDialog'
+import { TokenDepositCheckDialog } from '../TransferPanel/TokenDepositCheckDialog'
 /**
  * Returns a promise which resolves to an array [boolean, unknown] value,
  * `false` if the action was canceled and `true` if it was confirmed.
@@ -35,7 +36,8 @@ type UseDialogResult = [DialogProps, OpenDialogFunction]
 type DialogType =
   | 'approve_token'
   | 'import_token'
-  | 'deposit_token'
+  | 'deposit_token_new_token'
+  | 'deposit_token_user_added_token'
   | 'approve_custom_fee_token'
   | 'withdraw'
   | 'withdraw_usdc'
@@ -132,6 +134,15 @@ export function DialogWrapper(props: DialogProps) {
           tokenAddress={tokenFromSearchParams!}
         />
       )
+    case 'deposit_token_new_token':
+    case 'deposit_token_user_added_token':
+      return (
+        <TokenDepositCheckDialog
+          {...commonProps}
+          type={openedDialogType}
+          symbol={selectedToken ? selectedToken.symbol : nativeCurrency.symbol}
+        />
+      )
     case 'approve_custom_fee_token':
       if (nativeCurrency.isCustom) {
         return (