Feat: token page

astro.config.ts

@@ -13,6 +13,12 @@ import yaml from "@rollup/plugin-yaml"
 // https://astro.build/config
 export default defineConfig({
   site: "https://docs.chain.link",
+  redirects: {
+    "/ccip/directory": "/ccip/directory/mainnet",
+    "/ccip/supported-networks": "/ccip/directory/mainnet",
+    "/getting-started": "/getting-started/conceptual-overview",
+    "/resources": "/resources/link-token-contracts",
+  },
   integrations: [
     preact({
       include: ["**/preact/*"],

hardhat.config.ts

@@ -21,6 +21,7 @@ const config: HardhatUserConfig = {
       { version: "0.8.16" },
       { version: "0.8.19" },
       { version: "0.8.20" },
+      { version: "0.8.24" },
     ],
   },
 }

package.json

@@ -37,12 +37,12 @@
     "@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.16",
     "@chainlink/contracts": "1.2.0",
-    "@chainlink/contracts-ccip": "1.4.0",
+    "@chainlink/contracts-ccip": "1.5.0-beta.0",
     "@chainlink/design-system": "^0.2.8",
     "@chainlink/local": "^0.2.1",
     "@chainlink/solana-sdk": "^0.2.2",

public/changelog.json

@@ -1,4 +1,117 @@
 [
+  {
+    "category": "integration",
+    "changes": [],
+    "date": "2024-10-22",
+    "description": "Chainlink Functions is available on Soneium Minato testnet. Visit the [Supported Networks](https://docs.chain.link/chainlink-functions/supported-networks#soneium-minato-testnet) page for more information.",
+    "relatedNetworks": ["soneium"],
+    "relatedTokens": [],
+    "title": "Functions on Soneium Minato",
+    "topic": "functions",
+    "urls": []
+  },
+  {
+    "category": "integration",
+    "changes": [],
+    "date": "2024-10-22",
+    "description": "Chainlink VRF 2.5 is available on Soneium Minato testnet. Visit the [Supported Networks](https://docs.chain.link/vrf/v2-5/supported-networks#soneium-minato-testnet) page for more information.",
+    "relatedNetworks": ["soneium"],
+    "relatedTokens": [],
+    "title": "VRF 2.5 on Soneium Minato",
+    "topic": "vrf",
+    "urls": []
+  },
+  {
+    "category": "integration",
+    "changes": [],
+    "date": "2024-10-22",
+    "description": "Chainlink CCIP is available on Soneium Minato testnet. Visit the [Supported Networks](https://docs.chain.link/ccip/supported-networks/v1_2_0/testnet) page for more information.",
+    "relatedNetworks": ["soneium"],
+    "relatedTokens": [],
+    "title": "CCIP on Soneium Minato",
+    "topic": "ccip",
+    "urls": []
+  },
+  {
+    "category": "integration",
+    "changes": [],
+    "date": "2024-10-22",
+    "description": "Chainlink Data Streams is available in Early Access on Soneium Minato. The verifier proxy address and feed IDs are available on the [Data Streams Feed IDs](https://docs.chain.link/data-streams/stream-ids) page.",
+    "relatedNetworks": ["soneium"],
+    "relatedTokens": [],
+    "title": "Data Streams on Soneium Minato",
+    "topic": "data",
+    "subTopic": "data-streams",
+    "urls": []
+  },
+  {
+    "category": "release",
+    "changes": [],
+    "date": "2024-10-10",
+    "description": "Chainlink Node v2.17.0 is now available. See the [Release Notes](https://github.com/smartcontractkit/chainlink/releases/tag/v2.17.0) for details.",
+    "relatedNetworks": [],
+    "relatedTokens": [],
+    "subTopic": "nodes",
+    "title": "Chainlink Node v2.17.0",
+    "topic": "general",
+    "urls": []
+  },
+  {
+    "category": "integration",
+    "changes": [],
+    "date": "2024-10-10",
+    "description": "Chainlink CCIP is publicly available on Scroll mainnet and testnet.\n\n- Visit the [Supported Networks](https://docs.chain.link/ccip/supported-networks) page for more information.",
+    "relatedNetworks": ["scroll"],
+    "relatedTokens": [],
+    "title": "CCIP on Scroll",
+    "topic": "ccip",
+    "urls": []
+  },
+  {
+    "category": "integration",
+    "changes": [],
+    "date": "2024-10-08",
+    "description": "Chainlink CCIP is publicly available on Linea mainnet and testnet.\n\n- Visit the [Supported Networks](https://docs.chain.link/ccip/supported-networks) page for more information.",
+    "relatedNetworks": ["linea"],
+    "relatedTokens": [],
+    "title": "CCIP on Linea",
+    "topic": "ccip",
+    "urls": []
+  },
+  {
+    "category": "release",
+    "changes": [],
+    "date": "2024-10-04",
+    "description": "Chainlink CCIP 1.5 is now available on testnet, introducing several new features and enhancements.\n\n**Risk Management Network Coverage:**\nCertain CCIP integrations may not initially include the Risk Management Network (RMN). Blockchains can be integrated with CCIP in a phased approach, starting with the deployment of the Committing and Executing Decentralized Oracle Networks (DONs), followed by the addition of the Risk Management Network in a subsequent update. During a phased deployment, the relevant Commit Stores are configured in the Risk Management contract to always be considered blessed until the Risk Management Network has been deployed for that blockchain. Please refer to the [Supported Networks](https://docs.chain.link/ccip/supported-networks) documentation to identify which integrations utilize a phased approach, and review the [CCIP Service Responsibility](https://docs.chain.link/ccip/service-responsibility) for more information.\n\n**New Version of `EVMExtraArgs`:**\nChainlink CCIP 1.5 introduces a new version of `EVMExtraArgs`, allowing users to set the `allowOutOfOrderExecution` parameter. This feature enables developers to control the execution order of their messages on the destination blockchain. The `allowOutOfOrderExecution` parameter is part of [`EVMExtraArgsV2`](https://docs.chain.link/ccip/api-reference/client#evmextraargsv2) and is available only on lanes where the **Out of Order Execution** property is set to **Optional** or **Required**. Please consult the [Supported Networks page](https://docs.chain.link/ccip/supported-networks) to determine if your target lane supports this feature.",
+    "relatedNetworks": [],
+    "relatedTokens": [],
+    "title": "Chainlink CCIP 1.5 - Testnet",
+    "topic": "ccip",
+    "urls": []
+  },
+  {
+    "category": "integration",
+    "changes": [],
+    "date": "2024-09-27",
+    "description": "Chainlink Automation is live on [Base mainnet](https://docs.chain.link/chainlink-automation/overview/supported-networks#base-mainnet).",
+    "relatedNetworks": ["base"],
+    "relatedTokens": [],
+    "title": "Automation on Base mainnet",
+    "topic": "automation",
+    "urls": []
+  },
+  {
+    "category": "release",
+    "changes": [],
+    "date": "2024-09-23",
+    "description": "Chainlink Node v2.16.0 is now available. See the [Release Notes](https://github.com/smartcontractkit/chainlink/releases/tag/v2.16.0/) for details.",
+    "relatedNetworks": [],
+    "relatedTokens": [],
+    "subTopic": "nodes",
+    "title": "Chainlink Node v2.16.0",
+    "topic": "general",
+    "urls": []
+  },
   {
     "category": "integration",
     "changes": [],

public/samples/CCIP/Acknowledger.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -122,7 +122,10 @@ contract Acknowledger is CCIPReceiver, OwnerIsCreator {
             tokenAmounts: new Client.EVMTokenAmount[](0), // Empty array aas no tokens are transferred
             extraArgs: Client._argsToBytes(
                 // Additional arguments, setting gas limit
-                Client.EVMExtraArgsV1({gasLimit: 200_000})
+                Client.EVMExtraArgsV2({
+                    gasLimit: 200_000,
+                    allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                })
             ),
             // Set the feeToken to a feeTokenAddress, indicating specific asset will be used for fees
             feeToken: address(s_linkToken)

public/samples/CCIP/MessageTracker.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -258,7 +258,10 @@ contract MessageTracker is CCIPReceiver, OwnerIsCreator {
                 tokenAmounts: new Client.EVMTokenAmount[](0), // Empty array as no tokens are transferred
                 extraArgs: Client._argsToBytes(
                     // Additional arguments, setting gas limit
-                    Client.EVMExtraArgsV1({gasLimit: 300_000})
+                    Client.EVMExtraArgsV2({
+                        gasLimit: 300_000,
+                        allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                    })
                 ),
                 // Set the feeToken to a feeTokenAddress, indicating specific asset will be used for fees
                 feeToken: _feeTokenAddress

public/samples/CCIP/Messenger.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -261,7 +261,10 @@ contract Messenger is CCIPReceiver, OwnerIsCreator {
                 tokenAmounts: new Client.EVMTokenAmount[](0), // Empty array as no tokens are transferred
                 extraArgs: Client._argsToBytes(
                     // Additional arguments, setting gas limit
-                    Client.EVMExtraArgsV1({gasLimit: 200_000})
+                    Client.EVMExtraArgsV2({
+                        gasLimit: 200_000, // Gas limit for the callback on the destination chain
+                        allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                    })
                 ),
                 // Set the feeToken to a feeTokenAddress, indicating specific asset will be used for fees
                 feeToken: _feeTokenAddress

public/samples/CCIP/ProgrammableDefensiveTokenTransfers.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -494,7 +494,10 @@ contract ProgrammableDefensiveTokenTransfers is CCIPReceiver, OwnerIsCreator {
             tokenAmounts: tokenAmounts, // The amount and type of token being transferred
             extraArgs: Client._argsToBytes(
                 // Additional arguments, setting gas limit
-                Client.EVMExtraArgsV1({gasLimit: 400_000})
+                Client.EVMExtraArgsV2({
+                    gasLimit: 400_000, // Gas limit for the callback on the destination chain
+                    allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                })
             ),
             // Set the feeToken to a feeTokenAddress, indicating specific asset will be used for fees
             feeToken: _feeTokenAddress

public/samples/CCIP/ProgrammableTokenTransfers.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -342,7 +342,10 @@ contract ProgrammableTokenTransfers is CCIPReceiver, OwnerIsCreator {
                 tokenAmounts: tokenAmounts, // The amount and type of token being transferred
                 extraArgs: Client._argsToBytes(
                     // Additional arguments, setting gas limit
-                    Client.EVMExtraArgsV1({gasLimit: 200_000})
+                    Client.EVMExtraArgsV2({
+                        gasLimit: 200_000, // Gas limit for the callback on the destination chain
+                        allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                    })
                 ),
                 // Set the feeToken to a feeTokenAddress, indicating specific asset will be used for fees
                 feeToken: _feeTokenAddress

public/samples/CCIP/ProgrammableTokenTransfersLowGasLimit.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -157,7 +157,10 @@ contract ProgrammableTokenTransfersLowGasLimit is CCIPReceiver, OwnerIsCreator {
             tokenAmounts: tokenAmounts, // The amount and type of token being transferred
             extraArgs: Client._argsToBytes(
                 // gasLimit set to 20_000 on purpose to force the execution to fail on the destination chain
-                Client.EVMExtraArgsV1({gasLimit: 20_000})
+                Client.EVMExtraArgsV2({
+                    gasLimit: 20_000, // Gas limit for the callback on the destination chain
+                    allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                })
             ),
             // Set the feeToken to a LINK token address
             feeToken: address(s_linkToken)

public/samples/CCIP/Receiver.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {Client} from "@chainlink/contracts-ccip/src/v0.8/ccip/libraries/Client.sol";
 import {CCIPReceiver} from "@chainlink/contracts-ccip/src/v0.8/ccip/applications/CCIPReceiver.sol";

public/samples/CCIP/Sender.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -57,7 +57,10 @@ contract Sender is OwnerIsCreator {
             tokenAmounts: new Client.EVMTokenAmount[](0), // Empty array indicating no tokens are being sent
             extraArgs: Client._argsToBytes(
                 // Additional arguments, setting gas limit
-                Client.EVMExtraArgsV1({gasLimit: 200_000})
+                Client.EVMExtraArgsV2({
+                    gasLimit: 200_000, // Gas limit for the callback on the destination chain
+                    allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                })
             ),
             // Set the feeToken  address, indicating LINK will be used for fees
             feeToken: address(s_linkToken)

public/samples/CCIP/TestCCIPLocalSimulator.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 // solhint-disable no-unused-import
 import {CCIPLocalSimulator} from "@chainlink/local/src/ccip/CCIPLocalSimulator.sol";

public/samples/CCIP/TokenTransferor.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -235,7 +235,10 @@ contract TokenTransferor is OwnerIsCreator {
                 tokenAmounts: tokenAmounts, // The amount and type of token being transferred
                 extraArgs: Client._argsToBytes(
                     // Additional arguments, setting gas limit to 0 as we are not sending any data
-                    Client.EVMExtraArgsV1({gasLimit: 0})
+                    Client.EVMExtraArgsV2({
+                        gasLimit: 0, // Gas limit for the callback on the destination chain
+                        allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                    })
                 ),
                 // Set the feeToken to a feeTokenAddress, indicating specific asset will be used for fees
                 feeToken: _feeTokenAddress

public/samples/CCIP/usdc/Receiver.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
 import {Client} from "@chainlink/contracts-ccip/src/v0.8/ccip/libraries/Client.sol";

public/samples/CCIP/usdc/Sender.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {IRouterClient} from "@chainlink/contracts-ccip/src/v0.8/ccip/interfaces/IRouterClient.sol";
 import {OwnerIsCreator} from "@chainlink/contracts-ccip/src/v0.8/shared/access/OwnerIsCreator.sol";
@@ -153,7 +153,10 @@ contract Sender is OwnerIsCreator {
             tokenAmounts: tokenAmounts, // The amount and type of token being transferred
             extraArgs: Client._argsToBytes(
                 // Additional arguments, setting gas limit
-                Client.EVMExtraArgsV1({gasLimit: gasLimit})
+                Client.EVMExtraArgsV2({
+                    gasLimit: gasLimit, // Gas limit for the callback on the destination chain
+                    allowOutOfOrderExecution: true // Allows the message to be executed out of order relative to other messages from the same sender
+                })
             ),
             // Set the feeToken to a feeTokenAddress, indicating specific asset will be used for fees
             feeToken: address(i_linkToken)

public/samples/CCIP/usdc/Staker.sol

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-pragma solidity 0.8.19;
+pragma solidity 0.8.24;
 
 import {ERC20} from "@chainlink/contracts-ccip/src/v0.8/vendor/openzeppelin-solidity/v4.8.3/contracts/token/ERC20/ERC20.sol";
 import {SafeERC20} from "@chainlink/contracts-ccip/src/v0.8/vendor/openzeppelin-solidity/v4.8.3/contracts/token/ERC20/utils/SafeERC20.sol";

public/samples/DataStreams/StreamsUpkeep.sol

@@ -42,7 +42,7 @@ interface IFeeManager {
      * @param quoteAddress The payment token address used for quoting fees and rewards.
      * @return fee The fee assessed for verifying the report, with subscriber discounts applied where applicable.
      * @return reward The reward allocated to the caller for successfully verifying the report.
-     * @return totalDiscount The total discount amount deducted from the fee for subscribers.
+     * @return totalDiscount The total discount amount deducted from the fee for subscribers
      */
     function getFeeAndReward(
         address subscriber,

src/components/Address.tsx

@@ -36,7 +36,7 @@ const AddressComponent = ({
 
   return (
     <span className={`addressContainer ${urlClass || ""}`} id={urlId}>
-      <a title={address} className="addressLink" href={contractUrl}>
+      <a title={address} className="addressLink" href={contractUrl} target="_blank" rel="noopener noreferrer">
         {endLength && address ? address.slice(0, endLength + 2) + "..." + address.slice(-endLength) : address}
       </a>
       <button

src/components/AddressReact.tsx

@@ -0,0 +1,66 @@
+// This is a copy of the Preact Address component. This was required in the CCIP pages.
+import { clsx } from "~/lib"
+
+export type Props = {
+  contractUrl?: string
+  address?: string
+  endLength?: number
+  urlClass?: string
+  urlId?: string
+  eventName?: string
+  additionalInfo?: Record<string, string>
+}
+
+const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }: Props) => {
+  address = address || contractUrl?.split("/").pop()
+
+  if (!address) return null
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    if (address) navigator.clipboard.writeText(address)
+  }
+
+  return (
+    <span className={`addressContainer ${urlClass || ""}`} id={urlId}>
+      <a title={address} className="addressLink" href={contractUrl} target="_blank" rel="noopener noreferrer">
+        {endLength && address ? address.slice(0, endLength + 2) + "..." + address.slice(-endLength) : address}
+      </a>
+      <button
+        className={clsx("copyBtn", "copy-iconbutton")}
+        style={{ height: "16px", width: "16px", minWidth: "12px" }}
+        data-clipboard-text={address}
+        onClick={handleClick}
+      >
+        <img src="/assets/icons/copyIcon.svg" alt="Copy to clipboard" />
+      </button>
+
+      <style>{`
+        .addressLink {
+          padding: 1px 0px;
+          border-radius: var(--border-radius-10);
+          word-break: break-word;
+        }
+
+        .addressContainer {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-1x);
+          word-break: break-word;
+          margin-top: 0;
+        }
+
+        .copyBtn {
+          background: none;
+          border: none;
+        }
+
+        .copyBtn:hover {
+          color: var(--color-text-link);
+        }
+      `}</style>
+    </span>
+  )
+}
+
+export default AddressComponent

src/components/CCIP/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import "./Breadcrumb.css"
+import { Fragment } from "react"
 
 interface BreadcrumbProps {
   items: {
@@ -11,12 +12,12 @@ function Breadcrumb({ items }: BreadcrumbProps) {
   return (
     <div className="ccip-hero__breadcrumb">
       {items.map((item, index) => (
-        <>
-          <a key={index} href={item.url} className="ccip-hero__breadcrumb__item">
+        <Fragment key={index}>
+          <a href={item.url} className="ccip-hero__breadcrumb__item">
             {item.name}
           </a>
           {index < items.length - 1 && <img src="/assets/icons/breadcrumb-arrow.svg" alt="" />}
-        </>
+        </Fragment>
       ))}
     </div>
   )

src/components/CCIP/Cards/NetworkCard.css

@@ -1,29 +1,35 @@
 .network-card__container {
   display: flex;
-  /* flex-direction: column;
-align-items: flex-start; */
-  padding: 24px;
-  gap: 16px;
+  padding: var(--space-6x);
+  gap: var(--space-3x);
+  width: 100%;
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--space-1x);
+}
 
-  background: #ffffff;
-  border: 1px solid #e4e8ed;
-  border-radius: 4px;
+.network-card__container:hover {
+  background-color: var(--gray-50);
 }
 
 .network-card__container img {
-  width: 40px;
-  height: 40px;
+  width: var(--space-10x);
+  height: var(--space-10x);
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .network-card__container h3 {
-  font-size: 16px;
-  font-weight: 500;
-  color: #252e42;
-  margin-bottom: 0;
+  font-size: var(--space-4x);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--space-6x);
+  color: var(--gray-950);
+  margin-bottom: var(--space-1x);
 }
 
 .network-card__container p {
   margin-bottom: 0;
   font-size: var(--space-3x);
+  line-height: var(--space-5x);
   color: var(--gray-500);
 }

src/components/CCIP/Cards/NetworkCard.tsx

@@ -14,7 +14,7 @@ function NetworkCard({ name, totalLanes, totalTokens, logo }: NetworkCardProps)
       <div>
         <h3>{name}</h3>
         <p>
-          {totalLanes} lanes | {totalTokens} tokens
+          {totalLanes} {totalLanes > 1 ? "lanes" : "lane"} | {totalTokens} {totalTokens > 1 ? "tokens" : "token"}
         </p>
       </div>
     </div>

src/components/CCIP/Cards/TokenCard.css

@@ -1,25 +1,37 @@
 .token-card__container {
   display: flex;
+  width: 100%;
+  height: 110px;
+  min-width: 110px;
+  margin: 0 auto;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 24px;
-  gap: 16px;
-
+  padding: var(--space-4x);
+  gap: var(--space-3x);
   background: #ffffff;
-  border: 1px solid #e4e8ed;
-  border-radius: 4px;
+  border: 1px solid var(--gray-200);
+  border-radius: var(--space-1x);
+  justify-content: center;
+  cursor: pointer;
+}
+
+.token-card__container:hover {
+  background-color: var(--gray-50);
 }
 
-.token-card__container img {
-  width: 40px;
-  height: 40px;
+.token-card__container object,
+.token-card__container object img {
+  width: var(--space-10x);
+  height: var(--space-10x);
+  border-radius: 50%;
 }
 
 .token-card__container h3 {
-  font-size: 16px;
+  font-size: var(--space-4x);
   font-weight: 500;
-  color: #252e42;
+  color: var(--gray-950);
+  margin-bottom: 0;
 }
 
 .truncate {
@@ -28,3 +40,9 @@
   text-overflow: ellipsis; /* Add ellipsis (…) when the text is truncated */
   width: 200px; /* Adjust the width as needed */
 }
+
+@media (min-width: 992px) {
+  .token-card__container {
+    height: 124px;
+  }
+}

src/components/CCIP/Cards/TokenCard.tsx

@@ -4,23 +4,44 @@ import "./TokenCard.css"
 interface TokenCardProps {
   name: string
   logo?: string
+  link?: string
+  onClick?: () => void
 }
 
-function TokenCard({ name, logo }: TokenCardProps) {
-  return (
-    <a href={`/ccip/token/${name}`}>
-      <div className="token-card__container">
-        <img
-          src={logo}
-          alt=""
-          onError={({ currentTarget }) => {
-            currentTarget.onerror = null // prevents looping
-            currentTarget.src = fallbackTokenIconUrl
-          }}
-        />
+function TokenCard({ name, logo, link, onClick }: TokenCardProps) {
+  if (link) {
+    return (
+      <a href={link}>
+        <div className="token-card__container">
+          {/* 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>
+    )
+  }
+
+  if (onClick) {
+    return (
+      <div className="token-card__container" onClick={onClick} role="button">
+        <object data={logo} type="image/png">
+          <img src={fallbackTokenIconUrl} alt="" />
+        </object>
         <h3>{name}</h3>
       </div>
-    </a>
+    )
+  }
+
+  return (
+    <div className="token-card__container">
+      <object data={logo} type="image/png">
+        <img src={fallbackTokenIconUrl} alt="" />
+      </object>
+      <h3>{name}</h3>
+    </div>
   )
 }
 

src/components/CCIP/Chain/Chain.astro

@@ -0,0 +1,154 @@
+---
+import CcipLayout from "~/layouts/CcipLayout.astro"
+import { getEntry } from "astro:content"
+import {
+  Environment,
+  getAllNetworkLanes,
+  getAllNetworks,
+  getSearchLanes,
+  getTokensOfChain,
+  Version,
+} from "~/config/data/ccip"
+import ChainHero from "~/components/CCIP/ChainHero/ChainHero"
+import ChainTable from "~/components/CCIP/Tables/ChainTable"
+import { getTokenIconUrl } from "~/features/utils"
+import Drawer from "../Drawer/Drawer"
+import ChainTokenGrid from "./ChainTokenGrid"
+
+// TODO: Add type for network
+const { environment, network } = Astro.props as { environment: Environment; network: any }
+
+const entry = await getEntry("ccip", "index")
+const { headings } = await entry.render()
+const networks = getAllNetworks({ filter: environment })
+
+const allTokens = getTokensOfChain({
+  chain: network?.chain || "",
+  filter: environment,
+})
+  .map((token) => {
+    const logo = getTokenIconUrl(token) || ""
+    return {
+      name: token,
+      logo,
+      totalNetworks: networks.length, // Add totalNetworks property
+    }
+  })
+  .sort((a, b) => a.name.localeCompare(b.name))
+
+const lanes = await getAllNetworkLanes({
+  environment: environment,
+  version: Version.V1_2_0,
+  chain: network?.chain || "",
+  site: Astro.url.origin || "",
+})
+
+const searchLanes = getSearchLanes({ environment })
+---
+
+<CcipLayout
+  frontmatter={{
+    title: `CCIP Supported Networks - ${network.name}`,
+    section: "ccip",
+  }}
+  {headings}
+  environment={environment}
+>
+  <ChainHero
+    chains={networks}
+    tokens={allTokens}
+    network={network}
+    environment={environment}
+    lanes={searchLanes}
+    client:load
+  />
+  <section class="layout">
+    <div>
+      <ChainTable
+        environment={environment}
+        lanes={lanes}
+        client:load
+        explorerUrl={network.explorerUrl}
+        sourceNetwork={{
+          name: network.name,
+          logo: network.logo,
+          key: network.chain,
+        }}
+      />
+    </div>
+    <div>
+      <div class="ccip-heading">
+        <h2>Tokens <span>({allTokens.length})</span></h2>
+        <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">Add my token</a>
+      </div>
+
+      <ChainTokenGrid tokens={allTokens} network={network} client:only="react" environment={environment} />
+    </div>
+  </section>
+</CcipLayout>
+
+<style scoped="false">
+  .layout {
+    --gutter: var(--space-10x);
+    --doc-padding: var(--space-6x);
+    margin: var(--space-8x) auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gutter);
+    padding: var(--doc-padding);
+  }
+
+  .ccip-heading {
+    display: flex;
+    padding-bottom: var(--space-4x);
+    margin-bottom: var(--space-6x);
+    justify-content: space-between;
+  }
+
+  .layout h2 {
+    color: var(--gray-900);
+    font-size: 22px;
+    line-height: var(--space-10x);
+    margin-bottom: 0px;
+  }
+
+  .layout h2 span {
+    color: var(--gray-400);
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
+
+  .networks__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-2x);
+  }
+
+  @media (min-width: 50em) {
+    .layout {
+      max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
+      padding: 0;
+    }
+  }
+
+  @media (min-width: 992px) {
+    .layout {
+      display: grid;
+      --doc-padding: var(--space-10x);
+      padding-top: var(--doc-padding);
+      padding-bottom: var(--doc-padding);
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-24x);
+    }
+
+    .networks__grid {
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-6x);
+      min-height: 420px;
+    }
+
+    .ccip-heading {
+      border-bottom: 1px solid var(--gray-200);
+    }
+  }
+</style>

src/components/CCIP/Chain/ChainTokenGrid.css

@@ -0,0 +1,13 @@
+.tokens__grid {
+  display: grid;
+  grid-template-columns: 32% 32% 32%;
+  gap: var(--space-2x);
+}
+
+@media (min-width: 992px) {
+  .tokens__grid {
+    min-height: 420px;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: var(--space-4x);
+  }
+}

src/components/CCIP/Chain/ChainTokenGrid.tsx

@@ -0,0 +1,97 @@
+import { Environment, getAllTokenLanes, getTokenData, Version } from "~/config/data/ccip"
+import TokenCard from "../Cards/TokenCard"
+import { drawerContentStore } from "../Drawer/drawerStore"
+import TokenDrawer from "../Drawer/TokenDrawer"
+import { directoryToSupportedChain, getChainIcon, getTitle } from "~/features/utils"
+import { useState } from "react"
+import "./ChainTokenGrid.css"
+import SeeMore from "../SeeMore/SeeMore"
+
+interface ChainTokenGridProps {
+  tokens: {
+    name: string
+    logo: string
+    totalNetworks: number
+  }[]
+  network: {
+    name: string
+    logo: string
+    tokenAddress: string
+    tokenPoolType: string
+    tokenPoolAddress: string
+    decimals: number
+    key: string
+    explorerUrl: string
+  }
+  environment: Environment
+}
+
+const BEFORE_SEE_MORE = 6 * 4 // Number of networks to show before the "See more" button, 7 rows x 4 items
+
+function ChainTokenGrid({ tokens, network, environment }: ChainTokenGridProps) {
+  const [seeMore, setSeeMore] = useState(tokens.length <= BEFORE_SEE_MORE)
+  return (
+    <>
+      <div className="tokens__grid">
+        {tokens.slice(0, seeMore ? tokens.length : BEFORE_SEE_MORE).map((token) => {
+          const data = getTokenData({
+            environment,
+            version: Version.V1_2_0,
+            tokenSymbol: token.name || "",
+          })
+          return (
+            <TokenCard
+              name={token.name}
+              logo={token.logo}
+              key={token.name}
+              onClick={() => {
+                const selectedNetwork = Object.keys(data)
+                  .map((key) => {
+                    const directory = directoryToSupportedChain(key || "")
+                    const title = getTitle(directory) || ""
+                    const networkLogo = getChainIcon(directory) || ""
+                    return {
+                      name: title,
+                      token: data[key].name || "",
+                      key,
+                      logo: networkLogo,
+                      symbol: token,
+                      tokenLogo: network.logo || "",
+                      decimals: data[key].decimals || 0,
+                      tokenAddress: data[key].tokenAddress || "",
+                      tokenPoolType: data[key].poolType || "",
+                      tokenPoolAddress: data[key].poolAddress || "",
+                      explorerUrl: network.explorerUrl,
+                    }
+                  })
+                  .find((n) => n.key === network.key)
+
+                if (selectedNetwork) {
+                  drawerContentStore.set(() => (
+                    <TokenDrawer
+                      token={{
+                        name: data[Object.keys(data)[0]]?.name || "",
+                        logo: token.logo,
+                        symbol: token.name,
+                      }}
+                      network={selectedNetwork}
+                      destinationLanes={getAllTokenLanes({
+                        environment,
+                        version: Version.V1_2_0,
+                        token: token.name || "",
+                      })}
+                      environment={environment}
+                    />
+                  ))
+                }
+              }}
+            />
+          )
+        })}
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+    </>
+  )
+}
+
+export default ChainTokenGrid

src/components/CCIP/ChainHero/ChainHero.css

@@ -1,66 +1,119 @@
-.ccip-hero {
+.ccip-chain-hero {
   background-color: var(--gray-100);
+  border-bottom: 1px solid var(--gray-200);
+  min-height: 241px;
 }
 
-.ccip-hero__grid {
-  width: 100vw;
-}
-
-.ccip-hero__heading {
+.ccip-chain-hero__heading {
   color: var(--gray-900);
-  font-size: 26px;
-  font-weight: 500;
   display: flex;
   align-items: center;
   gap: var(--space-6x);
+  padding-top: var(--space-4x);
+  padding-bottom: var(--space-4x);
+}
+
+.ccip-chain-hero__heading h1 {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 500;
 }
 
-.ccip-hero__heading img {
+.ccip-chain-hero__heading img {
   width: 80px;
   height: 80px;
 }
 
-.ccip-hero__content {
-  --gutter: var(--space-2x);
-  --doc-padding: 2rem;
-  margin: var(--space-8x) auto;
+.ccip-chain-hero__heading__images {
+  position: relative;
+}
+
+.ccip-chain-hero__heading__images__small {
+  width: var(--space-10x) !important;
+  height: var(--space-10x) !important;
+  border-radius: 50%;
+  top: 60%;
+  left: 60%;
+  position: absolute;
+}
+
+.ccip-chain-hero__content {
+  --gutter: var(--space-6x);
+  --doc-padding: var(--space-6x);
   gap: var(--gutter);
-  padding: var(--doc-padding);
-  padding: var(--space-4x);
+  padding: var(--space-6x);
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
 }
 
-.ccip-hero__top {
+.ccip-chain-hero__token-logo {
+  border-radius: 50%;
+}
+
+.ccip-chain-hero__top {
   display: flex;
+  flex-direction: column-reverse;
   justify-content: space-between;
-  align-items: center;
-  gap: var(--space-16x);
+  align-items: start;
+  gap: var(--space-6x);
 }
 
-.ccip-hero__chainSearch {
-  width: 358px;
+.ccip-chain-hero__chainSearch {
+  width: 100%;
 }
 
-.ccip-hero__details {
+.ccip-chain-hero__details {
   display: grid;
-  gap: var(--space-4x);
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  gap: var(--space-6x);
+  grid-template-columns: 1fr;
 }
 
-.ccip-hero__details__label {
+.ccip-chain-hero__details__label {
   /* Body/Body Semi S */
   font-family: "Inter";
   font-style: normal;
   font-weight: 600;
   font-size: 14px;
   line-height: 22px;
-  /* identical to box height, or 157% */
+  padding-bottom: var(--space-2x);
+  color: var(--gray-500);
+}
+
+.ccip-chain-hero__feeTokens__list {
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+  gap: var(--space-4x);
+}
+
+.ccip-chain-hero__feeTokens__item {
+  display: flex;
+
+  align-items: center;
+  gap: var(--space-2x);
+  color: var(--gray-900);
+}
+
+.ccip-chain-hero__feeTokens__native-gas-token {
+  font-style: normal;
+  font-weight: var(--font-weight-normal);
+  font-size: var(--space-4x);
+  line-height: var(--space-6x);
+  color: var(--gray-600);
+}
+
+.ccip-chain-hero__feeTokens__item a {
+  font-size: var(--space-4x) !important;
+}
 
-  color: #6c7585;
+.ccip-chain-hero__feeTokens__item__logo {
+  width: var(--space-5x);
+  height: var(--space-5x);
+  border-radius: 50%;
 }
 
-.ccip-hero__details__value {
+.ccip-chain-hero__details__value {
   /* Body/Body */
   font-family: "Inter";
   font-style: normal;
@@ -73,14 +126,48 @@
   color: #212732;
 }
 
+.ccip-chain-hero__token-logo__symbol {
+  font-weight: 500;
+  font-size: 18px;
+  color: var(--gray-500);
+}
+
 @media (min-width: 50em) {
-  .ccip-hero__content {
+  .ccip-chain-hero__content {
     max-width: 1440px;
   }
 }
 
 @media (min-width: 992px) {
-  .ccip-hero__content {
+  .ccip-chain-hero__top {
+    flex-direction: row;
+    gap: var(--space-16x);
+    align-items: center;
+  }
+
+  .ccip-chain-hero__heading {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .ccip-chain-hero__chainSearch {
+    width: 358px;
+  }
+
+  .ccip-chain-hero__details {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: var(--space-4x);
+  }
+
+  .ccip-chain-hero__feeTokens__list {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--space-20x);
+  }
+
+  .ccip-chain-hero__content {
+    --gutter: var(--space-10x);
     grid-template-columns: 1fr 1fr;
+    padding: var(--space-10x) var(--space-16x);
   }
 }

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -1,88 +1,299 @@
-import { Address } from "~/components"
+import { Environment, getTokenData, LaneConfig, Version } from "~/config/data/ccip"
+import Address from "~/components/AddressReact"
 import Breadcrumb from "../Breadcrumb/Breadcrumb"
 import Search from "../Search/Search"
 import "./ChainHero.css"
+import CopyValue from "../CopyValue/CopyValue"
+import {
+  getExplorerAddressUrl,
+  getTokenIconUrl,
+  getNativeCurrency,
+  directoryToSupportedChain,
+  fallbackTokenIconUrl,
+} from "~/features/utils"
+import { Tooltip } from "~/features/common/Tooltip"
 
 interface ChainHeroProps {
   chains: {
     name: string
     totalLanes: number
     totalTokens: number
     logo: string
+    chain: string
   }[]
   tokens: {
     name: string
     totalNetworks: number
     logo: string
   }[]
-  network: {
+  lanes: {
+    sourceNetwork: {
+      name: string
+      logo: string
+      key: string
+    }
+    destinationNetwork: {
+      name: string
+      logo: string
+      key: string
+      explorerUrl: string
+    }
+    lane: LaneConfig
+  }[]
+  network?: {
     name: string
     logo: string
     totalLanes: number
     totalTokens: number
     chain: string
+    tokenAdminRegistry?: string
+    registryModule?: string
+    router?: {
+      name: string
+      address: string
+    }
+    explorerUrl: string
+    routerExplorerUrl: string
+    chainSelector: string
+    feeTokens?: string[]
+    nativeToken?: {
+      name: string
+      symbol: string
+      logo: string
+    }
+    armProxy: {
+      address: string
+      version: string
+    }
   }
-  token: {
+  token?: {
     name: string
     logo: string
+    symbol: string
   }
+  environment: Environment
 }
 
-function ChainHero({ chains, tokens, network, token }: ChainHeroProps) {
-  return (
-    <section className="ccip-hero">
-      <img src="/assets/ccip.png" alt="" className="ccip-hero__grid" />
+function ChainHero({ chains, tokens, network, token, environment, lanes }: ChainHeroProps) {
+  const feeTokensWithAddress = network?.feeTokens?.map((feeToken) => {
+    const logo = getTokenIconUrl(feeToken)
+    const token = getTokenData({
+      environment,
+      version: Version.V1_2_0,
+      tokenSymbol: feeToken,
+    })
+    const explorerUrl = network.explorerUrl
+    const address = getExplorerAddressUrl(explorerUrl)(token[network.chain].tokenAddress)
+
+    return {
+      logo,
+      token: feeToken,
+      address,
+    }
+  })
+
+  const nativeCurrency = ((network) => {
+    if (!network) return
+    const supportedNetwork = directoryToSupportedChain(network.chain)
+    return getNativeCurrency(supportedNetwork)
+  })(network)
 
-      <div className="ccip-hero__content layout">
-        <div className="ccip-hero__top">
+  const nativeTokenHasAddress = () => {
+    if (!network) return
+    // We making sure the Navive Currency is not already part of the FeeToken
+    return feeTokensWithAddress?.some((feeToken) => {
+      return feeToken.token.toLowerCase() === nativeCurrency?.symbol.toLowerCase()
+    })
+  }
+
+  return (
+    <section className="ccip-chain-hero">
+      <div className="ccip-chain-hero__content">
+        <div className="ccip-chain-hero__top">
           <Breadcrumb
             items={[
               {
-                name: "Networks & Tokens",
-                url: "/ccip",
+                name: "CCIP Directory",
+                url: `/ccip/directory/${environment}`,
               },
               {
-                name: "Current",
-                url: `/ccip/${network.chain}`,
+                name: network?.name || token?.name || "Current",
+                url: network
+                  ? `/ccip/directory/${environment}/chain/${network.chain}`
+                  : `/ccip/directory/${environment}/token/${token?.symbol}`,
               },
             ]}
           />
-          <div className="ccip-hero__chainSearch">
-            <Search chains={chains} tokens={tokens} small />
+          <div className="ccip-chain-hero__chainSearch">
+            <Search chains={chains} tokens={tokens} small environment={environment} lanes={lanes} />
           </div>
         </div>
 
-        <h1 className="ccip-hero__heading">
-          <img src={network.logo} alt="" />
-          {network.name}
-        </h1>
-        <div className="ccip-hero__details">
-          <div className="ccip-hero__details__item">
-            <div className="ccip-hero__details__label">Router</div>
-            <div className="ccip-hero__details__value">
-              <Address
-                endLength={4}
-                contractUrl="https://etherscan.io/address/0x7a250d5630b4cf539739df2c5dacb4c659f2488d"
-              />
+        <div className="ccip-chain-hero__heading">
+          <img
+            src={network?.logo || token?.logo}
+            alt=""
+            className={token?.logo ? "ccip-chain-hero__token-logo" : ""}
+            onError={({ currentTarget }) => {
+              currentTarget.onerror = null // prevents looping
+              currentTarget.src = fallbackTokenIconUrl
+            }}
+          />
+          <h1>
+            {network?.name || token?.name} <span className="ccip-chain-hero__token-logo__symbol">{token?.symbol}</span>
+          </h1>
+        </div>
+        {network && (
+          <div className="ccip-chain-hero__details">
+            <div className="ccip-chain-hero__details__item">
+              <div className="ccip-chain-hero__details__label">Router</div>
+              <div className="ccip-chain-hero__details__value" data-clipboard-type="router">
+                <Address endLength={4} contractUrl={network.routerExplorerUrl} />
+              </div>
+            </div>
+            <div className="ccip-chain-hero__details__item">
+              <div className="ccip-chain-hero__details__label" data-clipboard-type="chain-selector">
+                Chain selector
+                <Tooltip
+                  label=""
+                  tip="CCIP Blockchain identifier"
+                  labelStyle={{
+                    marginRight: "5px",
+                  }}
+                  style={{
+                    display: "inline-block",
+                    verticalAlign: "middle",
+                    marginBottom: "2px",
+                  }}
+                />
+              </div>
+              <div className="ccip-chain-hero__details__value">
+                {network.chainSelector ? <CopyValue value={network.chainSelector} /> : "n/a"}{" "}
+              </div>
+            </div>
+            <div className="ccip-chain-hero__details__item">
+              <div className="ccip-chain-hero__details__label">
+                RMN
+                <Tooltip
+                  label=""
+                  tip="The Risk Management contract maintains the list of Risk Management node addresses that are allowed to bless or curse. The contract also holds the quorum logic for blessing a committed Merkle Root and cursing CCIP on a destination blockchain."
+                  labelStyle={{
+                    marginRight: "5px",
+                  }}
+                  style={{
+                    display: "inline-block",
+                    verticalAlign: "middle",
+                    marginBottom: "2px",
+                  }}
+                />
+              </div>
+              <div className="ccip-chain-hero__details__value" data-clipboard-type="rmn">
+                {network.armProxy ? (
+                  <Address
+                    endLength={4}
+                    contractUrl={getExplorerAddressUrl(network.explorerUrl)(network.armProxy.address)}
+                  />
+                ) : (
+                  "n/a"
+                )}
+              </div>
+            </div>
+            <div className="ccip-chain-hero__details__item">
+              <div className="ccip-chain-hero__details__label">
+                Token admin registry
+                <Tooltip
+                  label=""
+                  tip="The TokenAdminRegistry contract is responsible for managing the configuration of token pools for all cross chain tokens."
+                  labelStyle={{
+                    marginRight: "5px",
+                  }}
+                  style={{
+                    display: "inline-block",
+                    verticalAlign: "middle",
+                    marginBottom: "2px",
+                  }}
+                />
+              </div>
+              <div className="ccip-chain-hero__details__value" data-clipboard-type="token-registry">
+                {network.tokenAdminRegistry ? (
+                  <Address
+                    endLength={4}
+                    contractUrl={getExplorerAddressUrl(network.explorerUrl)(network.tokenAdminRegistry)}
+                  />
+                ) : (
+                  "n/a"
+                )}
+              </div>
+            </div>
+            <div className="ccip-chain-hero__details__item">
+              <div className="ccip-chain-hero__details__label">
+                Registry module owner
+                <Tooltip
+                  label=""
+                  tip="The RegistryModuleOwnerCustom contract is responsible for registering the administrator of a token in the TokenAdminRegistry."
+                  labelStyle={{
+                    marginRight: "5px",
+                  }}
+                  style={{
+                    display: "inline-block",
+                    verticalAlign: "middle",
+                    marginBottom: "2px",
+                  }}
+                />
+              </div>
+              <div className="ccip-chain-hero__details__value" data-clipboard-type="registry">
+                {network.registryModule ? (
+                  <Address
+                    endLength={4}
+                    contractUrl={getExplorerAddressUrl(network.explorerUrl)(network.registryModule)}
+                  />
+                ) : (
+                  "n/a"
+                )}
+              </div>
             </div>
           </div>
-          <div className="ccip-hero__details__item">
-            <div className="ccip-hero__details__label">Chain selector</div>
-            <div className="ccip-hero__details__value">6433500567565415381</div>
-          </div>
-          <div className="ccip-hero__details__item">
-            <div className="ccip-hero__details__label">RMN</div>
-            <div className="ccip-hero__details__value">n/a</div>
-          </div>
-          <div className="ccip-hero__details__item">
-            <div className="ccip-hero__details__label">Token admin registry</div>
-            <div className="ccip-hero__details__value">n/a</div>
-          </div>
-          <div className="ccip-hero__details__item">
-            <div className="ccip-hero__details__label">Registry module owner</div>
-            <div className="ccip-hero__details__value">n/a</div>
+        )}
+
+        {feeTokensWithAddress && (
+          <div className="ccip-chain-hero__feeTokens">
+            <div className="ccip-chain-hero__details__label">Fee tokens</div>
+            <div className="ccip-chain-hero__feeTokens__list">
+              {feeTokensWithAddress.map(({ token, address, logo }, index) => {
+                return (
+                  <div key={index} className="ccip-chain-hero__feeTokens__item" data-clipboard-type="fee-token">
+                    <object
+                      data={logo}
+                      type="image/png"
+                      width="20px"
+                      height="20px"
+                      className="ccip-chain-hero__feeTokens__item__logo"
+                    >
+                      <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">
+                  <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>
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </section>
   )

src/components/CCIP/ChainHero/LaneDetailsHero.css

@@ -0,0 +1,81 @@
+.lane-details-hero {
+  background-color: var(--gray-100);
+  padding: var(--space-6x);
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.lane-details-hero h2 {
+  font-weight: var(--font-weight-medium);
+  padding: 0;
+  margin: 0;
+  font-size: var(--space-4x);
+  font-size: 22px;
+  line-height: 28px;
+}
+
+.lane-details-hero__networks {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: var(--space-6x);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  font-size: 28px;
+  margin: var(--space-10x) 0;
+}
+
+.lane-details-hero__networks svg {
+  transform: rotate(90deg);
+  margin-left: var(--space-4x);
+}
+
+.lane-details-hero__network {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6x);
+  color: var(--gray-900);
+}
+
+.lane-details-hero__network img {
+  width: var(--space-12x);
+  height: var(--space-12x);
+}
+
+.lane-details-hero__details {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-6x);
+}
+
+.lane-details-hero__details__label {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 22px;
+
+  color: var(--gray-500);
+}
+
+.lane-details-hero__token-logo {
+  border-radius: 50%;
+}
+
+@media screen and (min-width: 768px) {
+  .lane-details-hero {
+    padding: var(--space-6x) var(--space-10x) var(--space-10x);
+  }
+
+  .lane-details-hero__details {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .lane-details-hero__networks {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .lane-details-hero__networks svg {
+    transform: rotate(0deg);
+    margin-left: 0;
+  }
+}

src/components/CCIP/ChainHero/LaneDetailsHero.tsx

@@ -0,0 +1,136 @@
+import { Tooltip } from "~/features/common/Tooltip"
+import AddressComponent from "~/components/AddressReact"
+import "./LaneDetailsHero.css"
+import { getExplorerAddressUrl } from "~/features/utils"
+import CopyValue from "../CopyValue/CopyValue"
+import { LaneFilter } from "~/config/data/ccip"
+
+interface LaneDetailsHeroProps {
+  sourceNetwork: {
+    logo: string
+    name: string
+  }
+  destinationNetwork: {
+    logo: string
+    name: string
+  }
+  onRamp: string
+  offRamp: string
+  destinationAddress: string
+  enforceOutOfOrder?: boolean
+  explorerUrl: string
+  rmnPermeable: boolean
+  inOutbound: LaneFilter
+}
+
+function LaneDetailsHero({
+  sourceNetwork,
+  destinationNetwork,
+  onRamp,
+  offRamp,
+  destinationAddress,
+  enforceOutOfOrder,
+  explorerUrl,
+  rmnPermeable,
+  inOutbound,
+}: LaneDetailsHeroProps) {
+  let enforceOutOfOrderString = "N/A"
+  if (enforceOutOfOrder === true) {
+    enforceOutOfOrderString = "Required"
+  } else if (enforceOutOfOrder === false) {
+    enforceOutOfOrderString = "Optional"
+  }
+  return (
+    <div className="lane-details-hero">
+      <div className="lane-details-hero__networks">
+        <div className="lane-details-hero__network">
+          <img src={sourceNetwork.logo} alt={sourceNetwork.name} />
+          {sourceNetwork.name}
+        </div>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0.666626 7.99673H14.6666M7.66663 15L14.6666 8L7.66663 1" stroke="var(--gray-900)" />
+        </svg>
+        <div className="lane-details-hero__network">
+          <img src={destinationNetwork.logo} alt={destinationNetwork.name} className="lane-details-hero__token-logo" />
+          {destinationNetwork.name}
+        </div>
+      </div>
+      <div className="lane-details-hero__details">
+        {inOutbound === LaneFilter.Inbound ? (
+          <>
+            <div className="lane-details-hero__details__label">OffRamp address</div>
+            <div data-clipboard-type="offramp">
+              <AddressComponent
+                address={offRamp}
+                endLength={6}
+                contractUrl={getExplorerAddressUrl(explorerUrl)(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)}
+              />
+            </div>
+          </>
+        )}
+        <div className="lane-details-hero__details__label">Destination chain selector</div>
+        <div data-clipboard-type="destination-chain-selector">
+          {destinationAddress ? <CopyValue value={destinationAddress} /> : "n/a"}{" "}
+        </div>
+        <div className="lane-details-hero__details__label">RMN</div>
+        <div>
+          {rmnPermeable ? (
+            <a href="https://docs.chain.link/ccip/concepts#risk-management-network" target="_blank" rel="noreferrer">
+              <Tooltip
+                label="Coming soon"
+                tip="Risk Management Network (RMN) is NOT enabled for this lane at this time."
+                labelStyle={{
+                  marginRight: "10px",
+                }}
+                style={{
+                  display: "inline-flex",
+                }}
+              />
+            </a>
+          ) : (
+            <Tooltip
+              label="Enabled"
+              tip="This field shows the status of the Risk Management Network (RMN) for this lane."
+              labelStyle={{
+                marginRight: "10px",
+              }}
+              style={{
+                display: "inline-flex",
+              }}
+            />
+          )}
+        </div>
+        {inOutbound === LaneFilter.Outbound && (
+          <>
+            <div className="lane-details-hero__details__label">Out of Order Execution</div>
+            <div data-clipboard-type="destination-chain-selector">
+              <Tooltip
+                label={enforceOutOfOrderString}
+                tip="Controls the execution order of your messages on the destination blockchain. Setting this to true allows messages to be executed in any order. Setting it to false ensures messages are executed in sequence, so a message will only be executed if the preceding one has been executed. On lanes where ‘Out of Order Execution’ is required, you must set this to true; otherwise, the transaction will revert."
+                labelStyle={{
+                  marginRight: "10px",
+                }}
+                style={{
+                  display: "inline-flex",
+                }}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default LaneDetailsHero

src/components/CCIP/ChainHero/TokenDetailsHero.tsx

@@ -0,0 +1,77 @@
+import Address from "~/components/AddressReact"
+import { getExplorerAddressUrl, fallbackTokenIconUrl } from "~/features/utils"
+import "./ChainHero.css"
+
+interface TokenDetailsHeroProps {
+  network: {
+    name: string
+    logo: string
+    explorerUrl: string
+  }
+  token: {
+    name: string
+    symbol: string
+    logo: string
+    decimals: number
+    address: string
+    poolType: string
+    poolAddress: string
+  }
+}
+
+function TokenDetailsHero({ network, token }: TokenDetailsHeroProps) {
+  return (
+    <section className="ccip-chain-hero">
+      <div className="ccip-chain-hero__content">
+        <div className="ccip-chain-hero__heading">
+          <div className="ccip-chain-hero__heading__images">
+            <img src={network?.logo} alt="" />
+            <img
+              src={token?.logo}
+              alt=""
+              className="ccip-chain-hero__heading__images__small"
+              onError={(event) => {
+                ;(event.target as HTMLImageElement).setAttribute("src", fallbackTokenIconUrl)
+              }}
+            />
+          </div>
+
+          <h1>
+            {token?.name} <span className="ccip-chain-hero__token-logo__symbol">{token?.symbol}</span>
+          </h1>
+        </div>
+
+        <div className="ccip-chain-hero__details">
+          <div className="ccip-chain-hero__details__item">
+            <div className="ccip-chain-hero__details__label">Network</div>
+            <div className="ccip-chain-hero__details__value">{network?.name}</div>
+          </div>
+          <div className="ccip-chain-hero__details__item">
+            <div className="ccip-chain-hero__details__label">Decimals</div>
+            <div className="ccip-chain-hero__details__value">{token?.decimals}</div>
+          </div>
+          <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)} />
+            </div>
+          </div>
+          <div className="ccip-chain-hero__details__item">
+            <div className="ccip-chain-hero__details__label">Token pool type</div>
+            <div className="ccip-chain-hero__details__value">
+              {token?.poolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"}
+            </div>
+          </div>
+          <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)} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default TokenDetailsHero

src/components/CCIP/CopyValue/CopyValue.tsx

@@ -0,0 +1,56 @@
+import { clsx } from "~/lib"
+
+export type Props = {
+  value?: string
+  valueClass?: string
+  valueId?: string
+}
+
+const CopyValue = ({ value, valueClass, valueId }: Props) => {
+  if (!value) return null
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    if (value) navigator.clipboard.writeText(value)
+  }
+
+  return (
+    <span className={`addressContainer ${valueClass || ""}`} id={valueId}>
+      <span className="valueCopy">{value}</span>
+      <button
+        className={clsx("copyBtn", "copy-iconbutton")}
+        style={{ height: "16px", width: "16px", minWidth: "12px" }}
+        data-clipboard-text={value}
+        onClick={handleClick}
+      >
+        <img src="/assets/icons/copyIcon.svg" alt="Copy to clipboard" />
+      </button>
+
+      <style>{`
+        .valueCopy {
+          border-radius: var(--border-radius-10);
+          word-break: break-word;
+        }
+
+        .addressContainer {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-1x);
+          word-break: break-word;
+          margin-top: 0;
+        }
+
+        .copyBtn {
+          background: none;
+          border: none;
+        }
+
+        .copyBtn:hover {
+          color: var(--color-text-link);
+        }
+      `}</style>
+    </span>
+  )
+}
+
+export default CopyValue

src/components/CCIP/Drawer/Drawer.css

@@ -0,0 +1,90 @@
+.drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background-color: #1a2332e5;
+  backdrop-filter: blur(var(--space-1x)) opacity(0);
+  transition: backdrop-filter 0.5s ease-in-out;
+}
+
+.drawer__open.drawer {
+  backdrop-filter: blur(var(--space-1x)) opacity(0.9);
+}
+
+.drawer__close {
+  display: none;
+}
+
+.drawer__container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: white;
+  transform: translateX(100%);
+  transition: transform 0.5s ease-in-out;
+}
+
+.drawer__content {
+  overflow-y: auto;
+  height: 100%;
+}
+
+.drawer__open .drawer__container {
+  transform: translateX(0);
+}
+
+.drawer__closeMobile {
+  position: absolute;
+  top: var(--space-4x);
+  right: var(--space-4x);
+  color: black;
+}
+
+@media (min-width: 768px) {
+  .drawer__container {
+    width: 75%;
+  }
+
+  .drawer__closeMobile {
+    display: none;
+  }
+
+  .drawer__close {
+    position: fixed;
+    top: var(--space-4x);
+    right: calc(100% + var(--space-4x));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1x);
+  }
+
+  .drawer__close button {
+    width: var(--space-12x);
+    height: var(--space-12x);
+    background-color: var(--gray-900);
+    border-radius: var(--space-1x);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  .drawer__close:hover button {
+    background-color: var(--blue-700);
+  }
+
+  .drawer__close label {
+    color: var(--gray-500);
+    font-size: 9px;
+    font-family: Inter;
+    font-weight: 400;
+    line-height: 10.89px;
+  }
+}

src/components/CCIP/Drawer/Drawer.tsx

@@ -0,0 +1,83 @@
+import { useStore } from "@nanostores/react"
+import "./Drawer.css"
+import { drawerContentStore } from "./drawerStore"
+import { useRef, useEffect, useState } from "react"
+import { clsx } from "~/lib"
+
+function Drawer() {
+  const drawerRef = useRef<HTMLDivElement>(null)
+  const drawerContentRef = useRef<HTMLDivElement>(null)
+  const $drawerContent = useStore(drawerContentStore)
+  const [isOpened, setIsOpened] = useState(false)
+
+  // exit when press esc
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") handleClose()
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    if ($drawerContent) {
+      document.body.style.overflow = "hidden"
+    } else {
+      document.body.style.overflow = "auto"
+    }
+
+    if ($drawerContent) {
+      setIsOpened(true)
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown)
+      document.body.style.overflow = "auto"
+    }
+  }, [$drawerContent])
+
+  if (!$drawerContent) return null
+
+  const handleClickOutside = (event) => {
+    if (drawerRef.current && drawerContentRef.current && !drawerContentRef.current.contains(event.target as Node)) {
+      handleClose()
+    }
+  }
+
+  const handleClose = () => {
+    setIsOpened(false)
+
+    // wait for animation to finish
+    setTimeout(() => {
+      drawerContentStore.set(null)
+    }, 500)
+  }
+
+  return (
+    <div
+      className={clsx("drawer", {
+        drawer__open: isOpened,
+      })}
+      ref={drawerRef}
+      onClick={handleClickOutside}
+    >
+      <div className="drawer__container" ref={drawerContentRef}>
+        <div className="drawer__close">
+          <button id="drawer-exit" onClick={handleClose}>
+            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M15.1667 1.33331L1.83337 14.6666M1.83337 1.33331L15.1667 14.6666" stroke="white" />
+            </svg>
+          </button>
+          <label htmlFor="drawer-exit">Esc</label>
+        </div>
+        <div className="drawer__content">
+          <button onClick={handleClose} className="drawer__closeMobile">
+            <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M15.1667 1.33331L1.83337 14.6666M1.83337 1.33331L15.1667 14.6666" stroke="#000000" />
+            </svg>
+          </button>
+
+          <div>{typeof $drawerContent === "function" ? $drawerContent() : $drawerContent}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Drawer

src/components/CCIP/Drawer/LaneDrawer.tsx

@@ -0,0 +1,187 @@
+import Address from "~/components/AddressReact"
+import "../Tables/Table.css"
+import {
+  Environment,
+  getNetwork,
+  getTokenData,
+  LaneConfig,
+  LaneFilter,
+  Version,
+  displayCapacity,
+} from "~/config/data/ccip"
+
+import { useState } from "react"
+import LaneDetailsHero from "../ChainHero/LaneDetailsHero"
+import { getExplorerAddressUrl, getTokenIconUrl, fallbackTokenIconUrl } from "~/features/utils"
+import TableSearchInput from "../Tables/TableSearchInput"
+import RateTooltip from "../Tooltip/RateTooltip"
+import { Tooltip } from "~/features/common/Tooltip"
+
+function LaneDrawer({
+  lane,
+  sourceNetwork,
+  destinationNetwork,
+  environment,
+  inOutbound,
+  explorerUrl,
+}: {
+  lane: LaneConfig
+  sourceNetwork: { name: string; logo: string; key: string }
+  destinationNetwork: { name: string; logo: string; key: string }
+  explorerUrl: string
+  environment: Environment
+  inOutbound: LaneFilter
+}) {
+  const [search, setSearch] = useState("")
+  const destinationNetworkDetails = getNetwork({
+    filter: environment,
+    chain: destinationNetwork.key,
+  })
+
+  return (
+    <>
+      <h2 className="ccip-table__drawer-heading">Lane details</h2>
+      <LaneDetailsHero
+        sourceNetwork={{
+          logo: sourceNetwork.logo,
+          name: sourceNetwork.name,
+        }}
+        destinationNetwork={{
+          logo: destinationNetwork.logo,
+          name: destinationNetwork.name,
+        }}
+        onRamp={lane.onRamp.address}
+        offRamp={lane.offRamp.address}
+        enforceOutOfOrder={lane.onRamp.enforceOutOfOrder}
+        explorerUrl={explorerUrl || ""}
+        destinationAddress={destinationNetworkDetails?.chainSelector || ""}
+        rmnPermeable={lane.rmnPermeable}
+        inOutbound={inOutbound}
+      />
+
+      <div className="ccip-table__drawer-container">
+        <div className="ccip-table__filters">
+          <div>
+            <div className="ccip-table__filters-title">
+              Tokens <span>({lane?.supportedTokens ? Object.keys(lane.supportedTokens).length : 0})</span>
+            </div>
+          </div>
+          <TableSearchInput search={search} setSearch={setSearch} />
+        </div>
+        <div className="ccip-table__wrapper">
+          <table className="ccip-table">
+            <thead>
+              <tr>
+                <th>Ticker</th>
+                <th>Token address (Source)</th>
+                <th>Decimals</th>
+                <th>Mechanism</th>
+                <th>
+                  Rate limit capacity
+                  <Tooltip
+                    label=""
+                    tip="Maximum amount per transaction"
+                    labelStyle={{
+                      marginRight: "5px",
+                    }}
+                    style={{
+                      display: "inline-block",
+                      verticalAlign: "middle",
+                      marginBottom: "2px",
+                    }}
+                  />
+                </th>
+                <th>
+                  Rate limit refil rate
+                  <Tooltip
+                    label=""
+                    tip="Rate at which available capacity is replenished"
+                    labelStyle={{
+                      marginRight: "5px",
+                    }}
+                    style={{
+                      display: "inline-block",
+                      verticalAlign: "middle",
+                      marginBottom: "2px",
+                    }}
+                  />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {lane.supportedTokens &&
+                Object.keys(lane.supportedTokens)
+                  ?.filter((token) => token.toLowerCase().includes(search.toLowerCase()))
+                  .map((token, index) => {
+                    const data = getTokenData({
+                      environment,
+                      version: Version.V1_2_0,
+                      tokenSymbol: token || "",
+                    })
+                    if (!Object.keys(data).length) return null
+                    const logo = getTokenIconUrl(token)
+                    return (
+                      <tr key={index}>
+                        <td>
+                          <a href={`/ccip/directory/${environment}/token/${token}`}>
+                            <div className="ccip-table__network-name">
+                              <img
+                                src={logo}
+                                alt={`${token} logo`}
+                                className="ccip-table__logo"
+                                onError={({ currentTarget }) => {
+                                  currentTarget.onerror = null // prevents looping
+                                  currentTarget.src = fallbackTokenIconUrl
+                                }}
+                              />
+                              {token}
+                            </div>
+                          </a>
+                        </td>
+                        <td data-clipboard-type="token">
+                          <Address
+                            address={data[sourceNetwork.key].tokenAddress}
+                            endLength={6}
+                            contractUrl={getExplorerAddressUrl(explorerUrl)(data[sourceNetwork.key].tokenAddress)}
+                          />
+                        </td>
+                        <td>{data[sourceNetwork.key].decimals}</td>
+
+                        <td>{data[sourceNetwork.key].poolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"}</td>
+                        <td>
+                          {lane.supportedTokens &&
+                            displayCapacity(
+                              data[sourceNetwork.key].decimals,
+                              token,
+                              lane.supportedTokens[token]?.rateLimiterConfig?.[
+                                inOutbound === LaneFilter.Inbound ? "in" : "out"
+                              ]
+                            )}
+                        </td>
+                        <td>
+                          {lane.supportedTokens && (
+                            <RateTooltip
+                              destinationLane={lane.supportedTokens[token]}
+                              inOutbound={inOutbound}
+                              symbol={token}
+                              decimals={data[sourceNetwork.key].decimals}
+                            />
+                          )}
+                        </td>
+                      </tr>
+                    )
+                  })}
+            </tbody>
+          </table>
+        </div>
+        <div className="ccip-table__notFound">
+          {lane.supportedTokens &&
+            Object.keys(lane.supportedTokens)?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase()))
+              .length === 0 && <>No tokens found</>}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default LaneDrawer

src/components/CCIP/Drawer/TokenDrawer.tsx

@@ -0,0 +1,235 @@
+import "../Tables/Table.css"
+import { drawerContentStore } from "../Drawer/drawerStore"
+import TokenDetailsHero from "../ChainHero/TokenDetailsHero"
+import {
+  Environment,
+  getLane,
+  getNetwork,
+  SupportedTokenConfig,
+  Version,
+  LaneFilter,
+  displayCapacity,
+} from "~/config/data/ccip"
+import { useState } from "react"
+import { SupportedChain } from "~/config"
+import LaneDrawer from "../Drawer/LaneDrawer"
+import TableSearchInput from "../Tables/TableSearchInput"
+import Tabs from "../Tables/Tabs"
+import { Tooltip } from "~/features/common/Tooltip"
+import RateTooltip from "../Tooltip/RateTooltip"
+
+function TokenDrawer({
+  token,
+  network,
+  destinationLanes,
+  environment,
+}: {
+  token: {
+    name: string
+    logo: string
+    symbol: string
+  }
+  network: {
+    name: string
+    logo: string
+    tokenAddress: string
+    tokenPoolType: string
+    tokenPoolAddress: string
+    decimals: number
+    key: string
+    explorerUrl: string
+  }
+  destinationLanes: {
+    [sourceChain: string]: SupportedTokenConfig
+  }
+  environment: Environment
+}) {
+  const [search, setSearch] = useState("")
+  const [inOutbound, setInOutbound] = useState<LaneFilter>(LaneFilter.Outbound)
+
+  const laneRows = Object.keys(destinationLanes).map((lane) => {
+    const networkDetails = getNetwork({
+      filter: environment,
+      chain: lane,
+    })
+    const laneData = getLane({
+      sourceChain: network?.key as SupportedChain,
+      destinationChain: lane as SupportedChain,
+      environment,
+      version: Version.V1_2_0,
+    })
+    return { networkDetails, laneData, lane }
+  })
+  return (
+    <div>
+      <h2 className="ccip-table__drawer-heading">Token details</h2>
+      <TokenDetailsHero
+        token={{
+          name: token.name,
+          symbol: token.symbol,
+          logo: token.logo,
+          decimals: network.decimals,
+          address: network.tokenAddress,
+          poolType: network.tokenPoolType,
+          poolAddress: network.tokenPoolAddress,
+        }}
+        network={{
+          name: network.name,
+          logo: network.logo,
+          explorerUrl: network.explorerUrl,
+        }}
+      />
+      <div className="ccip-table__drawer-container">
+        <div className="ccip-table__filters">
+          <div>
+            <Tabs
+              tabs={[
+                {
+                  name: "Outbound lanes",
+                  key: LaneFilter.Outbound,
+                },
+                {
+                  name: "Inbound lanes",
+                  key: LaneFilter.Inbound,
+                },
+              ]}
+              onChange={(key) => setInOutbound(key as LaneFilter)}
+            />
+          </div>
+          <TableSearchInput search={search} setSearch={setSearch} />
+        </div>
+        <div className="ccip-table__wrapper">
+          {" "}
+          <table className="ccip-table">
+            <thead>
+              <tr>
+                <th>{inOutbound === LaneFilter.Inbound ? "Source" : "Destination"} network</th>
+                <th>
+                  Rate limit capacity
+                  <Tooltip
+                    label=""
+                    tip="Maximum amount per transaction"
+                    labelStyle={{
+                      marginRight: "5px",
+                    }}
+                    style={{
+                      display: "inline-block",
+                      verticalAlign: "middle",
+                      marginBottom: "2px",
+                    }}
+                  />
+                </th>
+                <th>
+                  Rate limit refil rate
+                  <Tooltip
+                    label=""
+                    tip="Rate at which available capacity is replenished"
+                    labelStyle={{
+                      marginRight: "5px",
+                    }}
+                    style={{
+                      display: "inline-block",
+                      verticalAlign: "middle",
+                      marginBottom: "2px",
+                    }}
+                  />
+                </th>
+                <th>
+                  Mechanism
+                  <Tooltip
+                    label=""
+                    tip="Token pool mechanism: Lock & Mint, Burn & Mint, Lock & Unlock, Burn & Unlock."
+                    labelStyle={{
+                      marginRight: "5px",
+                    }}
+                    style={{
+                      display: "inline-block",
+                      verticalAlign: "middle",
+                      marginBottom: "2px",
+                    }}
+                  />
+                </th>
+                {/* <th>Status</th> */}
+              </tr>
+            </thead>
+            <tbody>
+              {laneRows
+                ?.filter(
+                  ({ networkDetails }) =>
+                    networkDetails && networkDetails.name.toLowerCase().includes(search.toLowerCase())
+                )
+                .map(({ networkDetails, laneData, lane }) => {
+                  if (!laneData || !networkDetails) return null
+
+                  return (
+                    <tr key={networkDetails.name}>
+                      <td>
+                        <div
+                          className="ccip-table__network-name"
+                          role="button"
+                          onClick={() => {
+                            drawerContentStore.set(() => (
+                              <LaneDrawer
+                                environment={environment}
+                                lane={laneData}
+                                sourceNetwork={network}
+                                destinationNetwork={{
+                                  name: networkDetails?.name || "",
+                                  logo: networkDetails?.logo || "",
+                                  key: lane,
+                                }}
+                                inOutbound={inOutbound}
+                                explorerUrl={network.explorerUrl}
+                              />
+                            ))
+                          }}
+                        >
+                          <img src={networkDetails?.logo} alt={networkDetails?.name} className="ccip-table__logo" />
+                          {networkDetails?.name}
+                        </div>
+                      </td>
+                      <td>
+                        {displayCapacity(
+                          network.decimals,
+                          token.name,
+                          destinationLanes[lane].rateLimiterConfig?.[inOutbound === LaneFilter.Inbound ? "in" : "out"]
+                        )}
+                      </td>
+                      <td>
+                        <RateTooltip
+                          destinationLane={destinationLanes[lane]}
+                          inOutbound={inOutbound}
+                          symbol={token.symbol}
+                          decimals={network.decimals}
+                        />
+                      </td>
+                      <td>{network.tokenPoolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"}</td>
+                      {/* <td>
+                      <span className="ccip-table__status">
+                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            d="M4.83329 8.49996L7.16663 10.8333L11.1666 5.83329M0.666626 8.49996C0.666626 10.4449 1.43925 12.3102 2.81451 13.6854C4.18978 15.0607 6.05504 15.8333 7.99996 15.8333C9.94489 15.8333 11.8102 15.0607 13.1854 13.6854C14.5607 12.3102 15.3333 10.4449 15.3333 8.49996C15.3333 6.55504 14.5607 4.68978 13.1854 3.31451C11.8102 1.93925 9.94489 1.16663 7.99996 1.16663C6.05504 1.16663 4.18978 1.93925 2.81451 3.31451C1.43925 4.68978 0.666626 6.55504 0.666626 8.49996Z"
+                            stroke="#267E46"
+                          />
+                        </svg>
+                        Operational
+                      </span>
+                    </td> */}
+                    </tr>
+                  )
+                })}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="ccip-table__notFound">
+          {laneRows?.filter(
+            ({ networkDetails }) => networkDetails && networkDetails.name.toLowerCase().includes(search.toLowerCase())
+          ).length === 0 && <>No lanes found</>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TokenDrawer

src/components/CCIP/Drawer/drawerStore.ts

@@ -0,0 +1,3 @@
+import { atom } from "nanostores"
+
+export const drawerContentStore = atom<(() => JSX.Element) | null>(null)

src/components/CCIP/Hero/Hero.css

@@ -1,9 +1,6 @@
 .ccip-hero {
   background-color: var(--gray-100);
-}
-
-.ccip-hero__grid {
-  width: 100vw;
+  border-bottom: 1px solid var(--gray-200);
 }
 
 .ccip-hero__heading {

src/components/CCIP/Hero/Hero.tsx

@@ -1,3 +1,4 @@
+import { Environment, LaneConfig } from "~/config/data/ccip"
 import Search from "../Search/Search"
 import "./Hero.css"
 
@@ -7,21 +8,36 @@ interface HeroProps {
     totalLanes: number
     totalTokens: number
     logo: string
+    chain: string
   }[]
   tokens: {
     name: string
     totalNetworks: number
     logo: string
   }[]
+  lanes: {
+    sourceNetwork: {
+      name: string
+      logo: string
+      key: string
+    }
+    destinationNetwork: {
+      name: string
+      logo: string
+      key: string
+      explorerUrl: string
+    }
+    lane: LaneConfig
+  }[]
+  environment: Environment
 }
 
-function Hero({ chains, tokens }: HeroProps) {
+function Hero({ chains, tokens, environment, lanes }: HeroProps) {
   return (
     <section className="ccip-hero">
-      <img src="/assets/ccip.png" alt="" className="ccip-hero__grid" />
       <div className="ccip-hero__content">
-        <h1 className="ccip-hero__heading">Networks & Tokens</h1>
-        <Search chains={chains} tokens={tokens} />
+        <h1 className="ccip-hero__heading">CCIP Directory</h1>
+        <Search chains={chains} tokens={tokens} environment={environment} lanes={lanes} />
       </div>
     </section>
   )

src/components/CCIP/Landing/NetworkGrid.css

@@ -0,0 +1,12 @@
+.networks__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-2x);
+}
+
+@media (min-width: 992px) {
+  .networks__grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-6x);
+  }
+}

src/components/CCIP/Landing/NetworkGrid.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react"
+import NetworkCard from "../Cards/NetworkCard"
+import SeeMore from "../SeeMore/SeeMore"
+import "./NetworkGrid.css"
+
+interface NetworkGridProps {
+  networks: {
+    name: string
+    totalLanes: number
+    totalTokens: number
+    logo: string
+    chain: string
+  }[]
+  environment: string
+}
+
+const BEFORE_SEE_MORE = 2 * 7 // Number of networks to show before the "See more" button, 2 rows x 8 items
+
+function NetworkGrid({ networks, environment }: NetworkGridProps) {
+  const [seeMore, setSeeMore] = useState(networks.length <= BEFORE_SEE_MORE)
+  return (
+    <>
+      <div className="networks__grid">
+        {networks.slice(0, seeMore ? networks.length : BEFORE_SEE_MORE).map((chain) => (
+          <a href={`/ccip/directory/${environment}/chain/${chain.chain}`} key={chain.chain}>
+            <NetworkCard
+              name={chain.name}
+              totalLanes={chain.totalLanes}
+              totalTokens={chain.totalTokens}
+              logo={chain.logo}
+              key={chain.chain}
+            />
+          </a>
+        ))}
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+    </>
+  )
+}
+
+export default NetworkGrid

src/components/CCIP/Landing/ccip-landing.astro

@@ -0,0 +1,111 @@
+---
+import CcipLayout from "~/layouts/CcipLayout.astro"
+import { getEntry } from "astro:content"
+import Hero from "~/components/CCIP/Hero/Hero"
+import {
+  Environment,
+  getAllNetworks,
+  getAllSupportedTokens,
+  getChainsOfToken,
+  getSearchLanes,
+  Version,
+} from "~/config/data/ccip"
+import { getTokenIconUrl } from "~/features/utils"
+import NetworkGrid from "./NetworkGrid"
+import TokenGrid from "../TokenGrid/TokenGrid"
+export type Props = {
+  environment: Environment
+}
+const { environment } = Astro.props as Props
+
+const entry = await getEntry("ccip", "index")
+const { headings } = await entry.render()
+const networks = getAllNetworks({ filter: environment })
+const supportedTokens = getAllSupportedTokens({
+  environment: environment,
+  version: Version.V1_2_0,
+})
+
+const tokens = Object.keys(supportedTokens).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
+
+const allTokens = tokens.map((token) => {
+  const logo = getTokenIconUrl(token) || ""
+  return {
+    name: token,
+    logo,
+    totalNetworks: getChainsOfToken({ token, filter: environment }).length,
+  }
+})
+
+const searchLanes = getSearchLanes({ environment })
+---
+
+<CcipLayout frontmatter={entry.data} {headings} environment={environment}>
+  <Hero chains={networks} tokens={allTokens} environment={environment} client:load lanes={searchLanes} />
+  <section class="layout">
+    <div>
+      <div class="ccip-heading">
+        <h2>Networks {environment} <span>({networks.length})</span></h2>
+      </div>
+      <NetworkGrid networks={networks} environment={environment} client:load />
+    </div>
+    <div>
+      <div class="ccip-heading">
+        <h2>Tokens <span>({allTokens.length})</span></h2>
+        <a class="button secondary" href="/ccip/concepts/cross-chain-tokens">Add my token</a>
+      </div>
+      <TokenGrid tokens={allTokens} environment={environment} client:load />
+    </div>
+  </section>
+</CcipLayout>
+
+<style>
+  .layout {
+    --gutter: var(--space-10x);
+    --doc-padding: var(--space-6x);
+    margin: var(--space-8x) auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gutter);
+    padding: var(--doc-padding);
+  }
+
+  .ccip-heading {
+    display: flex;
+    padding-bottom: var(--space-4x);
+    border-bottom: 1px solid var(--gray-200);
+    margin-bottom: var(--space-6x);
+    justify-content: space-between;
+  }
+
+  .layout h2 {
+    color: var(--gray-900);
+    font-size: 22px;
+    line-height: var(--space-10x);
+    margin-bottom: 0px;
+  }
+
+  .layout h2 span {
+    color: var(--gray-400);
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
+
+  @media (min-width: 50em) {
+    .layout {
+      max-width: min(calc(1440px - 2 * var(--space-16x)), calc(100% - 2 * var(--space-16x)));
+      padding: 0;
+    }
+  }
+
+  @media (min-width: 992px) {
+    .layout {
+      --doc-padding: var(--space-10x);
+      display: grid;
+      padding-top: var(--doc-padding);
+      padding-bottom: var(--doc-padding);
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-24x);
+    }
+  }
+</style>

src/components/CCIP/Search/Search.css

@@ -1,6 +1,6 @@
 .ccip-hero__search {
   background-color: white;
-  padding: var(--space-4x);
+  padding: 18px;
   display: flex;
   gap: var(--space-4x);
   width: 100%;
@@ -10,12 +10,25 @@
   position: relative;
 }
 
+.ccip-hero__search-overlay {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 3;
+}
+
 .ccip-hero__search.active {
   border-color: var(--gray-400);
+  z-index: 20;
 }
 
-.ccip-hero__search.small {
-  padding: var(--space-2x);
+.ccip-hero__search.open {
+  border-color: var(--gray-400);
+  z-index: 3;
 }
 
 .ccip-hero__search input {
@@ -24,6 +37,30 @@
   outline: none;
 }
 
+.ccip-hero__search input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  border-radius: 50em;
+  background: url(/assets/icons/close-small.svg) no-repeat 50% 50%;
+  background-size: contain;
+  opacity: 0;
+  pointer-events: none;
+}
+.ccip-hero__search input:focus::-webkit-search-cancel-button {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.ccip-hero__search-results__lane-images {
+  display: flex;
+  align-items: center;
+}
+
+.ccip-hero__search-results__lane-images img:nth-child(2) {
+  margin-left: -6px;
+}
+
 .ccip-hero__search-results {
   position: absolute;
   top: 110%;
@@ -33,9 +70,16 @@
   border: 1px solid var(--gray-400);
   border-radius: var(--space-1x);
   z-index: 1;
-  padding: var(--space-6x) var(--space-10x);
   max-height: 400px;
   overflow-y: auto;
+  font-style: normal;
+  font-weight: 600;
+  font-size: var(--space-4x);
+  color: #000000;
+}
+
+.ccip-hero__search-results a {
+  color: #000000;
 }
 
 .ccip-hero__search-results ul {
@@ -47,13 +91,30 @@
   display: flex;
   gap: var(--space-4x);
   align-items: center;
-  padding: var(--space-4x) 0;
+  padding-top: var(--space-3x);
+  padding-bottom: var(--space-3x);
   cursor: pointer;
+  padding-left: var(--space-6x);
+  padding-right: var(--space-6x);
+}
+
+.ccip-hero__search-results--small a {
+  padding-left: var(--space-6x) !important;
+  padding-right: var(--space-6x) !important;
+}
+
+.ccip-hero__search-results--small .ccip-hero__search-results__title {
+  padding-left: var(--space-6x) !important;
+  padding-right: var(--space-6x) !important;
+}
+
+.ccip-hero__search-results li:hover {
+  background-color: var(--gray-50);
 }
 
 .ccip-hero__search-results li img {
-  width: 40px;
-  height: 40px;
+  width: var(--space-6x);
+  height: var(--space-6x);
 }
 
 .ccip-hero__search-results li span {
@@ -62,9 +123,42 @@
   color: var(--gray-500);
 }
 
-.ccip-hero__search-results__title {
+.ccip-hero__search-results__title,
+.ccip-hero__search-results__no-result {
+  display: block;
   font-size: 18px;
   line-height: 24px;
   color: var(--gray-500);
-  margin-bottom: 1010px;
+  padding-left: var(--space-6x);
+  padding-right: var(--space-6x);
+  padding-top: var(--space-6x);
+}
+
+.ccip-hero__search-results__no-result {
+  padding-bottom: var(--space-6x);
+}
+
+@media (min-width: 992px) {
+  .ccip-hero__search.small {
+    padding: var(--space-2x);
+  }
+
+  .ccip-hero__search-results li a {
+    display: flex;
+    gap: var(--space-4x);
+    align-items: center;
+    padding-top: var(--space-3x);
+    padding-bottom: var(--space-3x);
+    cursor: pointer;
+    padding-left: var(--space-10x);
+    padding-right: var(--space-10x);
+  }
+
+  .ccip-hero__search-results__title,
+  .ccip-hero__search-results__no-result {
+    padding-left: var(--space-10x);
+    padding-right: var(--space-10x);
+    padding-top: var(--space-6x);
+    padding-bottom: var(--space-2x);
+  }
 }

src/components/CCIP/Search/Search.tsx

@@ -1,6 +1,11 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import "./Search.css"
 import { clsx } from "~/lib"
+import { useClickOutside } from "~/hooks/useClickOutside"
+import { Environment, LaneConfig, LaneFilter } from "~/config/data/ccip"
+import { directoryToSupportedChain, getExplorer } from "~/features/utils"
+import { drawerContentStore } from "../Drawer/drawerStore"
+import LaneDrawer from "../Drawer/LaneDrawer"
 
 interface SearchProps {
   chains: {
@@ -15,86 +20,178 @@ interface SearchProps {
     totalNetworks: number
     logo: string
   }[]
+  lanes: {
+    sourceNetwork: {
+      name: string
+      logo: string
+      key: string
+    }
+    destinationNetwork: {
+      name: string
+      logo: string
+      key: string
+      explorerUrl: string
+    }
+    lane: LaneConfig
+  }[]
   small?: boolean
+  environment: Environment
 }
 
-function Search({ chains, tokens, small }: SearchProps) {
+function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
   const [search, setSearch] = useState("")
+  const [openSearchMenu, setOpenSearchMenu] = useState(false)
   const [isActive, setIsActive] = useState(false)
   const [networksResults, setNetworksResults] = useState<SearchProps["chains"]>([])
   const [tokensResults, setTokensResults] = useState<SearchProps["tokens"]>([])
+  const [lanesResults, setLanesResults] = useState<SearchProps["lanes"]>([])
+  const searchRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (search) {
       const networks = chains.filter((chain) => chain.name.toLowerCase().includes(search.toLowerCase()))
       const tokensList = tokens.filter((token) => token.name.toLowerCase().includes(search.toLowerCase()))
-
+      const lanesList = lanes.filter(
+        (lane) =>
+          (lane.sourceNetwork.name.toLowerCase().includes(search.toLowerCase()) ||
+            lane.destinationNetwork.name.toLowerCase().includes(search.toLowerCase())) &&
+          (lane.lane.supportedTokens ? Object.keys(lane.lane.supportedTokens).length : 0) > 0
+      )
       setNetworksResults(networks)
       setTokensResults(tokensList)
+      setLanesResults(lanesList)
+      setOpenSearchMenu(true)
     } else {
       setNetworksResults([])
       setTokensResults([])
+      setLanesResults([])
+      setOpenSearchMenu(false)
     }
   }, [search, chains, tokens])
 
+  useClickOutside(searchRef, () => setOpenSearchMenu(false))
+
+  const generateExplorerUrl = (lane) => {
+    const directory = directoryToSupportedChain(lane.sourceNetwork.key)
+    return getExplorer(directory) || ""
+  }
   return (
-    <div
-      className={clsx("ccip-hero__search", {
-        active: isActive,
-        small: small || false,
-      })}
-    >
-      <img src="/assets/icons/search.svg" alt="" />
-      <input
-        type="search"
-        placeholder="Network/Token/Lane"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        onFocus={() => setIsActive(true)}
-        onBlur={() => setIsActive(false)}
-      />
-      {search && (
-        <div className="ccip-hero__search-results">
-          {networksResults.length === 0 && tokensResults.length === 0 && (
-            <span className="ccip-hero__search-results__title">No results found</span>
-          )}
-          {networksResults.length > 0 && (
-            <>
-              <span className="ccip-hero__search-results__title">Networks</span>
-              <ul aria-label="Networks">
-                {networksResults.map((network) => (
-                  <li key={network.name}>
-                    <a href={`/ccip/chain/${network.chain}`}>
-                      <img src={network.logo} alt="" />
-                      {network.name}
-                      <span>
-                        {network.totalLanes} lanes | {network.totalTokens} tokens
-                      </span>
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-          {tokensResults.length > 0 && (
-            <>
-              <span className="ccip-hero__search-results__title">Tokens</span>
-              <ul aria-label="Networks">
-                {tokensResults.map((token) => (
-                  <li key={token.name}>
-                    <a href="#">
-                      <img src={token.logo} alt="" />
-                      {token.name}
-                      <span>{token.totalNetworks} networks</span>
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-        </div>
-      )}
-    </div>
+    <>
+      {openSearchMenu && <div className="ccip-hero__search-overlay"></div>}
+      <div
+        className={clsx("ccip-hero__search", {
+          active: isActive,
+          small: small || false,
+          open: openSearchMenu,
+        })}
+        ref={searchRef}
+      >
+        <img src="/assets/icons/search.svg" alt="" />
+        <input
+          type="search"
+          placeholder="Network/Token/Lane"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          onFocus={() => setIsActive(true)}
+          onBlur={() => setIsActive(false)}
+        />
+        {openSearchMenu && (
+          <div
+            className={clsx("ccip-hero__search-results", {
+              "ccip-hero__search-results--small": small || false,
+            })}
+          >
+            {networksResults.length === 0 && tokensResults.length === 0 && (
+              <span className="ccip-hero__search-results__no-result">No results found</span>
+            )}
+            {networksResults.length > 0 && (
+              <>
+                <span className="ccip-hero__search-results__title">Networks</span>
+                <ul aria-label="Networks">
+                  {networksResults.map((network) => (
+                    <li key={network.name}>
+                      <a href={`/ccip/directory/${environment}/chain/${network.chain}`}>
+                        <img src={network.logo} alt="" />
+                        {network.name}
+                        {!small && (
+                          <span>
+                            {network.totalLanes} {network.totalLanes > 1 ? "lanes" : "lane"} | {network.totalTokens}{" "}
+                            {network.totalTokens > 1 ? "tokens" : "token"}
+                          </span>
+                        )}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+            {tokensResults.length > 0 && (
+              <>
+                <span className="ccip-hero__search-results__title">Tokens</span>
+                <ul aria-label="Networks">
+                  {tokensResults.map((token) => (
+                    <li key={token.name}>
+                      <a href={`/ccip/directory/${environment}/token/${token.name}`}>
+                        <img src={token.logo} alt="" />
+                        {token.name}
+                        {!small && (
+                          <span>
+                            {token.totalNetworks} {token.totalNetworks > 1 ? "networks" : "network"}
+                          </span>
+                        )}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+
+            {lanesResults.length > 0 && (
+              <>
+                <span className="ccip-hero__search-results__title">Lanes</span>
+                <ul aria-label="Networks">
+                  {lanesResults.map((lane) => (
+                    <li key={lane.sourceNetwork.name + lane.destinationNetwork.key}>
+                      <a
+                        role="button"
+                        onClick={() =>
+                          drawerContentStore.set(() => (
+                            <LaneDrawer
+                              environment={environment}
+                              lane={lane.lane}
+                              sourceNetwork={lane.sourceNetwork}
+                              destinationNetwork={{
+                                ...lane.destinationNetwork,
+                              }}
+                              inOutbound={LaneFilter.Outbound}
+                              explorerUrl={generateExplorerUrl(lane)}
+                            />
+                          ))
+                        }
+                      >
+                        <div className="ccip-hero__search-results__lane-images">
+                          <img src={lane.sourceNetwork.logo} alt="" />
+                          <img src={lane.destinationNetwork.logo} alt="" />
+                        </div>
+                        {lane.sourceNetwork.name} {">"} {lane.destinationNetwork.name}
+                        {!small && (
+                          <span>
+                            {lane?.lane?.supportedTokens ? Object.keys(lane.lane.supportedTokens).length : 0}{" "}
+                            {lane?.lane?.supportedTokens && Object.keys(lane.lane.supportedTokens).length > 1
+                              ? "tokens"
+                              : "token"}
+                          </span>
+                        )}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </>
   )
 }
 

src/components/CCIP/SeeMore/SeeMore.css

@@ -0,0 +1,12 @@
+.seeMore {
+  height: 22px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #2e7bff;
+  margin-top: var(--space-6x);
+}
+.seeMore__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/CCIP/SeeMore/SeeMore.tsx

@@ -0,0 +1,16 @@
+import "./SeeMore.css"
+interface SeeMoreProps {
+  onClick?: () => void
+}
+
+function SeeMore({ onClick }: SeeMoreProps) {
+  return (
+    <div className="seeMore__container">
+      <button className="seeMore" onClick={onClick}>
+        See more
+      </button>
+    </div>
+  )
+}
+
+export default SeeMore

src/components/CCIP/Tables/ChainTable.tsx

@@ -1,53 +1,170 @@
+import Address from "~/components/AddressReact"
 import "./Table.css"
+import Tabs from "./Tabs"
+import TableSearchInput from "./TableSearchInput"
+import { useEffect, useState } from "react"
+import { getExplorerAddressUrl } from "~/features/utils"
+import { drawerContentStore } from "../Drawer/drawerStore"
+import LaneDrawer from "../Drawer/LaneDrawer"
+import { Environment, Version } from "~/config/data/ccip/types"
+import { getLane, LaneFilter } from "~/config/data/ccip"
+import { SupportedChain } from "~/config"
+import { clsx } from "~/lib"
+import SeeMore from "../SeeMore/SeeMore"
+import { getOperationalState } from "~/config/data/ccip/data"
 
 interface TableProps {
-  networks: {
+  environment: Environment
+  sourceNetwork: { name: string; logo: string; key: string }
+  lanes: {
     name: string
-    key: string
     logo: string
-    onramp?: string
-    status: string
-    totalLanes: number
-    totalTokens: number
-    chain: string
+    onRamp?: {
+      address: string
+      version: string
+    }
+    offRamp?: {
+      address: string
+      version: string
+    }
+    key: string
+    directory: SupportedChain
   }[]
+  explorerUrl: string
 }
 
-function ChainTable({ networks }: TableProps) {
+const BEFORE_SEE_MORE = 12 // Number of networks to show before the "See more" button, 7 rows
+
+function ChainTable({ lanes, explorerUrl, 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 (
-    <table className="ccip-table">
-      <thead>
-        <tr>
-          <th>Destination network</th>
-          <th>OnRamp address</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        {networks?.map((network, index) => (
-          <tr key={index}>
-            <td>
-              <div className="ccip-table__network-name">
-                <img src={network.logo} alt={network.name} className="ccip-table__logo" />
-                {network.name}
-              </div>
-            </td>
-            <td>{network.onramp}0x1234567890</td>
-            <td>
-              <span className="ccip-table__status">
-                <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path
-                    d="M4.83329 8.49996L7.16663 10.8333L11.1666 5.83329M0.666626 8.49996C0.666626 10.4449 1.43925 12.3102 2.81451 13.6854C4.18978 15.0607 6.05504 15.8333 7.99996 15.8333C9.94489 15.8333 11.8102 15.0607 13.1854 13.6854C14.5607 12.3102 15.3333 10.4449 15.3333 8.49996C15.3333 6.55504 14.5607 4.68978 13.1854 3.31451C11.8102 1.93925 9.94489 1.16663 7.99996 1.16663C6.05504 1.16663 4.18978 1.93925 2.81451 3.31451C1.43925 4.68978 0.666626 6.55504 0.666626 8.49996Z"
-                    stroke="#267E46"
-                  />
-                </svg>
-                Operational
-              </span>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <>
+      <div className="ccip-table__filters">
+        <Tabs
+          tabs={[
+            {
+              name: "Outbound lanes",
+              key: LaneFilter.Outbound,
+            },
+            {
+              name: "Inbound lanes",
+              key: LaneFilter.Inbound,
+            },
+          ]}
+          onChange={(key) => setInOutbound(key as LaneFilter)}
+        />
+        <TableSearchInput search={search} setSearch={setSearch} />
+      </div>
+      <div className="ccip-table__wrapper">
+        <table className="ccip-table">
+          <thead>
+            <tr>
+              <th>{inOutbound === LaneFilter.Outbound ? "Destination" : "Source"} network</th>
+              <th>{inOutbound === LaneFilter.Outbound ? "OnRamp" : "OffRamp"} address</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {lanes
+              ?.filter((network) => network.name.toLowerCase().includes(search.toLowerCase()))
+              .slice(0, seeMore ? lanes.length : BEFORE_SEE_MORE)
+              .map((network, index) => (
+                <tr key={index}>
+                  <td>
+                    <div
+                      className="ccip-table__network-name"
+                      role="button"
+                      onClick={() => {
+                        const laneData = getLane({
+                          sourceChain: sourceNetwork.key as SupportedChain,
+                          destinationChain: network.key as SupportedChain,
+                          environment,
+                          version: Version.V1_2_0,
+                        })
+
+                        drawerContentStore.set(() => (
+                          <LaneDrawer
+                            environment={environment}
+                            lane={laneData}
+                            sourceNetwork={sourceNetwork}
+                            destinationNetwork={{
+                              name: network?.name || "",
+                              logo: network?.logo || "",
+                              key: network.key,
+                            }}
+                            inOutbound={inOutbound}
+                            explorerUrl={explorerUrl}
+                          />
+                        ))
+                      }}
+                    >
+                      <img src={network.logo} alt={network.name} className="ccip-table__logo" />
+                      {network.name}
+                    </div>
+                  </td>
+                  <td data-clipboard-type={inOutbound === LaneFilter.Outbound ? "onramp" : "offramp"}>
+                    <Address
+                      address={inOutbound === LaneFilter.Outbound ? network.onRamp?.address : network.offRamp?.address}
+                      endLength={4}
+                      contractUrl={getExplorerAddressUrl(explorerUrl)(
+                        (inOutbound === LaneFilter.Outbound ? network.onRamp?.address : network.offRamp?.address) || ""
+                      )}
+                    />
+                  </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>
+        </table>
+      </div>
+      {!seeMore && <SeeMore onClick={() => setSeeMore(!seeMore)} />}
+      <div className="ccip-table__notFound">
+        {lanes.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())).length === 0 && (
+          <>No lanes found</>
+        )}
+      </div>
+    </>
   )
 }