Merge branch 'master' into fix-arb-on-orbit

.github/workflows/core-batch-poster-monitor.yml

@@ -23,11 +23,8 @@ jobs:
       with:
         repository: OffchainLabs/arbitrum-token-bridge
 
-    - name: Restore node_modules
-      uses: OffchainLabs/actions/node-modules/restore@main
-
-    - name: Install dependencies
-      run: yarn install
+    - name: Install node_modules
+      uses: OffchainLabs/actions/node-modules/install@main
 
     - name: Generate chains JSON
       run: yarn workspace arb-token-bridge-ui generateCoreChainsToMonitor

.github/workflows/orbit-batch-poster-monitor.yml

@@ -21,11 +21,8 @@ jobs:
       with:
         repository: OffchainLabs/arbitrum-token-bridge
 
-    - name: Restore node_modules
-      uses: OffchainLabs/actions/node-modules/restore@main
-
-    - name: Install dependencies
-      run: yarn install
+    - name: Install node_modules
+      uses: OffchainLabs/actions/node-modules/install@main
 
     - name: Generate chains JSON
       run: yarn workspace arb-token-bridge-ui generateOrbitChainsToMonitor

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.6",
+    "@offchainlabs/cobalt": "0.3.7",
     "@rainbow-me/rainbowkit": "^0.12.16",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^7.73.0",

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

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { useCallback } from 'react'
 import { useLocalStorage } from '@uidotdev/usehooks'
@@ -7,6 +6,7 @@ import { ExternalLink } from '../common/ExternalLink'
 import { errorToast } from '../common/atoms/Toast'
 import { TOS_LOCALSTORAGE_KEY } from '../../constants'
 import { Button } from '../common/Button'
+import { captureSentryErrorWithExtraData } from '../../util/SentryUtils'
 
 export function WelcomeDialog() {
   const [, setTosAccepted] = useLocalStorage<boolean>(
@@ -23,7 +23,10 @@ export function WelcomeDialog() {
       openConnectModal?.()
     } catch (error) {
       errorToast('Failed to open up RainbowKit Connect Modal')
-      Sentry.captureException(error)
+      captureSentryErrorWithExtraData({
+        error,
+        originFunction: 'WelcomeDialog closeHandler'
+      })
     }
   }, [openConnectModal, setTosAccepted])
 

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

@@ -7,34 +7,65 @@ import { BridgesTable } from '../common/BridgesTable'
 import { SecurityNotGuaranteed } from './SecurityLabels'
 import { Dialog, UseDialogProps } from '../common/Dialog'
 import { FastBridgeInfo, FastBridgeNames } from '../../util/fastBridges'
-import { ChainId, getNetworkName } from '../../util/networks'
+import { ChainId, getNetworkName, isNetwork } from '../../util/networks'
 import { ether } from '../../constants'
+import { useArbQueryParams } from '../../hooks/useArbQueryParams'
+import { useNetworks } from '../../hooks/useNetworks'
 
-export function OneNovaTransferDialog(
-  props: UseDialogProps & {
-    destinationChainId: number | null
-    amount: string
+/**
+ * On the UI, user can select the pair Arbitrum One/Arbitrum Nova with the network selection dropdowns.
+ * However, they are not valid pairs for transfer, so the latest selected chain will not be set as query param
+ * and useNetworks will not save it.
+ *
+ * This function will use the currently selected chain in the source & destination chain pair to determine
+ * which chain user has selected (but not stored in the query params or useNetworks).
+ */
+function getDialogSourceAndDestinationChains({
+  sourceChainId,
+  destinationChainId
+}: {
+  sourceChainId: ChainId
+  destinationChainId: ChainId
+}) {
+  const { isArbitrumNova: isSourceChainNova } = isNetwork(sourceChainId)
+  const { isArbitrumOne: isDestinationChainArbOne } =
+    isNetwork(destinationChainId)
+
+  if (isSourceChainNova || isDestinationChainArbOne) {
+    return {
+      selectedSourceChainId: ChainId.ArbitrumNova,
+      selectedDestinationChainId: ChainId.ArbitrumOne
+    }
+  }
+  // if source chain is Arbitrum One or
+  // if destination chain is Arbitrum Nova
+  return {
+    selectedSourceChainId: ChainId.ArbitrumOne,
+    selectedDestinationChainId: ChainId.ArbitrumNova
   }
-) {
+}
+
+export function OneNovaTransferDialog(props: UseDialogProps) {
   const {
     app: { selectedToken }
   } = useAppState()
+  const [{ amount }] = useArbQueryParams()
+  const [{ sourceChain, destinationChain }] = useNetworks()
 
-  const { destinationChainId } = props
-
-  const sourceChainId =
-    destinationChainId === ChainId.ArbitrumNova
-      ? ChainId.ArbitrumOne
-      : ChainId.ArbitrumNova
+  const { selectedSourceChainId, selectedDestinationChainId } =
+    getDialogSourceAndDestinationChains({
+      sourceChainId: sourceChain.id,
+      destinationChainId: destinationChain.id
+    })
 
   const sourceNetworkSlug =
-    sourceChainId === ChainId.ArbitrumOne ? 'arbitrum' : 'nova'
+    selectedSourceChainId === ChainId.ArbitrumOne ? 'arbitrum' : 'nova'
   const destinationNetworkSlug =
-    destinationChainId === ChainId.ArbitrumOne ? 'arbitrum' : 'nova'
+    selectedDestinationChainId === ChainId.ArbitrumOne ? 'arbitrum' : 'nova'
 
   const bridgeDeepLink = `https://app.hop.exchange/#/send?sourceNetwork=${sourceNetworkSlug}&destNetwork=${destinationNetworkSlug}&token=${
     selectedToken?.symbol || ether.symbol
-  }&amount=${props.amount}`
+  }&amount=${amount}`
 
   // only enable Hop for now
   const fastBridgeList: FastBridgeInfo[] = [
@@ -46,8 +77,8 @@ export function OneNovaTransferDialog(
       {...props}
       onClose={() => props.onClose(false)}
       title={`Move funds from ${getNetworkName(
-        sourceChainId
-      )} to ${getNetworkName(destinationChainId ?? 0)}`}
+        selectedSourceChainId
+      )} to ${getNetworkName(selectedDestinationChainId)}`}
       actionButtonProps={{ hidden: true }}
       className="max-w-[700px]"
     >

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

@@ -500,6 +500,7 @@ function TokensPanel({
       onSubmit={addNewToken}
       SearchInputButton={AddButton}
       dataCy="tokenSearchList"
+      isDialog={false}
     >
       <AutoSizer>
         {({ height, width }) => (

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

@@ -3,7 +3,6 @@ import { useState, useMemo } from 'react'
 import Tippy from '@tippyjs/react'
 import { constants, utils } from 'ethers'
 import { useLatest } from 'react-use'
-import * as Sentry from '@sentry/react'
 import { useAccount, useChainId, useSigner } from 'wagmi'
 import { TransactionResponse } from '@ethersproject/providers'
 import { twMerge } from 'tailwind-merge'
@@ -75,6 +74,7 @@ import { getBridgeTransferProperties } from '../../token-bridge-sdk/utils'
 import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
 import { getSmartContractWalletTeleportTransfersNotSupportedErrorMessage } from './useTransferReadinessUtils'
 import { useBalances } from '../../hooks/useBalances'
+import { captureSentryErrorWithExtraData } from '../../util/SentryUtils'
 
 const networkConnectionWarningToast = () =>
   warningToast(
@@ -374,8 +374,11 @@ export function TransferPanel() {
       const switchTargetChainId = latestNetworks.current.sourceChain.id
       try {
         await switchNetworkAsync?.(switchTargetChainId)
-      } catch (e) {
-        Sentry.captureException(e)
+      } catch (error) {
+        captureSentryErrorWithExtraData({
+          error,
+          originFunction: 'transferCctp switchNetworkAsync'
+        })
       }
     }
 
@@ -439,7 +442,10 @@ export function TransferPanel() {
           if (isUserRejectedError(error)) {
             return
           }
-          Sentry.captureException(error)
+          captureSentryErrorWithExtraData({
+            error,
+            originFunction: 'cctpTransferStarter.approveToken'
+          })
           errorToast(
             `USDC approval transaction failed: ${
               (error as Error)?.message ?? error
@@ -465,7 +471,10 @@ export function TransferPanel() {
         if (isUserRejectedError(error)) {
           return
         }
-        Sentry.captureException(error)
+        captureSentryErrorWithExtraData({
+          error,
+          originFunction: 'cctpTransferStarter.transfer'
+        })
         errorToast(
           `USDC ${
             isDepositMode ? 'Deposit' : 'Withdrawal'
@@ -861,8 +870,17 @@ export function TransferPanel() {
 
       // transaction submitted callback
       onTxSubmit(transfer)
-    } catch (ex) {
-      Sentry.captureException(ex)
+    } catch (error) {
+      captureSentryErrorWithExtraData({
+        error,
+        originFunction: 'bridgeTransferStarter.transfer',
+        additionalData: selectedToken
+          ? {
+              erc20_address_on_parent_chain: selectedToken.address,
+              transfer_type: 'token'
+            }
+          : { transfer_type: 'native currency' }
+      })
     } finally {
       setTransferring(false)
     }