feat: query params for batched transfers (#1836)

OffchainLabs · Aug 15, 2024 · 941ae8f · 941ae8f
1 parent bf67aa8
commit 941ae8f
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 46 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -152,7 +152,7 @@ export function TransferPanel() {
   // Both `amount` getter and setter will internally be using `useArbQueryParams` functions
   const [{ amount }] = useArbQueryParams()
 
-  const setAmount = useSetInputAmount()
+  const { setAmount, setAmount2 } = useSetInputAmount()
 
   const [tokenImportDialogProps] = useDialog()
   const [tokenCheckDialogProps, openTokenCheckDialog] = useDialog()
@@ -200,6 +200,7 @@ export function TransferPanel() {
   function clearAmountInput() {
     // clear amount input on transfer panel
     setAmount('')
+    setAmount2('')
   }
 
   useImportTokenModal({
@@ -1028,7 +1029,7 @@ export function TransferPanel() {
           'sm:rounded sm:border'
         )}
       >
-        <TransferPanelMain amount={amount} errorMessage={errorMessage} />
+        <TransferPanelMain errorMessage={errorMessage} />
         <AdvancedSettings />
         <TransferPanelSummary
           amount={parseFloat(amount)}

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
@@ -251,10 +251,8 @@ export function NetworkListboxPlusBalancesContainer({
 }
 
 export function TransferPanelMain({
-  amount,
   errorMessage
 }: {
-  amount: string
   errorMessage?: TransferReadinessRichErrorMessage | string
 }) {
   const [networks] = useNetworks()
@@ -356,7 +354,6 @@ export function TransferPanelMain({
   return (
     <div className="flex flex-col pb-6 lg:gap-y-1">
       <SourceNetworkBox
-        amount={amount}
         errorMessage={errorMessage}
         customFeeTokenBalances={customFeeTokenBalances}
         showUsdcSpecificInfo={showUSDCSpecificInfo}

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
@@ -30,20 +30,21 @@ import {
 import { ExternalLink } from '../../common/ExternalLink'
 import { EstimatedGas } from '../EstimatedGas'
 import { TransferPanelMainInput } from '../TransferPanelMainInput'
-import { AmountQueryParamEnum } from '../../../hooks/useArbQueryParams'
+import {
+  AmountQueryParamEnum,
+  useArbQueryParams
+} from '../../../hooks/useArbQueryParams'
 import { TransferReadinessRichErrorMessage } from '../useTransferReadinessUtils'
 import { useMaxAmount } from './useMaxAmount'
 import { useSetInputAmount } from '../../../hooks/TransferPanel/useSetInputAmount'
 import { isExperimentalFeatureEnabled } from '../../../util'
 import { useDialog } from '../../common/Dialog'
 
 export function SourceNetworkBox({
-  amount,
   errorMessage,
   customFeeTokenBalances,
   showUsdcSpecificInfo
 }: {
-  amount: string
   errorMessage: string | TransferReadinessRichErrorMessage | undefined
   customFeeTokenBalances: Balances
   showUsdcSpecificInfo: boolean
@@ -57,7 +58,8 @@ export function SourceNetworkBox({
   const { ethParentBalance, ethChildBalance } = useBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
-  const setAmount = useSetInputAmount()
+  const [{ amount, amount2 }] = useArbQueryParams()
+  const { setAmount, setAmount2 } = useSetInputAmount()
   const { maxAmount } = useMaxAmount({
     customFeeTokenBalances
   })
@@ -145,6 +147,7 @@ export function SourceNetworkBox({
             maxButtonOnClick={maxButtonOnClick}
             errorMessage={errorMessage}
             value={isMaxAmount ? '' : amount}
+            onChange={e => setAmount(e.target.value)}
           />
 
           {isExperimentalFeatureEnabled('batch') &&
@@ -158,9 +161,8 @@ export function SourceNetworkBox({
                 // eslint-disable-next-line
                 maxButtonOnClick={() => {}}
                 errorMessage={undefined}
-                value={''}
-                // eslint-disable-next-line
-                onChange={() => {}}
+                value={amount2}
+                onChange={e => setAmount2(e.target.value)}
                 tokenButtonOptions={{
                   symbol: nativeCurrency.symbol,
                   disabled: true

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMainInput.tsx
@@ -1,14 +1,11 @@
 import { twMerge } from 'tailwind-merge'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { TokenButton, TokenButtonOptions } from './TokenButton'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { useSelectedTokenBalances } from '../../hooks/TransferPanel/useSelectedTokenBalances'
 import { useAppState } from '../../state'
-import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
-import { countDecimals } from '../../util/NumberUtils'
-import { useSelectedTokenDecimals } from '../../hooks/TransferPanel/useSelectedTokenDecimals'
 import { useBalances } from '../../hooks/useBalances'
 import { TransferReadinessRichErrorMessage } from './useTransferReadinessUtils'
 import { ExternalLink } from '../common/ExternalLink'
@@ -74,17 +71,7 @@ function MaxButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
 function TransferPanelInputField(
   props: React.InputHTMLAttributes<HTMLInputElement>
 ) {
-  const { value = '', onChange, ...rest } = props
-  const setAmount = useSetInputAmount()
-  const decimals = useSelectedTokenDecimals()
-
-  useEffect(() => {
-    // if number of decimals of query param value is greater than token decimals,
-    // truncate the decimals and update the amount query param value
-    if (countDecimals(String(value)) > decimals) {
-      setAmount(String(value))
-    }
-  }, [value, decimals, setAmount])
+  const { value = '', ...rest } = props
 
   return (
     <input
@@ -93,10 +80,6 @@ function TransferPanelInputField(
       placeholder="Enter amount"
       className="h-full w-full bg-transparent px-3 text-xl font-light placeholder:text-gray-dark sm:text-3xl"
       value={value}
-      onChange={event => {
-        onChange?.(event)
-        setAmount(event.target.value)
-      }}
       {...rest}
     />
   )

diff --git a/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useSetInputAmount.ts b/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useSetInputAmount.ts
@@ -17,5 +17,14 @@ export function useSetInputAmount() {
     [decimals, setQueryParams]
   )
 
-  return setAmount
+  const setAmount2 = useCallback(
+    (newAmount: string) => {
+      const correctDecimalsAmount = truncateExtraDecimals(newAmount, 18)
+
+      setQueryParams({ amount2: correctDecimalsAmount })
+    },
+    [setQueryParams]
+  )
+
+  return { setAmount, setAmount2 }
 }
diff --git a/packages/arb-token-bridge-ui/src/hooks/useArbQueryParams.tsx b/packages/arb-token-bridge-ui/src/hooks/useArbQueryParams.tsx
@@ -49,6 +49,7 @@ export const useArbQueryParams = () => {
     sourceChain: ChainParam,
     destinationChain: ChainParam,
     amount: withDefault(AmountQueryParam, ''), // amount which is filled in Transfer panel
+    amount2: withDefault(AmountQueryParam, ''), // extra eth to send together with erc20
     token: StringParam, // import a new token using a Dialog Box
     settingsOpen: withDefault(BooleanParam, false)
   })

diff --git a/packages/arb-token-bridge-ui/src/util/NumberUtils.ts b/packages/arb-token-bridge-ui/src/util/NumberUtils.ts
@@ -116,20 +116,6 @@ export const formatAmount = <T extends number | BigNumber | undefined>(
   )
 }
 
-export const countDecimals = (num: number | string) => {
-  if (Math.floor(Number(num)) === Number(num)) {
-    return 0
-  }
-
-  const decimalPart = String(num).split('.')[1]
-
-  if (typeof decimalPart === 'undefined') {
-    return 0
-  }
-
-  return decimalPart.length
-}
-
 export const truncateExtraDecimals = (amount: string, decimals: number) => {
   const decimalPart = amount.split('.')[1]