@siphoyawe/mina-cli 1.2.2 → 1.2.3

package/dist/index.js

@@ -7,7 +7,7 @@ import React12 from "react";
 import { render } from "ink";
 
 // src/commands/wizard.tsx
-import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+import React3, { useState as useState2, useEffect as useEffect2, useCallback } from "react";
 import { Box as Box8, Text as Text8, useApp, useInput as useInput2 } from "ink";
 import {
   Mina,
@@ -21,30 +21,41 @@ import {
 
 // src/ui/theme.ts
 var theme = {
-  // Primary colors
+  // Primary palette - Cyber Luxe
   primary: "#7DD3FC",
-  // Sky blue - main accent
-  secondary: "#A1A1AA",
-  // Gray - supporting text
-  muted: "#71717A",
-  // Dark gray - disabled/placeholder
-  // Status colors
-  success: "#0ECC83",
-  // Green - completed/success
-  error: "#F87171",
+  // Cyan - main accent, bright and attention-grabbing
+  primaryDim: "#38BDF8",
+  // Dimmer cyan for subtle accents
+  secondary: "#94A3B8",
+  // Slate - refined supporting text
+  muted: "#64748B",
+  // Subtle gray - disabled/placeholder
+  // Status colors - Vivid & Clear
+  success: "#10B981",
+  // Emerald - completed/success
+  error: "#EF4444",
   // Red - error/failed
-  warning: "#FBBF24",
-  // Yellow - warning/pending
+  warning: "#F59E0B",
+  // Amber - warning/pending
   // UI elements
-  border: "#3F3F46",
-  // Border gray
-  background: "#18181B",
-  // Dark background
-  // Additional colors for variety
-  accent: "#E879F9",
-  // Purple accent
-  info: "#38BDF8"
+  border: "#334155",
+  // Slate border - more visible
+  borderLight: "#475569",
+  // Lighter border for emphasis
+  background: "#0F172A",
+  // Deep navy background
+  // Accent colors for visual interest
+  accent: "#A78BFA",
+  // Violet accent
+  accentAlt: "#F472B6",
+  // Pink accent
+  info: "#38BDF8",
   // Light blue info
+  highlight: "#22D3EE",
+  // Bright cyan for highlights
+  // Gradient-like effects (text colors)
+  gradientStart: "#7DD3FC",
+  gradientEnd: "#A78BFA"
 };
 var borders = {
   // Single line box
@@ -66,28 +77,64 @@ var borders = {
   doubleTopLeft: "\u2554",
   doubleTopRight: "\u2557",
   doubleBottomLeft: "\u255A",
-  doubleBottomRight: "\u255D"
+  doubleBottomRight: "\u255D",
+  // Round corners (softer look)
+  roundTopLeft: "\u256D",
+  roundTopRight: "\u256E",
+  roundBottomLeft: "\u2570",
+  roundBottomRight: "\u256F",
+  // Heavy box (bold appearance)
+  heavyHorizontal: "\u2501",
+  heavyVertical: "\u2503"
 };
 var symbols = {
+  // Status indicators
   pending: "\u25CB",
-  active: "\u2192",
+  active: "\u25C6",
   completed: "\u2713",
   failed: "\u2717",
-  spinner: "\u25D0",
+  // Navigation & UI
   bullet: "\u2022",
   arrow: "\u203A",
+  arrowRight: "\u2192",
+  arrowLeft: "\u2190",
+  arrowUp: "\u2191",
+  arrowDown: "\u2193",
+  pointer: "\u25B8",
+  pointerFilled: "\u25B6",
+  // Checks & crosses
   check: "\u2714",
   cross: "\u2718",
+  checkCircle: "\u25C9",
+  // Misc UI
   search: "\u2315",
-  star: "\u2605"
+  star: "\u2605",
+  starEmpty: "\u2606",
+  diamond: "\u25C7",
+  diamondFilled: "\u25C6",
+  circle: "\u25CF",
+  circleEmpty: "\u25CB",
+  square: "\u25A0",
+  squareEmpty: "\u25A1",
+  // Progress
+  progressFull: "\u2588",
+  progressMid: "\u2593",
+  progressLight: "\u2591",
+  // Separators
+  dot: "\xB7",
+  pipe: "\u2502",
+  dash: "\u2500"
 };
-var MINA_LOGO = `
-  __  __ ___ _   _    _
- |  \\/  |_ _| \\ | |  / \\
- | |\\/| || ||  \\| | / _ \\
- | |  | || || |\\  |/ ___ \\
- |_|  |_|___|_| \\_/_/   \\_\\
-`;
+var MINA_LOGO = `\u2554\u2566\u2557\u2566\u2554\u2557\u2554\u2554\u2550\u2557
+\u2551\u2551\u2551\u2551\u2551\u2551\u2551\u2560\u2550\u2563
+\u2569 \u2569\u2569\u255D\u255A\u255D\u2569 \u2569`;
+var MINA_LOGO_LARGE = `
+\u2588\u2588\u2588\u2557   \u2588\u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2588\u2557   \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2557
+\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557
+\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551
+\u2588\u2588\u2551\u255A\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551
+\u2588\u2588\u2551 \u255A\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551
+\u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D`;
 var TAGLINE = "Cross-chain bridge to Hyperliquid";
 
 // src/ui/Box.tsx
@@ -98,9 +145,12 @@ function Box({
   borderColor = theme.border,
   bordered = true,
   padding = 1,
+  accent = false,
+  emphasis = false,
   children,
   ...props
 }) {
+  const effectiveBorderColor = accent ? theme.primary : borderColor;
   if (!bordered) {
     return /* @__PURE__ */ jsx(InkBox, { padding, ...props, children });
   }
@@ -108,13 +158,17 @@ function Box({
     InkBox,
     {
       flexDirection: "column",
-      borderStyle: "round",
-      borderColor,
+      borderStyle: emphasis ? "double" : "round",
+      borderColor: effectiveBorderColor,
       paddingX: padding,
       paddingY: padding > 0 ? 1 : 0,
       ...props,
       children: [
-        title && /* @__PURE__ */ jsx(InkBox, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: theme.primary, bold: true, children: title }) }),
+        title && /* @__PURE__ */ jsx(InkBox, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: accent ? theme.primary : theme.secondary, bold: true, children: [
+          symbols.diamond,
+          " ",
+          title
+        ] }) }),
         children
       ]
     }
@@ -123,9 +177,25 @@ function Box({
 function Divider({
   width = 40,
   color = theme.border,
-  char = borders.horizontal
+  char,
+  label,
+  heavy = false
 }) {
-  return /* @__PURE__ */ jsx(Text, { color, children: char.repeat(width) });
+  const dividerChar = char || (heavy ? borders.heavyHorizontal : borders.horizontal);
+  if (label) {
+    const labelLength = label.length + 2;
+    const sideWidth = Math.max(3, Math.floor((width - labelLength) / 2));
+    return /* @__PURE__ */ jsxs(InkBox, { children: [
+      /* @__PURE__ */ jsx(Text, { color, children: dividerChar.repeat(sideWidth) }),
+      /* @__PURE__ */ jsxs(Text, { color: theme.muted, children: [
+        " ",
+        label,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { color, children: dividerChar.repeat(sideWidth) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Text, { color, children: dividerChar.repeat(width) });
 }
 
 // src/ui/Header.tsx
@@ -134,24 +204,52 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Header({
   showTagline = true,
   tagline = TAGLINE,
-  compact = false
+  compact = false,
+  large = false
 }) {
   if (compact) {
     return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginBottom: 1, children: [
-      /* @__PURE__ */ jsx2(Text2, { color: theme.primary, bold: true, children: "MINA" }),
-      showTagline && /* @__PURE__ */ jsx2(Text2, { color: theme.secondary, dimColor: true, children: tagline })
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { color: theme.accent, children: symbols.diamond }),
+        /* @__PURE__ */ jsx2(Text2, { color: theme.primary, bold: true, children: " MINA " }),
+        /* @__PURE__ */ jsx2(Text2, { color: theme.accent, children: symbols.diamond })
+      ] }),
+      showTagline && /* @__PURE__ */ jsx2(Text2, { color: theme.muted, children: tagline })
     ] });
   }
+  const logo = large ? MINA_LOGO_LARGE : MINA_LOGO;
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsx2(Text2, { color: theme.primary, bold: true, children: MINA_LOGO }),
-    showTagline && /* @__PURE__ */ jsx2(Box2, { justifyContent: "center", children: /* @__PURE__ */ jsx2(Text2, { color: theme.secondary, dimColor: true, children: tagline }) })
+    /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: logo.split("\n").filter((line) => line.length > 0).map((line, index, arr) => /* @__PURE__ */ jsx2(
+      Text2,
+      {
+        color: index === 0 ? theme.primary : index === arr.length - 1 ? theme.accent : theme.primaryDim,
+        bold: true,
+        children: line
+      },
+      index
+    )) }),
+    showTagline && /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", marginTop: 1, children: /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsxs2(Text2, { color: theme.border, children: [
+        borders.roundTopLeft,
+        borders.heavyHorizontal
+      ] }),
+      /* @__PURE__ */ jsxs2(Text2, { color: theme.muted, children: [
+        " ",
+        tagline,
+        " "
+      ] }),
+      /* @__PURE__ */ jsxs2(Text2, { color: theme.border, children: [
+        borders.heavyHorizontal,
+        borders.roundTopRight
+      ] })
+    ] }) })
   ] });
 }
 
 // src/ui/Select.tsx
 import { Box as Box3, Text as Text3 } from "ink";
 import InkSelectInput from "ink-select-input";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Select({
   items,
   onSelect,
@@ -178,27 +276,44 @@ function Select({
     const item = items.find((i) => i.label === label2);
     const isDisabled = item?.disabled;
     return /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsxs3(Text3, { color: isSelected ? theme.primary : isDisabled ? theme.muted : theme.secondary, children: [
-        isSelected ? symbols.arrow : " ",
-        " ",
-        label2
-      ] }),
-      item?.description && /* @__PURE__ */ jsxs3(Text3, { color: theme.muted, dimColor: true, children: [
-        " ",
-        "\u2014 ",
-        item.description
+      /* @__PURE__ */ jsx3(Text3, { color: isSelected ? theme.primary : theme.border, children: isSelected ? symbols.pointerFilled : " " }),
+      /* @__PURE__ */ jsx3(Text3, { children: " " }),
+      /* @__PURE__ */ jsx3(
+        Text3,
+        {
+          color: isSelected ? theme.primary : isDisabled ? theme.muted : theme.secondary,
+          bold: isSelected,
+          children: label2
+        }
+      ),
+      item?.description && /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsxs3(Text3, { color: theme.border, children: [
+          " ",
+          symbols.dash,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx3(Text3, { color: theme.muted, dimColor: true, children: item.description })
       ] })
     ] });
   };
-  const indicatorComponent = ({ isSelected }) => /* @__PURE__ */ jsx3(Text3, { color: theme.primary, children: isSelected ? symbols.arrow : " " });
+  const indicatorComponent = () => /* @__PURE__ */ jsx3(Text3, { children: " " });
   if (disabled) {
     return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
       label && /* @__PURE__ */ jsx3(Text3, { color: theme.muted, dimColor: true, children: label }),
-      /* @__PURE__ */ jsx3(Text3, { color: theme.muted, dimColor: true, children: "(disabled)" })
+      /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { color: theme.muted, dimColor: true, children: [
+        symbols.circleEmpty,
+        " (disabled)"
+      ] }) })
     ] });
   }
   return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    label && /* @__PURE__ */ jsx3(Box3, { marginBottom: 1, children: /* @__PURE__ */ jsx3(Text3, { color: theme.secondary, children: label }) }),
+    label && /* @__PURE__ */ jsxs3(Box3, { marginBottom: 1, children: [
+      /* @__PURE__ */ jsx3(Text3, { color: theme.borderLight, children: borders.vertical }),
+      /* @__PURE__ */ jsxs3(Text3, { color: theme.secondary, children: [
+        " ",
+        label
+      ] })
+    ] }),
     /* @__PURE__ */ jsx3(
       InkSelectInput,
       {
@@ -253,13 +368,13 @@ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function getStatusIndicator(status) {
   switch (status) {
     case "pending":
-      return /* @__PURE__ */ jsx4(Text4, { color: theme.muted, children: symbols.pending });
+      return /* @__PURE__ */ jsx4(Text4, { color: theme.muted, children: symbols.circleEmpty });
     case "active":
-      return /* @__PURE__ */ jsx4(Text4, { color: theme.primary, children: /* @__PURE__ */ jsx4(InkSpinner, { type: "dots" }) });
+      return /* @__PURE__ */ jsx4(Text4, { color: theme.highlight, children: /* @__PURE__ */ jsx4(InkSpinner, { type: "dots" }) });
     case "completed":
-      return /* @__PURE__ */ jsx4(Text4, { color: theme.success, children: symbols.completed });
+      return /* @__PURE__ */ jsx4(Text4, { color: theme.success, children: symbols.checkCircle });
     case "failed":
-      return /* @__PURE__ */ jsx4(Text4, { color: theme.error, children: symbols.failed });
+      return /* @__PURE__ */ jsx4(Text4, { color: theme.error, children: symbols.cross });
   }
 }
 function getStatusColor(status) {
@@ -267,28 +382,36 @@ function getStatusColor(status) {
     case "pending":
       return theme.muted;
     case "active":
-      return theme.primary;
+      return theme.highlight;
     case "completed":
       return theme.success;
     case "failed":
       return theme.error;
   }
 }
+function getConnectorStyle(currentStatus, nextStatus) {
+  if (currentStatus === "completed") {
+    return { char: borders.vertical, color: theme.success };
+  }
+  if (currentStatus === "active") {
+    return { char: borders.vertical, color: theme.highlight };
+  }
+  return { char: borders.vertical, color: theme.border };
+}
 function StepItem({
   step,
   index,
   showNumber,
   showTimestamp,
-  isLast
+  isLast,
+  nextStep
 }) {
   const color = getStatusColor(step.status);
+  const connector = !isLast ? getConnectorStyle(step.status, nextStep?.status || "pending") : null;
   return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs4(Box4, { children: [
       /* @__PURE__ */ jsx4(Box4, { width: 3, children: getStatusIndicator(step.status) }),
-      showNumber && /* @__PURE__ */ jsx4(Box4, { width: 4, children: /* @__PURE__ */ jsxs4(Text4, { color, dimColor: step.status === "pending", children: [
-        index + 1,
-        "."
-      ] }) }),
+      showNumber && /* @__PURE__ */ jsx4(Box4, { width: 4, children: /* @__PURE__ */ jsx4(Text4, { color, dimColor: step.status === "pending", children: String(index + 1).padStart(2, "0") }) }),
       /* @__PURE__ */ jsx4(Box4, { flexGrow: 1, children: /* @__PURE__ */ jsx4(
         Text4,
         {
@@ -298,10 +421,19 @@ function StepItem({
           children: step.label
         }
       ) }),
+      step.status === "active" && /* @__PURE__ */ jsxs4(Box4, { marginLeft: 1, children: [
+        /* @__PURE__ */ jsx4(Text4, { color: theme.highlight, children: "[" }),
+        /* @__PURE__ */ jsx4(Text4, { color: theme.highlight, children: "processing" }),
+        /* @__PURE__ */ jsx4(Text4, { color: theme.highlight, children: "]" })
+      ] }),
       showTimestamp && step.timestamp && /* @__PURE__ */ jsx4(Box4, { marginLeft: 2, children: /* @__PURE__ */ jsx4(Text4, { color: theme.muted, dimColor: true, children: step.timestamp }) })
     ] }),
-    step.description && /* @__PURE__ */ jsx4(Box4, { marginLeft: showNumber ? 7 : 3, children: /* @__PURE__ */ jsx4(Text4, { color: theme.muted, dimColor: true, children: step.description }) }),
-    !isLast && step.status !== "pending" && /* @__PURE__ */ jsx4(Box4, { marginLeft: 1, children: /* @__PURE__ */ jsx4(Text4, { color: theme.border, children: "\u2502" }) })
+    step.description && /* @__PURE__ */ jsx4(Box4, { marginLeft: showNumber ? 7 : 3, children: /* @__PURE__ */ jsxs4(Text4, { color: step.status === "failed" ? theme.error : theme.muted, dimColor: step.status !== "failed", children: [
+      symbols.pointer,
+      " ",
+      step.description
+    ] }) }),
+    connector && /* @__PURE__ */ jsx4(Box4, { marginLeft: 1, children: /* @__PURE__ */ jsx4(Text4, { color: connector.color, children: connector.char }) })
   ] });
 }
 function ProgressSteps({
@@ -311,7 +443,13 @@ function ProgressSteps({
   title
 }) {
   return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
-    title && /* @__PURE__ */ jsx4(Box4, { marginBottom: 1, children: /* @__PURE__ */ jsx4(Text4, { color: theme.secondary, bold: true, children: title }) }),
+    title && /* @__PURE__ */ jsxs4(Box4, { marginBottom: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { color: theme.borderLight, children: borders.vertical }),
+      /* @__PURE__ */ jsxs4(Text4, { color: theme.secondary, bold: true, children: [
+        " ",
+        title
+      ] })
+    ] }),
     steps.map((step, index) => /* @__PURE__ */ jsx4(
       StepItem,
       {
@@ -319,7 +457,8 @@ function ProgressSteps({
         index,
         showNumber: showNumbers,
         showTimestamp: showTimestamps,
-        isLast: index === steps.length - 1
+        isLast: index === steps.length - 1,
+        nextStep: steps[index + 1]
       },
       index
     ))
@@ -752,14 +891,23 @@ async function createSigner(privateKey, chainId, rpcUrl) {
     8453: base,
     43114: avalanche,
     56: bsc,
-    // HyperEVM
+    // HyperEVM Mainnet
     999: {
       id: 999,
       name: "HyperEVM",
-      nativeCurrency: { name: "ETH", symbol: "ETH", decimals: 18 },
+      nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
       rpcUrls: {
         default: { http: ["https://rpc.hyperliquid.xyz/evm"] }
       }
+    },
+    // HyperEVM Testnet
+    998: {
+      id: 998,
+      name: "HyperEVM Testnet",
+      nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
+      rpcUrls: {
+        default: { http: ["https://rpc.hyperliquid-testnet.xyz/evm"] }
+      }
     }
   };
   const chain = chainMap[chainId];
@@ -795,7 +943,7 @@ async function createSigner(privateKey, chainId, rpcUrl) {
 }
 
 // src/commands/wizard.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var initialState = {
   step: "chain",
   chain: null,
@@ -809,15 +957,60 @@ var initialState = {
   executionStatus: ""
 };
 function NavigationHints({ step }) {
+  const Key = ({ children }) => /* @__PURE__ */ jsx8(Text8, { color: theme.borderLight, children: "[" });
+  const renderHint = (key, action, isLast = false) => /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(Text8, { color: theme.secondary, children: key }),
+    /* @__PURE__ */ jsxs8(Text8, { color: theme.muted, children: [
+      " ",
+      action
+    ] }),
+    !isLast && /* @__PURE__ */ jsxs8(Text8, { color: theme.border, children: [
+      "  ",
+      symbols.dot,
+      "  "
+    ] })
+  ] });
   const hints = {
-    chain: "up/down Select  Enter Confirm  q Quit",
-    token: "up/down Select  Enter Confirm  b Back  q Quit",
-    amount: "Enter Confirm  b Back  q Quit",
-    key: "Enter Confirm  b Back  q Quit",
-    confirm: "Enter Execute  b Back  q Quit",
-    execute: "Please wait..."
+    chain: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      renderHint("\u2191\u2193", "Navigate"),
+      renderHint("Enter", "Select"),
+      renderHint("q", "Quit", true)
+    ] }),
+    token: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      renderHint("\u2191\u2193", "Navigate"),
+      renderHint("Enter", "Select"),
+      renderHint("b", "Back"),
+      renderHint("q", "Quit", true)
+    ] }),
+    amount: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      renderHint("0-9", "Type amount"),
+      renderHint("Enter", "Confirm"),
+      renderHint("b", "Back"),
+      renderHint("q", "Quit", true)
+    ] }),
+    key: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      renderHint("Paste", "Private key"),
+      renderHint("Enter", "Confirm"),
+      renderHint("b", "Back"),
+      renderHint("q", "Quit", true)
+    ] }),
+    confirm: /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      renderHint("Enter", "Execute bridge"),
+      renderHint("b", "Back"),
+      renderHint("q", "Quit", true)
+    ] }),
+    execute: /* @__PURE__ */ jsxs8(Text8, { color: theme.muted, children: [
+      /* @__PURE__ */ jsx8(Text8, { color: theme.primary, children: symbols.active }),
+      " Processing transaction..."
+    ] })
   };
-  return /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text8, { color: theme.muted, dimColor: true, children: hints[step] }) });
+  return /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, paddingTop: 1, borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: theme.border, children: [
+    /* @__PURE__ */ jsxs8(Text8, { color: theme.muted, children: [
+      symbols.pointer,
+      " "
+    ] }),
+    hints[step]
+  ] });
 }
 function StepIndicator({ currentStep }) {
   const steps = ["chain", "token", "amount", "key", "confirm", "execute"];
@@ -830,27 +1023,41 @@ function StepIndicator({ currentStep }) {
     execute: "Execute"
   };
   const currentIndex = steps.indexOf(currentStep);
-  return /* @__PURE__ */ jsx8(Box8, { marginBottom: 1, children: steps.map((step, index) => {
-    const isActive = index === currentIndex;
-    const isCompleted = index < currentIndex;
-    const separator = index < steps.length - 1 ? " > " : "";
-    return /* @__PURE__ */ jsxs8(Text8, { children: [
-      /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginBottom: 1, children: [
+    /* @__PURE__ */ jsx8(Box8, { marginBottom: 1, children: steps.map((step, index) => {
+      const isActive = index === currentIndex;
+      const isCompleted = index < currentIndex;
+      const isLast = index === steps.length - 1;
+      return /* @__PURE__ */ jsxs8(React3.Fragment, { children: [
+        /* @__PURE__ */ jsx8(
+          Text8,
+          {
+            color: isCompleted ? theme.success : isActive ? theme.primary : theme.muted,
+            bold: isActive,
+            children: isCompleted ? symbols.checkCircle : isActive ? symbols.diamondFilled : symbols.circleEmpty
+          }
+        ),
+        !isLast && /* @__PURE__ */ jsx8(Text8, { color: isCompleted ? theme.success : theme.border, children: isCompleted ? "\u2501\u2501" : "\u2500\u2500" })
+      ] }, step);
+    }) }),
+    /* @__PURE__ */ jsx8(Box8, { children: steps.map((step, index) => {
+      const isActive = index === currentIndex;
+      const isCompleted = index < currentIndex;
+      const isLast = index === steps.length - 1;
+      const label = stepLabels[step];
+      const paddedLabel = label.padEnd(isLast ? label.length : 5, " ");
+      return /* @__PURE__ */ jsx8(
         Text8,
         {
           color: isActive ? theme.primary : isCompleted ? theme.success : theme.muted,
           bold: isActive,
           dimColor: !isActive && !isCompleted,
-          children: [
-            isCompleted ? symbols.check : isActive ? symbols.arrow : symbols.pending,
-            " ",
-            stepLabels[step]
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx8(Text8, { color: theme.muted, dimColor: true, children: separator })
-    ] }, step);
-  }) });
+          children: paddedLabel.slice(0, isLast ? void 0 : 5)
+        },
+        step
+      );
+    }) })
+  ] });
 }
 function ChainSelectionStep({
   onSelect,
@@ -2722,7 +2929,7 @@ function getHistory(limit = 10, address) {
 }
 
 // src/commands/history.tsx
-import { Fragment, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function formatDate(timestamp) {
   return new Date(timestamp).toLocaleString("en-US", {
     month: "2-digit",
@@ -2853,7 +3060,7 @@ function HistoryCommand({
         entries.length !== 1 ? "s" : ""
       ] })
     ] }) }),
-    entries.length === 0 ? /* @__PURE__ */ jsx14(EmptyState, { address }) : /* @__PURE__ */ jsxs14(Fragment, { children: [
+    entries.length === 0 ? /* @__PURE__ */ jsx14(EmptyState, { address }) : /* @__PURE__ */ jsxs14(Fragment3, { children: [
       /* @__PURE__ */ jsx14(
         Table,
         {
@@ -2890,7 +3097,7 @@ import {
   Mina as Mina5,
   getChains as getChains6
 } from "@siphoyawe/mina-sdk";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function truncateAddress2(address) {
   if (address.length <= 14) return address;
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
@@ -3102,7 +3309,7 @@ function BalanceCommand({
       borders.horizontal.repeat(boxWidth - 2),
       borders.rightT
     ] }) }),
-    !hasAnyBalances ? /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsxs15(Box15, { children: [
+    !hasAnyBalances ? /* @__PURE__ */ jsx15(Fragment4, { children: /* @__PURE__ */ jsxs15(Box15, { children: [
       /* @__PURE__ */ jsx15(Text15, { color: theme.border, children: borders.vertical }),
       /* @__PURE__ */ jsx15(Box15, { width: boxWidth - 2, justifyContent: "center", children: /* @__PURE__ */ jsx15(Text15, { color: theme.muted, children: "No balances found" }) }),
       /* @__PURE__ */ jsx15(Text15, { color: theme.border, children: borders.vertical })