+ 
+
+
+
+
+
+ + 1Shot Wallet +
++ Host playground +
+
+
+
+ Host Layer → Branding Layer ·{" "}
+ setStyle + EIP-1193
+
+ Host +
++ {mode === "test" + ? "Wallet stays hidden. Use actions below to exercise EIP-1193." + : "Configurator on the left; wallet flyout stays open on the right."} +
+
+
+
+ );
+}
diff --git a/host/src/components/DesignPanel.tsx b/host/src/components/DesignPanel.tsx
new file mode 100644
index 0000000..c95101b
--- /dev/null
+++ b/host/src/components/DesignPanel.tsx
@@ -0,0 +1,82 @@
+import type { RefCallback } from "react";
+import { WalletConfigurator } from "./WalletConfigurator";
+
+export interface IDesignPanelProps {
+ ready: boolean;
+ onApplyStyle: (options: Record
+
+
+
+
+
+ {
+ onChange(next);
+ }}
+ />
+
+
+ onChange(event.target.value)}
+ />
+
+
+
+
+
+
+
+ );
+}
diff --git a/host/src/components/TestPanel.tsx b/host/src/components/TestPanel.tsx
new file mode 100644
index 0000000..27cae33
--- /dev/null
+++ b/host/src/components/TestPanel.tsx
@@ -0,0 +1,28 @@
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { WalletActions, type IWalletActionsProps } from "./WalletActions";
+
+/** Test mode: EIP-1193 actions with the branding wallet hidden. */
+export function TestPanel(props: IWalletActionsProps) {
+ return (
+
+
+
+
+
+
+ Design mode
+
+ + Preview +
+
+ Fresh inline proxy in this slot. Styles are re-applied via{" "}
+ setStyle when you return to Test.
+
+
+
+
+
+
+
+ Host canvas · inline presentation
+
+
+
+
+
+
+
+ {!ready ? (
+
+ + Connecting to wallet… +
+ ) : null} +
+
+
+ Test
+
+ Exercise connect, personal_sign, chain switch, and ERC-20 reads.
+ The wallet flyout stays hidden until an action needs it.
+
+
+
+
+
+
+ );
+}
diff --git a/host/src/components/WalletActions.tsx b/host/src/components/WalletActions.tsx
new file mode 100644
index 0000000..0f76771
--- /dev/null
+++ b/host/src/components/WalletActions.tsx
@@ -0,0 +1,349 @@
+import { RefreshCwIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+export const HOST_CHAINS = [
+ {
+ value: "0x4cef52",
+ label: "Arc Testnet",
+ usdc: "0x3600000000000000000000000000000000000000",
+ blockExplorerUrl: "https://testnet.arcscan.app",
+ },
+ {
+ value: "0xaa36a7",
+ label: "Sepolia",
+ usdc: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
+ blockExplorerUrl: "https://sepolia.etherscan.io",
+ },
+ {
+ value: "0x14a34",
+ label: "Base Sepolia",
+ usdc: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
+ blockExplorerUrl: "https://sepolia.basescan.org",
+ },
+] as const;
+
+/** Focus demo: Arc Testnet USDC. */
+export const FOCUS_USDC_ARC = {
+ chainId: "0x4cef52",
+ assetAddress: "0x3600000000000000000000000000000000000000",
+ label: "USDC (Arc)",
+} as const;
+
+/** Focus demo: Base mainnet USDT. */
+export const FOCUS_USDT_BASE = {
+ chainId: "0x2105",
+ assetAddress: "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
+ label: "Tether (Base)",
+} as const;
+
+export type UsdcMode = "balance" | "send";
+
+export function hostChainMeta(chainId: string) {
+ return HOST_CHAINS.find((chain) => chain.value === chainId) ?? null;
+}
+
+export interface IWalletActionsProps {
+ ready: boolean;
+ busy: boolean;
+ chainId: string;
+ message: string;
+ usdcMode: UsdcMode;
+ usdcDestination: string;
+ usdcAmount: string;
+ status: string;
+ statusIsError: boolean;
+ signature: string | null;
+ usdcOutput: string | null;
+ txHash: string | null;
+ txExplorerUrl: string | null;
+ onChainChange: (chainId: string) => void;
+ onRefreshChain: () => void;
+ onMessageChange: (message: string) => void;
+ onUsdcModeChange: (mode: UsdcMode) => void;
+ onUsdcDestinationChange: (address: string) => void;
+ onUsdcAmountChange: (amount: string) => void;
+ onSign: () => void;
+ walletVisible: boolean;
+ onToggleWallet: () => void;
+ onUsdcAction: () => void;
+ onFocusUsdcArc: () => void;
+ onFocusUsdtBase: () => void;
+ onUnfocusWallet: () => void;
+ onAddUsdcArc: () => void;
+ onAddUsdtBase: () => void;
+}
+
+export function WalletActions({
+ ready,
+ busy,
+ chainId,
+ message,
+ usdcMode,
+ usdcDestination,
+ usdcAmount,
+ status,
+ statusIsError,
+ signature,
+ usdcOutput,
+ txHash,
+ txExplorerUrl,
+ onChainChange,
+ onRefreshChain,
+ onMessageChange,
+ onUsdcModeChange,
+ onUsdcDestinationChange,
+ onUsdcAmountChange,
+ onSign,
+ walletVisible,
+ onToggleWallet,
+ onUsdcAction,
+ onFocusUsdcArc,
+ onFocusUsdtBase,
+ onUnfocusWallet,
+ onAddUsdcArc,
+ onAddUsdtBase,
+}: IWalletActionsProps) {
+ const meta = hostChainMeta(chainId);
+
+ return (
+
+
+
+
+
+
+
+
+