Improve Flows

app/console/icm/setup/page.tsx

@@ -1,7 +1,42 @@
-import { redirect } from "next/navigation";
+import FlowIntroduction from "@/components/console/flow-introduction";
+import { type FlowConfig } from "@/components/console/step-flow";
+import { steps } from "./steps";
 
 export default function Page() {
-  redirect("/console/icm/setup/icm-messenger");
-}
+  const config: FlowConfig = {
+    title: "ICM Setup",
+    description: "Learn how to set up Interchain Messaging (ICM) on your L1, enabling cross-chain communication and applications like Interchain Token Transfers.",
+    metadata: {
+      prerequisites: [
+        { requirement: "Access to your L1 RPC endpoint", type: "infrastructure" },
+        { requirement: "Deployed L1 blockchain network", type: "infrastructure" },
+        { requirement: "Wallet connected to your L1 network", type: "wallet" },
+        { requirement: "Sufficient balance for contract deployments", type: "wallet" },
+        { requirement: "Basic understanding of smart contracts", type: "knowledge" },
+        { requirement: "Familiarity with cross-chain messaging concepts", type: "knowledge" },
+      ],
+      estimatedTime: "15-30 min",
+      useCases: [
+        "Enable cross-chain token transfers between your L1 and other chains",
+        "Build multi-chain dApps that communicate across networks",
+        "Create cross-chain NFT marketplaces or gaming ecosystems",
+        "Implement cross-chain governance or DAO voting",
+        "Bridge assets between your L1 and C-Chain or other L1s",
+      ],
+    },
+    resources: [
+      { label: "Interchain Messaging", href: "/academy/interchain-messaging" },
+      { label: "ICM & Chainlink", href: "/academy/icm-chainlink" },
+      { label: "Token Transfer", href: "/academy/interchain-token-transfer" },
+    ],
+  };
 
+  return (
+    <FlowIntroduction
+      config={config}
+      steps={steps}
+      url={import.meta.url}
+    />
+  );
+}
 

app/console/icm/setup/steps.ts

@@ -10,20 +10,47 @@ export const steps: StepDefinition[] = [
       key: "icm-messenger",
       title: "Deploy Teleporter Messenger",
       component: TeleporterMessenger,
+      description: "Deploy the core Teleporter Messenger contract that handles cross-chain message passing with built-in security guarantees. This contract manages message verification, execution, and receipt handling between chains.",
+      outcomes: [
+        "Teleporter Messenger contract deployed on your L1",
+        "Foundation for cross-chain communication established",
+      ],
     },
     {
       type: "single",
       key: "icm-registry",
       title: "Deploy Teleporter Registry",
       component: TeleporterRegistry,
+      description: "Deploy the Teleporter Registry contract that tracks different versions of the Teleporter Messenger and enables seamless upgrades. This ensures your cross-chain communication can evolve without disrupting existing integrations.",
+      outcomes: [
+        "Registry contract deployed with version tracking capabilities",
+        "Upgrade path configured for future Teleporter versions",
+      ],
     },
     {
       type: "branch",
       key: "icm-relayer-type",
       title: "Setup ICM Relayer",
+      description: "Configure a relayer to automatically deliver cross-chain messages. Choose between running your own infrastructure for full control, or using managed services for simplified deployment and maintenance.",
       options: [
-        { key: "self-hosted-relayer", label: "Setup Self Hosted ICM Relayer", component: ICMRelayer },
-        { key: "managed-testnet-relayer", label: "Managed Testnet Relayer", component: CreateManagedTestnetRelayer },
+        {
+          key: "self-hosted-relayer",
+          label: "Setup Self Hosted ICM Relayer",
+          component: ICMRelayer,
+          outcomes: [
+            "Full control over relayer infrastructure and configuration",
+            "Ability to customize message delivery and monitoring",
+          ],
+        },
+        {
+          key: "managed-testnet-relayer",
+          label: "Managed Testnet Relayer",
+          component: CreateManagedTestnetRelayer,
+          outcomes: [
+            "Quick setup with zero infrastructure management",
+            "Automated message delivery for testnet development",
+          ],
+        },
       ],
     },
 ];

app/console/ictt/setup/page.tsx

@@ -1,7 +1,40 @@
-import { redirect } from "next/navigation";
+import FlowIntroduction from "@/components/console/flow-introduction";
+import { type FlowConfig } from "@/components/console/step-flow";
+import { steps } from "./steps";
 
 export default function Page() {
-  redirect("/console/ictt/setup/deploy-test-erc20");
-}
-
+  const config: FlowConfig = {
+    title: "ICTT Setup",
+    description: "Set up Interchain Token Transfer (ICTT) to enable seamless token bridging between your L1 and other chains in the Avalanche ecosystem.",
+    metadata: {
+      prerequisites: [
+        { requirement: "ICM (Interchain Messaging) already set up on your L1", type: "infrastructure" },
+        { requirement: "RPC endpoints for home and remote chains", type: "infrastructure" },
+        { requirement: "Wallet with sufficient balance on both chains", type: "wallet" },
+        { requirement: "Source token contract address (or deploy new one)", type: "wallet" },
+        { requirement: "Understanding of token standards (ERC20)", type: "knowledge" },
+        { requirement: "Familiarity with cross-chain token bridging concepts", type: "knowledge" },
+      ],
+      estimatedTime: "20-40 min",
+      useCases: [
+        "Bridge existing ERC20 tokens between your L1 and other chains",
+        "Create wrapped versions of your native token on other networks",
+        "Enable liquidity sharing across multiple chains",
+        "Build cross-chain DeFi protocols with unified token access",
+        "Support multi-chain gaming with in-game currency transfers",
+      ],
+    },
+    resources: [
+      { label: "Interchain Token Transfer", href: "/academy/interchain-token-transfer" },
+      { label: "Interchain Messaging", href: "/academy/interchain-messaging" },
+    ],
+  };
 
+  return (
+    <FlowIntroduction
+      config={config}
+      steps={steps}
+      url={import.meta.url}
+    />
+  );
+}

app/console/ictt/setup/steps.ts

@@ -12,37 +12,86 @@ export const steps: StepDefinition[] = [
       type: "branch",
       key: "deploy-source-token",
       title: "Deploy Source Token",
+      description: "Deploy or select the token that will be bridged across chains. You can deploy a test ERC20 token for development purposes, or wrap your L1's native token to enable native asset transfers. If you already have a token deployed, you can skip this step.",
       optional: true,
       options: [
-        { key: "deploy-test-erc20", label: "Deploy Test ERC20", component: DeployExampleERC20 },
-        { key: "deploy-wrapped-native", label: "Deploy Wrapped Native Token", component: DeployWrappedNative },
+        { 
+          key: "deploy-test-erc20", 
+          label: "Deploy Test ERC20", 
+          component: DeployExampleERC20,
+          outcomes: [
+            "Standard ERC20 token deployed for testing purposes",
+            "Full control over token supply, name, and symbol",
+          ],
+        },
+        { 
+          key: "deploy-wrapped-native", 
+          label: "Deploy Wrapped Native Token", 
+          component: DeployWrappedNative,
+          outcomes: [
+            "Wrapped version of your L1's native token created",
+            "Support for bridging native assets across chains",
+          ],
+        },
       ],
     },
     {
       type: "single",
       key: "deploy-token-home",
       title: "Deploy Token Home",
       component: DeployTokenHome,
+      description: "Deploy the TokenHome contract on your source chain. This contract acts as the central hub for your token bridge, managing token locking (for native transfers), burning (for multi-mint), and minting operations. It coordinates with remote contracts to ensure secure cross-chain transfers.",
+      outcomes: [
+        "TokenHome contract deployed and linked to your token",
+        "Token bridge infrastructure configured on home chain",
+      ],
     },
     {
       type: "branch",
       key: "deploy-remote",
       title: "Deploy Remote",
+      description: "Deploy the token representation on the destination chain. Choose ERC20 Remote for standard token transfers with custom metadata support, or Native Remote if you want the token to be the native gas token on the destination chain with lower transaction costs.",
       options: [
-        { key: "erc20-remote", label: "Deploy ERC20 Token Remote", component: DeployERC20TokenRemote },
-        { key: "native-remote", label: "Deploy Native Token Remote", component: DeployNativeTokenRemote },
+        { 
+          key: "erc20-remote", 
+          label: "Deploy ERC20 Token Remote", 
+          component: DeployERC20TokenRemote,
+          outcomes: [
+            "ERC20 token representation deployed on remote chain",
+            "Supports custom token decimals, names, and metadata",
+          ],
+        },
+        { 
+          key: "native-remote", 
+          label: "Deploy Native Token Remote", 
+          component: DeployNativeTokenRemote,
+          outcomes: [
+            "Native token representation on remote chain",
+            "Lower gas costs and native-like user experience",
+          ],
+        },
       ],
     },
     {
       type: "single",
       key: "register-with-home",
       title: "Register With Home",
       component: RegisterWithHome,
+      description: "Register the remote token contract with the TokenHome contract to establish the bidirectional connection. This step configures the routing information so that cross-chain messages can flow between your home and remote contracts securely.",
+      outcomes: [
+        "Remote token registered and verified with TokenHome",
+        "Cross-chain message routing and validation configured",
+      ],
     },
     {
       type: "single",
       key: "add-collateral",
       title: "Add Collateral",
       component: AddCollateral,
+      description: "Deposit initial collateral on the remote chain to enable bidirectional token transfers. This collateral allows users to transfer tokens back from the remote chain to the home chain. The amount of collateral determines how much value can flow in the reverse direction.",
+      outcomes: [
+        "Initial collateral deposited and locked on remote chain",
+        "Bidirectional token transfers fully enabled and operational",
+      ],
     },
 ];