Ccip directory updates

src/components/CCIP/Chain/Chain.astro

@@ -3,6 +3,7 @@ import CcipLayout from "~/layouts/CcipLayout.astro"
 import { getEntry, render } from "astro:content"
 import {
   Environment,
+  Network,
   getAllNetworkLanes,
   getAllNetworks,
   getSearchLanes,
@@ -16,7 +17,7 @@ import ChainTokenGrid from "./ChainTokenGrid"
 
 interface Props {
   environment: Environment
-  network: any
+  network: Network
 }
 const { environment, network } = Astro.props as Props
 
@@ -79,7 +80,18 @@ const searchLanes = getSearchLanes({ environment })
     <div>
       <div class="ccip-heading">
         <h2>Tokens <span>({allTokens.length})</span></h2>
-        <a class="button secondary" href="/ccip/tutorials/evm/token-manager#verifying-your-token">Add my token</a>
+        {
+          network.chainType !== "solana" && (
+            <a class="button secondary" href="/ccip/tutorials/evm/token-manager#verifying-your-token">
+              <img
+                src="/assets/icons/plus.svg"
+                alt="Add"
+                style={{ width: "1em", height: "1em", marginRight: "0.5em", verticalAlign: "middle" }}
+              />
+              Add my token
+            </a>
+          )
+        }
       </div>
       <ChainTokenGrid tokens={allTokens} network={network} client:only="react" environment={environment} />
     </div>

src/components/CCIP/Chain/ChainTokenGrid.tsx

@@ -1,4 +1,4 @@
-import { Environment, Version, PoolType } from "~/config/data/ccip/types.ts"
+import { Environment, Version, Network } from "~/config/data/ccip/types.ts"
 import { getAllTokenLanes, getTokenData } from "~/config/data/ccip/data.ts"
 import TokenCard from "../Cards/TokenCard.tsx"
 import { drawerContentStore } from "../Drawer/drawerStore.ts"
@@ -7,28 +7,14 @@ import { directoryToSupportedChain, getChainIcon, getChainTypeAndFamily, getTitl
 import { useState } from "react"
 import "./ChainTokenGrid.css"
 import SeeMore from "../SeeMore/SeeMore.tsx"
-import { ExplorerInfo } from "~/config/types.ts"
 
 interface ChainTokenGridProps {
   tokens: {
     id: string
     logo: string
     totalNetworks: number
   }[]
-  network: {
-    name: string
-    key: string
-    logo: string
-    tokenId: string
-    tokenLogo: string
-    tokenName: string
-    tokenSymbol: string
-    tokenDecimals: number
-    tokenAddress: string
-    tokenPoolType: PoolType
-    tokenPoolAddress: string
-    explorer: ExplorerInfo
-  }
+  network: Network
   environment: Environment
 }
 

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -1,4 +1,4 @@
-import { Environment, LaneConfig, Version } from "~/config/data/ccip/types.ts"
+import { Environment, LaneConfig, Network, Version } from "~/config/data/ccip/types.ts"
 import { getTokenData } from "~/config/data/ccip/data.ts"
 import Address from "~/components/AddressReact.tsx"
 import Breadcrumb from "../Breadcrumb/Breadcrumb.tsx"
@@ -44,35 +44,7 @@ interface ChainHeroProps {
     }
     lane: LaneConfig
   }[]
-  network?: {
-    name: string
-    logo: string
-    totalLanes: number
-    totalTokens: number
-    chain: string
-    chainType: ChainType
-    tokenAdminRegistry?: string
-    registryModule?: string
-    router?: {
-      name: string
-      address: string
-    }
-    explorer: ExplorerInfo
-    routerExplorerUrl: string
-    chainSelector: string
-    feeTokens?: string[]
-    nativeToken?: {
-      name: string
-      symbol: string
-      logo: string
-    }
-    armProxy: {
-      address: string
-      version: string
-    }
-    feeQuoter?: string
-    rmnPermeable?: boolean
-  }
+  network?: Network
   token?: {
     id: string
     name: string
@@ -85,11 +57,11 @@ interface ChainHeroProps {
 function ChainHero({ chains, tokens, network, token, environment, lanes }: ChainHeroProps) {
   const feeTokensWithAddress =
     network?.feeTokens?.map((feeToken) => {
-      const logo = getTokenIconUrl(feeToken)
+      const logo = feeToken.logo
       const token = getTokenData({
         environment,
         version: Version.V1_2_0,
-        tokenId: feeToken,
+        tokenId: feeToken.name,
       })
       const explorer = network.explorer || {}
       const address = token[network.chain]?.tokenAddress
@@ -113,7 +85,7 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
     if (!network) return
     // We making sure the Native Currency is not already part of the FeeToken
     return feeTokensWithAddress?.some((feeToken) => {
-      return feeToken.token.toLowerCase() === nativeCurrency?.symbol.toLowerCase()
+      return feeToken.token.name.toLowerCase() === nativeCurrency?.symbol.toLowerCase()
     })
   }
 
@@ -346,9 +318,9 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
                               height="20px"
                               className="ccip-chain-hero__feeTokens__item__logo"
                             >
-                              <img src={fallbackTokenIconUrl} alt={token} width="20px" height="20px" />
+                              <img src={fallbackTokenIconUrl} alt={token.name} width="20px" height="20px" />
                             </object>
-                            <div>{token}</div>
+                            <div>{token.name}</div>
                             <Address endLength={4} contractUrl={contractUrl} address={address} />
                           </div>
                         ))}

src/components/CCIP/Tables/ChainTable.tsx

@@ -7,9 +7,8 @@ import { getExplorerAddressUrl } from "~/features/utils/index.ts"
 import { drawerContentStore } from "../Drawer/drawerStore.ts"
 import LaneDrawer from "../Drawer/LaneDrawer.tsx"
 import { Environment, Version, LaneFilter } from "~/config/data/ccip/types.ts"
-import { getLane, getOperationalState } from "~/config/data/ccip/data.ts"
+import { getLane } from "~/config/data/ccip/data.ts"
 import { ExplorerInfo, SupportedChain, ChainType } from "~/config/types.ts"
-import { clsx } from "~/lib/clsx/clsx.ts"
 import SeeMore from "../SeeMore/SeeMore.tsx"
 import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
 
@@ -38,35 +37,22 @@ interface TableProps {
   explorer: ExplorerInfo
 }
 
-const BEFORE_SEE_MORE = 12 // Number of networks to show before the "See more" button, 7 rows
+const BEFORE_SEE_MORE = 12
 
 function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps) {
   const [inOutbound, setInOutbound] = useState<LaneFilter>(LaneFilter.Outbound)
   const [search, setSearch] = useState("")
   const [seeMore, setSeeMore] = useState(lanes.length <= BEFORE_SEE_MORE)
-  const [statuses, setStatuses] = useState<Record<string, string>>({})
-  const [loadingStatuses, setLoadingStatuses] = useState<boolean>(true)
 
   useEffect(() => {
     if (search.length > 0) {
       setSeeMore(true)
     }
   }, [search])
 
-  useEffect(() => {
-    const fetchOperationalState = async (network) => {
-      if (network) {
-        const result = await getOperationalState(network)
-        setStatuses(result)
-        setLoadingStatuses(false)
-      }
-    }
-    fetchOperationalState(sourceNetwork.key)
-  }, [sourceNetwork])
-
   return (
     <>
-      <div className="ccip-table__filters">
+      <div className="ccip-table__filters ccip-table__filters--chain">
         <Tabs
           tabs={[
             {
@@ -80,36 +66,48 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
           ]}
           onChange={(key) => setInOutbound(key as LaneFilter)}
         />
-        <TableSearchInput search={search} setSearch={setSearch} />
+        <div className="ccip-table__filters__actions">
+          <div className="ccip-table__filters__search-container">
+            <TableSearchInput search={search} setSearch={setSearch} />
+          </div>
+          <a
+            className="button secondary ccip-table__filters__external-button"
+            href="https://ccip.chain.link/status"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src="/assets/icons/external-button-link.svg"
+              alt=""
+              className="ccip-table__filters__external-icon"
+              role="presentation"
+            />
+            View lane status
+          </a>
+        </div>
       </div>
       <div className="ccip-table__wrapper">
         <table className="ccip-table">
           <thead>
             <tr>
               <th>{inOutbound === LaneFilter.Outbound ? "Destination" : "Source"} network</th>
-              <th>
+              <th style={{ textAlign: "right" }}>
                 {inOutbound === LaneFilter.Outbound ? (
                   <>
                     OnRamp address
                     {sourceNetwork.chainType === "solana" && (
                       <Tooltip
                         label=""
                         tip="Same as Router"
-                        labelStyle={{
-                          marginLeft: "8px",
-                        }}
-                        style={{
-                          display: "inline-block",
-                          verticalAlign: "middle",
-                        }}
+                        labelStyle={{ marginLeft: "8px" }}
+                        style={{ display: "inline-block", verticalAlign: "middle" }}
                       />
                     )}
                   </>
                 ) : (
                   "OffRamp address"
                 )}
               </th>
-              <th>Status</th>
             </tr>
           </thead>
           <tbody>
@@ -150,7 +148,10 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
                       {network.name}
                     </div>
                   </td>
-                  <td data-clipboard-type={inOutbound === LaneFilter.Outbound ? "onramp" : "offramp"}>
+                  <td
+                    style={{ textAlign: "right" }}
+                    data-clipboard-type={inOutbound === LaneFilter.Outbound ? "onramp" : "offramp"}
+                  >
                     <Address
                       address={inOutbound === LaneFilter.Outbound ? network.onRamp?.address : network.offRamp?.address}
                       endLength={4}
@@ -159,26 +160,6 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
                       )}
                     />
                   </td>
-                  <td>
-                    {loadingStatuses ? (
-                      "Loading..."
-                    ) : (
-                      <span
-                        className={clsx(
-                          "ccip-table__status",
-                          `ccip-table__status-${statuses[network.key]?.toLocaleLowerCase() || "none"}`
-                        )}
-                      >
-                        {statuses[network.key]?.toLocaleLowerCase() && (
-                          <img
-                            src={`/assets/icons/ccip-${statuses[network.key]?.toLocaleLowerCase()}.svg`}
-                            alt="Cursed"
-                          />
-                        )}
-                        {statuses[network.key]?.toLocaleLowerCase() || "Status unavailable"}
-                      </span>
-                    )}
-                  </td>
                 </tr>
               ))}
           </tbody>

src/components/CCIP/Tables/Table.css

@@ -192,3 +192,64 @@
   display: inline-block !important;
   vertical-align: middle !important;
 }
+
+/* ChainTable specific filter layout */
+.ccip-table__filters--chain {
+  flex-wrap: nowrap;
+}
+
+.ccip-table__filters__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
+  flex-shrink: 0;
+}
+
+.ccip-table__filters__search-container {
+  max-width: 150px;
+  flex-shrink: 0;
+}
+
+.ccip-table__filters__external-button {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2x);
+}
+
+.ccip-table__filters__external-icon {
+  width: 1em;
+  height: 1em;
+}
+
+/* Responsive behavior for ChainTable */
+@media (max-width: 768px) {
+  .ccip-table__filters--chain {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-3x);
+  }
+
+  .ccip-table__filters__actions {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .ccip-table__filters__search-container {
+    min-width: 0;
+    max-width: none;
+    flex: 1;
+  }
+}
+
+@media (max-width: 480px) {
+  .ccip-table__filters__actions {
+    flex-direction: column;
+    gap: var(--space-3x);
+  }
+
+  .ccip-table__filters__external-button {
+    width: 100%;
+    justify-content: center;
+  }
+}

src/components/DocsNavigation/DocsNavigationDesktop/DocsNavigationDesktop.tsx

@@ -44,6 +44,7 @@ function DocsNavigationDesktop({
                 <a
                   className={styles.ccipDirectoryLink}
                   href="https://chain.link/ccip-contact"
+                  target="_blank"
                   rel="noopener noreferrer"
                 >
                   <MailIcon />