feat: update site title according to chain (#2095)

OffchainLabs · Nov 22, 2024 · 2f58c3b · 2f58c3b
1 parent d107948
commit 2f58c3b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/packages/arb-token-bridge-ui/src/generateOpenGraphImages.tsx b/packages/arb-token-bridge-ui/src/generateOpenGraphImages.tsx
@@ -246,7 +246,9 @@ async function getOrbitChainImage(orbitChain: Chain) {
           justifyContent: 'center',
           alignItems: 'center',
           position: 'relative',
-          textAlign: 'center'
+          textAlign: 'center',
+          paddingLeft: '40px',
+          paddingRight: '40px'
         }}
       >
         <ArbitrumLogo
@@ -267,7 +269,7 @@ async function getOrbitChainImage(orbitChain: Chain) {
         />
         <span
           style={{
-            fontSize: '140px',
+            fontSize: '112px',
             fontWeight: '500',
             color: 'white',
             letterSpacing: '4px',

diff --git a/packages/arb-token-bridge-ui/src/pages/_app.tsx b/packages/arb-token-bridge-ui/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import relativeTime from 'dayjs/plugin/relativeTime'
 import advancedFormat from 'dayjs/plugin/advancedFormat'
 import timeZone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
+import type { Chain } from 'wagmi'
 
 import 'tippy.js/dist/tippy.css'
 import 'tippy.js/themes/light.css'
@@ -24,8 +25,6 @@ import {
 import { isUserRejectedError } from '../util/isUserRejectedError'
 import { isNetwork } from '../util/networks'
 
-const siteTitle = 'Bridge to Arbitrum'
-
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
 dayjs.extend(timeZone)
@@ -81,20 +80,19 @@ if (
 }
 
 function DynamicMetaData({
-  sourceChainSlug,
-  destinationChainSlug
+  sourceChainInfo,
+  destinationChainInfo
 }: {
-  sourceChainSlug: ChainKeyQueryParam
-  destinationChainSlug: ChainKeyQueryParam
+  sourceChainInfo: Chain
+  destinationChainInfo: Chain
 }) {
-  const sourceChainInfo = getChainForChainKeyQueryParam(sourceChainSlug)
-  const destinationChainInfo =
-    getChainForChainKeyQueryParam(destinationChainSlug)
   const { isOrbitChain: isSourceOrbitChain } = isNetwork(sourceChainInfo.id)
   const { isOrbitChain: isDestinationOrbitChain } = isNetwork(
     destinationChainInfo.id
   )
 
+  const siteTitle = `Bridge to ${destinationChainInfo.name}`
+
   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'
 
@@ -151,14 +149,21 @@ export default function App({ Component, pageProps, router }: AppProps) {
   const destinationChainSlug = (router.query.destinationChain?.toString() ??
     'arbitrum-one') as ChainKeyQueryParam
 
+  const sourceChainInfo = getChainForChainKeyQueryParam(sourceChainSlug)
+  const destinationChainInfo =
+    getChainForChainKeyQueryParam(destinationChainSlug)
+
+  const siteTitle = `Bridge to ${destinationChainInfo.name}`
+
   return (
     <>
       <Head>
         <DynamicMetaData
-          sourceChainSlug={sourceChainSlug}
-          destinationChainSlug={destinationChainSlug}
+          sourceChainInfo={sourceChainInfo}
+          destinationChainInfo={destinationChainInfo}
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* title must be here because it doesn't render if it's in DynamicMetaData */}
         <title>{siteTitle}</title>
       </Head>
       <Layout>