kaleido-ui 0.1.59 → 0.1.61

package/dist/native/fonts.cjs

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var fonts_exports = {};
 __export(fonts_exports, {
   kaleidoFonts: () => kaleidoFonts,
+  monoFontFamily: () => monoFontFamily,
   satoshiFamilyForWeight: () => satoshiFamilyForWeight,
   satoshiFontFamily: () => satoshiFontFamily
 });
@@ -37,12 +38,15 @@ var import_Satoshi_Regular = __toESM(require("./fonts/Satoshi-Regular.ttf"), 1);
 var import_Satoshi_Medium = __toESM(require("./fonts/Satoshi-Medium.ttf"), 1);
 var import_Satoshi_Bold = __toESM(require("./fonts/Satoshi-Bold.ttf"), 1);
 var import_Satoshi_Black = __toESM(require("./fonts/Satoshi-Black.ttf"), 1);
+var import_GeistMono = __toESM(require("./fonts/GeistMono.ttf"), 1);
 const kaleidoFonts = {
   "Satoshi-Regular": import_Satoshi_Regular.default,
   "Satoshi-Medium": import_Satoshi_Medium.default,
   "Satoshi-Bold": import_Satoshi_Bold.default,
-  "Satoshi-Black": import_Satoshi_Black.default
+  "Satoshi-Black": import_Satoshi_Black.default,
+  GeistMono: import_GeistMono.default
 };
+const monoFontFamily = "GeistMono";
 const satoshiFontFamily = {
   regular: "Satoshi-Regular",
   medium: "Satoshi-Medium",
@@ -64,6 +68,7 @@ function satoshiFamilyForWeight(weight) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   kaleidoFonts,
+  monoFontFamily,
   satoshiFamilyForWeight,
   satoshiFontFamily
 });

package/dist/native/fonts.d.cts

@@ -4,6 +4,12 @@
  * you use as `fontFamily` in styles (identical on iOS and Android).
  */
 declare const kaleidoFonts: Record<string, number>;
+/**
+ * Monospaced family for numerals / equivalent balances — Geist Mono (the same
+ * face the web/extension references). Use for tabular amounts; pair with the
+ * `mono` text role rather than the Satoshi body face.
+ */
+declare const monoFontFamily = "GeistMono";
 /** Registered Satoshi family names, by semantic weight. */
 declare const satoshiFontFamily: {
     readonly regular: "Satoshi-Regular";
@@ -22,4 +28,4 @@ type SatoshiWeightName = keyof typeof satoshiFontFamily;
  */
 declare function satoshiFamilyForWeight(weight?: string | number): string;
 
-export { type SatoshiWeightName, kaleidoFonts, satoshiFamilyForWeight, satoshiFontFamily };
+export { type SatoshiWeightName, kaleidoFonts, monoFontFamily, satoshiFamilyForWeight, satoshiFontFamily };

package/dist/native/fonts.d.ts

@@ -4,6 +4,12 @@
  * you use as `fontFamily` in styles (identical on iOS and Android).
  */
 declare const kaleidoFonts: Record<string, number>;
+/**
+ * Monospaced family for numerals / equivalent balances — Geist Mono (the same
+ * face the web/extension references). Use for tabular amounts; pair with the
+ * `mono` text role rather than the Satoshi body face.
+ */
+declare const monoFontFamily = "GeistMono";
 /** Registered Satoshi family names, by semantic weight. */
 declare const satoshiFontFamily: {
     readonly regular: "Satoshi-Regular";
@@ -22,4 +28,4 @@ type SatoshiWeightName = keyof typeof satoshiFontFamily;
  */
 declare function satoshiFamilyForWeight(weight?: string | number): string;
 
-export { type SatoshiWeightName, kaleidoFonts, satoshiFamilyForWeight, satoshiFontFamily };
+export { type SatoshiWeightName, kaleidoFonts, monoFontFamily, satoshiFamilyForWeight, satoshiFontFamily };

package/dist/native/fonts.js

@@ -2,12 +2,15 @@ import SatoshiRegular from "./fonts/Satoshi-Regular.ttf";
 import SatoshiMedium from "./fonts/Satoshi-Medium.ttf";
 import SatoshiBold from "./fonts/Satoshi-Bold.ttf";
 import SatoshiBlack from "./fonts/Satoshi-Black.ttf";
+import GeistMono from "./fonts/GeistMono.ttf";
 const kaleidoFonts = {
   "Satoshi-Regular": SatoshiRegular,
   "Satoshi-Medium": SatoshiMedium,
   "Satoshi-Bold": SatoshiBold,
-  "Satoshi-Black": SatoshiBlack
+  "Satoshi-Black": SatoshiBlack,
+  GeistMono
 };
+const monoFontFamily = "GeistMono";
 const satoshiFontFamily = {
   regular: "Satoshi-Regular",
   medium: "Satoshi-Medium",
@@ -28,6 +31,7 @@ function satoshiFamilyForWeight(weight) {
 }
 export {
   kaleidoFonts,
+  monoFontFamily,
   satoshiFamilyForWeight,
   satoshiFontFamily
 };

package/dist/web/index.cjs

@@ -1822,12 +1822,14 @@ function AssetCard({
   balanceVisible = true,
   accentColor,
   status,
+  isYielding,
   onClick,
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
   const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = (0, import_react4.useState)(false);
+  const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
   const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
@@ -1879,7 +1881,26 @@ function AssetCard({
                 children: displayShown
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-end gap-1 mt-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+              showYield && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { title: "Yield Generating Asset", className: "text-success/90 flex items-center justify-center bg-success/10 rounded-full p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "w-3 h-3",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" })
+                  ]
+                }
+              ) })
+            ] }),
             status && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusBadge, { status, className: "mt-2" })
           ] })
         ] })
@@ -2551,11 +2572,14 @@ function AccountStatusTabs({
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "mt-5 text-sm leading-relaxed text-muted-foreground", children: selectedAccount.detail }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Capabilities" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               "span",
               {
-                className: "rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/65",
-                children: capability
+                className: "inline-flex items-center gap-1.5 rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/70",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "size-1.5 rounded-full bg-primary/70" }),
+                  capability
+                ]
               },
               capability
             )) })
@@ -8217,6 +8241,11 @@ function DepositPreGeneration({
 // src/web/components/deposit-asset-selection.tsx
 var import_react16 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
+var ADD_ASSET_SUBTITLE = {
+  RGB: "RGB asset on Bitcoin",
+  SPARK: "Spark-native asset",
+  ARKADE: "Arkade-native asset"
+};
 var PROTOCOL_BADGE = {
   RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
   SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
@@ -8254,6 +8283,7 @@ function DepositAssetSelection({
   const noResults = filteredAssets.length === 0 && !!searchQuery;
   const isSearching = !!searchQuery;
   const [assetsExpanded, setAssetsExpanded] = (0, import_react16.useState)(false);
+  const [showAddAssetModal, setShowAddAssetModal] = (0, import_react16.useState)(false);
   (0, import_react16.useEffect)(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);
@@ -8433,52 +8463,60 @@ function DepositAssetSelection({
           ]
         }
       ) }),
-      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-2 pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "px-1", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/35", children: "New Asset" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-          "div",
+      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-add-asset",
+          onClick: () => setShowAddAssetModal(true),
+          className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 p-3 transition-all hover:border-border hover:bg-accent",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/15", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: "add", size: "md", className: "text-primary" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Add an asset" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("p", { className: "text-xxs leading-tight text-white/40", children: [
+                "Receive a new ",
+                newAssetOptions.map((o) => o.ticker).join(", "),
+                " asset"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      BottomSheet,
+      {
+        open: showAddAssetModal,
+        title: "Add an asset",
+        onClose: () => setShowAddAssetModal(false),
+        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+          "button",
           {
+            type: "button",
+            "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
             className: cn(
-              "grid gap-2",
-              newAssetOptions.length === 1 ? "grid-cols-1" : newAssetOptions.length === 2 ? "grid-cols-2" : "grid-cols-3"
+              "group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left transition-all",
+              option.idleClass
             ),
-            children: newAssetOptions.map((option) => {
-              const active = isNewAsset && newAssetAccount === option.account;
-              return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
-                  className: cn(
-                    "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
-                    active ? option.activeClass : option.idleClass
-                  ),
-                  onClick: () => handleAddNewAsset(option.account),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "relative", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(AssetIcon, { ticker: option.ticker, size: 40 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: "add", size: "xs", className: "text-background" }) })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-                      "div",
-                      {
-                        className: cn(
-                          "text-sm font-bold tracking-wide",
-                          active ? "text-white" : "text-white group-hover:opacity-90",
-                          !active && option.titleHoverClass
-                        ),
-                        children: option.title
-                      }
-                    ) })
-                  ]
-                },
-                option.account
-              );
-            })
-          }
-        )
-      ] })
-    ] }),
+            onClick: () => {
+              setShowAddAssetModal(false);
+              handleAddNewAsset(option.account);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: cn("text-sm font-bold tracking-wide text-white", option.titleHoverClass), children: option.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "mt-0.5 text-xxs text-white/40", children: ADD_ASSET_SUBTITLE[option.account] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: "add", size: "sm", className: "text-white/30 transition-colors group-hover:text-white/60" })
+            ]
+          },
+          option.account
+        )) })
+      }
+    ),
     isNewAsset && newAssetAccount === "RGB" && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex-shrink-0 px-5 pb-3 animate-in fade-in slide-in-from-bottom-2 duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "space-y-2 rounded-2xl border border-network-arkade/20 bg-network-arkade/5 p-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "text-tiny leading-relaxed text-network-arkade/80", children: "Leave empty to receive any RGB asset, or enter a specific asset ID." }),

package/dist/web/index.d.cts

@@ -230,10 +230,12 @@ interface AssetCardProps {
     accentColor?: string;
     /** Optional state badge for assets that are present but not currently spendable. */
     status?: StatusType;
+    /** Whether the asset is yield generating */
+    isYielding?: boolean;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, isYielding, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */

package/dist/web/index.d.ts

@@ -230,10 +230,12 @@ interface AssetCardProps {
     accentColor?: string;
     /** Optional state badge for assets that are present but not currently spendable. */
     status?: StatusType;
+    /** Whether the asset is yield generating */
+    isYielding?: boolean;
     onClick?: () => void;
     className?: string;
 }
-declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
+declare function AssetCard({ ticker, name, displayBalance, networks, logoUri, balanceVisible, accentColor, status, isYielding, onClick, className, }: AssetCardProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionCardProps {
     /** Direction of the transaction */

package/dist/web/index.js

@@ -1639,12 +1639,14 @@ function AssetCard({
   balanceVisible = true,
   accentColor,
   status,
+  isYielding,
   onClick,
   className
 }) {
   const shown = balanceVisible ? displayBalance : "\u2022\u2022\u2022\u2022\u2022\u2022";
   const displayShown = balanceVisible ? formatDisplayAmountText(displayBalance) : shown;
   const [hovered, setHovered] = useState5(false);
+  const showYield = isYielding ?? ["USDB"].includes(ticker.toUpperCase());
   const gradientStyle = accentColor ? { background: `linear-gradient(135deg, var(--card) 30%, ${accentColor}${hovered ? "77" : "55"} 75%, ${accentColor}${hovered ? "dd" : "b3"} 100%)`, transition: "background 0.3s ease" } : void 0;
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -1696,7 +1698,26 @@ function AssetCard({
                 children: displayShown
               }
             ),
-            /* @__PURE__ */ jsx19("p", { className: "mt-0.5 truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-end gap-1 mt-0.5", children: [
+              /* @__PURE__ */ jsx19("p", { className: "truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
+              showYield && /* @__PURE__ */ jsx19("div", { title: "Yield Generating Asset", className: "text-success/90 flex items-center justify-center bg-success/10 rounded-full p-0.5", children: /* @__PURE__ */ jsxs8(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "w-3 h-3",
+                  children: [
+                    /* @__PURE__ */ jsx19("path", { d: "M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" }),
+                    /* @__PURE__ */ jsx19("path", { d: "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" })
+                  ]
+                }
+              ) })
+            ] }),
             status && /* @__PURE__ */ jsx19(StatusBadge, { status, className: "mt-2" })
           ] })
         ] })
@@ -2374,11 +2395,14 @@ function AccountStatusTabs({
           /* @__PURE__ */ jsx28("p", { className: "mt-5 text-sm leading-relaxed text-muted-foreground", children: selectedAccount.detail }),
           /* @__PURE__ */ jsxs15("div", { className: "mt-5", children: [
             /* @__PURE__ */ jsx28("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Capabilities" }),
-            /* @__PURE__ */ jsx28("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx28("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ jsxs15(
               "span",
               {
-                className: "rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/65",
-                children: capability
+                className: "inline-flex items-center gap-1.5 rounded-full border bg-white/[0.05] px-2.5 py-1 text-xxs font-medium text-white/70",
+                children: [
+                  /* @__PURE__ */ jsx28("span", { className: "size-1.5 rounded-full bg-primary/70" }),
+                  capability
+                ]
               },
               capability
             )) })
@@ -8040,6 +8064,11 @@ function DepositPreGeneration({
 // src/web/components/deposit-asset-selection.tsx
 import { useEffect as useEffect10, useState as useState15 } from "react";
 import { Fragment as Fragment16, jsx as jsx79, jsxs as jsxs65 } from "react/jsx-runtime";
+var ADD_ASSET_SUBTITLE = {
+  RGB: "RGB asset on Bitcoin",
+  SPARK: "Spark-native asset",
+  ARKADE: "Arkade-native asset"
+};
 var PROTOCOL_BADGE = {
   RGB: { label: "RGB", className: "bg-network-rgb-chip text-network-rgb-text" },
   SPARK: { label: "Spark", className: "bg-network-spark-chip text-network-spark-text" },
@@ -8077,6 +8106,7 @@ function DepositAssetSelection({
   const noResults = filteredAssets.length === 0 && !!searchQuery;
   const isSearching = !!searchQuery;
   const [assetsExpanded, setAssetsExpanded] = useState15(false);
+  const [showAddAssetModal, setShowAddAssetModal] = useState15(false);
   useEffect10(() => {
     if (isSearching) setAssetsExpanded(true);
   }, [isSearching]);
@@ -8256,52 +8286,60 @@ function DepositAssetSelection({
           ]
         }
       ) }),
-      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ jsxs65("div", { className: "space-y-2 pt-2", children: [
-        /* @__PURE__ */ jsx79("div", { className: "px-1", children: /* @__PURE__ */ jsx79("p", { className: "text-xxs font-bold uppercase tracking-[0.18em] text-white/35", children: "New Asset" }) }),
-        /* @__PURE__ */ jsx79(
-          "div",
+      !searchQuery && newAssetOptions.length > 0 && /* @__PURE__ */ jsx79("div", { className: "pb-1 pt-2", children: /* @__PURE__ */ jsxs65(
+        "button",
+        {
+          type: "button",
+          "data-testid": "deposit-add-asset",
+          onClick: () => setShowAddAssetModal(true),
+          className: "group flex w-full items-center gap-3 rounded-2xl border border-white/8 bg-white/3 p-3 transition-all hover:border-border hover:bg-accent",
+          children: [
+            /* @__PURE__ */ jsx79("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/15", children: /* @__PURE__ */ jsx79(Icon, { name: "add", size: "md", className: "text-primary" }) }),
+            /* @__PURE__ */ jsxs65("div", { className: "flex-1 text-left", children: [
+              /* @__PURE__ */ jsx79("p", { className: "text-sm font-semibold text-white transition-colors group-hover:text-primary", children: "Add an asset" }),
+              /* @__PURE__ */ jsxs65("p", { className: "text-xxs leading-tight text-white/40", children: [
+                "Receive a new ",
+                newAssetOptions.map((o) => o.ticker).join(", "),
+                " asset"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx79("span", { className: "material-symbols-outlined text-lg text-white/30 transition-colors group-hover:text-primary", children: "arrow_forward" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx79(
+      BottomSheet,
+      {
+        open: showAddAssetModal,
+        title: "Add an asset",
+        onClose: () => setShowAddAssetModal(false),
+        children: /* @__PURE__ */ jsx79("div", { className: "space-y-2", children: newAssetOptions.map((option) => /* @__PURE__ */ jsxs65(
+          "button",
           {
+            type: "button",
+            "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
             className: cn(
-              "grid gap-2",
-              newAssetOptions.length === 1 ? "grid-cols-1" : newAssetOptions.length === 2 ? "grid-cols-2" : "grid-cols-3"
+              "group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left transition-all",
+              option.idleClass
             ),
-            children: newAssetOptions.map((option) => {
-              const active = isNewAsset && newAssetAccount === option.account;
-              return /* @__PURE__ */ jsxs65(
-                "button",
-                {
-                  type: "button",
-                  "data-testid": `deposit-new-asset-${option.account.toLowerCase()}`,
-                  className: cn(
-                    "group flex min-h-[112px] flex-col items-center justify-center rounded-2xl px-3 py-3.5 text-center text-sm transition-all",
-                    active ? option.activeClass : option.idleClass
-                  ),
-                  onClick: () => handleAddNewAsset(option.account),
-                  children: [
-                    /* @__PURE__ */ jsxs65("div", { className: "relative", children: [
-                      /* @__PURE__ */ jsx79(AssetIcon, { ticker: option.ticker, size: 40 }),
-                      /* @__PURE__ */ jsx79("div", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary", children: /* @__PURE__ */ jsx79(Icon, { name: "add", size: "xs", className: "text-background" }) })
-                    ] }),
-                    /* @__PURE__ */ jsx79("div", { className: "mt-2 min-w-0", children: /* @__PURE__ */ jsx79(
-                      "div",
-                      {
-                        className: cn(
-                          "text-sm font-bold tracking-wide",
-                          active ? "text-white" : "text-white group-hover:opacity-90",
-                          !active && option.titleHoverClass
-                        ),
-                        children: option.title
-                      }
-                    ) })
-                  ]
-                },
-                option.account
-              );
-            })
-          }
-        )
-      ] })
-    ] }),
+            onClick: () => {
+              setShowAddAssetModal(false);
+              handleAddNewAsset(option.account);
+            },
+            children: [
+              /* @__PURE__ */ jsx79(AssetIcon, { ticker: option.ticker, size: 36, className: "flex-shrink-0" }),
+              /* @__PURE__ */ jsxs65("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx79("div", { className: cn("text-sm font-bold tracking-wide text-white", option.titleHoverClass), children: option.title }),
+                /* @__PURE__ */ jsx79("div", { className: "mt-0.5 text-xxs text-white/40", children: ADD_ASSET_SUBTITLE[option.account] })
+              ] }),
+              /* @__PURE__ */ jsx79(Icon, { name: "add", size: "sm", className: "text-white/30 transition-colors group-hover:text-white/60" })
+            ]
+          },
+          option.account
+        )) })
+      }
+    ),
     isNewAsset && newAssetAccount === "RGB" && /* @__PURE__ */ jsxs65(Fragment16, { children: [
       /* @__PURE__ */ jsx79("div", { className: "flex-shrink-0 px-5 pb-3 animate-in fade-in slide-in-from-bottom-2 duration-300", children: /* @__PURE__ */ jsxs65("div", { className: "space-y-2 rounded-2xl border border-network-arkade/20 bg-network-arkade/5 p-3", children: [
         /* @__PURE__ */ jsx79("p", { className: "text-tiny leading-relaxed text-network-arkade/80", children: "Leave empty to receive any RGB asset, or enter a specific asset ID." }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",