Merge branch 'master' into feat-fallback-rpc-provider

.github/ISSUE_TEMPLATE/add-orbit-chain-request.yml

@@ -70,6 +70,7 @@ body:
       options:
         - "1"
         - "42161"
+        - "42170"
         - "421614"
         - "11155111"
         - "17000"

.github/workflows/e2e-tests.yml

@@ -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

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

@@ -10,7 +10,7 @@
     "@headlessui/react": "^1.7.8",
     "@headlessui/tailwindcss": "^0.1.2",
     "@heroicons/react": "^2.0.18",
-    "@offchainlabs/cobalt": "^0.3.11",
+    "@offchainlabs/cobalt": "^0.3.12",
     "@rainbow-me/rainbowkit": "^0.12.16",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^8.33.1",
@@ -23,29 +23,30 @@
     "axios": "^1.7.4",
     "boring-avatars": "^1.7.0",
     "cheerio": "^1.0.0-rc.12",
-    "dayjs": "^1.11.8",
+    "dayjs": "^1.11.13",
     "ethers": "^5.6.0",
-    "graphql": "^16.8.1",
+    "exponential-backoff": "^3.1.1",
+    "graphql": "^16.9.0",
     "lodash-es": "^4.17.21",
-    "next": "^14.2.12",
+    "next": "^14.2.22",
     "next-query-params": "^5.0.0",
     "overmind": "^28.0.1",
     "overmind-react": "^29.0.1",
-    "posthog-js": "^1.155.4",
+    "posthog-js": "^1.200.0",
     "query-string": "^8.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-loader-spinner": "^5.4.5",
     "react-syntax-highlighter": "^15.6.1",
     "react-toastify": "^9.1.1",
-    "react-use": "^17.2.4",
+    "react-use": "^17.6.0",
     "react-virtualized": "^9.22.3",
     "sharp": "^0.33.5",
-    "swr": "^2.1.2",
-    "tailwind-merge": "^2.0.0",
+    "swr": "^2.3.0",
+    "tailwind-merge": "^2.5.5",
     "use-query-params": "^2.2.1",
     "wagmi": "^0.12.18",
-    "zod": "^3.22.4",
+    "zod": "^3.24.1",
     "zustand": "^4.3.9"
   },
   "scripts": {
@@ -82,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",
@@ -108,14 +109,14 @@
     "jest": "^29.4.0",
     "jest-environment-jsdom": "^29.4.0",
     "patch-package": "^8.0.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.49",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11",
-    "satori": "^0.10.11",
-    "start-server-and-test": "^2.0.0",
-    "tailwindcss": "^3.2.4",
-    "ts-node": "^10.9.1",
+    "satori": "^0.12.0",
+    "start-server-and-test": "^2.0.9",
+    "tailwindcss": "^3.4.16",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2"
   }
 }

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,23 +1,16 @@
 import { createContext, useContext, useReducer, Dispatch } from 'react'
 
-export enum TransactionHistoryTab {
-  DEPOSITS = 0,
-  WITHDRAWALS = 1,
-  CCTP = 2
-}
 type AppContextState = {
   layout: {
     isTransferPanelVisible: boolean
     isTransferring: boolean
-    isTransactionHistoryPanelVisible: boolean
   }
 }
 
 const initialState: AppContextState = {
   layout: {
     isTransferPanelVisible: true,
-    isTransferring: false,
-    isTransactionHistoryPanelVisible: false
+    isTransferring: false
   }
 }
 
@@ -29,7 +22,6 @@ const AppContext = createContext<AppContextValue>([initialState, () => {}])
 type Action =
   | { type: 'layout.set_is_transfer_panel_visible'; payload: boolean }
   | { type: 'layout.set_is_transferring'; payload: boolean }
-  | { type: 'layout.set_txhistory_panel_visible'; payload: boolean }
 
 function reducer(state: AppContextState, action: Action) {
   switch (action.type) {
@@ -39,15 +31,6 @@ function reducer(state: AppContextState, action: Action) {
         layout: { ...state.layout, isTransferPanelVisible: action.payload }
       }
 
-    case 'layout.set_txhistory_panel_visible':
-      return {
-        ...state,
-        layout: {
-          ...state.layout,
-          isTransactionHistoryPanelVisible: action.payload
-        }
-      }
-
     case 'layout.set_is_transferring':
       return {
         ...state,
@@ -88,17 +71,7 @@ export const useAppContextActions = (dispatchOverride?: Dispatch<Action>) => {
     dispatch({ type: 'layout.set_is_transferring', payload })
   }
 
-  const openTransactionHistoryPanel = () => {
-    dispatch({ type: 'layout.set_txhistory_panel_visible', payload: true })
-  }
-
-  const closeTransactionHistoryPanel = () => {
-    dispatch({ type: 'layout.set_txhistory_panel_visible', payload: false })
-  }
-
   return {
-    setTransferring,
-    openTransactionHistoryPanel,
-    closeTransactionHistoryPanel
+    setTransferring
   }
 }

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

@@ -1,68 +1,57 @@
-import { useEffect, useMemo } from 'react'
-import { useAccount } from 'wagmi'
 import { useLocalStorage } from '@uidotdev/usehooks'
+import { Tab } from '@headlessui/react'
+import { create } from 'zustand'
 
 import { TransferPanel } from '../TransferPanel/TransferPanel'
-import { SidePanel } from '../common/SidePanel'
-import { useAppContextActions, useAppContextState } from '../App/AppContext'
 import { ArbitrumStats, statsLocalStorageKey } from './ArbitrumStats'
 import { SettingsDialog } from '../common/SettingsDialog'
 import { TransactionHistory } from '../TransactionHistory/TransactionHistory'
-import { useTransactionHistory } from '../../hooks/useTransactionHistory'
-import { isTxPending } from '../TransactionHistory/helpers'
-import { TransactionStatusInfo } from '../TransactionHistory/TransactionStatusInfo'
+import { TopNavBar } from '../TopNavBar'
+import { useBalanceUpdater } from '../syncers/useBalanceUpdater'
 
-function TransactionHistorySidePanel() {
-  const { closeTransactionHistoryPanel } = useAppContextActions()
-  const {
-    layout: { isTransactionHistoryPanelVisible }
-  } = useAppContextState()
-  const { address } = useAccount()
-
-  const transactionHistoryProps = useTransactionHistory(address, {
-    runFetcher: true
-  })
-
-  const { transactions, updatePendingTransaction } = transactionHistoryProps
-
-  const pendingTransactions = useMemo(() => {
-    return transactions.filter(isTxPending)
-  }, [transactions])
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      pendingTransactions.forEach(updatePendingTransaction)
-    }, 10_000)
-
-    return () => clearInterval(interval)
-  }, [pendingTransactions, updatePendingTransaction])
+enum MainContentTabs {
+  Bridge = 0,
+  TransactionHistory = 1
+}
 
-  return (
-    <SidePanel
-      isOpen={isTransactionHistoryPanelVisible}
-      onClose={closeTransactionHistoryPanel}
-      scrollable={false}
-      panelClassNameOverrides="pb-8"
-    >
-      <TransactionHistory props={{ ...transactionHistoryProps, address }} />
-    </SidePanel>
-  )
+type MainContentTabStore = {
+  selectedTab: MainContentTabs
+  setSelectedTab: (index: MainContentTabs) => void
+  switchToBridgeTab: () => void
+  switchToTransactionHistoryTab: () => void
 }
 
+export const useMainContentTabs = create<MainContentTabStore>(set => ({
+  selectedTab: MainContentTabs.Bridge,
+  setSelectedTab: (index: MainContentTabs) => set({ selectedTab: index }),
+  switchToBridgeTab: () => set({ selectedTab: MainContentTabs.Bridge }),
+  switchToTransactionHistoryTab: () =>
+    set({ selectedTab: MainContentTabs.TransactionHistory })
+}))
+
 export function MainContent() {
   const [isArbitrumStatsVisible] =
     useLocalStorage<boolean>(statsLocalStorageKey)
+  const { selectedTab, setSelectedTab } = useMainContentTabs()
+
+  useBalanceUpdater()
 
   return (
     <>
-      <div className="main-panel mx-auto flex w-full flex-col sm:max-w-[600px] sm:pb-12 sm:pt-6">
-        <TransactionStatusInfo />
-
-        <TransferPanel />
+      <div className="main-panel mx-auto flex w-full flex-col items-center gap-3 sm:pt-6">
+        <Tab.Group selectedIndex={selectedTab} onChange={setSelectedTab}>
+          <TopNavBar />
+          <Tab.Panels className="flex w-full items-center justify-center">
+            <Tab.Panel className="w-full sm:max-w-[600px]">
+              <TransferPanel />
+            </Tab.Panel>
+            <Tab.Panel className="w-full md:px-4">
+              <TransactionHistory />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
       </div>
 
-      <TransactionHistorySidePanel />
-
       {/* Settings panel */}
       <SettingsDialog />
 

packages/arb-token-bridge-ui/src/components/Sidebar/AccountMenuItem.tsx

@@ -17,7 +17,6 @@ export const AccountMenuItem = () => {
     accountShort,
     ensName,
     ensAvatar,
-    openTransactionHistory,
     disconnect,
     udInfo,
     chain,
@@ -36,12 +35,6 @@ export const AccountMenuItem = () => {
         />
       }
     >
-      <MenuItem
-        title="Transactions"
-        Icon={<DocumentTextIcon className="h-[18px] w-[18px]" />}
-        onClick={openTransactionHistory}
-        isMobile
-      />
       {chain && (
         <MenuItem
           title="Explorer"

packages/arb-token-bridge-ui/src/components/Sidebar/AppSidebar.tsx

@@ -11,7 +11,7 @@ const DynamicSidebar = dynamic(
 export const AppSidebar = () => {
   const posthog = usePostHog()
   return (
-    <div className="sticky top-0 z-20 hidden h-full font-normal sm:flex">
+    <div className="sticky left-0 top-0 z-20 hidden h-full font-normal sm:flex">
       <DynamicSidebar logger={posthog} activeMenu="Bridge" />
     </div>
   )

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

@@ -0,0 +1,48 @@
+import { Tab } from '@headlessui/react'
+import { PaperAirplaneIcon } from '@heroicons/react/24/outline'
+import { PropsWithChildren } from 'react'
+import { twMerge } from 'tailwind-merge'
+import Image from 'next/image'
+import { useTransactionReminderInfo } from './TransactionHistory/useTransactionReminderInfo'
+
+function StyledTab({ children, ...props }: PropsWithChildren) {
+  return (
+    <Tab
+      className="flex h-full items-center justify-center gap-2 rounded p-1 text-lg ui-selected:bg-black/75"
+      {...props}
+    >
+      {children}
+    </Tab>
+  )
+}
+
+StyledTab.displayName = 'StyledTab'
+
+export function TopNavBar() {
+  const { colorClassName } = useTransactionReminderInfo()
+
+  return (
+    <Tab.List
+      className={twMerge(
+        'grid w-full max-w-[600px] grid-cols-2 bg-white/20 p-[8px] text-white md:rounded'
+      )}
+    >
+      <StyledTab aria-label="Switch to Bridge Tab">
+        <PaperAirplaneIcon className="h-3 w-3" />
+        Bridge
+      </StyledTab>
+      <StyledTab aria-label="Switch to Transaction History Tab">
+        <Image
+          src="/icons/history.svg"
+          width={24}
+          height={24}
+          alt="history icon"
+        />
+        Txn History{' '}
+        <span
+          className={twMerge('h-3 w-3 rounded-full', colorClassName.light)}
+        />
+      </StyledTab>
+    </Tab.List>
+  )
+}