Merge branch 'master' into dl/test-matrix-monitoring

audit-ci.jsonc

@@ -1,14 +1,5 @@
 {
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "low": true,
-  "allowlist": [
-    // elliptic
-    // waiting for it to release a fix but low severity so we can ignore it
-    // https://github.com/advisories/GHSA-49q7-c7j4-3p7m
-    "GHSA-49q7-c7j4-3p7m",
-    // https://github.com/advisories/GHSA-977x-g7h5-7qgw
-    "GHSA-977x-g7h5-7qgw",
-    // https://github.com/advisories/GHSA-f7q4-pwc6-w24p
-    "GHSA-f7q4-pwc6-w24p"
-  ]
+  "allowlist": []
 }

package.json

@@ -22,7 +22,8 @@
   "resolutions": {
     "**/@walletconnect/ethereum-provider": "2.13.1",
     "**/@ethersproject/providers/ws": "7.5.10",
-    "**/@synthetixio/synpress/ws": "8.17.1"
+    "**/@synthetixio/synpress/ws": "8.17.1",
+    "**/elliptic": "6.5.7"
   },
   "keywords": [],
   "author": "",

packages/arb-token-bridge-ui/package.json

@@ -22,7 +22,7 @@
     "@vercel/edge-config": "^0.4.1",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
-    "axios": "^1.6.6",
+    "axios": "^1.7.4",
     "boring-avatars": "^1.7.0",
     "cheerio": "^1.0.0-rc.12",
     "dayjs": "^1.11.8",
@@ -34,7 +34,7 @@
     "next-query-params": "^5.0.0",
     "overmind": "^28.0.1",
     "overmind-react": "^29.0.1",
-    "posthog-js": "^1.57.2",
+    "posthog-js": "^1.155.4",
     "query-string": "^8.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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

@@ -4,7 +4,6 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 
 import { useAppState } from '../../state'
-import { sanitizeImageSrc } from '../../util'
 import { TokenSearch } from '../TransferPanel/TokenSearch'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
@@ -17,43 +16,31 @@ import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
 
-export function TokenButton(): JSX.Element {
+export type TokenButtonOptions = {
+  symbol?: string
+  disabled?: boolean
+}
+
+export function TokenButton({
+  options
+}: {
+  options?: TokenButtonOptions
+}): JSX.Element {
   const {
-    app: {
-      selectedToken,
-      arbTokenBridge: { bridgeTokens },
-      arbTokenBridgeLoaded
-    }
+    app: { selectedToken }
   } = useAppState()
+  const disabled = options?.disabled ?? false
+
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
-  const tokenLogo = useMemo<string | undefined>(() => {
-    const selectedAddress = selectedToken?.address
-    if (!selectedAddress) {
-      return nativeCurrency.logoUrl
-    }
-    if (!arbTokenBridgeLoaded) {
-      return undefined
-    }
-    if (typeof bridgeTokens === 'undefined') {
-      return undefined
-    }
-    const logo = bridgeTokens[selectedAddress]?.logoURI
-    if (logo) {
-      return sanitizeImageSrc(logo)
+  const tokenSymbol = useMemo(() => {
+    if (typeof options?.symbol !== 'undefined') {
+      return options.symbol
     }
-    return undefined
-  }, [
-    nativeCurrency,
-    bridgeTokens,
-    selectedToken?.address,
-    arbTokenBridgeLoaded
-  ])
 
-  const tokenSymbol = useMemo(() => {
     if (!selectedToken) {
       return nativeCurrency.symbol
     }
@@ -62,7 +49,7 @@ export function TokenButton(): JSX.Element {
       erc20L1Address: selectedToken.address,
       chainId: networks.sourceChain.id
     })
-  }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol])
+  }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
 
   return (
     <>
@@ -73,6 +60,7 @@ export function TokenButton(): JSX.Element {
               className="arb-hover h-full w-max rounded-bl rounded-tl px-3 py-3 text-white"
               aria-label="Select Token"
               onClick={onPopoverButtonClick}
+              disabled={disabled}
             >
               <div className="flex items-center gap-2">
                 {/* Commenting it out until we update the token image source files to be of better quality */}
@@ -90,12 +78,14 @@ export function TokenButton(): JSX.Element {
                 <span className="text-xl font-light sm:text-3xl">
                   {tokenSymbol}
                 </span>
-                <ChevronDownIcon
-                  className={twMerge(
-                    'h-3 w-3 text-gray-6 transition-transform duration-200',
-                    open ? '-rotate-180' : 'rotate-0'
-                  )}
-                />
+                {!disabled && (
+                  <ChevronDownIcon
+                    className={twMerge(
+                      'h-3 w-3 text-gray-6 transition-transform duration-200',
+                      open ? '-rotate-180' : 'rotate-0'
+                    )}
+                  />
+                )}
               </div>
             </Popover.Button>
 

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

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}

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react'
 
+import { isTeleport } from '@/token-bridge-sdk/teleport'
 import { getNetworkName } from '../../../util/networks'
 import {
   NetworkButton,
@@ -29,19 +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
@@ -55,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
   })
@@ -143,8 +147,29 @@ export function SourceNetworkBox({
             maxButtonOnClick={maxButtonOnClick}
             errorMessage={errorMessage}
             value={isMaxAmount ? '' : amount}
+            onChange={e => setAmount(e.target.value)}
           />
 
+          {isExperimentalFeatureEnabled('batch') &&
+            // TODO: teleport is disabled for now but it needs to be looked into more to check whether it is or can be supported
+            !isTeleport({
+              sourceChainId: networks.sourceChain.id,
+              destinationChainId: networks.destinationChain.id
+            }) &&
+            selectedToken && (
+              <TransferPanelMainInput
+                // eslint-disable-next-line
+                maxButtonOnClick={() => {}}
+                errorMessage={undefined}
+                value={amount2}
+                onChange={e => setAmount2(e.target.value)}
+                tokenButtonOptions={{
+                  symbol: nativeCurrency.symbol,
+                  disabled: true
+                }}
+              />
+            )}
+
           {showUsdcSpecificInfo && (
             <p className="mt-1 text-xs font-light text-white">
               Bridged USDC (USDC.e) will work but is different from Native USDC.{' '}

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 } from './TokenButton'
+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}
     />
   )
@@ -156,10 +139,11 @@ export type TransferPanelMainInputProps =
     errorMessage?: string | TransferReadinessRichErrorMessage | undefined
     maxButtonOnClick: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick']
     value: string
+    tokenButtonOptions?: TokenButtonOptions
   }
 
 export function TransferPanelMainInput(props: TransferPanelMainInputProps) {
-  const { errorMessage, maxButtonOnClick, ...rest } = props
+  const { errorMessage, maxButtonOnClick, tokenButtonOptions, ...rest } = props
 
   return (
     <>
@@ -171,7 +155,7 @@ export function TransferPanelMainInput(props: TransferPanelMainInputProps) {
             : 'border-white/30 text-white'
         )}
       >
-        <TokenButton />
+        <TokenButton options={tokenButtonOptions} />
         <div
           className={twMerge(
             'flex grow flex-row items-center justify-center border-l',

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

@@ -7,31 +7,46 @@ import { isNetwork } from '../../util/networks'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useDestinationChainStyle } from '../../hooks/useDestinationChainStyle'
 import { AppMobileSidebar } from '../Sidebar/AppMobileSidebar'
+import { isExperimentalModeEnabled } from '../../util'
 
 export function Header({ children }: { children?: React.ReactNode }) {
   const [{ sourceChain }] = useNetworks()
   const { isTestnet } = isNetwork(sourceChain.id)
 
+  const isExperimentalMode = isExperimentalModeEnabled()
+
   const destinationChainStyle = useDestinationChainStyle()
 
   return (
     <header
       className={twMerge(
         'sticky top-0 z-10 flex h-12 w-full justify-center bg-black/70 px-4 backdrop-blur sm:relative sm:h-16 sm:px-6 sm:backdrop-blur-none [body.menu-open_&]:fixed',
-        isTestnet
+        isTestnet || isExperimentalMode
           ? 'sm:border-b sm:border-white sm:bg-white/20'
           : 'sm:bg-transparent',
         destinationChainStyle.borderColor ? 'sm:border-b' : ''
       )}
-      style={destinationChainStyle}
+      style={{
+        ...destinationChainStyle,
+        borderColor: isExperimentalMode
+          ? 'red'
+          : destinationChainStyle.borderColor
+      }}
     >
       <div className="flex w-full items-center justify-end gap-2 text-white">
         <Image
           className="mr-auto h-6 w-6 sm:hidden"
           src={ArbitrumLogoSmall}
           alt="Arbitrum"
         />
-        {isTestnet && <span className="grow font-medium">TESTNET MODE</span>}
+        {isTestnet && !isExperimentalMode && (
+          <span className="grow font-medium">TESTNET MODE</span>
+        )}
+        {isExperimentalMode && (
+          <span className="grow font-medium text-red-500">
+            EXPERIMENTAL MODE: features may be incomplete or not work properly
+          </span>
+        )}
         <div className="hidden sm:flex">{children}</div>
       </div>
       <AppMobileSidebar />