update

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"

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;
+  }
+}

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 (
+    <TutorialCard title="Deploy Token Pool" description="Choose your pool type and deploy using Remix IDE">
+      <NetworkCheck network={networkInfo} />
+
+      <ol className={styles.steps}>
+        <TutorialStep title="Choose Pool Type">
+          <div className={styles.selectionDescription}>
+            Select the appropriate pool type based on your token's characteristics and requirements
+          </div>
+
+          <div className={styles.poolOptions}>
+            <button
+              className={`${styles.poolOption} ${poolType === "lock" ? styles.selected : ""}`}
+              onClick={() => setPoolType("lock")}
+            >
+              <div className={styles.poolTitle}>
+                <span className={styles.poolName}>Lock & Release Pool</span>
+                {poolType === "lock" && <span className={styles.selectedIndicator} />}
+              </div>
+              <div className={styles.poolContent}>
+                <p className={styles.poolDescription}>
+                  Suitable for tokens that already exist on this blockchain and can't be burned. Tokens are locked here
+                  and "wrapped" versions are minted on other chains.
+                </p>
+                <div className={styles.poolNote}>
+                  ℹ️ Deploy this on the blockchain where your token originally exists
+                </div>
+              </div>
+            </button>
+
+            <button
+              className={`${styles.poolOption} ${poolType === "burn" ? styles.selected : ""}`}
+              onClick={() => setPoolType("burn")}
+            >
+              <div className={styles.poolTitle}>
+                <span className={styles.poolName}>Burn & Mint Pool</span>
+                {poolType === "burn" && <span className={styles.selectedIndicator} />}
+              </div>
+              <div className={styles.poolContent}>
+                <p className={styles.poolDescription}>
+                  Standard mechanism for cross-chain transfers. Tokens are burned on one chain and minted on another,
+                  maintaining constant total supply.
+                </p>
+                <div className={styles.poolNote}>ℹ️ Use this for new tokens or tokens with burn/mint capability</div>
+              </div>
+            </button>
+          </div>
+        </TutorialStep>
+
+        <TutorialStep title="Set Parameters">
+          <div className={styles.parametersIntro}>
+            <p>Configure your pool by setting these required parameters in Remix:</p>
+          </div>
+          <div className={styles.parameters}>
+            {poolType === "lock" ? (
+              <>
+                <SolidityParam
+                  name="tokenAddress"
+                  type="address"
+                  description="The token contract this pool will manage"
+                  example={<StoredContractAddress type="token" chain={chain} />}
+                />
+                <SolidityParam
+                  name="localTokenDecimals"
+                  type="uint8"
+                  description="Number of decimals for your token"
+                  example="18"
+                />
+                <SolidityParam
+                  name="allowlist"
+                  type="address[]"
+                  description="Addresses allowed to transfer tokens (empty array for no restrictions)"
+                  example="[]"
+                />
+                <SolidityParam
+                  name="rmnProxyAddress"
+                  type="address"
+                  description="ARM Proxy contract"
+                  example={<NetworkAddress type="armProxy" chain={chain} />}
+                />
+                <SolidityParam
+                  name="acceptLiquidity"
+                  type="bool"
+                  description="Enable external liquidity for lock/release mechanism"
+                  example="true"
+                />
+                <SolidityParam
+                  name="router"
+                  type="address"
+                  description="CCIP Router contract"
+                  example={<NetworkAddress type="router" chain={chain} />}
+                />
+              </>
+            ) : (
+              <>
+                <SolidityParam
+                  name="tokenAddress"
+                  type="address"
+                  description="The token contract this pool will manage"
+                  example={<StoredContractAddress type="token" chain={chain} />}
+                />
+                <SolidityParam
+                  name="localTokenDecimals"
+                  type="uint8"
+                  description="Number of decimals for your token"
+                  example="18"
+                />
+                <SolidityParam
+                  name="allowlist"
+                  type="address[]"
+                  description="Addresses allowed to transfer tokens (empty array for no restrictions)"
+                  example="[]"
+                />
+                <SolidityParam
+                  name="rmnProxy"
+                  type="address"
+                  description="ARM Proxy contract"
+                  example={<NetworkAddress type="armProxy" chain={chain} />}
+                />
+                <SolidityParam
+                  name="router"
+                  type="address"
+                  description="CCIP Router contract"
+                  example={<NetworkAddress type="router" chain={chain} />}
+                />
+              </>
+            )}
+          </div>
+        </TutorialStep>
+
+        <TutorialStep title="Deploy Contract">
+          <ul>
+            <li>Click "Deploy" and confirm in MetaMask</li>
+            <li>Copy your pool address from "Deployed Contracts"</li>
+          </ul>
+          <div className={styles.addressInput}>
+            <ContractAddress type="tokenPool" chain={chain} placeholder="Enter deployed pool address" />
+          </div>
+        </TutorialStep>
+      </ol>
+    </TutorialCard>
+  )
+}

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) => (