Add CCIP TON

public/changelog.json

@@ -398,6 +398,26 @@
     }
   },
   "data": [
+    {
+      "category": "integration",
+      "date": "2025-04-10",
+      "description": "- This release continues CCIP's expansion to non-EVMs by adding support for the TON blockchain. \n - TON is now interoperable with several EVM chains including Ethereum and Arbitrum, using the latest [CCIP architecture](https://docs.chain.link/ccip/concepts/architecture). \n - More lanes to and from TON will be added in the future. \n - No change to any existing EVM Router addresses. \n - TON CCIP details can be seen on the [CCIP Directory](https://docs.chain.link/ccip/directory).",
+      "newNetworks": [
+        {
+          "displayName": "TON Mainnet",
+          "network": "ton",
+          "url": "https://docs.chain.link/ccip/directory/mainnet/chain/ton-mainnet"
+        },
+        {
+          "displayName": "TON Testnet",
+          "network": "ton",
+          "url": "https://docs.chain.link/ccip/directory/testnet/chain/ton-testnet"
+        }
+      ],
+      "relatedNetworks": ["ton"],
+      "title": "CCIP on TON",
+      "topic": "CCIP"
+    },
     {
       "category": "integration",
       "date": "2026-04-09",

src/components/VersionSelector/base/VersionSelector.astro

@@ -17,13 +17,13 @@ const { product, currentPath, enableEnhanced = true } = Astro.props
 
 // Support multiple path patterns for version detection
 const standardPathMatch = currentPath.match(new RegExp(`/${product}/api-reference/(v[^/]+)`))
-const extendedPathMatch = currentPath.match(new RegExp(`/${product}/api-reference/(?:evm|svm|aptos)/(v[^/]+)`))
+const extendedPathMatch = currentPath.match(new RegExp(`/${product}/api-reference/(?:evm|svm|aptos|ton)/(v[^/]+)`))
 let pathVersion = extendedPathMatch?.[1] || standardPathMatch?.[1]
 
 // Extract VM type from the path (for CCIP)
 let vmType: string | undefined = undefined
 if (extendedPathMatch) {
-  const vmTypeMatch = currentPath.match(new RegExp(`/${product}/api-reference/(evm|svm|aptos)/`))
+  const vmTypeMatch = currentPath.match(new RegExp(`/${product}/api-reference/(evm|svm|aptos|ton)/`))
   vmType = vmTypeMatch?.[1]
 }
 

src/components/VersionSelector/base/VersionSelectorClient.tsx

@@ -104,7 +104,7 @@ export const VersionSelectorClient = <T extends string>({
         // 2. Extended: /{product}/api-reference/{vm_type}/v{version}/{page}
         const standardPathMatch = currentPath.match(new RegExp(`/${config.product.name}/api-reference/v[^/]+/(.+?)/?$`))
         const extendedPathMatch = currentPath.match(
-          new RegExp(`/${config.product.name}/api-reference/(?:evm|svm|aptos)/v[^/]+/(.+?)/?$`)
+          new RegExp(`/${config.product.name}/api-reference/(?:evm|svm|aptos|ton)/v[^/]+/(.+?)/?$`)
         )
 
         const pagePath = extendedPathMatch?.[1] || standardPathMatch?.[1]

src/components/VersionSelector/base/VersionSelectorHead.astro

@@ -33,7 +33,9 @@ const {
 // Extract page path to check availability
 // Support both path patterns
 const standardPageMatch = currentPath.match(new RegExp(`/${product}/api-reference/v[^/]+/(.+?)/?$`))
-const extendedPageMatch = currentPath.match(new RegExp(`/${product}/api-reference/(?:evm|svm|aptos)/v[^/]+/(.+?)/?$`))
+const extendedPageMatch = currentPath.match(
+  new RegExp(`/${product}/api-reference/(?:evm|svm|aptos|ton)/v[^/]+/(.+?)/?$`)
+)
 const pagePath = extendedPageMatch?.[1] || standardPageMatch?.[1] || null
 const productAvailability = PAGE_AVAILABILITY[product]
 

src/components/github-card/GitHubCard.module.css

@@ -0,0 +1,94 @@
+.card {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3x);
+  padding: var(--space-4x);
+  min-height: 96px;
+  border-radius: 10px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.card:hover {
+  background: var(--theme-bg-hover);
+  border-color: var(--gray-300);
+  box-shadow:
+    0 2px 6px rgba(0, 0, 0, 0.06),
+    0 6px 20px rgba(0, 0, 0, 0.04);
+  transform: translateY(-1px);
+}
+
+.card:focus-visible {
+  outline: 2px solid var(--theme-accent);
+  outline-offset: 2px;
+}
+
+.icon {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  border: 1px solid var(--gray-200);
+  background: var(--gray-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon > :global(svg),
+.icon > :global(img) {
+  width: 22px;
+  height: 22px;
+  display: block;
+}
+
+.icon > :global(img) {
+  border-radius: 999px;
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1x);
+}
+
+.title {
+  font-size: 16px;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-heading);
+  line-height: 1.4;
+  padding-bottom: 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+  padding-bottom: 1px;
+}
+
+.arrow {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  transition:
+    transform 0.15s ease,
+    color 0.15s ease;
+}
+
+.card:hover .arrow,
+.card:focus-visible .arrow {
+  transform: translateX(3px);
+  color: var(--color-text-primary);
+}

src/components/github-card/GitHubCard.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react"
+import styles from "./GitHubCard.module.css"
+import { clsx } from "~/lib/clsx/clsx.ts"
+import { cardIcons, type CardIconName } from "./icons/index.js"
+
+type GitHubCardProps = {
+  title: string
+  href: string
+  icon?: ReactNode
+  iconName?: CardIconName | string
+  children?: ReactNode
+  className?: string
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className">
+
+export function GitHubCard({ title, href, icon, iconName, children, className, ...props }: GitHubCardProps) {
+  const iconFromName = iconName ? cardIcons[iconName as CardIconName] : undefined
+  const resolvedIcon = icon ?? (iconFromName ? <img src={iconFromName.src} alt="" aria-hidden="true" /> : null)
+
+  return (
+    <a href={href} className={clsx(styles.card, className)} {...props}>
+      {resolvedIcon ? <span className={styles.icon}>{resolvedIcon}</span> : null}
+      <span className={styles.content}>
+        <span className={styles.title} title={title}>
+          {title}
+        </span>
+        {children ? <span className={styles.description}>{children}</span> : null}
+      </span>
+      <span className={styles.arrow} aria-hidden="true">
+        →
+      </span>
+    </a>
+  )
+}

src/components/github-card/icons/index.ts

@@ -0,0 +1,7 @@
+import githubSvgCard from "./github-svg-card.svg"
+
+export const cardIcons = {
+  "github-svg-card": githubSvgCard,
+} as const
+
+export type CardIconName = keyof typeof cardIcons

src/components/github-card/index.ts

@@ -0,0 +1,3 @@
+export { GitHubCard } from "./GitHubCard.tsx"
+export { cardIcons } from "./icons/index.js"
+export type { CardIconName } from "./icons/index.js"

src/components/index.ts

@@ -22,3 +22,4 @@ export { default as SideBySideCode } from "./SideBySideCode/SideBySideCode.astro
 export { default as CodeHighlightBlock } from "./CodeHighlightBlock/CodeHighlightBlock.astro"
 export { default as CodeHighlightBlockMulti } from "./CodeHighlightBlockMulti/CodeHighlightBlockMulti.astro"
 export { Callout } from "./Callout/Callout.tsx"
+export { GitHubCard } from "./github-card/index.ts"

src/config/chainTypes.ts

@@ -84,9 +84,9 @@ export const CHAIN_TYPE_CONFIGS: Record<ChainType, ChainTypeConfig> = {
 
 /**
  * Chain types supported in CCIP
- * Currently: EVM, Solana, Aptos
+ * Currently: EVM, Solana, Aptos, TON
  */
-export const CCIP_SUPPORTED_CHAINS: ChainType[] = ["evm", "solana", "aptos"]
+export const CCIP_SUPPORTED_CHAINS: ChainType[] = ["evm", "solana", "aptos", "ton"]
 
 /**
  * Sections that support chain type filtering (OPT-IN)