@wheelx-widget/widget 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React5 = require('react');
+var react = require('@chakra-ui/react');
 var reactQuery = require('@tanstack/react-query');
 var sdkReactCore = require('@dynamic-labs/sdk-react-core');
 var ethereum = require('@dynamic-labs/ethereum');
@@ -12,7 +13,6 @@ var react$1 = require('@emotion/react');
 var jsxRuntime = require('react/jsx-runtime');
 var axios6 = require('axios');
 var zustand = require('zustand');
-var react = require('@chakra-ui/react');
 var biFraction = require('bi-fraction');
 var viem = require('viem');
 var chains = require('viem/chains');
@@ -474,6 +474,37 @@ function WalletConnectionStateSync() {
   useSyncWalletConnectedStore();
   return null;
 }
+function LoadingSkeleton() {
+  const { theme } = useWidgetTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      w: { base: "100%", md: "480px" },
+      h: { base: "400px", md: "440px" },
+      borderRadius: "24px",
+      bg: theme.assistBgColor,
+      gap: 4,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            w: "40px",
+            h: "40px",
+            borderRadius: "full",
+            bg: theme.defaultBorderColor,
+            opacity: 0.4,
+            animation: "pulse 1.5s ease-in-out infinite"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "14px", color: theme.defaultTextColor, children: "Loading chains and tokens..." })
+      ]
+    }
+  );
+}
 function ChainsAndTokensLoader({ children, config }) {
   const { data } = useChainsAndTokens(true);
   const { setChains, setSlippagePolicies } = useChainsStore();
@@ -530,7 +561,7 @@ function ChainsAndTokensLoader({ children, config }) {
   }, [filteredChains, filteredTokens, data, setChains, setTokens, setSlippagePolicies]);
   const isReady = filteredChains && filteredTokens;
   if (!isReady) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "200px" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading chains and tokens..." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(LoadingSkeleton, {});
   }
   return /* @__PURE__ */ jsxRuntime.jsx(FavoritesProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(TokenFavoritesProvider, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(WalletConnectionStateSync, {}),
@@ -2858,13 +2889,17 @@ var extractVPathSegment = () => {
   const match = pathname.match(/^\/v\/([a-zA-Z0-9-+]+)/);
   return match ? match[1] : "";
 };
-var toBigInt = (value) => {
-  try {
-    return BigInt(value);
-  } catch {
-    return BigInt(0);
-  }
-};
+function toBigInt(balance, decimals = 6) {
+  const balanceStr = typeof balance === "number" ? balance.toString() : balance;
+  const [integerPart, decimalPart = ""] = balanceStr.split(".");
+  const integerBigInt = BigInt(integerPart);
+  const neededDecimalDigits = Math.min(decimalPart.length, decimals);
+  const trimmedDecimal = decimalPart.slice(0, neededDecimalDigits);
+  const paddedDecimal = trimmedDecimal.padEnd(decimals, "0");
+  const decimalBigInt = BigInt(paddedDecimal);
+  const multiplier = BigInt(10 ** decimals);
+  return integerBigInt * multiplier + decimalBigInt;
+}
 function BackIcon(props = {}) {
   return React5.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2886,7 +2921,7 @@ function ArrowRightIcon(props = {}) {
     height: props.size || 16,
     ...props,
     style: { display: "inline-block", verticalAlign: "middle", ...props.style || {} },
-    dangerouslySetInnerHTML: { __html: `<circle cx="23.0434" cy="23.5005" r="22.9565" fill="#81728C" />
+    dangerouslySetInnerHTML: { __html: `<circle cx="23.0434" cy="23.5005" r="22.9565" fill="currentColor" />
   <path
     d="M14.0898 22.8301C14.0896 22.822 14.0889 22.8138 14.0889 22.8057C14.0889 22.3529 14.463 21.9813 14.9424 21.9365L15.0391 21.9316L29.0293 21.9316L25.582 18.7607C25.1215 18.3371 25.0489 17.7165 25.4199 17.375C25.7913 17.0335 26.466 17.1007 26.9268 17.5244L31.7939 22.001C32.1346 22.1339 32.374 22.4439 32.374 22.8057C32.374 22.8251 32.3715 22.8442 32.3701 22.8633C32.3705 22.874 32.3721 22.8847 32.3721 22.8955C32.3718 23.2561 32.1341 23.5657 31.7949 23.6992L26.9268 28.1768C26.4661 28.6002 25.7912 28.6674 25.4199 28.3262C25.0488 27.9848 25.1218 27.3641 25.582 26.9404L29.0293 23.7695L15.0371 23.7695L14.9404 23.7646C14.4611 23.7198 14.0872 23.3481 14.0869 22.8955C14.0869 22.8735 14.0881 22.8517 14.0898 22.8301Z"
     fill="white" />` }
@@ -3242,7 +3277,7 @@ var textRecipe = react.defineRecipe({
   }
 });
 var Heading = react.chakra("h2", headingRecipe);
-var Text = react.chakra("p", textRecipe);
+var Text2 = react.chakra("p", textRecipe);
 var isTouchDevice = () => {
   if (typeof window === "undefined") return false;
   return "ontouchstart" in window || navigator.maxTouchPoints > 0;
@@ -3919,7 +3954,7 @@ var FormButton = ({
   const renderButton = () => {
     if (errorMessage || quoteMessage) {
       return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { ...buttonStyles, disabled: true, bg: theme.disabledButtonBg, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -3985,7 +4020,7 @@ var FormButton = ({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Text,
+                    Text2,
                     {
                       position: "absolute",
                       w: "28px",
@@ -4000,7 +4035,7 @@ var FormButton = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { children: "AI is Thinking the Best Price" })
+            /* @__PURE__ */ jsxRuntime.jsx(Text2, { children: "AI is Thinking the Best Price" })
           ] }) })
         }
       );
@@ -4596,7 +4631,7 @@ var Network = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(
-                Text,
+                Text2,
                 {
                   variant: {
                     base: "content7",
@@ -4731,7 +4766,7 @@ var TokenAmountText = ({
   });
   const leadingZeros = countLeadingZerosAfterDecimal(_amount);
   if (leadingZeros > 5) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "content8", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Text2, { variant: "content8", ...props, children: [
       prefix,
       " ",
       _amount.slice(0, 3),
@@ -4750,7 +4785,7 @@ var TokenAmountText = ({
       suffix
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "content7", ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Text2, { variant: "content7", ...props, children: [
     prefix,
     " ",
     _amount,
@@ -5063,7 +5098,7 @@ var TokenAndAddress = ({
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Text,
+              Text2,
               {
                 variant: {
                   base: "content9",
@@ -5091,7 +5126,7 @@ var TokenAndAddress = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
+            Text2,
             {
               variant: {
                 base: "content9",
@@ -5295,7 +5330,7 @@ var TokenList = ({
         }
       } else {
         return /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { w: "100%", h: "50px", justify: "center", align: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Text,
+          Text2,
           {
             color: theme.weakTextColor,
             variant: {
@@ -5394,7 +5429,7 @@ var TokenList = ({
           cursor: "pointer",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: item.icon, boxSize: "14px" }),
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { children: item.name })
+            /* @__PURE__ */ jsxRuntime.jsx(Text2, { children: item.name })
           ]
         },
         index
@@ -5694,7 +5729,7 @@ var MobileContent = React5.memo(function MobileContent2({
                     objectFit: "cover"
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: ArrowDownIcon, boxSize: "16px" })
+                /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: ArrowDownIcon, boxSize: "16px", color: theme.defaultTextColor })
               ]
             }
           )
@@ -5750,10 +5785,10 @@ var MobileContent = React5.memo(function MobileContent2({
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(AllChainsIcon, {}),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          Text,
+                          Text2,
                           {
                             variant: "content6_1",
-                            color: "brand-grey1",
+                            color: theme.defaultTextColor,
                             whiteSpace: "nowrap",
                             children: "Chains with assets"
                           }
@@ -5765,7 +5800,7 @@ var MobileContent = React5.memo(function MobileContent2({
                 ]
               }
             ),
-            !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Popular" }),
+            !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Popular" }),
             /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "100%", align: "start", gap: 0, children: [
               popularChains?.map((chain) => /* @__PURE__ */ jsxRuntime.jsx(
                 Network,
@@ -5801,7 +5836,7 @@ var MobileContent = React5.memo(function MobileContent2({
                 chain.chain_id + "fav-chains"
               ))
             ] }),
-            !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Chains (A-Z)" }),
+            !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Chains (A-Z)" }),
             /* @__PURE__ */ jsxRuntime.jsx(react.VStack, { w: "100%", align: "start", gap: 0, children: orderedChains?.filter((chain) => chain.is_testnet !== true)?.map((chain) => /* @__PURE__ */ jsxRuntime.jsx(
               Network,
               {
@@ -5818,7 +5853,7 @@ var MobileContent = React5.memo(function MobileContent2({
               chain.chain_id + "ordered-chains"
             )) }),
             !isSelectingFromToken && !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Prediction" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Prediction" }),
               orderedPredictionChains?.map((chain) => /* @__PURE__ */ jsxRuntime.jsx(
                 Network,
                 {
@@ -5836,7 +5871,7 @@ var MobileContent = React5.memo(function MobileContent2({
                 chain.chain_id + "prediction-chains"
               ))
             ] }),
-            !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
+            !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
             orderedChains?.filter((chain) => chain.is_testnet === true)?.map((chain) => /* @__PURE__ */ jsxRuntime.jsx(
               Network,
               {
@@ -6030,7 +6065,7 @@ var DesktopContent = ({
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(AllChainsIcon, {}),
                             /* @__PURE__ */ jsxRuntime.jsx(
-                              Text,
+                              Text2,
                               {
                                 variant: "content6_1",
                                 color: theme.defaultTextColor,
@@ -6057,7 +6092,7 @@ var DesktopContent = ({
                   },
                   chain.chain_id + "search-chains"
                 )) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", mb: 2, children: "Popular" }),
+                  !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", mb: 2, children: "Popular" }),
                   popularChains?.map((chain) => /* @__PURE__ */ jsxRuntime.jsx(
                     Network,
                     {
@@ -6085,7 +6120,7 @@ var DesktopContent = ({
                     },
                     chain.chain_id + "fav-chains"
                   )),
-                  !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Chains (A-Z)" }),
+                  !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Chains (A-Z)" }),
                   orderedChains?.filter((chain) => chain.is_testnet === false)?.map((chain) => /* @__PURE__ */ jsxRuntime.jsx(
                     Network,
                     {
@@ -6101,7 +6136,7 @@ var DesktopContent = ({
                   )),
                   !isSelectingFromToken && !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      Text,
+                      Text2,
                       {
                         px: 2,
                         color: theme.weakTextColor,
@@ -6127,7 +6162,7 @@ var DesktopContent = ({
                       chain.chain_id + "prediction-chains"
                     ))
                   ] }),
-                  !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
+                  !isPreconfigured && /* @__PURE__ */ jsxRuntime.jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
                   orderedChains?.filter((chain) => chain.is_testnet === true)?.map((chain) => /* @__PURE__ */ jsxRuntime.jsx(
                     Network,
                     {
@@ -6557,7 +6592,7 @@ var TokenInfoCom = ({ tokenInfo, priority = false }) => {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -6638,7 +6673,9 @@ var TokenSelectAndInput = ({
   const toTokenBalanceHyper = {
     formatted: toTokenBalanceHyperBack?.withdrawable,
     value: toBigInt(
-      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0")
+      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0",
+      6
+    )
   };
   React5.useEffect(() => {
     if (!isFrom) {
@@ -6827,7 +6864,7 @@ var TokenSelectAndInput = ({
         const loss = -(+toAmountToUsd - +fromAmountToUsd) / +fromAmountToUsd;
         if (loss >= 0.1) {
           return /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
+            Text2,
             {
               as: "span",
               color: "#ff4267",
@@ -6862,7 +6899,7 @@ var TokenSelectAndInput = ({
     return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
       renderSolanaWalletIcon(),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: "content8",
           backgroundColor: theme.highlightBgColor,
@@ -6879,7 +6916,7 @@ var TokenSelectAndInput = ({
     return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
       walletIcon,
       /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: "content8",
           backgroundColor: theme.highlightBgColor,
@@ -6898,7 +6935,7 @@ var TokenSelectAndInput = ({
           return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
             walletIcon,
             /* @__PURE__ */ jsxRuntime.jsx(
-              Text,
+              Text2,
               {
                 variant: "content8",
                 backgroundColor: theme.assistBgColor,
@@ -6912,7 +6949,7 @@ var TokenSelectAndInput = ({
         }
         return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
+            Text2,
             {
               variant: "content8",
               backgroundColor: theme.assistBgColor,
@@ -6941,7 +6978,7 @@ var TokenSelectAndInput = ({
               cursor: "pointer",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  Text,
+                  Text2,
                   {
                     variant: "content8",
                     backgroundColor: theme.assistBgColor,
@@ -6980,7 +7017,7 @@ var TokenSelectAndInput = ({
               cursor: "pointer",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  Text,
+                  Text2,
                   {
                     variant: "content8",
                     backgroundColor: theme.assistBgColor,
@@ -7014,7 +7051,7 @@ var TokenSelectAndInput = ({
       return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
         walletIcon,
         /* @__PURE__ */ jsxRuntime.jsx(
-          Text,
+          Text2,
           {
             variant: "content8",
             backgroundColor: theme.assistBgColor,
@@ -7074,7 +7111,7 @@ var TokenSelectAndInput = ({
                     border: "1px solid",
                     borderColor: theme.highlightTextColor,
                     onClick: () => handleQuickInput("50%"),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "content9", color: theme.highlightTextColor, children: "50%" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: "content9", color: theme.highlightTextColor, children: "50%" })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -7087,10 +7124,10 @@ var TokenSelectAndInput = ({
                     borderRadius: "4px",
                     bg: theme.highlightButtonBg,
                     onClick: () => handleQuickInput("Max"),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "content9", color: theme.highlightButtonText, children: "Max" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: "content9", color: theme.highlightButtonText, children: "Max" })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "content8", color: theme.weakTextColor, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Text2, { variant: "content8", color: theme.weakTextColor, children: [
                   "Balance:",
                   " ",
                   tokenInfo.isSolana && solanaBalance ? solanaBalance.formatted : balance
@@ -7207,7 +7244,7 @@ var TokenSelectAndInput = ({
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsxs(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content9",
@@ -7245,10 +7282,10 @@ var TokenSelectAndInput = ({
             bottom: ["6px", "8px"],
             left: 0,
             paddingRight: [2, 4],
-            children: !isFrom && !isDepositPlatformToken && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: tokenInfo.isSolana ? solanaWalletAddress && /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "content8", children: [
+            children: !isFrom && !isDepositPlatformToken && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: tokenInfo.isSolana ? solanaWalletAddress && /* @__PURE__ */ jsxRuntime.jsxs(Text2, { variant: "content8", children: [
               "Balance: ",
               displayBalance
-            ] }) : address && /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "content8", children: [
+            ] }) : address && /* @__PURE__ */ jsxRuntime.jsxs(Text2, { variant: "content8", children: [
               "Balance: ",
               displayBalance
             ] }) })
@@ -7342,7 +7379,7 @@ var TipsContent = ({
   const renderFee = (fee) => {
     if (fee === "0") {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: "content9",
           color: "white",
@@ -7354,7 +7391,7 @@ var TipsContent = ({
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Text,
+      Text2,
       {
         variant: {
           base: "content9",
@@ -7379,7 +7416,7 @@ var TipsContent = ({
     const sif = +swapImpactFee();
     if (toAmountToUsd === null) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7392,7 +7429,7 @@ var TipsContent = ({
     }
     if (sif > 0 || sif === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7407,7 +7444,7 @@ var TipsContent = ({
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Text,
+      Text2,
       {
         variant: {
           base: "content9",
@@ -7442,7 +7479,7 @@ var TipsContent = ({
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", w: "100%", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -7456,7 +7493,7 @@ var TipsContent = ({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", w: "100%", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -7467,7 +7504,7 @@ var TipsContent = ({
           }
         ),
         points === "0" && !fromTokenInfo.isSolana ? /* @__PURE__ */ jsxRuntime.jsx(
-          Text,
+          Text2,
           {
             variant: "content9",
             color: "white",
@@ -7506,7 +7543,7 @@ var TipsContent = ({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", w: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7520,7 +7557,7 @@ var TipsContent = ({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", w: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7537,7 +7574,7 @@ var TipsContent = ({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", w: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7548,7 +7585,7 @@ var TipsContent = ({
         }
       ),
       points === "0" && !fromTokenInfo.isSolana ? /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: "content9",
           color: "white",
@@ -7605,7 +7642,7 @@ var TxInfo = ({
   const renderPriceImpactPercentage = () => {
     if (priceImpact.bridgeFee === "0" && priceImpact.dstGasFee === "0" && priceImpact.swapFee === "0") {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: "content9",
           color: theme.highlightButtonText,
@@ -7620,17 +7657,17 @@ var TxInfo = ({
       const inPrice = Number(fromAmountToUsd.replace(/,/g, ""));
       const outPrice = Number(toAmountToUsd.replace(/,/g, ""));
       if (outPrice > inPrice) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.defaultTextColor, children: `+${((outPrice - inPrice) / inPrice * 100).toFixed(2)}%` });
+        return /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.defaultTextColor, children: `+${((outPrice - inPrice) / inPrice * 100).toFixed(2)}%` });
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.defaultTextColor, children: `-${((inPrice - outPrice) / inPrice * 100).toFixed(2)}%` });
+      return /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.defaultTextColor, children: `-${((inPrice - outPrice) / inPrice * 100).toFixed(2)}%` });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.defaultTextColor, children: "-" });
+    return /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.defaultTextColor, children: "-" });
   };
   const renderSoneiumScore = React5.useMemo(() => {
     if (fromTokenInfo.chain_id === 1868 && toTokenInfo.chain_id !== 1868 || fromTokenInfo.chain_id === 1868 && toTokenInfo.chain_id === 1868) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Soneium Score" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, children: "+ 1" })
+        /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Soneium Score" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, children: "+ 1" })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -7649,7 +7686,7 @@ var TxInfo = ({
           alignItems: "center",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              Text,
+              Text2,
               {
                 variant: textVariant,
                 fontSize: ["10px", "12px"],
@@ -7666,7 +7703,7 @@ var TxInfo = ({
                 margin: "0 2px"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, fontSize: ["10px", "12px"], children: "Score" })
+            /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, fontSize: ["10px", "12px"], children: "Score" })
           ]
         }
       );
@@ -7732,7 +7769,7 @@ var TxInfo = ({
         ] }, index);
       }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, children: router });
+    return /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, children: router });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.Collapsible.Root,
@@ -7762,7 +7799,7 @@ var TxInfo = ({
                     h: "14px"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, whiteSpace: "nowrap", children: isRateReversed ? `1 ${toTokenInfo.symbol} = ${fromAmountInUnit} ${fromTokenInfo.symbol}` : `1 ${fromTokenInfo.symbol} = ${toAmountInUnitStr} ${toTokenInfo.symbol}` })
+                /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, whiteSpace: "nowrap", children: isRateReversed ? `1 ${toTokenInfo.symbol} = ${fromAmountInUnit} ${fromTokenInfo.symbol}` : `1 ${fromTokenInfo.symbol} = ${toAmountInUnitStr} ${toTokenInfo.symbol}` })
               ]
             }
           ),
@@ -7784,7 +7821,7 @@ var TxInfo = ({
         /* @__PURE__ */ jsxRuntime.jsx(react.Collapsible.Content, { w: "100%", pb: 1.5, color: theme.defaultTextColor, children: /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { w: "100%", align: "start", fontSize: "xs", gap: 3, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { bg: theme.defaultBgColor, p: 3, borderRadius: "12px", w: "100%", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Price Impact" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Price Impact" }),
               /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
                 renderPriceImpactPercentage(),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -7814,14 +7851,14 @@ var TxInfo = ({
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Slippage" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: textVariant, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Slippage" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Text2, { variant: textVariant, children: [
                 formatSlippage(slippage),
                 "%"
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Min. Received" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Min. Received" }),
               /* @__PURE__ */ jsxRuntime.jsx(react.HStack, { gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
                 TokenAmountText,
                 {
@@ -7834,10 +7871,10 @@ var TxInfo = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(react.VStack, { bg: theme.defaultBgColor, p: 3, borderRadius: "12px", w: "100%", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Estimated Time" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Estimated Time" }),
               /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { boxSize: "14px", children: /* @__PURE__ */ jsxRuntime.jsx(TimeIcon, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: textVariant, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Text2, { variant: textVariant, children: [
                   "~",
                   estimatedTime,
                   "s"
@@ -7845,11 +7882,11 @@ var TxInfo = ({
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Recipient Address" }),
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, children: sliceAddress(recipient) })
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Recipient Address" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, children: sliceAddress(recipient) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "AI Router" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "AI Router" }),
               renderAiRouter()
             ] }),
             renderSoneiumScore
@@ -8256,10 +8293,6 @@ var DifferentAddressDialog = ({
   );
 };
 var DifferentAddressDialog_default = DifferentAddressDialog;
-var useRouter = () => ({ push: (_url) => {
-}, replace: (_url) => {
-} });
-var usePathname = () => "";
 var FormBody = ({
   getQuote,
   quoteInfo,
@@ -8271,6 +8304,7 @@ var FormBody = ({
   refetchQuote,
   config
 }) => {
+  const { theme } = useWidgetTheme();
   const {
     fromAmount,
     toAmount,
@@ -8286,14 +8320,14 @@ var FormBody = ({
   } = useSwapAndBridgeContextStore();
   const { chains } = useChainsStore();
   const { tokens } = useTokensStore();
-  const { replace: replaceLink } = useRouter();
-  const pathname = usePathname();
-  const { isTrendingOpen, setTrendingClientReact, setIsTrendingLonger } = { isTrendingOpen: false, setTrendingClientReact: (_v) => {
-  }, setIsTrendingLonger: (_v) => {
-  } };
-  const isMobile = react.useBreakpointValue({ base: true, md: false });
   const [isFromHyperChain, setIsFromHyperChain] = React5.useState(false);
   const [isToHyperChain, setIsToHyperChain] = React5.useState(false);
+  const pathname = typeof window !== "undefined" ? window.location.pathname : "";
+  const replaceLink = React5.useCallback((url) => {
+    if (typeof window !== "undefined") {
+      window.history.replaceState(null, "", url);
+    }
+  }, []);
   const updateSearchParams = React5.useCallback(
     (params) => {
       if (typeof window === "undefined") return;
@@ -8432,20 +8466,24 @@ var FormBody = ({
     address,
     isToHyperChain
   );
-  const fromTokenBalanceHyper = {
+  const fromTokenBalanceHyper = React5.useMemo(() => ({
     decimals: 6,
     formatted: fromTokenBalanceHyperBack?.withdrawable,
     symbol: "USDC",
     value: toBigInt(
-      fromTokenBalanceHyperBack?.withdrawable ? fromTokenBalanceHyperBack?.withdrawable : "0")
-  };
-  const toTokenBalanceHyper = {
+      fromTokenBalanceHyperBack?.withdrawable ? fromTokenBalanceHyperBack?.withdrawable : "0",
+      6
+    )
+  }), [fromTokenBalanceHyperBack?.withdrawable]);
+  const toTokenBalanceHyper = React5.useMemo(() => ({
     decimals: 6,
     formatted: toTokenBalanceHyperBack?.withdrawable,
     symbol: "USDC",
     value: toBigInt(
-      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0")
-  };
+      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0",
+      6
+    )
+  }), [toTokenBalanceHyperBack?.withdrawable]);
   React5.useEffect(() => {
     if (fromTokenInfo.chain_id === hyperliquidChainId) {
       setIsFromHyperChain(true);
@@ -8802,15 +8840,6 @@ var FormBody = ({
   const handleToAmountChange = (value) => {
     setToAmount(value);
   };
-  React5.useEffect(() => {
-    document.getElementById("js_main_form");
-  }, [
-    isMobile,
-    isTrendingOpen,
-    setTrendingClientReact,
-    quoteInfo,
-    setIsTrendingLonger
-  ]);
   React5.useEffect(() => {
     const refetchQuote2 = async () => {
       await getQuote({
@@ -8866,7 +8895,7 @@ var FormBody = ({
               transform: ["translate(-50%, -100%)", "translate(-50%, -82.5%)"],
               cursor: toTokenInfo.chain_id === hyperliquidChainId ? "default" : "pointer",
               onClick: handleSwitchTokens,
-              color: "#81728C",
+              color: theme.weakTextColor,
               boxSize: {
                 base: "20px",
                 md: "30px"
@@ -9159,7 +9188,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                       boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
                     },
                     content: /* @__PURE__ */ jsxRuntime.jsx(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content8",
@@ -9194,7 +9223,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                     top: 0,
                     right: 0,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content9",
@@ -9225,7 +9254,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                       borderRadius: "10px",
                       onClick: () => handlePresetClick(presetValue),
                       children: /* @__PURE__ */ jsxRuntime.jsxs(
-                        Text,
+                        Text2,
                         {
                           variant: {
                             base: "content9",
@@ -9313,7 +9342,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content9",
@@ -9442,7 +9471,7 @@ var FormTop = ({
                 textAlign: "center",
                 lineHeight: "28px",
                 fontSize: "10px",
-                color: countdown <= 10 ? "#FF4D4F" : "#81728C",
+                color: countdown <= 10 ? theme.defaultTextColor : theme.highlightTextColor,
                 children: isPolling && !hideCountdown && countdown > 0 ? countdown : ""
               }
             )
@@ -9497,7 +9526,7 @@ var Timer = ({ stop, onTick }) => {
     }
   }, [stop]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Text,
+    Text2,
     {
       variant: {
         base: "content8",
@@ -9879,7 +9908,7 @@ var TxState = ({
     if (isSolanaTransaction && solanaFromTxHash) {
       if (solanaStatus === "confirmed") {
         return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { href: getSolanaTxLink(solanaFromTxHash), target: "_blank", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -9897,7 +9926,7 @@ var TxState = ({
       }
       if (solanaStatus === "failed") {
         return /* @__PURE__ */ jsxRuntime.jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -9909,7 +9938,7 @@ var TxState = ({
         );
       }
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -9927,7 +9956,7 @@ var TxState = ({
           href: getTxLink(fromTxHash, fromTokenInfo.chain_id),
           target: "_blank",
           children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Text,
+            Text2,
             {
               variant: {
                 base: "content9",
@@ -9947,7 +9976,7 @@ var TxState = ({
     }
     if (fromTxHash && receiptStatus === "failed" || isFetched) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -9960,7 +9989,7 @@ var TxState = ({
     }
     if (isTransactionBlocked) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -9972,7 +10001,7 @@ var TxState = ({
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Text,
+      Text2,
       {
         variant: {
           base: "content9",
@@ -10122,7 +10151,7 @@ var TxState = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
+            Text2,
             {
               variant: {
                 base: "content8",
@@ -10134,7 +10163,7 @@ var TxState = ({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content8",
@@ -10186,6 +10215,7 @@ var TxState = ({
               md: "16px"
             },
             w: "100%",
+            backgroundColor: theme.assistBgColor,
             children: /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { w: "100%", justify: "space-between", gap: 1, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 BoxWithBg,
@@ -10229,6 +10259,7 @@ var TxState = ({
                     base: "20px",
                     md: "32px"
                   },
+                  color: theme.weakTextColor,
                   as: ArrowRightIcon
                 }
               ),
@@ -10275,7 +10306,7 @@ var TxState = ({
                           ),
                           target: "_blank",
                           children: /* @__PURE__ */ jsxRuntime.jsxs(
-                            Text,
+                            Text2,
                             {
                               variant: {
                                 base: "content9",
@@ -10292,7 +10323,7 @@ var TxState = ({
                           )
                         }
                       ) : /* @__PURE__ */ jsxRuntime.jsx(
-                        Text,
+                        Text2,
                         {
                           variant: {
                             base: "content9",
@@ -10326,7 +10357,7 @@ var TxState = ({
                 /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: DateIcon }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Text,
+                    Text2,
                     {
                       variant: {
                         base: "content8",
@@ -10338,7 +10369,7 @@ var TxState = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  Text,
+                  Text2,
                   {
                     variant: {
                       base: "content8",
@@ -10353,7 +10384,7 @@ var TxState = ({
                 /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: TimeIcon }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Text,
+                    Text2,
                     {
                       variant: {
                         base: "content8",
@@ -10376,7 +10407,7 @@ var TxState = ({
                 /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: 1, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { as: MoneyIcon }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Text,
+                    Text2,
                     {
                       variant: {
                         base: "content8",
@@ -10388,7 +10419,7 @@ var TxState = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  Text,
+                  Text2,
                   {
                     variant: {
                       base: "content8",
@@ -10961,7 +10992,7 @@ var MainForm = ({ config }) => {
               href: "https://github.com/wheelx-fi/wheelx-contracts/blob/main/audits/ABDK_WheelX_WheelXContracts_v_1_0.pdf",
               target: "_blank",
               children: /* @__PURE__ */ jsxRuntime.jsxs(
-                Text,
+                Text2,
                 {
                   color: "#5D6270",
                   display: "flex",