@unifold/ui-react 0.1.65 → 0.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +22 -9
  2. package/dist/index.mjs +25 -12
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -14714,7 +14714,10 @@ function WalletConnect({
14714
14714
  children: [
14715
14715
  /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
14716
14716
  WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
14717
- /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
14717
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
14718
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
14719
+ wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Last used" })
14720
+ ] })
14718
14721
  ] }),
14719
14722
  isPending ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react28.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Detected" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
14720
14723
  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -15518,8 +15521,8 @@ function DepositModal({
15518
15521
  cashAppMenuButton
15519
15522
  ].filter(Boolean);
15520
15523
  const depositTabs = [
15521
- { id: "crypto", label: "Use Crypto", buttons: cryptoMenuButtons },
15522
- { id: "cash", label: "Use Cash", buttons: cashMenuButtons }
15524
+ { id: "crypto", label: "Use Crypto", icon: import_lucide_react29.Bitcoin, buttons: cryptoMenuButtons },
15525
+ { id: "cash", label: "Use Cash", icon: import_lucide_react29.DollarSign, buttons: cashMenuButtons }
15523
15526
  ].filter((tab) => tab.buttons.length > 0);
15524
15527
  const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
15525
15528
  const renderMainMenuBody = () => {
@@ -15542,18 +15545,16 @@ function DepositModal({
15542
15545
  role: "tablist",
15543
15546
  children: depositTabs.map((tab) => {
15544
15547
  const active = activeDepositTab.id === tab.id;
15545
- return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
15548
+ const TabIcon = tab.icon;
15549
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
15546
15550
  "button",
15547
15551
  {
15548
15552
  type: "button",
15549
15553
  role: "tab",
15550
15554
  "aria-selected": active,
15551
15555
  onClick: () => setDepositTab(tab.id),
15552
- className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all",
15556
+ className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all uf-flex uf-items-center uf-justify-center uf-gap-1.5",
15553
15557
  style: {
15554
- // Active tab is a soft, blurred glass pill — a faint accent
15555
- // tint with its own backdrop blur and a subtle border/shadow,
15556
- // so it looks frosted instead of like a hard solid button.
15557
15558
  backgroundColor: active ? `color-mix(in srgb, ${colors2.primary} 22%, transparent)` : "transparent",
15558
15559
  backdropFilter: active ? "blur(8px)" : void 0,
15559
15560
  WebkitBackdropFilter: active ? "blur(8px)" : void 0,
@@ -15561,7 +15562,19 @@ function DepositModal({
15561
15562
  color: active ? colors2.foreground : colors2.foregroundMuted,
15562
15563
  fontFamily: fonts.medium
15563
15564
  },
15564
- children: tab.label
15565
+ children: [
15566
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
15567
+ "span",
15568
+ {
15569
+ className: "uf-inline-flex uf-items-center uf-justify-center uf-rounded-full uf-w-5 uf-h-5 uf-flex-shrink-0",
15570
+ style: {
15571
+ backgroundColor: active ? colors2.foreground : colors2.foregroundMuted
15572
+ },
15573
+ children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
15574
+ }
15575
+ ),
15576
+ tab.label
15577
+ ]
15565
15578
  },
15566
15579
  tab.id
15567
15580
  );
package/dist/index.mjs CHANGED
@@ -7,7 +7,7 @@ import {
7
7
  useRef as useRef9,
8
8
  useMemo as useMemo10
9
9
  } from "react";
10
- import { ChevronRight as ChevronRight14, MapPinOff, AlertTriangle as AlertTriangle2 } from "lucide-react";
10
+ import { ChevronRight as ChevronRight14, MapPinOff, AlertTriangle as AlertTriangle2, Bitcoin, DollarSign as DollarSign3 } from "lucide-react";
11
11
 
12
12
  // src/components/shared/dialog.tsx
13
13
  import * as React3 from "react";
@@ -14724,7 +14724,10 @@ function WalletConnect({
14724
14724
  children: [
14725
14725
  /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
14726
14726
  WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ jsx54(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ jsx54("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
14727
- /* @__PURE__ */ jsx54("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
14727
+ /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
14728
+ /* @__PURE__ */ jsx54("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
14729
+ wallet.id === recentWalletId && /* @__PURE__ */ jsx54("span", { className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Last used" })
14730
+ ] })
14728
14731
  ] }),
14729
14732
  isPending ? /* @__PURE__ */ jsx54(Loader28, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ jsx54("span", { className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Detected" }) : /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
14730
14733
  /* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -15528,8 +15531,8 @@ function DepositModal({
15528
15531
  cashAppMenuButton
15529
15532
  ].filter(Boolean);
15530
15533
  const depositTabs = [
15531
- { id: "crypto", label: "Use Crypto", buttons: cryptoMenuButtons },
15532
- { id: "cash", label: "Use Cash", buttons: cashMenuButtons }
15534
+ { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
15535
+ { id: "cash", label: "Use Cash", icon: DollarSign3, buttons: cashMenuButtons }
15533
15536
  ].filter((tab) => tab.buttons.length > 0);
15534
15537
  const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
15535
15538
  const renderMainMenuBody = () => {
@@ -15552,18 +15555,16 @@ function DepositModal({
15552
15555
  role: "tablist",
15553
15556
  children: depositTabs.map((tab) => {
15554
15557
  const active = activeDepositTab.id === tab.id;
15555
- return /* @__PURE__ */ jsx55(
15558
+ const TabIcon = tab.icon;
15559
+ return /* @__PURE__ */ jsxs49(
15556
15560
  "button",
15557
15561
  {
15558
15562
  type: "button",
15559
15563
  role: "tab",
15560
15564
  "aria-selected": active,
15561
15565
  onClick: () => setDepositTab(tab.id),
15562
- className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all",
15566
+ className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all uf-flex uf-items-center uf-justify-center uf-gap-1.5",
15563
15567
  style: {
15564
- // Active tab is a soft, blurred glass pill — a faint accent
15565
- // tint with its own backdrop blur and a subtle border/shadow,
15566
- // so it looks frosted instead of like a hard solid button.
15567
15568
  backgroundColor: active ? `color-mix(in srgb, ${colors2.primary} 22%, transparent)` : "transparent",
15568
15569
  backdropFilter: active ? "blur(8px)" : void 0,
15569
15570
  WebkitBackdropFilter: active ? "blur(8px)" : void 0,
@@ -15571,7 +15572,19 @@ function DepositModal({
15571
15572
  color: active ? colors2.foreground : colors2.foregroundMuted,
15572
15573
  fontFamily: fonts.medium
15573
15574
  },
15574
- children: tab.label
15575
+ children: [
15576
+ /* @__PURE__ */ jsx55(
15577
+ "span",
15578
+ {
15579
+ className: "uf-inline-flex uf-items-center uf-justify-center uf-rounded-full uf-w-5 uf-h-5 uf-flex-shrink-0",
15580
+ style: {
15581
+ backgroundColor: active ? colors2.foreground : colors2.foregroundMuted
15582
+ },
15583
+ children: /* @__PURE__ */ jsx55(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
15584
+ }
15585
+ ),
15586
+ tab.label
15587
+ ]
15575
15588
  },
15576
15589
  tab.id
15577
15590
  );
@@ -17055,7 +17068,7 @@ import {
17055
17068
  ChevronUp as ChevronUp7,
17056
17069
  Clock as Clock5,
17057
17070
  ClipboardPaste,
17058
- DollarSign as DollarSign3,
17071
+ DollarSign as DollarSign4,
17059
17072
  Loader2 as Loader29,
17060
17073
  ShieldCheck as ShieldCheck3,
17061
17074
  Wallet as Wallet3
@@ -17928,7 +17941,7 @@ function WithdrawForm({
17928
17941
  ] })
17929
17942
  ] }),
17930
17943
  /* @__PURE__ */ jsxs52("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
17931
- /* @__PURE__ */ jsx58("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx58(DollarSign3, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
17944
+ /* @__PURE__ */ jsx58("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx58(DollarSign4, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
17932
17945
  /* @__PURE__ */ jsxs52("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
17933
17946
  tCrypto.priceImpact.label,
17934
17947
  ":",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unifold/ui-react",
3
- "version": "0.1.65",
3
+ "version": "0.1.66",
4
4
  "description": "Unifold UI React - Deposit and onramp components for React applications",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -36,7 +36,7 @@
36
36
  "mipd": "^0.0.7",
37
37
  "qr-code-styling": "^1.6.0-rc.1",
38
38
  "tailwind-merge": "^2.0.0",
39
- "@unifold/core": "0.1.65"
39
+ "@unifold/core": "0.1.66"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@solana/web3.js": "^1.87.0",