Merge branch 'master' into 1432-use-usenetworksrelationship-inside-us…

…earbtokenbridge
OffchainLabs · Sep 9, 2024 · d7a8593 · d7a8593
2 parents 04c22f8 + bf1f26f
commit d7a8593
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 13 deletions.
diff --git a/...s/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/...s/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<HTMLButtonElement>['onClick']
+}) {
+  return (
+    <Button
+      variant="secondary"
+      className="border-white/30 shadow-2"
+      onClick={onClick}
+    >
+      <div className="flex items-center space-x-1">
+        <PlusCircleIcon width={18} />
+        <span>Add ETH</span>
+      </div>
+    </Button>
+  )
+}
+
 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 && (
-            <TransferPanelMainInput
-              maxButtonOnClick={amount2MaxButtonOnClick}
-              errorMessage={errorMessages?.inputAmount2}
-              value={amount2}
-              onChange={handleAmount2Change}
-              options={tokenButtonOptionsAmount2}
-              maxAmount={maxAmount2}
-              isMaxAmount={isMaxAmount2}
-              decimals={nativeCurrency.decimals}
-            />
+          {isBatchTransferSupported && !isAmount2InputVisible && (
+            <div className="flex justify-end">
+              <Amount2ToggleButton
+                onClick={() => setIsAmount2InputVisible(true)}
+              />
+            </div>
+          )}
+
+          {isBatchTransferSupported && isAmount2InputVisible && (
+            <>
+              <TransferPanelMainInput
+                maxButtonOnClick={amount2MaxButtonOnClick}
+                errorMessage={errorMessages?.inputAmount2}
+                value={amount2}
+                onChange={handleAmount2Change}
+                options={tokenButtonOptionsAmount2}
+                maxAmount={maxAmount2}
+                isMaxAmount={isMaxAmount2}
+                decimals={nativeCurrency.decimals}
+              />
+              <p className="mt-1 text-xs font-light text-white">
+                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.
+              </p>
+            </>
           )}
 
           {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
@@ -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 && (
             <NativeCurrencyPrice amount={Number(amount)} showBrackets />
           )}
+          {isBatchTransferSupported && Number(amount2) > 0 && (
+            <span> + {amount2} ETH</span>
+          )}
         </span>
       </div>
     </TransferPanelSummaryContainer>