@unifold/ui-web 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 +32 -9
  2. package/dist/index.mjs +32 -9
  3. package/package.json +5 -5
package/dist/index.js CHANGED
@@ -38524,6 +38524,15 @@ var ArrowUpDown = createLucideIcon("ArrowUpDown", [
38524
38524
  ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
38525
38525
  ["path", { d: "M7 4v16", key: "1glfcx" }]
38526
38526
  ]);
38527
+ var Bitcoin = createLucideIcon("Bitcoin", [
38528
+ [
38529
+ "path",
38530
+ {
38531
+ d: "M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727",
38532
+ key: "yr8idg"
38533
+ }
38534
+ ]
38535
+ ]);
38527
38536
  var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
38528
38537
  var ChevronDown = createLucideIcon("ChevronDown", [
38529
38538
  ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
@@ -64363,7 +64372,10 @@ function WalletConnect({
64363
64372
  children: [
64364
64373
  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
64365
64374
  WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
64366
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
64375
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
64376
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
64377
+ wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime73.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" })
64378
+ ] })
64367
64379
  ] }),
64368
64380
  isPending ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
64369
64381
  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -65164,8 +65176,8 @@ function DepositModal({
65164
65176
  cashAppMenuButton
65165
65177
  ].filter(Boolean);
65166
65178
  const depositTabs = [
65167
- { id: "crypto", label: "Use Crypto", buttons: cryptoMenuButtons },
65168
- { id: "cash", label: "Use Cash", buttons: cashMenuButtons }
65179
+ { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
65180
+ { id: "cash", label: "Use Cash", icon: DollarSign, buttons: cashMenuButtons }
65169
65181
  ].filter((tab) => tab.buttons.length > 0);
65170
65182
  const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
65171
65183
  const renderMainMenuBody = () => {
@@ -65188,18 +65200,16 @@ function DepositModal({
65188
65200
  role: "tablist",
65189
65201
  children: depositTabs.map((tab) => {
65190
65202
  const active = activeDepositTab.id === tab.id;
65191
- return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
65203
+ const TabIcon = tab.icon;
65204
+ return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
65192
65205
  "button",
65193
65206
  {
65194
65207
  type: "button",
65195
65208
  role: "tab",
65196
65209
  "aria-selected": active,
65197
65210
  onClick: () => setDepositTab(tab.id),
65198
- className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all",
65211
+ 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",
65199
65212
  style: {
65200
- // Active tab is a soft, blurred glass pill — a faint accent
65201
- // tint with its own backdrop blur and a subtle border/shadow,
65202
- // so it looks frosted instead of like a hard solid button.
65203
65213
  backgroundColor: active ? `color-mix(in srgb, ${colors2.primary} 22%, transparent)` : "transparent",
65204
65214
  backdropFilter: active ? "blur(8px)" : void 0,
65205
65215
  WebkitBackdropFilter: active ? "blur(8px)" : void 0,
@@ -65207,7 +65217,19 @@ function DepositModal({
65207
65217
  color: active ? colors2.foreground : colors2.foregroundMuted,
65208
65218
  fontFamily: fonts.medium
65209
65219
  },
65210
- children: tab.label
65220
+ children: [
65221
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
65222
+ "span",
65223
+ {
65224
+ className: "uf-inline-flex uf-items-center uf-justify-center uf-rounded-full uf-w-5 uf-h-5 uf-flex-shrink-0",
65225
+ style: {
65226
+ backgroundColor: active ? colors2.foreground : colors2.foregroundMuted
65227
+ },
65228
+ children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
65229
+ }
65230
+ ),
65231
+ tab.label
65232
+ ]
65211
65233
  },
65212
65234
  tab.id
65213
65235
  );
@@ -68405,6 +68427,7 @@ lucide-react/dist/esm/createLucideIcon.js:
68405
68427
  lucide-react/dist/esm/icons/arrow-left-right.js:
68406
68428
  lucide-react/dist/esm/icons/arrow-left.js:
68407
68429
  lucide-react/dist/esm/icons/arrow-up-down.js:
68430
+ lucide-react/dist/esm/icons/bitcoin.js:
68408
68431
  lucide-react/dist/esm/icons/check.js:
68409
68432
  lucide-react/dist/esm/icons/chevron-down.js:
68410
68433
  lucide-react/dist/esm/icons/chevron-right.js:
package/dist/index.mjs CHANGED
@@ -38511,6 +38511,15 @@ var ArrowUpDown = createLucideIcon("ArrowUpDown", [
38511
38511
  ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
38512
38512
  ["path", { d: "M7 4v16", key: "1glfcx" }]
38513
38513
  ]);
38514
+ var Bitcoin = createLucideIcon("Bitcoin", [
38515
+ [
38516
+ "path",
38517
+ {
38518
+ d: "M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727",
38519
+ key: "yr8idg"
38520
+ }
38521
+ ]
38522
+ ]);
38514
38523
  var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
38515
38524
  var ChevronDown = createLucideIcon("ChevronDown", [
38516
38525
  ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
@@ -64350,7 +64359,10 @@ function WalletConnect({
64350
64359
  children: [
64351
64360
  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
64352
64361
  WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
64353
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
64362
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
64363
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
64364
+ wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime73.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" })
64365
+ ] })
64354
64366
  ] }),
64355
64367
  isPending ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime73.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_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
64356
64368
  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -65151,8 +65163,8 @@ function DepositModal({
65151
65163
  cashAppMenuButton
65152
65164
  ].filter(Boolean);
65153
65165
  const depositTabs = [
65154
- { id: "crypto", label: "Use Crypto", buttons: cryptoMenuButtons },
65155
- { id: "cash", label: "Use Cash", buttons: cashMenuButtons }
65166
+ { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
65167
+ { id: "cash", label: "Use Cash", icon: DollarSign, buttons: cashMenuButtons }
65156
65168
  ].filter((tab) => tab.buttons.length > 0);
65157
65169
  const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
65158
65170
  const renderMainMenuBody = () => {
@@ -65175,18 +65187,16 @@ function DepositModal({
65175
65187
  role: "tablist",
65176
65188
  children: depositTabs.map((tab) => {
65177
65189
  const active = activeDepositTab.id === tab.id;
65178
- return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
65190
+ const TabIcon = tab.icon;
65191
+ return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
65179
65192
  "button",
65180
65193
  {
65181
65194
  type: "button",
65182
65195
  role: "tab",
65183
65196
  "aria-selected": active,
65184
65197
  onClick: () => setDepositTab(tab.id),
65185
- className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all",
65198
+ 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",
65186
65199
  style: {
65187
- // Active tab is a soft, blurred glass pill — a faint accent
65188
- // tint with its own backdrop blur and a subtle border/shadow,
65189
- // so it looks frosted instead of like a hard solid button.
65190
65200
  backgroundColor: active ? `color-mix(in srgb, ${colors2.primary} 22%, transparent)` : "transparent",
65191
65201
  backdropFilter: active ? "blur(8px)" : void 0,
65192
65202
  WebkitBackdropFilter: active ? "blur(8px)" : void 0,
@@ -65194,7 +65204,19 @@ function DepositModal({
65194
65204
  color: active ? colors2.foreground : colors2.foregroundMuted,
65195
65205
  fontFamily: fonts.medium
65196
65206
  },
65197
- children: tab.label
65207
+ children: [
65208
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
65209
+ "span",
65210
+ {
65211
+ className: "uf-inline-flex uf-items-center uf-justify-center uf-rounded-full uf-w-5 uf-h-5 uf-flex-shrink-0",
65212
+ style: {
65213
+ backgroundColor: active ? colors2.foreground : colors2.foregroundMuted
65214
+ },
65215
+ children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
65216
+ }
65217
+ ),
65218
+ tab.label
65219
+ ]
65198
65220
  },
65199
65221
  tab.id
65200
65222
  );
@@ -68391,6 +68413,7 @@ lucide-react/dist/esm/createLucideIcon.js:
68391
68413
  lucide-react/dist/esm/icons/arrow-left-right.js:
68392
68414
  lucide-react/dist/esm/icons/arrow-left.js:
68393
68415
  lucide-react/dist/esm/icons/arrow-up-down.js:
68416
+ lucide-react/dist/esm/icons/bitcoin.js:
68394
68417
  lucide-react/dist/esm/icons/check.js:
68395
68418
  lucide-react/dist/esm/icons/chevron-down.js:
68396
68419
  lucide-react/dist/esm/icons/chevron-right.js:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unifold/ui-web",
3
- "version": "0.1.65",
3
+ "version": "0.1.66",
4
4
  "description": "Unifold UI Web - Framework-agnostic deposit widget",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -30,10 +30,10 @@
30
30
  "@types/react-dom": "^19.0.0",
31
31
  "tsup": "^8.0.0",
32
32
  "typescript": "^5.0.0",
33
- "@unifold/connect-react": "0.1.65",
34
- "@unifold/ui-react": "0.1.65",
35
- "@unifold/core": "0.1.65",
36
- "@unifold/react-provider": "0.1.65"
33
+ "@unifold/core": "0.1.66",
34
+ "@unifold/react-provider": "0.1.66",
35
+ "@unifold/ui-react": "0.1.66",
36
+ "@unifold/connect-react": "0.1.66"
37
37
  },
38
38
  "keywords": [
39
39
  "unifold",