@wheelx-widget/widget 0.1.4 → 0.1.5

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import * as React5 from 'react';
 import React5__default, { createContext, memo, useState, useMemo, useRef, useEffect, useContext, createElement, useCallback } from 'react';
+import { defineRecipe, chakra, Tooltip as Tooltip$1, Portal, VStack, Box, HStack, InputGroup, Input, Icon, Image, useBreakpointValue, Dialog, Spinner, Link, Text, Button, Popover, Collapsible, useDisclosure } from '@chakra-ui/react';
 import { useQuery, QueryClient, QueryClientProvider, useMutation } from '@tanstack/react-query';
 import { useUserWallets, DynamicContextProvider, useRpcProviders, useTokenBalances, ChainEnum, useDynamicContext, useDynamicModals, useIsLoggedIn } from '@dynamic-labs/sdk-react-core';
 import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
@@ -11,7 +12,6 @@ import { ThemeProvider } from '@emotion/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import axios6, { AxiosError } from 'axios';
 import { create } from 'zustand';
-import { defineRecipe, chakra, Tooltip as Tooltip$1, Portal, VStack, Box, HStack, InputGroup, Input, Icon, Image, useBreakpointValue, Dialog, Spinner, Link, Button, Popover, Collapsible, useDisclosure } from '@chakra-ui/react';
 import { Fraction, RoundingMode } from 'bi-fraction';
 import { zeroAddress, createPublicClient, http, parseUnits, erc20Abi, formatUnits, isAddress, hexToString, createClient, custom } from 'viem';
 import { base, soneium, ink, bsc } from 'viem/chains';
@@ -450,6 +450,37 @@ function WalletConnectionStateSync() {
   useSyncWalletConnectedStore();
   return null;
 }
+function LoadingSkeleton() {
+  const { theme } = useWidgetTheme();
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(
+          Box,
+          {
+            w: "40px",
+            h: "40px",
+            borderRadius: "full",
+            bg: theme.defaultBorderColor,
+            opacity: 0.4,
+            animation: "pulse 1.5s ease-in-out infinite"
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { fontSize: "14px", color: theme.defaultTextColor, children: "Loading chains and tokens..." })
+      ]
+    }
+  );
+}
 function ChainsAndTokensLoader({ children, config }) {
   const { data } = useChainsAndTokens(true);
   const { setChains, setSlippagePolicies } = useChainsStore();
@@ -506,7 +537,7 @@ function ChainsAndTokensLoader({ children, config }) {
   }, [filteredChains, filteredTokens, data, setChains, setTokens, setSlippagePolicies]);
   const isReady = filteredChains && filteredTokens;
   if (!isReady) {
-    return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "200px" }, children: /* @__PURE__ */ jsx("span", { children: "Loading chains and tokens..." }) });
+    return /* @__PURE__ */ jsx(LoadingSkeleton, {});
   }
   return /* @__PURE__ */ jsx(FavoritesProvider, { children: /* @__PURE__ */ jsxs(TokenFavoritesProvider, { children: [
     /* @__PURE__ */ jsx(WalletConnectionStateSync, {}),
@@ -2834,13 +2865,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 createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2862,7 +2897,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" />` }
@@ -3218,7 +3253,7 @@ var textRecipe = defineRecipe({
   }
 });
 var Heading = chakra("h2", headingRecipe);
-var Text = chakra("p", textRecipe);
+var Text2 = chakra("p", textRecipe);
 var isTouchDevice = () => {
   if (typeof window === "undefined") return false;
   return "ontouchstart" in window || navigator.maxTouchPoints > 0;
@@ -3895,7 +3930,7 @@ var FormButton = ({
   const renderButton = () => {
     if (errorMessage || quoteMessage) {
       return /* @__PURE__ */ jsx(Button, { ...buttonStyles, disabled: true, bg: theme.disabledButtonBg, children: /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -3961,7 +3996,7 @@ var FormButton = ({
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    Text,
+                    Text2,
                     {
                       position: "absolute",
                       w: "28px",
@@ -3976,7 +4011,7 @@ var FormButton = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(Text, { children: "AI is Thinking the Best Price" })
+            /* @__PURE__ */ jsx(Text2, { children: "AI is Thinking the Best Price" })
           ] }) })
         }
       );
@@ -4572,7 +4607,7 @@ var Network = ({
                 }
               ),
               /* @__PURE__ */ jsxs(
-                Text,
+                Text2,
                 {
                   variant: {
                     base: "content7",
@@ -4707,7 +4742,7 @@ var TokenAmountText = ({
   });
   const leadingZeros = countLeadingZerosAfterDecimal(_amount);
   if (leadingZeros > 5) {
-    return /* @__PURE__ */ jsxs(Text, { variant: "content8", ...props, children: [
+    return /* @__PURE__ */ jsxs(Text2, { variant: "content8", ...props, children: [
       prefix,
       " ",
       _amount.slice(0, 3),
@@ -4726,7 +4761,7 @@ var TokenAmountText = ({
       suffix
     ] });
   }
-  return /* @__PURE__ */ jsxs(Text, { variant: "content7", ...props, children: [
+  return /* @__PURE__ */ jsxs(Text2, { variant: "content7", ...props, children: [
     prefix,
     " ",
     _amount,
@@ -5039,7 +5074,7 @@ var TokenAndAddress = ({
               )
             ] }),
             /* @__PURE__ */ jsx(
-              Text,
+              Text2,
               {
                 variant: {
                   base: "content9",
@@ -5067,7 +5102,7 @@ var TokenAndAddress = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            Text,
+            Text2,
             {
               variant: {
                 base: "content9",
@@ -5271,7 +5306,7 @@ var TokenList = ({
         }
       } else {
         return /* @__PURE__ */ jsx(HStack, { w: "100%", h: "50px", justify: "center", align: "center", children: /* @__PURE__ */ jsx(
-          Text,
+          Text2,
           {
             color: theme.weakTextColor,
             variant: {
@@ -5370,7 +5405,7 @@ var TokenList = ({
           cursor: "pointer",
           children: [
             /* @__PURE__ */ jsx(Icon, { as: item.icon, boxSize: "14px" }),
-            /* @__PURE__ */ jsx(Text, { children: item.name })
+            /* @__PURE__ */ jsx(Text2, { children: item.name })
           ]
         },
         index
@@ -5670,7 +5705,7 @@ var MobileContent = memo(function MobileContent2({
                     objectFit: "cover"
                   }
                 ) }),
-                /* @__PURE__ */ jsx(Icon, { as: ArrowDownIcon, boxSize: "16px" })
+                /* @__PURE__ */ jsx(Icon, { as: ArrowDownIcon, boxSize: "16px", color: theme.defaultTextColor })
               ]
             }
           )
@@ -5726,10 +5761,10 @@ var MobileContent = memo(function MobileContent2({
                       children: [
                         /* @__PURE__ */ jsx(AllChainsIcon, {}),
                         /* @__PURE__ */ jsx(
-                          Text,
+                          Text2,
                           {
                             variant: "content6_1",
-                            color: "brand-grey1",
+                            color: theme.defaultTextColor,
                             whiteSpace: "nowrap",
                             children: "Chains with assets"
                           }
@@ -5741,7 +5776,7 @@ var MobileContent = memo(function MobileContent2({
                 ]
               }
             ),
-            !isPreconfigured && /* @__PURE__ */ jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Popular" }),
+            !isPreconfigured && /* @__PURE__ */ jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Popular" }),
             /* @__PURE__ */ jsxs(VStack, { w: "100%", align: "start", gap: 0, children: [
               popularChains?.map((chain) => /* @__PURE__ */ jsx(
                 Network,
@@ -5777,7 +5812,7 @@ var MobileContent = memo(function MobileContent2({
                 chain.chain_id + "fav-chains"
               ))
             ] }),
-            !isPreconfigured && /* @__PURE__ */ jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Chains (A-Z)" }),
+            !isPreconfigured && /* @__PURE__ */ jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Chains (A-Z)" }),
             /* @__PURE__ */ jsx(VStack, { w: "100%", align: "start", gap: 0, children: orderedChains?.filter((chain) => chain.is_testnet !== true)?.map((chain) => /* @__PURE__ */ jsx(
               Network,
               {
@@ -5794,7 +5829,7 @@ var MobileContent = memo(function MobileContent2({
               chain.chain_id + "ordered-chains"
             )) }),
             !isSelectingFromToken && !isPreconfigured && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Prediction" }),
+              /* @__PURE__ */ jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Prediction" }),
               orderedPredictionChains?.map((chain) => /* @__PURE__ */ jsx(
                 Network,
                 {
@@ -5812,7 +5847,7 @@ var MobileContent = memo(function MobileContent2({
                 chain.chain_id + "prediction-chains"
               ))
             ] }),
-            !isPreconfigured && /* @__PURE__ */ jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
+            !isPreconfigured && /* @__PURE__ */ jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
             orderedChains?.filter((chain) => chain.is_testnet === true)?.map((chain) => /* @__PURE__ */ jsx(
               Network,
               {
@@ -6006,7 +6041,7 @@ var DesktopContent = ({
                           children: [
                             /* @__PURE__ */ jsx(AllChainsIcon, {}),
                             /* @__PURE__ */ jsx(
-                              Text,
+                              Text2,
                               {
                                 variant: "content6_1",
                                 color: theme.defaultTextColor,
@@ -6033,7 +6068,7 @@ var DesktopContent = ({
                   },
                   chain.chain_id + "search-chains"
                 )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  !isPreconfigured && /* @__PURE__ */ jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", mb: 2, children: "Popular" }),
+                  !isPreconfigured && /* @__PURE__ */ jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", mb: 2, children: "Popular" }),
                   popularChains?.map((chain) => /* @__PURE__ */ jsx(
                     Network,
                     {
@@ -6061,7 +6096,7 @@ var DesktopContent = ({
                     },
                     chain.chain_id + "fav-chains"
                   )),
-                  !isPreconfigured && /* @__PURE__ */ jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Chains (A-Z)" }),
+                  !isPreconfigured && /* @__PURE__ */ 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__ */ jsx(
                     Network,
                     {
@@ -6077,7 +6112,7 @@ var DesktopContent = ({
                   )),
                   !isSelectingFromToken && !isPreconfigured && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
-                      Text,
+                      Text2,
                       {
                         px: 2,
                         color: theme.weakTextColor,
@@ -6103,7 +6138,7 @@ var DesktopContent = ({
                       chain.chain_id + "prediction-chains"
                     ))
                   ] }),
-                  !isPreconfigured && /* @__PURE__ */ jsx(Text, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
+                  !isPreconfigured && /* @__PURE__ */ jsx(Text2, { px: 2, color: theme.weakTextColor, variant: "content7", my: 2, children: "Testnet" }),
                   orderedChains?.filter((chain) => chain.is_testnet === true)?.map((chain) => /* @__PURE__ */ jsx(
                     Network,
                     {
@@ -6533,7 +6568,7 @@ var TokenInfoCom = ({ tokenInfo, priority = false }) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -6614,7 +6649,9 @@ var TokenSelectAndInput = ({
   const toTokenBalanceHyper = {
     formatted: toTokenBalanceHyperBack?.withdrawable,
     value: toBigInt(
-      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0")
+      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0",
+      6
+    )
   };
   useEffect(() => {
     if (!isFrom) {
@@ -6803,7 +6840,7 @@ var TokenSelectAndInput = ({
         const loss = -(+toAmountToUsd - +fromAmountToUsd) / +fromAmountToUsd;
         if (loss >= 0.1) {
           return /* @__PURE__ */ jsx(
-            Text,
+            Text2,
             {
               as: "span",
               color: "#ff4267",
@@ -6838,7 +6875,7 @@ var TokenSelectAndInput = ({
     return /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
       renderSolanaWalletIcon(),
       /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: "content8",
           backgroundColor: theme.highlightBgColor,
@@ -6855,7 +6892,7 @@ var TokenSelectAndInput = ({
     return /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
       walletIcon,
       /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: "content8",
           backgroundColor: theme.highlightBgColor,
@@ -6874,7 +6911,7 @@ var TokenSelectAndInput = ({
           return /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
             walletIcon,
             /* @__PURE__ */ jsx(
-              Text,
+              Text2,
               {
                 variant: "content8",
                 backgroundColor: theme.assistBgColor,
@@ -6888,7 +6925,7 @@ var TokenSelectAndInput = ({
         }
         return /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
           /* @__PURE__ */ jsx(
-            Text,
+            Text2,
             {
               variant: "content8",
               backgroundColor: theme.assistBgColor,
@@ -6917,7 +6954,7 @@ var TokenSelectAndInput = ({
               cursor: "pointer",
               children: [
                 /* @__PURE__ */ jsx(
-                  Text,
+                  Text2,
                   {
                     variant: "content8",
                     backgroundColor: theme.assistBgColor,
@@ -6956,7 +6993,7 @@ var TokenSelectAndInput = ({
               cursor: "pointer",
               children: [
                 /* @__PURE__ */ jsx(
-                  Text,
+                  Text2,
                   {
                     variant: "content8",
                     backgroundColor: theme.assistBgColor,
@@ -6990,7 +7027,7 @@ var TokenSelectAndInput = ({
       return /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
         walletIcon,
         /* @__PURE__ */ jsx(
-          Text,
+          Text2,
           {
             variant: "content8",
             backgroundColor: theme.assistBgColor,
@@ -7050,7 +7087,7 @@ var TokenSelectAndInput = ({
                     border: "1px solid",
                     borderColor: theme.highlightTextColor,
                     onClick: () => handleQuickInput("50%"),
-                    children: /* @__PURE__ */ jsx(Text, { variant: "content9", color: theme.highlightTextColor, children: "50%" })
+                    children: /* @__PURE__ */ jsx(Text2, { variant: "content9", color: theme.highlightTextColor, children: "50%" })
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -7063,10 +7100,10 @@ var TokenSelectAndInput = ({
                     borderRadius: "4px",
                     bg: theme.highlightButtonBg,
                     onClick: () => handleQuickInput("Max"),
-                    children: /* @__PURE__ */ jsx(Text, { variant: "content9", color: theme.highlightButtonText, children: "Max" })
+                    children: /* @__PURE__ */ jsx(Text2, { variant: "content9", color: theme.highlightButtonText, children: "Max" })
                   }
                 ),
-                /* @__PURE__ */ jsxs(Text, { variant: "content8", color: theme.weakTextColor, children: [
+                /* @__PURE__ */ jsxs(Text2, { variant: "content8", color: theme.weakTextColor, children: [
                   "Balance:",
                   " ",
                   tokenInfo.isSolana && solanaBalance ? solanaBalance.formatted : balance
@@ -7183,7 +7220,7 @@ var TokenSelectAndInput = ({
                       }
                     ),
                     /* @__PURE__ */ jsxs(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content9",
@@ -7221,10 +7258,10 @@ var TokenSelectAndInput = ({
             bottom: ["6px", "8px"],
             left: 0,
             paddingRight: [2, 4],
-            children: !isFrom && !isDepositPlatformToken && /* @__PURE__ */ jsx(Fragment, { children: tokenInfo.isSolana ? solanaWalletAddress && /* @__PURE__ */ jsxs(Text, { variant: "content8", children: [
+            children: !isFrom && !isDepositPlatformToken && /* @__PURE__ */ jsx(Fragment, { children: tokenInfo.isSolana ? solanaWalletAddress && /* @__PURE__ */ jsxs(Text2, { variant: "content8", children: [
               "Balance: ",
               displayBalance
-            ] }) : address && /* @__PURE__ */ jsxs(Text, { variant: "content8", children: [
+            ] }) : address && /* @__PURE__ */ jsxs(Text2, { variant: "content8", children: [
               "Balance: ",
               displayBalance
             ] }) })
@@ -7318,7 +7355,7 @@ var TipsContent = ({
   const renderFee = (fee) => {
     if (fee === "0") {
       return /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: "content9",
           color: "white",
@@ -7330,7 +7367,7 @@ var TipsContent = ({
       );
     }
     return /* @__PURE__ */ jsxs(
-      Text,
+      Text2,
       {
         variant: {
           base: "content9",
@@ -7355,7 +7392,7 @@ var TipsContent = ({
     const sif = +swapImpactFee();
     if (toAmountToUsd === null) {
       return /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7368,7 +7405,7 @@ var TipsContent = ({
     }
     if (sif > 0 || sif === 0) {
       return /* @__PURE__ */ jsxs(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7383,7 +7420,7 @@ var TipsContent = ({
       );
     }
     return /* @__PURE__ */ jsxs(
-      Text,
+      Text2,
       {
         variant: {
           base: "content9",
@@ -7418,7 +7455,7 @@ var TipsContent = ({
       ),
       /* @__PURE__ */ jsxs(HStack, { justify: "space-between", w: "100%", children: [
         /* @__PURE__ */ jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -7432,7 +7469,7 @@ var TipsContent = ({
       ] }),
       /* @__PURE__ */ jsxs(HStack, { justify: "space-between", w: "100%", children: [
         /* @__PURE__ */ jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -7443,7 +7480,7 @@ var TipsContent = ({
           }
         ),
         points === "0" && !fromTokenInfo.isSolana ? /* @__PURE__ */ jsx(
-          Text,
+          Text2,
           {
             variant: "content9",
             color: "white",
@@ -7482,7 +7519,7 @@ var TipsContent = ({
     ),
     /* @__PURE__ */ jsxs(HStack, { justify: "space-between", w: "100%", children: [
       /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7496,7 +7533,7 @@ var TipsContent = ({
     ] }),
     /* @__PURE__ */ jsxs(HStack, { justify: "space-between", w: "100%", children: [
       /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7513,7 +7550,7 @@ var TipsContent = ({
     ] }),
     /* @__PURE__ */ jsxs(HStack, { justify: "space-between", w: "100%", children: [
       /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -7524,7 +7561,7 @@ var TipsContent = ({
         }
       ),
       points === "0" && !fromTokenInfo.isSolana ? /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: "content9",
           color: "white",
@@ -7581,7 +7618,7 @@ var TxInfo = ({
   const renderPriceImpactPercentage = () => {
     if (priceImpact.bridgeFee === "0" && priceImpact.dstGasFee === "0" && priceImpact.swapFee === "0") {
       return /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: "content9",
           color: theme.highlightButtonText,
@@ -7596,17 +7633,17 @@ var TxInfo = ({
       const inPrice = Number(fromAmountToUsd.replace(/,/g, ""));
       const outPrice = Number(toAmountToUsd.replace(/,/g, ""));
       if (outPrice > inPrice) {
-        return /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.defaultTextColor, children: `+${((outPrice - inPrice) / inPrice * 100).toFixed(2)}%` });
+        return /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.defaultTextColor, children: `+${((outPrice - inPrice) / inPrice * 100).toFixed(2)}%` });
       }
-      return /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.defaultTextColor, children: `-${((inPrice - outPrice) / inPrice * 100).toFixed(2)}%` });
+      return /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.defaultTextColor, children: `-${((inPrice - outPrice) / inPrice * 100).toFixed(2)}%` });
     }
-    return /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.defaultTextColor, children: "-" });
+    return /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.defaultTextColor, children: "-" });
   };
   const renderSoneiumScore = useMemo(() => {
     if (fromTokenInfo.chain_id === 1868 && toTokenInfo.chain_id !== 1868 || fromTokenInfo.chain_id === 1868 && toTokenInfo.chain_id === 1868) {
       return /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Soneium Score" }),
-        /* @__PURE__ */ jsx(Text, { variant: textVariant, children: "+ 1" })
+        /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Soneium Score" }),
+        /* @__PURE__ */ jsx(Text2, { variant: textVariant, children: "+ 1" })
       ] });
     }
     return /* @__PURE__ */ jsx(Fragment, {});
@@ -7625,7 +7662,7 @@ var TxInfo = ({
           alignItems: "center",
           children: [
             /* @__PURE__ */ jsx(
-              Text,
+              Text2,
               {
                 variant: textVariant,
                 fontSize: ["10px", "12px"],
@@ -7642,7 +7679,7 @@ var TxInfo = ({
                 margin: "0 2px"
               }
             ),
-            /* @__PURE__ */ jsx(Text, { variant: textVariant, fontSize: ["10px", "12px"], children: "Score" })
+            /* @__PURE__ */ jsx(Text2, { variant: textVariant, fontSize: ["10px", "12px"], children: "Score" })
           ]
         }
       );
@@ -7708,7 +7745,7 @@ var TxInfo = ({
         ] }, index);
       }) });
     }
-    return /* @__PURE__ */ jsx(Text, { variant: textVariant, children: router });
+    return /* @__PURE__ */ jsx(Text2, { variant: textVariant, children: router });
   };
   return /* @__PURE__ */ jsxs(
     Collapsible.Root,
@@ -7738,7 +7775,7 @@ var TxInfo = ({
                     h: "14px"
                   }
                 ),
-                /* @__PURE__ */ jsx(Text, { variant: textVariant, whiteSpace: "nowrap", children: isRateReversed ? `1 ${toTokenInfo.symbol} = ${fromAmountInUnit} ${fromTokenInfo.symbol}` : `1 ${fromTokenInfo.symbol} = ${toAmountInUnitStr} ${toTokenInfo.symbol}` })
+                /* @__PURE__ */ jsx(Text2, { variant: textVariant, whiteSpace: "nowrap", children: isRateReversed ? `1 ${toTokenInfo.symbol} = ${fromAmountInUnit} ${fromTokenInfo.symbol}` : `1 ${fromTokenInfo.symbol} = ${toAmountInUnitStr} ${toTokenInfo.symbol}` })
               ]
             }
           ),
@@ -7760,7 +7797,7 @@ var TxInfo = ({
         /* @__PURE__ */ jsx(Collapsible.Content, { w: "100%", pb: 1.5, color: theme.defaultTextColor, children: /* @__PURE__ */ jsxs(VStack, { w: "100%", align: "start", fontSize: "xs", gap: 3, children: [
           /* @__PURE__ */ jsxs(VStack, { bg: theme.defaultBgColor, p: 3, borderRadius: "12px", w: "100%", children: [
             /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Price Impact" }),
+              /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Price Impact" }),
               /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
                 renderPriceImpactPercentage(),
                 /* @__PURE__ */ jsx(
@@ -7790,14 +7827,14 @@ var TxInfo = ({
               ] })
             ] }),
             /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Slippage" }),
-              /* @__PURE__ */ jsxs(Text, { variant: textVariant, children: [
+              /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Slippage" }),
+              /* @__PURE__ */ jsxs(Text2, { variant: textVariant, children: [
                 formatSlippage(slippage),
                 "%"
               ] })
             ] }),
             /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Min. Received" }),
+              /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Min. Received" }),
               /* @__PURE__ */ jsx(HStack, { gap: 1, children: /* @__PURE__ */ jsx(
                 TokenAmountText,
                 {
@@ -7810,10 +7847,10 @@ var TxInfo = ({
           ] }),
           /* @__PURE__ */ jsxs(VStack, { bg: theme.defaultBgColor, p: 3, borderRadius: "12px", w: "100%", children: [
             /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Estimated Time" }),
+              /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Estimated Time" }),
               /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
                 /* @__PURE__ */ jsx(Icon, { boxSize: "14px", children: /* @__PURE__ */ jsx(TimeIcon, {}) }),
-                /* @__PURE__ */ jsxs(Text, { variant: textVariant, children: [
+                /* @__PURE__ */ jsxs(Text2, { variant: textVariant, children: [
                   "~",
                   estimatedTime,
                   "s"
@@ -7821,11 +7858,11 @@ var TxInfo = ({
               ] })
             ] }),
             /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "Recipient Address" }),
-              /* @__PURE__ */ jsx(Text, { variant: textVariant, children: sliceAddress(recipient) })
+              /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "Recipient Address" }),
+              /* @__PURE__ */ jsx(Text2, { variant: textVariant, children: sliceAddress(recipient) })
             ] }),
             /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", children: [
-              /* @__PURE__ */ jsx(Text, { variant: textVariant, color: theme.weakTextColor, children: "AI Router" }),
+              /* @__PURE__ */ jsx(Text2, { variant: textVariant, color: theme.weakTextColor, children: "AI Router" }),
               renderAiRouter()
             ] }),
             renderSoneiumScore
@@ -8232,10 +8269,6 @@ var DifferentAddressDialog = ({
   );
 };
 var DifferentAddressDialog_default = DifferentAddressDialog;
-var useRouter = () => ({ push: (_url) => {
-}, replace: (_url) => {
-} });
-var usePathname = () => "";
 var FormBody = ({
   getQuote,
   quoteInfo,
@@ -8247,6 +8280,7 @@ var FormBody = ({
   refetchQuote,
   config
 }) => {
+  const { theme } = useWidgetTheme();
   const {
     fromAmount,
     toAmount,
@@ -8262,14 +8296,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 = useBreakpointValue({ base: true, md: false });
   const [isFromHyperChain, setIsFromHyperChain] = useState(false);
   const [isToHyperChain, setIsToHyperChain] = useState(false);
+  const pathname = typeof window !== "undefined" ? window.location.pathname : "";
+  const replaceLink = useCallback((url) => {
+    if (typeof window !== "undefined") {
+      window.history.replaceState(null, "", url);
+    }
+  }, []);
   const updateSearchParams = useCallback(
     (params) => {
       if (typeof window === "undefined") return;
@@ -8408,20 +8442,24 @@ var FormBody = ({
     address,
     isToHyperChain
   );
-  const fromTokenBalanceHyper = {
+  const fromTokenBalanceHyper = 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 = useMemo(() => ({
     decimals: 6,
     formatted: toTokenBalanceHyperBack?.withdrawable,
     symbol: "USDC",
     value: toBigInt(
-      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0")
-  };
+      toTokenBalanceHyperBack?.withdrawable ? toTokenBalanceHyperBack?.withdrawable : "0",
+      6
+    )
+  }), [toTokenBalanceHyperBack?.withdrawable]);
   useEffect(() => {
     if (fromTokenInfo.chain_id === hyperliquidChainId) {
       setIsFromHyperChain(true);
@@ -8778,15 +8816,6 @@ var FormBody = ({
   const handleToAmountChange = (value) => {
     setToAmount(value);
   };
-  useEffect(() => {
-    document.getElementById("js_main_form");
-  }, [
-    isMobile,
-    isTrendingOpen,
-    setTrendingClientReact,
-    quoteInfo,
-    setIsTrendingLonger
-  ]);
   useEffect(() => {
     const refetchQuote2 = async () => {
       await getQuote({
@@ -8842,7 +8871,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"
@@ -9135,7 +9164,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                       boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
                     },
                     content: /* @__PURE__ */ jsx(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content8",
@@ -9170,7 +9199,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                     top: 0,
                     right: 0,
                     children: /* @__PURE__ */ jsx(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content9",
@@ -9201,7 +9230,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                       borderRadius: "10px",
                       onClick: () => handlePresetClick(presetValue),
                       children: /* @__PURE__ */ jsxs(
-                        Text,
+                        Text2,
                         {
                           variant: {
                             base: "content9",
@@ -9289,7 +9318,7 @@ var SlippageSettings = ({ refetchQuote }) => {
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      Text,
+                      Text2,
                       {
                         variant: {
                           base: "content9",
@@ -9418,7 +9447,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 : ""
               }
             )
@@ -9473,7 +9502,7 @@ var Timer = ({ stop, onTick }) => {
     }
   }, [stop]);
   return /* @__PURE__ */ jsx(
-    Text,
+    Text2,
     {
       variant: {
         base: "content8",
@@ -9855,7 +9884,7 @@ var TxState = ({
     if (isSolanaTransaction && solanaFromTxHash) {
       if (solanaStatus === "confirmed") {
         return /* @__PURE__ */ jsx(Link, { href: getSolanaTxLink(solanaFromTxHash), target: "_blank", children: /* @__PURE__ */ jsxs(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -9873,7 +9902,7 @@ var TxState = ({
       }
       if (solanaStatus === "failed") {
         return /* @__PURE__ */ jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content9",
@@ -9885,7 +9914,7 @@ var TxState = ({
         );
       }
       return /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -9903,7 +9932,7 @@ var TxState = ({
           href: getTxLink(fromTxHash, fromTokenInfo.chain_id),
           target: "_blank",
           children: /* @__PURE__ */ jsxs(
-            Text,
+            Text2,
             {
               variant: {
                 base: "content9",
@@ -9923,7 +9952,7 @@ var TxState = ({
     }
     if (fromTxHash && receiptStatus === "failed" || isFetched) {
       return /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -9936,7 +9965,7 @@ var TxState = ({
     }
     if (isTransactionBlocked) {
       return /* @__PURE__ */ jsx(
-        Text,
+        Text2,
         {
           variant: {
             base: "content9",
@@ -9948,7 +9977,7 @@ var TxState = ({
       );
     }
     return /* @__PURE__ */ jsx(
-      Text,
+      Text2,
       {
         variant: {
           base: "content9",
@@ -10098,7 +10127,7 @@ var TxState = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            Text,
+            Text2,
             {
               variant: {
                 base: "content8",
@@ -10110,7 +10139,7 @@ var TxState = ({
           )
         ] }),
         /* @__PURE__ */ jsx(
-          Text,
+          Text2,
           {
             variant: {
               base: "content8",
@@ -10162,6 +10191,7 @@ var TxState = ({
               md: "16px"
             },
             w: "100%",
+            backgroundColor: theme.assistBgColor,
             children: /* @__PURE__ */ jsxs(HStack, { w: "100%", justify: "space-between", gap: 1, children: [
               /* @__PURE__ */ jsx(
                 BoxWithBg,
@@ -10205,6 +10235,7 @@ var TxState = ({
                     base: "20px",
                     md: "32px"
                   },
+                  color: theme.weakTextColor,
                   as: ArrowRightIcon
                 }
               ),
@@ -10251,7 +10282,7 @@ var TxState = ({
                           ),
                           target: "_blank",
                           children: /* @__PURE__ */ jsxs(
-                            Text,
+                            Text2,
                             {
                               variant: {
                                 base: "content9",
@@ -10268,7 +10299,7 @@ var TxState = ({
                           )
                         }
                       ) : /* @__PURE__ */ jsx(
-                        Text,
+                        Text2,
                         {
                           variant: {
                             base: "content9",
@@ -10302,7 +10333,7 @@ var TxState = ({
                 /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
                   /* @__PURE__ */ jsx(Icon, { as: DateIcon }),
                   /* @__PURE__ */ jsx(
-                    Text,
+                    Text2,
                     {
                       variant: {
                         base: "content8",
@@ -10314,7 +10345,7 @@ var TxState = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsx(
-                  Text,
+                  Text2,
                   {
                     variant: {
                       base: "content8",
@@ -10329,7 +10360,7 @@ var TxState = ({
                 /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
                   /* @__PURE__ */ jsx(Icon, { as: TimeIcon }),
                   /* @__PURE__ */ jsx(
-                    Text,
+                    Text2,
                     {
                       variant: {
                         base: "content8",
@@ -10352,7 +10383,7 @@ var TxState = ({
                 /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
                   /* @__PURE__ */ jsx(Icon, { as: MoneyIcon }),
                   /* @__PURE__ */ jsx(
-                    Text,
+                    Text2,
                     {
                       variant: {
                         base: "content8",
@@ -10364,7 +10395,7 @@ var TxState = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsx(
-                  Text,
+                  Text2,
                   {
                     variant: {
                       base: "content8",
@@ -10937,7 +10968,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__ */ jsxs(
-                Text,
+                Text2,
                 {
                   color: "#5D6270",
                   display: "flex",