@siphoyawe/mina-cli 1.2.0 → 1.2.2

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, useCallback } from "react";
+import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
 import { Box as Box8, Text as Text8, useApp, useInput as useInput2 } from "ink";
 import {
   Mina,
@@ -161,7 +161,8 @@ function Select({
   label,
   limit
 }) {
-  const inkItems = items.map((item) => ({
+  const inkItems = items.map((item, index) => ({
+    key: `${item.label}-${String(item.value)}-${index}`,
     label: item.label,
     value: item
   }));
@@ -215,28 +216,32 @@ function Select({
 function ChainSelect({
   chains,
   onSelect,
-  label = "Select Chain:"
+  label = "Select Chain:",
+  limit = 8
 }) {
   return /* @__PURE__ */ jsx3(
     Select,
     {
       items: chains,
       onSelect: (item) => onSelect(item),
-      label
+      label,
+      limit
     }
   );
 }
 function TokenSelect({
   tokens,
   onSelect,
-  label = "Select Token:"
+  label = "Select Token:",
+  limit = 10
 }) {
   return /* @__PURE__ */ jsx3(
     Select,
     {
       items: tokens,
       onSelect: (item) => onSelect(item),
-      label
+      label,
+      limit
     }
   );
 }
@@ -490,9 +495,9 @@ function KeyValue({
 }
 
 // src/ui/SearchableList.tsx
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { Box as Box7, Text as Text7, useInput, useStdin } from "ink";
-import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function fuzzyMatch(query, text) {
   const lowerQuery = query.toLowerCase();
   const lowerText = text.toLowerCase();
@@ -517,33 +522,32 @@ function sortItems(items, popularIds) {
 }
 function KeyboardHandler({
   searchable,
-  displayedItemsLength,
+  totalItemsLength,
   selectedIndex,
   setSelectedIndex,
   setQuery,
-  setShowAll,
-  hasMore,
+  setViewportStart,
   onSelect,
-  displayedItems
+  filteredItems
 }) {
   useInput((input, key) => {
     if (searchable) {
       if (key.backspace || key.delete) {
         setQuery((q) => q.slice(0, -1));
         setSelectedIndex(0);
+        setViewportStart(0);
       } else if (input && !key.ctrl && !key.meta && input.length === 1 && input.match(/[a-zA-Z0-9 -]/)) {
         setQuery((q) => q + input);
         setSelectedIndex(0);
+        setViewportStart(0);
       }
     }
     if (key.upArrow) {
       setSelectedIndex((i) => Math.max(0, i - 1));
     } else if (key.downArrow) {
-      setSelectedIndex((i) => Math.min(displayedItemsLength - 1, i + 1));
-    } else if (key.return && onSelect && displayedItems[selectedIndex]) {
-      onSelect(displayedItems[selectedIndex]);
-    } else if (input === "m" && hasMore) {
-      setShowAll(true);
+      setSelectedIndex((i) => Math.min(totalItemsLength - 1, i + 1));
+    } else if (key.return && onSelect && filteredItems[selectedIndex]) {
+      onSelect(filteredItems[selectedIndex]);
     }
   });
   return null;
@@ -556,13 +560,13 @@ function SearchableList({
   popularIds = [],
   onSelect,
   searchable = true,
-  maxDisplay = 15
+  maxDisplay = 10
 }) {
   const { isRawModeSupported } = useStdin();
   const isInteractive = isRawModeSupported;
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [showAll, setShowAll] = useState(false);
+  const [viewportStart, setViewportStart] = useState(0);
   const filteredItems = useMemo(() => {
     let result = items;
     if (query) {
@@ -572,23 +576,31 @@ function SearchableList({
     }
     return sortItems(result, popularIds);
   }, [items, query, popularIds]);
-  const displayLimit = showAll ? filteredItems.length : Math.min(maxDisplay, filteredItems.length);
-  const displayedItems = filteredItems.slice(0, displayLimit);
-  const hasMore = filteredItems.length > displayLimit;
-  const safeIndex = Math.min(selectedIndex, Math.max(0, displayedItems.length - 1));
+  const viewportSize = Math.min(maxDisplay, filteredItems.length);
+  useEffect(() => {
+    if (selectedIndex < viewportStart) {
+      setViewportStart(selectedIndex);
+    } else if (selectedIndex >= viewportStart + viewportSize) {
+      setViewportStart(Math.max(0, selectedIndex - viewportSize + 1));
+    }
+  }, [selectedIndex, viewportStart, viewportSize]);
+  const displayedItems = filteredItems.slice(viewportStart, viewportStart + viewportSize);
+  const hasMoreAbove = viewportStart > 0;
+  const hasMoreBelow = viewportStart + viewportSize < filteredItems.length;
+  const safeIndex = Math.min(selectedIndex, Math.max(0, filteredItems.length - 1));
+  const viewportSelectedIndex = safeIndex - viewportStart;
   return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
     isInteractive && /* @__PURE__ */ jsx7(
       KeyboardHandler,
       {
         searchable,
-        displayedItemsLength: displayedItems.length,
+        totalItemsLength: filteredItems.length,
         selectedIndex,
         setSelectedIndex,
         setQuery,
-        setShowAll,
-        hasMore,
+        setViewportStart,
         onSelect,
-        displayedItems
+        filteredItems
       }
     ),
     title && /* @__PURE__ */ jsxs7(Box7, { marginBottom: 1, children: [
@@ -613,9 +625,17 @@ function SearchableList({
       query ? /* @__PURE__ */ jsx7(Text7, { color: theme.primary, children: query }) : /* @__PURE__ */ jsx7(Text7, { color: theme.muted, dimColor: true, children: placeholder }),
       /* @__PURE__ */ jsx7(Text7, { color: theme.accent, children: "\u258C" })
     ] }),
+    hasMoreAbove && isInteractive && /* @__PURE__ */ jsxs7(Box7, { children: [
+      /* @__PURE__ */ jsx7(Text7, { color: theme.accent, children: "  \u25B2" }),
+      /* @__PURE__ */ jsxs7(Text7, { color: theme.muted, dimColor: true, children: [
+        " ",
+        viewportStart,
+        " more above"
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
       displayedItems.map((item, index) => {
-        const isSelected = isInteractive && index === safeIndex;
+        const isSelected = isInteractive && index === viewportSelectedIndex;
         const isPopular = popularIds.includes(item.id);
         return /* @__PURE__ */ jsxs7(Box7, { children: [
           isInteractive && /* @__PURE__ */ jsx7(Text7, { color: isSelected ? theme.accent : theme.border, children: isSelected ? symbols.arrow : " " }),
@@ -647,24 +667,21 @@ function SearchableList({
         'No matches for "',
         query,
         '"'
-      ] }) }),
-      hasMore && !showAll && /* @__PURE__ */ jsxs7(Box7, { marginTop: 1, children: [
-        /* @__PURE__ */ jsxs7(Text7, { color: theme.muted, dimColor: true, children: [
-          "+",
-          filteredItems.length - displayLimit,
-          " more",
-          isInteractive && " \u2014 press "
-        ] }),
-        isInteractive && /* @__PURE__ */ jsxs7(Fragment, { children: [
-          /* @__PURE__ */ jsx7(Text7, { color: theme.accent, children: "m" }),
-          /* @__PURE__ */ jsx7(Text7, { color: theme.muted, dimColor: true, children: " to show all" })
-        ] })
+      ] }) })
+    ] }),
+    hasMoreBelow && isInteractive && /* @__PURE__ */ jsxs7(Box7, { children: [
+      /* @__PURE__ */ jsx7(Text7, { color: theme.accent, children: "  \u25BC" }),
+      /* @__PURE__ */ jsxs7(Text7, { color: theme.muted, dimColor: true, children: [
+        " ",
+        filteredItems.length - viewportStart - viewportSize,
+        " more below"
       ] })
     ] }),
     isInteractive && /* @__PURE__ */ jsx7(Box7, { marginTop: 1, children: /* @__PURE__ */ jsxs7(Text7, { color: theme.muted, dimColor: true, children: [
-      "\u2191\u2193 navigate",
+      "\u2191\u2193 scroll",
       onSelect ? " \u2022 Enter select" : "",
-      searchable ? " \u2022 Type to filter" : ""
+      searchable ? " \u2022 Type to filter" : "",
+      filteredItems.length > viewportSize && ` \u2022 ${safeIndex + 1}/${filteredItems.length}`
     ] }) })
   ] });
 }
@@ -842,7 +859,7 @@ function ChainSelectionStep({
   const [chains, setChains] = useState2([]);
   const [loading, setLoading] = useState2(true);
   const [error, setError] = useState2(null);
-  useEffect(() => {
+  useEffect2(() => {
     async function loadChains() {
       try {
         setLoading(true);
@@ -906,7 +923,7 @@ function TokenSelectionStep({
   const [tokens, setTokens] = useState2([]);
   const [loading, setLoading] = useState2(true);
   const [error, setError] = useState2(null);
-  useEffect(() => {
+  useEffect2(() => {
     async function loadTokens() {
       try {
         setLoading(true);
@@ -978,7 +995,7 @@ function AmountInputStep({
   error
 }) {
   const [cursorVisible, setCursorVisible] = useState2(true);
-  useEffect(() => {
+  useEffect2(() => {
     const interval = setInterval(() => {
       setCursorVisible((v) => !v);
     }, 530);
@@ -1039,7 +1056,7 @@ function KeyInputStep({
   loading
 }) {
   const [cursorVisible, setCursorVisible] = useState2(true);
-  useEffect(() => {
+  useEffect2(() => {
     const interval = setInterval(() => {
       setCursorVisible((v) => !v);
     }, 530);
@@ -1169,7 +1186,7 @@ function ExecutionStep({
   const [txHash, setTxHash] = useState2(null);
   const [error, setError] = useState2(null);
   const [isExecuting, setIsExecuting] = useState2(false);
-  useEffect(() => {
+  useEffect2(() => {
     if (isExecuting) return;
     setIsExecuting(true);
     const executeBridge = async () => {
@@ -1465,7 +1482,7 @@ function Wizard() {
 }
 
 // src/commands/quote.tsx
-import { useState as useState3, useEffect as useEffect2 } from "react";
+import { useState as useState3, useEffect as useEffect3 } from "react";
 import { Box as Box9, Text as Text9, useApp as useApp2 } from "ink";
 import {
   Mina as Mina2,
@@ -1640,7 +1657,7 @@ function QuoteDisplay({
   const [sourceChain, setSourceChain] = useState3(null);
   const [sourceToken, setSourceToken] = useState3(null);
   const [destToken, setDestToken] = useState3(null);
-  useEffect2(() => {
+  useEffect3(() => {
     async function fetchQuote() {
       try {
         setLoading(true);
@@ -1700,7 +1717,7 @@ function QuoteDisplay({
     }
     fetchQuote();
   }, [fromChain, token, amount]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!loading && jsonOutput) {
       const timer = setTimeout(() => exit(), 100);
       return () => clearTimeout(timer);
@@ -1737,7 +1754,7 @@ function QuoteDisplay({
 }
 
 // src/commands/chains.tsx
-import { useState as useState4, useEffect as useEffect3 } from "react";
+import { useState as useState4, useEffect as useEffect4 } from "react";
 import { Box as Box10, Text as Text10, useApp as useApp3 } from "ink";
 import {
   getChains as getChains3,
@@ -1767,7 +1784,7 @@ function ChainsCommand({ json = false }) {
   const [chains, setChains] = useState4([]);
   const [loading, setLoading] = useState4(true);
   const [error, setError] = useState4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     async function loadChains() {
       try {
         setLoading(true);
@@ -1800,7 +1817,7 @@ function ChainsCommand({ json = false }) {
     }
     loadChains();
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!loading && json) {
       setTimeout(() => exit(), 100);
     }
@@ -1855,7 +1872,7 @@ function ChainsCommand({ json = false }) {
 }
 
 // src/commands/tokens.tsx
-import { useState as useState5, useEffect as useEffect4 } from "react";
+import { useState as useState5, useEffect as useEffect5 } from "react";
 import { Box as Box11, Text as Text11, useApp as useApp4 } from "ink";
 import {
   getChains as getChains4,
@@ -1909,7 +1926,7 @@ function TokensCommand({
   const [error, setError] = useState5(null);
   const [chainName, setChainName] = useState5("");
   const [availableChains, setAvailableChains] = useState5([]);
-  useEffect4(() => {
+  useEffect5(() => {
     async function loadTokens() {
       try {
         setLoading(true);
@@ -1947,7 +1964,7 @@ function TokensCommand({
     }
     loadTokens();
   }, [chain]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!loading && json) {
       setTimeout(() => exit(), 100);
     }
@@ -2044,7 +2061,7 @@ function TokensCommand({
 }
 
 // src/commands/status.tsx
-import { useState as useState6, useEffect as useEffect5, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import { Box as Box12, Text as Text12, useApp as useApp5 } from "ink";
 import {
   Mina as Mina3
@@ -2251,17 +2268,17 @@ function Status({ txHash, watch = false }) {
       }
     }
   }, [txHash, watch, exit, mina]);
-  useEffect5(() => {
+  useEffect6(() => {
     fetchStatus();
   }, [fetchStatus]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!watch) return;
     const interval = setInterval(() => {
       fetchStatus();
     }, 5e3);
     return () => clearInterval(interval);
   }, [watch, fetchStatus]);
-  useEffect5(() => {
+  useEffect6(() => {
     const interval = setInterval(() => {
       setElapsedTime(Date.now() - (status?.createdAt || startTime));
     }, 1e3);
@@ -2300,7 +2317,7 @@ function Status({ txHash, watch = false }) {
 }
 
 // src/commands/bridge.tsx
-import { useState as useState7, useEffect as useEffect6, useCallback as useCallback3 } from "react";
+import { useState as useState7, useEffect as useEffect7, useCallback as useCallback3 } from "react";
 import { Box as Box13, Text as Text13, useApp as useApp6, useInput as useInput3 } from "ink";
 import {
   Mina as Mina4,
@@ -2482,7 +2499,7 @@ function Bridge({ options }) {
       }
     }
   });
-  useEffect6(() => {
+  useEffect7(() => {
     loadInitialData();
   }, []);
   const loadInitialData = async () => {
@@ -2671,7 +2688,7 @@ async function bridgeCommand(options) {
 }
 
 // src/commands/history.tsx
-import { useState as useState8, useEffect as useEffect7 } from "react";
+import { useState as useState8, useEffect as useEffect8 } from "react";
 import { Box as Box14, Text as Text14, useApp as useApp7 } from "ink";
 
 // src/lib/history.ts
@@ -2705,7 +2722,7 @@ function getHistory(limit = 10, address) {
 }
 
 // src/commands/history.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function formatDate(timestamp) {
   return new Date(timestamp).toLocaleString("en-US", {
     month: "2-digit",
@@ -2770,12 +2787,12 @@ function HistoryCommand({
   const { exit } = useApp7();
   const [entries, setEntries] = useState8([]);
   const [loading, setLoading] = useState8(true);
-  useEffect7(() => {
+  useEffect8(() => {
     const history = getHistory(limit, address);
     setEntries(history);
     setLoading(false);
   }, [limit, address]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!loading && json) {
       setTimeout(() => exit(), 100);
     }
@@ -2836,7 +2853,7 @@ function HistoryCommand({
         entries.length !== 1 ? "s" : ""
       ] })
     ] }) }),
-    entries.length === 0 ? /* @__PURE__ */ jsx14(EmptyState, { address }) : /* @__PURE__ */ jsxs14(Fragment2, { children: [
+    entries.length === 0 ? /* @__PURE__ */ jsx14(EmptyState, { address }) : /* @__PURE__ */ jsxs14(Fragment, { children: [
       /* @__PURE__ */ jsx14(
         Table,
         {
@@ -2867,13 +2884,13 @@ function HistoryCommand({
 }
 
 // src/commands/balance.tsx
-import React10, { useState as useState9, useEffect as useEffect8 } from "react";
+import React10, { useState as useState9, useEffect as useEffect9 } from "react";
 import { Box as Box15, Text as Text15, useApp as useApp8 } from "ink";
 import {
   Mina as Mina5,
   getChains as getChains6
 } from "@siphoyawe/mina-sdk";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, 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)}`;
@@ -2938,7 +2955,7 @@ function BalanceCommand({
   const [loading, setLoading] = useState9(true);
   const [error, setError] = useState9(null);
   const [totalUsd, setTotalUsd] = useState9(0);
-  useEffect8(() => {
+  useEffect9(() => {
     async function loadBalances() {
       try {
         setLoading(true);
@@ -3016,7 +3033,7 @@ function BalanceCommand({
     }
     loadBalances();
   }, [address, chain, showAll]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!loading && json) {
       setTimeout(() => exit(), 100);
     }
@@ -3085,7 +3102,7 @@ function BalanceCommand({
       borders.horizontal.repeat(boxWidth - 2),
       borders.rightT
     ] }) }),
-    !hasAnyBalances ? /* @__PURE__ */ jsx15(Fragment3, { children: /* @__PURE__ */ jsxs15(Box15, { children: [
+    !hasAnyBalances ? /* @__PURE__ */ jsx15(Fragment2, { 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 })
@@ -3162,7 +3179,7 @@ function BalanceCommand({
 }
 
 // src/commands/config.tsx
-import { useState as useState10, useEffect as useEffect9 } from "react";
+import { useState as useState10, useEffect as useEffect10 } from "react";
 import { Box as Box16, Text as Text16, useApp as useApp9 } from "ink";
 
 // src/lib/config.ts
@@ -3288,7 +3305,7 @@ import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 function ConfigList() {
   const { exit } = useApp9();
   const [items, setItems] = useState10([]);
-  useEffect9(() => {
+  useEffect10(() => {
     const configItems = getConfigList();
     setItems(
       configItems.map((item) => ({
@@ -3327,7 +3344,7 @@ function ConfigGet({ configKey }) {
   const { exit } = useApp9();
   const [value, setValue] = useState10(null);
   const [error, setError] = useState10(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isValidKey(configKey)) {
       setError(`Unknown config key: ${configKey}`);
     } else {
@@ -3360,7 +3377,7 @@ function ConfigSet({ configKey, configValue }) {
   const [success, setSuccess] = useState10(false);
   const [error, setError] = useState10(null);
   const [parsedValue, setParsedValue] = useState10(null);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isValidKey(configKey)) {
       setError(`Unknown config key: ${configKey}`);
     } else {
@@ -3404,7 +3421,7 @@ function ConfigSet({ configKey, configValue }) {
 }
 function ConfigPath() {
   const { exit } = useApp9();
-  useEffect9(() => {
+  useEffect10(() => {
     setTimeout(() => exit(), 100);
   }, [exit]);
   return /* @__PURE__ */ jsxs16(Box16, { flexDirection: "column", padding: 1, children: [
@@ -3417,7 +3434,7 @@ function ConfigPath() {
 }
 function ConfigHelp() {
   const { exit } = useApp9();
-  useEffect9(() => {
+  useEffect10(() => {
     setTimeout(() => exit(), 100);
   }, [exit]);
   return /* @__PURE__ */ jsxs16(Box16, { flexDirection: "column", padding: 1, children: [
@@ -3483,7 +3500,7 @@ function ConfigCommand({ action, key: configKey, value }) {
 }
 
 // src/index.tsx
-var VERSION = "1.2.0";
+var VERSION = "1.2.2";
 var program = new Command();
 program.name("mina").description("Mina Bridge CLI - Bridge assets from any chain to Hyperliquid").version(VERSION, "-v, --version", "Display the current version").helpOption("-h, --help", "Display help information");
 program.command("wizard").description("Launch the interactive bridge wizard").action(() => {