kaleido-ui 0.1.38 → 0.1.40

package/dist/web/index.cjs

@@ -5237,17 +5237,17 @@ function RecoveryPhraseCard({
 var import_react13 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var PROTOCOLS = [
-  { name: "Bitcoin", network: "Bitcoin" },
-  { name: "Lightning", network: "LN" },
-  { name: "RGB", network: "RGB20" },
-  { name: "Spark", network: "Spark" },
-  { name: "Arkade", network: "Arkade" },
-  { name: "Liquid", network: "Liquid" },
-  { name: "Taproot Assets", network: "Taproot" }
+  { name: "Bitcoin", network: "Bitcoin", iconSuffix: "bitcoin/bitcoin-logo.svg" },
+  { name: "Lightning", network: "LN", iconSuffix: "lightning/lightning.svg" },
+  { name: "RGB", network: "RGB20", iconSuffix: "rgb/rgb-logo.svg" },
+  { name: "Spark", network: "Spark", iconSuffix: "spark/Asterisk/Spark Asterisk White.svg" },
+  { name: "Arkade", network: "Arkade", iconSuffix: "arkade/arkade-icon.svg" },
+  { name: "Liquid", network: "Liquid", iconSuffix: "liquid/logo-liquid.svg" },
+  { name: "Taproot Assets", network: "Taproot", iconSuffix: "taproot-assets/tapass-logo.svg" }
 ];
 var C = 140;
 var ORBIT_R = 118;
-var BADGE_SIZE = 32;
+var BADGE_SIZE = 40;
 var BADGE_HALF = BADGE_SIZE / 2;
 var N = PROTOCOLS.length;
 var PROTOCOL_COLORS = {
@@ -5457,6 +5457,7 @@ var MobileHeroAnimation = ({
             const angle = i / N * 2 * Math.PI;
             const x = C + Math.cos(angle) * ORBIT_R - BADGE_HALF;
             const y = C + Math.sin(angle) * ORBIT_R - BADGE_HALF;
+            const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
             return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "div",
               {
@@ -5464,9 +5465,29 @@ var MobileHeroAnimation = ({
                   position: "absolute",
                   left: x,
                   top: y,
+                  width: BADGE_SIZE,
+                  height: BADGE_SIZE,
                   animation: anim ? "mha-counter-spin 20s linear infinite" : "none"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(NetworkBadge, { network: protocol.network, iconBasePath, size: "md" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: {
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "50%",
+                  overflow: "hidden",
+                  background: "rgba(255,255,255,0.05)",
+                  backdropFilter: "blur(4px)",
+                  border: `1px solid ${color}55`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                  "img",
+                  {
+                    src: `${iconBasePath}/${protocol.iconSuffix}`,
+                    alt: protocol.name,
+                    style: { width: 20, height: 20, objectFit: "contain" }
+                  }
+                ) })
               },
               i
             );

package/dist/web/index.js

@@ -5077,17 +5077,17 @@ function RecoveryPhraseCard({
 import { useRef as useRef4, useEffect as useEffect8, useState as useState12 } from "react";
 import { Fragment as Fragment12, jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 var PROTOCOLS = [
-  { name: "Bitcoin", network: "Bitcoin" },
-  { name: "Lightning", network: "LN" },
-  { name: "RGB", network: "RGB20" },
-  { name: "Spark", network: "Spark" },
-  { name: "Arkade", network: "Arkade" },
-  { name: "Liquid", network: "Liquid" },
-  { name: "Taproot Assets", network: "Taproot" }
+  { name: "Bitcoin", network: "Bitcoin", iconSuffix: "bitcoin/bitcoin-logo.svg" },
+  { name: "Lightning", network: "LN", iconSuffix: "lightning/lightning.svg" },
+  { name: "RGB", network: "RGB20", iconSuffix: "rgb/rgb-logo.svg" },
+  { name: "Spark", network: "Spark", iconSuffix: "spark/Asterisk/Spark Asterisk White.svg" },
+  { name: "Arkade", network: "Arkade", iconSuffix: "arkade/arkade-icon.svg" },
+  { name: "Liquid", network: "Liquid", iconSuffix: "liquid/logo-liquid.svg" },
+  { name: "Taproot Assets", network: "Taproot", iconSuffix: "taproot-assets/tapass-logo.svg" }
 ];
 var C = 140;
 var ORBIT_R = 118;
-var BADGE_SIZE = 32;
+var BADGE_SIZE = 40;
 var BADGE_HALF = BADGE_SIZE / 2;
 var N = PROTOCOLS.length;
 var PROTOCOL_COLORS = {
@@ -5297,6 +5297,7 @@ var MobileHeroAnimation = ({
             const angle = i / N * 2 * Math.PI;
             const x = C + Math.cos(angle) * ORBIT_R - BADGE_HALF;
             const y = C + Math.sin(angle) * ORBIT_R - BADGE_HALF;
+            const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
             return /* @__PURE__ */ jsx57(
               "div",
               {
@@ -5304,9 +5305,29 @@ var MobileHeroAnimation = ({
                   position: "absolute",
                   left: x,
                   top: y,
+                  width: BADGE_SIZE,
+                  height: BADGE_SIZE,
                   animation: anim ? "mha-counter-spin 20s linear infinite" : "none"
                 },
-                children: /* @__PURE__ */ jsx57(NetworkBadge, { network: protocol.network, iconBasePath, size: "md" })
+                children: /* @__PURE__ */ jsx57("div", { style: {
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "50%",
+                  overflow: "hidden",
+                  background: "rgba(255,255,255,0.05)",
+                  backdropFilter: "blur(4px)",
+                  border: `1px solid ${color}55`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }, children: /* @__PURE__ */ jsx57(
+                  "img",
+                  {
+                    src: `${iconBasePath}/${protocol.iconSuffix}`,
+                    alt: protocol.name,
+                    style: { width: 20, height: 20, objectFit: "contain" }
+                  }
+                ) })
               },
               i
             );

package/package.json

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