refactor: move dialogs to a single component (part 4)

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])

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] = useDialog2()
 
-  const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
-
   const isCustomDestinationTransfer = !!latestDestinationAddress.current
 
   const {
@@ -245,9 +237,7 @@ export function TransferPanel() {
     const dialogType = getDialogType()
 
     if (dialogType) {
-      setTokenDepositCheckDialogType(dialogType)
-
-      const waitForInput = openTokenCheckDialog()
+      const waitForInput = openDialog(dialogType)
       const [confirmed] = await waitForInput()
 
       if (confirmed) {
@@ -313,23 +303,22 @@ export function TransferPanel() {
 
   function getDialogType(): TokenDepositCheckDialogType | null {
     if (isBridgingANewStandardToken) {
-      return 'new-token'
+      return 'deposit_token_new_token'
     }
 
     const isUserAddedToken =
       selectedToken &&
       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
     }
@@ -1119,12 +1108,6 @@ export function TransferPanel() {
         />
         <MoveFundsButton onClick={moveFundsButtonOnClick} />
 
-        <TokenDepositCheckDialog
-          {...tokenCheckDialogProps}
-          type={tokenDepositCheckDialogType}
-          symbol={selectedToken ? selectedToken.symbol : nativeCurrency.symbol}
-        />
-
         {showSmartContractWalletTooltip && (
           <Tippy
             placement="bottom-end"

packages/arb-token-bridge-ui/src/components/common/Dialog2.tsx

@@ -14,6 +14,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.
@@ -36,6 +37,9 @@ type DialogType =
   | 'approve_cctp_usdc'
   | 'approve_custom_fee_token'
   | 'import_token'
+  | 'deposit_token_new_token'
+  | 'deposit_token_user_added_token'
+  | 'import_token'
   | 'withdraw'
   | 'withdraw_usdc'
   | 'deposit_usdc'
@@ -131,6 +135,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 (