Merge branch 'master' into dl/fs-967

packages/arb-token-bridge-ui/.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 # Next.js
 .next
 next-env.d.ts
+
+# auto-generated images
+public/images/__auto-generated

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

@@ -41,7 +41,7 @@
     "react-toastify": "^9.1.1",
     "react-use": "^17.2.4",
     "react-virtualized": "^9.22.3",
-    "sharp": "^0.32.6",
+    "sharp": "^0.33.5",
     "swr": "^2.1.2",
     "tailwind-merge": "^2.0.0",
     "use-query-params": "^2.2.1",
@@ -50,8 +50,9 @@
     "zustand": "^4.3.9"
   },
   "scripts": {
+    "predev": "yarn generateDenylist && yarn generateOpenGraphImages",
     "dev": "next dev",
-    "prebuild": "yarn generateDenylist",
+    "prebuild": "yarn generateDenylist && yarn generateOpenGraphImages",
     "postinstall": "patch-package",
     "build": "next build",
     "start": "next start",
@@ -61,6 +62,7 @@
     "lint:fix": "tsc && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
     "prettier:format": "prettier --config-precedence file-override --write \"src/**/*.{tsx,ts,scss,md,json}\"",
     "generateDenylist": "ts-node --project ./scripts/tsconfig.json ./scripts/generateDenylist.ts",
+    "generateOpenGraphImages": "ts-node --project ./scripts/tsconfig.json ./src/generateOpenGraphImages.tsx",
     "generateCoreChainsToMonitor": "ts-node --project ./scripts/tsconfig.json ./scripts/generateCoreChainsToMonitor.ts",
     "generateOrbitChainsToMonitor": "ts-node --project ./scripts/tsconfig.json ./scripts/generateOrbitChainsToMonitor.ts"
   },
@@ -111,6 +113,7 @@
     "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",

packages/arb-token-bridge-ui/scripts/tsconfig.json

@@ -15,6 +15,7 @@
   },
   "compilerOptions": {
     // typescript options here
-    "moduleResolution": "NodeNext"
+    "moduleResolution": "NodeNext",
+    "jsx": "react"
   }
 }

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

@@ -265,6 +265,16 @@ export function useTransferReadiness(): UseTransferReadinessResult {
       return notReady()
     }
 
+    // disable deposits to L3X
+    if (isDepositMode && childChain.id === 12324) {
+      return notReady({
+        errorMessages: {
+          inputAmount1:
+            'Deposits to the L3X chain are currently disabled. Withdrawals remain available. Please complete any pending transactions or reach out to support for further assistance.'
+        }
+      })
+    }
+
     // teleport transfers using SC wallets not enabled yet
     if (isSmartContractWallet && isTeleportMode) {
       return notReady({

packages/arb-token-bridge-ui/src/pages/_app.tsx

@@ -14,11 +14,17 @@ import 'tippy.js/themes/light.css'
 import '@rainbow-me/rainbowkit/styles.css'
 
 import { Layout } from '../components/common/Layout'
-import { siteTitle } from './_document'
 
 import '../styles/tailwind.css'
 import '../styles/purple.css'
+import {
+  ChainKeyQueryParam,
+  getChainForChainKeyQueryParam
+} from '../types/ChainQueryParam'
 import { isUserRejectedError } from '../util/isUserRejectedError'
+import { isNetwork } from '../util/networks'
+
+const siteTitle = 'Bridge to Arbitrum'
 
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
@@ -74,10 +80,84 @@ if (
   })
 }
 
-export default function App({ Component, pageProps }: AppProps) {
+function DynamicMetaData({
+  sourceChainSlug,
+  destinationChainSlug
+}: {
+  sourceChainSlug: ChainKeyQueryParam
+  destinationChainSlug: ChainKeyQueryParam
+}) {
+  const sourceChainInfo = getChainForChainKeyQueryParam(sourceChainSlug)
+  const destinationChainInfo =
+    getChainForChainKeyQueryParam(destinationChainSlug)
+  const { isOrbitChain: isSourceOrbitChain } = isNetwork(sourceChainInfo.id)
+  const { isOrbitChain: isDestinationOrbitChain } = isNetwork(
+    destinationChainInfo.id
+  )
+
+  const siteDescription = `Bridge from ${sourceChainInfo.name} to ${destinationChainInfo.name} using the Arbitrum Bridge. Built to scale Ethereum, Arbitrum brings you 10x lower costs while inheriting Ethereum’s security model. Arbitrum is a Layer 2 Optimistic Rollup.`
+  const siteDomain = 'https://bridge.arbitrum.io'
+
+  let metaImagePath = `${sourceChainInfo.id}-to-${destinationChainInfo.id}.jpg`
+
+  if (isSourceOrbitChain) {
+    metaImagePath = `${sourceChainInfo.id}.jpg`
+  }
+
+  if (isDestinationOrbitChain) {
+    metaImagePath = `${destinationChainInfo.id}.jpg`
+  }
+
+  return (
+    <>
+      <meta name="description" content={siteDescription} />
+
+      {/* <!-- Facebook Meta Tags --> */}
+      <meta name="og:url" property="og:url" content={siteDomain} />
+      <meta name="og:type" property="og:type" content="website" />
+      <meta name="og:title" property="og:title" content={siteTitle} />
+      <meta
+        name="og:description"
+        property="og:description"
+        content={siteDescription}
+      />
+      <meta
+        name="og:image"
+        property="og:image"
+        content={`${siteDomain}/images/__auto-generated/open-graph/${metaImagePath}`}
+      />
+
+      {/* <!-- Twitter Meta Tags --> */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta
+        name="twitter:domain"
+        property="twitter:domain"
+        content="bridge.arbitrum.io"
+      />
+      <meta name="twitter:url" property="twitter:url" content={siteDomain} />
+      <meta name="twitter:title" content={siteTitle} />
+      <meta name="twitter:description" content={siteDescription} />
+      <meta
+        name="twitter:image"
+        content={`${siteDomain}/images/__auto-generated/open-graph/${metaImagePath}`}
+      />
+    </>
+  )
+}
+
+export default function App({ Component, pageProps, router }: AppProps) {
+  const sourceChainSlug = (router.query.sourceChain?.toString() ??
+    'ethereum') as ChainKeyQueryParam
+  const destinationChainSlug = (router.query.destinationChain?.toString() ??
+    'arbitrum-one') as ChainKeyQueryParam
+
   return (
     <>
       <Head>
+        <DynamicMetaData
+          sourceChainSlug={sourceChainSlug}
+          destinationChainSlug={destinationChainSlug}
+        />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{siteTitle}</title>
       </Head>

packages/arb-token-bridge-ui/src/pages/_document.tsx

@@ -1,10 +1,5 @@
 import { Html, Head, Main, NextScript } from 'next/document'
 
-export const siteTitle = 'Bridge to Arbitrum'
-const siteDomain = 'https://bridge.arbitrum.io'
-const siteDescription =
-  'Built to scale Ethereum, Arbitrum brings you 10x lower costs while inheriting Ethereum’s security model. Arbitrum is a Layer 2 Optimistic Rollup.'
-
 export default function Document() {
   return (
     <Html lang="en">
@@ -13,21 +8,6 @@ export default function Document() {
         <link rel="icon" href="/logo.png" />
 
         <meta name="theme-color" content="#000000" />
-        <meta name="description" content={siteDescription} />
-        {/* <!-- Facebook Meta Tags --> */}
-        <meta property="og:url" content={siteDomain} />
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content={siteTitle} />
-        <meta property="og:description" content={siteDescription} />
-        <meta property="og:image" content={`${siteDomain}/og-image.jpg`} />
-
-        {/* <!-- Twitter Meta Tags --> */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta property="twitter:domain" content="bridge.arbitrum.io" />
-        <meta property="twitter:url" content={siteDomain} />
-        <meta name="twitter:title" content={siteTitle} />
-        <meta name="twitter:description" content={siteDescription} />
-        <meta name="twitter:image" content={`${siteDomain}/og-image.jpg`} />
       </Head>
       <body>
         <Main />

packages/arb-token-bridge-ui/src/types/ChainQueryParam.ts

@@ -1,6 +1,5 @@
 import { Chain } from 'wagmi'
 import * as chains from 'wagmi/chains'
-
 import {
   ChainId,
   getCustomChainFromLocalStorageById,

packages/arb-token-bridge-ui/src/util/networks.ts

@@ -193,6 +193,7 @@ export function saveCustomChainToLocalStorage(newCustomChain: ChainWithRpcUrl) {
   }
 
   const newCustomChains = [...getCustomChainsFromLocalStorage(), newCustomChain]
+
   localStorage.setItem(
     customChainLocalStorageKey,
     JSON.stringify(newCustomChains)
@@ -203,6 +204,7 @@ export function removeCustomChainFromLocalStorage(chainId: number) {
   const newCustomChains = getCustomChainsFromLocalStorage().filter(
     chain => chain.chainId !== chainId
   )
+
   localStorage.setItem(
     customChainLocalStorageKey,
     JSON.stringify(newCustomChains)

packages/arb-token-bridge-ui/src/util/orbitChainsData.json

@@ -964,48 +964,6 @@
         }
       }
     },
-    {
-      "chainId": 12325,
-      "confirmPeriodBlocks": 150,
-      "ethBridge": {
-        "bridge": "0x98DBc5f9d4BB16A7c8C21e36789E673b6E0FDf37",
-        "inbox": "0xB0e78299F14b50d151a5eF92b6465bb807B6e56b",
-        "outbox": "0x243487a26284B17b70E8A183a7a1FeB5A6b00824",
-        "rollup": "0xce99C9E7566438a8311424aD0287EB0fDEAc55A2",
-        "sequencerInbox": "0xd598F60Ae694bE2aF9D6933aD9e9f7A431A2005E"
-      },
-      "explorerUrl": "https://explorer-testnet.l3x.com",
-      "rpcUrl": "https://rpc-testnet.l3x.com",
-      "isCustom": true,
-      "isTestnet": true,
-      "name": "L3X Network Testnet",
-      "slug": "l3x-network-testnet",
-      "parentChainId": 421614,
-      "tokenBridge": {
-        "parentCustomGateway": "0x00eE97A18A85a58fbfddA2CCa2Bdb3B88d1068b3",
-        "parentErc20Gateway": "0xD2e9EA14CE4C61630a87bC652f5cD51deA7C66bA",
-        "parentGatewayRouter": "0x8D684F7fA0aE2a13e0a1FAa60699ee2db46505a8",
-        "parentMultiCall": "0xce1CAd780c529e66e3aa6D952a1ED9A6447791c1",
-        "parentProxyAdmin": "0x0000000000000000000000000000000000000000",
-        "parentWeth": "0x980B62Da83eFf3D4576C647993b0c1D7faf17c73",
-        "parentWethGateway": "0xB001D0E3a43EbB820E82720a2Bd74f4C03a5b424",
-        "childCustomGateway": "0xcc3fa38D4a18474DF92107d328bF4A6F7C9fA29A",
-        "childErc20Gateway": "0x7aeD67245Db9b4E6bB26791b48E20aBbA9411EdD",
-        "childGatewayRouter": "0xF40E36d3043373Ce6F89abe3914d631135342C28",
-        "childMultiCall": "0xa8D4b59f0FB23CB785d360E73C7364dDB3e34A62",
-        "childProxyAdmin": "0xC381Ff423f37d42b0b9B84195D9C9C31eDc26e73",
-        "childWeth": "0x6793D074d3A410C803B8C2086E569883D6e928F1",
-        "childWethGateway": "0x4F24D0244B29d76ED1FBD3c8a9967b72b78B9DBd"
-      },
-      "bridgeUiConfig": {
-        "color": "#3ABE7B",
-        "network": {
-          "name": "L3X Network Testnet",
-          "logo": "/images/L3XLogo.png",
-          "description": "Leverage LRTs to earn yield and trade perpetuals on L3X Layer 3 Network."
-        }
-      }
-    },
     {
       "chainId": 1918988905,
       "confirmPeriodBlocks": 64,
@@ -1135,7 +1093,7 @@
         "color": "#03AB2A",
         "network": {
           "name": "Polter Testnet",
-          "logo": "/images/PolterTestnetLogo.png",
+          "logo": "/images/PolterTestnetLogo.webp",
           "description": "A gaming testnet for Aavegotchi's Geist Mainnet."
         },
         "nativeTokenData": {

packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts

@@ -13,8 +13,7 @@ import {
   baseSepolia,
   base
 } from './wagmiAdditionalNetworks'
-import { ChainId } from '../networks'
-import { getCustomChainFromLocalStorageById } from '../networks'
+import { ChainId, getCustomChainFromLocalStorageById } from '../networks'
 import { orbitChains } from '../orbitChainsList'
 
 export function getWagmiChain(chainId: number): Chain {

packages/arb-token-bridge-ui/src/util/wagmi/setup.ts

@@ -1,6 +1,7 @@
 import { createClient, configureChains } from 'wagmi'
 import { mainnet, arbitrum } from '@wagmi/core/chains'
 import { publicProvider } from 'wagmi/providers/public'
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
 import { connectorsForWallets, getDefaultWallets } from '@rainbow-me/rainbowkit'
 import { trustWallet, okxWallet } from '@rainbow-me/rainbowkit/wallets'
 
@@ -16,7 +17,7 @@ import {
   baseSepolia
 } from './wagmiAdditionalNetworks'
 import { isTestingEnvironment } from '../CommonUtils'
-import { getCustomChainsFromLocalStorage, ChainId } from '../networks'
+import { getCustomChainsFromLocalStorage, ChainId, rpcURLs } from '../networks'
 import { getOrbitChains } from '../orbitChainsList'
 import { getWagmiChain } from './getWagmiChain'
 import { customInfuraProvider } from '../infura'
@@ -131,7 +132,15 @@ export function getProps(targetChainKey: string | null) {
     //
     // https://github.com/wagmi-dev/references/blob/main/packages/connectors/src/walletConnect.ts#L114
     getChains(sanitizeTargetChainKey(targetChainKey)),
-    [customInfuraProvider(), publicProvider()]
+    [
+      customInfuraProvider(),
+      publicProvider(),
+      jsonRpcProvider({
+        rpc: chain => ({
+          http: rpcURLs[chain.id]!
+        })
+      })
+    ]
   )
 
   const { wallets } = getDefaultWallets({

packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts

@@ -16,6 +16,7 @@ import {
   findGasFeeSummary,
   findGasFeeForChain,
   findMoveFundsButton,
+  startTransfer,
   findSelectTokenButton,
   openTransactionDetails,
   closeTransactionDetails,
@@ -64,6 +65,7 @@ declare global {
       findGasFeeForChain: typeof findGasFeeForChain
       findGasFeeSummary: typeof findGasFeeSummary
       findMoveFundsButton: typeof findMoveFundsButton
+      startTransfer: typeof startTransfer
       findSelectTokenButton: typeof findSelectTokenButton
       openTransactionDetails: typeof openTransactionDetails
       closeTransactionDetails: typeof closeTransactionDetails

packages/arb-token-bridge-ui/tests/e2e/specs/batchDeposit.cy.ts

@@ -131,8 +131,7 @@ describe('Batch Deposit', () => {
     }
 
     context('should deposit successfully', () => {
-      cy.findMoveFundsButton().click()
-      cy.confirmMetamaskTransaction()
+      cy.startTransfer()
       cy.findTransactionInTransactionHistory({
         ...txData,
         duration: depositTime
@@ -237,8 +236,7 @@ describe('Batch Deposit', () => {
     }
 
     context('should deposit successfully', () => {
-      cy.findMoveFundsButton().click()
-      cy.confirmMetamaskTransaction()
+      cy.startTransfer()
       cy.findTransactionInTransactionHistory({
         ...txData,
         duration: depositTime

packages/arb-token-bridge-ui/tests/e2e/specs/depositERC20.cy.ts

@@ -89,8 +89,7 @@ describe('Deposit Token', () => {
         })
 
         context('should deposit successfully', () => {
-          cy.findMoveFundsButton().click()
-          cy.confirmMetamaskTransaction()
+          cy.startTransfer()
           cy.findTransactionInTransactionHistory({
             duration: depositTime,
             amount: ERC20AmountToSend,
@@ -131,8 +130,7 @@ describe('Deposit Token', () => {
         })
 
         context('should deposit successfully', () => {
-          cy.findMoveFundsButton().click()
-          cy.confirmMetamaskTransaction()
+          cy.startTransfer()
           const txData = {
             amount: ERC20AmountToSend,
             symbol: testCase.symbol