npm - @hyperbridge/ui - Versions diffs - 0.0.10 → 0.0.12 - Mend

@hyperbridge/ui 0.0.10 → 0.0.12

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

package/dist/index.d.mts CHANGED Viewed

@@ -259,7 +259,7 @@ type Props$1 = PercentageProps & {
         balance: React__default.JSX.Element;
         address: string;
         amount: string;
-        usdValue: string | number;
+        secondaryAmount: React__default.ReactNode;
         token: {
             image: string;
             symbol: string;
@@ -267,8 +267,8 @@ type Props$1 = PercentageProps & {
     };
     receiver: {
         address: string;
-        amount: string | number;
-        usdValue: string | number;
+        amount: React__default.ReactNode;
+        secondaryAmount: React__default.ReactNode;
         network: Omit<Network, "group">;
         estimatedTime?: string;
     };
@@ -382,7 +382,7 @@ declare function ReviewItem(props: {
     asset: {
         amount: string;
         symbol: string;
-        secondaryValue: string;
+        secondaryValue: React__default.ReactNode;
     };
     AddressInfo: (props: {
         tag: string;
@@ -829,8 +829,12 @@ interface TokenSelectorProps {
     onAddToWallet?: (token: Token) => void;
 }
 declare const TokenSelector: ({ title, isOpen, onClose, allTokens, availableTokens, selectedToken, onTokenSelect, onAddToWallet, }: TokenSelectorProps) => react_jsx_runtime.JSX.Element;
+interface TokenItem extends Pick<Token, "name" | "symbol" | "image" | "address"> {
+    amount: React__default.ReactNode;
+    secondaryAmount: React__default.ReactNode;
+}
 declare function TokenSelectionItem(props: {
-    token: Pick<Token, "name" | "symbol" | "image" | "amount" | "address" | "usdValue">;
+    token: TokenItem;
     isActive: boolean;
     isAvailable: boolean;
     AddWalletButton: React__default.ReactNode;

package/dist/index.mjs CHANGED Viewed

@@ -839,28 +839,17 @@ function SwapForm({
   );
 }
-// src/components/images/token-image.tsx
-import { Image as Image3 } from "@unpic/react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function TokenImage(props) {
-  return /* @__PURE__ */ jsx11(
-    Image3,
-    {
-      src: props.src,
-      alt: props.alt,
-      layout: "constrained",
-      className: cn("shrink-0 object-cover rounded-full", props.className),
-      width: 20,
-      aspectRatio: 1
-    }
-  );
-}
+// src/components/form/bridge-form.tsx
+import { useState as useState5 } from "react";
+// src/@/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 // src/components/atoms/smooth-corners.tsx
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import React2 from "react";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var SmoothCornersSingleton = {
   activated: false,
   promise: null,
@@ -900,7 +889,7 @@ function SmoothCorners(props) {
       );
     });
   }, []);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     Slot5,
     {
       className: cn(
@@ -913,8 +902,157 @@ function SmoothCorners(props) {
   );
 }
+// src/@/ui/dialog.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function Dialog(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Root, __spreadValues({ "data-slot": "dialog" }, props));
+}
+function DialogTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Trigger, __spreadValues({ "data-slot": "dialog-trigger" }, props));
+}
+function DialogPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Portal, __spreadValues({ "data-slot": "dialog-portal" }, props));
+}
+function DialogClose(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx12(DialogPrimitive.Close, __spreadValues({ "data-slot": "dialog-close" }, props));
+}
+function DialogOverlay(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Overlay,
+    __spreadValues({
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 tile-bg",
+        className
+      )
+    }, props)
+  );
+}
+function DialogContent(_a) {
+  var _b = _a, {
+    className,
+    children,
+    showCloseButton = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "showCloseButton"
+  ]);
+  return /* @__PURE__ */ jsxs8(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx12(DialogOverlay, {}),
+    /* @__PURE__ */ jsx12(SmoothCorners, { children: /* @__PURE__ */ jsxs8(
+      DialogPrimitive.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-brand-black-600 text-brand-black-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 pt-4 p-6 shadow-lg duration-200 sm:max-w-[28rem]",
+          className
+        )
+      }, props), {
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs8(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background w-[calc(32rem/16)] inline-flex items-center justify-center !rounded-full text-brand-black-100 aspect-square focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx12(XIcon_default, { className: "size-4" }),
+                /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      })
+    ) })
+  ] });
+}
+function DialogHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    __spreadValues({
+      "data-slot": "dialog-header",
+      className: cn(
+        "flex flex-col justify-center px-6 py-[calc(18rem/16)] gap-2 sm:text-left min-h-[calc(64rem/16)] items-start -mt-6 -mx-6",
+        className
+      )
+    }, props)
+  );
+}
+function DialogFooter(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    __spreadValues({
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )
+    }, props)
+  );
+}
+function DialogTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Title,
+    __spreadValues({
+      "data-slot": "dialog-title",
+      className: cn(
+        "text-[calc(20rem/16)] leading-[calc(28rem/16)] font-medium text-brand-white-500",
+        className
+      )
+    }, props)
+  );
+}
+function DialogDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx12(
+    DialogPrimitive.Description,
+    __spreadValues({
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+// src/components/images/token-image.tsx
+import { Image as Image3 } from "@unpic/react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function TokenImage(props) {
+  return /* @__PURE__ */ jsx13(
+    Image3,
+    {
+      src: props.src,
+      alt: props.alt,
+      layout: "constrained",
+      className: cn("shrink-0 object-cover rounded-full", props.className),
+      width: 20,
+      aspectRatio: 1
+    }
+  );
+}
 // src/components/molecules/network-switcher.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var NetworkSwitcher = ({
   from,
   to,
@@ -922,8 +1060,8 @@ var NetworkSwitcher = ({
   onSourceClick,
   onDestinationClick
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: "relative flex w-full max-w-[440px] gap-2", children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { className: "relative flex w-full max-w-[440px] gap-2", children: [
+    /* @__PURE__ */ jsx14(
       NetworkSwitcherButton,
       {
         label: "From",
@@ -932,7 +1070,7 @@ var NetworkSwitcher = ({
         children: from.name
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       NetworkSwitcherButton,
       {
         label: "To",
@@ -941,30 +1079,30 @@ var NetworkSwitcher = ({
         children: to.name
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       Button,
       {
         type: "button",
         onClick: onNetworkInvert,
         className: "size-6 rounded-[7.5px] p-0 bg-brand-black-600 flex items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hover:scale-110 transition-all",
         "aria-label": "Switch networks",
-        children: /* @__PURE__ */ jsx13("div", { className: "size-[19.2px] rounded-[6px] bg-brand-black-500 flex items-center justify-center", children: /* @__PURE__ */ jsx13(ArrowRight_default, { className: "text-brand-black-100 size-3" }) })
+        children: /* @__PURE__ */ jsx14("div", { className: "size-[19.2px] rounded-[6px] bg-brand-black-500 flex items-center justify-center", children: /* @__PURE__ */ jsx14(ArrowRight_default, { className: "text-brand-black-100 size-3" }) })
       }
     )
   ] });
 };
 function NetworkSwitcherButton(props) {
   const _a = props, { image, label } = _a, _props = __objRest(_a, ["image", "label"]);
-  return /* @__PURE__ */ jsx13(SmoothCorners, { children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(SmoothCorners, { children: /* @__PURE__ */ jsx14(
     "button",
     __spreadProps(__spreadValues({}, _props), {
       type: "button",
       className: "bg-brand-black-500 select-none rounded-[16px] py-[10px] px-3 w-[49%] cursor-pointer hover:bg-brand-black-300 duration-200 transition-all",
-      children: /* @__PURE__ */ jsxs8("span", { className: "flex gap-3 items-center", children: [
-        /* @__PURE__ */ jsx13(TokenImage, { className: "size-8", src: image.src, alt: image.alt }),
-        /* @__PURE__ */ jsxs8("span", { className: "flex flex-col items-start", children: [
-          /* @__PURE__ */ jsx13("span", { className: "text-caption font-medium text-brand-black-100", children: label }),
-          /* @__PURE__ */ jsx13("span", { className: "text-body text-white font-medium", children: props.children })
+      children: /* @__PURE__ */ jsxs9("span", { className: "flex gap-3 items-center", children: [
+        /* @__PURE__ */ jsx14(TokenImage, { className: "size-8", src: image.src, alt: image.alt }),
+        /* @__PURE__ */ jsxs9("span", { className: "flex flex-col items-start", children: [
+          /* @__PURE__ */ jsx14("span", { className: "text-caption font-medium text-brand-black-100", children: label }),
+          /* @__PURE__ */ jsx14("span", { className: "text-body text-white font-medium", children: props.children })
         ] })
       ] })
     })
@@ -1105,10 +1243,10 @@ var animationPresets = {
 // src/@/ui/drawer.tsx
 import { Drawer as DrawerPrimitive } from "vaul";
-import { Fragment, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function Drawer(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx14(DrawerPrimitive.Root, __spreadValues({ "data-slot": "drawer" }, props));
+  return /* @__PURE__ */ jsx15(DrawerPrimitive.Root, __spreadValues({ "data-slot": "drawer" }, props));
 }
 function DrawerOverlay(_a) {
   var _b = _a, {
@@ -1116,7 +1254,7 @@ function DrawerOverlay(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     DrawerPrimitive.Overlay,
     __spreadValues({
       "data-slot": "drawer-overlay",
@@ -1135,9 +1273,9 @@ function DrawerContent(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs9(Fragment, { children: [
-    /* @__PURE__ */ jsx14(DrawerOverlay, {}),
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsx15(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs10(
       DrawerPrimitive.Content,
       __spreadProps(__spreadValues({
         "data-slot": "drawer-content",
@@ -1151,7 +1289,7 @@ function DrawerContent(_a) {
         )
       }, props), {
         children: [
-          /* @__PURE__ */ jsx14("div", { className: "bg-brand-black-350 mx-auto my-2 hidden h-[5px] w-16 shrink-0 rounded-[2.5px] group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          /* @__PURE__ */ jsx15("div", { className: "bg-brand-black-350 mx-auto my-2 hidden h-[5px] w-16 shrink-0 rounded-[2.5px] group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
           children
         ]
       })
@@ -1160,14 +1298,14 @@ function DrawerContent(_a) {
 }
 // src/components/molecules/modal.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { isOpen, children, onClose } = props;
   const isMobile = useIsMobile();
   if (isMobile) {
-    return /* @__PURE__ */ jsx15(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx15(DrawerContent, { className: "bg-brand-black-550 border-brand-black-300 min-h-[90dvh]", children }) });
+    return /* @__PURE__ */ jsx16(Drawer, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx16(DrawerContent, { className: "bg-brand-black-550 border-brand-black-300 min-h-[90dvh]", children }) });
   }
-  return /* @__PURE__ */ jsx15(DestkopModal, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx16(DestkopModal, __spreadValues({}, props));
 };
 function DestkopModal(props) {
   const {
@@ -1191,7 +1329,7 @@ function DestkopModal(props) {
       document.removeEventListener("keydown", handleEscapeKey);
     };
   }, [isOpen, onClose]);
-  return /* @__PURE__ */ jsx15(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(AnimatePresence, { mode: "wait", children: isOpen && /* @__PURE__ */ jsx16(
     motion.div,
     {
       "data-modal": "true",
@@ -1252,7 +1390,7 @@ var sortItems = (items, sortFn) => {
 // src/components/molecules/empty-state.tsx
 import React3 from "react";
-import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
 var ContextDefault = {
   isEmpty: true
 };
@@ -1261,10 +1399,10 @@ function useContext() {
   const context = React3.useContext(EmptyStateCtx);
   return isSSR() ? ContextDefault : context;
 }
-var EmptyStateContent = React3.forwardRef(function Content(props, ref) {
+var EmptyStateContent = React3.forwardRef(function Content2(props, ref) {
   const { isEmpty } = useContext();
   if (!isEmpty) return null;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     __spreadProps(__spreadValues({}, props), {
       ref,
@@ -1273,7 +1411,7 @@ var EmptyStateContent = React3.forwardRef(function Content(props, ref) {
   );
 });
 var EmptyStateTitle = React3.forwardRef(function ESTitle(props, ref) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "h6",
     __spreadProps(__spreadValues({
       ref
@@ -1283,7 +1421,7 @@ var EmptyStateTitle = React3.forwardRef(function ESTitle(props, ref) {
   );
 });
 var EmptyStateDescription = React3.forwardRef(function ESDescription(props, ref) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     __spreadProps(__spreadValues({
       ref
@@ -1295,12 +1433,12 @@ var EmptyStateDescription = React3.forwardRef(function ESDescription(props, ref)
 function EmptyStateConceal(props) {
   const { isEmpty } = useContext();
   if (isEmpty) return null;
-  return /* @__PURE__ */ jsx16(Fragment2, { children: props.children });
+  return /* @__PURE__ */ jsx17(Fragment2, { children: props.children });
 }
 function EmptyState(props) {
   const { isEmpty = true, children } = props;
-  if (isSSR()) return /* @__PURE__ */ jsx16(Fragment2, { children });
-  return /* @__PURE__ */ jsx16(EmptyStateCtx.Provider, { value: { isEmpty }, children });
+  if (isSSR()) return /* @__PURE__ */ jsx17(Fragment2, { children });
+  return /* @__PURE__ */ jsx17(EmptyStateCtx.Provider, { value: { isEmpty }, children });
 }
 // src/components/network/network-selector.tsx
@@ -1308,7 +1446,7 @@ import React5 from "react";
 // src/components/molecules/scroll-aware-area.tsx
 import React4 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ScrollAwareSeparator(props) {
   const _a = props, { scrollRef } = _a, props_ = __objRest(_a, ["scrollRef"]);
   const [showHeaderBorder, setShowHeaderBorder] = React4.useState(false);
@@ -1334,7 +1472,7 @@ function ScrollAwareSeparator(props) {
       resizeObserver.disconnect();
     };
   }, [scrollRef]);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     __spreadProps(__spreadValues({}, props_), {
       className: cn(
@@ -1347,7 +1485,7 @@ function ScrollAwareSeparator(props) {
 }
 // src/components/network/network-selector.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var NetworkSelector = ({
   title,
   availableNetworks,
@@ -1374,41 +1512,41 @@ var NetworkSelector = ({
   };
   const renderNetworkItem = (network, isAvailable) => {
     const isSelected = (selectedNetwork == null ? void 0 : selectedNetwork.name) === network.name;
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       NetworkSelectionItem,
       {
         network,
         isActive: isSelected,
         variant: isAvailable ? "default" : "secondary",
         onClick: () => isAvailable && handleNetworkSelect(network),
-        SecondaryContent: /* @__PURE__ */ jsx18(Button2, { variant: "message", size: "sm", children: /* @__PURE__ */ jsx18("span", { className: "text-caption font-medium", children: "Connect" }) })
+        SecondaryContent: /* @__PURE__ */ jsx19(Button2, { variant: "message", size: "sm", children: /* @__PURE__ */ jsx19("span", { className: "text-caption font-medium", children: "Connect" }) })
       }
     );
   };
   const hasNoResults = searchQuery.trim() && filteredAvailableNetworks.length === 0 && filteredUnavailableNetworks.length === 0;
   const isEmpty = availableNetworks.length === 0 && unavailableNetworks.length === 0;
-  return /* @__PURE__ */ jsxs10(Modal, { isOpen, onClose, children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Modal, { isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
           "bg-brand-black-550 px-6 pt-6 pb-4 transition-all duration-200"
         ),
         children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx18("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select chain" }),
-            /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx19("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select chain" }),
+            /* @__PURE__ */ jsx19(
               IconButton,
               {
                 size: "xs",
                 onClick: onClose,
                 variant: "unset",
                 className: "text-brand-black-100 hover:text-white",
-                children: /* @__PURE__ */ jsx18(XIcon_default, {})
+                children: /* @__PURE__ */ jsx19(XIcon_default, {})
               }
             )
           ] }),
-          /* @__PURE__ */ jsx18("div", { className: "mt-4", children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19("div", { className: "mt-4", children: /* @__PURE__ */ jsx19(
             SearchInput,
             {
               className: "h-10",
@@ -1420,45 +1558,41 @@ var NetworkSelector = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs10(EmptyState, { isEmpty, children: [
-      /* @__PURE__ */ jsxs10(EmptyStateConceal, { children: [
-        /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs11(EmptyState, { isEmpty, children: [
+      /* @__PURE__ */ jsxs11(EmptyStateConceal, { children: [
+        /* @__PURE__ */ jsx19(
           ScrollAwareSeparator,
           {
             scrollRef: scrollableRef,
             className: "data-[active=true]:border-brand-black-300/70 data-[active=false]:border-brand-black-300/0"
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             ref: scrollableRef,
             className: "px-6 pb-6 overflow-y-auto h-full space-y-4 no-scrollbar",
             children: [
-              filteredAvailableNetworks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
-                /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Available" }),
-                /* @__PURE__ */ jsx18("div", { className: "mt-[6px] space-y-2", children: filteredAvailableNetworks.map(
-                  (network) => renderNetworkItem(network, true)
-                ) })
+              filteredAvailableNetworks.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
+                /* @__PURE__ */ jsx19("p", { className: "text-caption text-brand-black-100", children: "Available" }),
+                /* @__PURE__ */ jsx19("div", { className: "mt-[6px] space-y-2", children: filteredAvailableNetworks.map((network) => /* @__PURE__ */ jsx19(React5.Fragment, { children: renderNetworkItem(network, true) }, network.name)) })
               ] }),
-              filteredUnavailableNetworks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
-                /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Not available" }),
-                /* @__PURE__ */ jsx18("div", { className: "mt-[6px] space-y-2", children: filteredUnavailableNetworks.map(
-                  (network) => renderNetworkItem(network, false)
-                ) })
+              filteredUnavailableNetworks.length > 0 && /* @__PURE__ */ jsxs11("div", { children: [
+                /* @__PURE__ */ jsx19("p", { className: "text-caption text-brand-black-100", children: "Not available" }),
+                /* @__PURE__ */ jsx19("div", { className: "mt-[6px] space-y-2", children: filteredUnavailableNetworks.map((network) => /* @__PURE__ */ jsx19(React5.Fragment, { children: "renderNetworkItem(network, false)," }, network.name)) })
               ] }),
-              hasNoResults && /* @__PURE__ */ jsx18("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs10("p", { className: "text-caption text-brand-black-100", children: [
+              hasNoResults && /* @__PURE__ */ jsx19("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs11("p", { className: "text-caption text-brand-black-100", children: [
                 "No results found for",
                 " ",
-                /* @__PURE__ */ jsx18("span", { className: "text-white font-medium", children: searchQuery })
+                /* @__PURE__ */ jsx19("span", { className: "text-white font-medium", children: searchQuery })
               ] }) })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx18(EmptyStateContent, { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs10("div", { children: [
-        /* @__PURE__ */ jsx18("p", { className: "body-2 text-brand-black-100 mb-1", children: "No networks available" }),
-        /* @__PURE__ */ jsx18("p", { className: "text-caption text-brand-black-100", children: "Networks will appear here when available" })
+      /* @__PURE__ */ jsx19(EmptyStateContent, { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsx19("p", { className: "body-2 text-brand-black-100 mb-1", children: "No networks available" }),
+        /* @__PURE__ */ jsx19("p", { className: "text-caption text-brand-black-100", children: "Networks will appear here when available" })
       ] }) })
     ] })
   ] });
@@ -1477,7 +1611,7 @@ function NetworkSelectionItem(props) {
   ]);
   const buttonRef = React5.useRef(null);
   const is_default_mode = variant === "default";
-  const buttonContent = /* @__PURE__ */ jsxs10(
+  const buttonContent = /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cn(
@@ -1495,7 +1629,7 @@ function NetworkSelectionItem(props) {
         return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
       },
       children: [
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "button",
           __spreadProps(__spreadValues({
             type: "button",
@@ -1504,20 +1638,20 @@ function NetworkSelectionItem(props) {
           }, PROPS), {
             disabled,
             children: [
-              /* @__PURE__ */ jsx18(TokenImage, { className: "size-8", src: network.image, alt: network.name }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-start", children: [
-                /* @__PURE__ */ jsx18("div", { className: "body-2 font-medium text-white", children: network.name }),
-                /* @__PURE__ */ jsx18("div", { className: "text-caption font-medium text-brand-black-100", children: network.group })
+              /* @__PURE__ */ jsx19(TokenImage, { className: "size-8", src: network.image, alt: network.name }),
+              /* @__PURE__ */ jsxs11("div", { className: "flex flex-col items-start", children: [
+                /* @__PURE__ */ jsx19("div", { className: "body-2 font-medium text-white", children: network.name }),
+                /* @__PURE__ */ jsx19("div", { className: "text-caption font-medium text-brand-black-100", children: network.group })
               ] })
             ]
           })
         ),
-        is_default_mode ? /* @__PURE__ */ jsx18(IconButton, { className: "cursor-pointer group", variant: "secondary", children: isActive ? /* @__PURE__ */ jsx18(Check_default, { className: "size-4 text-white" }) : /* @__PURE__ */ jsx18(Circle_default, { className: "size-4 text-brand-black-100 group-hover:text-white duration-200 transition-colors" }) }) : null,
+        is_default_mode ? /* @__PURE__ */ jsx19(IconButton, { className: "cursor-pointer group", variant: "secondary", children: isActive ? /* @__PURE__ */ jsx19(Check_default, { className: "size-4 text-white" }) : /* @__PURE__ */ jsx19(Circle_default, { className: "size-4 text-brand-black-100 group-hover:text-white duration-200 transition-colors" }) }) : null,
         variant === "secondary" ? props.SecondaryContent : null
       ]
     }
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: cn(
@@ -1535,7 +1669,7 @@ import React6 from "react";
 // src/@/ui/scroll-area.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function ScrollArea(_a) {
   var _b = _a, {
     className,
@@ -1544,14 +1678,14 @@ function ScrollArea(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     ScrollAreaPrimitive.Root,
     __spreadProps(__spreadValues({
       "data-slot": "scroll-area",
       className: cn("relative", className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -1559,8 +1693,8 @@ function ScrollArea(_a) {
             children
           }
         ),
-        /* @__PURE__ */ jsx19(ScrollBar, {}),
-        /* @__PURE__ */ jsx19(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx20(ScrollBar, {}),
+        /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Corner, {})
       ]
     })
   );
@@ -1573,7 +1707,7 @@ function ScrollBar(_a) {
     "className",
     "orientation"
   ]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     __spreadProps(__spreadValues({
       "data-slot": "scroll-area-scrollbar",
@@ -1585,7 +1719,7 @@ function ScrollBar(_a) {
         className
       )
     }, props), {
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx20(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -1597,7 +1731,7 @@ function ScrollBar(_a) {
 }
 // src/components/tokens/token-selector.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var tokenSortFn = (a, b) => {
   const aHasAmount = a.amount > 0;
   const bHasAmount = b.amount > 0;
@@ -1666,14 +1800,14 @@ var TokenSelector = ({
   const renderTokenItem = (token) => {
     const isSelected = (selectedToken == null ? void 0 : selectedToken.symbol) === token.symbol && (selectedToken == null ? void 0 : selectedToken.address) === token.address;
     const isAvailable = isTokenAvailable(token);
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       TokenSelectionItem,
       {
-        token,
+        token: __spreadProps(__spreadValues({}, token), { secondaryAmount: token.usdValue }),
         isActive: isSelected,
         isAvailable,
         onClick: () => handleTokenSelect(token),
-        AddWalletButton: /* @__PURE__ */ jsx20(
+        AddWalletButton: /* @__PURE__ */ jsx21(
           Button,
           {
             variant: "message",
@@ -1682,7 +1816,7 @@ var TokenSelector = ({
               e.stopPropagation();
               handleAddToWallet(token);
             },
-            children: /* @__PURE__ */ jsx20("span", { className: "text-caption font-medium", children: "Add to wallet" })
+            children: /* @__PURE__ */ jsx21("span", { className: "text-caption font-medium", children: "Add to wallet" })
           }
         )
       },
@@ -1692,8 +1826,8 @@ var TokenSelector = ({
   const hasSearchResults = searchQuery.trim() && searchResults.length > 0;
   const hasNoResults = searchQuery.trim() && searchResults.length === 0;
   const isEmpty = availableTokens.length === 0 && allTokens.length === 0;
-  return /* @__PURE__ */ jsxs12(Modal, { isOpen, onClose, children: [
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(Modal, { isOpen, onClose, children: [
+    /* @__PURE__ */ jsxs13(
       "div",
       {
         className: cn(
@@ -1701,9 +1835,9 @@ var TokenSelector = ({
           showHeaderBorder && "border-b border-brand-black-300/70"
         ),
         children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx20("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select token" }),
-            /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx21("div", { className: "body-1 font-medium text-white max-w-[200px] break-words", children: title != null ? title : "Select token" }),
+            /* @__PURE__ */ jsx21(
               XIcon_default,
               {
                 className: "size-4 cursor-pointer text-brand-black-100 hover:text-white duration-200 transition-colors",
@@ -1711,7 +1845,7 @@ var TokenSelector = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx20("div", { className: "mt-4", children: /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("div", { className: "mt-4", children: /* @__PURE__ */ jsx21(
             SearchInput,
             {
               className: "h-10",
@@ -1723,37 +1857,46 @@ var TokenSelector = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx20(ScrollAwareSeparator, { scrollRef: scrollableRef }),
-    /* @__PURE__ */ jsx20(ScrollArea, { ref: scrollableRef, className: "h-full", children: /* @__PURE__ */ jsxs12("div", { className: "px-6 pb-6 space-y-4", children: [
-      hasSearchResults && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Search results" }),
-        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: searchResults.map(renderTokenItem) })
+    /* @__PURE__ */ jsx21(ScrollAwareSeparator, { scrollRef: scrollableRef }),
+    /* @__PURE__ */ jsx21(ScrollArea, { ref: scrollableRef, className: "h-full", children: /* @__PURE__ */ jsxs13("div", { className: "px-6 pb-6 space-y-4", children: [
+      hasSearchResults && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "Search results" }),
+        /* @__PURE__ */ jsx21("div", { className: "mt-[6px] space-y-2", children: searchResults.map(renderTokenItem) })
       ] }),
-      !searchQuery.trim() && sortedAvailableTokens.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Your tokens" }),
-        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: sortedAvailableTokens.map(renderTokenItem) })
+      !searchQuery.trim() && sortedAvailableTokens.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "Your tokens" }),
+        /* @__PURE__ */ jsx21("div", { className: "mt-[6px] space-y-2", children: sortedAvailableTokens.map(renderTokenItem) })
       ] }),
-      !searchQuery.trim() && sortedAllTokens.length > 0 && /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "All tokens" }),
-        /* @__PURE__ */ jsx20("div", { className: "mt-[6px] space-y-2", children: sortedAllTokens.map(renderTokenItem) })
+      !searchQuery.trim() && sortedAllTokens.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "All tokens" }),
+        /* @__PURE__ */ jsx21("div", { className: "mt-[6px] space-y-2", children: sortedAllTokens.map(renderTokenItem) })
       ] }),
-      hasNoResults && /* @__PURE__ */ jsx20("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs12("p", { className: "text-caption text-brand-black-100", children: [
+      hasNoResults && /* @__PURE__ */ jsx21("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs13("p", { className: "text-caption text-brand-black-100", children: [
         "No results found for",
         " ",
-        /* @__PURE__ */ jsx20("span", { className: "text-white font-medium", children: searchQuery })
+        /* @__PURE__ */ jsx21("span", { className: "text-white font-medium", children: searchQuery })
       ] }) }),
-      isEmpty && /* @__PURE__ */ jsx20("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs12("div", { children: [
-        /* @__PURE__ */ jsx20("p", { className: "body-2 text-brand-black-100 mb-1", children: "No tokens available" }),
-        /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: "Tokens will appear here when available" })
+      isEmpty && /* @__PURE__ */ jsx21("div", { className: "text-center py-8 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx21("p", { className: "body-2 text-brand-black-100 mb-1", children: "No tokens available" }),
+        /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: "Tokens will appear here when available" })
       ] }) })
     ] }) })
   ] });
 };
 function TokenSelectionItem(props) {
-  const _a = props, { token, isAvailable, isActive, AddWalletButton } = _a, PROPS = __objRest(_a, ["token", "isAvailable", "isActive", "AddWalletButton"]);
-  const hasAmount = token.amount > 0;
+  const _a = props, {
+    token,
+    isAvailable = true,
+    isActive,
+    AddWalletButton
+  } = _a, PROPS = __objRest(_a, [
+    "token",
+    "isAvailable",
+    "isActive",
+    "AddWalletButton"
+  ]);
   const buttonRef = React6.useRef(null);
-  const buttonContent = /* @__PURE__ */ jsxs12(
+  const buttonContent = /* @__PURE__ */ jsxs13(
     "div",
     {
       className: "cursor-pointer flex items-center justify-between w-full bg-brand-black-500 hover:bg-brand-black-300 duration-200 transition-colors p-3 rounded-[16px]",
@@ -1766,7 +1909,7 @@ function TokenSelectionItem(props) {
         return (_a2 = buttonRef.current) == null ? void 0 : _a2.click();
       },
       children: [
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "button",
           __spreadProps(__spreadValues({
             ref: buttonRef
@@ -1775,10 +1918,10 @@ function TokenSelectionItem(props) {
             className: "flex items-center text-start gap-3",
             disabled: !isAvailable || props.disabled,
             children: [
-              /* @__PURE__ */ jsx20(TokenImage, { src: token.image, alt: token.symbol, className: "size-6" }),
-              /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-[2px] items-start", children: [
-                /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-white", children: token.name }),
-                /* @__PURE__ */ jsxs12("p", { className: "text-caption text-brand-black-100", children: [
+              /* @__PURE__ */ jsx21(TokenImage, { src: token.image, alt: token.symbol, className: "size-6" }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-[2px] items-start", children: [
+                /* @__PURE__ */ jsx21("p", { className: "body-1 font-medium text-white", children: token.name }),
+                /* @__PURE__ */ jsxs13("p", { className: "text-caption text-brand-black-100", children: [
                   token.symbol,
                   " \u2022 ",
                   token.address
@@ -1787,14 +1930,14 @@ function TokenSelectionItem(props) {
             ]
           })
         ),
-        /* @__PURE__ */ jsx20("div", { className: "flex flex-col items-end gap-[2px]", children: isAvailable ? hasAmount ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
-          /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-white", children: token.amount.toFixed(6) }),
-          /* @__PURE__ */ jsx20("p", { className: "text-caption text-brand-black-100", children: token.usdValue })
-        ] }) : /* @__PURE__ */ jsx20("p", { className: "body-1 font-medium text-brand-black-100", children: "0" }) : AddWalletButton })
+        /* @__PURE__ */ jsx21("div", { className: "flex flex-col items-end gap-[2px]", children: isAvailable ? /* @__PURE__ */ jsxs13(Fragment3, { children: [
+          /* @__PURE__ */ jsx21("p", { className: "body-1 font-medium text-white", children: token.amount }),
+          /* @__PURE__ */ jsx21("p", { className: "text-caption text-brand-black-100", children: token.secondaryAmount })
+        ] }) : AddWalletButton })
       ]
     }
   );
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       className: cn(
@@ -1806,20 +1949,17 @@ function TokenSelectionItem(props) {
   );
 }
-// src/components/form/bridge-form.tsx
-import { useState as useState5 } from "react";
 // src/components/form/bridge-input.tsx
 import React8 from "react";
 // src/components/input/input.tsx
 import * as React7 from "react";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var Input2 = React7.forwardRef((_a, ref) => {
   var _b = _a, { className, label, error, helperText, id } = _b, props = __objRest(_b, ["className", "label", "error", "helperText", "id"]);
   const inputId = id || React7.useId();
-  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+    label && /* @__PURE__ */ jsx22(
       "label",
       {
         htmlFor: inputId,
@@ -1827,7 +1967,7 @@ var Input2 = React7.forwardRef((_a, ref) => {
         children: label
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       Input,
       __spreadValues({
         ref,
@@ -1838,7 +1978,7 @@ var Input2 = React7.forwardRef((_a, ref) => {
         )
       }, props)
     ),
-    (error || helperText) && /* @__PURE__ */ jsx21(
+    (error || helperText) && /* @__PURE__ */ jsx22(
       "p",
       {
         className: cn(
@@ -1853,7 +1993,7 @@ var Input2 = React7.forwardRef((_a, ref) => {
 Input2.displayName = "Input";
 // src/components/form/bridge-input.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function BridgeInput(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const {
@@ -1873,7 +2013,7 @@ function BridgeInput(props) {
   const formatPercentageLabel = (percentage2) => {
     return percentage2 === 100 ? "Max" : `${percentage2}%`;
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn(
@@ -1881,7 +2021,7 @@ function BridgeInput(props) {
         isConnected && "border-dashed-wide"
       ),
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "section",
           {
             "data-testid": "send-section",
@@ -1890,23 +2030,23 @@ function BridgeInput(props) {
               isConnected && "bg-brand-black-200",
               error ? "bg-brand-danger-500" : "bridge-form-border"
             ),
-            children: /* @__PURE__ */ jsxs14("div", { className: "bg-brand-black-500 rounded-[14.5px] h-full relative px-3", children: [
-              /* @__PURE__ */ jsxs14("div", { className: "w-full flex justify-between h-10 items-center", children: [
-                /* @__PURE__ */ jsx22("div", { className: "w-1/2", children: /* @__PURE__ */ jsx22("p", { className: "text-caption text-brand-black-100 font-medium", children: "Send" }) }),
-                /* @__PURE__ */ jsx22("div", { className: "w-1/2", children: /* @__PURE__ */ jsxs14("div", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center gap-1 justify-end", children: [
-                  /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: sender.address ? sender.address : "Balance" }),
+            children: /* @__PURE__ */ jsxs15("div", { className: "bg-brand-black-500 rounded-[14.5px] h-full relative px-3", children: [
+              /* @__PURE__ */ jsxs15("div", { className: "w-full flex justify-between h-10 items-center", children: [
+                /* @__PURE__ */ jsx23("div", { className: "w-1/2", children: /* @__PURE__ */ jsx23("p", { className: "text-caption text-brand-black-100 font-medium", children: "Send" }) }),
+                /* @__PURE__ */ jsx23("div", { className: "w-1/2", children: /* @__PURE__ */ jsxs15("div", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center gap-1 justify-end", children: [
+                  /* @__PURE__ */ jsx23("span", { className: "max-w-[100px] truncate", children: sender.address ? sender.address : "Balance" }),
                   " ",
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx23(
                     "span",
                     {
                       className: cn(
                         "max-w-[100px] truncate",
                         props.hasError ? "text-brand-danger-500" : "text-white"
                       ),
-                      children: /* @__PURE__ */ jsx22(
+                      children: /* @__PURE__ */ jsx23(
                         React8.Suspense,
                         {
-                          fallback: /* @__PURE__ */ jsx22(
+                          fallback: /* @__PURE__ */ jsx23(
                             "div",
                             {
                               className: cn(
@@ -1922,8 +2062,8 @@ function BridgeInput(props) {
                   )
                 ] }) })
               ] }),
-              /* @__PURE__ */ jsxs14("div", { className: "flex h-[70px] items-center", children: [
-                /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsxs15("div", { className: "flex h-[70px] items-center", children: [
+                /* @__PURE__ */ jsx23(
                   Input2,
                   {
                     min: 0,
@@ -1940,21 +2080,18 @@ function BridgeInput(props) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx22("div", { className: "w-[170px] pl-3 py-[13px] flex justify-end", children: props.TokenChangeButton })
+                /* @__PURE__ */ jsx23("div", { className: "w-[170px] pl-3 py-[13px] flex justify-end", children: props.TokenChangeButton })
               ] }),
-              /* @__PURE__ */ jsxs14("div", { className: "flex justify-between h-10", children: [
-                /* @__PURE__ */ jsxs14(
+              /* @__PURE__ */ jsxs15("div", { className: "flex justify-between h-10", children: [
+                /* @__PURE__ */ jsx23(
                   "div",
                   {
                     "data-testid": "sender-usd-value",
                     className: "flex items-center text-caption text-brand-black-100 font-medium min-h-6 hover:text-white duration-200 transition-colors",
-                    children: [
-                      "$",
-                      isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : sender.usdValue
-                    ]
+                    children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : sender.secondaryAmount
                   }
                 ),
-                isConnected && /* @__PURE__ */ jsx22("div", { className: "flex gap-[6px] pt-1", children: percentage.options.map((percent_value) => /* @__PURE__ */ jsx22(
+                isConnected && /* @__PURE__ */ jsx23("div", { className: "flex gap-[6px] pt-1", children: percentage.options.map((percent_value) => /* @__PURE__ */ jsx23(
                   Button2,
                   {
                     type: "button",
@@ -1974,17 +2111,17 @@ function BridgeInput(props) {
             ] })
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "section",
           {
             className: cn(
               "grid transition-all duration-200 ease-out",
               isConnected ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
-            children: /* @__PURE__ */ jsx22("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsxs14("div", { className: "p-3", children: [
-              /* @__PURE__ */ jsxs14("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx22("p", { className: "text-caption text-brand-black-100 font-medium w-1/2", children: "Receive" }),
-                !props.EditDestAddressTrigger ? /* @__PURE__ */ jsx22("span", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center justify-end w-1/2", children: /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: receiver.address }) }) : /* @__PURE__ */ jsx22(props.EditDestAddressTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+            children: /* @__PURE__ */ jsx23("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsxs15("div", { className: "p-3", children: [
+              /* @__PURE__ */ jsxs15("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx23("p", { className: "text-caption text-brand-black-100 font-medium w-1/2", children: "Receive" }),
+                !props.EditDestAddressTrigger ? /* @__PURE__ */ jsx23("span", { className: "text-caption text-brand-black-100 font-medium text-right flex items-center justify-end w-1/2", children: /* @__PURE__ */ jsx23("span", { className: "max-w-[100px] truncate", children: receiver.address }) }) : /* @__PURE__ */ jsx23(props.EditDestAddressTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
                   "button",
                   {
                     type: "button",
@@ -1992,29 +2129,29 @@ function BridgeInput(props) {
                     "aria-label": "Edit receiver address",
                     className: "cursor-pointer flex !gap-1.5 !text-caption text-brand-black-100 font-medium text-right items-center justify-end w-1/2",
                     children: [
-                      /* @__PURE__ */ jsx22("span", { className: "max-w-[100px] truncate", children: receiver.address }),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23("span", { className: "max-w-[100px] truncate", children: receiver.address }),
+                      /* @__PURE__ */ jsx23(
                         "span",
                         {
                           "aria-label": "Edit address",
                           className: "cursor-pointer text-foreground hover:scale-110 transition-transform disabled:opacity-50",
-                          children: /* @__PURE__ */ jsx22(Pen_default, { className: "size-[0.875rem]" })
+                          children: /* @__PURE__ */ jsx23(Pen_default, { className: "size-[0.875rem]" })
                         }
                       )
                     ]
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 "div",
                 {
                   className: cn(
                     "grid transition-all duration-200 ease-out",
                     sender.amount ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
                   ),
-                  children: /* @__PURE__ */ jsxs14("div", { className: "overflow-hidden min-h-0", children: [
-                    /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 py-2", children: [
-                      /* @__PURE__ */ jsx22(
+                  children: /* @__PURE__ */ jsxs15("div", { className: "overflow-hidden min-h-0", children: [
+                    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 py-2", children: [
+                      /* @__PURE__ */ jsx23(
                         BadgeIcon,
                         {
                           src: (_b = (_a = sender.token) == null ? void 0 : _a.image) != null ? _b : "",
@@ -2023,21 +2160,18 @@ function BridgeInput(props) {
                           badgeSrc: (_h = (_g = receiver.network) == null ? void 0 : _g.image) != null ? _h : ""
                         }
                       ),
-                      /* @__PURE__ */ jsx22("span", { className: "text-[20px] leading-[1] font-medium text-brand-black-100", children: isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-16 h-5 bg-brand-black-200 animate-pulse rounded" }) : `${receiver.amount} ${((_i = sender.token) == null ? void 0 : _i.symbol) || ""}` })
+                      /* @__PURE__ */ jsx23("span", { className: "text-[20px] leading-[1] font-medium text-brand-black-100", children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-16 h-5 bg-brand-black-200 animate-pulse rounded" }) : `${receiver.amount} ${((_i = sender.token) == null ? void 0 : _i.symbol) || ""}` })
                     ] }),
-                    /* @__PURE__ */ jsxs14("div", { className: "flex justify-between pt-1", children: [
-                      /* @__PURE__ */ jsxs14(
+                    /* @__PURE__ */ jsxs15("div", { className: "flex justify-between pt-1", children: [
+                      /* @__PURE__ */ jsx23(
                         "div",
                         {
                           "data-testid": "receiver-usd-value",
                           className: "flex items-center text-caption text-brand-black-100 font-medium",
-                          children: [
-                            "$",
-                            isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : receiver.usdValue
-                          ]
+                          children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-8 h-3 bg-brand-black-200 animate-pulse rounded ml-1" }) : receiver.secondaryAmount
                         }
                       ),
-                      isConnected && /* @__PURE__ */ jsx22("div", { className: "text-brand-black-100 text-caption font-medium", children: isLoading ? /* @__PURE__ */ jsx22("div", { className: "w-12 h-3 bg-brand-black-200 animate-pulse rounded" }) : receiver.estimatedTime })
+                      isConnected && /* @__PURE__ */ jsx23("div", { className: "text-brand-black-100 text-caption font-medium", children: isLoading ? /* @__PURE__ */ jsx23("div", { className: "w-12 h-3 bg-brand-black-200 animate-pulse rounded" }) : receiver.estimatedTime })
                     ] })
                   ] })
                 }
@@ -2050,139 +2184,6 @@ function BridgeInput(props) {
   );
 }
-// src/@/ui/dialog.tsx
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
-function Dialog(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Root, __spreadValues({ "data-slot": "dialog" }, props));
-}
-function DialogTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Trigger, __spreadValues({ "data-slot": "dialog-trigger" }, props));
-}
-function DialogPortal(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Portal, __spreadValues({ "data-slot": "dialog-portal" }, props));
-}
-function DialogClose(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx23(DialogPrimitive.Close, __spreadValues({ "data-slot": "dialog-close" }, props));
-}
-function DialogOverlay(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx23(
-    DialogPrimitive.Overlay,
-    __spreadValues({
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "data-[state=open]:animate-in backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 tile-bg",
-        className
-      )
-    }, props)
-  );
-}
-function DialogContent(_a) {
-  var _b = _a, {
-    className,
-    children,
-    showCloseButton = true
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "showCloseButton"
-  ]);
-  return /* @__PURE__ */ jsxs15(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx23(DialogOverlay, {}),
-    /* @__PURE__ */ jsx23(SmoothCorners, { children: /* @__PURE__ */ jsxs15(
-      DialogPrimitive.Content,
-      __spreadProps(__spreadValues({
-        "data-slot": "dialog-content",
-        className: cn(
-          "bg-brand-black-600 text-brand-black-100 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 pt-4 p-6 shadow-lg duration-200 sm:max-w-[28rem]",
-          className
-        )
-      }, props), {
-        children: [
-          children,
-          showCloseButton && /* @__PURE__ */ jsxs15(
-            DialogPrimitive.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "ring-offset-background w-[calc(32rem/16)] inline-flex items-center justify-center !rounded-full text-brand-black-100 aspect-square focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-              children: [
-                /* @__PURE__ */ jsx23(XIcon_default, { className: "size-4" }),
-                /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      })
-    ) })
-  ] });
-}
-function DialogHeader(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx23(
-    "div",
-    __spreadValues({
-      "data-slot": "dialog-header",
-      className: cn(
-        "flex flex-col justify-center px-6 py-[calc(18rem/16)] gap-2 sm:text-left min-h-[calc(64rem/16)] items-start -mt-6 -mx-6",
-        className
-      )
-    }, props)
-  );
-}
-function DialogFooter(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx23(
-    "div",
-    __spreadValues({
-      "data-slot": "dialog-footer",
-      className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )
-    }, props)
-  );
-}
-function DialogTitle(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx23(
-    DialogPrimitive.Title,
-    __spreadValues({
-      "data-slot": "dialog-title",
-      className: cn(
-        "text-[calc(20rem/16)] leading-[calc(28rem/16)] font-medium text-brand-white-500",
-        className
-      )
-    }, props)
-  );
-}
-function DialogDescription(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx23(
-    DialogPrimitive.Description,
-    __spreadValues({
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className)
-    }, props)
-  );
-}
 // src/components/form/bridge-form.tsx
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 function BridgeForm({
@@ -2344,7 +2345,7 @@ function BridgeForm({
             token: senderToken,
             amount: senderAmount,
             balance: /* @__PURE__ */ jsx24(Fragment4, { children: senderBalance }),
-            usdValue: senderUsdValue,
+            secondaryAmount: senderUsdValue,
             address: senderAddress || ""
           },
           receiver: {
@@ -2353,7 +2354,7 @@ function BridgeForm({
               image: receiverToken.image
             },
             amount: receiverAmount,
-            usdValue: receiverUsdValue,
+            secondaryAmount: receiverUsdValue,
             address: effectiveReceiverAddress || "",
             estimatedTime: estimatedTime != null ? estimatedTime : "~ 10 min"
           },

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbridge/ui",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "sideEffects": false,
   "license": "MIT",
   "private": false,
@@ -33,8 +33,8 @@
     "typescript": "5.8.3",
     "vite": "^6.3.4",
     "vitest": "^3.1.2",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",