@rash2x/bridge-widget 0.1.7 → 0.1.8

package/dist/evaa-bridge.cjs

@@ -1703,7 +1703,7 @@ const VirtualizedTokenList = ({
   getTokenUsdValue,
   onPick
 }) => {
-  const Row2 = ({ index, style }) => {
+  const Row = ({ index, style }) => {
     const node = nodes[index];
     if (node.kind === "header") {
       const gap = index === 0 ? 0 : HEADER_TOP_GAP;
@@ -1750,7 +1750,7 @@ const VirtualizedTokenList = ({
       itemSize: getItemSize,
       overscanCount: 8,
       style: { willChange: "transform", paddingBottom: "40px" },
-      children: Row2
+      children: Row
     }
   );
 };
@@ -2037,7 +2037,7 @@ function Card({ className, ...props }) {
     {
       "data-slot": "card",
       className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm",
         className
       ),
       ...props
@@ -2050,7 +2050,7 @@ function CardHeader({ className, ...props }) {
     {
       "data-slot": "card-header",
       className: cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4",
         className
       ),
       ...props
@@ -2085,7 +2085,7 @@ function CardContent({ className, ...props }) {
     "div",
     {
       "data-slot": "card-content",
-      className: cn("px-6", className),
+      className: cn("px-4", className),
       ...props
     }
   );
@@ -2095,7 +2095,7 @@ function CardFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "card-footer",
-      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      className: cn("flex items-center px-4 [.border-t]:pt-4", className),
       ...props
     }
   );
@@ -2960,10 +2960,8 @@ const SwapSection = ({
       "div",
       {
         className: cn(
-          "p-4 flex flex-col gap-4 transition-colors bg-input",
-          {
-            "bg-input-focus": isSource && isFocused
-          },
+          "p-4 flex flex-col gap-4 transition-colors bg-muted",
+          isSource && isFocused ? "bg-accent" : "",
           className
         ),
         children: [
@@ -3127,7 +3125,7 @@ const ToggleRow = ({ enabled, onToggle }) => {
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 flex flex-col rounded-b-26 gap-2 bg-muted", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 flex flex-col rounded-b-xl gap-2 bg-muted", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-4.5 font-medium text-muted-foreground", children: t("bridge.sendToAnotherAddress") }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3249,15 +3247,6 @@ function AccordionContent({
     }
   );
 }
-function getRouteDisplayName(route) {
-  if (!route) return "Stargate Bridge";
-  const routeLower = route.toLowerCase();
-  if (routeLower.includes("taxi")) return "Stargate V2 Fast";
-  if (routeLower.includes("bus")) return "Stargate V2 Economy";
-  if (routeLower.includes("oft")) return "OFT Bridge";
-  if (routeLower.includes("v2")) return "Stargate V2";
-  return route.split(/[\/\-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
-}
 function getQuoteAmounts(quote, srcToken, dstToken) {
   if (!quote || !srcToken || !dstToken) {
     return {
@@ -3350,12 +3339,21 @@ function getQuoteDetails(quote, srcToken, dstToken, tokens, chains, slippageBps)
     fees
   };
 }
-const ReceiveRow = () => {
+function getRouteDisplayName(route) {
+  if (!route) return "Stargate Bridge";
+  const routeLower = route.toLowerCase();
+  if (routeLower.includes("taxi")) return "Stargate V2 Fast";
+  if (routeLower.includes("bus")) return "Stargate V2 Economy";
+  if (routeLower.includes("oft")) return "OFT Bridge";
+  if (routeLower.includes("v2")) return "Stargate V2";
+  return route.split(/[/\-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+const Details = () => {
   const { t } = reactI18next.useTranslation();
   const { selectedAssetSymbol, assetMatrix, tokens } = useTokensStore();
   const { toChain, fromChain, chains } = useChainsStore();
   const { quote, status } = useBridgeQuoteStore();
-  const { slippageBps, routePriority, gasPreset } = useSettingsStore();
+  const { slippageBps, routePriority } = useSettingsStore();
   const dstToken = resolveTokenOnChainFromMatrix$2(
     assetMatrix,
     selectedAssetSymbol,
@@ -3395,9 +3393,8 @@ const ReceiveRow = () => {
   })();
   const currentSlippageText = formatPercentage(slippageBps);
   const routeText = quote?.route ? getRouteDisplayName(quote.route) : t(`settings.routePresets.${routePriority}`);
-  const hasGasOnDestination = gasPreset !== "none";
-  return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "item-1", className: "bg-muted rounded-20", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "w-full gap-1 items-center py-6 px-5 rounded-b-16 data-[state=open]:pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: "item-1", className: "bg-muted rounded-xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "w-full gap-1 items-center py-6 px-5 rounded-b-xl data-[state=open]:pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-normal text-priority leading-3.5", children: t("bridge.youWillReceive", { defaultValue: "You will receive" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-transparent hover:bg-transparent shadow-none h-4 p-0 px-0 py-0 flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(TokenSymbol, { symbol, className: "w-4 h-4", alt: "token" }),
@@ -3408,65 +3405,56 @@ const ReceiveRow = () => {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "text-balance text-foreground px-5 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { className: "px-5 flex flex-col gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Row,
+        DetailsRow,
         {
           label: t("transaction.route"),
-          right: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          value: /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(StargateIcon, { className: "size-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground font-normal text-sm leading-[100%]", children: routeText }),
-            hasGasOnDestination && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-settings-active text-settings-active-foreground px-1.5 py-0.5 rounded", children: t(`settings.gasPresets.${gasPreset}`) })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "", children: routeText })
           ] })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Row,
+        DetailsRow,
         {
           label: t("transaction.estTime"),
           value: etaText,
           isLoading
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Row, { label: t("transaction.slippage"), value: currentSlippageText }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Row,
+        DetailsRow,
+        {
+          label: t("transaction.slippage"),
+          value: currentSlippageText
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DetailsRow,
         {
           label: t("transaction.totalFee"),
-          value: totalFeeDisplay,
-          isLoading,
-          className: "font-semibold",
-          token: /* @__PURE__ */ jsxRuntime.jsx(TokenSymbol, { symbol, className: "w-4 h-4", alt: "token" })
+          value: /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: totalFeeDisplay }),
+            /* @__PURE__ */ jsxRuntime.jsx(TokenSymbol, { symbol, className: "w-4 h-4", alt: "token" })
+          ] }),
+          isLoading
         }
       )
     ] })
   ] }) });
 };
-const Row = ({
+const DetailsRow = ({
   label,
   value,
-  right,
-  className,
-  isLoading = false,
-  token
+  isLoading = false
 }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-priority font-normal font-display", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-priority font-normal", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(Tip, { text: label, children: /* @__PURE__ */ jsxRuntime.jsx(TipIcon, { className: "size-4 text-receive-icon" }) })
   ] }),
-  right ?? (isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-16 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        className: cn(
-          "text-foreground text-sm font-display leading-[100%]",
-          className
-        ),
-        children: value ?? "—"
-      }
-    ),
-    token
-  ] }))
+  isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-16 rounded-md" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground text-sm", children: value ?? "—" })
 ] });
 const useTransactionStore = zustand.create((set, get) => ({
   current: void 0,
@@ -4102,7 +4090,7 @@ const SubmitButton = () => {
     }
   };
   const disabled = isBusy || amountNum <= 0 || status === "loading" || isBalanceLoading || hasInsufficientBalance || hasAmountTooLarge || !gas.hasEnoughGas || noRoute || !isValidForTransfer;
-  return /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleClick, disabled, className: "w-full", children: label });
+  return /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleClick, disabled, className: "w-full mt-4", children: label });
 };
 function short(addr) {
   return addr.slice(0, 4) + "…" + addr.slice(-4);
@@ -8125,7 +8113,7 @@ const EvaaBridgeContent = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               SwapSection,
               {
-                className: "rounded-t-16",
+                className: "rounded-t-xl",
                 label: t("bridge.sourceNetwork"),
                 balance: fromBalance,
                 chain: fromChain,
@@ -8160,7 +8148,7 @@ const EvaaBridgeContent = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(SubmitButton, {})
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(ReceiveRow, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(Details, {}) })
         ]
       }
     ),