Merge remote-tracking branch 'origin/master' into add-withdrawal-appr…

…oval-check

.github/workflows/e2e-tests.yml

@@ -48,7 +48,7 @@ jobs:
           # this might remove tools that are actually needed,
           # if set to "true" but frees about 6 GB
           tool-cache: false
-  
+
           # all of these default to true, but feel free to set to
           # "false" if necessary for your workflow
           android: true
@@ -66,7 +66,7 @@ jobs:
         run: |
           wget http://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_128.0.6613.137-1_amd64.deb
           sudo apt-get install ./google-chrome-stable_128.0.6613.137-1_amd64.deb
-      
+
       - name: Checkout
         uses: actions/checkout@v4
 
@@ -95,6 +95,7 @@ jobs:
 
       - name: Run nitro testnode
         if: inputs.test_type != 'cctp'
+        timeout-minutes: 20
         uses: OffchainLabs/actions/run-nitro-test-node@a20a76172ce524832ac897bef2fa10a62ed81c29
         with:
           nitro-testnode-ref: badbcbea9b43d46e115da4d7c9f2f57c31af8431
@@ -135,9 +136,9 @@ jobs:
           PRIVATE_KEY_CCTP: ${{ secrets.E2E_PRIVATE_KEY_CCTP }}
           NEXT_PUBLIC_IS_E2E_TEST: true
           NEXT_PUBLIC_INFURA_KEY: ${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
-          NEXT_PUBLIC_LOCAL_ETHEREUM_RPC_URL: http://127.0.0.1:8545
-          NEXT_PUBLIC_LOCAL_ARBITRUM_RPC_URL: http://127.0.0.1:8547
-          NEXT_PUBLIC_LOCAL_L3_RPC_URL: http://127.0.0.1:3347
+          NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L1: http://127.0.0.1:8545
+          NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L2: http://127.0.0.1:8547
+          NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L3: http://127.0.0.1:3347
 
       - name: Archive e2e artifacts
         uses: actions/upload-artifact@v4

README.md

@@ -73,9 +73,9 @@ Interested in contributing to this repo? We welcome your contribution.
 
    4. For custom urls, set optional vars:
 
-   - `NEXT_PUBLIC_ETHEREUM_RPC_URL=my-eth-node`
-   - `NEXT_PUBLIC_SEPOLIA_RPC_URL=my-sepolia-node`
-     (see [.env.sample](./packages/arb-token-bridge-ui/.env.sample))
+   - `NEXT_PUBLIC_RPC_URL_ETHEREUM=my-eth-node`
+   - `NEXT_PUBLIC_RPC_URL_SEPOLIA=my-sepolia-node`
+     (see [.env.local.sample](./packages/arb-token-bridge-ui/.env.local.sample))
      If no custom URL is provided, Infura will be used by default.
 
 5. Build the project and internal packages

packages/arb-token-bridge-ui/.e2e.env.sample

@@ -1,9 +1,9 @@
 NEXT_PUBLIC_INFURA_KEY=
 NETWORK_NAME=localhost
 
-NEXT_PUBLIC_LOCAL_ETHEREUM_RPC_URL=http://127.0.0.1:8545
-NEXT_PUBLIC_LOCAL_ARBITRUM_RPC_URL=http://127.0.0.1:8547
-NEXT_PUBLIC_LOCAL_L3_RPC_URL=http://127.0.0.1:3347
+NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L1=http://127.0.0.1:8545
+NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L2=http://127.0.0.1:8547
+NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L3=http://127.0.0.1:3347
 
 CYPRESS_RECORD_VIDEO=false
 

packages/arb-token-bridge-ui/.env.local.sample

@@ -1,26 +1,39 @@
+# ----- Infura -----
+
 # Default Infura key. If no network-specific keys are set, it will fallback to this key.
 NEXT_PUBLIC_INFURA_KEY=
 
-# L1
+# L1 Mainnet
 NEXT_PUBLIC_INFURA_KEY_ETHEREUM=
+
 # L1 Testnet
 NEXT_PUBLIC_INFURA_KEY_SEPOLIA=
 NEXT_PUBLIC_INFURA_KEY_HOLESKY=
 
-# L2
+# L2 Mainnet
 NEXT_PUBLIC_INFURA_KEY_ARBITRUM_ONE=
 NEXT_PUBLIC_INFURA_KEY_BASE=
+
 # L2 Testnet
 NEXT_PUBLIC_INFURA_KEY_ARBITRUM_SEPOLIA=
 NEXT_PUBLIC_INFURA_KEY_BASE_SEPOLIA=
 
-NEXT_PUBLIC_SENTRY_DSN=
+# ----- Custom RPCs -----
 
-NEXT_PUBLIC_ETHEREUM_RPC_URL=
-NEXT_PUBLIC_SEPOLIA_RPC_URL=
+# L1 Mainnet
+NEXT_PUBLIC_RPC_URL_ETHEREUM=
 
-NEXT_PUBLIC_LOCAL_ETHEREUM_RPC_URL="http://localhost:8545"
-NEXT_PUBLIC_LOCAL_ARBITRUM_RPC_URL="http://localhost:8547"
+# L1 Testnet
+NEXT_PUBLIC_RPC_URL_SEPOLIA=
+
+# Nitro Testnode
+NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L1="http://127.0.0.1:8545"
+NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L2="http://127.0.0.1:8547"
+NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L3="http://127.0.0.1:3347"
+
+# ----- Other -----
+
+NEXT_PUBLIC_SENTRY_DSN=
 
 NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=
 

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

@@ -28,7 +28,7 @@
     "exponential-backoff": "^3.1.1",
     "graphql": "^16.9.0",
     "lodash-es": "^4.17.21",
-    "next": "^14.2.15",
+    "next": "^14.2.22",
     "next-query-params": "^5.0.0",
     "overmind": "^28.0.1",
     "overmind-react": "^29.0.1",
@@ -42,7 +42,7 @@
     "react-use": "^17.6.0",
     "react-virtualized": "^9.22.3",
     "sharp": "^0.33.5",
-    "swr": "^2.1.2",
+    "swr": "^2.3.0",
     "tailwind-merge": "^2.5.5",
     "use-query-params": "^2.2.1",
     "wagmi": "^0.12.18",
@@ -83,7 +83,7 @@
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.1.5",
     "@synthetixio/synpress": "3.7.3",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.1",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.6.1",

packages/arb-token-bridge-ui/scripts/generateCoreChainsToMonitor.ts

@@ -1,7 +1,8 @@
 import fs from 'fs'
 import 'dotenv/config'
 import { getArbitrumNetwork } from '@arbitrum/sdk'
-import { ChainId, rpcURLs } from '../src/util/networks'
+import { rpcURLs } from '../src/util/networks'
+import { ChainId } from '../src/types/ChainId'
 import { getChainToMonitor } from './utils'
 
 // github secrets return '' for empty values, so we need to sanitize the value

packages/arb-token-bridge-ui/src/api-utils/ServerSubgraphUtils.ts

@@ -5,7 +5,7 @@ import {
   NormalizedCacheObject
 } from '@apollo/client'
 
-import { ChainId } from '../util/networks'
+import { ChainId } from '../types/ChainId'
 
 /**
  * The API key to be used for calls to The Graph Network.

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

@@ -21,7 +21,6 @@ import { AppContextProvider } from './AppContext'
 import { config, useActions, useAppState } from '../../state'
 import { MainContent } from '../MainContent/MainContent'
 import { ArbTokenBridgeStoreSync } from '../syncers/ArbTokenBridgeStoreSync'
-import { BalanceUpdater } from '../syncers/BalanceUpdater'
 import { TokenListSyncer } from '../syncers/TokenListSyncer'
 import { Header } from '../common/Header'
 import { HeaderAccountPopover } from '../common/HeaderAccountPopover'
@@ -219,7 +218,6 @@ function AppContent() {
         <HeaderAccountPopover />
       </Header>
       <TokenListSyncer />
-      <BalanceUpdater />
       <ArbTokenBridgeStoreSyncWrapper />
       <MainContent />
     </>

packages/arb-token-bridge-ui/src/components/App/AppContext.tsx

@@ -1,10 +1,5 @@
 import { createContext, useContext, useReducer, Dispatch } from 'react'
 
-export enum TransactionHistoryTab {
-  DEPOSITS = 0,
-  WITHDRAWALS = 1,
-  CCTP = 2
-}
 type AppContextState = {
   layout: {
     isTransferPanelVisible: boolean

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

@@ -7,6 +7,7 @@ import { ArbitrumStats, statsLocalStorageKey } from './ArbitrumStats'
 import { SettingsDialog } from '../common/SettingsDialog'
 import { TransactionHistory } from '../TransactionHistory/TransactionHistory'
 import { TopNavBar } from '../TopNavBar'
+import { useBalanceUpdater } from '../syncers/useBalanceUpdater'
 
 enum MainContentTabs {
   Bridge = 0,
@@ -33,6 +34,8 @@ export function MainContent() {
     useLocalStorage<boolean>(statsLocalStorageKey)
   const { selectedTab, setSelectedTab } = useMainContentTabs()
 
+  useBalanceUpdater()
+
   return (
     <>
       <div className="main-panel mx-auto flex w-full flex-col items-center gap-3 sm:pt-6">

packages/arb-token-bridge-ui/src/components/TransactionHistory/helpers.ts

@@ -15,7 +15,8 @@ import {
   TeleporterMergedTransaction,
   WithdrawalStatus
 } from '../../state/app/state'
-import { ChainId, getL1BlockTime, isNetwork } from '../../util/networks'
+import { getL1BlockTime, isNetwork } from '../../util/networks'
+import { ChainId } from '../../types/ChainId'
 import { Deposit, Transfer } from '../../hooks/useTransactionHistory'
 import {
   getParentToChildMessageDataFromParentTxHash,
@@ -37,14 +38,6 @@ const PARENT_CHAIN_TX_DETAILS_OF_CLAIM_TX =
   'arbitrum:bridge:claim:parent:tx:details'
 const DEPOSITS_LOCAL_STORAGE_KEY = 'arbitrum:bridge:deposits'
 
-export enum StatusLabel {
-  PENDING = 'Pending',
-  CLAIMABLE = 'Claimable',
-  SUCCESS = 'Success',
-  EXPIRED = 'Expired',
-  FAILURE = 'Failure'
-}
-
 function isDeposit(tx: MergedTransaction): boolean {
   return !tx.isWithdrawal
 }

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

@@ -3,7 +3,8 @@ import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import { useAppState } from '../../state'
-import { ChainId, getNetworkName, isNetwork } from '../../util/networks'
+import { getNetworkName, isNetwork } from '../../util/networks'
+import { ChainId } from '../../types/ChainId'
 import { Tooltip } from '../common/Tooltip'
 import { formatAmount } from '../../util/NumberUtils'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'

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

@@ -7,7 +7,8 @@ import { BridgesTable } from '../common/BridgesTable'
 import { SecurityNotGuaranteed } from './SecurityLabels'
 import { Dialog, UseDialogProps } from '../common/Dialog'
 import { FastBridgeInfo, FastBridgeNames } from '../../util/fastBridges'
-import { ChainId, getNetworkName, isNetwork } from '../../util/networks'
+import { getNetworkName, isNetwork } from '../../util/networks'
+import { ChainId } from '../../types/ChainId'
 import { ether } from '../../constants'
 import { useArbQueryParams } from '../../hooks/useArbQueryParams'
 import { useNetworks } from '../../hooks/useNetworks'

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

@@ -6,7 +6,8 @@ import { Dialog } from '../common/Dialog'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { useNetworks } from '../../hooks/useNetworks'
 import { ExternalLink } from '../common/ExternalLink'
-import { ChainId, getNetworkName } from '../../util/networks'
+import { getNetworkName } from '../../util/networks'
+import { ChainId } from '../../types/ChainId'
 import { getL2ConfigForTeleport } from '../../token-bridge-sdk/teleport'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { withdrawOnlyTokens } from '../../util/WithdrawOnlyUtils'

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

@@ -1,4 +1,4 @@
-import { ChainId } from '../../../util/networks'
+import { ChainId } from '../../../types/ChainId'
 
 export enum NetworkType {
   parentChain = 'parentChain',

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

@@ -11,7 +11,6 @@ import SyntaxHighlighter from 'react-syntax-highlighter'
 import { stackoverflowDark } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 
 import {
-  ChainId,
   ChainWithRpcUrl,
   getCustomChainsFromLocalStorage,
   getCustomChainFromLocalStorageById,
@@ -22,6 +21,7 @@ import {
   rpcURLs,
   isNetwork
 } from '../../util/networks'
+import { ChainId } from '../../types/ChainId'
 import { Loader } from './atoms/Loader'
 import { Erc20Data, fetchErc20Data } from '../../util/TokenUtils'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'

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

@@ -15,7 +15,8 @@ import {
 import { twMerge } from 'tailwind-merge'
 import { AutoSizer, List, ListRowProps } from 'react-virtualized'
 
-import { ChainId, isNetwork, getNetworkName } from '../../util/networks'
+import { isNetwork, getNetworkName } from '../../util/networks'
+import { ChainId } from '../../types/ChainId'
 import { useIsTestnetMode } from '../../hooks/useIsTestnetMode'
 import { SearchPanel } from './SearchPanel/SearchPanel'
 import { SearchPanelTable } from './SearchPanel/SearchPanelTable'

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

@@ -11,7 +11,7 @@ import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { getChainQueryParamForChain } from '../../types/ChainQueryParam'
 import { trackEvent } from '../../util/AnalyticsUtils'
 import { useIsTestnetMode } from '../../hooks/useIsTestnetMode'
-import { isTestingEnvironment } from '../../util/CommonUtils'
+import { isDevelopmentEnvironment } from '../../util/CommonUtils'
 
 const shuffleArray = (array: PortalProject[]) => {
   return array.sort(() => Math.random() - 0.5)
@@ -54,7 +54,7 @@ const fetchProjects = async (
   }
 
   if (isTestnetMode) {
-    return isTestingEnvironment ? generateTestnetProjects(chainId, 6) : [] // don't show any test projects in production
+    return isDevelopmentEnvironment ? generateTestnetProjects(chainId, 6) : [] // don't show any test projects in production
   }
 
   try {