diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx index 714e85102b..165b9b79c8 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx @@ -1,5 +1,12 @@ -import { ChangeEventHandler, useCallback, useEffect, useMemo } from 'react' +import { + ChangeEventHandler, + useCallback, + useEffect, + useMemo, + useState +} from 'react' import { utils } from 'ethers' +import { PlusCircleIcon } from '@heroicons/react/24/outline' import { getNetworkName } from '../../../util/networks' import { @@ -27,14 +34,36 @@ import { useSetInputAmount } from '../../../hooks/TransferPanel/useSetInputAmoun import { useDialog } from '../../common/Dialog' import { useTransferReadiness } from '../useTransferReadiness' import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported' +import { Button } from '../../common/Button' import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelectedTokenDecimals' import { useBalanceOnSourceChain } from '../../../hooks/useBalanceOnSourceChain' +function Amount2ToggleButton({ + onClick +}: { + onClick: React.ButtonHTMLAttributes['onClick'] +}) { + return ( + + ) +} + export function SourceNetworkBox({ showUsdcSpecificInfo }: { showUsdcSpecificInfo: boolean }) { + const [isAmount2InputVisible, setIsAmount2InputVisible] = useState(false) + const [networks] = useNetworks() const { childChain, childChainProvider, isDepositMode } = useNetworksRelationship(networks) @@ -121,17 +150,32 @@ export function SourceNetworkBox({ decimals={decimals} /> - {isBatchTransferSupported && ( - + {isBatchTransferSupported && !isAmount2InputVisible && ( +
+ setIsAmount2InputVisible(true)} + /> +
+ )} + + {isBatchTransferSupported && isAmount2InputVisible && ( + <> + +

+ You can transfer ETH in the same transaction if you wish to. + This is the approximate amount you will receive. The final + amount depends on actual gas usage. +

+ )} {showUsdcSpecificInfo && ( diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx index 17f950eb33..2a2d6a2b33 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx @@ -16,6 +16,7 @@ import { Loader } from '../common/atoms/Loader' import { isTokenNativeUSDC } from '../../util/TokenUtils' import { NoteBox } from '../common/NoteBox' import { DISABLED_CHAIN_IDS } from './useTransferReadiness' +import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported' export type TransferPanelSummaryToken = { symbol: string @@ -181,7 +182,8 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) { const isBridgingEth = useIsBridgingEth(childChainNativeCurrency) - const [{ amount }] = useArbQueryParams() + const [{ amount, amount2 }] = useArbQueryParams() + const isBatchTransferSupported = useIsBatchTransferSupported() const { isArbitrumOne: isDestinationChainArbitrumOne, @@ -248,6 +250,9 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) { {isBridgingEth && ( )} + {isBatchTransferSupported && Number(amount2) > 0 && ( + + {amount2} ETH + )}