+ {options.map((option, idx) => (
+
+ ))}
+
+ )
+
+ return createPortal(dropdown, document.body)
+ }
+
+ return (
+
+
+
+ {renderDropdown()}
+
+ )
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
new file mode 100644
index 00000000000..6f9a99f0679
--- /dev/null
+++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.module.css
@@ -0,0 +1,322 @@
+/* Base Container */
+.builder {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3x);
+ background: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ width: 100%;
+ padding: var(--space-3x);
+}
+
+.configSection {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3x);
+ width: 100%;
+}
+
+/* Container Styles - Use CSS Grid for better responsiveness */
+.remoteConfig,
+.rateLimits {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3x);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ background: var(--color-background-secondary);
+}
+
+/* Grid Layouts - More flexible approach */
+.field {
+ display: grid;
+ grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
+ align-items: center;
+ gap: var(--space-3x);
+ min-width: 0;
+ width: 100%;
+}
+
+/* Input Elements */
+.input input,
+.rateLimiter {
+ background: var(--color-background);
+ padding: var(--space-2x) var(--space-3x);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+}
+
+.input input {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-base);
+ display: block;
+ width: 100%;
+}
+
+/* Section Spacing */
+.rateLimits,
+.parameterDetails,
+.copyBlock {
+ margin-top: 0;
+}
+
+/* Rate Limiter Layout - More adaptive */
+.rateLimiterGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ margin-top: 0.5rem;
+}
+
+.rateLimiter {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3x);
+ background: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+}
+
+.rateLimiterHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: var(--space-2x);
+}
+
+.rateLimiterHeader h5,
+.rateLimiterHeader span {
+ font-size: var(--font-size-base);
+ font-weight: normal;
+ color: var(--color-text);
+ margin: 0;
+ white-space: nowrap;
+}
+
+.rateLimiterInputs {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem;
+ background: var(--color-background-secondary);
+ border-radius: 8px;
+}
+
+/* Interactive Elements */
+.toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-2x);
+ white-space: nowrap;
+}
+
+/* Parameter Description */
+.parameterDetails {
+ border-left: 3px solid var(--color-accent);
+ padding-left: var(--space-3x);
+ margin: var(--space-2x) 0;
+ color: var(--color-text-secondary);
+}
+
+/* Notice - Use semantic colors */
+.notice {
+ margin-top: 16px;
+ padding: 16px;
+ border-radius: 12px;
+ background: var(--color-background-secondary);
+ border: 1px solid var(--color-border);
+ animation: slideIn 0.2s ease;
+}
+
+.noticeHeader {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.noticeIcon {
+ font-size: 16px;
+}
+
+.noticeTitle {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.noticeContent {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.noticeItem {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ color: var(--color-text-secondary);
+ padding: 4px 0;
+}
+
+.noticeItemIcon {
+ color: var(--color-accent);
+ font-size: 12px;
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateY(-4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .field {
+ grid-template-columns: 1fr;
+ }
+
+ .rateLimiterHeader {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+}
+
+/* Keep consistent with SetPoolStep.module.css */
+.functionCall {
+ background: var(--color-background-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ padding: var(--space-4x);
+ margin: var(--space-2x) 0;
+}
+
+/* Use the same copyBlock style as SetPoolStep */
+.copyBlock {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3x);
+ padding: var(--space-3x);
+ background: var(--color-background-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ margin-top: var(--space-3x);
+}
+
+.copyInstructions {
+ white-space: nowrap;
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+}
+
+/* Container Styles */
+.remoteConfig {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3x);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ background: var(--color-background-secondary);
+ padding: var(--space-3x);
+ width: 100%;
+ max-width: none;
+}
+
+/* Ensure code blocks don't overflow */
+.field code {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ word-break: break-word;
+ min-width: 0;
+ max-width: 100%;
+}
+
+.input {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.inputLabel {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.inputLabel label {
+ font-weight: 600;
+ color: var(--color-text-primary);
+}
+
+.inputHint {
+ font-size: 0.875rem;
+ color: var(--color-text-secondary);
+}
+
+.numericInput {
+ padding: 0.75rem;
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ font-size: 1rem;
+ transition: all 0.2s ease;
+}
+
+.numericInput:focus {
+ outline: none;
+ border-color: var(--color-primary);
+ box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
+}
+
+.inputError {
+ border-color: var(--color-error);
+}
+
+.inputError:focus {
+ border-color: var(--color-error);
+ box-shadow: 0 0 0 2px rgba(var(--color-error-rgb), 0.1);
+}
+
+/* Validation warning styling */
+.rateLimiterInputs :global(.callout) {
+ margin-bottom: 1rem;
+ font-size: 0.875rem;
+ border-radius: 6px;
+}
+
+.rateLimiterInputs :global(.callout-title) {
+ font-size: 0.875rem;
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+}
+
+.maxSupplyInfo {
+ margin-bottom: 1rem;
+}
+
+.validationWarnings {
+ margin-bottom: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.validationWarnings :global(.callout) {
+ margin: 0;
+ padding: 0.75rem 1rem;
+ border-radius: 6px;
+ background-color: var(--color-warning-background);
+ border: 1px solid var(--color-warning-border);
+}
+
+.validationWarnings :global(.callout-title) {
+ color: var(--color-warning-text);
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
new file mode 100644
index 00000000000..254e148803f
--- /dev/null
+++ b/src/components/CCIP/TutorialBlockchainSelector/ChainUpdateBuilder.tsx
@@ -0,0 +1,449 @@
+import { useState, useEffect } from "react"
+import { ethers } from "ethers"
+import { laneStore, type RateLimiterConfig, updateRateLimits } from "@stores/lanes"
+import { useStore } from "@nanostores/react"
+import styles from "./ChainUpdateBuilder.module.css"
+import { ErrorBoundary } from "@components/ErrorBoundary"
+import { Callout } from "../TutorialSetup/Callout"
+
+interface ChainUpdateBuilderProps {
+ chain: "source" | "destination"
+ readOnly: {
+ chainSelector: string
+ poolAddress: string
+ tokenAddress: string
+ }
+ defaultConfig: {
+ outbound: RateLimiterConfig
+ inbound: RateLimiterConfig
+ }
+ onCalculate: (chainUpdate: {
+ remoteChainSelector: string
+ poolAddress: string
+ tokenAddress: string
+ outbound: RateLimiterConfig
+ inbound: RateLimiterConfig
+ }) => string
+}
+
+const calculateChainUpdate = (
+ chainSelector: string,
+ poolAddresses: string[],
+ tokenAddress: string,
+ outbound: RateLimiterConfig,
+ inbound: RateLimiterConfig
+) => {
+ return {
+ remoteChainSelector: chainSelector,
+ poolAddress: poolAddresses[0],
+ tokenAddress,
+ outbound,
+ inbound,
+ }
+}
+
+const validateRateLimiterConfig = (config: RateLimiterConfig): string | null => {
+ const rate = BigInt(config.rate || "0")
+ const capacity = BigInt(config.capacity || "0")
+
+ if (config.enabled) {
+ // For enabled config: 0 < rate < capacity
+ if (rate <= BigInt(0)) {
+ return "Rate must be greater than 0 when enabled"
+ }
+ if (rate >= capacity) {
+ return "Rate must be less than capacity for effective rate limiting"
+ }
+ } else {
+ // For disabled config: rate = 0 and capacity = 0
+ if (rate !== BigInt(0) || capacity !== BigInt(0)) {
+ return "Rate and capacity must be 0 when disabled"
+ }
+ }
+ return null
+}
+
+export const ChainUpdateBuilder = ({ chain, readOnly, defaultConfig, onCalculate }: ChainUpdateBuilderProps) => {
+ if (process.env.NODE_ENV === "development") {
+ console.log(`[RenderTrack] ChainUpdateBuilder-${chain} rendered`)
+ }
+
+ const state = useStore(laneStore)
+
+ const [outbound, setOutbound] = useState
+
+
+
+
+ + Rate limits control how many tokens can be transferred over a given blockchain lane within a specific time + frame. When working with rate limits, consider the following: +
+-
+
- + Maximum capacity: The total amount of tokens that can be transferred before the pool is + fully consumed. + +
- + Refill rate: How quickly this capacity is restored over time after transfers occur. + +
- + Disabling rate limits: Setting both capacity and rate to 0 removes all limitations, + allowing unlimited transfers. + +
-
+ Token decimals: When defining these limits, remember to account for token decimals. For
+ example, for a token with 18 decimals, to allow a maximum capacity of 1 whole token, set it to{" "}
+
1000000000000000000. +
+
+ Learn more in the CCIP rate limits documentation. +
+
+ {/* Remote Configuration Section */}
+
+
+ Remote Configuration
+
+
+ {/* Rate Limits Section */}
+
+
+
+ {readOnly.chainSelector}
+
+
+
+ {readOnly.poolAddress}
+
+
+
+ {readOnly.tokenAddress}
+
+ Rate Limit Configuration
+
+ {/* MaxSupply Consideration Callout */}
+ {(outbound.enabled || inbound.enabled) && (
+
+
+ {!canGenerateUpdate() && (
+
+
+ Ensure the capacity is not set higher than your token's maximum supply (configured during token
+ deployment). Setting a capacity larger than the maximum supply would create an ineffective rate limit.
+
+
+ )}
+
+ {/* Validation Warnings */}
+ {(validationErrors.inbound || validationErrors.outbound) && (
+
+ {validationErrors.outbound && (
+
+ {validationErrors.outbound}
+
+ )}
+ {validationErrors.inbound && (
+
+ {validationErrors.inbound}
+
+ )}
+
+ )}
+
+
+ {/* Outbound Configuration */}
+
+
+
+
+ {/* Inbound Configuration */}
+
+ Outbound Transfers
+
+
+
+ {outbound.enabled && (
+
+
+ )}
+
+
+
+
+ Maximum tokens allowed
+
+ handleRateLimitChange("outbound", "capacity", e.target.value)}
+ placeholder="Enter amount..."
+ pattern="[0-9]*"
+ className={`${styles.numericInput} ${validationErrors.outbound ? styles.inputError : ""}`}
+ />
+
+
+
+
+
+ Rate at which available capacity is replenished (tokens/second)
+
+
+ handleRateLimitChange("outbound", "rate", e.target.value)}
+ placeholder="Enter amount..."
+ pattern="[0-9]*"
+ className={`${styles.numericInput} ${validationErrors.outbound ? styles.inputError : ""}`}
+ />
+
+
+
+ Inbound Transfers
+
+
+
+ {inbound.enabled && (
+
+
+ )}
+
+
+
+
+ Maximum tokens allowed
+
+ handleRateLimitChange("inbound", "capacity", e.target.value)}
+ placeholder="Enter amount..."
+ pattern="[0-9]*"
+ className={styles.numericInput}
+ />
+
+
+
+
+
+ Rate at which available capacity is replenished (tokens/second)
+
+
+ handleRateLimitChange("inbound", "rate", e.target.value)}
+ placeholder="Enter amount..."
+ pattern="[0-9]*"
+ className={styles.numericInput}
+ />
+
+
+ )}
+
+ ⚠️
+ Action Required
+
+
+ {!ethers.utils.isAddress(readOnly.tokenAddress) && (
+
+
+ →
+ Please deploy your token first to proceed with configuration
+
+ )}
+ {!ethers.utils.isAddress(readOnly.poolAddress) && (
+
+ →
+ Token pool address is required
+
+ )}
+ {!readOnly.chainSelector && (
+
+ →
+ Chain selector is required
+
+ )}
+ -
+
- Open the "Deploy & Run Transactions" tab in Remix +
-
+ Select your token pool contract:
+ + {poolType === "burn" ? "BurnMintTokenPool" : "LockReleaseTokenPool"} ++
+
+ - Click the contract to view its functions + +
-
+ Call
applyChainUpdates: +++++ +applyChainUpdates+Configure cross-chain token and pool mapping+++Parameters:+++} + /> + + +
+
+ {canGenerateUpdate() && (
+ <>
+ -
+ Configure the rate limits below:
+ ++
+
+
+ {formattedUpdate && (
+ -
+ Copy the generated value and paste it into the
chainsToAddparameter in Remix: ++++++
+ )}
+
+ - Confirm the transaction in MetaMask + + )} +
- Select valid blockchains for the transfer } + {!poolAddress &&
- Deploy your token pool on the current chain } +
⚠️ Please select valid blockchains first
+ )}
+ {!poolAddress && (
+ ⚠️ Please deploy your token pool before proceeding
+ )}
+
+ {isDataReady ? (
+ -
+
+
+ )}
+
+ ⚡️
+
+
+ Current Chain Prerequisites
+-
+ {!isValidNetwork(currentNetwork) &&
+
+ {!isValid && Please enter a valid Ethereum address}
+
+ )
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ContractVerificationStep.module.css b/src/components/CCIP/TutorialBlockchainSelector/ContractVerificationStep.module.css
new file mode 100644
index 00000000000..e58bf00bc85
--- /dev/null
+++ b/src/components/CCIP/TutorialBlockchainSelector/ContractVerificationStep.module.css
@@ -0,0 +1,243 @@
+.verificationIntro {
+ margin-bottom: var(--space-4x);
+}
+
+.verificationSteps {
+ list-style: decimal;
+ padding-left: var(--space-4x);
+ margin: var(--space-4x) 0;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-4x);
+}
+
+.stepTitle {
+ display: block;
+ font-weight: 600;
+ font-size: var(--font-size-lg);
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-3x);
+}
+
+.stepContent {
+ color: var(--color-text);
+}
+
+/* Explorer Section */
+.explorerSection {
+ background: var(--color-background-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ padding: var(--space-4x);
+}
+
+.explorerUrl {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2x);
+ flex-wrap: wrap;
+ margin-bottom: var(--space-3x);
+}
+
+.explorerUrl span {
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+}
+
+.contractSection {
+ border-top: 1px solid var(--color-border);
+ padding-top: var(--space-3x);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3x);
+}
+
+.contractInfo {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2x);
+ flex-wrap: wrap;
+}
+
+.contractInfo span {
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+}
+
+.address {
+ font-family: var(--font-mono);
+ background: var(--color-background);
+ padding: var(--space-1x) var(--space-2x);
+ border-radius: var(--border-radius);
+ font-size: var(--font-size-sm);
+}
+
+/* Verification Options */
+.verificationOptions {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: var(--space-4x);
+ margin: var(--space-2x) 0;
+}
+
+.verificationOption {
+ background: var(--color-background-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+ padding: var(--space-4x);
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.optionHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-2x);
+}
+
+.optionTitle {
+ font-weight: 600;
+ font-size: var(--font-size-base);
+ color: var(--color-text-primary);
+}
+
+.optionTag {
+ font-size: var(--font-size-xs);
+ font-weight: 500;
+ padding: var(--space-1x) var(--space-2x);
+ border-radius: var(--border-radius);
+ background: var(--color-background);
+ color: var(--color-text-secondary);
+}
+
+.optionDescription {
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+ margin-bottom: var(--space-3x);
+ flex-grow: 1;
+}
+
+.optionLink {
+ display: inline-flex;
+ align-items: center;
+ color: var(--color-accent);
+ text-decoration: none;
+ font-size: var(--font-size-base);
+ font-weight: 500;
+ gap: var(--space-1x);
+ margin-top: auto;
+}
+
+.optionLink:hover {
+ text-decoration: underline;
+}
+
+/* Buttons */
+.viewContractButton,
+.verifyButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--color-accent);
+ color: white;
+ padding: var(--space-2x) var(--space-3x);
+ border-radius: var(--border-radius);
+ text-decoration: none;
+ font-weight: 500;
+ gap: var(--space-2x);
+ transition: background-color 0.2s ease;
+}
+
+.viewContractButton:hover,
+.verifyButton:hover {
+ background: var(--color-accent-dark);
+}
+
+/* Confirmation Steps */
+.subSteps {
+ list-style: lower-alpha;
+ padding-left: var(--space-4x);
+ margin: var(--space-3x) 0;
+}
+
+.subSteps li {
+ margin-bottom: var(--space-2x);
+ color: var(--color-text-secondary);
+}
+
+.externalIcon {
+ font-size: 0.8em;
+}
+
+/* Verification Actions */
+.verificationActions {
+ margin-top: var(--space-4x);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3x);
+}
+
+.verificationUrl {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2x);
+}
+
+.verificationUrl span {
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+}
+
+.urlDisplay {
+ font-family: var(--font-mono);
+ background: var(--color-background-secondary);
+ padding: var(--space-2x);
+ border-radius: var(--border-radius);
+ font-size: var(--font-size-sm);
+ word-break: break-all;
+ color: var(--color-text);
+ border: 1px solid var(--color-border);
+}
+
+/* New styles for placeholders and verification link */
+.placeholderMessage {
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+ padding: var(--space-3x);
+ background: var(--color-background-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+}
+
+.verificationLink {
+ margin-top: var(--space-4x);
+ padding: var(--space-3x);
+ background: var(--color-background-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--border-radius);
+}
+
+.verificationLink span {
+ display: block;
+ color: var(--color-text-secondary);
+ font-size: var(--font-size-sm);
+ margin-bottom: var(--space-2x);
+}
+
+.contractLink {
+ display: block;
+ font-family: var(--font-mono);
+ color: var(--color-accent);
+ text-decoration: none;
+ word-break: break-all;
+ font-size: var(--font-size-sm);
+ padding: var(--space-2x);
+ background: var(--color-background);
+ border-radius: var(--border-radius);
+}
+
+.contractLink:hover {
+ text-decoration: underline;
+}
diff --git a/src/components/CCIP/TutorialBlockchainSelector/ContractVerificationStep.tsx b/src/components/CCIP/TutorialBlockchainSelector/ContractVerificationStep.tsx
new file mode 100644
index 00000000000..82db05dc37f
--- /dev/null
+++ b/src/components/CCIP/TutorialBlockchainSelector/ContractVerificationStep.tsx
@@ -0,0 +1,142 @@
+import { TutorialStep } from "../TutorialSetup/TutorialStep"
+import { Callout } from "../TutorialSetup/Callout"
+import type { Network } from "@config/data/ccip/types"
+import styles from "./ContractVerificationStep.module.css"
+
+interface ContractVerificationStepProps {
+ stepId: string
+ network: Network | null
+ contractAddress?: string
+ contractType: "token" | "pool"
+}
+
+export const ContractVerificationStep = ({
+ stepId,
+ network,
+ contractAddress,
+ contractType,
+}: ContractVerificationStepProps) => {
+ // Debug values
+ console.log("ContractVerificationStep Props:", {
+ network,
+ contractAddress,
+ contractType,
+ hasNetwork: !!network?.explorerUrl,
+ hasAddress: !!contractAddress,
+ })
+
+ const explorerContractUrl =
+ contractAddress && network?.explorerUrl ? `${network.explorerUrl}/address/${contractAddress}#code` : undefined
+
+ return (
+
+
+ Contract verification makes your {contractType} contract's source code public on the blockchain explorer.
+ This:
+
+
+
+ -
+
- Builds trust by allowing anyone to audit your code +
- Enables direct interaction through the blockchain explorer +
- Helps other developers understand and integrate with your contract +
-
+
-
+ Access the Blockchain Explorer
+ + {network?.explorerUrl ? ( ++++ ) : ( ++ Blockchain Explorer: + + {network.explorerUrl} ↗ + +++ Blockchain explorer information will be available once you select a network. ++ )} +
+
+
-
+ Verify Using Remix IDE
+ ++++++ ++ Remix IDE Guide ++
+ Official guide for verifying contracts using the Remix IDE verification plugin +
+ + View Guide ↗ + ++++ Chainlink Tutorial +++ Step-by-step tutorial for contract verification on blockchain explorers +
+ + View Tutorial ↗ + +
+
+ -
+ Confirm Verification
+ ++
-
+
- Return to your contract on the blockchain explorer +
- Look for a green checkmark ✓ or "Verified" status +
- You should now see your contract's source code in the "Code" tab +
+ Contract verification link will be available once you select a network. ++ ) : !contractAddress ? ( ++ Contract verification link will be available after deployment. ++ ) : ( ++ Verify your contract at: + + {explorerContractUrl} + ++ )} +
+
-
+
- Open the "Deploy & Run Transactions" tab +
- Set Environment to "Injected Provider - MetaMask" +
- + Select {poolType === "burn" ? "BurnMintTokenPool" : "LockReleaseTokenPool"} contract + +
- Click "Deploy" and confirm in MetaMask +
- Copy your pool address from "Deployed Contracts" +
+ Select the appropriate pool type based on your token's characteristics and requirements
+
+
+
+
+
+
+
+ -
+
+
+ Configure your pool by setting these required parameters in Remix:
+
+ {poolType === "lock" ? (
+ <>
+
+ -
+
+
+ -
+
- Skip the "Deploy Token" section +
- Enter your existing token address in the address field below +
- Continue with "Claim and Accept Admin Role" +
The tutorial will use your provided token address for subsequent steps.
+-
+
- Open the "Deploy & Run Transactions" tab +
- Set Environment to "Injected Provider - MetaMask" +
- + Select BurnMintERC677 contract + +
- The name and symbol help identify your token in wallets and applications. +
- + Using 18 decimals is standard for most ERC20 tokens (1 token = 1000000000000000000 wei or 10 + 18). + +
-
+ If maxSupply is set to 0, it allows unlimited minting. For a limited supply, you must scale the amount
+ according to the number of decimals. For example, if you want a max supply of 1,000 tokens with 18
+ decimals, the maxSupply would be
+
+ 1000 * 1018 +{" "} + =1000000000000000000000(that's 1 followed by 21 zeros). +
+ - Click "Deploy" and confirm in MetaMask +
- Copy your token address from "Deployed Contracts" +
-
+
+
+
+ Configure your token by setting these required parameters in Remix:
+-
+
+
+ -
+
+
+ -
+
-
+ In the list of deployed contracts, select the BurnMintERC677 at{" "}
+
+
+ - Click to open the contract details +
-
+ Call
grantMintAndBurnRoles: +++++ +grantMintAndBurnRoles++ Grant mint and burn privileges to your token pool for cross-chain transfers +++ ⚠️ You must be the token contract owner to call this function ++ +++Parameters:+++} + /> +
+ - Confirm the transaction in MetaMask +
-
+
[Select {chain} blockchain first] : null
+
+ const networks = getAllNetworks({ filter: state.environment })
+ const network = networks.find((n) => n.chain === chainId)
+
+ if (!network) return required ? Network not found : null
+
+ let address: string | undefined
+ switch (type) {
+ case "registryModule":
+ address = network.registryModule
+ break
+ case "tokenAdminRegistry":
+ address = network.tokenAdminRegistry
+ break
+ case "router":
+ address = network.router?.address
+ break
+ case "armProxy":
+ address = network.armProxy?.address
+ break
+ case "chainSelector":
+ address = network.chainSelector
+ break
+ }
+
+ if (!address) return required ? Contract address not available : null
+
+ return (
+
+
+ )
+}
+
+export const PoolConfigVerification = ({ chain }: { chain: ChainType }) => {
+ const state = useStore(laneStore)
+ const currentNetwork = chain === "source" ? state.sourceNetwork : state.destinationNetwork
+ const remoteNetwork = chain === "source" ? state.destinationNetwork : state.sourceNetwork
+ const networkInfo = currentNetwork ? { name: currentNetwork.name, logo: currentNetwork.logo } : { name: "loading..." }
+ const remoteSelector = remoteNetwork?.chainSelector
+ const remoteName = remoteNetwork?.name
+ const remoteContracts = chain === "source" ? state.destinationContracts : state.sourceContracts
+ const poolAddress = chain === "source" ? state.sourceContracts.tokenPool : state.destinationContracts.tokenPool
+ const rateLimits = chain === "source" ? state.sourceRateLimits : state.destinationRateLimits
+ const poolType = chain === "source" ? state.sourceContracts.poolType : state.destinationContracts.poolType
+
+ const stepId = chain === "source" ? "sourceConfig" : "destinationConfig"
+ const subStepId = chain === "source" ? "source-verification" : "dest-verification"
+ const navigationId = `${stepId}-${subStepId}`
+
+ return (
+
+ Tokens
+
+ 0
+
+ Last Updated
+
+ Current block timestamp
+
+ Status
+
+ {config?.enabled ? "true" : "false"}
+
+ Capacity
+
+ {config?.capacity || "0"}
+
+ Rate
+
+ {config?.rate || "0"}
+ -
+
- Open the "Deploy & Run Transactions" tab in Remix +
-
+ Select your token pool contract:
+ + {poolType === "burn" ? "BurnMintTokenPool" : "LockReleaseTokenPool"} ++
+
+ - Click the contract to view its functions +
-
+ Call
getRemoteToken: +++++ +getRemoteToken++ Retrieves the ABI-encoded address of your token on the remote chain ++++ +Parameters:+++} + /> + ++ +Returns:+++++bytes++ ABI-encoded address of the token on the remote chain ++++Expected Result:++ {remoteContracts.token + ? utils.defaultAbiCoder.encode(["address"], [remoteContracts.token]) + : "Waiting for remote token address..."} ++
+ -
+ Call
getRemotePools: +++++ +getRemotePools+Returns all registered token pools on the remote chain+++ +Parameters:+++} + /> + ++ +Returns:+++++bytes[]++ Array of ABI-encoded addresses of all registered pools on the remote chain ++++Expected Result:++ {remoteContracts.tokenPool + ? [utils.defaultAbiCoder.encode(["address"], [remoteContracts.tokenPool])] + : "Waiting for remote pool address..."} ++
+ -
+ Call
getCurrentInboundRateLimiterState: +++++ +getCurrentInboundRateLimiterState+Verifies your inbound transfer rate limits+++ +Parameters:+++} + /> + ++ +Returns:+++++TokenBucket+Current state of the inbound rate limiter+++Expected Result:+{formatRateLimiterState(rateLimits, "inbound")}++ The +tokensfield starts at 0 and thelastUpdatedfield will show the + current block timestamp. +
+ -
+ Call
getCurrentOutboundRateLimiterState: +++++ +getCurrentOutboundRateLimiterState+Verifies your outbound transfer rate limits+++ +Parameters:+++} + /> + ++ +Returns:+++++TokenBucket+Current state of the outbound rate limiter+++Expected Result:+{formatRateLimiterState(rateLimits, "outbound")}++ The +tokensfield starts at 0 and thelastUpdatedfield will show the + current block timestamp. +
+
-
+
-
+
-
+
-
+
-
+
- + In the "Deploy & Run Transactions" tab, select the TokenAdminRegistry contract in the{" "} + Contracts drop-down list. + +
-
+ Next to the At Address button, fill in the following contract address, and then click the{" "}
+ At Address button.
+ + Contract: TokenAdminRegistry ++
+
+ - Select the TokenAdminRegistry contract to expand its details +
-
+ Call
setPool: +++++ +setPool+Enable your token for CCIP by registering its token pool+⚠️ You must be the token admin to call this function+ +++Parameters:+++} + /> + } + /> +
+ - Confirm the transaction in MetaMask +
-
+
+
+
+
+
+
+
+
+
+
+ {truncateChainSelector(selector)}
+
+ )
+}
diff --git a/src/components/CCIP/TutorialProgress/ContractAddressDisplay.module.css b/src/components/CCIP/TutorialProgress/ContractAddressDisplay.module.css
new file mode 100644
index 00000000000..0ae273f5315
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/ContractAddressDisplay.module.css
@@ -0,0 +1,66 @@
+.addressContainer {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.9em;
+ padding: 4px 8px;
+ border-radius: 6px;
+ transition: all 0.15s ease;
+ position: relative;
+ cursor: help;
+ background: rgba(255, 255, 255, 0.1);
+ isolation: isolate;
+ display: inline-block;
+}
+
+.addressContainer:hover {
+ background: rgba(255, 255, 255, 0.15);
+}
+
+.addressText {
+ display: inline;
+ white-space: nowrap;
+}
+
+.addressContainer[data-tooltip] {
+ position: relative;
+}
+
+.addressContainer[data-tooltip]::before {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: calc(100% + 8px);
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 6px 10px;
+ background: rgba(0, 0, 0, 0.85);
+ color: white;
+ font-size: 0.85em;
+ border-radius: 6px;
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.15s ease;
+ pointer-events: none;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ z-index: 100;
+}
+
+.addressContainer[data-tooltip]::after {
+ content: "";
+ position: absolute;
+ bottom: calc(100% + 2px);
+ left: 50%;
+ transform: translateX(-50%);
+ border: 6px solid transparent;
+ border-top-color: rgba(0, 0, 0, 0.85);
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.15s ease;
+ pointer-events: none;
+ z-index: 100;
+}
+
+.addressContainer[data-tooltip]:hover::before,
+.addressContainer[data-tooltip]:hover::after {
+ opacity: 1;
+ visibility: visible;
+}
diff --git a/src/components/CCIP/TutorialProgress/ContractAddressDisplay.tsx b/src/components/CCIP/TutorialProgress/ContractAddressDisplay.tsx
new file mode 100644
index 00000000000..d9a8299b2f1
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/ContractAddressDisplay.tsx
@@ -0,0 +1,18 @@
+import styles from "./ContractAddressDisplay.module.css"
+
+interface ContractAddressDisplayProps {
+ address: string
+}
+
+export const ContractAddressDisplay = ({ address }: ContractAddressDisplayProps) => {
+ const truncateAddress = (address: string) => {
+ if (!address) return ""
+ return `${address.slice(0, 6)}...${address.slice(-4)}`
+ }
+
+ return (
+
+ {truncateAddress(address)}
+
+ )
+}
diff --git a/src/components/CCIP/TutorialProgress/SectionProgress.module.css b/src/components/CCIP/TutorialProgress/SectionProgress.module.css
new file mode 100644
index 00000000000..d4164997667
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/SectionProgress.module.css
@@ -0,0 +1,101 @@
+.progressContainer {
+ margin-bottom: 2rem;
+ padding: 1.5rem;
+ background: #f8fafc;
+ border-radius: 12px;
+}
+
+.progressHeader {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.sectionTitle {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: #1e293b;
+}
+
+.stepCount {
+ color: #64748b;
+ font-size: 0.875rem;
+}
+
+.progressBar {
+ height: 8px;
+ background: transparent;
+ border-radius: 4px;
+ overflow: hidden;
+ display: flex;
+ gap: 2px;
+}
+
+.progressSegment {
+ height: 100%;
+ border: none;
+ padding: 0;
+ margin: 0;
+ background: #e2e8f0;
+ transition: all 0.2s ease;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.progressSegment::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(255, 255, 255, 0.1);
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.progressSegment:hover::after {
+ opacity: 1;
+}
+
+.progressSegment.completed {
+ background: #375bd2;
+}
+
+.progressSegment.in-progress {
+ background: #eab308;
+}
+
+.progressSegment.not-started {
+ background: #e2e8f0;
+}
+
+.progressSegment.active {
+ transform: scaleY(1.2);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Tooltip styles */
+.progressSegment:hover::before {
+ content: attr(aria-label);
+ position: absolute;
+ bottom: calc(100% + 8px);
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(0, 0, 0, 0.8);
+ color: white;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+ pointer-events: none;
+ z-index: 10;
+}
+
+/* Focus styles for accessibility */
+.progressSegment:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px #375bd2;
+}
diff --git a/src/components/CCIP/TutorialProgress/SectionProgress.tsx b/src/components/CCIP/TutorialProgress/SectionProgress.tsx
new file mode 100644
index 00000000000..2bbc9b3361d
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/SectionProgress.tsx
@@ -0,0 +1,43 @@
+import styles from "./SectionProgress.module.css"
+import { navigateToStep, type StepId } from "@stores/lanes"
+import { useMemo } from "react"
+
+interface SectionProgressProps {
+ currentStep: number
+ totalSteps: number
+ sectionTitle: string
+ steps: Array<{ id: StepId; stepNumber: number; status: string }>
+}
+
+export const SectionProgress = ({ currentStep, totalSteps, sectionTitle, steps }: SectionProgressProps) => {
+ const segments = useMemo(() => {
+ return steps.map((step) => ({
+ ...step,
+ width: (1 / totalSteps) * 100,
+ isActive: step.stepNumber === currentStep,
+ }))
+ }, [steps, currentStep, totalSteps])
+
+ return (
+
+
+ )
+}
diff --git a/src/components/CCIP/TutorialProgress/StepCheckbox.css b/src/components/CCIP/TutorialProgress/StepCheckbox.css
new file mode 100644
index 00000000000..46a71d4de7b
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/StepCheckbox.css
@@ -0,0 +1,100 @@
+.step-checkbox {
+ margin: 1.5rem 0;
+ padding: 1.25rem 1.5rem;
+ border-radius: 12px;
+ background: #f8fafc;
+ border: 2px solid #e2e8f0;
+ box-shadow: 0 2px 4px rgba(55, 91, 210, 0.05);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+}
+
+.step-checkbox:hover {
+ background: #f1f5f9;
+ border-color: #375bd2;
+ transform: translateY(-2px);
+ box-shadow: 0 6px 12px rgba(55, 91, 210, 0.1);
+}
+
+.step-checkbox label {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ cursor: pointer;
+ font-weight: 600;
+}
+
+.step-checkbox input[type="checkbox"] {
+ appearance: none;
+ width: 24px;
+ height: 24px;
+ border: 2.5px solid #94a3b8;
+ border-radius: 8px;
+ position: relative;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ background: white;
+}
+
+.step-checkbox input[type="checkbox"]:hover {
+ border-color: #375bd2;
+ box-shadow: 0 0 0 4px rgba(55, 91, 210, 0.1);
+}
+
+.step-checkbox input[type="checkbox"]:checked {
+ background: #375bd2;
+ border-color: #375bd2;
+ animation: checkbox-pop 0.3s ease-out;
+}
+
+.step-checkbox input[type="checkbox"]:checked::after {
+ content: "✓";
+ color: white;
+ position: absolute;
+ top: 45%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 1.125rem;
+ font-weight: bold;
+}
+
+.step-checkbox span {
+ font-size: 1.125rem;
+ color: #1e293b;
+ line-height: 1.4;
+}
+
+/* Add completion indicator */
+.step-checkbox:has(input:checked) {
+ border-color: #375bd2;
+ background: linear-gradient(to right, rgba(55, 91, 210, 0.05), transparent);
+}
+
+.step-checkbox:has(input:checked) span {
+ color: #375bd2;
+}
+
+/* Add visual feedback animation */
+@keyframes checkbox-pop {
+ 0% {
+ transform: scale(0.8);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+/* Add completion badge */
+.step-checkbox:has(input:checked)::after {
+ content: "Completed!";
+ position: absolute;
+ top: 0.75rem;
+ right: 1rem;
+ font-size: 0.875rem;
+ color: #375bd2;
+ font-weight: 600;
+ opacity: 0.8;
+}
diff --git a/src/components/CCIP/TutorialProgress/StepCheckbox.tsx b/src/components/CCIP/TutorialProgress/StepCheckbox.tsx
new file mode 100644
index 00000000000..db3d633d4cd
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/StepCheckbox.tsx
@@ -0,0 +1,125 @@
+import { updateStepProgress, type StepId, TUTORIAL_STEPS, subscribeToStepProgress } from "@stores/lanes"
+import { useCallback, memo, useMemo, useEffect, useRef } from "react"
+
+interface StepCheckboxProps
+
+
+ {sectionTitle}
+ + Step {currentStep} of {totalSteps} + +
+
+
+ )
+}
+
+// Memoized version with prop comparison
+export const StepCheckbox = memo(StepCheckboxBase, (prev, next) => {
+ return (
+ prev.stepId === next.stepId &&
+ prev.subStepId === next.subStepId &&
+ prev.label === next.label &&
+ prev.onChange === next.onChange
+ )
+})
diff --git a/src/components/CCIP/TutorialProgress/SubStepTracker.tsx b/src/components/CCIP/TutorialProgress/SubStepTracker.tsx
new file mode 100644
index 00000000000..cd82d7fd537
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/SubStepTracker.tsx
@@ -0,0 +1,22 @@
+import { SubStep } from "./types"
+
+interface SubStepTrackerProps {
+ steps: SubStep[]
+ onComplete: (stepId: string, completed: boolean) => void
+}
+
+export const SubStepTracker = ({ steps, onComplete }: SubStepTrackerProps) => {
+ return (
+
+ {steps.map((step) => (
+
+ )
+}
diff --git a/src/components/CCIP/TutorialProgress/TutorialProgress.module.css b/src/components/CCIP/TutorialProgress/TutorialProgress.module.css
new file mode 100644
index 00000000000..84b1dd1d5c4
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/TutorialProgress.module.css
@@ -0,0 +1,363 @@
+/* Base container */
+.tutorialProgress {
+ position: sticky;
+ top: 0;
+ height: fit-content;
+ padding: var(--doc-padding) 0;
+ min-width: calc(315px - var(--space-16x));
+ isolation: isolate;
+}
+
+/* Override any parent title tooltips */
+.tutorialProgress::before,
+.tutorialProgress::after {
+ display: none !important;
+}
+
+.title {
+ font-family: var(--font-display);
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-4x);
+ pointer-events: none;
+}
+
+.sectionTitle {
+ font-family: var(--font-display);
+ font-size: var(--font-size-base);
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: var(--space-4x);
+ padding-bottom: var(--space-2x);
+ border-bottom: 1px solid var(--color-border);
+ pointer-events: none;
+}
+
+/* Progress Steps */
+.progressSteps {
+ margin-bottom: 24px;
+}
+
+.steps {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-left: 16px;
+}
+
+.stepContainer {
+ display: flex;
+ flex-direction: column;
+ border-left: 2px solid var(--color-border-primary);
+ margin-left: 15px;
+ padding-left: 15px;
+ transition: all 0.3s ease;
+}
+
+.stepContainer.completed {
+ border-left-color: #16a34a;
+}
+
+.stepContainer.in-progress {
+ border-left-color: #ea580c;
+}
+
+.step {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 12px;
+ background: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ width: 100%;
+}
+
+.step:hover {
+ transform: translateX(4px);
+ background: var(--color-background-secondary);
+}
+
+.stepIndicator {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ background: var(--color-background-secondary);
+ color: var(--color-text-secondary);
+ border: 2px solid var(--color-border);
+ transition: all 0.2s ease;
+ flex-shrink: 0;
+}
+
+.completed .stepIndicator {
+ background: #dcfce7;
+ border-color: #16a34a;
+ color: #16a34a;
+}
+
+.in-progress .stepIndicator {
+ background: #fef3c7;
+ border-color: #eab308;
+ color: #b45309;
+}
+
+.stepTitle {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text-primary);
+ flex: 1;
+}
+
+.step.in-progress .stepTitle {
+ color: #ea580c;
+}
+
+.chevron {
+ width: 16px;
+ height: 16px;
+ border-right: 2px solid var(--color-text-secondary);
+ border-bottom: 2px solid var(--color-text-secondary);
+ transform: rotate(45deg);
+ transition: transform 0.2s ease;
+ flex-shrink: 0;
+}
+
+.expanded .chevron {
+ transform: rotate(-135deg);
+}
+
+.stepDetails {
+ margin-left: 40px;
+ padding: 8px 0;
+ border-left: 2px solid var(--color-border-primary);
+}
+
+.substep {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+ background: rgba(255, 255, 255, 0.03);
+ margin: 4px 0;
+ width: 100%;
+ text-align: left;
+ border: none;
+ cursor: pointer;
+}
+
+.substep:hover {
+ background: rgba(255, 255, 255, 0.08);
+ transform: translateX(4px);
+}
+
+.substep:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(55, 91, 210, 0.4);
+}
+
+.substep.completed {
+ background: rgba(22, 163, 74, 0.1);
+ padding-right: 32px;
+ position: relative;
+}
+
+.substep.completed::after {
+ content: "✓";
+ position: absolute;
+ right: 12px;
+ color: #16a34a;
+ font-weight: bold;
+}
+
+.substepTitle {
+ font-size: 0.9rem;
+ color: var(--color-text-secondary);
+ pointer-events: none;
+}
+
+.substep.completed .substepTitle {
+ color: #16a34a;
+ font-weight: 500;
+}
+
+/* Chain section styles */
+.chainBlock {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ padding: 16px;
+ margin-bottom: 16px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.2s ease;
+}
+
+.chainHeader {
+ margin-bottom: 16px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.chainIdentity {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.chainLogo {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ border: 2px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.2s ease;
+ background: rgba(255, 255, 255, 0.1);
+ flex-shrink: 0;
+}
+
+.chainLogo img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.chainLogo:not([src]),
+.chainLogo[src=""],
+.chainLogo[src="undefined"] {
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid rgba(255, 255, 255, 0.15);
+}
+
+.chainName {
+ font-weight: 600;
+ color: var(--color-text-primary);
+ font-size: 1.1em;
+ pointer-events: none;
+}
+
+.chainConfigs {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+/* Status styles */
+.statusItem {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 12px;
+ background: rgba(255, 255, 255, 0.03);
+ border-radius: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ transition: all 0.2s ease;
+}
+
+.statusLabel {
+ color: var(--color-text-secondary);
+ font-size: 0.9em;
+ font-weight: 500;
+ pointer-events: none;
+}
+
+.statusValue {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+}
+
+.statusValueWithAddress {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ position: relative;
+ max-width: 140px;
+}
+
+.statusCheck {
+ color: #4caf50;
+ font-weight: bold;
+ flex-shrink: 0;
+ pointer-events: none;
+}
+
+.statusPending {
+ color: var(--color-text-secondary);
+ font-size: 0.9em;
+ pointer-events: none;
+}
+
+/* Value container with tooltip */
+.valueContainer {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.9em;
+ padding: 4px 8px;
+ border-radius: 6px;
+ transition: all 0.15s ease;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100px;
+ position: relative;
+ cursor: help;
+ background: rgba(255, 255, 255, 0.1);
+ isolation: isolate;
+}
+
+.valueContainer:hover {
+ background: rgba(255, 255, 255, 0.15);
+}
+
+/* Tooltip styles */
+.valueContainer[data-tooltip] {
+ position: relative;
+}
+
+.valueContainer[data-tooltip]::before {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: calc(100% + 8px);
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 6px 10px;
+ background: rgba(0, 0, 0, 0.85);
+ color: white;
+ font-size: 0.85em;
+ border-radius: 6px;
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.15s ease;
+ pointer-events: none;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ z-index: 100;
+}
+
+.valueContainer[data-tooltip]::after {
+ content: "";
+ position: absolute;
+ bottom: calc(100% + 2px);
+ left: 50%;
+ transform: translateX(-50%);
+ border: 6px solid transparent;
+ border-top-color: rgba(0, 0, 0, 0.85);
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.15s ease;
+ pointer-events: none;
+ z-index: 100;
+}
+
+.valueContainer[data-tooltip]:hover::before,
+.valueContainer[data-tooltip]:hover::after {
+ opacity: 1;
+ visibility: visible;
+}
diff --git a/src/components/CCIP/TutorialProgress/TutorialProgress.tsx b/src/components/CCIP/TutorialProgress/TutorialProgress.tsx
new file mode 100644
index 00000000000..fed6e94fe08
--- /dev/null
+++ b/src/components/CCIP/TutorialProgress/TutorialProgress.tsx
@@ -0,0 +1,336 @@
+import { useStore } from "@nanostores/react"
+import { useState, useEffect, useMemo, useCallback } from "react"
+import { laneStore, progressStore, TUTORIAL_STEPS, type StepId, type LaneState } from "@stores/lanes"
+import styles from "./TutorialProgress.module.css"
+import { ChainSelectorDisplay } from "./ChainSelectorDisplay"
+import { ContractAddressDisplay } from "./ContractAddressDisplay"
+import { SectionProgress } from "./SectionProgress"
+
+// Helper function to determine current step
+const determineCurrentStep = (state: Omit
+
+ {step.title}
+
+ ))}
+ Tutorial Progress
+
+
+
+
+ {steps.map((step) => {
+ const status = getStepStatus(step.id)
+ const isCurrentStep = step.stepNumber === currentStepNumber
+ return (
+
+
+
+
+
+
+ {expandedStep === step.id && (
+
+ )
+ })}
+
+
+ )}
+ {renderSubSteps(step.id as StepId)}
+
+
+ Configuration Status
+ + {/* Source Chain Status */} +
+
+
+ {/* Destination Chain Status */}
+
+
+
+
+
+ {mainState.sourceNetwork?.logo ? (
+ 
{
+ e.currentTarget.style.display = "none"
+ }}
+ />
+ ) : null}
+
+ {mainState.sourceNetwork?.name || "Source Chain"}
+
+
+
+
+ Chain Selector
+
+ {mainState.sourceNetwork?.chainSelector ? (
+
+
+ ✓
+
+ ) : (
+ Not Available
+ )}
+
+
+ Token
+
+ {mainState.sourceContracts.token ? (
+
+
+ ✓
+
+ ) : (
+ Not Deployed
+ )}
+
+
+ Token Pool
+
+ {mainState.sourceContracts.tokenPool ? (
+
+
+ ✓
+
+ ) : (
+ Not Deployed
+ )}
+
+
+
+
+
+
+
+ {mainState.destinationNetwork?.logo ? (
+ 
{
+ e.currentTarget.style.display = "none"
+ }}
+ />
+ ) : null}
+
+ {mainState.destinationNetwork?.name || "Destination Chain"}
+
+
+
+
+ Chain Selector
+
+ {mainState.destinationNetwork?.chainSelector ? (
+
+
+ ✓
+
+ ) : (
+ Not Available
+ )}
+
+
+ Token
+
+ {mainState.destinationContracts.token ? (
+
+
+ ✓
+
+ ) : (
+ Not Deployed
+ )}
+
+
+ Token Pool
+
+ {mainState.destinationContracts.tokenPool ? (
+
+
+ ✓
+
+ ) : (
+ Not Deployed
+ )}
+
+
+
+ )
+}
diff --git a/src/components/CCIP/TutorialSetup/ContractsImportCard.module.css b/src/components/CCIP/TutorialSetup/ContractsImportCard.module.css
new file mode 100644
index 00000000000..f5d36701995
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/ContractsImportCard.module.css
@@ -0,0 +1,52 @@
+.requirements {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.stepsList {
+ counter-reset: step;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.stepsList li {
+ counter-increment: step;
+ padding-left: 36px;
+ position: relative;
+ margin-bottom: 20px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--color-text-secondary);
+}
+
+.stepsList li:last-child {
+ margin-bottom: 0;
+}
+
+.stepsList li::before {
+ content: counter(step);
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 24px;
+ height: 24px;
+ background: var(--color-accent);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--color-background);
+ opacity: 0.9;
+}
+
+.codeContainer {
+ margin: 16px 0;
+ padding: 16px;
+ background: var(--color-background-secondary);
+ border-radius: 8px;
+ border: 1px solid var(--color-border);
+}
diff --git a/src/components/CCIP/TutorialSetup/ContractsImportCard.tsx b/src/components/CCIP/TutorialSetup/ContractsImportCard.tsx
new file mode 100644
index 00000000000..4468fa70ba7
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/ContractsImportCard.tsx
@@ -0,0 +1,41 @@
+import { StepCheckbox } from "@components/CCIP/TutorialProgress/StepCheckbox"
+import { CodeSampleReact } from "@components/CodeSample/CodeSampleReact"
+import styles from "./ContractsImportCard.module.css"
+import { TutorialCard } from "./TutorialCard"
+import { SetupSection } from "./SetupSection"
+import type { StepId, SubStepId } from "@stores/lanes"
+
+export const ContractsImportCard = () => {
+ // Generate unique ID for navigation
+ const stepId = "setup-contracts-imported"
+
+ return (
+
+
+
+ {children}
+
+ ,
+ }}
+ >
+
+
+ -
+
-
+ Open the pre-configured token contract in Remix:
+ ++
+
+ - Wait a few seconds for Remix to automatically compile all contracts. +
+ {network?.logo && 
}
+
+ Ensure MetaMask is connected to {network?.name || "loading..."}
+
+
+)
diff --git a/src/components/CCIP/TutorialSetup/PrerequisitesCard.module.css b/src/components/CCIP/TutorialSetup/PrerequisitesCard.module.css
new file mode 100644
index 00000000000..1c8877b7ca7
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/PrerequisitesCard.module.css
@@ -0,0 +1,192 @@
+.card {
+ background: var(--color-background);
+ border-radius: 12px;
+ padding: 32px;
+ margin: 16px 0;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+}
+
+.title {
+ font-size: 20px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: 24px;
+}
+
+.requirements {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.step {
+ position: relative;
+ background: var(--color-background);
+ border-radius: 12px;
+ transition: all 0.3s ease;
+}
+
+.step:target {
+ background-color: rgba(55, 91, 210, 0.1);
+ border-color: rgba(55, 91, 210, 0.3);
+ box-shadow: 0 0 0 2px rgba(55, 91, 210, 0.2);
+}
+
+.step.active {
+ border-color: var(--color-primary);
+}
+
+.stepContent {
+ position: relative;
+ padding: 16px 0;
+}
+
+.expandButton {
+ position: absolute;
+ top: -40px;
+ right: 8px;
+ background: none;
+ border: none;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ padding: 8px;
+ transition: all 0.2s ease;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ border-radius: 4px;
+}
+
+.expandButton:hover {
+ color: var(--color-text-primary);
+ background: var(--color-background-secondary);
+}
+
+.optionsGrid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 20px;
+ margin-top: 16px;
+ animation: slideDown 0.3s ease;
+}
+
+.optionCard {
+ background: var(--color-background-secondary);
+ border-radius: 8px;
+ padding: 20px;
+ border: 1px solid var(--color-border);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ transition: all 0.2s ease;
+}
+
+.optionCard:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.optionCard h4 {
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: 16px;
+}
+
+.stepsList {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 20px;
+ counter-reset: item;
+}
+
+.stepsList li {
+ position: relative;
+ padding-left: 28px;
+ margin-bottom: 12px;
+ font-size: 14px;
+ line-height: 1.5;
+ color: var(--color-text-secondary);
+}
+
+/* Numbered items */
+.numberedItem {
+ counter-increment: item;
+}
+
+.numberedItem::before {
+ content: counter(item) ".";
+ position: absolute;
+ left: 8px;
+ color: var(--color-text-primary);
+ font-weight: 500;
+}
+
+/* Bullet items */
+.bulletItem {
+ padding-left: 24px !important;
+}
+
+.bulletItem::before {
+ content: "•";
+ position: absolute;
+ left: 8px;
+ color: var(--color-text-primary);
+}
+
+/* Header items */
+.headerItem {
+ padding-left: 0 !important;
+ font-weight: 500;
+ color: var(--color-text-primary) !important;
+ margin-bottom: 8px !important;
+}
+
+.actionButton {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: var(--color-accent);
+ color: var(--color-background) !important;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.2s ease;
+ margin-top: 16px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.actionButton:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.2);
+ filter: brightness(1.05);
+}
+
+.linkArrow {
+ font-size: 18px;
+ transition: transform 0.2s ease;
+}
+
+.actionButton:hover .linkArrow {
+ transform: translateX(4px);
+}
+
+@keyframes slideDown {
+ from {
+ opacity: 0;
+ transform: translateY(-8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@media (max-width: 768px) {
+ .optionsGrid {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/src/components/CCIP/TutorialSetup/PrerequisitesCard.tsx b/src/components/CCIP/TutorialSetup/PrerequisitesCard.tsx
new file mode 100644
index 00000000000..f445fd6c054
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/PrerequisitesCard.tsx
@@ -0,0 +1,166 @@
+import { useState } from "react"
+import styles from "./PrerequisitesCard.module.css"
+import { type StepId, type SubStepId } from "@stores/lanes"
+import { SetupSection } from "./SetupSection"
+import { TutorialCard } from "./TutorialCard"
+
+interface Link {
+ text: string
+ url: string
+}
+
+interface PrerequisiteStep {
+ id: string
+ title: string
+ description: string
+ checkboxId: SubStepId
+ {prerequisites.map((step, index) => (
+
+
+
+
+
+ ))}
+
+
+ {activeStep === step.id && step.options && (
+
+
+ {step.options.map((option, idx) => (
+
+ )}
+
+
+ ))}
+ {option.title}
+-
+ {option.steps.map((step, stepIdx) => (
+
- + {step.text} + + ))} +
+
+ )
+}
diff --git a/src/components/CCIP/TutorialSetup/SolidityParam.module.css b/src/components/CCIP/TutorialSetup/SolidityParam.module.css
new file mode 100644
index 00000000000..8f06cb78cb1
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/SolidityParam.module.css
@@ -0,0 +1,90 @@
+.parameter {
+ display: grid;
+ gap: var(--space-3x);
+ align-items: start;
+
+ /* Default mobile-first layout: stacked */
+ grid-template-columns: 1fr;
+
+ /* Tablet (768px and up) */
+ @media (min-width: 768px) {
+ grid-template-columns: 120px 1fr;
+ grid-template-areas:
+ "name info"
+ "type info";
+ }
+
+ /* Desktop (1024px and up) */
+ @media (min-width: 1024px) {
+ grid-template-columns: 120px 80px 1fr;
+ grid-template-areas: "name type info";
+ }
+}
+
+.name {
+ font-size: var(--font-size-sm);
+ padding: var(--space-1x) var(--space-2x);
+ border-radius: 4px;
+ grid-area: name;
+}
+
+.type {
+ font-size: var(--font-size-sm);
+ grid-area: type;
+
+ /* On mobile/tablet, align with name */
+ @media (max-width: 1023px) {
+ margin-top: calc(-1 * var(--space-2x));
+ }
+}
+
+.info {
+ font-size: var(--font-size-sm);
+ grid-area: info;
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-1x);
+}
+
+/* Parent container adjustments */
+.parameters {
+ padding: var(--space-2x);
+ font-size: var(--font-size-sm);
+
+ @media (min-width: 768px) {
+ padding: var(--space-3x);
+ }
+
+ @media (min-width: 1024px) {
+ padding: var(--space-4x);
+ }
+}
+
+.parameterHelp {
+ /* Stack help items on mobile */
+ @media (max-width: 767px) {
+ .helpItem {
+ flex-direction: column;
+ gap: var(--space-1x);
+ }
+ }
+}
+
+/* Ensure text remains readable */
+.description {
+ line-height: var(--line-height-base);
+ font-size: var(--font-size-sm);
+
+ @media (min-width: 768px) {
+ font-size: var(--font-size-base);
+ }
+}
+
+/* Adjust spacing for different screen sizes */
+.example {
+ margin-top: var(--space-1x);
+
+ @media (min-width: 768px) {
+ margin-top: var(--space-2x);
+ }
+}
diff --git a/src/components/CCIP/TutorialSetup/SolidityParam.tsx b/src/components/CCIP/TutorialSetup/SolidityParam.tsx
new file mode 100644
index 00000000000..91382c78027
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/SolidityParam.tsx
@@ -0,0 +1,23 @@
+import { type ReactNode } from "react"
+import styles from "./SolidityParam.module.css"
+import { ReactCopyText } from "@components/ReactCopyText"
+
+interface SolidityParamProps {
+ name: string
+ type: string
+ description: string
+ example?: string | ReactNode
+ children?: ReactNode
+}
+
+export const SolidityParam = ({ name, type, description, example, children }: SolidityParamProps) => (
+
+
+
+
+ {checkbox && (
+ {title}
+ {description &&{description}
} +
+
+ )}
+ {children}
+
+
+)
diff --git a/src/components/CCIP/TutorialSetup/TutorialCard.module.css b/src/components/CCIP/TutorialSetup/TutorialCard.module.css
new file mode 100644
index 00000000000..c2846a8e9c6
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/TutorialCard.module.css
@@ -0,0 +1,52 @@
+.card {
+ background: var(--color-background);
+ border-radius: 12px;
+ padding: 24px;
+ margin: 16px 0;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.03);
+ border: 1px solid var(--color-border);
+ transition: all 0.2s ease-in-out;
+ position: relative;
+}
+
+.card:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.04);
+}
+
+.card::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 3px;
+ height: 100%;
+ background: var(--color-accent);
+ border-radius: 3px 0 0 3px;
+ opacity: 0.7;
+ transition: opacity 0.2s ease;
+}
+
+.card:hover::before {
+ opacity: 1;
+}
+
+.title {
+ font-family: var(--font-display);
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ margin-bottom: 8px;
+}
+
+.description {
+ font-family: var(--font-body);
+ color: var(--color-text-secondary);
+ font-size: 14px;
+ line-height: 1.5;
+ margin-bottom: 16px;
+}
+
+.content {
+ margin-top: var(--space-4x);
+}
diff --git a/src/components/CCIP/TutorialSetup/TutorialCard.tsx b/src/components/CCIP/TutorialSetup/TutorialCard.tsx
new file mode 100644
index 00000000000..45121ab96ef
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/TutorialCard.tsx
@@ -0,0 +1,17 @@
+import styles from "./TutorialCard.module.css"
+
+interface TutorialCardProps {
+ title: string
+ description?: string
+ children: React.ReactNode
+}
+
+export const TutorialCard = ({ title, description, children }: TutorialCardProps) => {
+ return (
+ {name}
+ {type}
+
+
+ {children && {description}
+ {example && (typeof example === "string" ?{children}
}
+
+
+ )
+}
diff --git a/src/components/CCIP/TutorialSetup/TutorialStep.module.css b/src/components/CCIP/TutorialSetup/TutorialStep.module.css
new file mode 100644
index 00000000000..8b4db9def53
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/TutorialStep.module.css
@@ -0,0 +1,37 @@
+.step {
+ position: relative;
+ padding: 1.5rem;
+ border-radius: 12px;
+ background: #fff;
+ margin-bottom: 1rem;
+ border: 1px solid #e2e8f0;
+ transition: all 0.2s ease;
+}
+
+.step:hover {
+ border-color: #375bd2;
+ box-shadow: 0 4px 12px rgba(55, 91, 210, 0.08);
+}
+
+.stepHeader {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+}
+
+.stepTitle {
+ flex: 1;
+ font-weight: 600;
+ color: #1e293b;
+ font-size: 1.125rem;
+}
+
+.checkbox {
+ margin-left: auto;
+}
+
+.stepContent {
+ color: #475569;
+ line-height: 1.6;
+}
diff --git a/src/components/CCIP/TutorialSetup/TutorialStep.tsx b/src/components/CCIP/TutorialSetup/TutorialStep.tsx
new file mode 100644
index 00000000000..82250f736b9
--- /dev/null
+++ b/src/components/CCIP/TutorialSetup/TutorialStep.tsx
@@ -0,0 +1,18 @@
+import styles from "./TutorialStep.module.css"
+
+interface TutorialStepProps {
+ id?: string
+ title: string
+ children: React.ReactNode
+ checkbox?: React.ReactNode
+}
+
+export const TutorialStep = ({ id, title, children, checkbox }: TutorialStepProps) => (
+ {title}
+ {description && {description}
}
+ {children}
+
+ {title}
+ {checkbox &&
+ {checkbox}
}
+ {children}
+
-
+
Open in Remix
What is Remix?
diff --git a/src/components/CodeSample/CodeSampleReact.tsx b/src/components/CodeSample/CodeSampleReact.tsx
new file mode 100644
index 00000000000..ae8fcc81115
--- /dev/null
+++ b/src/components/CodeSample/CodeSampleReact.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import { useRemixUrl } from "src/hooks/useRemixUrl"
+
+interface CodeSampleReactProps {
+ src: string
+ showButtonOnly?: boolean
+ optimize?: boolean
+ runs?: number
+}
+
+export const CodeSampleReact: React.FC = ({ src, showButtonOnly = false, optimize, runs }) => {
+ const remixUrl = useRemixUrl(src, { optimize, runs })
+
+ const isSolidityFile = src.match(/\.sol/)
+ const isSample = isSolidityFile && (src.indexOf("samples/") === 0 || src.indexOf("/samples/") === 0)
+
+ if (!isSample || !showButtonOnly || !remixUrl) return null
+
+ return (
+
+ )
+}
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 00000000000..6e2c2f733bb
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,36 @@
+import React, { Component, ErrorInfo, ReactNode } from "react"
+
+interface Props {
+ children: ReactNode
+ fallback?: ReactNode
+ onError?: (error: Error, errorInfo: ErrorInfo) => void
+}
+
+interface State {
+ hasError: boolean
+ error: Error | null
+}
+
+export class ErrorBoundary extends Component {
+ public state: State = {
+ hasError: false,
+ error: null,
+ }
+
+ public static getDerivedStateFromError(error: Error): State {
+ return { hasError: true, error }
+ }
+
+ public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+ console.error("Error caught by boundary:", error, errorInfo)
+ this.props.onError?.(error, errorInfo)
+ }
+
+ public render() {
+ if (this.state.hasError) {
+ return this.props.fallback ||
+}
+
+interface Window {
+ dataLayer?: {
+ push: (event: { event: string } & Record) => void
+ }
+}
+
+declare const window: Window
+
+export const ReactCopyText = ({
+ text,
+ code,
+ format,
+ formatType,
+ eventName,
+ additionalInfo = {},
+}: ReactCopyTextProps) => {
+ const formatText = (text: string, type: string | undefined) => {
+ if (type === "bytes32" && text.length > 10) {
+ return text.slice(0, 6) + "..." + text.slice(-4)
+ }
+ return text
+ }
+
+ const displayText = format ? formatText(text, formatType) : text
+
+ const handleClick = (e: React.MouseEvent) => {
+ e.preventDefault()
+
+ if (eventName !== undefined) {
+ const dataLayerEvent = {
+ event: eventName,
+ ...additionalInfo,
+ }
+ window.dataLayer?.push(dataLayerEvent)
+ }
+ }
+
+ return (
+
+ {code ?
+
diff --git a/src/stores/lanes/index.ts b/src/stores/lanes/index.ts
new file mode 100644
index 00000000000..e42df291390
--- /dev/null
+++ b/src/stores/lanes/index.ts
@@ -0,0 +1,605 @@
+import { atom, computed } from "nanostores"
+import { Environment } from "@config/data/ccip"
+import type { Network } from "@config/data/ccip/types"
+import { utils } from "ethers"
+
+export type DeployedContracts = {
+ token?: string
+ tokenPool?: string
+ tokenPools?: string[]
+ registered?: boolean
+ configured?: boolean
+ poolType?: "lock" | "burn"
+}
+
+export interface TokenBucketState {
+ tokens: string
+ lastUpdated: number
+ isEnabled: boolean
+ capacity: string
+ rate: string
+}
+
+export const TUTORIAL_STEPS = {
+ setup: {
+ id: "setup",
+ title: "Setup",
+ subSteps: {
+ "browser-setup": "Web Browser Setup",
+ "gas-tokens": "Native Gas Tokens Ready",
+ "blockchains-selected": "Blockchains Selected",
+ "contracts-imported": "Contracts Imported",
+ },
+ },
+ sourceChain: {
+ id: "sourceChain",
+ title: "Source Chain",
+ subSteps: {
+ "token-deployed": "Token Deployed",
+ "admin-claimed": "Admin Role Claimed",
+ "admin-accepted": "Admin Role Accepted",
+ "pool-deployed": "Pool Deployed",
+ "pool-registered": "Pool Registered",
+ },
+ },
+ destinationChain: {
+ id: "destinationChain",
+ title: "Destination Chain",
+ subSteps: {
+ "dest-token-deployed": "Token Deployed",
+ "admin-claimed": "Admin Role Claimed",
+ "admin-accepted": "Admin Role Accepted",
+ "dest-pool-deployed": "Pool Deployed",
+ "dest-pool-registered": "Pool Registered",
+ },
+ },
+ sourceConfig: {
+ id: "sourceConfig",
+ title: "Source Configuration",
+ subSteps: {
+ "source-privileges": "Grant Burn and Mint Privileges",
+ "source-pool-config": "Configure Pool",
+ "source-verification": "Verify Configuration",
+ },
+ },
+ destinationConfig: {
+ id: "destinationConfig",
+ title: "Destination Configuration",
+ subSteps: {
+ "dest-privileges": "Grant Burn and Mint Privileges",
+ "dest-pool-config": "Configure Pool",
+ "dest-verification": "Verify Configuration",
+ },
+ },
+} as const
+
+export type StepId = keyof typeof TUTORIAL_STEPS
+export type SubStepId = keyof (typeof TUTORIAL_STEPS)[T]["subSteps"]
+
+export interface RateLimiterConfig {
+ enabled: boolean
+ capacity: string
+ rate: string
+}
+
+export type RateLimits = {
+ inbound: RateLimiterConfig
+ outbound: RateLimiterConfig
+}
+
+export type LaneState = {
+ sourceChain: string
+ destinationChain: string
+ environment: Environment
+ sourceNetwork: Network | null
+ destinationNetwork: Network | null
+ sourceContracts: DeployedContracts
+ destinationContracts: DeployedContracts
+ progress: Record>
+ inboundRateLimiter: TokenBucketState | null
+ outboundRateLimiter: TokenBucketState | null
+ sourceRateLimits: RateLimits | null
+ destinationRateLimits: RateLimits | null
+ currentStep?: StepId
+}
+
+// Add performance monitoring
+const monitorStoreUpdate = (action: string, details: Record) => {
+ if (process.env.NODE_ENV === "development") {
+ console.log(`[StoreAction] ${action}:`, {
+ ...details,
+ timestamp: new Date().toISOString(),
+ })
+ }
+}
+
+// Define conditions at the top level
+const conditions = [
+ // Prerequisites conditions
+ {
+ stepId: "setup" as StepId,
+ subStepId: "browser-setup",
+ check: (state: LaneState) => state.progress.setup?.["browser-setup"] === true,
+ dependencies: [] as StepId[],
+ },
+ {
+ stepId: "setup" as StepId,
+ subStepId: "gas-tokens",
+ check: (state: LaneState) => state.progress.setup?.["gas-tokens"] === true,
+ dependencies: ["setup"] as StepId[],
+ },
+ {
+ stepId: "setup" as StepId,
+ subStepId: "blockchains-selected",
+ check: (state: LaneState) => {
+ const sourceSelected = Boolean(state.sourceChain && state.sourceNetwork)
+ const destSelected = Boolean(state.destinationChain && state.destinationNetwork)
+ return sourceSelected && destSelected
+ },
+ dependencies: ["setup"] as StepId[],
+ },
+ {
+ stepId: "setup" as StepId,
+ subStepId: "contracts-imported",
+ check: (state: LaneState) => state.progress.setup?.["contracts-imported"] === true,
+ dependencies: ["setup"] as StepId[],
+ },
+ // Token deployment conditions
+ {
+ stepId: "sourceChain" as StepId,
+ subStepId: "token-deployed",
+ check: (state: LaneState) => {
+ const hasToken = !!state.sourceContracts.token && utils.isAddress(state.sourceContracts.token)
+ return hasToken
+ },
+ dependencies: ["setup"] as StepId[],
+ },
+ {
+ stepId: "sourceChain" as StepId,
+ subStepId: "pool-deployed",
+ check: (state: LaneState) => {
+ const hasPool = !!state.sourceContracts.tokenPool && utils.isAddress(state.sourceContracts.tokenPool)
+ return hasPool
+ },
+ dependencies: ["sourceChain"] as StepId[],
+ },
+ {
+ stepId: "sourceChain" as StepId,
+ subStepId: "pool-registered",
+ check: (state: LaneState) => !!state.sourceContracts.registered,
+ dependencies: ["sourceChain"] as StepId[],
+ },
+ {
+ stepId: "destinationChain" as StepId,
+ subStepId: "dest-token-deployed",
+ check: (state: LaneState) => !!state.destinationContracts.token,
+ dependencies: ["setup"] as StepId[],
+ },
+ {
+ stepId: "destinationChain" as StepId,
+ subStepId: "dest-pool-deployed",
+ check: (state: LaneState) => {
+ const hasPool = !!state.destinationContracts.tokenPool && utils.isAddress(state.destinationContracts.tokenPool)
+ return hasPool
+ },
+ dependencies: ["destinationChain"] as StepId[],
+ },
+ {
+ stepId: "destinationChain" as StepId,
+ subStepId: "dest-pool-registered",
+ check: (state: LaneState) => !!state.destinationContracts.registered,
+ dependencies: ["destinationChain"] as StepId[],
+ },
+ {
+ stepId: "sourceChain" as StepId,
+ subStepId: "admin-claimed",
+ check: (state: LaneState) => state.progress.sourceChain?.["admin-claimed"] === true,
+ dependencies: ["sourceChain"] as StepId[],
+ },
+ {
+ stepId: "sourceChain" as StepId,
+ subStepId: "admin-accepted",
+ check: (state: LaneState) => state.progress.sourceChain?.["admin-accepted"] === true,
+ dependencies: ["sourceChain"] as StepId[],
+ },
+ {
+ stepId: "destinationChain" as StepId,
+ subStepId: "admin-claimed",
+ check: (state: LaneState) => state.progress.destinationChain?.["admin-claimed"] === true,
+ dependencies: ["destinationChain"] as StepId[],
+ },
+ {
+ stepId: "destinationChain" as StepId,
+ subStepId: "admin-accepted",
+ check: (state: LaneState) => state.progress.destinationChain?.["admin-accepted"] === true,
+ dependencies: ["destinationChain"] as StepId[],
+ },
+ {
+ stepId: "sourceConfig" as StepId,
+ subStepId: "source-privileges",
+ check: (state: LaneState) => state.progress.sourceConfig?.["source-privileges"] === true,
+ dependencies: ["sourceChain"],
+ },
+ {
+ stepId: "sourceConfig" as StepId,
+ subStepId: "source-pool-config",
+ check: (state: LaneState) => state.progress.sourceConfig?.["source-pool-config"] === true,
+ dependencies: ["sourceChain"],
+ },
+ {
+ stepId: "sourceConfig" as StepId,
+ subStepId: "source-verification",
+ check: (state: LaneState) => state.progress.sourceConfig?.["source-verification"] === true,
+ dependencies: ["sourceChain"],
+ },
+ {
+ stepId: "destinationConfig" as StepId,
+ subStepId: "dest-privileges",
+ check: (state: LaneState) => state.progress.destinationConfig?.["dest-privileges"] === true,
+ dependencies: ["destinationChain"],
+ },
+ {
+ stepId: "destinationConfig" as StepId,
+ subStepId: "dest-pool-config",
+ check: (state: LaneState) => state.progress.destinationConfig?.["dest-pool-config"] === true,
+ dependencies: ["destinationChain"],
+ },
+ {
+ stepId: "destinationConfig" as StepId,
+ subStepId: "dest-verification",
+ check: (state: LaneState) => state.progress.destinationConfig?.["dest-verification"] === true,
+ dependencies: ["destinationChain"],
+ },
+]
+
+// Helper function to check if prerequisites are complete
+export const arePrerequisitesComplete = (state: LaneState): boolean => {
+ return (
+ state.progress.setup?.["browser-setup"] === true &&
+ state.progress.setup?.["gas-tokens"] === true &&
+ state.progress.setup?.["blockchains-selected"] === true &&
+ state.progress.setup?.["contracts-imported"] === true
+ )
+}
+
+// Create individual atoms for each step's progress
+export const setupProgressStore = atom>({})
+export const sourceChainProgressStore = atom>({})
+export const destinationChainProgressStore = atom>({})
+export const sourceConfigProgressStore = atom>({})
+export const destinationConfigProgressStore = atom>({})
+
+// Computed store that combines all progress
+export const progressStore = computed(
+ [
+ setupProgressStore,
+ sourceChainProgressStore,
+ destinationChainProgressStore,
+ sourceConfigProgressStore,
+ destinationConfigProgressStore,
+ ],
+ (setup, sourceChain, destinationChain, sourceConfig, destinationConfig) => ({
+ setup,
+ sourceChain,
+ destinationChain,
+ sourceConfig,
+ destinationConfig,
+ })
+)
+
+// Main store without progress
+export const laneStore = atom>({
+ sourceChain: "",
+ destinationChain: "",
+ environment: Environment.Testnet,
+ sourceNetwork: null,
+ destinationNetwork: null,
+ sourceContracts: {},
+ destinationContracts: {},
+ inboundRateLimiter: null,
+ outboundRateLimiter: null,
+ sourceRateLimits: {
+ inbound: { enabled: false, capacity: "", rate: "" },
+ outbound: { enabled: false, capacity: "", rate: "" },
+ },
+ destinationRateLimits: {
+ inbound: { enabled: false, capacity: "", rate: "" },
+ outbound: { enabled: false, capacity: "", rate: "" },
+ },
+})
+
+// Helper to get the correct store for a step with type safety
+const getStoreForStep = (stepId: StepId) => {
+ switch (stepId) {
+ case "setup":
+ return setupProgressStore
+ case "sourceChain":
+ return sourceChainProgressStore
+ case "destinationChain":
+ return destinationChainProgressStore
+ case "sourceConfig":
+ return sourceConfigProgressStore
+ case "destinationConfig":
+ return destinationConfigProgressStore
+ default:
+ throw new Error(`Invalid step ID: ${stepId}`)
+ }
+}
+
+// Standard progress update function for all checkboxes
+export const updateStepProgress = (stepId: string, subStepId: string, completed: boolean) => {
+ const startTime = Date.now()
+ const store = getStoreForStep(stepId as StepId)
+ const current = store.get()
+
+ if (current[subStepId] === completed) {
+ monitorStoreUpdate("SkippedUpdate", {
+ stepId,
+ subStepId,
+ reason: "No change needed",
+ duration: Date.now() - startTime,
+ })
+ return
+ }
+
+ monitorStoreUpdate("StartUpdate", {
+ stepId,
+ subStepId,
+ completed,
+ currentState: current,
+ })
+
+ // Batch updates to minimize renders
+ const updates = new Map()
+
+ // Update progress store
+ updates.set(store, {
+ ...current,
+ [subStepId]: completed,
+ })
+
+ // For pool registration, also update contract state
+ if (
+ (stepId === "sourceChain" && subStepId === "pool-registered") ||
+ (stepId === "destinationChain" && subStepId === "dest-pool-registered")
+ ) {
+ const chain = stepId === "sourceChain" ? "source" : "destination"
+ const contractsKey = `${chain}Contracts` as const
+ const currentState = laneStore.get()
+
+ updates.set(laneStore, {
+ ...currentState,
+ [contractsKey]: {
+ ...currentState[contractsKey],
+ registered: completed,
+ },
+ })
+ }
+
+ // Apply all updates in a single batch
+ updates.forEach((value, store) => {
+ store.set(value)
+ })
+
+ monitorStoreUpdate("CompleteUpdate", {
+ stepId,
+ subStepId,
+ duration: Date.now() - startTime,
+ })
+}
+
+// Helper to update progress for a specific step (internal use only)
+function updateProgressForStep(stepId: StepId, updates: Record) {
+ const store = getStoreForStep(stepId)
+ const current = store.get()
+ store.set({
+ ...current,
+ ...updates,
+ })
+}
+
+// Utility function to handle contract progress updates
+const updateContractProgress = (type: keyof DeployedContracts, chain: "source" | "destination", value: string) => {
+ const isValidAddress = Boolean(value) && utils.isAddress(value)
+
+ if (type === "token") {
+ updateProgressForStep(chain === "source" ? "sourceChain" : "destinationChain", {
+ [chain === "source" ? "token-deployed" : "dest-token-deployed"]: isValidAddress,
+ })
+ } else if (type === "tokenPool") {
+ updateProgressForStep(chain === "source" ? "sourceChain" : "destinationChain", {
+ [chain === "source" ? "pool-deployed" : "dest-pool-deployed"]: isValidAddress,
+ })
+ }
+}
+
+export const setSourceContract = (type: keyof DeployedContracts, value: string) => {
+ const currentState = laneStore.get()
+ monitorStoreUpdate("setSourceContract", { type, value })
+
+ laneStore.set({
+ ...currentState,
+ sourceContracts: {
+ ...currentState.sourceContracts,
+ [type]: value,
+ },
+ })
+
+ updateContractProgress(type, "source", value)
+}
+
+export const setDestinationContract = (type: keyof DeployedContracts, value: string) => {
+ const currentState = laneStore.get()
+ monitorStoreUpdate("setDestinationContract", { type, value })
+
+ laneStore.set({
+ ...currentState,
+ destinationContracts: {
+ ...currentState.destinationContracts,
+ [type]: value,
+ },
+ })
+
+ updateContractProgress(type, "destination", value)
+}
+
+// Helper to subscribe to specific step's progress
+export const subscribeToStepProgress = (stepId: StepId, callback: (progress: Record) => void) => {
+ const store = getStoreForStep(stepId)
+ return store.subscribe(callback)
+}
+
+export const setRateLimiterState = (type: "inbound" | "outbound", state: TokenBucketState | null) => {
+ const current = laneStore.get()
+ laneStore.set({
+ ...current,
+ [type === "inbound" ? "inboundRateLimiter" : "outboundRateLimiter"]: state,
+ })
+}
+
+export const setRemotePools = (chain: "source" | "destination", pools: string[]) => {
+ const current = laneStore.get()
+ const contracts = chain === "source" ? "sourceContracts" : "destinationContracts"
+ laneStore.set({
+ ...current,
+ [contracts]: {
+ ...current[contracts],
+ tokenPool: pools[0],
+ tokenPools: pools,
+ },
+ })
+}
+
+export const validateRateLimits = (limits: RateLimits): boolean => {
+ if (!limits) return false
+
+ const validateConfig = (config: RateLimiterConfig) => {
+ if (config.enabled) {
+ try {
+ // Parse as BigInt and validate
+ const capacity = BigInt(config.capacity || "0")
+ const rate = BigInt(config.rate || "0")
+
+ // Ensure it's a valid uint128
+ const MAX_UINT128 = BigInt(2) ** BigInt(128) - BigInt(1)
+ return capacity >= 0n && capacity <= MAX_UINT128 && rate >= 0n && rate <= MAX_UINT128
+ } catch (e) {
+ console.error("Rate limit validation error:", e)
+ return false
+ }
+ }
+ return true
+ }
+
+ return validateConfig(limits.inbound) && validateConfig(limits.outbound)
+}
+
+// Helper to update rate limits with validation
+export const updateRateLimits = (
+ chain: "source" | "destination",
+ type: "inbound" | "outbound",
+ updates: Partial
+) => {
+ const current = laneStore.get()
+ const rateLimitsKey = `${chain}RateLimits` as const
+ const currentLimits = current[rateLimitsKey] ?? {
+ inbound: { enabled: false, capacity: "", rate: "" },
+ outbound: { enabled: false, capacity: "", rate: "" },
+ }
+
+ const newLimits = {
+ ...currentLimits,
+ [type]: {
+ ...currentLimits[type],
+ ...updates,
+ },
+ }
+
+ if (validateRateLimits(newLimits)) {
+ laneStore.set({
+ ...current,
+ [rateLimitsKey]: newLimits,
+ })
+ return true
+ }
+ return false
+}
+
+// Helper function to get complete state
+const getCompleteState = (): LaneState => ({
+ ...laneStore.get(),
+ progress: progressStore.get(),
+})
+
+// Update checkSpecificProgress to optionally accept state
+const checkSpecificProgress = (conditionsToCheck: typeof conditions, providedState?: LaneState) => {
+ const state = providedState || getCompleteState()
+
+ // Only check dependent conditions if prerequisites are complete
+ if (!arePrerequisitesComplete(state) && !conditionsToCheck.every((c) => c.stepId === "setup")) {
+ return
+ }
+
+ for (const condition of conditionsToCheck) {
+ const startTime = performance.now()
+ const isComplete = condition.check(state)
+
+ monitorStoreUpdate("ConditionCheck", {
+ stepId: condition.stepId,
+ subStepId: condition.subStepId,
+ isComplete,
+ duration: Math.round(performance.now() - startTime),
+ })
+
+ // Update progress if needed
+ if (isComplete !== state.progress[condition.stepId]?.[condition.subStepId]) {
+ updateProgressForStep(condition.stepId, { [condition.subStepId]: isComplete })
+ }
+ }
+}
+
+// Update the progress check function to be more focused
+export const checkProgress = (stepId: StepId, subStepId: string) => {
+ const state = getCompleteState()
+ monitorStoreUpdate("StartUpdate", { stepId, subStepId, currentState: state })
+
+ // For setup steps, check all setup conditions and their dependencies
+ if (stepId === "setup") {
+ const setupConditions = conditions.filter((condition) => condition.stepId === "setup")
+ checkSpecificProgress(setupConditions, state)
+
+ // If all prerequisites are complete, check dependent conditions
+ if (arePrerequisitesComplete(state)) {
+ const dependentConditions = conditions.filter((condition) => condition.dependencies.includes("setup"))
+ checkSpecificProgress(dependentConditions, state)
+ }
+ } else {
+ // For other steps, check only directly related conditions
+ const relevantConditions = conditions.filter(
+ (condition) =>
+ (condition.stepId === stepId && condition.subStepId === subStepId) || condition.dependencies.includes(stepId)
+ )
+ if (relevantConditions.length > 0) {
+ checkSpecificProgress(relevantConditions, state)
+ }
+ }
+}
+
+export const navigateToStep = (stepId: StepId) => {
+ const store = getStoreForStep(stepId)
+ const currentState = store.get()
+
+ // Update lane store to reflect the current step
+ const currentLaneState = laneStore.get()
+ laneStore.set({
+ ...currentLaneState,
+ currentStep: stepId,
+ })
+
+ // Emit navigation event for scroll handling
+ window.dispatchEvent(
+ new CustomEvent("tutorial-navigate", {
+ detail: { stepId },
+ })
+ )
+}
diff --git a/tsconfig.json b/tsconfig.json
index 222ebcf539b..ef11db7bc8d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,15 +19,18 @@
"baseUrl": ".",
"paths": {
"~/*": ["src/*"],
+ "@components": ["src/components/index.ts"],
+ "@components/*": ["src/components/*"],
"@config": ["src/config/"],
"@config/*": ["src/config/*"],
"@features/*": ["src/features/*"],
- "@variables": ["src/config/markdown-variables.ts"],
- "@components/*": ["src/components/*"],
- "@components": ["src/components/index.ts"],
- "@abi": ["src/features/abi/index.ts"],
"@graphql": ["src/graphql/"],
- "@graphql/*": ["src/graphql/*"]
+ "@graphql/*": ["src/graphql/*"],
+ "@stores/*": ["src/stores/*"],
+ "@utils": ["src/utils/"],
+ "@utils/*": ["src/utils/*"],
+ "@variables": ["src/config/markdown-variables.ts"],
+ "@abi": ["src/features/abi/index.ts"]
},
"strictNullChecks": true,
"verbatimModuleSyntax": false
Something went wrong. Please try again.
+ }
+
+ return this.props.children
+ }
+}
diff --git a/src/components/QuickLinks/sections/ProductChainTable.tsx b/src/components/QuickLinks/sections/ProductChainTable.tsx
index 06a3b3fd329..5d9bbd3ddbb 100644
--- a/src/components/QuickLinks/sections/ProductChainTable.tsx
+++ b/src/components/QuickLinks/sections/ProductChainTable.tsx
@@ -31,8 +31,8 @@ const handleLinkClick = (productTitle: string, network: string, url: string) =>
window.dataLayer.push({
event: "quick_link_clicked",
product: productTitle,
- network: network,
- url: url,
+ network,
+ url,
})
}
diff --git a/src/components/ReactCopyText.css b/src/components/ReactCopyText.css
new file mode 100644
index 00000000000..f308fcb8237
--- /dev/null
+++ b/src/components/ReactCopyText.css
@@ -0,0 +1,18 @@
+.copyContainer {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-1x);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-break: break-all;
+ margin-top: 0;
+}
+
+.copyBtn {
+ background: none;
+ border: none;
+}
+
+.copyBtn:hover {
+ color: var(--color-text-link);
+}
diff --git a/src/components/ReactCopyText.tsx b/src/components/ReactCopyText.tsx
new file mode 100644
index 00000000000..d02f52b7cde
--- /dev/null
+++ b/src/components/ReactCopyText.tsx
@@ -0,0 +1,63 @@
+import { clsx } from "../lib"
+import "./ReactCopyText.css"
+
+interface ReactCopyTextProps {
+ text: string
+ code?: boolean
+ format?: boolean
+ formatType?: "bytes32"
+ eventName?: string
+ additionalInfo?: Record{displayText} : displayText}
+
+
+ )
+}
diff --git a/src/components/RightSidebar/RightSidebar.astro b/src/components/RightSidebar/RightSidebar.astro
index 11a76ddd9e2..d8aab60c29c 100644
--- a/src/components/RightSidebar/RightSidebar.astro
+++ b/src/components/RightSidebar/RightSidebar.astro
@@ -26,10 +26,9 @@ const { githubEditUrl, headings } = Astro.props
diff --git a/src/pages/ccip/tutorials/[...slug].astro b/src/pages/ccip/tutorials/[...slug].astro
new file mode 100644
index 00000000000..7d643c37303
--- /dev/null
+++ b/src/pages/ccip/tutorials/[...slug].astro
@@ -0,0 +1,37 @@
+---
+import { CollectionEntry, getCollection } from "astro:content"
+import TutorialLayout from "../../../layouts/TutorialLayout.astro"
+import DocsLayout from "../../../layouts/DocsLayout.astro"
+
+type Props = {
+ entry: CollectionEntry<"ccip">
+}
+
+export async function getStaticPaths() {
+ const entries = await getCollection("ccip", (entry) => {
+ return entry.slug.startsWith("tutorials/")
+ })
+
+ const paths: { params: { slug: string }; props: Props }[] = []
+
+ entries.forEach((entry) => {
+ const tutorialSlug = entry.slug.replace("tutorials/", "")
+ paths.push({
+ params: { slug: tutorialSlug },
+ props: { entry },
+ })
+ })
+
+ return paths
+}
+
+const { entry } = Astro.props
+const { Content, headings } = await entry.render()
+
+// Only use TutorialLayout for specific interactive tutorials
+const Layout = entry.id === "tutorials/cross-chain-tokens/register-from-eoa-remix.mdx" ? TutorialLayout : DocsLayout
+---
+
+