feat: dynamically set meta tags (#1453)

Co-authored-by: Fionna <[email protected]>

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/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

@@ -1093,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/tsconfig.json

@@ -5,7 +5,8 @@
     "additional.d.ts",
     "next.config.js",
     "next-env.d.ts",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "build/types/**/*.ts"
   ],
   "compilerOptions": {
     "noEmit": true,
@@ -15,7 +16,13 @@
       "@/images/*": ["./public/images/*"],
       "@/icons/*": ["./public/icons/*"],
       "@/token-bridge-sdk/*": ["./src/token-bridge-sdk/*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "exclude": ["node_modules"]
 }