Sei CCIP (#2288)

* update * update * update * update * update
smartcontractkit · Jan 30, 2025 · af71a5d · af71a5d
1 parent 287a9d3
commit af71a5d
Show file tree

Hide file tree

Showing 34 changed files with 1,589 additions and 220 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,10 +37,10 @@
     "@astrojs/partytown": "^2.1.2",
     "@astrojs/preact": "^3.5.2",
     "@astrojs/prism": "^3.1.0",
-    "@chainlink/components": "^0.4.18",
     "@astrojs/react": "^3.6.2",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/vercel": "^7.8.0",
+    "@chainlink/components": "^0.4.18",
     "@chainlink/contracts": "1.2.0",
     "@chainlink/contracts-ccip": "1.5.1-beta.0",
     "@chainlink/design-system": "^0.2.8",
@@ -80,6 +80,7 @@
     "@nomiclabs/hardhat-ethers": "^2.2.3",
     "@project-serum/anchor": "^0.26.0",
     "@rollup/plugin-yaml": "^4.1.2",
+    "@types/lodash": "^4.17.15",
     "@types/node": "^20.12.12",
     "@types/node-fetch": "^2.6.12",
     "@types/prismjs": "^1.26.4",

diff --git a/public/assets/chains/sei.svg b/public/assets/chains/sei.svg
diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro
@@ -68,7 +68,7 @@ const searchLanes = getSearchLanes({ environment })
         environment={environment}
         lanes={lanes}
         client:load
-        explorerUrl={network.explorerUrl}
+        explorer={network.explorer}
         sourceNetwork={{
           name: network.name,
           logo: network.logo,

diff --git a/src/components/CCIP/Chain/ChainTokenGrid.tsx b/src/components/CCIP/Chain/ChainTokenGrid.tsx
@@ -6,6 +6,7 @@ import { directoryToSupportedChain, getChainIcon, getTitle } from "~/features/ut
 import { useState } from "react"
 import "./ChainTokenGrid.css"
 import SeeMore from "../SeeMore/SeeMore"
+import { ExplorerInfo } from "~/config/types"
 
 interface ChainTokenGridProps {
   tokens: {
@@ -25,7 +26,7 @@ interface ChainTokenGridProps {
     tokenAddress: string
     tokenPoolType: PoolType
     tokenPoolAddress: string
-    explorerUrl: string
+    explorer: ExplorerInfo
   }
   environment: Environment
 }
@@ -66,7 +67,7 @@ function ChainTokenGrid({ tokens, network, environment }: ChainTokenGridProps) {
                       tokenAddress: data[key].tokenAddress,
                       tokenPoolType: data[key].poolType,
                       tokenPoolAddress: data[key].poolAddress || "",
-                      explorerUrl: network.explorerUrl,
+                      explorer: network.explorer,
                     }
                   })
                   .find((n) => n.key === network.key)

diff --git a/src/components/CCIP/ChainHero/ChainHero.tsx b/src/components/CCIP/ChainHero/ChainHero.tsx
@@ -12,6 +12,7 @@ import {
   fallbackTokenIconUrl,
 } from "~/features/utils"
 import { Tooltip } from "~/features/common/Tooltip"
+import { ExplorerInfo } from "~/config/types"
 
 interface ChainHeroProps {
   chains: {
@@ -36,7 +37,7 @@ interface ChainHeroProps {
       name: string
       logo: string
       key: string
-      explorerUrl: string
+      explorer: ExplorerInfo
     }
     lane: LaneConfig
   }[]
@@ -52,7 +53,7 @@ interface ChainHeroProps {
       name: string
       address: string
     }
-    explorerUrl: string
+    explorer: ExplorerInfo
     routerExplorerUrl: string
     chainSelector: string
     feeTokens?: string[]
@@ -83,8 +84,8 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
       version: Version.V1_2_0,
       tokenId: feeToken,
     })
-    const explorerUrl = network.explorerUrl
-    const address = getExplorerAddressUrl(explorerUrl)(token[network.chain].tokenAddress)
+    const explorer = network.explorer
+    const address = getExplorerAddressUrl(explorer)(token[network.chain].tokenAddress)
 
     return {
       logo,
@@ -192,7 +193,7 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
                 {network.armProxy ? (
                   <Address
                     endLength={4}
-                    contractUrl={getExplorerAddressUrl(network.explorerUrl)(network.armProxy.address)}
+                    contractUrl={getExplorerAddressUrl(network.explorer)(network.armProxy.address)}
                   />
                 ) : (
                   "n/a"
@@ -219,7 +220,7 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
                 {network.tokenAdminRegistry ? (
                   <Address
                     endLength={4}
-                    contractUrl={getExplorerAddressUrl(network.explorerUrl)(network.tokenAdminRegistry)}
+                    contractUrl={getExplorerAddressUrl(network.explorer)(network.tokenAdminRegistry)}
                   />
                 ) : (
                   "n/a"
@@ -246,7 +247,7 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
                 {network.registryModule ? (
                   <Address
                     endLength={4}
-                    contractUrl={getExplorerAddressUrl(network.explorerUrl)(network.registryModule)}
+                    contractUrl={getExplorerAddressUrl(network.explorer)(network.registryModule)}
                   />
                 ) : (
                   "n/a"

diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.tsx b/src/components/CCIP/ChainHero/LaneDetailsHero.tsx
@@ -4,6 +4,7 @@ import "./LaneDetailsHero.css"
 import { getExplorerAddressUrl } from "~/features/utils"
 import CopyValue from "../CopyValue/CopyValue"
 import { LaneFilter } from "~/config/data/ccip"
+import { ExplorerInfo } from "~/config/types"
 
 interface LaneDetailsHeroProps {
   sourceNetwork: {
@@ -18,7 +19,7 @@ interface LaneDetailsHeroProps {
   offRamp: string
   destinationAddress: string
   enforceOutOfOrder?: boolean
-  explorerUrl: string
+  explorer: ExplorerInfo
   rmnPermeable: boolean
   inOutbound: LaneFilter
 }
@@ -30,7 +31,7 @@ function LaneDetailsHero({
   offRamp,
   destinationAddress,
   enforceOutOfOrder,
-  explorerUrl,
+  explorer,
   rmnPermeable,
   inOutbound,
 }: LaneDetailsHeroProps) {
@@ -63,19 +64,15 @@ function LaneDetailsHero({
               <AddressComponent
                 address={offRamp}
                 endLength={6}
-                contractUrl={getExplorerAddressUrl(explorerUrl)(offRamp)}
+                contractUrl={getExplorerAddressUrl(explorer)(offRamp)}
               />
             </div>
           </>
         ) : (
           <>
             <div className="lane-details-hero__details__label">OnRamp address</div>
             <div data-clipboard-type="onramp">
-              <AddressComponent
-                address={onRamp}
-                endLength={6}
-                contractUrl={getExplorerAddressUrl(explorerUrl)(onRamp)}
-              />
+              <AddressComponent address={onRamp} endLength={6} contractUrl={getExplorerAddressUrl(explorer)(onRamp)} />
             </div>
           </>
         )}

diff --git a/src/components/CCIP/ChainHero/TokenDetailsHero.tsx b/src/components/CCIP/ChainHero/TokenDetailsHero.tsx
@@ -2,12 +2,13 @@ import Address from "~/components/AddressReact"
 import { getExplorerAddressUrl, fallbackTokenIconUrl } from "~/features/utils"
 import { PoolType, tokenPoolDisplay } from "~/config/data/ccip"
 import "./ChainHero.css"
+import { ExplorerInfo } from "~/config/types"
 
 interface TokenDetailsHeroProps {
   network: {
     name: string
     logo: string
-    explorerUrl: string
+    explorer: ExplorerInfo
   }
   token: {
     id: string
@@ -55,7 +56,7 @@ function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
           <div className="ccip-chain-hero__details__item">
             <div className="ccip-chain-hero__details__label">Token address</div>
             <div className="ccip-chain-hero__details__value" data-clipboard-type="token">
-              <Address endLength={4} contractUrl={getExplorerAddressUrl(network?.explorerUrl)(token.address)} />
+              <Address endLength={4} contractUrl={getExplorerAddressUrl(network?.explorer)(token.address)} />
             </div>
           </div>
           <div className="ccip-chain-hero__details__item">
@@ -65,7 +66,7 @@ function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
           <div className="ccip-chain-hero__details__item">
             <div className="ccip-chain-hero__details__label">Token pool address</div>
             <div className="ccip-chain-hero__details__value" data-clipboard-type="token-pool">
-              <Address endLength={4} contractUrl={getExplorerAddressUrl(network?.explorerUrl)(token.poolAddress)} />
+              <Address endLength={4} contractUrl={getExplorerAddressUrl(network?.explorer)(token.poolAddress)} />
             </div>
           </div>
         </div>

diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx
@@ -17,19 +17,20 @@ import { getExplorerAddressUrl, getTokenIconUrl, fallbackTokenIconUrl } from "~/
 import TableSearchInput from "../Tables/TableSearchInput"
 import RateTooltip from "../Tooltip/RateTooltip"
 import { Tooltip } from "~/features/common/Tooltip"
+import { ExplorerInfo } from "~/config/types"
 
 function LaneDrawer({
   lane,
   sourceNetwork,
   destinationNetwork,
   environment,
   inOutbound,
-  explorerUrl,
+  explorer,
 }: {
   lane: LaneConfig
   sourceNetwork: { name: string; logo: string; key: string }
   destinationNetwork: { name: string; logo: string; key: string }
-  explorerUrl: string
+  explorer: ExplorerInfo
   environment: Environment
   inOutbound: LaneFilter
 }) {
@@ -54,7 +55,7 @@ function LaneDrawer({
         onRamp={lane.onRamp.address}
         offRamp={lane.offRamp.address}
         enforceOutOfOrder={lane.onRamp.enforceOutOfOrder}
-        explorerUrl={explorerUrl || ""}
+        explorer={explorer}
         destinationAddress={destinationNetworkDetails?.chainSelector || ""}
         rmnPermeable={lane.rmnPermeable}
         inOutbound={inOutbound}
@@ -157,7 +158,7 @@ function LaneDrawer({
                           <Address
                             address={data[sourceNetwork.key].tokenAddress}
                             endLength={6}
-                            contractUrl={getExplorerAddressUrl(explorerUrl)(data[sourceNetwork.key].tokenAddress)}
+                            contractUrl={getExplorerAddressUrl(explorer)(data[sourceNetwork.key].tokenAddress)}
                           />
                         </td>
                         <td>{data[sourceNetwork.key].decimals}</td>

diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx
@@ -15,7 +15,7 @@ import {
   LaneConfig,
 } from "~/config/data/ccip"
 import { useState } from "react"
-import { SupportedChain } from "~/config"
+import { ExplorerInfo, SupportedChain } from "~/config"
 import LaneDrawer from "../Drawer/LaneDrawer"
 import TableSearchInput from "../Tables/TableSearchInput"
 import Tabs from "../Tables/Tabs"
@@ -46,7 +46,7 @@ function TokenDrawer({
     tokenAddress: string
     tokenPoolType: PoolType
     tokenPoolAddress: string
-    explorerUrl: string
+    explorer: ExplorerInfo
   }
   destinationLanes: {
     [sourceChain: string]: SupportedTokenConfig
@@ -128,7 +128,7 @@ function TokenDrawer({
         network={{
           name: network.name,
           logo: network.logo,
-          explorerUrl: network.explorerUrl,
+          explorer: network.explorer,
         }}
       />
       <div className="ccip-table__drawer-container">
@@ -231,7 +231,7 @@ function TokenDrawer({
                                   key: destinationChain,
                                 }}
                                 inOutbound={inOutbound}
-                                explorerUrl={network.explorerUrl}
+                                explorer={network.explorer}
                               />
                             ))
                           }}

diff --git a/src/components/CCIP/Hero/Hero.tsx b/src/components/CCIP/Hero/Hero.tsx
@@ -1,6 +1,7 @@
 import { Environment, LaneConfig } from "~/config/data/ccip"
 import Search from "../Search/Search"
 import "./Hero.css"
+import { ExplorerInfo } from "~/config/types"
 
 interface HeroProps {
   chains: {
@@ -25,7 +26,7 @@ interface HeroProps {
       name: string
       logo: string
       key: string
-      explorerUrl: string
+      explorer: ExplorerInfo
     }
     lane: LaneConfig
   }[]

diff --git a/src/components/CCIP/Search/Search.tsx b/src/components/CCIP/Search/Search.tsx
@@ -6,6 +6,7 @@ import { Environment, LaneConfig, LaneFilter } from "~/config/data/ccip"
 import { directoryToSupportedChain, getExplorer, fallbackTokenIconUrl } from "~/features/utils"
 import { drawerContentStore } from "../Drawer/drawerStore"
 import LaneDrawer from "../Drawer/LaneDrawer"
+import { ExplorerInfo } from "~/config/types"
 
 interface SearchProps {
   chains: {
@@ -30,7 +31,7 @@ interface SearchProps {
       name: string
       logo: string
       key: string
-      explorerUrl: string
+      explorer: ExplorerInfo
     }
     lane: LaneConfig
   }[]
@@ -71,9 +72,18 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
 
   useClickOutside(searchRef, () => setOpenSearchMenu(false))
 
-  const generateExplorerUrl = (lane) => {
+  const generateExplorerUrl = (lane): ExplorerInfo => {
     const directory = directoryToSupportedChain(lane.sourceNetwork.key)
-    return getExplorer(directory) || ""
+    const explorer = getExplorer(directory)
+
+    if (!explorer) {
+      // Provide an empty object if no explorer is found
+      return {
+        baseUrl: "",
+      }
+    }
+
+    return explorer
   }
   return (
     <>
@@ -178,7 +188,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                                 ...lane.destinationNetwork,
                               }}
                               inOutbound={LaneFilter.Outbound}
-                              explorerUrl={generateExplorerUrl(lane)}
+                              explorer={generateExplorerUrl(lane)}
                             />
                           ))
                         }