diff --git a/src/components/Cards/cards.module.css b/src/components/Cards/cards.module.css index ac19502528d..ea602f47b0b 100644 --- a/src/components/Cards/cards.module.css +++ b/src/components/Cards/cards.module.css @@ -3,6 +3,7 @@ grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--border); border-top: 1px solid var(--border); + margin: 56px 0; } .cardsWrapper h6 { diff --git a/src/components/MediaSection/MediaSection.astro b/src/components/MediaSection/MediaSection.astro index 79fc38d8472..6189f9326e7 100644 --- a/src/components/MediaSection/MediaSection.astro +++ b/src/components/MediaSection/MediaSection.astro @@ -14,7 +14,12 @@ const { heading, description, image, video } = Astro.props
- {heading} + {heading} {description} diff --git a/src/components/PageContent/PageContent.astro b/src/components/PageContent/PageContent.astro index 104d4999267..e29180351b4 100644 --- a/src/components/PageContent/PageContent.astro +++ b/src/components/PageContent/PageContent.astro @@ -3,197 +3,222 @@ import { MarkdownHeading } from "astro" export type Props = { titleHeading: MarkdownHeading + disableDefaultStyles?: boolean + hideTitle?: boolean } -const { titleHeading } = Astro.props +const { titleHeading, disableDefaultStyles, hideTitle } = Astro.props --- -
-

{titleHeading.text}

+
+

{titleHeading.text}

diff --git a/src/components/QuickLinkCard/QuickLinkCard.astro b/src/components/QuickLinkCard/QuickLinkCard.astro index 19cad2f0bc1..e4e13bc9e71 100644 --- a/src/components/QuickLinkCard/QuickLinkCard.astro +++ b/src/components/QuickLinkCard/QuickLinkCard.astro @@ -1,10 +1,9 @@ --- import { Typography } from "@chainlink/blocks" -import type { ComponentType } from "astro/dist/runtime/server" import styles from "./QuickLinkCard.module.css" interface Link { - icon: ComponentType + icon: any label: string link: string } diff --git a/src/components/QuickLinkCard/QuickLinkCard.module.css b/src/components/QuickLinkCard/QuickLinkCard.module.css index 45a4ab3933a..cfb8562b389 100644 --- a/src/components/QuickLinkCard/QuickLinkCard.module.css +++ b/src/components/QuickLinkCard/QuickLinkCard.module.css @@ -30,13 +30,6 @@ min-width: 0; } -.title { - font-size: 2rem; - font-weight: 700; - margin: 0 0 2rem 0; - color: #1a1a1a; -} - .linksGrid { display: grid; grid-template-columns: 1fr; diff --git a/src/components/TabGrid/TabGrid.module.css b/src/components/TabGrid/TabGrid.module.css index d20535265a2..8b0df827fee 100644 --- a/src/components/TabGrid/TabGrid.module.css +++ b/src/components/TabGrid/TabGrid.module.css @@ -1,3 +1,6 @@ +.tabGridWrapper { + margin: 56px 0; +} .grid { display: grid; border-left: 1px solid var(--border); diff --git a/src/components/TabGrid/TabGrid.tsx b/src/components/TabGrid/TabGrid.tsx index ab4962bc6e8..5b73bcdd43b 100644 --- a/src/components/TabGrid/TabGrid.tsx +++ b/src/components/TabGrid/TabGrid.tsx @@ -16,7 +16,7 @@ interface TabGridProps { export const TabGrid = ({ tabs, header, columns = 3 }: TabGridProps) => { return ( - +
> = { section: "Chainlink CCIP", contents: [ { - title: "About CCIP", + title: "Overview", url: "ccip", }, { diff --git a/src/content.config.ts b/src/content.config.ts index 1c3604bf7e4..40a9635c376 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -58,6 +58,8 @@ const baseFrontmatter = z whatsnext: z.record(z.string(), z.string()).optional(), isMdx: z.boolean().optional(), isIndex: z.boolean().optional(), + disableDefaultStyles: z.boolean().optional(), + hideTitle: z.boolean().optional(), metadata, datafeedtype: z.string().optional(), fileExtension: z.string().optional(), diff --git a/src/content/ccip/index.mdx b/src/content/ccip/index.mdx index 6fc9aa3db25..da23f249706 100644 --- a/src/content/ccip/index.mdx +++ b/src/content/ccip/index.mdx @@ -8,95 +8,299 @@ metadata: datePublished: "2023-08-03" lastModified: "2025-05-19" isIndex: true -whatsnext: - "Complete the Getting Started guide to learn the basics": "/ccip/getting-started" - "CCIP Directory": "/ccip/directory" - "Learn how to transfer tokens": "/ccip/tutorials/evm/transfer-tokens-from-contract" - "Learn more about CCIP architecture": "/ccip/concepts/architecture" +disableDefaultStyles: true +hideTitle: true --- -import { ClickToZoom, Aside } from "@components" -import CcipCommon from "@features/ccip/CcipCommon.astro" - - - -Blockchain interoperability protocols are important for the Web3 ecosystem and traditional systems that need to interact with different blockchains. These protocols are the foundation for building blockchain abstraction layers, allowing traditional backends and dApps to interact with any blockchain network through a single middleware solution. Without a blockchain interoperability protocol, Web2 systems and dApps would need to build separate in-house implementations for each cross-chain interaction that they want to use, which is a time-consuming, resource-intensive, and complex process. - -Blockchain interoperability protocols provide the following capabilities: - -- You can transfer assets and information across multiple blockchains. -- Application developers can leverage the strengths and benefits of different chains. -- Collaboration between developers from diverse blockchain ecosystems enables the building of cross-chain applications to serve more users and provide additional features or products for them. - -The _Chainlink Cross-Chain Interoperability Protocol (CCIP)_ provides these capabilities and enables a variety of [use cases](#common-use-cases). - -## What is Chainlink CCIP? - -Chainlink CCIP is a blockchain interoperability protocol that enables developers to build secure applications that can transfer tokens, messages (data), or both tokens and messages across chains. - -Given the [inherent risks of cross-chain interoperability](/resources/bridge-risks), CCIP features [defense-in-depth security](https://blog.chain.link/five-levels-cross-chain-security/#level_5__defense-in-depth) and is powered by Chainlink's industry-standard oracle networks which have a proven track record of securing tens of billions of dollars and enabling over $14 trillion in onchain transaction value. - -CCIP provides several key security benefits: - -- Multiple independent nodes run by independent key holders. -- Three decentralized networks all executing and verifying every cross-chain transaction. -- Separation of responsibilities, with distinct sets of node operators, and with no nodes shared between the transactional DONs and the [Risk Management Network](/ccip/concepts/architecture/key-concepts#risk-management-network). -- Increased decentralization with two separate code bases across two different implementations, written in two different languages to create a previously unseen diversity of software clients in the cross-chain world. -- Novel risk management system with [level-5 security](https://blog.chain.link/five-levels-cross-chain-security/#level_5__defense-in-depth) that can be rapidly adapted to any new risks or attacks that appear in cross-chain messaging. - - -To understand how Chainlink CCIP works, refer to the [architecture](/ccip/concepts/architecture) section. If you are new to using Chainlink CCIP, read these guides before you deploy any contracts that use CCIP. - -## Chainlink CCIP core capabilities - -Chainlink CCIP supports three main capabilities: - -### Arbitrary Messaging - -The ability to send arbitrary data (encoded as bytes) to a receiving smart contract on a different blockchain. The developer is free to encode any data they wish to send. - -Typically, developers use arbitrary messaging to trigger an informed action on the receiving smart contract, such as rebalancing an index, minting a specific NFT, or calling an arbitrary function with the sent data as custom parameters. Developers can encode multiple instructions in a single message, enabling them to orchestrate complex, multi-step, multi-chain tasks. + -### Token Transfer - -The ability to transfer tokens to an account on a different blockchain. This capability enables the seamless movement of assets across chains. - -### Programmable Token Transfer - -The ability to simultaneously transfer tokens and arbitrary data (encoded as bytes) within a single transaction. This mechanism allows users to transfer tokens and send instructions on what to do with those tokens. - -For example, a user could transfer tokens to a lending protocol with instructions to leverage those tokens as collateral for a loan, borrowing another asset to be sent back to the user. - -### Receiving account types - -With CCIP, you send transactions with data (arbitrary messaging), tokens, or both data and tokens (programmable token transfer). The receiver of a CCIP transaction varies by blockchain family: - -| CCIP capability | What is sent | Receiving account types | -| --------------------------- | --------------- | --------------------------------------------------------------------------------------- | -| Arbitrary Messaging | Data | EVM: Smart contracts only
SVM: Programs only | -| Token Transfer | Tokens | EVM: Smart contracts and EOAs
SVM: User wallets or program-controlled PDAs | -| Programmable Token Transfer | Data and tokens | EVM: Smart contracts only
SVM: Data to programs, tokens to program-controlled PDAs | - -**Note**: On EVM chains, EOAs cannot receive messages. On Solana (SVM), programs work with Program Derived Addresses (PDAs) to manage token reception. - -## Common use cases - -Chainlink CCIP enables a variety of use cases: - -- **Cross-chain lending:** Chainlink CCIP enables users to lend and borrow a wide range of crypto assets across multiple DeFi platforms running on independent chains. -- **Low-cost transaction computation:** Chainlink CCIP can help offload the computation of transaction data on cost-optimized chains. -- **Optimizing cross-chain yield:** Users can leverage Chainlink CCIP to move collateral to new DeFi protocols to maximize yield across chains. -- **Creating new kinds of dApps:** Chainlink CCIP enables users to take advantage of network effects on certain chains while harnessing compute and storage capabilities of other chains. - -Read [What Are Cross-Chain Smart Contracts](https://chain.link/education-hub/cross-chain-smart-contracts) to learn about cross-chain smart contracts and examples of use cases they enable. - -## CCIP Directory - -See the [CCIP Directory](/ccip/directory) page for a list of supported networks, tokens, and contract addresses. - -To learn about tokens, token pools, and the token onboarding process, see the [CCIP Architecture](/ccip/concepts/cross-chain-token/evm/token-pools) page. + + + + + diff --git a/src/layouts/DocsV3Layout/DocsV3Layout.astro b/src/layouts/DocsV3Layout/DocsV3Layout.astro index 98a6989283e..3e752a738af 100644 --- a/src/layouts/DocsV3Layout/DocsV3Layout.astro +++ b/src/layouts/DocsV3Layout/DocsV3Layout.astro @@ -6,21 +6,6 @@ import { BaseFrontmatter } from "~/content.config" import * as CONFIG from "~/config" import LeftSidebar from "~/components/LeftSidebar/LeftSidebar.astro" import PageContent from "~/components/PageContent/PageContent.astro" -import { TabGrid } from "~/components/TabGrid/TabGrid" - -import ToolsUtilitiesGrid from "~/components/ToolsUtilitiesGrid/ToolsUtilitiesGrid.astro" -import LayoutHero from "~/components/LayoutHero/LayoutHero.astro" -import ResourceSection from "~/components/Resource/ResourceSection.astro" -import MediaSection from "~/components/MediaSection/MediaSection.astro" -import QuickLinkCard from "~/components/QuickLinkCard/QuickLinkCard.astro" -import { - SvgBulletList, - SvgCrossChain, - SvgEyeOptic, - SvgStartup, - SvgTransactionRepeatRecurring, - SvgWaveSignal, -} from "@chainlink/blocks" interface Props { frontmatter: BaseFrontmatter @@ -42,214 +27,6 @@ const formattedContentTitle = `${frontmatter.title} | ${CONFIG.SITE.title}` const currentPage = new URL(Astro.request.url).pathname const includeLinkToWalletScript = !!Astro.props.frontmatter.metadata?.linkToWallet - -const toolsAndUtilities = [ - { - image: "ccip-logo.svg", - imageAlt: "CCIP API icon", - label: "CCIP API", - link: "/ccip/api", - description: "An API for message retrieval and lane latency information.", - }, - { - image: "js-logo.svg", - imageAlt: "JavaScript SDK icon", - label: "Javascript SDK", - link: "https://github.com/smartcontractkit/ccip-javascript-sdk", - description: "Integrate CCIP functionality directly into your web applications for EVM-compatible chains.", - }, - { - image: "ts-logo.svg", - imageAlt: "CLI icon", - label: "CLI", - link: "https://github.com/smartcontractkit/ccip-tools-ts", - description: "TypeScript command-line interface and library designed for interacting with deployed CCIP contracts.", - }, - { - image: "hardhat-logo.svg", - imageAlt: "Hardhat icon", - label: "Hardhat Starter Kit", - link: "https://github.com/smartcontractkit/hardhat-starter-kit", - description: - "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Hardhat.", - }, - { - image: "foundry-logo.svg", - imageAlt: "Foundry icon", - label: "Foundry Starter Kit", - link: "https://github.com/smartcontractkit/foundry-starter-kit", - description: - "Ready-to-go boilerplate for basic CCIP use cases that help you get started building quickly with Foundry.", - }, - { - image: "npm-logo.png", - imageAlt: "NPM icon", - label: "CCIP Contracts NPM", - link: "https://www.npmjs.com/package/@chainlink/contracts-ccip", - description: - "An npm package providing Solidity smart contract implementations to integrate CCIP into your EVM-based project.", - }, - { - image: "direct-stacking-logo.svg", - imageAlt: "Direct Staking icon", - label: "Direct Staking", - link: "https://github.com/Aphyla/chainlink-csr", - description: - "Stake native tokens on supported L2 networks and receive liquid staked tokens directly on the same chain.", - }, -] -// Example resources data -const exampleResources = [ - { - label: "Token Pool Types", - description: - "Explore the various token pool types supported by the Cross-Chain Token (CCT) standard with Chainlink Labs. Explore the various token pool types supported by the Cross-Chain Token (CCT) standard with Chainlink Labs...", - link: "/resources/token-pool-types", - type: "article", - }, - { - label: "Token Pool Types", - description: - "Explore the various token pool types supported by the Cross-Chain Token (CCT) standard with Chainlink Labs. Explore the various token pool types supported by the Cross-Chain Token (CCT) standard with Chainlink Labs...", - link: "/resources/token-pool-types", - type: "article", - }, - { - label: "Token Pool Types", - description: - "Explore the various token pool types supported by the Cross-Chain Token (CCT) standard with Chainlink Labs. Explore the various token pool types supported by the Cross-Chain Token (CCT) standard with Chainlink Labs...", - link: "/resources/token-pool-types", - type: "article", - }, -] - -// Example tutorial data -const exampleTutorials = [ - { - name: "EVM", - links: [ - { - title: "Acquire Test Tokens", - description: "Get test tokens in minutes; build and test cross-chain apps with zero friction.", - link: "/tutorials/acquire-test-tokens", - }, - { - title: "Transfer Tokens", - description: "Unlock seamless token transfers from contracts; learn, code, and deploy.", - link: "/tutorials/transfer-tokens", - }, - { - title: "Transfer Tokens with Data", - description: "Go beyond basic transfers with logic-infused token movements in your EVM contracts.", - link: "/tutorials/transfer-tokens-data", - }, - { - title: "Using the Token Manager", - description: "Effortlessly manage CCTs by tracking, importing and organizing tokens from your dashboard.", - link: "/tutorials/token-manager", - }, - { - title: "Using the JS SDK", - description: "Integrate CCIP in your frontend or backend effortlessly with JavaScript SDK.", - link: "/tutorials/js-sdk", - }, - { - title: "Check Message Status", - description: "Retrieve real-time status of your offchain transaction from EVM.", - link: "/tutorials/check-message-status", - }, - { - title: "Transfer Tokens Between EOAs", - description: "Send tokens offchain from an Externally Owned Account with clear steps.", - link: "/tutorials/transfer-tokens-eoa", - }, - { - title: "Using the CLI", - description: "Use offchain tools from CCIP to simplify your Ethereum workflows.", - link: "/tutorials/cli", - }, - { - title: "Deploy and Register a CCT", - description: "Use RemixIDE to launch and configure tokens for cross-chain transfers on CCIP.", - link: "/tutorials/deploy-register-cct", - }, - { - title: "Register CCT Burn & Mint EOA", - description: "Implement burn-mint cross-chain token logic with CCIP using Hardhat or Foundry.", - link: "/tutorials/register-cct-burn-mint", - }, - { - title: "Register CCT Lock & Mint EOA", - description: "Implement a lock-mint token registration workflow with CCIP and Hardhat or Foundry.", - link: "/tutorials/register-cct-lock-mint", - }, - { - title: "Set Token Pool Rate Limits", - description: "Update rate limiter settings for your cross-chain tokens using Hardhat or Foundry.", - link: "/tutorials/token-pool-rate-limits", - }, - ], - }, - { - name: "Solana", - links: [ - { - title: "Getting Started with Solana", - description: "Learn the basics of building on Solana blockchain.", - link: "/tutorials/solana-getting-started", - }, - { - title: "Solana Token Transfers", - description: "Transfer tokens on the Solana blockchain.", - link: "/tutorials/solana-transfers", - }, - ], - }, - { - name: "Aptos", - links: [ - { - title: "Getting Started with Aptos", - description: "Start building on the Aptos blockchain.", - link: "/tutorials/aptos-getting-started", - }, - ], - }, -] - -// Quick links data -const quickLinks = [ - { - icon: SvgEyeOptic, - label: "View Network Configs", - link: "https://docs.chain.link/ccip/directory/mainnet", - }, - { - icon: SvgTransactionRepeatRecurring, - label: "Check Transaction Status", - link: "https://ccip.chain.link/", - }, - { - icon: SvgWaveSignal, - label: "View Lane Status", - link: "https://ccip.chain.link/status", - }, - { - icon: SvgStartup, - label: "Get Testnet Tokens", - link: "https://tokenmanager.chain.link/", - }, - { - icon: SvgCrossChain, - label: "Convert Chainlink tokens", - link: "https://www.transporter.io/", - }, - { - icon: SvgBulletList, - label: "View the Changelog", - link: "https://dev.chain.link/changelog?product=CCIP", - }, -] --- @@ -262,27 +39,11 @@ const quickLinks = [
- - - - - - - - - +
diff --git a/src/pages/index.astro b/src/pages/index.astro index dabe7c18616..0c9d1812721 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -64,7 +64,6 @@ const sample: ICard[] = [

Chainlink Developer Docs

What are you building?

-