handleSelect(chain.chainId)}
+ onKeyDown={(e) => {
+ // ArrowDown / ArrowRight: next row.
+ // ArrowUp / ArrowLeft: previous row (with wrap-around).
+ // Home / End: jump to ends. Enter / Space: select.
+ switch (e.key) {
+ case "ArrowDown":
+ case "ArrowRight": {
+ e.preventDefault();
+ const i = flatChains.findIndex((c) => c.chainId === chain.chainId);
+ focusChainAt(i + 1);
+ break;
+ }
+ case "ArrowUp":
+ case "ArrowLeft": {
+ e.preventDefault();
+ const i = flatChains.findIndex((c) => c.chainId === chain.chainId);
+ focusChainAt(i - 1);
+ break;
+ }
+ case "Home":
+ e.preventDefault();
+ focusChainAt(0);
+ break;
+ case "End":
+ e.preventDefault();
+ focusChainAt(flatChains.length - 1);
+ break;
+ case "Enter":
+ case " ":
+ case "Spacebar":
+ e.preventDefault();
+ handleSelect(chain.chainId);
+ break;
+ default:
+ }
+ }}
+ className={cn(
+ "flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-colors",
+ "focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-700",
+ isSelected
+ ? "bg-gray-100 dark:bg-gray-800"
+ : "hover:bg-gray-50 dark:hover:bg-gray-800/50",
+ )}
+ >
+
+ );
+ };
+
+ return (
+
+
+ {chain.name}
+
+ {chain.currency && (
+
+ {chain.currency}
+ {chain.testnet && (
+
+ testnet
+
+ )}
+
+ )}
+
+
+ {chain.chainId}
+
+ {isSelected &&
+ {/* Header */}
+
+ );
+}
+
+export default ChainSelector;
diff --git a/registry/w3-kit/chain-selector/types.ts b/registry/w3-kit/chain-selector/types.ts
new file mode 100644
index 0000000..27f1e61
--- /dev/null
+++ b/registry/w3-kit/chain-selector/types.ts
@@ -0,0 +1,46 @@
+/**
+ * Public types for the
+
+ Choose a chain
+
+ {shouldShowToggle && (
+
+ )}
+
+
+ {/* Search */}
+ {searchable && (
+
+
+ )}
+
+ {/* Chain groups */}
+
+
+ setSearch(e.target.value)}
+ placeholder="Search chains..."
+ aria-label="Search chains"
+ className={cn(
+ "w-full rounded-lg border border-gray-200 bg-transparent py-2 pl-8 pr-8 text-sm text-gray-900 placeholder:text-gray-400",
+ "focus:border-gray-300 focus:outline-none dark:border-gray-700 dark:text-gray-100 dark:focus:border-gray-600",
+ )}
+ />
+ {search && (
+
+ )}
+
+
+ {grouped.evm.length > 0 && (
+
+
+ )}
+ {grouped.sol.length > 0 && (
+
+
+ )}
+ {filtered.length === 0 && (
+
+
+ + EVM +
+
+ {grouped.evm.map((c) => {
+ const i = flatChains.findIndex((x) => x.chainId === c.chainId);
+ return renderRow(c, i === focusIndex);
+ })}
+
+ + Solana +
+
+ {grouped.sol.map((c) => {
+ const i = flatChains.findIndex((x) => x.chainId === c.chainId);
+ return renderRow(c, i === focusIndex);
+ })}
+
+
+ No chains found
+
+ )}
+
+
+ {filtered.length} chain{filtered.length !== 1 ? "s" : ""}
+
+
+ -
+ {steps.map((step, idx) => {
+ const isComplete = idx < currentIndex;
+ const isCurrent = idx === currentIndex;
+ return (
+
- + + + {step.label} + + {idx < steps.length - 1 && ( + + )} + + ); + })} +
+
+ );
+}
diff --git a/registry/w3-kit/token-create/result-card.tsx b/registry/w3-kit/token-create/result-card.tsx
new file mode 100644
index 0000000..b016040
--- /dev/null
+++ b/registry/w3-kit/token-create/result-card.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useState } from "react";
+import { Check, Copy, ExternalLink } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { explorerAddressUrl, explorerTxUrl } from "../chain-selector/utils";
+import type { Chain } from "../chain-selector/types";
+import type { DeployResult } from "./types";
+
+export interface ResultCardProps {
+ chain: Chain;
+ result: DeployResult;
+ className?: string;
+}
+
+function truncate(value: string, head = 8, tail = 6) {
+ if (value.length <= head + tail + 1) return value;
+ return `${value.slice(0, head)}…${value.slice(-tail)}`;
+}
+
+function CopyableAddress({ value, ariaLabel }: { value: string; ariaLabel: string }) {
+ const [copied, setCopied] = useState(false);
+ const onCopy = () => {
+ if (typeof navigator === "undefined") return;
+ navigator.clipboard.writeText(value).catch(() => {});
+ setCopied(true);
+ window.setTimeout(() => setCopied(false), 2000);
+ };
+ return (
+
+ {complete ? (
+
+ + {complete ? "Transaction confirmed" : message} +
+ {!complete && ( +Don't close this tab.
+ )} +
+
+ );
+}
+
+export function ResultCard({ chain, result, className }: ResultCardProps) {
+ const addressUrl = explorerAddressUrl(chain, result.address);
+ const txUrl = explorerTxUrl(chain, result.txHash);
+
+ return (
+
+ {truncate(value)}
+
+
+
+
+ + Token deployed +
++ Standard: {chain.ecosystem === "evm" ? "ERC-20" : "SPL"} · Network: {chain.name} +
+
+
+ Token address
+
+
+
+
+
+ Tx hash
+
+
+
+ {addressUrl && (
+
+ View on {chain.explorerHost ?? "explorer"} →
+
+ )}
+
+
+
+ {truncate(result.txHash)}
+
+ {txUrl && (
+
+
+
+
+
+ + Create a token +
+
+ {step === "chain" && (
+
+
+
+
+
+ )}
+
+ {step === "configure" && selectedChain && (
+ + Pick a target chain. The form adapts to EVM or Solana automatically. +
+
+
+ )}
+
+ {step === "preview" && selectedChain && (
+
+
+
+ {selectedChain.ecosystem === "evm" ? "ERC-20" : "SPL"} on {selectedChain.name}
+
+
+ {isEvm ? (
+
+ {submitError && (
+
+ )}
+
+ {step === "submitting" && (
+
+ {submitError}
+
+ )}
+
+
+
+
+
+
+ )}
+ -
+ {rows.map((row) => (
+
- {row.label} +
- {row.value} +
+
+ ))}
+