Merge branch 'master' into fs-1001/add-useBridgeTokensStore

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

@@ -40,7 +40,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",
@@ -49,8 +49,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",
@@ -60,6 +61,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"
   },
@@ -110,6 +112,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/TransferPanelSummary.tsx

@@ -262,17 +262,15 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) {
           )}
         </span>
       </div>
-      {!isDepositMode &&
-        (isDestinationChainArbitrumOne ||
-          isDestinationChainArbitrumSepolia) && (
-          <div
-            className={twMerge(
-              'grid grid-cols-[260px_auto] items-center text-sm font-light'
-            )}
-          >
-            <ConfirmationTimeInfo chainId={networks.sourceChain.id} />
-          </div>
-        )}
+      {!isDepositMode && (
+        <div
+          className={twMerge(
+            'grid grid-cols-[260px_auto] items-center text-sm font-light'
+          )}
+        >
+          <ConfirmationTimeInfo chainId={networks.sourceChain.id} />
+        </div>
+      )}
     </TransferPanelSummaryContainer>
   )
 }
@@ -281,7 +279,7 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
   const {
     confirmationTimeInReadableFormat,
     confirmationTimeInReadableFormatShort,
-    isDefaultConfirmationTime
+    fastWithdrawalActive
   } = getConfirmationTime(chainId)
   return (
     <>
@@ -293,7 +291,7 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
         <span className="sm:hidden">
           {confirmationTimeInReadableFormatShort}
         </span>
-        {!isDefaultConfirmationTime && (
+        {fastWithdrawalActive && (
           <Tooltip
             content={
               'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'

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/TokenListUtils.ts

@@ -157,15 +157,6 @@ export const BRIDGE_TOKEN_LISTS: BridgeTokenList[] = [
     isDefault: true,
     logoURI: UniswapLogo
   },
-  {
-    id: 18,
-    // L3X
-    originChainID: 12324,
-    url: 'https://tokenlist.arbitrum.io/ArbTokenLists/12324_arbed_uniswap_labs.json',
-    name: 'Arbed Uniswap List',
-    isDefault: true,
-    logoURI: UniswapLogo
-  },
   {
     id: 19,
     // SX Network

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

@@ -112,7 +112,6 @@ const SECONDS_IN_MINUTE = 60
 const SECONDS_IN_HOUR = 3600
 const SECONDS_IN_DAY = 86400
 const DEFAULT_CONFIRMATION_TIME = 7 * SECONDS_IN_DAY
-const DEFAULT_FAST_WITHDRAWAL_TIME = SECONDS_IN_DAY
 const DEFAULT_TESTNET_CONFIRMATION_TIME = SECONDS_IN_HOUR
 
 function formatDuration(seconds: number, short = false): string {
@@ -135,19 +134,14 @@ function formatDuration(seconds: number, short = false): string {
  * @param {number} chainId - The ID of the parent chain.
  */
 export function getConfirmationTime(chainId: number) {
-  const { fastWithdrawalTime, fastWithdrawalActive } =
-    getBridgeUiConfigForChain(chainId)
+  const { fastWithdrawalTime } = getBridgeUiConfigForChain(chainId)
   const isTestnet = isNetwork(chainId).isTestnet
 
-  const isDefaultConfirmationTime = !fastWithdrawalActive
-  const isDefaultFastWithdrawal = fastWithdrawalActive && !fastWithdrawalTime
-  const isCustomFastWithdrawal = fastWithdrawalActive && !!fastWithdrawalTime
+  const fastWithdrawalActive = typeof fastWithdrawalTime !== 'undefined'
 
   let confirmationTimeInSeconds: number
 
-  if (isDefaultFastWithdrawal) {
-    confirmationTimeInSeconds = DEFAULT_FAST_WITHDRAWAL_TIME
-  } else if (isCustomFastWithdrawal) {
+  if (fastWithdrawalActive) {
     confirmationTimeInSeconds = fastWithdrawalTime / 1000
   } else {
     confirmationTimeInSeconds = isTestnet
@@ -165,9 +159,6 @@ export function getConfirmationTime(chainId: number) {
 
   return {
     fastWithdrawalActive,
-    isDefaultConfirmationTime,
-    isDefaultFastWithdrawal,
-    isCustomFastWithdrawal,
     confirmationTimeInSeconds,
     confirmationTimeInReadableFormat,
     confirmationTimeInReadableFormatShort

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)