feat: don't require wallet connection

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

@@ -1,12 +1,7 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useAccount, WagmiConfig } from 'wagmi'
+import { darkTheme, RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit'
 
-import { useAccount, useNetwork, WagmiConfig, useDisconnect } from 'wagmi'
-import {
-  darkTheme,
-  RainbowKitProvider,
-  Theme,
-  useConnectModal
-} from '@rainbow-me/rainbowkit'
 import merge from 'lodash-es/merge'
 import axios from 'axios'
 import { createOvermind, Overmind } from 'overmind'
@@ -24,23 +19,16 @@ 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'
-import { getNetworkName } from '../../util/networks'
-import {
-  ArbQueryParamProvider,
-  useArbQueryParams
-} from '../../hooks/useArbQueryParams'
+import { ArbQueryParamProvider } from '../../hooks/useArbQueryParams'
 import { TOS_LOCALSTORAGE_KEY } from '../../constants'
 import { getProps } from '../../util/wagmi/setup'
 import { useAccountIsBlocked } from '../../hooks/useAccountIsBlocked'
 import { useCCTPIsBlocked } from '../../hooks/CCTP/useCCTPIsBlocked'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
-import { sanitizeQueryParams, useNetworks } from '../../hooks/useNetworks'
+import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
-import { HeaderConnectWalletButton } from '../common/HeaderConnectWalletButton'
-import { onDisconnectHandler } from '../../util/walletConnectUtils'
-import { addressIsSmartContract } from '../../util/AddressUtils'
 import { useSyncConnectedChainToAnalytics } from './useSyncConnectedChainToAnalytics'
+import { useSyncConnectedChainToQueryParams } from './useSyncConnectedChainToQueryParams'
 import { isDepositMode } from '../../util/isDepositMode'
 
 declare global {
@@ -71,6 +59,9 @@ const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
   // We want to be sure this fetch is completed by the time we open the USDC modals
   useCCTPIsBlocked()
 
+  useSyncConnectedChainToAnalytics()
+  useSyncConnectedChainToQueryParams()
+
   const [tokenBridgeParams, setTokenBridgeParams] =
     useState<TokenBridgeParams | null>(null)
 
@@ -159,18 +150,9 @@ const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
 }
 
 function AppContent() {
-  const { address, isConnected } = useAccount()
+  const { address } = useAccount()
   const { isBlocked } = useAccountIsBlocked()
   const [tosAccepted] = useLocalStorage<boolean>(TOS_LOCALSTORAGE_KEY, false)
-  const { openConnectModal } = useConnectModal()
-
-  useEffect(() => {
-    if (tosAccepted && !isConnected) {
-      openConnectModal?.()
-    }
-  }, [isConnected, tosAccepted, openConnectModal])
-
-  useSyncConnectedChainToAnalytics()
 
   if (!tosAccepted) {
     return (
@@ -181,23 +163,6 @@ function AppContent() {
     )
   }
 
-  if (!isConnected) {
-    return (
-      <>
-        <Header>
-          <HeaderConnectWalletButton />
-        </Header>
-
-        <div className="flex flex-col items-start gap-4 px-6 pb-8 pt-12 text-white">
-          <p className="text-5xl">No wallet connected</p>
-          <p className="text-xl">
-            Please connect your wallet to use the bridge.
-          </p>
-        </div>
-      </>
-    )
-  }
-
   if (address && isBlocked) {
     return (
       <BlockedDialog
@@ -215,9 +180,7 @@ function AppContent() {
 
   return (
     <>
-      <Header>
-        <HeaderAccountPopover />
-      </Header>
+      <Header />
       <TokenListSyncer />
       <BalanceUpdater />
       <ArbTokenBridgeStoreSyncWrapper />
@@ -248,97 +211,6 @@ Object.keys(localStorage).forEach(key => {
   }
 })
 
-function ConnectedChainSyncer() {
-  const { address } = useAccount()
-  const [shouldSync, setShouldSync] = useState(false)
-  const [didSync, setDidSync] = useState(false)
-  const { disconnect } = useDisconnect({
-    onSettled: onDisconnectHandler
-  })
-
-  const [{ sourceChain, destinationChain }, setQueryParams] =
-    useArbQueryParams()
-  const { chain } = useNetwork()
-
-  const setSourceChainToConnectedChain = useCallback(() => {
-    if (typeof chain === 'undefined') {
-      return
-    }
-
-    const { sourceChainId: sourceChain, destinationChainId: destinationChain } =
-      sanitizeQueryParams({
-        sourceChainId: chain.id,
-        destinationChainId: undefined
-      })
-
-    setQueryParams({ sourceChain, destinationChain })
-  }, [chain, setQueryParams])
-
-  useEffect(() => {
-    async function checkCorrectChainForSmartContractWallet() {
-      if (typeof chain === 'undefined') {
-        return
-      }
-      if (!address) {
-        return
-      }
-      const isSmartContractWallet = await addressIsSmartContract(
-        address,
-        chain.id
-      )
-      if (isSmartContractWallet && sourceChain !== chain.id) {
-        const chainName = getNetworkName(chain.id)
-
-        setSourceChainToConnectedChain()
-
-        window.alert(
-          `You're connected to the app with a smart contract wallet on ${chainName}. In order to properly enable transfers, the app will now reload.\n\nPlease reconnect after the reload.`
-        )
-        disconnect()
-      }
-    }
-
-    checkCorrectChainForSmartContractWallet()
-  }, [
-    address,
-    chain,
-    disconnect,
-    setQueryParams,
-    setSourceChainToConnectedChain,
-    sourceChain
-  ])
-
-  useEffect(() => {
-    if (shouldSync) {
-      return
-    }
-
-    // Only sync connected chain to query params if the query params were not initially provided
-    if (
-      typeof sourceChain === 'undefined' &&
-      typeof destinationChain === 'undefined'
-    ) {
-      setShouldSync(true)
-    }
-  }, [shouldSync, sourceChain, destinationChain])
-
-  useEffect(() => {
-    // When the chain is connected and we should sync, and we haven't synced yet, sync the connected chain to the query params
-    if (chain && shouldSync && !didSync) {
-      setSourceChainToConnectedChain()
-      setDidSync(true)
-    }
-  }, [
-    chain,
-    shouldSync,
-    didSync,
-    setQueryParams,
-    setSourceChainToConnectedChain
-  ])
-
-  return null
-}
-
 export default function App() {
   const [overmind] = useState<Overmind<typeof config>>(createOvermind(config))
 
@@ -350,7 +222,6 @@ export default function App() {
             theme={rainbowkitTheme}
             {...rainbowKitProviderProps}
           >
-            <ConnectedChainSyncer />
             <AppContextProvider>
               <AppContent />
             </AppContextProvider>

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

@@ -1,34 +1,19 @@
-import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { useCallback } from 'react'
 import { useLocalStorage } from '@uidotdev/usehooks'
 
 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>(
     TOS_LOCALSTORAGE_KEY,
     false
   )
 
-  const { openConnectModal } = useConnectModal()
-
   const closeHandler = useCallback(() => {
     setTosAccepted(true)
-
-    try {
-      openConnectModal?.()
-    } catch (error) {
-      errorToast('Failed to open up RainbowKit Connect Modal')
-      captureSentryErrorWithExtraData({
-        error,
-        originFunction: 'WelcomeDialog closeHandler'
-      })
-    }
-  }, [openConnectModal, setTosAccepted])
+  }, [setTosAccepted])
 
   return (
     <div className="mx-4 my-16 max-w-[380px] overflow-hidden rounded border border-gray-dark bg-gray-1 pt-3 text-white sm:mx-auto">

packages/arb-token-bridge-ui/src/components/App/useSyncConnectedChainToAnalytics.ts

@@ -1,5 +1,5 @@
-import { useAccount } from 'wagmi'
 import { useEffect } from 'react'
+import { useAccount } from 'wagmi'
 import * as Sentry from '@sentry/react'
 
 import { useNetworks } from '../../hooks/useNetworks'
@@ -16,53 +16,57 @@ function getWalletName(connectorName: string): ProviderName {
     case 'Safe':
     case 'Injected':
     case 'Ledger':
-      return connectorName
-
-    case 'WalletConnectLegacy':
     case 'WalletConnect':
-      return 'WalletConnect'
+      return connectorName
 
     default:
       return 'Other'
   }
 }
 
 /** given our RPC url, sanitize it before logging to Sentry, to only pass the url and not the keys */
-function getBaseUrl(url: string) {
+function getBaseUrl(url: string | undefined): string | null {
+  if (typeof url === 'undefined') {
+    return null
+  }
+
   try {
     const urlObject = new URL(url)
     return `${urlObject.protocol}//${urlObject.hostname}`
   } catch {
     // if invalid url passed
-    return ''
+    return null
   }
 }
 
 export function useSyncConnectedChainToAnalytics() {
+  const { isConnected, connector } = useAccount()
   const [networks] = useNetworks()
   const { parentChain, childChain } = useNetworksRelationship(networks)
-  const { isConnected, connector } = useAccount()
 
   useEffect(() => {
     if (isConnected && connector) {
       const walletName = getWalletName(connector.name)
       trackEvent('Connect Wallet Click', { walletName })
-    }
 
-    // set a custom tag in sentry to filter issues by connected wallet.name
-    Sentry.setTag('wallet.name', connector?.name ?? '')
+      // set a custom tag in sentry to filter issues by connected wallet.name
+      Sentry.setTag('wallet.name', walletName)
+    }
   }, [isConnected, connector])
 
   useEffect(() => {
     Sentry.setTag('network.parent_chain_id', parentChain.id)
-    Sentry.setTag(
-      'network.parent_chain_rpc_url',
-      getBaseUrl(rpcURLs[parentChain.id] ?? '')
-    )
     Sentry.setTag('network.child_chain_id', childChain.id)
-    Sentry.setTag(
-      'network.child_chain_rpc_url',
-      getBaseUrl(rpcURLs[childChain.id] ?? '')
-    )
+
+    const parentChainRpcUrl = getBaseUrl(rpcURLs[parentChain.id])
+    const childChainRpcUrl = getBaseUrl(rpcURLs[childChain.id])
+
+    if (parentChainRpcUrl) {
+      Sentry.setTag('network.parent_chain_rpc_url', parentChainRpcUrl)
+    }
+
+    if (childChainRpcUrl) {
+      Sentry.setTag('network.child_chain_rpc_url', childChainRpcUrl)
+    }
   }, [childChain.id, parentChain.id])
 }