@unifold/ui-react 0.1.58 → 0.1.59

package/dist/index.d.mts

@@ -185,6 +185,8 @@ interface DepositModalProps {
     browserWalletAmountQuickSelect?: BrowserWalletAmountQuickSelect;
     /** Enable "Pay with Exchange" option. Overrides dashboard default. Defaults to dashboard value or true. */
     enablePayWithExchange?: boolean;
+    /** Enable the fiat on-ramp option (shown as "Deposit with Card"). Overrides dashboard default. Defaults to dashboard value or true. */
+    enableFiatOnramp?: boolean;
     /** Enable "Connect Exchange" option for direct Coinbase Connect integration. Defaults to false. */
     enableConnectExchange?: boolean;
     /** Enable "Pay with Cash App" option. Defaults to false. */
@@ -210,7 +212,7 @@ interface DepositModalProps {
     /** First screen when the modal opens. Default `main` (deposit menu). */
     initialScreen?: DepositModalInitialScreen;
 }
-declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, enableConnectExchange, enableCashApp, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, onEvent, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, enableFiatOnramp, enableConnectExchange, enableCashApp, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, onEvent, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;

package/dist/index.d.ts

@@ -185,6 +185,8 @@ interface DepositModalProps {
     browserWalletAmountQuickSelect?: BrowserWalletAmountQuickSelect;
     /** Enable "Pay with Exchange" option. Overrides dashboard default. Defaults to dashboard value or true. */
     enablePayWithExchange?: boolean;
+    /** Enable the fiat on-ramp option (shown as "Deposit with Card"). Overrides dashboard default. Defaults to dashboard value or true. */
+    enableFiatOnramp?: boolean;
     /** Enable "Connect Exchange" option for direct Coinbase Connect integration. Defaults to false. */
     enableConnectExchange?: boolean;
     /** Enable "Pay with Cash App" option. Defaults to false. */
@@ -210,7 +212,7 @@ interface DepositModalProps {
     /** First screen when the modal opens. Default `main` (deposit menu). */
     initialScreen?: DepositModalInitialScreen;
 }
-declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, enableConnectExchange, enableCashApp, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, onEvent, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, enableFiatOnramp, enableConnectExchange, enableCashApp, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, onEvent, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;

package/dist/index.js

@@ -10307,6 +10307,7 @@ function DepositsModal({
 // src/components/deposits/TokenSelectorSheet.tsx
 var import_react14 = require("react");
 var import_lucide_react19 = require("lucide-react");
+var import_fuse = __toESM(require("fuse.js"));
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var STORAGE_KEY = "unifold_recent_tokens";
 var MAX_RECENT_TOKENS = 5;
@@ -10412,13 +10413,25 @@ function TokenSelectorSheet({
     });
     setRecentTokens(updated);
   };
+  const fuse = (0, import_react14.useMemo)(
+    () => new import_fuse.default(allOptions, {
+      keys: [
+        { name: "token.symbol", weight: 2 },
+        { name: "token.name", weight: 1 },
+        { name: "chain.chain_name", weight: 0.5 }
+      ],
+      threshold: 0.2,
+      ignoreLocation: true,
+      minMatchCharLength: 2
+    }),
+    [allOptions]
+  );
   const filteredOptions = (0, import_react14.useMemo)(() => {
     if (!searchQuery.trim()) return allOptions;
-    const query = searchQuery.toLowerCase();
-    return allOptions.filter(
-      ({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
-    );
-  }, [allOptions, searchQuery]);
+    const query = searchQuery.trim();
+    const results = fuse.search(query);
+    return results.map((r) => r.item);
+  }, [fuse, allOptions, searchQuery]);
   const isCommonToken = (symbol, chainType, chainId) => {
     return COMMON_TOKENS.some(
       (ct) => ct.symbol === symbol && ct.chainType === chainType && ct.chainId === chainId
@@ -14174,6 +14187,7 @@ function DepositModal({
   enableConnectWallet = false,
   browserWalletAmountQuickSelect = "percentage",
   enablePayWithExchange,
+  enableFiatOnramp,
   enableConnectExchange = false,
   enableCashApp = false,
   hideDepositFlowInfo = false,
@@ -14195,8 +14209,9 @@ function DepositModal({
     const s = initialScreen ?? "main";
     if (s === "tracker" && hideDepositTracker) return "main";
     if (s === "cashapp" && !enableCashApp) return "main";
+    if (s === "card" && enableFiatOnramp === false) return "main";
     return s;
-  }, [initialScreen, hideDepositTracker, enableCashApp]);
+  }, [initialScreen, hideDepositTracker, enableCashApp, enableFiatOnramp]);
   const [containerEl, setContainerEl] = (0, import_react20.useState)(null);
   const containerCallbackRef = (0, import_react20.useCallback)((el) => {
     setContainerEl(el);
@@ -14312,6 +14327,13 @@ function DepositModal({
     enabled: open
   });
   const showPayWithExchange = enablePayWithExchange ?? projectConfig?.pay_with_exchange?.enabled ?? true;
+  const showFiatOnramp = enableFiatOnramp ?? projectConfig?.fiat_onramp?.enabled ?? true;
+  (0, import_react20.useEffect)(() => {
+    if (view === "card" && !showFiatOnramp) {
+      setView("main");
+      setCardView("amount");
+    }
+  }, [view, showFiatOnramp]);
   const { exchanges, isLoading: exchangesLoading } = useExchanges({
     publishableKey,
     enabled: open && showPayWithExchange
@@ -14621,7 +14643,7 @@ function DepositModal({
                     featuredWallets: projectConfig?.connect_wallet?.wallets
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                showFiatOnramp && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   DepositWithCardButton,
                   {
                     onClick: () => setView("card"),
@@ -17606,6 +17628,7 @@ function WithdrawModal({
 // src/components/withdrawals/WithdrawTokenSelector.tsx
 var import_react27 = require("react");
 var import_lucide_react34 = require("lucide-react");
+var import_fuse2 = __toESM(require("fuse.js"));
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var t11 = i18n.withdrawModal;
 function WithdrawTokenSelector({
@@ -17625,13 +17648,25 @@ function WithdrawTokenSelector({
     });
     return options;
   }, [tokens]);
+  const fuse = (0, import_react27.useMemo)(
+    () => new import_fuse2.default(allOptions, {
+      keys: [
+        { name: "token.symbol", weight: 2 },
+        { name: "token.name", weight: 1 },
+        { name: "chain.chain_name", weight: 0.5 }
+      ],
+      threshold: 0.2,
+      ignoreLocation: true,
+      minMatchCharLength: 2
+    }),
+    [allOptions]
+  );
   const filteredOptions = (0, import_react27.useMemo)(() => {
     if (!searchQuery.trim()) return allOptions;
-    const query = searchQuery.toLowerCase();
-    return allOptions.filter(
-      ({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
-    );
-  }, [allOptions, searchQuery]);
+    const query = searchQuery.trim();
+    const results = fuse.search(query);
+    return results.map((r) => r.item);
+  }, [fuse, allOptions, searchQuery]);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "div",
     {

package/dist/index.mjs

@@ -10284,6 +10284,7 @@ function DepositsModal({
 // src/components/deposits/TokenSelectorSheet.tsx
 import { useState as useState23, useMemo as useMemo6, useEffect as useEffect19 } from "react";
 import { ArrowLeft as ArrowLeft2, X as X4 } from "lucide-react";
+import Fuse from "fuse.js";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
 var STORAGE_KEY = "unifold_recent_tokens";
 var MAX_RECENT_TOKENS = 5;
@@ -10389,13 +10390,25 @@ function TokenSelectorSheet({
     });
     setRecentTokens(updated);
   };
+  const fuse = useMemo6(
+    () => new Fuse(allOptions, {
+      keys: [
+        { name: "token.symbol", weight: 2 },
+        { name: "token.name", weight: 1 },
+        { name: "chain.chain_name", weight: 0.5 }
+      ],
+      threshold: 0.2,
+      ignoreLocation: true,
+      minMatchCharLength: 2
+    }),
+    [allOptions]
+  );
   const filteredOptions = useMemo6(() => {
     if (!searchQuery.trim()) return allOptions;
-    const query = searchQuery.toLowerCase();
-    return allOptions.filter(
-      ({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
-    );
-  }, [allOptions, searchQuery]);
+    const query = searchQuery.trim();
+    const results = fuse.search(query);
+    return results.map((r) => r.item);
+  }, [fuse, allOptions, searchQuery]);
   const isCommonToken = (symbol, chainType, chainId) => {
     return COMMON_TOKENS.some(
       (ct) => ct.symbol === symbol && ct.chainType === chainType && ct.chainId === chainId
@@ -14176,6 +14189,7 @@ function DepositModal({
   enableConnectWallet = false,
   browserWalletAmountQuickSelect = "percentage",
   enablePayWithExchange,
+  enableFiatOnramp,
   enableConnectExchange = false,
   enableCashApp = false,
   hideDepositFlowInfo = false,
@@ -14197,8 +14211,9 @@ function DepositModal({
     const s = initialScreen ?? "main";
     if (s === "tracker" && hideDepositTracker) return "main";
     if (s === "cashapp" && !enableCashApp) return "main";
+    if (s === "card" && enableFiatOnramp === false) return "main";
     return s;
-  }, [initialScreen, hideDepositTracker, enableCashApp]);
+  }, [initialScreen, hideDepositTracker, enableCashApp, enableFiatOnramp]);
   const [containerEl, setContainerEl] = useState31(null);
   const containerCallbackRef = useCallback5((el) => {
     setContainerEl(el);
@@ -14314,6 +14329,13 @@ function DepositModal({
     enabled: open
   });
   const showPayWithExchange = enablePayWithExchange ?? projectConfig?.pay_with_exchange?.enabled ?? true;
+  const showFiatOnramp = enableFiatOnramp ?? projectConfig?.fiat_onramp?.enabled ?? true;
+  useEffect25(() => {
+    if (view === "card" && !showFiatOnramp) {
+      setView("main");
+      setCardView("amount");
+    }
+  }, [view, showFiatOnramp]);
   const { exchanges, isLoading: exchangesLoading } = useExchanges({
     publishableKey,
     enabled: open && showPayWithExchange
@@ -14623,7 +14645,7 @@ function DepositModal({
                     featuredWallets: projectConfig?.connect_wallet?.wallets
                   }
                 ),
-                /* @__PURE__ */ jsx55(
+                showFiatOnramp && /* @__PURE__ */ jsx55(
                   DepositWithCardButton,
                   {
                     onClick: () => setView("card"),
@@ -17655,6 +17677,7 @@ function WithdrawModal({
 // src/components/withdrawals/WithdrawTokenSelector.tsx
 import { useState as useState37, useMemo as useMemo14 } from "react";
 import { Search } from "lucide-react";
+import Fuse2 from "fuse.js";
 import { jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
 var t11 = i18n.withdrawModal;
 function WithdrawTokenSelector({
@@ -17674,13 +17697,25 @@ function WithdrawTokenSelector({
     });
     return options;
   }, [tokens]);
+  const fuse = useMemo14(
+    () => new Fuse2(allOptions, {
+      keys: [
+        { name: "token.symbol", weight: 2 },
+        { name: "token.name", weight: 1 },
+        { name: "chain.chain_name", weight: 0.5 }
+      ],
+      threshold: 0.2,
+      ignoreLocation: true,
+      minMatchCharLength: 2
+    }),
+    [allOptions]
+  );
   const filteredOptions = useMemo14(() => {
     if (!searchQuery.trim()) return allOptions;
-    const query = searchQuery.toLowerCase();
-    return allOptions.filter(
-      ({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
-    );
-  }, [allOptions, searchQuery]);
+    const query = searchQuery.trim();
+    const results = fuse.search(query);
+    return results.map((r) => r.item);
+  }, [fuse, allOptions, searchQuery]);
   return /* @__PURE__ */ jsxs56(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-react",
-  "version": "0.1.58",
+  "version": "0.1.59",
   "description": "Unifold UI React - Deposit and onramp components for React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,9 +19,9 @@
     "dist"
   ],
   "peerDependencies": {
+    "@solana/web3.js": "^1.87.0",
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
-    "@solana/web3.js": "^1.87.0"
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
@@ -31,10 +31,11 @@
     "@tanstack/react-query": "^5.90.11",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "fuse.js": "^7.4.0",
     "lucide-react": "^0.454.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "tailwind-merge": "^2.0.0",
-    "@unifold/core": "0.1.58"
+    "@unifold/core": "0.1.59"
   },
   "devDependencies": {
     "@solana/web3.js": "^1.87.0",