update

Author: aelmanaa

src/components/CCIP/ChainHero/ChainHero.css

@@ -168,3 +168,46 @@
     grid-column: 1 / -1; /* Span all columns */
   }
 }
+
+/* Pool Programs Styles */
+.ccip-chain-hero__pool-programs-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--space-3x);
+  width: 100%;
+}
+
+.ccip-chain-hero__pool-program-entry {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1x);
+  min-width: 0; /* Critical: allows flex children to shrink below content size */
+}
+
+.ccip-chain-hero__pool-program-type {
+  font-size: var(--font-size-s);
+  font-weight: normal;
+  color: var(--gray-700);
+  white-space: nowrap;
+  flex-shrink: 0; /* Prevent label from shrinking */
+}
+
+.ccip-chain-hero__pool-program-address {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1x);
+  min-width: 0; /* Allow address container to shrink */
+  flex: 1; /* Take remaining space */
+}
+
+/* Mobile responsive styles for pool programs */
+@media (max-width: 768px) {
+  .ccip-chain-hero__pool-programs-container {
+    grid-template-columns: 1fr; /* Single column on mobile */
+    gap: var(--space-2x);
+  }
+
+  .ccip-chain-hero__pool-program-entry {
+    width: 100%;
+  }
+}

src/components/CCIP/ChainHero/ChainHero.tsx

@@ -14,6 +14,7 @@ import {
 } from "~/features/utils/index.ts"
 import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
 import { getChainTooltip } from "../Tooltip/index.ts"
+import { PoolProgramTooltip } from "../Tooltip/PoolProgramTooltip.tsx"
 import { ExplorerInfo, ChainType } from "@config/types.ts"
 
 interface ChainHeroProps {
@@ -319,6 +320,39 @@ function ChainHero({ chains, tokens, network, token, environment, lanes }: Chain
               </div>
             )}
 
+            {network.chainType === "solana" && network.poolPrograms && (
+              <div className="ccip-chain-hero__details__item">
+                <div className="ccip-chain-hero__details__label">
+                  Self-service pool programs
+                  <PoolProgramTooltip />
+                </div>
+                <div className="ccip-chain-hero__details__value ccip-chain-hero__pool-programs-container">
+                  {network.poolPrograms.BurnMintTokenPool && (
+                    <div className="ccip-chain-hero__pool-program-entry">
+                      <span className="ccip-chain-hero__pool-program-type">BurnMint:</span>
+                      <Address
+                        endLength={4}
+                        contractUrl={getExplorerAddressUrl(network.explorer)(network.poolPrograms.BurnMintTokenPool)}
+                        address={network.poolPrograms.BurnMintTokenPool}
+                      />
+                    </div>
+                  )}
+                  {network.poolPrograms.LockReleaseTokenPool && (
+                    <div className="ccip-chain-hero__pool-program-entry">
+                      <span className="ccip-chain-hero__pool-program-type">LockRelease:</span>
+                      <Address
+                        endLength={4}
+                        contractUrl={getExplorerAddressUrl(network.explorer)(
+                          network.poolPrograms.LockReleaseTokenPool
+                        )}
+                        address={network.poolPrograms.LockReleaseTokenPool}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
             {/* Start of new Fee Tokens Group */}
             {network &&
               ((feeTokensWithAddress && feeTokensWithAddress.length > 0) ||

src/components/CCIP/Tooltip/PoolProgramTooltip.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Tooltip } from "~/features/common/Tooltip/Tooltip.tsx"
+
+export const PoolProgramTooltip: React.FC = () => (
+  <Tooltip
+    label=""
+    tip={
+      <div>
+        Official Chainlink self-service pool programs for initializing token pools on Solana.
+        <ul style={{ margin: "8px 0", paddingLeft: "20px" }}>
+          <li>
+            <strong>BurnMint:</strong> Burns tokens on outbound transfers, mints tokens on inbound transfers
+          </li>
+          <li>
+            <strong>LockRelease:</strong> Locks tokens on outbound transfers, releases tokens on inbound transfers
+          </li>
+        </ul>
+        For hands-on tutorial, see{" "}
+        <a href="/ccip/tutorials/svm/cross-chain-tokens" style={{ color: "var(--blue-500)" }}>
+          Cross-Chain Tokens on Solana
+        </a>
+        .
+      </div>
+    }
+    labelStyle={{
+      marginRight: "8px",
+    }}
+    style={{
+      display: "inline-block",
+      verticalAlign: "middle",
+      marginBottom: "2px",
+      marginLeft: "4px",
+    }}
+    hoverable={true}
+    hideDelay={300}
+  />
+)

src/config/data/ccip/data.ts

@@ -449,6 +449,7 @@ export const getAllNetworks = ({ filter }: { filter: Environment }): Network[] =
       armProxy: chains[chain].armProxy,
       feeQuoter: chainType === "solana" ? chains[chain]?.feeQuoter : undefined,
       rmnPermeable: chains[chain]?.rmnPermeable,
+      poolPrograms: chainType === "solana" ? chains[chain]?.poolPrograms : undefined,
     })
   }
 

src/config/data/ccip/types.ts

@@ -77,6 +77,11 @@ export type ChainConfig = {
     symbol: string
     logo: string
   }
+  poolPrograms?: {
+    BurnMintTokenPool?: string
+    LockReleaseTokenPool?: string
+    CCTPTokenPool?: string
+  }
 }
 
 export type ChainsConfig = {
@@ -194,6 +199,11 @@ export interface Network {
   routerExplorerUrl: string
   feeQuoter?: string
   rmnPermeable: boolean
+  poolPrograms?: {
+    BurnMintTokenPool?: string
+    LockReleaseTokenPool?: string
+    CCTPTokenPool?: string
+  }
 }
 
 export type DecomConfig = {