@velora-dex/widget 0.0.15 → 0.0.16

package/dist/components/widget/Toasts/CustomToast.js

@@ -0,0 +1,222 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { d as distExports } from '../../../_virtual/index.js';
+import { Line } from '../Line/Line.js';
+import { X } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '../../../lib/utils/index.js';
+import { ReactComponent as ForwardRef } from '../../../assets/spinner.svg.js';
+import { ReactComponent as ForwardRef$1 } from '../../../assets/circle-check.svg.js';
+import { ReactComponent as ForwardRef$2 } from '../../../assets/circle-exclamation.svg.js';
+import { ProgressBar } from '../../ui/progress.js';
+import { TOASTER_LIFETIME } from '../../../widget/constants.js';
+
+const CustomToast = (t0) => {
+  const $ = distExports.c(52);
+  const {
+    toastId,
+    variant,
+    label,
+    detailsLink,
+    onClose: _onClose
+  } = t0;
+  const isLoading = variant === "loading";
+  const isSuccess = variant === "success";
+  const isError = variant === "error";
+  const isSuccessOrError = isSuccess || isError;
+  let t1;
+  if ($[0] !== isLoading || $[1] !== isSuccess) {
+    t1 = isLoading ? /* @__PURE__ */ jsx(ForwardRef, { width: 16, height: 16, className: "animate-spin direction-reverse" }) : isSuccess ? /* @__PURE__ */ jsx(ForwardRef$1, {}) : /* @__PURE__ */ jsx(ForwardRef$2, {});
+    $[0] = isLoading;
+    $[1] = isSuccess;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const icon = t1;
+  let t2;
+  if ($[3] !== _onClose || $[4] !== toastId) {
+    t2 = () => {
+      toast.dismiss(toastId);
+      _onClose?.();
+    };
+    $[3] = _onClose;
+    $[4] = toastId;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const onClose = t2;
+  let t3;
+  if ($[6] !== isError || $[7] !== isLoading || $[8] !== isSuccess) {
+    t3 = cn("text-xs text-nowrap rounded-xs flex flex-col", {
+      "text-contrast-3 dark:text-contrast-7 bg-contrast-7 dark:bg-contrast-2": isLoading,
+      "text-contrast-9 bg-secondary-shamrock-green-1": isSuccess,
+      "text-contrast-9 bg-secondary-radical-red-1": isError
+    });
+    $[6] = isError;
+    $[7] = isLoading;
+    $[8] = isSuccess;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== isLoading) {
+    t4 = cn("py-2 px-4 flex items-center", {
+      "py-3": isLoading
+    });
+    $[10] = isLoading;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== icon) {
+    t5 = /* @__PURE__ */ jsx("div", { className: "mr-1.5", children: icon });
+    $[12] = icon;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== label) {
+    t6 = /* @__PURE__ */ jsx("div", { className: "font-medium mr-4", children: label });
+    $[14] = label;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== detailsLink || $[17] !== isSuccessOrError) {
+    t7 = detailsLink && /* @__PURE__ */ jsx("div", { className: cn("cursor-pointer", {
+      "text-contrast-7": isSuccessOrError
+    }), children: /* @__PURE__ */ jsx("a", { href: detailsLink, target: "_blank", rel: "noopener noreferrer", children: "Details" }) });
+    $[16] = detailsLink;
+    $[17] = isSuccessOrError;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  let t8;
+  if ($[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: t4, children: [
+      t5,
+      t6,
+      t7
+    ] });
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== isLoading || $[25] !== isSuccessOrError) {
+    t9 = cn({
+      "bg-contrast-6 dark:bg-contrast-3": isLoading,
+      "bg-[#0000000D] dark:bg-[#0000000D]": isSuccessOrError
+    });
+    $[24] = isLoading;
+    $[25] = isSuccessOrError;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  let t10;
+  if ($[27] !== t9) {
+    t10 = /* @__PURE__ */ jsx(Line, { vertical: true, className: t9 });
+    $[27] = t9;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  let t11;
+  if ($[29] !== isLoading || $[30] !== isSuccessOrError) {
+    t11 = cn("rounded-[50%] w-[18px] h-[18px] flex items-center justify-center mx-4 cursor-pointer", {
+      "bg-[#B7BECB] dark:bg-contrast-1": isLoading,
+      "bg-contrast-9": isSuccessOrError
+    });
+    $[29] = isLoading;
+    $[30] = isSuccessOrError;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
+  let t12;
+  if ($[32] !== isLoading || $[33] !== isSuccessOrError) {
+    t12 = cn({
+      "dark:text-contrast-5": isLoading,
+      "text-contrast-5": isSuccessOrError
+    });
+    $[32] = isLoading;
+    $[33] = isSuccessOrError;
+    $[34] = t12;
+  } else {
+    t12 = $[34];
+  }
+  let t13;
+  if ($[35] !== t12) {
+    t13 = /* @__PURE__ */ jsx(X, { size: 12, className: t12 });
+    $[35] = t12;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  let t14;
+  if ($[37] !== onClose || $[38] !== t11 || $[39] !== t13) {
+    t14 = /* @__PURE__ */ jsx("div", { className: t11, onClick: onClose, children: t13 });
+    $[37] = onClose;
+    $[38] = t11;
+    $[39] = t13;
+    $[40] = t14;
+  } else {
+    t14 = $[40];
+  }
+  let t15;
+  if ($[41] !== t10 || $[42] !== t14 || $[43] !== t8) {
+    t15 = /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      t8,
+      t10,
+      t14
+    ] });
+    $[41] = t10;
+    $[42] = t14;
+    $[43] = t8;
+    $[44] = t15;
+  } else {
+    t15 = $[44];
+  }
+  let t16;
+  if ($[45] !== isSuccessOrError || $[46] !== onClose) {
+    t16 = isSuccessOrError && /* @__PURE__ */ jsx(ProgressBar, { duration: TOASTER_LIFETIME, rootProps: {
+      className: "h-[4px] bg-black/10 rounded-bl-xs rounded-br-xs mx-[0.5px]"
+    }, indicatorProps: {
+      className: "bg-white/60",
+      onTransitionEnd: onClose
+    } });
+    $[45] = isSuccessOrError;
+    $[46] = onClose;
+    $[47] = t16;
+  } else {
+    t16 = $[47];
+  }
+  let t17;
+  if ($[48] !== t15 || $[49] !== t16 || $[50] !== t3) {
+    t17 = /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: t3, children: [
+      t15,
+      t16
+    ] }) });
+    $[48] = t15;
+    $[49] = t16;
+    $[50] = t3;
+    $[51] = t17;
+  } else {
+    t17 = $[51];
+  }
+  return t17;
+};
+
+export { CustomToast };
+//# sourceMappingURL=CustomToast.js.map

package/dist/components/widget/Toasts/CustomToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomToast.js","sources":["../../../../src/components/widget/Toasts/CustomToast.tsx"],"sourcesContent":["import { Line } from \"../Line/Line\";\nimport { X } from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport { cn } from \"@/lib/utils\";\n\nimport { ReactComponent as Spinner } from \"@/assets/spinner.svg\";\nimport { ReactComponent as CircleCheckSVG } from \"@/assets/circle-check.svg\";\nimport { ReactComponent as CircleExclamationSVG } from \"@/assets/circle-exclamation.svg\";\nimport { ProgressBar } from \"@/components/ui/progress\";\nimport { TOASTER_LIFETIME } from \"@/widget/constants\";\n\n// @TODO toasts in loading state has to be stored together to show a single pending toast for either all transactions or orders\n\nexport const CustomToast = ({\n  toastId,\n  variant,\n  label,\n  detailsLink,\n  onClose: _onClose,\n}: {\n  toastId: string; // should pass the id, otherwise it won't be closable\n  variant: \"error\" | \"success\" | \"loading\"; // to match the toast.promise flow\n  label: string;\n  detailsLink?: string;\n  onClose?: () => void;\n}) => {\n  const isLoading = variant === \"loading\";\n  const isSuccess = variant === \"success\";\n  const isError = variant === \"error\";\n\n  // mostly the same styles but different bg-color\n  const isSuccessOrError = isSuccess || isError;\n\n  const icon = isLoading ? (\n    <Spinner\n      width={16}\n      height={16}\n      className=\"animate-spin direction-reverse\"\n    />\n  ) : isSuccess ? (\n    <CircleCheckSVG />\n  ) : (\n    <CircleExclamationSVG />\n  );\n\n  const onClose = () => {\n    toast.dismiss(toastId);\n    _onClose?.();\n  };\n\n  return (\n    // extra flex container to keep it centered and do not stretch the content,\n    // because sonner stretches the toast to full width in mobile\n    <div className=\"flex justify-center\">\n      <div\n        className={cn(\"text-xs text-nowrap rounded-xs flex flex-col\", {\n          \"text-contrast-3 dark:text-contrast-7 bg-contrast-7 dark:bg-contrast-2\":\n            isLoading,\n          \"text-contrast-9 bg-secondary-shamrock-green-1\": isSuccess,\n          \"text-contrast-9 bg-secondary-radical-red-1\": isError,\n        })}\n      >\n        <div className=\"flex items-center\">\n          <div\n            className={cn(\"py-2 px-4 flex items-center\", {\n              \"py-3\": isLoading, // extra padding because no ProgressBar in loading state\n            })}\n          >\n            <div className=\"mr-1.5\">{icon}</div>\n            <div className=\"font-medium mr-4\">{label}</div>\n            {detailsLink && (\n              <div\n                className={cn(\"cursor-pointer\", {\n                  \"text-contrast-7\": isSuccessOrError,\n                })}\n              >\n                <a href={detailsLink} target=\"_blank\" rel=\"noopener noreferrer\">\n                  Details\n                </a>\n              </div>\n            )}\n          </div>\n          <Line\n            vertical\n            className={cn({\n              \"bg-contrast-6 dark:bg-contrast-3\": isLoading,\n              \"bg-[#0000000D] dark:bg-[#0000000D]\": isSuccessOrError,\n            })}\n          />\n          <div\n            className={cn(\n              \"rounded-[50%] w-[18px] h-[18px] flex items-center justify-center mx-4 cursor-pointer\",\n              {\n                \"bg-[#B7BECB] dark:bg-contrast-1\": isLoading,\n                \"bg-contrast-9\": isSuccessOrError,\n              }\n            )}\n            onClick={onClose}\n          >\n            <X\n              size={12}\n              className={cn({\n                \"dark:text-contrast-5\": isLoading,\n                \"text-contrast-5\": isSuccessOrError,\n              })}\n            />\n          </div>\n        </div>\n        {isSuccessOrError && (\n          <ProgressBar\n            duration={TOASTER_LIFETIME}\n            rootProps={{\n              className:\n                \"h-[4px] bg-black/10 rounded-bl-xs rounded-br-xs mx-[0.5px]\",\n            }}\n            indicatorProps={{\n              className: \"bg-white/60\",\n              onTransitionEnd: onClose,\n            }}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomToast","t0","$","_c","toastId","variant","label","detailsLink","onClose","_onClose","isLoading","isSuccess","isError","isSuccessOrError","t1","Spinner","CircleCheckSVG","CircleExclamationSVG","icon","t2","toast","dismiss","t3","cn","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","TOASTER_LIFETIME","className","onTransitionEnd","t17"],"mappings":"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"}

package/dist/components/widget/TokenInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/TokenInput/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAa/C,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuHhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/TokenInput/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAU/C,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqHhD,CAAC"}

package/dist/components/widget/TokenInput/index.js

@@ -9,15 +9,12 @@ import { YouGet } from '../YouGet/YouGet.js';
 import { Line } from '../Line/Line.js';
 import { EmptyInput } from './EmptyInput.js';
 import { cn } from '../../../lib/utils/index.js';
-import { useTokenBalance } from '../../../hooks/tokens/balances/useTokenBalance.js';
-import { toDecimal } from '../../../lib/utils/toDecimal.js';
-import { removeTrailingZeros } from '../../../lib/utils/removeZeroDecimals.js';
 import { InsufficientBalanceMessage } from '../Warning/InsufficientBalanceMessage.js';
 import { Skeleton } from '../../ui/skeleton.js';
 import { formatFiatPrice } from '../../../lib/utils/formatFiatPrice.js';
 
 const TokenInput = (t0) => {
-  const $ = distExports.c(56);
+  const $ = distExports.c(54);
   const {
     amount,
     onAmountChange,
@@ -29,6 +26,7 @@ const TokenInput = (t0) => {
     warningMessage,
     onFocus,
     token,
+    tokenBalanceUnit,
     showMaxButton,
     onMaxClick,
     youGetProps,
@@ -38,200 +36,187 @@ const TokenInput = (t0) => {
     tokenType,
     drawerContainer
   } = t0;
-  let t1;
-  if ($[0] !== token) {
-    t1 = {
-      token
-    };
-    $[0] = token;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const {
-    balanceUnit
-  } = useTokenBalance(t1);
   if (!token) {
-    let t22;
-    if ($[2] !== drawerContainer || $[3] !== tokenType) {
-      t22 = /* @__PURE__ */ jsx(EmptyInput, { tokenType, drawerContainer });
-      $[2] = drawerContainer;
-      $[3] = tokenType;
-      $[4] = t22;
+    let t17;
+    if ($[0] !== drawerContainer || $[1] !== tokenType) {
+      t17 = /* @__PURE__ */ jsx(EmptyInput, { tokenType, drawerContainer });
+      $[0] = drawerContainer;
+      $[1] = tokenType;
+      $[2] = t17;
     } else {
-      t22 = $[4];
+      t17 = $[2];
     }
-    return t22;
+    return t17;
+  }
+  let t1;
+  if ($[3] !== usdEstimation) {
+    t1 = usdEstimation ? formatFiatPrice(Number(usdEstimation)) : usdEstimation === null ? "N/A" : void 0;
+    $[3] = usdEstimation;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
   }
   let t2;
-  if ($[5] !== usdEstimation) {
-    t2 = usdEstimation ? formatFiatPrice(Number(usdEstimation)) : usdEstimation === null ? "N/A" : void 0;
-    $[5] = usdEstimation;
+  if ($[5] !== t1) {
+    t2 = /* @__PURE__ */ jsx("div", { children: t1 });
+    $[5] = t1;
     $[6] = t2;
   } else {
     t2 = $[6];
   }
+  const usdEstimationEl = t2;
   let t3;
-  if ($[7] !== t2) {
-    t3 = /* @__PURE__ */ jsx("div", { children: t2 });
-    $[7] = t2;
-    $[8] = t3;
-  } else {
-    t3 = $[8];
-  }
-  const usdEstimationEl = t3;
-  let t4;
-  if ($[9] !== balanceUnit || $[10] !== onMaxClick || $[11] !== showMaxButton || $[12] !== token) {
-    t4 = balanceUnit !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx("div", { children: `Balance: ${removeTrailingZeros(toDecimal(Number(balanceUnit)))} ${token.symbol}` }),
+  if ($[7] !== onMaxClick || $[8] !== showMaxButton || $[9] !== token || $[10] !== tokenBalanceUnit) {
+    t3 = tokenBalanceUnit ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { children: `Balance: ${tokenBalanceUnit} ${token.symbol}` }),
       showMaxButton && /* @__PURE__ */ jsx(Button, { className: "h-[16px] py-[2px] px-[6px] text-[10px] font-inter bg-transparent hover:bg-transparent text-primary-azul-1 border border-primary-azul-1 uppercase", onClick: onMaxClick, children: "max" })
     ] }) : null;
-    $[9] = balanceUnit;
-    $[10] = onMaxClick;
-    $[11] = showMaxButton;
-    $[12] = token;
-    $[13] = t4;
+    $[7] = onMaxClick;
+    $[8] = showMaxButton;
+    $[9] = token;
+    $[10] = tokenBalanceUnit;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  const balanceEl = t3;
+  const t4 = insufficientBalanceMessageProps?.shouldDisplay;
+  let t5;
+  if ($[12] !== t4) {
+    t5 = cn("flex flex-col gap-[8px] p-4 border-1 rounded-[12px] border-transparent focus-within:border-primary-azul-1 bg-contrast-8 dark:bg-contrast-2", {
+      "border-secondary-orange-peel-1": t4
+    });
+    $[12] = t4;
+    $[13] = t5;
   } else {
-    t4 = $[13];
+    t5 = $[13];
   }
-  const balanceEl = t4;
-  const t5 = insufficientBalanceMessageProps?.shouldDisplay;
   let t6;
-  if ($[14] !== t5) {
-    t6 = cn("flex flex-col gap-[8px] p-4 border-1 rounded-[12px] border-transparent focus-within:border-primary-azul-1 bg-contrast-8 dark:bg-contrast-2", {
-      "border-secondary-orange-peel-1": t5
-    });
-    $[14] = t5;
-    $[15] = t6;
+  if ($[14] !== label || $[15] !== networkSwitcherProps) {
+    t6 = networkSwitcherProps ? /* @__PURE__ */ jsx(NetworkSwitcherDropdown, { ...networkSwitcherProps, prefix: label }) : label ? /* @__PURE__ */ jsx("div", { className: "text-xs text-contrast-3 dark:text-contrast-7", children: label }) : null;
+    $[14] = label;
+    $[15] = networkSwitcherProps;
+    $[16] = t6;
   } else {
-    t6 = $[15];
+    t6 = $[16];
   }
   let t7;
-  if ($[16] !== label || $[17] !== networkSwitcherProps) {
-    t7 = networkSwitcherProps ? /* @__PURE__ */ jsx(NetworkSwitcherDropdown, { ...networkSwitcherProps, prefix: label }) : label ? /* @__PURE__ */ jsx("div", { className: "text-xs text-contrast-3 dark:text-contrast-7", children: label }) : null;
-    $[16] = label;
-    $[17] = networkSwitcherProps;
+  if ($[17] !== isLoading) {
+    t7 = isLoading && /* @__PURE__ */ jsx(Skeleton, { className: "w-[254px] h-[36px]" });
+    $[17] = isLoading;
     $[18] = t7;
   } else {
     t7 = $[18];
   }
   let t8;
   if ($[19] !== isLoading) {
-    t8 = isLoading && /* @__PURE__ */ jsx(Skeleton, { className: "w-[254px] h-[36px]" });
+    t8 = cn("min-w-0 w-full text-[24px] font-geist-mono text-contrast-3 dark:text-contrast-8", {
+      hidden: isLoading
+    });
     $[19] = isLoading;
     $[20] = t8;
   } else {
     t8 = $[20];
   }
   let t9;
-  if ($[21] !== isLoading) {
-    t9 = cn("min-w-0 w-full text-[24px] font-geist-mono text-contrast-3 dark:text-contrast-8", {
-      hidden: isLoading
-    });
-    $[21] = isLoading;
-    $[22] = t9;
-  } else {
-    t9 = $[22];
+  if ($[21] !== amount || $[22] !== disabled || $[23] !== onAmountChange || $[24] !== onFocus || $[25] !== readOnly || $[26] !== t8) {
+    t9 = /* @__PURE__ */ jsx(NumericFormat, { className: t8, placeholder: "0", disabled, value: amount, onValueChange: onAmountChange, onFocus, allowNegative: false, allowLeadingZeros: false, customInput: UnstyledInput, thousandSeparator: true, readOnly });
+    $[21] = amount;
+    $[22] = disabled;
+    $[23] = onAmountChange;
+    $[24] = onFocus;
+    $[25] = readOnly;
+    $[26] = t8;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
   }
   let t10;
-  if ($[23] !== amount || $[24] !== disabled || $[25] !== onAmountChange || $[26] !== onFocus || $[27] !== readOnly || $[28] !== t9) {
-    t10 = /* @__PURE__ */ jsx(NumericFormat, { className: t9, placeholder: "0", disabled, value: amount, onValueChange: onAmountChange, onFocus, allowNegative: false, allowLeadingZeros: false, customInput: UnstyledInput, thousandSeparator: true, readOnly });
-    $[23] = amount;
-    $[24] = disabled;
-    $[25] = onAmountChange;
-    $[26] = onFocus;
-    $[27] = readOnly;
-    $[28] = t9;
-    $[29] = t10;
+  if ($[28] !== drawerContainer || $[29] !== token || $[30] !== tokenBadgePropsOverride || $[31] !== tokenType) {
+    t10 = /* @__PURE__ */ jsx(SelectTokenButton, { token, tokenBadgePropsOverride, tokenType, drawerContainer });
+    $[28] = drawerContainer;
+    $[29] = token;
+    $[30] = tokenBadgePropsOverride;
+    $[31] = tokenType;
+    $[32] = t10;
   } else {
-    t10 = $[29];
+    t10 = $[32];
   }
   let t11;
-  if ($[30] !== drawerContainer || $[31] !== token || $[32] !== tokenBadgePropsOverride || $[33] !== tokenType) {
-    t11 = /* @__PURE__ */ jsx(SelectTokenButton, { token, tokenBadgePropsOverride, tokenType, drawerContainer });
-    $[30] = drawerContainer;
-    $[31] = token;
-    $[32] = tokenBadgePropsOverride;
-    $[33] = tokenType;
-    $[34] = t11;
-  } else {
-    t11 = $[34];
-  }
-  let t12;
-  if ($[35] !== t10 || $[36] !== t11 || $[37] !== t8) {
-    t12 = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-      t8,
-      t10,
-      t11
+  if ($[33] !== t10 || $[34] !== t7 || $[35] !== t9) {
+    t11 = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      t7,
+      t9,
+      t10
     ] });
-    $[35] = t10;
+    $[33] = t10;
+    $[34] = t7;
+    $[35] = t9;
     $[36] = t11;
-    $[37] = t8;
-    $[38] = t12;
   } else {
-    t12 = $[38];
+    t11 = $[36];
   }
-  let t13;
-  if ($[39] !== balanceEl || $[40] !== usdEstimationEl) {
-    t13 = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-[10px] font-geist-mono text-contrast-5", children: [
+  let t12;
+  if ($[37] !== balanceEl || $[38] !== usdEstimationEl) {
+    t12 = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-[10px] font-geist-mono text-contrast-5", children: [
       usdEstimationEl,
       balanceEl
     ] });
-    $[39] = balanceEl;
-    $[40] = usdEstimationEl;
+    $[37] = balanceEl;
+    $[38] = usdEstimationEl;
+    $[39] = t12;
+  } else {
+    t12 = $[39];
+  }
+  let t13;
+  if ($[40] !== insufficientBalanceMessageProps) {
+    t13 = insufficientBalanceMessageProps && /* @__PURE__ */ jsx(InsufficientBalanceMessage, { ...insufficientBalanceMessageProps });
+    $[40] = insufficientBalanceMessageProps;
     $[41] = t13;
   } else {
     t13 = $[41];
   }
   let t14;
-  if ($[42] !== insufficientBalanceMessageProps) {
-    t14 = insufficientBalanceMessageProps && /* @__PURE__ */ jsx(InsufficientBalanceMessage, { ...insufficientBalanceMessageProps });
-    $[42] = insufficientBalanceMessageProps;
+  if ($[42] !== warningMessage) {
+    t14 = warningMessage && /* @__PURE__ */ jsx("div", { className: "text-xs text-secondary-orange-peel-1 flex items-center gap-2", children: warningMessage });
+    $[42] = warningMessage;
     $[43] = t14;
   } else {
     t14 = $[43];
   }
   let t15;
-  if ($[44] !== warningMessage) {
-    t15 = warningMessage && /* @__PURE__ */ jsx("div", { className: "text-xs text-secondary-orange-peel-1 flex items-center gap-2", children: warningMessage });
-    $[44] = warningMessage;
-    $[45] = t15;
-  } else {
-    t15 = $[45];
-  }
-  let t16;
-  if ($[46] !== youGetProps) {
-    t16 = youGetProps && /* @__PURE__ */ jsxs("div", { children: [
+  if ($[44] !== youGetProps) {
+    t15 = youGetProps && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Line, { className: "mt-[16px] mb-[17.5px]" }),
       /* @__PURE__ */ jsx(YouGet, { ...youGetProps })
     ] });
-    $[46] = youGetProps;
-    $[47] = t16;
+    $[44] = youGetProps;
+    $[45] = t15;
   } else {
-    t16 = $[47];
+    t15 = $[45];
   }
-  let t17;
-  if ($[48] !== t12 || $[49] !== t13 || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t6 || $[54] !== t7) {
-    t17 = /* @__PURE__ */ jsxs("div", { className: t6, children: [
-      t7,
+  let t16;
+  if ($[46] !== t11 || $[47] !== t12 || $[48] !== t13 || $[49] !== t14 || $[50] !== t15 || $[51] !== t5 || $[52] !== t6) {
+    t16 = /* @__PURE__ */ jsxs("div", { className: t5, children: [
+      t6,
+      t11,
       t12,
       t13,
       t14,
-      t15,
-      t16
+      t15
     ] });
-    $[48] = t12;
-    $[49] = t13;
-    $[50] = t14;
-    $[51] = t15;
-    $[52] = t16;
-    $[53] = t6;
-    $[54] = t7;
-    $[55] = t17;
-  } else {
-    t17 = $[55];
-  }
-  return t17;
+    $[46] = t11;
+    $[47] = t12;
+    $[48] = t13;
+    $[49] = t14;
+    $[50] = t15;
+    $[51] = t5;
+    $[52] = t6;
+    $[53] = t16;
+  } else {
+    t16 = $[53];
+  }
+  return t16;
 };
 
 export { TokenInput };