Merge branch 'master' into add-withdrawal-approval-check

README.md

@@ -69,14 +69,9 @@ Interested in contributing to this repo? We welcome your contribution.
 
    2. In `.env` created, add `NEXT_PUBLIC_INFURA_KEY=my-infura-key`
 
-   3. Set `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` to your WalletConnect project ID. You can create a new project on the [WalletConnect dashboard](https://cloud.walletconnect.com/app).
+   3. (Optional) If you want to use a different RPC provider or your own RPC, please see [RPC Configuration](./packages/arb-token-bridge-ui/docs/rpc-configuration.md).
 
-   4. For custom urls, set optional vars:
-
-   - `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.
+   4. Set `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` to your WalletConnect project ID. You can create a new project on the [WalletConnect dashboard](https://cloud.walletconnect.com/app).
 
 5. Build the project and internal packages
 

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

@@ -1,3 +1,8 @@
+# ----- RPC Provider -----
+
+# Used for selecting between Infura and Alchemy. See "/docs/rpc-configuration.md" for more details.
+NEXT_PUBLIC_RPC_PROVIDER=infura
+
 # ----- Infura -----
 
 # Default Infura key. If no network-specific keys are set, it will fallback to this key.
@@ -18,13 +23,27 @@ NEXT_PUBLIC_INFURA_KEY_BASE=
 NEXT_PUBLIC_INFURA_KEY_ARBITRUM_SEPOLIA=
 NEXT_PUBLIC_INFURA_KEY_BASE_SEPOLIA=
 
+# ----- Alchemy -----
+
+NEXT_PUBLIC_ALCHEMY_KEY=
+
 # ----- Custom RPCs -----
 
 # L1 Mainnet
 NEXT_PUBLIC_RPC_URL_ETHEREUM=
 
 # L1 Testnet
 NEXT_PUBLIC_RPC_URL_SEPOLIA=
+NEXT_PUBLIC_RPC_URL_HOLESKY=
+
+# L2 Mainnet
+NEXT_PUBLIC_RPC_URL_ARBITRUM_ONE=
+NEXT_PUBLIC_RPC_URL_ARBITRUM_NOVA=
+NEXT_PUBLIC_RPC_URL_BASE=
+
+# L2 Testnet
+NEXT_PUBLIC_RPC_URL_ARBITRUM_SEPOLIA=
+NEXT_PUBLIC_RPC_URL_BASE_SEPOLIA=
 
 # Nitro Testnode
 NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L1="http://127.0.0.1:8545"

packages/arb-token-bridge-ui/docs/rpc-configuration.md

@@ -0,0 +1,59 @@
+# RPC Configuration
+
+This document outlines how configuring RPCs works, either through [RPC providers](#rpc-providers), or [custom RPCs](#custom-rpcs).
+
+## RPC Providers
+
+Two RPC providers are currently supported: [Infura](#infura) and [Alchemy](#alchemy).
+
+Selecting which one to use is done via the following environment variable:
+
+- `NEXT_PUBLIC_RPC_PROVIDER`
+
+The accepted values (case insensitive) are `infura` and `alchemy`. The default is `infura`.
+
+### Infura
+
+The Infura key is provided through the following environment variable:
+
+- `NEXT_PUBLIC_INFURA_KEY`
+
+The key will be used for all chains. However, if you need to have different keys for each chain, you can do so through the following environment variables:
+
+- `NEXT_PUBLIC_INFURA_KEY_ETHEREUM`
+- `NEXT_PUBLIC_INFURA_KEY_SEPOLIA`
+- `NEXT_PUBLIC_INFURA_KEY_HOLESKY`
+- `NEXT_PUBLIC_INFURA_KEY_ARBITRUM_ONE`
+- `NEXT_PUBLIC_INFURA_KEY_BASE`
+- `NEXT_PUBLIC_INFURA_KEY_ARBITRUM_SEPOLIA`
+- `NEXT_PUBLIC_INFURA_KEY_BASE_SEPOLIA`
+
+> [!NOTE]
+> Arbitrum Nova is currently not supported on Infura, so the [public RPC](https://nova.arbitrum.io/rpc) will be used instead.
+
+### Alchemy
+
+The Alchemy key is provided through the following environment variable:
+
+- `NEXT_PUBLIC_ALCHEMY_KEY`
+
+The key will be used for all chains.
+
+## Custom RPCs
+
+If you need to override the RPC for a chain, you can do so through the following environment variables:
+
+- `NEXT_PUBLIC_RPC_URL_ETHEREUM`
+- `NEXT_PUBLIC_RPC_URL_SEPOLIA`
+- `NEXT_PUBLIC_RPC_URL_HOLESKY`
+- `NEXT_PUBLIC_RPC_URL_ARBITRUM_ONE`
+- `NEXT_PUBLIC_RPC_URL_ARBITRUM_NOVA`
+- `NEXT_PUBLIC_RPC_URL_BASE`
+- `NEXT_PUBLIC_RPC_URL_ARBITRUM_SEPOLIA`
+- `NEXT_PUBLIC_RPC_URL_BASE_SEPOLIA`
+
+For [Nitro Testnode](https://github.com/OffchainLabs/nitro-testnode) chains:
+
+- `NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L1`
+- `NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L2`
+- `NEXT_PUBLIC_RPC_URL_NITRO_TESTNODE_L3`

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistorySearchBar.tsx

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { isAddress } from 'ethers/lib/utils.js'
+import { isAddress } from 'ethers/lib/utils'
 import { Address, useAccount } from 'wagmi'
 import { useCallback, useEffect } from 'react'
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'

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

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+
+import { Dialog, UseDialogProps } from '../common/Dialog'
+import { ExternalLink } from '../common/ExternalLink'
+import { useNetworks } from '../../hooks/useNetworks'
+import { getExplorerUrl, getNetworkName } from '../../util/networks'
+import { shortenAddress } from '../../util/CommonUtils'
+import { useArbQueryParams } from '../../hooks/useArbQueryParams'
+import { Checkbox } from '../common/Checkbox'
+
+export function CustomDestinationAddressConfirmationDialog(
+  props: UseDialogProps
+) {
+  const [{ destinationAddress = '' }] = useArbQueryParams()
+
+  const [networks] = useNetworks()
+
+  const networkName = getNetworkName(networks.destinationChain.id)
+
+  const [checkboxChecked, setCheckboxChecked] = useState(false)
+
+  function closeWithReset(confirmed: boolean) {
+    props.onClose(confirmed)
+    setCheckboxChecked(false)
+  }
+
+  return (
+    <Dialog
+      {...props}
+      title="Confirm Destination Address"
+      className="flex flex-col gap-4"
+      onClose={closeWithReset}
+      actionButtonProps={{
+        disabled: !checkboxChecked
+      }}
+    >
+      <div className="mb-4">
+        <p className="pb-2">
+          You are attempting to deposit funds to the same address{' '}
+          <ExternalLink
+            className="arb-hover underline"
+            href={`${getExplorerUrl(
+              networks.destinationChain.id
+            )}/address/${destinationAddress}`}
+          >
+            {shortenAddress(destinationAddress)}
+          </ExternalLink>{' '}
+          on {networkName}.
+        </p>
+        <p className="pb-2">
+          This is an uncommon action since it&apos;s not guaranteed that you
+          have a smart contract wallet at the same address on the destination
+          chain.
+        </p>
+      </div>
+
+      <p className="mb-8 rounded-md bg-orange/10 p-4">
+        <Checkbox
+          label={
+            <span className="font-light">
+              I confirm that I have full control over the entered destination
+              address on {networkName} and understand that proceeding without
+              control may result in an{' '}
+              <span className="font-bold">irrecoverable loss of funds</span>.
+            </span>
+          }
+          checked={checkboxChecked}
+          onChange={setCheckboxChecked}
+        />
+      </p>
+
+      <p>
+        If not sure, please reach out to us on our{' '}
+        <ExternalLink
+          className="arb-hover underline"
+          href="https://discord.gg/ZpZuw7p"
+          target="_blank"
+        >
+          <span className="font-medium">support channel</span>
+        </ExternalLink>{' '}
+        for assistance.
+      </p>
+    </Dialog>
+  )
+}

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

@@ -15,9 +15,12 @@ import {
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { Transition } from '../common/Transition'
+import { SafeImage } from '../common/SafeImage'
+import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 
 export type TokenButtonOptions = {
   symbol?: string
+  logoSrc?: string
   disabled?: boolean
 }
 
@@ -34,6 +37,9 @@ export function TokenButton({
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
 
+  const tokensFromLists = useTokensFromLists()
+  const tokensFromUser = useTokensFromUser()
+
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
   const tokenSymbol = useMemo(() => {
@@ -51,6 +57,27 @@ export function TokenButton({
     })
   }, [selectedToken, networks.sourceChain.id, nativeCurrency.symbol, options])
 
+  const tokenLogoSrc = useMemo(() => {
+    if (typeof options?.logoSrc !== 'undefined') {
+      return options.logoSrc || nativeCurrency.logoUrl
+    }
+
+    if (selectedToken) {
+      return (
+        tokensFromLists[selectedToken.address]?.logoURI ??
+        tokensFromUser[selectedToken.address]?.logoURI
+      )
+    }
+
+    return nativeCurrency.logoUrl
+  }, [
+    nativeCurrency.logoUrl,
+    options,
+    selectedToken,
+    tokensFromLists,
+    tokensFromUser
+  ])
+
   return (
     <>
       <Popover className="relative">
@@ -63,18 +90,11 @@ export function TokenButton({
               disabled={disabled}
             >
               <div className="flex items-center gap-2">
-                {/* Commenting it out until we update the token image source files to be of better quality */}
-                {/* {tokenLogo && ( 
-                 // SafeImage is used for token logo, we don't know at buildtime
-                where those images will be loaded from // It would throw error
-                if it's loaded from external domains // eslint-disable-next-line
-                @next/next/no-img-element 
-                 <img
-                    src={tokenLogo}
-                    alt="Token logo"
-                    className="h-5 w-5 sm:h-7 sm:w-7"
-                  />
-                )} */}
+                <SafeImage
+                  src={tokenLogoSrc}
+                  alt={`${selectedToken?.symbol ?? nativeCurrency.symbol} logo`}
+                  className="h-5 w-5 shrink-0"
+                />
                 <span className="text-xl font-light">{tokenSymbol}</span>
                 {!disabled && (
                   <ChevronDownIcon

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

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { ExternalLink } from '../common/ExternalLink'
@@ -16,9 +17,14 @@ import {
 } from '../../util/TokenUtils'
 import { SafeImage } from '../common/SafeImage'
 
-export function TokenLogoFallback() {
+export function TokenLogoFallback({ className }: { className?: string }) {
   return (
-    <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/30 bg-gray-dark text-sm font-medium">
+    <div
+      className={twMerge(
+        'flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-white/30 bg-gray-dark text-sm font-medium',
+        className
+      )}
+    >
       ?
     </div>
   )