refactor: move dialogs to a single component (part 6 - final)

packages/arb-token-bridge-ui/src/components/TransferPanel/CustomDestinationAddressConfirmationDialog.tsx

@@ -1,16 +1,14 @@
 import { useState } from 'react'
 
-import { Dialog, UseDialogProps } from '../common/Dialog'
+import { Dialog, DialogProps } from '../common/Dialog'
 import { ExternalLink } from '../common/ExternalLink'
 import { useNetworks } from '../../hooks/useNetworks'
 import { getExplorerUrl, getNetworkName } from '../../util/networks'
 import { shortenAddress } from '../../util/CommonUtils'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { Checkbox } from '../common/Checkbox'
 
-export function CustomDestinationAddressConfirmationDialog(
-  props: UseDialogProps
-) {
+export function CustomDestinationAddressConfirmationDialog(props: DialogProps) {
   const [{ destinationAddress = '' }] = useArbQueryParams()
 
   const [networks] = useNetworks()

packages/arb-token-bridge-ui/src/components/TransferPanel/CustomFeeTokenApprovalDialog.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useSigner } from 'wagmi'
 import { BigNumber, constants, utils } from 'ethers'
-import { Dialog, UseDialogProps } from '../common/Dialog'
+import { Dialog, DialogProps } from '../common/Dialog'
 import { Checkbox } from '../common/Checkbox'
 import { SafeImage } from '../common/SafeImage'
 import { ExternalLink } from '../common/ExternalLink'
@@ -19,7 +19,7 @@ import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 
-export type CustomFeeTokenApprovalDialogProps = UseDialogProps & {
+export type CustomFeeTokenApprovalDialogProps = DialogProps & {
   customFeeToken: NativeCurrencyErc20
 }
 

packages/arb-token-bridge-ui/src/components/TransferPanel/OneNovaTransferDialog.tsx

@@ -4,7 +4,7 @@ import Hop from '@/images/bridge/hop.png'
 import { TabButton } from '../common/Tab'
 import { BridgesTable } from '../common/BridgesTable'
 import { SecurityNotGuaranteed } from './SecurityLabels'
-import { Dialog, UseDialogProps } from '../common/Dialog'
+import { Dialog, DialogProps } from '../common/Dialog'
 import { FastBridgeInfo, FastBridgeNames } from '../../util/fastBridges'
 import { getNetworkName, isNetwork } from '../../util/networks'
 import { ChainId } from '../../types/ChainId'
@@ -46,7 +46,7 @@ function getDialogSourceAndDestinationChains({
   }
 }
 
-export function OneNovaTransferDialog(props: UseDialogProps) {
+export function OneNovaTransferDialog(props: DialogProps) {
   const [selectedToken] = useSelectedToken()
   const [{ amount }] = useArbQueryParams()
   const [{ sourceChain, destinationChain }] = useNetworks()

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenApprovalDialog.tsx

@@ -3,7 +3,7 @@ import { BigNumber, constants, utils } from 'ethers'
 import { useAccount, useChainId } from 'wagmi'
 
 import { useSigner } from 'wagmi'
-import { Dialog, UseDialogProps } from '../common/Dialog'
+import { Dialog, DialogProps } from '../common/Dialog'
 import { Checkbox } from '../common/Checkbox'
 import { ExternalLink } from '../common/ExternalLink'
 import { useETHPrice } from '../../hooks/useETHPrice'
@@ -29,7 +29,7 @@ import { NoteBox } from '../common/NoteBox'
 import { OftV2TransferStarter } from '../../token-bridge-sdk/OftV2TransferStarter'
 import { getOftV2TransferConfig } from '../../token-bridge-sdk/oftUtils'
 
-export type TokenApprovalDialogProps = UseDialogProps & {
+export type TokenApprovalDialogProps = DialogProps & {
   token: ERC20BridgeToken | null
   isCctp: boolean
   isOft: boolean

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenDepositCheckDialog.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 
-import { Dialog, UseDialogProps } from '../common/Dialog'
+import { Dialog, DialogProps } from '../common/Dialog'
 import { DOCS_DOMAIN } from '../../constants'
 import { NoteBox } from '../common/NoteBox'
 import { ExternalLink } from '../common/ExternalLink'
@@ -11,7 +11,7 @@ export type TokenDepositCheckDialogType =
   | 'deposit_token_user_added_token'
   | 'deposit_token_new_token'
 
-export type TokenDepositCheckDialogProps = UseDialogProps & {
+export type TokenDepositCheckDialogProps = DialogProps & {
   type: TokenDepositCheckDialogType
   symbol: string
 }

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx

@@ -10,7 +10,7 @@ import {
   isValidErc20
 } from '../../util/TokenUtils'
 import { Loader } from '../common/atoms/Loader'
-import { Dialog, UseDialogProps } from '../common/Dialog'
+import { Dialog, DialogProps } from '../common/Dialog'
 import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { warningToast } from '../common/atoms/Toast'
@@ -52,7 +52,7 @@ export const useTokenImportDialogStore = create<TokenImportDialogStore>(
   })
 )
 
-type TokenImportDialogProps = UseDialogProps & {
+type TokenImportDialogProps = DialogProps & {
   tokenAddress: string
 }
 

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx

@@ -67,7 +67,7 @@ import { useMainContentTabs } from '../MainContent/MainContent'
 import { useIsOftV2Transfer } from './hooks/useIsOftV2Transfer'
 import { OftV2TransferStarter } from '../../token-bridge-sdk/OftV2TransferStarter'
 import { highlightOftTransactionHistoryDisclaimer } from '../TransactionHistory/OftTransactionHistoryDisclaimer'
-import { useDialog2, DialogWrapper } from '../common/Dialog2'
+import { useDialog, DialogWrapper } from '../common/DialogWrapper'
 
 const signerUndefinedError = 'Signer is undefined'
 const transferNotAllowedError = 'Transfer not allowed'
@@ -147,7 +147,7 @@ export function TransferPanel() {
 
   const latestDestinationAddress = useLatest(destinationAddress)
 
-  const [dialogProps, openDialog] = useDialog2()
+  const [dialogProps, openDialog] = useDialog()
 
   const isCustomDestinationTransfer = !!latestDestinationAddress.current
 

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx

@@ -24,7 +24,7 @@ import { useAmount2InputVisibility } from './SourceNetworkBox'
 import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
 import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
 import { sanitizeTokenSymbol } from '../../../util/TokenUtils'
-import { DialogWrapper, useDialog2 } from '../../common/Dialog2'
+import { DialogWrapper, useDialog } from '../../common/DialogWrapper'
 
 function BalanceRow({
   parentErc20Address,
@@ -184,7 +184,7 @@ function BalancesContainer() {
 export function DestinationNetworkBox() {
   const [networks] = useNetworks()
   const [{ destinationAddress }] = useArbQueryParams()
-  const [dialogProps, openDialog] = useDialog2()
+  const [dialogProps, openDialog] = useDialog()
   const {
     network: { logo: networkLogo }
   } = getBridgeUiConfigForChain(networks.destinationChain.id)

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx

@@ -33,7 +33,7 @@ import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
 import { useSourceChainNativeCurrencyDecimals } from '../../../hooks/useSourceChainNativeCurrencyDecimals'
 import { useIsOftV2Transfer } from '../hooks/useIsOftV2Transfer'
-import { DialogWrapper, useDialog2 } from '../../common/Dialog2'
+import { DialogWrapper, useDialog } from '../../common/DialogWrapper'
 
 function Amount2ToggleButton({
   onClick
@@ -85,7 +85,7 @@ export function SourceNetworkBox() {
   const [{ amount, amount2 }] = useArbQueryParams()
   const { setAmount, setAmount2 } = useSetInputAmount()
   const { maxAmount, maxAmount2 } = useMaxAmount()
-  const [dialogProps, openDialog] = useDialog2()
+  const [dialogProps, openDialog] = useDialog()
   const isBatchTransferSupported = useIsBatchTransferSupported()
   const decimals = useSelectedTokenDecimals()
   const { errorMessages } = useTransferReadiness()

packages/arb-token-bridge-ui/src/components/TransferPanel/USDCDeposit/USDCDepositConfirmationDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { Tab } from '@headlessui/react'
 
-import { Dialog, UseDialogProps } from '../../common/Dialog'
+import { Dialog, DialogProps } from '../../common/Dialog'
 import { ExternalLink } from '../../common/ExternalLink'
 import {
   SpecialTokenSymbol,
@@ -30,7 +30,7 @@ import { SecurityGuaranteed, SecurityNotGuaranteed } from '../SecurityLabels'
 import { getUSDCAddresses } from '../../../state/cctpState'
 import { useSelectedToken } from '../../../hooks/useSelectedToken'
 
-type Props = UseDialogProps & {
+type Props = DialogProps & {
   amount: string
 }
 

packages/arb-token-bridge-ui/src/components/TransferPanel/USDCWithdrawal/USDCWithdrawalConfirmationDialog.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { Tab } from '@headlessui/react'
 
-import { Dialog, UseDialogProps } from '../../common/Dialog'
+import { Dialog, DialogProps } from '../../common/Dialog'
 import { ExternalLink } from '../../common/ExternalLink'
 import {
   SpecialTokenSymbol,
@@ -34,7 +34,7 @@ enum SelectedTabName {
 const defaultSelectedTabName: SelectedTabName = SelectedTabName.Cctp
 
 export function USDCWithdrawalConfirmationDialog(
-  props: UseDialogProps & { amount: string }
+  props: DialogProps & { amount: string }
 ) {
   const [networks] = useNetworks()
   const { childChain, parentChain } = useNetworksRelationship(networks)

packages/arb-token-bridge-ui/src/components/TransferPanel/WithdrawalConfirmationDialog.tsx

@@ -3,7 +3,7 @@ import { Tab } from '@headlessui/react'
 import dayjs from 'dayjs'
 import Image from 'next/image'
 
-import { Dialog, UseDialogProps } from '../common/Dialog'
+import { Dialog, DialogProps } from '../common/Dialog'
 import { Checkbox } from '../common/Checkbox'
 import { ExternalLink } from '../common/ExternalLink'
 import { TabButton } from '../common/Tab'
@@ -40,7 +40,7 @@ function getCalendarUrl(
 }
 
 export function WithdrawalConfirmationDialog(
-  props: UseDialogProps & { amount: string }
+  props: DialogProps & { amount: string }
 ) {
   const [networks] = useNetworks()
   const { childChain, childChainProvider, parentChain } =

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

@@ -4,82 +4,6 @@ import { XMarkIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 
 import { Button, ButtonProps } from './Button'
-/**
- * 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 = () => WaitForInputFunction
-
-/**
- * Contains two props, `isOpen` and `onClose`, which should be passed down to a Dialog component.
- */
-export type UseDialogProps = Pick<DialogProps, 'isOpen' | '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 function useDialog(params?: UseDialogParams): UseDialogResult {
-  const resolveRef =
-    useRef<
-      (value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void
-    >()
-
-  // Whether the dialog is currently open
-  const [isOpen, setIsOpen] = useState(params?.defaultIsOpen ?? false)
-  // Whether the dialog was ever open
-  const [didOpen, setDidOpen] = useState(params?.defaultIsOpen ?? false)
-
-  const openDialog: OpenDialogFunction = useCallback(() => {
-    setIsOpen(true)
-    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])
-      }
-
-      setIsOpen(false)
-    },
-    []
-  )
-
-  return [{ isOpen, onClose: closeDialog }, openDialog, { didOpen }]
-}
 
 export type DialogProps = {
   isOpen: boolean

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

@@ -32,7 +32,7 @@ type OpenDialogFunction = (dialogType: DialogType) => WaitForInputFunction
 /**
  * Returns an array containing {@link DialogProps} and {@link OpenDialogFunction}.
  */
-type UseDialogResult = [DialogProps, OpenDialogFunction]
+type UseDialogResult = [DialogWrapperProps, OpenDialogFunction]
 
 type DialogType =
   | 'approve_token'
@@ -50,7 +50,7 @@ type DialogType =
   | 'source_networks'
   | 'destination_networks'
 
-export function useDialog2(): UseDialogResult {
+export function useDialog(): UseDialogResult {
   const resolveRef =
     useRef<
       (value: [boolean, unknown] | PromiseLike<[boolean, unknown]>) => void
@@ -88,12 +88,12 @@ export function useDialog2(): UseDialogResult {
   return [{ openedDialogType, onClose: closeDialog }, openDialog]
 }
 
-type DialogProps = {
+type DialogWrapperProps = {
   openedDialogType: DialogType | null
   onClose: (confirmed: boolean, onCloseData?: unknown) => void
 }
 
-export function DialogWrapper(props: DialogProps) {
+export function DialogWrapper(props: DialogWrapperProps) {
   const isOftTransfer = useIsOftV2Transfer()
   const [selectedToken, setSelectedToken] = useSelectedToken()
   const [{ amount, token: tokenFromSearchParams }] = useArbQueryParams()
@@ -107,7 +107,10 @@ export function DialogWrapper(props: DialogProps) {
   const [isOpen, setIsOpen] = useState(false)
 
   const { openedDialogType } = props
-  const commonProps: DialogProps & { isOpen: boolean } = { ...props, isOpen }
+  const commonProps: DialogWrapperProps & { isOpen: boolean } = {
+    ...props,
+    isOpen
+  }
 
   // By doing this we enable fade in transition when dialog opens.
   useEffect(() => {
@@ -173,7 +176,8 @@ export function DialogWrapper(props: DialogProps) {
       return <OneNovaTransferDialog {...commonProps} />
     case 'source_networks':
     case 'destination_networks':
-      const type = openedDialogType === 'source_networks' ? 'source' : 'destination'
+      const type =
+        openedDialogType === 'source_networks' ? 'source' : 'destination'
       return <NetworkSelectionContainer {...commonProps} type={type} />
     default:
       return null

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

@@ -26,15 +26,15 @@ import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { getWagmiChain } from '../../util/wagmi/getWagmiChain'
 import { NetworkImage } from './NetworkImage'
-import { Dialog, UseDialogProps } from './Dialog'
+import { Dialog, DialogProps } from './Dialog'
 import { useNetworks } from '../../hooks/useNetworks'
 import { shouldOpenOneNovaDialog } from '../TransferPanel/TransferPanelMain/utils'
 import { useActions } from '../../state'
 import { useChainIdsForNetworkSelection } from '../../hooks/TransferPanel/useChainIdsForNetworkSelection'
 import { useAccountType } from '../../hooks/useAccountType'
 import { useSelectedToken } from '../../hooks/useSelectedToken'
 import { useAdvancedSettingsStore } from '../TransferPanel/AdvancedSettings'
-import { DialogWrapper, useDialog2 } from './Dialog2'
+import { DialogWrapper, useDialog } from './DialogWrapper'
 
 type NetworkType = 'core' | 'more' | 'orbit'
 
@@ -406,14 +406,14 @@ function NetworksPanel({
 }
 
 export const NetworkSelectionContainer = (
-  props: UseDialogProps & {
+  props: DialogProps & {
     type: 'source' | 'destination'
   }
 ) => {
   const actions = useActions()
   const [, setSelectedToken] = useSelectedToken()
   const [networks, setNetworks] = useNetworks()
-  const [dialogProps, openDialog] = useDialog2()
+  const [dialogProps, openDialog] = useDialog()
   const [, setQueryParams] = useArbQueryParams()
   const { setAdvancedSettingsCollapsed } = useAdvancedSettingsStore()
   const { isSmartContractWallet } = useAccountType()