feat: support for non-18 decimals chains

.github/workflows/e2e-tests.yml

@@ -33,7 +33,7 @@ jobs:
     secrets: inherit
 
   test-e2e:
-    name: "${{ matrix.test.name }}${{ matrix.test.type == 'orbit-eth' && ' with L3' || matrix.test.type == 'orbit-custom' && ' with custom fee token' || ''}}"
+    name: "Test E2E - ${{ matrix.test.name }} ${{ matrix.test.typeName }}"
     needs: [build, load-e2e-files]
     runs-on: ubuntu-latest
     strategy:
@@ -99,16 +99,25 @@ jobs:
           nitro-testnode-ref: badbcbea9b43d46e115da4d7c9f2f57c31af8431
           l3-node: ${{ matrix.test.type != 'regular' }}
           no-l3-token-bridge: ${{ matrix.test.type == 'regular' }}
-          args: ${{ matrix.test.type == 'orbit-custom' && '--l3-fee-token' || '' }}
+          args: >-
+            ${{
+              (matrix.test.type == 'orbit-eth') && '--l3node --l3-token-bridge' ||
+              (matrix.test.type == 'orbit-custom-6dec' && '--l3-fee-token --l3-fee-token-decimals 6') ||
+              (matrix.test.type == 'orbit-custom-18dec' && '--l3-fee-token') ||
+              (matrix.test.type == 'orbit-custom-20dec' && '--l3-fee-token --l3-fee-token-decimals 20') ||
+              ''
+            }}
 
       - name: Run e2e tests via cypress-io/github-action
         uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # [email protected]
         with:
           start: yarn start
           command: >-
-            ${{ 
+            ${{
               (matrix.test.type == 'orbit-eth') && 'yarn test:e2e:orbit --browser chrome' ||
-              (matrix.test.type == 'orbit-custom' && 'yarn test:e2e:orbit:custom-gas-token --browser chrome') ||
+              (matrix.test.type == 'orbit-custom-6dec' && 'yarn test:e2e:orbit:custom-gas-token --browser chrome') ||
+              (matrix.test.type == 'orbit-custom-18dec' && 'yarn test:e2e:orbit:custom-gas-token --browser chrome') ||
+              (matrix.test.type == 'orbit-custom-20dec' && 'yarn test:e2e:orbit:custom-gas-token --browser chrome') ||
               (matrix.test.type == 'cctp' && 'yarn test:e2e:cctp --browser chrome') ||
               'yarn test:e2e --browser chrome'
             }}
@@ -133,7 +142,7 @@ jobs:
         uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: e2e-artifacts-${{ github.sha }}-${{ matrix.test.name }}-${{ (matrix.test.type == 'cctp' && 'cctp') || (matrix.test.type == 'orbit-eth' && 'l3') || (matrix.test.type == 'orbit-custom' && 'custom-fee-token') || 'regular'}}
+          name: e2e-artifacts-${{ github.sha }}-${{ matrix.test.name }}-${{ matrix.test.type }}
           path: |
             ./packages/arb-token-bridge-ui/cypress/videos
             ./packages/arb-token-bridge-ui/cypress/screenshots

.github/workflows/formatSpecfiles.js

@@ -11,14 +11,27 @@ switch (testType) {
       tests.push({
         ...spec,
         type: "regular",
+        typeName: "",
       });
       tests.push({
         ...spec,
         type: "orbit-eth",
+        typeName: "with L3 (ETH)",
       });
       tests.push({
         ...spec,
-        type: "orbit-custom",
+        type: "orbit-custom-6dec",
+        typeName: "with L3 (6 decimals custom)",
+      });
+      tests.push({
+        ...spec,
+        type: "orbit-custom-18dec",
+        typeName: "with L3 (18 decimals custom)",
+      });
+      tests.push({
+        ...spec,
+        type: "orbit-custom-20dec",
+        typeName: "with L3 (20 decimals custom)",
       });
     });
     break;
@@ -27,6 +40,7 @@ switch (testType) {
     // Running CCTP tests in parallel cause nonce issues, we're running the two tests sequentially
     tests.push({
       name: "cctp",
+      typeName: "",
       file: "tests/e2e/specs/**/*Cctp.cy.{js,jsx,ts,tsx}",
       recordVideo: false,
       type: "cctp",

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

@@ -5,7 +5,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.11",
-    "@arbitrum/sdk": "^4.0.1",
+    "@arbitrum/sdk": "^4.0.2-beta.1",
     "@ethersproject/providers": "^5.7.0",
     "@headlessui/react": "^1.7.8",
     "@headlessui/tailwindcss": "^0.1.2",

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

@@ -32,6 +32,7 @@ import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { TokenLogoFallback } from './TokenInfo'
 import { useBalanceOnSourceChain } from '../../hooks/useBalanceOnSourceChain'
+import { useNativeCurrencyDecimalsOnSourceChain } from '../../hooks/useNativeCurrencyDecimalsOnSourceChain'
 
 function tokenListIdsToNames(ids: number[]): string {
   return ids
@@ -244,6 +245,8 @@ function TokenBalance({ token }: { token: ERC20BridgeToken | null }) {
   } = useAppState()
   const { isLoading: isLoadingAccountType } = useAccountType()
   const { balance, symbol } = useTokenInfo(token)
+  const nativeCurrencyDecimalsOnSourceChain =
+    useNativeCurrencyDecimalsOnSourceChain()
 
   const isArbitrumNativeUSDC =
     isTokenArbitrumOneNativeUSDC(token?.address) ||
@@ -266,6 +269,13 @@ function TokenBalance({ token }: { token: ERC20BridgeToken | null }) {
     return typeof bridgeTokens[token.address] !== 'undefined'
   }, [bridgeTokens, isArbitrumNativeUSDC, token])
 
+  const decimals = useMemo(() => {
+    if (token) {
+      return token.decimals
+    }
+    return nativeCurrencyDecimalsOnSourceChain
+  }, [nativeCurrencyDecimalsOnSourceChain, token])
+
   if (!tokenIsAddedToTheBridge) {
     return <span className="arb-hover text-sm">Import</span>
   }
@@ -279,7 +289,7 @@ function TokenBalance({ token }: { token: ERC20BridgeToken | null }) {
     <span className="flex items-center whitespace-nowrap text-sm text-white/70">
       {balance ? (
         formatAmount(balance, {
-          decimals: token?.decimals,
+          decimals,
           symbol
         })
       ) : (

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

@@ -6,6 +6,7 @@ import { useLatest } from 'react-use'
 import { useAccount, useNetwork, useSigner } from 'wagmi'
 import { TransactionResponse } from '@ethersproject/providers'
 import { twMerge } from 'tailwind-merge'
+import { scaleFrom18DecimalsToNativeTokenDecimals } from '@arbitrum/sdk'
 
 import { useAppState } from '../../state'
 import { getNetworkName, isNetwork } from '../../util/networks'
@@ -77,6 +78,7 @@ import { useIsTransferAllowed } from './hooks/useIsTransferAllowed'
 import { MoveFundsButton } from './MoveFundsButton'
 import { ProjectsListing } from '../common/ProjectsListing'
 import { useAmountBigNumber } from './hooks/useAmountBigNumber'
+import { useNativeCurrencyDecimalsOnSourceChain } from '../../hooks/useNativeCurrencyDecimalsOnSourceChain'
 
 const signerUndefinedError = 'Signer is undefined'
 const transferNotAllowedError = 'Transfer not allowed'
@@ -131,6 +133,8 @@ export function TransferPanel() {
     }
   } = useLatest(useNetworksRelationship(latestNetworks.current))
   const isBatchTransferSupported = useIsBatchTransferSupported()
+  const nativeCurrencyDecimalsOnSourceChain =
+    useNativeCurrencyDecimalsOnSourceChain()
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
@@ -616,7 +620,7 @@ export function TransferPanel() {
           amount: amountBigNumber,
           options: {
             approvalAmountIncrease: isCustomNativeTokenAmount2
-              ? utils.parseUnits(amount2, nativeCurrency.decimals)
+              ? utils.parseUnits(amount2, nativeCurrencyDecimalsOnSourceChain)
               : undefined
           }
         })
@@ -631,7 +635,7 @@ export function TransferPanel() {
           amount: amountBigNumber,
           options: {
             approvalAmountIncrease: isCustomNativeTokenAmount2
-              ? utils.parseUnits(amount2, nativeCurrency.decimals)
+              ? utils.parseUnits(amount2, nativeCurrencyDecimalsOnSourceChain)
               : undefined
           }
         })
@@ -744,6 +748,7 @@ export function TransferPanel() {
         }
 
         overrides.maxSubmissionCost = utils
+          // we are not scaling these to native decimals because arbitrum-sdk does it for us
           .parseEther(amount2)
           .add(gasEstimates.estimatedChildChainSubmissionCost)
         overrides.excessFeeRefundAddress = destinationAddress
@@ -798,6 +803,20 @@ export function TransferPanel() {
 
     const timestampCreated = String(normalizeTimestamp(Date.now()))
 
+    const { isOrbitChain: isSourceOrbitChain } = isNetwork(
+      latestNetworks.current.sourceChain.id
+    )
+
+    const scaledAmount =
+      // only scale for native tokens, and
+      // only scale if sent from Orbit, because it's always 18 decimals there but the UI needs scaled amount
+      selectedToken || !isSourceOrbitChain
+        ? amountBigNumber
+        : scaleFrom18DecimalsToNativeTokenDecimals({
+            amount: amountBigNumber,
+            decimals: nativeCurrency.decimals
+          })
+
     const txHistoryCompatibleObject = convertBridgeSdkToMergedTransaction({
       bridgeTransfer,
       parentChainId: parentChain.id,
@@ -806,7 +825,7 @@ export function TransferPanel() {
       walletAddress,
       destinationAddress,
       nativeCurrency,
-      amount: amountBigNumber,
+      amount: scaledAmount,
       amount2: isBatchTransfer ? utils.parseEther(amount2) : undefined,
       timestampCreated
     })
@@ -825,7 +844,7 @@ export function TransferPanel() {
           walletAddress,
           destinationAddress,
           nativeCurrency,
-          amount: amountBigNumber,
+          amount: scaledAmount,
           amount2: isBatchTransfer ? utils.parseEther(amount2) : undefined,
           timestampCreated
         })

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

@@ -33,6 +33,7 @@ import { Button } from '../../common/Button'
 import { useSelectedTokenDecimals } from '../../../hooks/TransferPanel/useSelectedTokenDecimals'
 import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
 import { useIsCctpTransfer } from '../hooks/useIsCctpTransfer'
+import { useNativeCurrencyDecimalsOnSourceChain } from '../../../hooks/useNativeCurrencyDecimalsOnSourceChain'
 
 function Amount2ToggleButton({
   onClick
@@ -92,6 +93,8 @@ export function SourceNetworkBox() {
   const decimals = useSelectedTokenDecimals()
   const { errorMessages } = useTransferReadiness()
   const nativeCurrencyBalances = useNativeCurrencyBalances()
+  const nativeCurrencyDecimalsOnSourceChain =
+    useNativeCurrencyDecimalsOnSourceChain()
 
   const isCctpTransfer = useIsCctpTransfer()
 
@@ -145,10 +148,19 @@ export function SourceNetworkBox() {
       symbol: nativeCurrency.symbol,
       disabled: true,
       balance: nativeCurrencyBalances.sourceBalance
-        ? Number(utils.formatEther(nativeCurrencyBalances.sourceBalance))
+        ? Number(
+            utils.formatUnits(
+              nativeCurrencyBalances.sourceBalance,
+              nativeCurrencyDecimalsOnSourceChain
+            )
+          )
         : undefined
     }),
-    [nativeCurrencyBalances, nativeCurrency.symbol]
+    [
+      nativeCurrencyBalances,
+      nativeCurrency.symbol,
+      nativeCurrencyDecimalsOnSourceChain
+    ]
   )
 
   return (

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

@@ -1,12 +1,18 @@
+import { useMemo } from 'react'
 import { BigNumber } from 'ethers'
 
 import { ERC20BridgeToken } from '../../../hooks/arbTokenBridge.types'
-import { NativeCurrencyErc20 } from '../../../hooks/useNativeCurrency'
+import {
+  NativeCurrencyErc20,
+  useNativeCurrency
+} from '../../../hooks/useNativeCurrency'
 import { Loader } from '../../common/atoms/Loader'
 import { TokenSymbolWithExplorerLink } from '../../common/TokenSymbolWithExplorerLink'
 import { formatAmount } from '../../../util/NumberUtils'
 
 import { NetworkType } from './utils'
+import { useNetworks } from '../../../hooks/useNetworks'
+import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
 
 export function TokenBalance({
   forToken,
@@ -22,6 +28,23 @@ export function TokenBalance({
   tokenSymbolOverride?: string
 }) {
   const isParentChain = on === NetworkType.parentChain
+  const [networks] = useNetworks()
+  const { childChainProvider } = useNetworksRelationship(networks)
+  const nativeCurrency = useNativeCurrency({
+    provider: childChainProvider
+  })
+
+  const isCustomNativeCurrency =
+    nativeCurrency.isCustom &&
+    forToken?.address.toLowerCase() === nativeCurrency.address.toLowerCase()
+
+  const decimals = useMemo(() => {
+    if (!isParentChain && isCustomNativeCurrency) {
+      // Native currency on Orbit chain, always 18 decimals
+      return 18
+    }
+    return forToken?.decimals
+  }, [forToken?.decimals, isCustomNativeCurrency, isParentChain])
 
   if (!forToken) {
     return null
@@ -43,7 +66,7 @@ export function TokenBalance({
       <span className="font-light">{prefix}</span>
       <span aria-label={`${tokenSymbol} balance amount on ${on}`}>
         {formatAmount(balance, {
-          decimals: forToken.decimals
+          decimals
         })}
       </span>{' '}
       <TokenSymbolWithExplorerLink

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts

@@ -9,6 +9,7 @@ import { defaultErc20Decimals } from '../../../defaults'
 import { useGasSummary } from '../../../hooks/TransferPanel/useGasSummary'
 import { useNativeCurrency } from '../../../hooks/useNativeCurrency'
 import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
+import { useNativeCurrencyDecimalsOnSourceChain } from '../../../hooks/useNativeCurrencyDecimalsOnSourceChain'
 
 export function useMaxAmount() {
   const {
@@ -19,6 +20,8 @@ export function useMaxAmount() {
   const { childChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
+  const nativeCurrencyDecimalsOnSourceChain =
+    useNativeCurrencyDecimalsOnSourceChain()
 
   const { estimatedParentChainGasFees, estimatedChildChainGasFees } =
     useGasSummary()
@@ -36,14 +39,14 @@ export function useMaxAmount() {
     if (nativeCurrency.isCustom && isDepositMode) {
       return utils.formatUnits(
         nativeCurrencySourceBalance,
-        nativeCurrency.decimals
+        nativeCurrencyDecimalsOnSourceChain
       )
     }
 
     // ETH deposits and ETH/custom fee token withdrawals
     const nativeCurrencyBalanceFormatted = utils.formatUnits(
       nativeCurrencySourceBalance,
-      nativeCurrency.decimals
+      nativeCurrencyDecimalsOnSourceChain
     )
 
     if (
@@ -70,9 +73,9 @@ export function useMaxAmount() {
     estimatedChildChainGasFees,
     estimatedParentChainGasFees,
     isDepositMode,
-    nativeCurrency.decimals,
     nativeCurrency.isCustom,
-    nativeCurrencyBalances.sourceBalance
+    nativeCurrencyBalances.sourceBalance,
+    nativeCurrencyDecimalsOnSourceChain
   ])
 
   const maxAmount = useMemo(() => {

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

@@ -21,6 +21,7 @@ import { Loader } from '../common/atoms/Loader'
 import { sanitizeAmountQueryParam } from '../../hooks/useArbQueryParams'
 import { truncateExtraDecimals } from '../../util/NumberUtils'
 import { useNativeCurrencyBalances } from './TransferPanelMain/useNativeCurrencyBalances'
+import { useSelectedTokenDecimals } from '../../hooks/TransferPanel/useSelectedTokenDecimals'
 
 function MaxButton({
   className = '',
@@ -86,6 +87,7 @@ function SourceChainTokenBalance({
   const [networks] = useNetworks()
   const { isDepositMode, childChainProvider } =
     useNetworksRelationship(networks)
+  const selectedTokenDecimals = useSelectedTokenDecimals()
 
   const nativeCurrencyBalances = useNativeCurrencyBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
@@ -103,7 +105,7 @@ function SourceChainTokenBalance({
   const formattedBalance =
     balance !== null
       ? formatAmount(balance, {
-          decimals: selectedToken?.decimals ?? nativeCurrency.decimals
+          decimals: selectedTokenDecimals
         })
       : null