Improve Image Fallback

src/components/CCIP/Cards/TokenCard.css

@@ -18,7 +18,8 @@
   background-color: var(--gray-50);
 }
 
-.token-card__container img {
+.token-card__container object,
+.token-card__container object img {
   width: var(--space-10x);
   height: var(--space-10x);
   border-radius: 50%;

src/components/CCIP/Cards/TokenCard.tsx

@@ -13,14 +13,11 @@ function TokenCard({ name, logo, link, onClick }: TokenCardProps) {
     return (
       <a href={link}>
         <div className="token-card__container">
-          <img
-            src={logo}
-            alt=""
-            onError={({ currentTarget }) => {
-              currentTarget.onerror = null // prevents looping
-              currentTarget.src = fallbackTokenIconUrl
-            }}
-          />
+          {/* We cannot use the normal Image/onError syntax as a fallback as the element is server rendered 
+          and the onerror does not seem to work correctly. Using Picutre will also not work. */}
+          <object data={logo} type="image/png">
+            <img src={fallbackTokenIconUrl} alt="" />
+          </object>
           <h3>{name}</h3>
         </div>
       </a>
@@ -30,29 +27,19 @@ function TokenCard({ name, logo, link, onClick }: TokenCardProps) {
   if (onClick) {
     return (
       <div className="token-card__container" onClick={onClick} role="button">
-        <img
-          src={logo}
-          alt=""
-          onError={({ currentTarget }) => {
-            currentTarget.onerror = null // prevents looping
-            currentTarget.src = fallbackTokenIconUrl
-          }}
-        />
+        <object data={logo} type="image/png">
+          <img src={fallbackTokenIconUrl} alt="" />
+        </object>
         <h3>{name}</h3>
       </div>
     )
   }
 
   return (
     <div className="token-card__container">
-      <img
-        src={logo}
-        alt=""
-        onError={({ currentTarget }) => {
-          currentTarget.onerror = null // prevents looping
-          currentTarget.src = fallbackTokenIconUrl
-        }}
-      />
+      <object data={logo} type="image/png">
+        <img src={fallbackTokenIconUrl} alt="" />
+      </object>
       <h3>{name}</h3>
     </div>
   )

src/components/CCIP/Chain/Chain.astro

@@ -48,14 +48,7 @@ const searchLanes = getSearchLanes({ environment })
 
 <CcipLayout frontmatter={entry.data} {headings} environment={environment}>
   <Drawer client:only="react" />
-  <ChainHero
-    chains={networks}
-    tokens={allTokens}
-    client:only="react"
-    network={network}
-    environment={environment}
-    lanes={searchLanes}
-  />
+  <ChainHero chains={networks} tokens={allTokens} network={network} environment={environment} lanes={searchLanes} />
   <section class="layout">
     <div>
       <Table
@@ -141,9 +134,11 @@ const searchLanes = getSearchLanes({ environment })
     .networks__grid {
       grid-template-columns: 1fr 1fr;
       gap: var(--space-6x);
+      min-height: 420px;
     }
 
     .tokens__grid {
+      min-height: 420px;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       gap: var(--space-4x);
     }

src/components/CCIP/Chain/ChainTokenGrid.tsx

@@ -2,7 +2,7 @@ import { Environment, getAllTokenLanes, getTokenData, Version } from "~/config/d
 import TokenCard from "../Cards/TokenCard"
 import { drawerContentStore } from "../Drawer/drawerStore"
 import TokenDrawer from "../Drawer/TokenDrawer"
-import { directoryToSupportedChain, getChainIcon, getExplorer, getTitle } from "~/features/utils"
+import { directoryToSupportedChain, getChainIcon, getTitle } from "~/features/utils"
 import React from "react"
 
 interface ChainTokenGridProps {

src/components/CCIP/ChainHero/ChainHero.css

@@ -1,6 +1,7 @@
 .ccip-chain-hero {
   background-color: var(--gray-100);
   border-bottom: 1px solid var(--gray-200);
+  min-height: 241px;
 }
 
 .ccip-chain-hero__heading {
@@ -106,7 +107,7 @@
 
 .ccip-chain-hero__feeTokens__item__logo {
   width: var(--space-5x);
-  height: var(--space5x);
+  height: var(--space-5x);
   border-radius: 50%;
 }
 

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -262,29 +262,31 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
               {feeTokensWithAddress.map(({ token, address, logo }, index) => {
                 return (
                   <div key={index} className="ccip-chain-hero__feeTokens__item" data-clipboard-type="fee-token">
-                    <img
-                      src={logo}
-                      alt={token}
+                    <object
+                      data={logo}
+                      type="image/png"
+                      width="20px"
+                      height="20px"
                       className="ccip-chain-hero__feeTokens__item__logo"
-                      onError={(event) => {
-                        ;(event.target as HTMLImageElement).setAttribute("src", fallbackTokenIconUrl)
-                      }}
-                    />
+                    >
+                      <img src={fallbackTokenIconUrl} alt={token} width="20px" height="20px" />
+                    </object>
                     <div>{token}</div>
                     <Address endLength={4} contractUrl={address} />
                   </div>
                 )
               })}
               {!nativeTokenHasAddress() && nativeCurrency && (
                 <div key={"native-token"} className="ccip-chain-hero__feeTokens__item">
-                  <img
-                    src={`${getTokenIconUrl(nativeCurrency.symbol)}`}
-                    alt={`${nativeCurrency.symbol} icon`}
-                    onError={(event) => {
-                      ;(event.target as HTMLImageElement).setAttribute("src", fallbackTokenIconUrl)
-                    }}
+                  <object
+                    data={`${getTokenIconUrl(nativeCurrency.symbol)}`}
+                    type="image/png"
+                    width="20px"
+                    height="20px"
                     className="ccip-chain-hero__feeTokens__item__logo"
-                  />
+                  >
+                    <img src={fallbackTokenIconUrl} alt={`${nativeCurrency.symbol} icon`} width="20px" height="20px" />
+                  </object>
                   <div>{nativeCurrency.symbol} </div>
                   <span className="ccip-chain-hero__feeTokens__native-gas-token">(native gas token)</span>
                 </div>

src/config/data/ccip/data.ts

@@ -513,7 +513,7 @@ export const getAllNetworkLanes = async ({
       address: string
       version: string
     }
-    operational: string | undefined
+    status: string | undefined
   }[] = Object.keys(allLanes).map((lane) => {
     const laneData = allLanes[lane]