arc402-cli 0.7.4 → 0.8.0

package/src/tui/InputLine.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import { Box, Text, useInput } from "ink";
 import TextInput from "ink-text-input";
-import { createProgram } from "../program";
+import { createProgram } from "../program.js";
 
 const BUILTIN_CMDS = ["help", "exit", "quit", "clear", "status"];
 

package/src/tui/WalletConnectPairing.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Box, Text } from "ink";
+import type { WCCallbacks } from "../walletconnect.js";
+
+export type WCStage = "connecting" | "connected" | "chain-switching" | "ready" | "error";
+
+interface WalletConnectPairingProps {
+  projectId: string;
+  chainId: number;
+  onComplete: (result: { account: string }) => void;
+  onError: (err: string) => void;
+  /** Called once the component mounts — parent passes the connect function */
+  connect: (callbacks: WCCallbacks) => Promise<{ account: string }>;
+}
+
+/**
+ * Renders WalletConnect pairing inside the Ink TUI viewport:
+ * - ASCII QR code
+ * - Deep links for MetaMask, Rainbow, Trust, etc.
+ * - Status transitions: connecting → connected → chain-switching → ready
+ */
+export function WalletConnectPairing({
+  onComplete,
+  onError,
+  connect,
+}: WalletConnectPairingProps) {
+  const [stage, setStage] = useState<WCStage>("connecting");
+  const [uri, setUri] = useState<string | null>(null);
+  const [links, setLinks] = useState<Record<string, string>>({});
+  const [account, setAccount] = useState<string | null>(null);
+  const [qrLines, setQrLines] = useState<string[]>([]);
+  const [detail, setDetail] = useState<string>("");
+
+  const handleUri = useCallback((wcUri: string, wcLinks: Record<string, string>) => {
+    setUri(wcUri);
+    setLinks(wcLinks);
+    // Generate ASCII QR
+    try {
+      // qrcode-terminal writes to stdout — capture it
+      const origWrite = process.stdout.write.bind(process.stdout);
+      const captured: string[] = [];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (process.stdout as any).write = (chunk: string | Uint8Array) => {
+        const str = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8");
+        captured.push(str);
+        return true;
+      };
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      import("qrcode-terminal").then((qr) => {
+        qr.default.generate(wcUri, { small: true }, (code: string) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (process.stdout as any).write = origWrite;
+          setQrLines(code.split("\n"));
+        });
+      }).catch(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (process.stdout as any).write = origWrite;
+      });
+    } catch {
+      // QR rendering is best-effort
+    }
+  }, []);
+
+  const handleStatus = useCallback((status: WCStage, statusDetail?: string) => {
+    setStage(status);
+    if (statusDetail) setDetail(statusDetail);
+    if (status === "connected" && statusDetail) {
+      setAccount(statusDetail);
+    }
+  }, []);
+
+  useEffect(() => {
+    const callbacks: WCCallbacks = {
+      onUri: handleUri,
+      onStatus: handleStatus,
+    };
+    connect(callbacks)
+      .then((result) => onComplete(result))
+      .catch((err: unknown) => onError(err instanceof Error ? err.message : String(err)));
+  }, [connect, handleUri, handleStatus, onComplete, onError]);
+
+  const statusIcon = stage === "error" ? "✗" : stage === "ready" ? "✓" : "◈";
+  const statusColor = stage === "error" ? "red" : stage === "ready" ? "green" : "cyan";
+
+  const statusMessages: Record<WCStage, string> = {
+    connecting: "Waiting for wallet approval...",
+    connected: `Connected: ${account ?? ""}`,
+    "chain-switching": `Switching chain${detail ? `: ${detail}` : ""}...`,
+    ready: `Ready — ${account ?? ""}`,
+    error: detail || "Connection failed",
+  };
+
+  return (
+    <Box flexDirection="column" paddingLeft={1}>
+      <Text color="cyan" bold>WalletConnect Pairing</Text>
+      <Text> </Text>
+
+      {/* Status */}
+      <Box>
+        <Text color={statusColor}>{statusIcon} </Text>
+        <Text>{statusMessages[stage]}</Text>
+      </Box>
+      <Text> </Text>
+
+      {/* Deep links */}
+      {uri && stage === "connecting" && (
+        <>
+          <Text dimColor>Tap a link for your wallet app:</Text>
+          <Text> </Text>
+          {Object.entries(links).map(([name, link]) => (
+            <Box key={name} flexDirection="column">
+              <Text color="white">{name}:</Text>
+              <Text dimColor>{link}</Text>
+              <Text> </Text>
+            </Box>
+          ))}
+
+          {/* QR code */}
+          {qrLines.length > 0 && (
+            <>
+              <Text dimColor>Or scan QR:</Text>
+              {qrLines.map((line, i) => (
+                <Text key={i}>{line}</Text>
+              ))}
+            </>
+          )}
+        </>
+      )}
+    </Box>
+  );
+}

package/src/tui/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { render } from "ink";
-import { App } from "./App";
-import fs from "fs";
-import path from "path";
-import os from "os";
+import { App } from "./App.js";
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+import { createRequire } from "node:module";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const pkg = require("../../package.json") as { version: string };
+const pkg = createRequire(import.meta.url)("../../package.json") as { version: string };
 
 const CONFIG_PATH = path.join(os.homedir(), ".arc402", "config.json");
 
@@ -30,8 +30,7 @@ async function getBalance(
   address: string
 ): Promise<string | undefined> {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const ethersLib = require("ethers") as typeof import("ethers");
+    const ethersLib = await import("ethers");
     const provider = new ethersLib.ethers.JsonRpcProvider(rpcUrl);
     const bal = await Promise.race([
       provider.getBalance(address),

package/src/tui/useChat.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 import chalk from "chalk";
-import { c } from "../ui/colors";
+import { c } from "../ui/colors.js";
 
 interface UseChatResult {
   send: (message: string, onLine: (line: string) => void) => Promise<void>;

package/src/tui/useCommand.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
-import { createProgram } from "../program";
+import { createProgram } from "../program.js";
 import chalk from "chalk";
-import { c } from "../ui/colors";
+import { c } from "../ui/colors.js";
 
 interface UseCommandResult {
   execute: (input: string, onLine: (line: string) => void) => Promise<void>;
@@ -64,8 +64,8 @@ export function useCommand(): UseCommandResult {
         const prog = createProgram();
         prog.exitOverride();
         prog.configureOutput({
-          writeOut: (str) => process.stdout.write(str),
-          writeErr: (str) => process.stderr.write(str),
+          writeOut: (str: string) => process.stdout.write(str),
+          writeErr: (str: string) => process.stderr.write(str),
         });
 
         await prog.parseAsync(["node", "arc402", ...tokens]);

package/src/ui/banner.ts

@@ -1,7 +1,7 @@
+import { createRequire } from "node:module";
 import chalk from "chalk";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const _pkg = require("../../package.json") as { version: string };
+const _pkg = createRequire(import.meta.url)("../../package.json") as { version: string };
 
 const ART = `
  ██████╗ ██████╗  ██████╗      ██╗  ██╗ ██████╗ ██████╗

package/src/ui/tree.ts

@@ -1,4 +1,4 @@
-import { c } from "./colors";
+import { c } from "./colors.js";
 
 export interface TreeItem {
   label: string;

package/src/wallet-router.ts

@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
-import { Arc402Config } from "./config";
-import { ARC402_WALLET_EXECUTE_ABI } from "./abis";
+import { Arc402Config } from "./config.js";
+import { ARC402_WALLET_EXECUTE_ABI } from "./abis.js";
 
 // ─── ARC402Wallet custom error decoder ─────────────────────────────────────
 

package/src/walletconnect-session.ts

@@ -1,4 +1,4 @@
-import { Arc402Config, saveConfig } from "./config";
+import { Arc402Config, saveConfig } from "./config.js";
 
 export interface WCSessionData {
   topic: string;

package/src/walletconnect.ts

@@ -3,9 +3,9 @@ import { KeyValueStorage } from "@walletconnect/keyvaluestorage";
 import qrcode from "qrcode-terminal";
 import path from "path";
 import os from "os";
-import { Arc402Config } from "./config";
-import { loadWCSession, saveWCSession, clearWCSession } from "./walletconnect-session";
-import { sendWalletConnectApprovalButton } from "./telegram-notify";
+import { Arc402Config } from "./config.js";
+import { loadWCSession, saveWCSession, clearWCSession } from "./walletconnect-session.js";
+import { sendWalletConnectApprovalButton } from "./telegram-notify.js";
 
 // Suppress unhandled rejections from stale WalletConnect sessions (known SDK issue)
 process.on("unhandledRejection", (reason: unknown) => {
@@ -54,11 +54,16 @@ function walletLinks(encodedUri: string) {
  * On fresh connect, shows deep links + QR and waits for WC approval.
  * Saves session to config after a successful fresh pairing.
  */
+export type WCCallbacks = {
+  onUri?: (uri: string, links: Record<string, string>) => void;
+  onStatus?: (status: "connecting" | "connected" | "chain-switching" | "ready" | "error", detail?: string) => void;
+};
+
 export async function connectPhoneWallet(
   projectId: string,
   chainId: number,
   config: Arc402Config,
-  opts?: { telegramOpts?: TelegramOpts; prompt?: string; hardware?: boolean }
+  opts?: { telegramOpts?: TelegramOpts; prompt?: string; hardware?: boolean; callbacks?: WCCallbacks }
 ): Promise<{ client: SignClientT; session: WCSession; account: string }> {
   const client = await makeSignClient(projectId);
 
@@ -99,8 +104,13 @@ export async function connectPhoneWallet(
 
   const encodedUri = encodeURIComponent(uri);
   const displayPrompt = opts?.prompt ?? "Connect your phone wallet";
+  const cbs = opts?.callbacks;
 
-  if (opts?.hardware) {
+  if (cbs?.onUri) {
+    // Callback mode — let the caller handle rendering (e.g. Ink TUI)
+    cbs.onUri(uri, walletLinks(encodedUri));
+    cbs.onStatus?.("connecting");
+  } else if (opts?.hardware) {
     console.log("\n─────────────────────────────────────────────────────");
     console.log("Paste this URI into Ledger Live, Trezor Suite, or any WalletConnect-compatible signer:\n");
     console.log(uri);
@@ -137,10 +147,12 @@ export async function connectPhoneWallet(
 
   const session = await approval();
   const account = session.namespaces.eip155.accounts[0].split(":")[2];
+  cbs?.onStatus?.("connected", account);
 
   // Ensure wallet is on the correct chain before sending any tx
   const hexChainId = `0x${chainId.toString(16)}`;
   const networkName = chainId === 8453 ? "Base" : chainId === 84532 ? "Base Sepolia" : `chain ${chainId}`;
+  cbs?.onStatus?.("chain-switching", networkName);
 
   // First try adding the chain (MetaMask ignores if already added)
   if (chainId === 8453) {
@@ -175,12 +187,15 @@ export async function connectPhoneWallet(
     }
   }
   if (!chainSwitched) {
+    cbs?.onStatus?.("error", `Could not auto-switch to ${networkName}`);
     console.log(`\n⚠ Could not auto-switch to ${networkName}. IMPORTANT: Switch to ${networkName} in your wallet NOW before approving the next transaction.`);
     console.log(`  Otherwise the transaction will go to Ethereum mainnet and fail.`);
     // Give user 5 seconds to read the warning and switch
     await new Promise(r => setTimeout(r, 5000));
   }
 
+  cbs?.onStatus?.("ready", account);
+
   // Persist session (WC sessions last 7 days by default)
   const expiry = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60;
   saveWCSession(config, { topic: session.topic, expiry, account, chainId });

package/tsconfig.json

@@ -1,8 +1,11 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "commonjs",
-    "lib": ["ES2020"],
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": [
+      "ES2022"
+    ],
     "jsx": "react-jsx",
     "outDir": "./dist",
     "rootDir": "./src",
@@ -15,10 +18,16 @@
     "declarationMap": true,
     "sourceMap": true,
     "paths": {
-      "ink": ["./node_modules/ink/build/index.d.ts"],
-      "ink-text-input": ["./node_modules/ink-text-input/build/index.d.ts"]
+      "ethers": [
+        "./node_modules/ethers/lib.commonjs/index.d.ts"
+      ]
     }
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }