From ebfc402a617a0dfc27b6495ab25ef51504267b8f Mon Sep 17 00:00:00 2001 From: aelmanaa Date: Sun, 8 Dec 2024 17:57:40 +0100 Subject: [PATCH] update --- .../AdminSetupStep.tsx | 1 - .../DeployPoolStep.module.css | 176 ++++++++++++++++++ .../DeployPoolStep.tsx | 165 ++++++++++++++++ .../CCIP/TutorialSetup/SolidityParam.tsx | 2 +- .../register-from-eoa-remix.mdx | 43 +---- 5 files changed, 344 insertions(+), 43 deletions(-) create mode 100644 src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.module.css create mode 100644 src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx diff --git a/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.tsx b/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.tsx index dffdb335175..79e684fd0f6 100644 --- a/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.tsx +++ b/src/components/CCIP/TutorialBlockchainSelector/AdminSetupStep.tsx @@ -4,7 +4,6 @@ import { NetworkCheck } from "../TutorialSetup/NetworkCheck" import { TutorialCard } from "../TutorialSetup/TutorialCard" import { TutorialStep } from "../TutorialSetup/TutorialStep" import { NetworkAddress } from "./NetworkAddress" -import { StoredContractAddress } from "./StoredContractAddress" import { StepCheckbox } from "../TutorialProgress/StepCheckbox" import { SolidityParam } from "../TutorialSetup/SolidityParam" import styles from "./AdminSetupStep.module.css" diff --git a/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.module.css b/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.module.css new file mode 100644 index 00000000000..bf7138b46f6 --- /dev/null +++ b/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.module.css @@ -0,0 +1,176 @@ +.steps { + padding-left: var(--space-4x); + margin: 0; + display: flex; + flex-direction: column; + gap: var(--space-4x); +} + +.parametersIntro { + margin-bottom: var(--space-3x); +} + +.parameters { + 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; + gap: var(--space-3x); +} + +.addressInput { + margin-top: var(--space-2x); +} + +/* Pool-specific styles */ +.poolTypes { + display: flex; + gap: var(--space-2x); + margin-bottom: var(--space-3x); +} + +.poolTypes button { + padding: var(--space-2x) var(--space-4x); + border: 1px solid var(--color-border); + border-radius: var(--border-radius); + background: var(--color-background); + color: var(--color-text); + cursor: pointer; + transition: all 0.2s ease; +} + +.poolTypes button.active { + background: var(--color-accent); + color: white; + border-color: var(--color-accent); +} + +.poolDescription { + color: var(--color-text-secondary); + font-size: var(--font-size-sm); + margin-bottom: var(--space-3x); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .poolTypes { + flex-direction: column; + } + + .poolTypes button { + width: 100%; + } +} + +.poolSelection { + margin-bottom: var(--space-6x); +} + +.selectionHeader { + margin-bottom: var(--space-6x); +} + +.selectionTitle { + font-size: var(--font-size-xl); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--space-2x); +} + +.selectionDescription { + color: var(--color-text-secondary); + font-size: var(--font-size-base); + margin-bottom: var(--space-4x); +} + +.poolOptions { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4x); +} + +.poolOption { + position: relative; + padding: var(--space-4x); + border: 2px solid var(--color-border); + border-radius: var(--border-radius); + background: var(--color-background); + text-align: left; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + flex-direction: column; + gap: var(--space-4x); +} + +.poolOption:hover { + border-color: var(--color-accent); +} + +.poolOption.selected { + border-color: var(--color-accent); + background: var(--color-background-secondary); +} + +.poolTitle { + padding-bottom: var(--space-3x); + border-bottom: 1px solid var(--color-border); +} + +.poolName { + font-size: var(--font-size-lg); + font-weight: 600; + color: var(--color-text-primary); +} + +.selectedIndicator { + position: absolute; + top: var(--space-4x); + right: var(--space-4x); + width: 24px; + height: 24px; + border-radius: 50%; + background: var(--color-accent); + border: 2px solid white; + box-shadow: 0 0 0 2px var(--color-accent); +} + +.selectedIndicator::after { + content: "✓"; + color: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: var(--font-size-base); + font-weight: bold; +} + +.poolContent { + display: flex; + flex-direction: column; + gap: var(--space-3x); + padding-top: var(--space-2x); +} + +.poolDescription { + color: var(--color-text); + font-size: var(--font-size-base); + line-height: 1.5; +} + +.poolNote { + font-size: var(--font-size-sm); + color: var(--color-text-secondary); + padding: var(--space-2x); + background: var(--color-background); + border-radius: var(--border-radius); +} + +@media (max-width: 768px) { + .poolOptions { + grid-template-columns: 1fr; + } +} diff --git a/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx b/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx new file mode 100644 index 00000000000..68cf8d0866c --- /dev/null +++ b/src/components/CCIP/TutorialBlockchainSelector/DeployPoolStep.tsx @@ -0,0 +1,165 @@ +import { useState } from "react" +import { useStore } from "@nanostores/react" +import { laneStore } from "@stores/lanes" +import { ContractAddress } from "./ContractAddress" +import { TutorialCard } from "../TutorialSetup/TutorialCard" +import { TutorialStep } from "../TutorialSetup/TutorialStep" +import { NetworkCheck } from "../TutorialSetup/NetworkCheck" +import { SolidityParam } from "../TutorialSetup/SolidityParam" +import { StoredContractAddress } from "./StoredContractAddress" +import { NetworkAddress } from "./NetworkAddress" +import styles from "./DeployPoolStep.module.css" + +interface DeployPoolStepProps { + chain: "source" | "destination" +} + +export const DeployPoolStep = ({ chain }: DeployPoolStepProps) => { + const [poolType, setPoolType] = useState<"lock" | "burn">("lock") + const state = useStore(laneStore) + const network = chain === "source" ? state.sourceNetwork : state.destinationNetwork + const networkInfo = network ? { name: network.name, logo: network.logo } : { name: "loading..." } + + return ( + + + +
    + +
    + 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" ? ( + <> + } + /> + + + } + /> + + } + /> + + ) : ( + <> + } + /> + + + } + /> + } + /> + + )} +
    +     + + +
      +
    • Click "Deploy" and confirm in MetaMask
      • +
    • Copy your pool address from "Deployed Contracts"
      • +
    +
    + +
    +     +
+ + ) +} diff --git a/src/components/CCIP/TutorialSetup/SolidityParam.tsx b/src/components/CCIP/TutorialSetup/SolidityParam.tsx index c6bc233c374..e166a5d0da9 100644 --- a/src/components/CCIP/TutorialSetup/SolidityParam.tsx +++ b/src/components/CCIP/TutorialSetup/SolidityParam.tsx @@ -5,7 +5,7 @@ interface SolidityParamProps { name: string type: string description: string - example?: string + example?: string | React.ReactNode } export const SolidityParam = ({ name, type, description, example }: SolidityParamProps) => ( diff --git a/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx b/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx index 1a14932fd8c..110cca2a8d8 100644 --- a/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx +++ b/src/content/ccip/tutorials/cross-chain-tokens/register-from-eoa-remix.mdx @@ -24,6 +24,7 @@ import { SetupSection } from "@components/CCIP/TutorialSetup/SetupSection" import { DeployTokenStep } from "@components/CCIP/TutorialBlockchainSelector/DeployTokenStep" import { TutorialCard } from "@components/CCIP/TutorialSetup/TutorialCard" import { AdminSetupStep } from "@components/CCIP/TutorialBlockchainSelector/AdminSetupStep" +import { DeployPoolStep } from "@components/CCIP/TutorialBlockchainSelector/DeployPoolStep" This tutorial will guide you through enabling your tokens in CCIP using only your web browser and [Remix IDE](https://remix.ethereum.org). You'll learn how to deploy tokens and set up token pools without needing to install any development tools. @@ -83,47 +84,7 @@ The tutorial will use your provided token address for subsequent steps. -#### Deploy Token Pool - -1. Ensure MetaMask is still connected to source blockchain: - -1. Choose and deploy your token pool type: - - - Lock & Release Pool - Burn & Mint Pool - - - Select **LockReleaseTokenPool** contract and configure deployment parameters: - - - `tokenAddress`: Your deployed token address - - `localTokenDecimals`: Number of decimals for your token (e.g., 18) - - `allowlist`: Empty array `[]` to allow any address to transfer tokens, or specify addresses to restrict who can initiate transfers - - `rmnProxyAddress`: ARM Proxy contract - - `acceptLiquidity`: When `true`, enables external liquidity for lock/release mechanism - - `router`: CCIP Router contract - - - - Select **BurnMintTokenPool** contract and configure deployment parameters: - - - `tokenAddress`: Your deployed token address - - `localTokenDecimals`: Number of decimals for your token (e.g., 18) - - `allowlist`: Empty array `[]` to allow any address to transfer tokens, or specify addresses to restrict who can initiate transfers - - `rmnProxy`: ARM Proxy contract - - `router`: CCIP Router contract - - - - -After configuring: - -- Click "Deploy" and confirm in MetaMask -- Save your pool address:
- -
- -
+ #### Set Token Pool in Registry