@trustware/sdk-staging 1.1.8-staging.6 → 1.1.8-staging.7

package/dist/widget.mjs

@@ -521,20 +521,12 @@ var init_styles = __esm({
 });
 
 // src/config/defaults.ts
-var DEFAULT_SLIPPAGE, DEFAULT_AUTO_DETECT_PROVIDER, DEFAULT_THEME, DEFAULT_MESSAGES;
+var DEFAULT_SLIPPAGE, DEFAULT_AUTO_DETECT_PROVIDER, DEFAULT_MESSAGES;
 var init_defaults = __esm({
   "src/config/defaults.ts"() {
     "use strict";
     DEFAULT_SLIPPAGE = 1;
     DEFAULT_AUTO_DETECT_PROVIDER = false;
-    DEFAULT_THEME = {
-      primaryColor: "#4F46E5",
-      secondaryColor: "#6366F1",
-      backgroundColor: "#FFFFFF",
-      textColor: "#111827",
-      borderColor: "#E5E7EB",
-      radius: 8
-    };
     DEFAULT_MESSAGES = {
       title: "Trustware SDK",
       description: "Seamlessly bridge assets across chains with Trustware."
@@ -571,7 +563,7 @@ var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
     SDK_NAME = "@trustware/sdk";
-    SDK_VERSION = "1.1.8-staging.6";
+    SDK_VERSION = "1.1.8-staging.7";
     API_ROOT = "https://bv-staging-api.trustware.io";
     GTM_ID = "GTM-TZDGNCXB";
     API_PREFIX = "/api";
@@ -2847,14 +2839,7 @@ function useTrustwareConfig() {
           options: {}
         },
         autoDetectProvider: false,
-        theme: {
-          primaryColor: "#4F46E5",
-          secondaryColor: "#6366F1",
-          backgroundColor: "#FFFFFF",
-          textColor: "#111827",
-          borderColor: "#E5E7EB",
-          radius: 8
-        },
+        theme: "system",
         messages: {
           title: "Trustware SDK",
           description: "Seamlessly bridge assets across chains with Trustware."
@@ -3368,10 +3353,26 @@ function compareChainPopularity(a, b) {
   if (rankA === null && rankB !== null) return 1;
   return 0;
 }
-function sortTokensByPopularity(tokens) {
+function sortTokensByPopularity(tokens, options) {
+  const nativeSet = options?.nativeAddresses ?? /* @__PURE__ */ new Set();
+  const nativeSymbolSet = options?.nativeSymbols ?? /* @__PURE__ */ new Set();
+  const featuredMap = options?.featuredAddresses ?? /* @__PURE__ */ new Map();
+  const getMajorRank = (token) => {
+    const addr = normalizeAddress3(token.address);
+    if (nativeSet.has(addr)) return 0;
+    if (nativeSymbolSet.has(normalizeSymbol(token.symbol))) return 0;
+    if (featuredMap.has(addr)) return 1;
+    return getGroupRank(token) + 2;
+  };
   return tokens.map((token, index) => ({ token, index })).sort((a, b) => {
-    const rankDiff = getGroupRank(a.token) - getGroupRank(b.token);
-    if (rankDiff !== 0) return rankDiff;
+    const majorA = getMajorRank(a.token);
+    const majorB = getMajorRank(b.token);
+    if (majorA !== majorB) return majorA - majorB;
+    if (majorA === 1) {
+      const orderA = featuredMap.get(normalizeAddress3(a.token.address)) ?? 0;
+      const orderB = featuredMap.get(normalizeAddress3(b.token.address)) ?? 0;
+      return orderA - orderB;
+    }
     const chainPopularityDiff = compareChainPopularity(a.token, b.token);
     if (chainPopularityDiff !== 0) return chainPopularityDiff;
     const symbolDiff = compareText(a.token.symbol, b.token.symbol);
@@ -3430,6 +3431,1004 @@ var init_tokenPopularity = __esm({
   }
 });
 
+// src/widget/data/featuredAssets.json
+var featuredAssets_default;
+var init_featuredAssets = __esm({
+  "src/widget/data/featuredAssets.json"() {
+    featuredAssets_default = {
+      "1": {
+        top: [
+          {
+            symbol: "AAVE",
+            address: "0x7fc66500c84a76ad7e9c93437bfc5ac33e2ddae9"
+          },
+          {
+            symbol: "LINK",
+            address: "0x514910771af9ca656af840dff83e8264ecf986ca"
+          },
+          {
+            symbol: "UNI",
+            address: "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984"
+          },
+          {
+            symbol: "CRV",
+            address: "0xd533a949740bb3306d119cc777fa900ba034cd52"
+          },
+          {
+            symbol: "LDO",
+            address: "0x5a98fcbea516cf06857215779fd812ca3bef1b32"
+          },
+          {
+            symbol: "GRT",
+            address: "0xc944e90c64b2c07662a292be6244bdf05cda44a7"
+          },
+          {
+            symbol: "RENDER",
+            address: "0x6de037ef9ad2725eb40118bb1702ebb27e4aeb24"
+          },
+          {
+            symbol: "PENDLE",
+            address: "0x808507121b80c02388fad14726482e061b8da827"
+          },
+          {
+            symbol: "MKR",
+            address: "0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2"
+          },
+          {
+            symbol: "COMP",
+            address: "0xc00e94cb662c3520282e6f5717214004a7f26888"
+          },
+          {
+            symbol: "1INCH",
+            address: "0x111111111117dc0aa78b770fa6a738034120c302"
+          },
+          {
+            symbol: "BAL",
+            address: "0xba100000625a3754423978a60c9317c58a424e3d"
+          },
+          {
+            symbol: "SUSHI",
+            address: "0x6b3595068778dd592e39a122f4f5a5cf09c90fe2"
+          },
+          {
+            symbol: "CAKE",
+            address: "0x152649ea73beab28c5b49b26eb48f7ead6d4c898"
+          },
+          {
+            symbol: "YFI",
+            address: "0x0bc529c00c6401aef6d220be8c6ea1667f6ad93e"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0xdac17f958d2ee523a2206206994597c13d831ec7"
+          },
+          {
+            symbol: "USDC",
+            address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
+          },
+          {
+            symbol: "DAI",
+            address: "0x6b175474e89094c44da98b954eedeac495271d0f"
+          },
+          {
+            symbol: "USDe",
+            address: "0x4c9edd5852cd905f086c759e8383e09bff1e68b3"
+          },
+          {
+            symbol: "PYUSD",
+            address: "0x6c3ea9036406852006290770bedfcaba0e23a0e8"
+          },
+          {
+            symbol: "FDUSD",
+            address: "0xc5f0f7b66764f6ec8c8dff7ba683102295e16409"
+          },
+          {
+            symbol: "USDS",
+            address: "0xdc035d45d973e3ec169d2276ddab16f1e407384f"
+          },
+          {
+            symbol: "EURC",
+            address: "0x1abaea1f7c830bd89acc67ec4af516284b1bc33c"
+          },
+          {
+            symbol: "crvUSD",
+            address: "0xf939e0a03fb07f59a73314e73794be0e57ac1b4e"
+          },
+          {
+            symbol: "TUSD",
+            address: "0x0000000000085d4780b73119b644ae5ecd22b376"
+          }
+        ]
+      },
+      "10": {
+        top: [
+          {
+            symbol: "OP",
+            address: "0x4200000000000000000000000000000000000042"
+          },
+          {
+            symbol: "AAVE",
+            address: "0x76fb31fb4af56892a25e32cfc43de717950c9278"
+          },
+          {
+            symbol: "LINK",
+            address: "0x350a791bfc2c21f9ed5d10980dad2e2638ffa7f6"
+          },
+          {
+            symbol: "CRV",
+            address: "0x0994206dfe8de6ec6920ff4d779b0d950605fb53"
+          },
+          {
+            symbol: "LDO",
+            address: "0xfdb794692724153d1488ccdbe0c56c252596735f"
+          },
+          {
+            symbol: "ZRO",
+            address: "0x6985884c4392d348587b19cb9eaaf157f13271cd"
+          },
+          {
+            symbol: "STG",
+            address: "0x296f55f8fb28e498b858d0bcda06d955b2cb3f97"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x94b008aa00579c1307b0ef2c499ad98a8ce58e58"
+          },
+          {
+            symbol: "USDC",
+            address: "0x0b2c639c533813f4aa9d7837caf62653d097ff85"
+          },
+          {
+            symbol: "DAI",
+            address: "0xda10009cbd5d07dd0cecc66161fc93d7c9000da1"
+          },
+          {
+            symbol: "FRAX",
+            address: "0x2e3d870790dc77a83dd1d18184acc7439a53f475"
+          },
+          {
+            symbol: "LUSD",
+            address: "0xc40f949f8a4e094d1b49a23ea9241d289b7b2819"
+          },
+          {
+            symbol: "MIM",
+            address: "0xb153fb3d196a8eb25522705560ac152eeec57901"
+          },
+          {
+            symbol: "sUSD",
+            address: "0x8c6f28f2f1a3c87f0f938b96d27520d9751ec8d9"
+          }
+        ]
+      },
+      "100": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x4ecaba5870353805a9f068101a40e0f32ed605c6"
+          },
+          {
+            symbol: "USDC",
+            address: "0xddafbb505ad214d7b80b1f830fccc89b60fb7a83"
+          }
+        ]
+      },
+      "1284": {
+        top: [
+          {
+            symbol: "WELL",
+            address: "0x511ab53f793683763e5a8829738301368a2411e3"
+          }
+        ],
+        stables: [
+          {
+            symbol: "xcUSDC",
+            address: "0xffffffff7d2b0b761af01ca8e25242976ac0ad7d"
+          },
+          {
+            symbol: "FRAX",
+            address: "0x322e86852e492a7ee17f28a78c663da38fb33bfb"
+          }
+        ]
+      },
+      "13371": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x68bcc7f1190af20e7b572bcfb431c3ac10a936ab"
+          },
+          {
+            symbol: "USDC",
+            address: "0x6de8acc0d406837030ce4dd28e7c08c5a96a30d2"
+          }
+        ]
+      },
+      "137": {
+        top: [
+          {
+            symbol: "AAVE",
+            address: "0xd6df932a45c0f255f85145f286ea0b292b21c90b"
+          },
+          {
+            symbol: "LINK",
+            address: "0x53e0bca35ec356bd5dddfebbd1fc0fd03fabad39"
+          },
+          {
+            symbol: "UNI",
+            address: "0xb33eaad8d922b1083446dc23f610c2567fb5180f"
+          },
+          {
+            symbol: "CRV",
+            address: "0x172370d5cd63279efa6d502dab29171933a610af"
+          },
+          {
+            symbol: "LDO",
+            address: "0xc3c7d422809852031b44ab29eec9f1eff2a58756"
+          },
+          {
+            symbol: "GRT",
+            address: "0x5fe2b58c013d7601147dcdd68c143a77499f5531"
+          },
+          {
+            symbol: "RENDER",
+            address: "0x61299774020da444af134c82fa83e3810b309991"
+          },
+          {
+            symbol: "ZRO",
+            address: "0x6985884c4392d348587b19cb9eaaf157f13271cd"
+          },
+          {
+            symbol: "STG",
+            address: "0x2f6f07cdcf3588944bf4c42ac74ff24bf56e7590"
+          },
+          {
+            symbol: "MANA",
+            address: "0xa1c57f48f0deb89f569dfbe6e2b7f46d33606fd4"
+          },
+          {
+            symbol: "TEL",
+            address: "0xdf7837de1f2fa4631d716cf2502f8b230f1dcc32"
+          },
+          {
+            symbol: "BONK",
+            address: "0xe5b49820e5a1063f6f4ddf851327b5e8b2301048"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0xc2132d05d31c914a87c6611c10748aeb04b58e8f"
+          },
+          {
+            symbol: "USDC",
+            address: "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359"
+          },
+          {
+            symbol: "DAI",
+            address: "0x8f3cf7ad23cd3cadbd9735aff958023239c6a063"
+          },
+          {
+            symbol: "CRVUSD",
+            address: "0xc4ce1d6f5d98d65ee25cf85e9f2e9dcfee6cb5d6"
+          }
+        ]
+      },
+      "143": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "0x754704bc059f8c67012fed69bc8a327a5aafb603"
+          }
+        ]
+      },
+      "146": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x6047828dc181963ba44974801ff68e538da5eaf9"
+          },
+          {
+            symbol: "USDC",
+            address: "0x29219dd400f2bf60e5a23d13be72b486d4038894"
+          }
+        ]
+      },
+      "1868": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x3a337a6ada9d885b6ad95ec48f9b75f197b5ae35"
+          }
+        ]
+      },
+      "2222": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDt",
+            address: "0x919c1c267bc06a7039e03fcc2ef738525769109c"
+          },
+          {
+            symbol: "MIM",
+            address: "0x471ee749ba270eb4c1165b5ad95e614947f6fceb"
+          }
+        ]
+      },
+      "250": {
+        top: [
+          {
+            symbol: "STG",
+            address: "0x2f6f07cdcf3588944bf4c42ac74ff24bf56e7590"
+          }
+        ],
+        stables: [
+          {
+            symbol: "MIM",
+            address: "0x82f0b8b456c1a451378467398982d4834b6829c1"
+          }
+        ]
+      },
+      "252": {
+        top: [
+          {
+            symbol: "CRV",
+            address: "0x331b9182088e2a7d6d3fe4742aba1fb231aecc56"
+          }
+        ],
+        stables: [
+          {
+            symbol: "frxUSD",
+            address: "0xfc00000000000000000000000000000000000001"
+          }
+        ]
+      },
+      "295": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "0x000000000000000000000000000000000006f89a"
+          }
+        ]
+      },
+      "314": {
+        top: [],
+        stables: [
+          {
+            symbol: "ceUSDC",
+            address: "0x2421db204968a367cc2c866cd057fa754cb84edf"
+          }
+        ]
+      },
+      "3338": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0xf4d9235269a96aadafc9adae454a0618ebe37949"
+          },
+          {
+            symbol: "USDC",
+            address: "0xbba60da06c2c5424f03f7434542280fcad453d10"
+          }
+        ]
+      },
+      "42161": {
+        top: [
+          {
+            symbol: "AAVE",
+            address: "0xba5ddd1f9d7f570dc94a51479a000e3bce967196"
+          },
+          {
+            symbol: "LINK",
+            address: "0xf97f4df75117a78c1a5a0dbb814af92458539fb4"
+          },
+          {
+            symbol: "UNI",
+            address: "0xfa7f8980b0f1e64a2062791cc3b0871572f1f7f0"
+          },
+          {
+            symbol: "CRV",
+            address: "0x11cdb42b0eb46d95f990bedd4695a6e3fa034978"
+          },
+          {
+            symbol: "GRT",
+            address: "0x9623063377ad1b27544c965ccd7342f7ea7e88c7"
+          },
+          {
+            symbol: "PENDLE",
+            address: "0x0c880f6761f1af8d9aa9c466984b80dab9a8c9e8"
+          },
+          {
+            symbol: "SUSHI",
+            address: "0xd4d42f0b6def4ce0383636770ef773390d85c61a"
+          },
+          {
+            symbol: "CAKE",
+            address: "0x1b896893dfc86bb67cf57767298b9073d2c1ba2c"
+          },
+          {
+            symbol: "ZRO",
+            address: "0x6985884c4392d348587b19cb9eaaf157f13271cd"
+          },
+          {
+            symbol: "STG",
+            address: "0x6694340fc020c5e6b96567843da2df01b2ce1eb6"
+          },
+          {
+            symbol: "ARB",
+            address: "0x912ce59144191c1204e64559fe8253a0e49e6548"
+          },
+          {
+            symbol: "cbBTC",
+            address: "0xcbb7c0000ab88b473b1f5afd9ef808440eed33bf"
+          },
+          {
+            symbol: "BONK",
+            address: "0x09199d9a5f4448d0848e4395d065e1ad9c4a1f74"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9"
+          },
+          {
+            symbol: "USDC",
+            address: "0xaf88d065e77c8cc2239327c5edb3a432268e5831"
+          },
+          {
+            symbol: "DAI",
+            address: "0xda10009cbd5d07dd0cecc66161fc93d7c9000da1"
+          },
+          {
+            symbol: "PYUSD",
+            address: "0x46850ad61c2b7d64d08c9c754f45254596696984"
+          },
+          {
+            symbol: "USDD",
+            address: "0x680447595e8b7b3aa1b43beb9f6098c79ac2ab3f"
+          },
+          {
+            symbol: "FRAX",
+            address: "0x17fc002b466eec40dae837fc4be5c67993ddbd6f"
+          },
+          {
+            symbol: "LUSD",
+            address: "0x93b346b6bc2548da6a1e7d98e9a421b42541425b"
+          },
+          {
+            symbol: "MIM",
+            address: "0xfea7a6a0b346362bf88a9e4a88416b77a57d6c2a"
+          }
+        ]
+      },
+      "42220": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x48065fbbe25f71c9282ddf5e1cd6d6a887483d5e"
+          },
+          {
+            symbol: "USDC",
+            address: "0xceba9300f2b948710d2653dd7b07f33a8b32118c"
+          }
+        ]
+      },
+      "43114": {
+        top: [
+          {
+            symbol: "PENDLE",
+            address: "0xfb98b335551a418cd0737375a2ea0ded62ea213b"
+          },
+          {
+            symbol: "ZRO",
+            address: "0x6985884c4392d348587b19cb9eaaf157f13271cd"
+          },
+          {
+            symbol: "STG",
+            address: "0x2f6f07cdcf3588944bf4c42ac74ff24bf56e7590"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x9702230a8ea53601f5cd2dc00fdbc13d4df4a8c7"
+          },
+          {
+            symbol: "USDC",
+            address: "0xb97ef9ef8734c71904d8002f8b6bc66dd9c48a6e"
+          },
+          {
+            symbol: "EURC",
+            address: "0xc891eb4cbdeff6e073e859e987815ed1505c2acd"
+          },
+          {
+            symbol: "FRAX",
+            address: "0xd24c2ad096400b6fbcd2ad8b24e7acbc21a1da64"
+          },
+          {
+            symbol: "MIM",
+            address: "0x130966628846bfd36ff31a822705796e8cb8c18d"
+          }
+        ]
+      },
+      "5000": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x201eba5cc46d216ce6dc03f6a759e8e766e956ae"
+          },
+          {
+            symbol: "USDC",
+            address: "0x09bc4e0d864854c6afb6eb9a9cdf58ac190d0df9"
+          },
+          {
+            symbol: "mUSD",
+            address: "0xab575258d37eaa5c8956efabe71f4ee8f6397cf3"
+          }
+        ]
+      },
+      "534352": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0xf55bec9cafdbe8730f096aa55dad6d22d44099df"
+          },
+          {
+            symbol: "USDC",
+            address: "0x06efdbff2a14a7c8e15944d1f4a48f9f95f663a4"
+          }
+        ]
+      },
+      "56": {
+        top: [
+          {
+            symbol: "AAVE",
+            address: "0xfb6115445bff7b52feb98650c87f44907e58f802"
+          },
+          {
+            symbol: "LINK",
+            address: "0xf8a0bf9cf54bb92f17374d9e9a321e6a111a51bd"
+          },
+          {
+            symbol: "UNI",
+            address: "0xbf5140a22578168fd562dccf235e5d43a02ce9b1"
+          },
+          {
+            symbol: "PENDLE",
+            address: "0xb3ed0a426155b79b898849803e3b36552f7ed507"
+          },
+          {
+            symbol: "COMP",
+            address: "0x52ce071bd9b1c4b00a0b92d298c512478cad67e8"
+          },
+          {
+            symbol: "CAKE",
+            address: "0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82"
+          },
+          {
+            symbol: "ZRO",
+            address: "0x6985884c4392d348587b19cb9eaaf157f13271cd"
+          },
+          {
+            symbol: "STG",
+            address: "0xb0d502e938ed5f4df2e681fe6e419ff29631d62b"
+          },
+          {
+            symbol: "AXS",
+            address: "0x715d400f88c167884bbcc41c5fea407ed4d2f8a0"
+          },
+          {
+            symbol: "BONK",
+            address: "0xa697e272a73744b343528c3bc4702f2565b2f422"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "0x55d398326f99059ff775485246999027b3197955"
+          },
+          {
+            symbol: "USDC",
+            address: "0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d"
+          },
+          {
+            symbol: "FDUSD",
+            address: "0xc5f0f7b66764f6ec8c8dff7ba683102295e16409"
+          },
+          {
+            symbol: "TUSD",
+            address: "0x40af3827f39d0eacbf4a168f8d4ee67c121d11c9"
+          }
+        ]
+      },
+      "59144": {
+        top: [
+          {
+            symbol: "Cake",
+            address: "0x0d1e753a25ebda689453309112904807625befbe"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "0x176211869ca2b568f2a7d4ee941e073a821ee1ff"
+          }
+        ]
+      },
+      "80094": {
+        top: [],
+        stables: [
+          {
+            symbol: "MIM",
+            address: "0x5b82028cfc477c4e7dda7ff33d59a23fa7be002a"
+          }
+        ]
+      },
+      "8453": {
+        top: [
+          {
+            symbol: "AAVE",
+            address: "0x63706e401c06ac8513145b7687a14804d17f814b"
+          },
+          {
+            symbol: "PENDLE",
+            address: "0xa99f6e6785da0f5d6fb42495fe424bce029eeb3e"
+          },
+          {
+            symbol: "COMP",
+            address: "0x9e1028f5f1d5ede59748ffcee5532509976840e0"
+          },
+          {
+            symbol: "CAKE",
+            address: "0x3055913c90fcc1a6ce9a358911721eeb942013a1"
+          },
+          {
+            symbol: "YFI",
+            address: "0x9eaf8c1e34f05a589eda6bafdf391cf6ad3cb239"
+          },
+          {
+            symbol: "ZRO",
+            address: "0x6985884c4392d348587b19cb9eaaf157f13271cd"
+          },
+          {
+            symbol: "STG",
+            address: "0xe3b53af74a4bf62ae5511055290838050bf764df"
+          },
+          {
+            symbol: "cbBTC",
+            address: "0xcbb7c0000ab88b473b1f5afd9ef808440eed33bf"
+          },
+          {
+            symbol: "AERO",
+            address: "0x940181a94a35a4569e4529a3cdfb74e38fd98631"
+          },
+          {
+            symbol: "VIRTUAL",
+            address: "0x0b3e328455c4059eeb9e3f84b5543f74e24e7e1b"
+          },
+          {
+            symbol: "MORPHO",
+            address: "0xbaa5cc21fd487b8fcc2f632f3f4e8d37262a0842"
+          },
+          {
+            symbol: "BRETT",
+            address: "0x532f27101965dd16442e59d40670faf5ebb142e4"
+          },
+          {
+            symbol: "DEGEN",
+            address: "0x4ed4e862860bed51a9570b96d89af5e1b0efefed"
+          },
+          {
+            symbol: "WELL",
+            address: "0xa88594d404727625a9437c3f886c7643872296ae"
+          },
+          {
+            symbol: "ZORA",
+            address: "0x1111111111166b7fe7bd91427724b487980afc69"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"
+          },
+          {
+            symbol: "DAI",
+            address: "0x50c5725949a6f0c72e6c4a641f24049a917db0cb"
+          },
+          {
+            symbol: "USDS",
+            address: "0x820c137fa70c8691f0e44dc420a5e53c168921dc"
+          },
+          {
+            symbol: "EURC",
+            address: "0x60a3e35cc302bfa44cb288bc5a4f316fdb1adb42"
+          }
+        ]
+      },
+      "999": {
+        top: [
+          {
+            symbol: "AXL",
+            address: "0xc4dc717136b8fd754df181d122914c2866f11a79"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "0xb88339cb7199b77e23db6e890353e22632ba630f"
+          }
+        ]
+      },
+      "agoric-3": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9"
+          }
+        ]
+      },
+      "archway-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/43897B9739BD63E3A08A88191999C632E052724AB96BD4C74AE31375C991F48D"
+          }
+        ]
+      },
+      "axelar-dojo-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDe",
+            address: "usde-wei"
+          }
+        ]
+      },
+      "core-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "ibc/C559977F5797BDC1D74C0836A10C379C991D664166CB60D776A83029852431B4"
+          },
+          {
+            symbol: "USDC",
+            address: "ibc/B3792E4A62DF4A934EF2DF5968556DB56F5776ED25BDE11188A4F58A7DD406F0"
+          }
+        ]
+      },
+      "cosmoshub-4": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/F663521BF1836B00F5F177680F74BFB9A8B5654A694D0D2BC249E03CF2509013"
+          }
+        ]
+      },
+      "crescent-1": {
+        top: [
+          {
+            symbol: "AXL",
+            address: "ibc/0634D0993744740D675AD01E81156EAC945AEAAE17C074918DC7FF52F41B263E"
+          }
+        ],
+        stables: []
+      },
+      "dydx-mainnet-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/8E27BA2D5493AF5636760E354E46004562C46AB7EC0CC4C1CA14E9E20E2545B5"
+          }
+        ]
+      },
+      "dymension_1100-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/B3504E092456BA618CC28AC671A71FB08C6CA0FD0BE7C8A5B5A3E2DD933CC9E4"
+          }
+        ]
+      },
+      "elys-1": {
+        top: [
+          {
+            symbol: "LINK",
+            address: "ibc/2A20C613F2BA256BE9FAD791B0743FBC4FE3C998EDF9234D969172F7D42FB8E7"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/F082B65C88E4B6D5EF1DB243CDA1D331D002759E938A0F5CD3FFDC5D53B3E349"
+          }
+        ]
+      },
+      "juno-1": {
+        top: [
+          {
+            symbol: "AXL",
+            address: "ibc/EBE900AED8FF6BB2E186B17B066138F647CDD9647EF4FBE2DE6C8D4013A2C990"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/4A482FA914A4B9B05801ED81C33713899F322B24F76A06F4B8FE872485EA22FF"
+          }
+        ]
+      },
+      "kaiyo-1": {
+        top: [
+          {
+            symbol: "AXL",
+            address: "ibc/C01154C2547F4CB10A985EA78E7CD4BA891C1504360703A37E1D7043F06B5E1F"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/FE98AAD68F02F03565E9FA39A5E627946699B2B07115889ED812D8BA639576A9"
+          }
+        ]
+      },
+      "kava_2222-10": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "erc20/tether/usdt"
+          }
+        ]
+      },
+      "lava-mainnet-1": {
+        top: [
+          {
+            symbol: "OPaxl",
+            address: "ibc/8F54CE650A35D2B04630DD57F91D6552E7FCA9002DBF1CFBA1254675C194C8C8"
+          }
+        ],
+        stables: []
+      },
+      "migaloo-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/BC5C0BAFD19A5E4133FDA0F3E04AE1FBEE75A4A226554B2CBB021089FF2E1F8A"
+          }
+        ]
+      },
+      "neutron-1": {
+        top: [
+          {
+            symbol: "AXL",
+            address: "ibc/C0E66D1C81D8AAF0E6896E05190FDFBC222367148F86AC3EA679C28327A763CD"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/B559A80D62249C8AA07A380E2A2BEA6E5CA9A6F079C912C3A9E9B494105E4F81"
+          }
+        ]
+      },
+      "noble-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDY",
+            address: "ausdy"
+          }
+        ]
+      },
+      "osmosis-1": {
+        top: [
+          {
+            symbol: "AXL",
+            address: "ibc/903A61A498756EA560B85A85132D3AEE21B5DEDD41213725D22ABF276EA6945E"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "ibc/4ABBEF4C8926DDDB320AE5188CFD63267ABBCEFC0583E4AE05D6E5AA2401DDAB"
+          },
+          {
+            symbol: "USDC",
+            address: "ibc/498A0751C798A0D9A389AA3691123DADA57DAA4FE165D5C75894505B876BA6E4"
+          },
+          {
+            symbol: "USDY",
+            address: "ibc/23104D411A6EB6031FA92FB75F227422B84989969E91DCAD56A535DD7FF0A373"
+          }
+        ]
+      },
+      "phoenix-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/2C962DAB9F57FE0921435426AE75196009FAA1981BF86991203C8411F8980FDB"
+          }
+        ]
+      },
+      "ssc-1": {
+        top: [
+          {
+            symbol: "UNI",
+            address: "ibc/E4859520008F30CAB8A6548A390BC10C45F667A26A5A22D8891A79589DF57C41"
+          }
+        ],
+        stables: [
+          {
+            symbol: "USDT",
+            address: "ibc/B5F6DCC4FEF6BBBC356C67C46072AB3C01443FB5E3D19538C52A3CD439BE6BE3"
+          },
+          {
+            symbol: "USDC",
+            address: "ibc/37EF240838413BD7D3496183213F7F0F483EC7A330328F16AD901A1AC1450F72"
+          },
+          {
+            symbol: "USDe",
+            address: "ibc/23B8A6E4D4AD864A4DF7FBBC40818473691395EF9B6D8B8277037D536417768E"
+          },
+          {
+            symbol: "USDY",
+            address: "ibc/2115CC1B823DE5CC635692CB95E50E1C601A9B432703F7A611B4E492A914D968"
+          }
+        ]
+      },
+      "stargaze-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/4A1C18CA7F50544760CF306189B810CE4C1CB156C7FC870143D401FE7280E591"
+          }
+        ]
+      },
+      "umee-1": {
+        top: [
+          {
+            symbol: "AXL",
+            address: "ibc/D1CB2804AA5EB64D503F28E8DF3552F8A4D642802B66EFE50DE432B755F37AE1"
+          }
+        ],
+        stables: []
+      },
+      "xion-mainnet-1": {
+        top: [],
+        stables: [
+          {
+            symbol: "USDC",
+            address: "ibc/F082B65C88E4B6D5EF1DB243CDA1D331D002759E938A0F5CD3FFDC5D53B3E349"
+          }
+        ]
+      }
+    };
+  }
+});
+
 // src/core/useTokens.ts
 import { useState as useState4, useEffect as useEffect4, useMemo as useMemo4 } from "react";
 function mapTokenDefToToken(tokenDef) {
@@ -3552,13 +4551,40 @@ function useTokens(chainId) {
       setIsLoadingMore(false);
     }
   };
+  const featuredAddresses = useMemo4(() => {
+    const key = chainId?.toString() ?? "";
+    const chain = FEATURED[key];
+    if (!chain) return /* @__PURE__ */ new Map();
+    const map = /* @__PURE__ */ new Map();
+    let order = 0;
+    for (const s of chain.stables) map.set(s.address.toLowerCase(), order++);
+    for (const t of chain.top) map.set(t.address.toLowerCase(), order++);
+    return map;
+  }, [chainId]);
+  const nativeSymbols = useMemo4(() => {
+    if (!chainId) return /* @__PURE__ */ new Set();
+    const chain = chainMap.get(chainId.toString());
+    const sym = chain?.nativeCurrency?.symbol;
+    if (!sym) return /* @__PURE__ */ new Set();
+    return /* @__PURE__ */ new Set([sym.toUpperCase()]);
+  }, [chainId, chainMap]);
   const filteredTokens = useMemo4(() => {
     const query = searchQuery.toLowerCase().trim();
     const source = query.length === 0 || tokensPaginationEnabled ? tokens : tokens.filter(
       (token) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || token.address.toLowerCase().includes(query)
     );
-    return sortTokensByPopularity(source);
-  }, [tokens, searchQuery, tokensPaginationEnabled]);
+    return sortTokensByPopularity(source, {
+      nativeAddresses: NATIVE_ADDRESSES,
+      nativeSymbols,
+      featuredAddresses
+    });
+  }, [
+    tokens,
+    searchQuery,
+    tokensPaginationEnabled,
+    nativeSymbols,
+    featuredAddresses
+  ]);
   return {
     tokens,
     filteredTokens,
@@ -3571,7 +4597,7 @@ function useTokens(chainId) {
     isLoadingMore
   };
 }
-var DEFAULT_PAGE_LIMIT;
+var FEATURED, NATIVE_ADDRESSES, DEFAULT_PAGE_LIMIT;
 var init_useTokens = __esm({
   "src/core/useTokens.ts"() {
     "use strict";
@@ -3579,6 +4605,15 @@ var init_useTokens = __esm({
     init_useChains();
     init_tokenPopularity();
     init_store();
+    init_chainHelpers();
+    init_featuredAssets();
+    FEATURED = featuredAssets_default;
+    NATIVE_ADDRESSES = /* @__PURE__ */ new Set([
+      NATIVE_EVM2.toLowerCase(),
+      NATIVE_SOLANA2.toLowerCase(),
+      // Some EVM chains (e.g. ZKsync, HyperEVM) use the zero address for the native token
+      "0x0000000000000000000000000000000000000000"
+    ]);
     DEFAULT_PAGE_LIMIT = 100;
   }
 });
@@ -7044,7 +8079,7 @@ function resolveConfig(input) {
       ...input.routes.options
     }
   };
-  const theme = deepMerge(DEFAULT_THEME, input.theme);
+  const theme = input.theme ?? "system";
   const messages = deepMerge(DEFAULT_MESSAGES, input.messages);
   const retry = {
     autoRetry: input.retry?.autoRetry ?? DEFAULT_RETRY_CONFIG.autoRetry,
@@ -7122,10 +8157,7 @@ var init_store = __esm({
           ...this._cfg,
           ...patch,
           routes: { ...this._cfg.routes, ...patch.routes ?? {} },
-          theme: {
-            ...this._cfg.theme,
-            ...patch.theme ?? {}
-          },
+          theme: patch.theme ?? this._cfg.theme,
           messages: {
             ...this._cfg.messages,
             ...patch.messages ?? {}
@@ -7530,29 +8562,39 @@ var init_useDepositNavigationState = __esm({
 });
 
 // src/widget/state/deposit/useThemePreference.ts
-import { useCallback as useCallback8, useState as useState11 } from "react";
-import { useEffect as useEffect11 } from "react";
-function getInitialTheme() {
-  if (typeof window === "undefined") {
-    return "light";
-  }
+import { useCallback as useCallback8, useEffect as useEffect11, useState as useState11 } from "react";
+function resolveConfigTheme(configTheme) {
+  if (typeof window === "undefined") return "light";
+  if (configTheme !== "system") return configTheme;
   try {
     const stored = localStorage.getItem(THEME_STORAGE_KEY);
-    if (stored === "light" || stored === "dark") {
-      return stored;
-    }
+    if (stored === "light" || stored === "dark") return stored;
   } catch {
   }
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  }
-  return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function useThemePreference() {
-  const [resolvedTheme, setResolvedTheme] = useState11("light");
+function useThemePreference(configTheme = "system") {
+  const [resolvedTheme, setResolvedTheme] = useState11(
+    () => resolveConfigTheme(configTheme)
+  );
   useEffect11(() => {
-    setResolvedTheme(getInitialTheme());
-  }, []);
+    setResolvedTheme(resolveConfigTheme(configTheme));
+  }, [configTheme]);
+  useEffect11(() => {
+    if (configTheme !== "system") return;
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    try {
+      const stored = localStorage.getItem(THEME_STORAGE_KEY);
+      if (stored === "light" || stored === "dark") return;
+    } catch {
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e2) => {
+      setResolvedTheme(e2.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [configTheme]);
   const toggleTheme = useCallback8(() => {
     setResolvedTheme((current) => {
       const nextTheme = current === "light" ? "dark" : "light";
@@ -7698,7 +8740,8 @@ function DepositProvider({
     resetNavigation,
     setCurrentStepInternal
   } = useDepositNavigationState(initialStep);
-  const { resolvedTheme, toggleTheme } = useThemePreference();
+  const config = useTrustwareConfig();
+  const { resolvedTheme, toggleTheme } = useThemePreference(config.theme);
   const {
     selectedWallet,
     walletAddress: otherWalletAddress,
@@ -7897,6 +8940,7 @@ var init_DepositContext = __esm({
     init_useWalletTokenState();
     init_useWalletConnect();
     init_wallets();
+    init_useTrustwareConfig();
     DepositContext = createContext2(
       void 0
     );
@@ -11568,6 +12612,7 @@ var init_AvailableTokenListItem = __esm({
 });
 
 // src/widget/features/token-selection/components/ChainSelectorPanel.tsx
+import { useState as useState21, useMemo as useMemo12 } from "react";
 import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function ChainItem({
   chain,
@@ -11605,8 +12650,8 @@ function ChainItem({
             src: chain.chainIconURI,
             alt: label,
             style: {
-              width: "2rem",
-              height: "2rem",
+              width: "1.5rem",
+              height: "1.5rem",
               borderRadius: "9999px",
               objectFit: "cover",
               flexShrink: 0
@@ -11616,8 +12661,8 @@ function ChainItem({
           "div",
           {
             style: {
-              width: "2rem",
-              height: "2rem",
+              width: "1.5rem",
+              height: "1.5rem",
               borderRadius: "9999px",
               backgroundColor: colors.muted,
               display: "flex",
@@ -11695,6 +12740,81 @@ function ChainItem({
     String(key)
   );
 }
+function SectionLabel({
+  children,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.25rem",
+        padding: `${spacing[1.5]} ${spacing[3]}`,
+        marginTop: spacing[2]
+      },
+      children: [
+        icon === "spark" ? /* @__PURE__ */ jsx21(
+          "svg",
+          {
+            style: {
+              width: "0.75rem",
+              height: "0.75rem",
+              color: colors.primary,
+              flexShrink: 0
+            },
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx21(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx21(
+          "svg",
+          {
+            style: {
+              width: "0.75rem",
+              height: "0.75rem",
+              color: colors.primary,
+              flexShrink: 0
+            },
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx21(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "span",
+          {
+            style: {
+              fontSize: "10px",
+              fontWeight: fontWeight.medium,
+              color: colors.primary
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
 function ChainSelectorPanel({
   error,
   isChainSelected,
@@ -11703,6 +12823,21 @@ function ChainSelectorPanel({
   otherChains,
   popularChains
 }) {
+  const [chainSearch, setChainSearch] = useState21("");
+  const filteredPopular = useMemo12(() => {
+    if (!chainSearch) return popularChains;
+    const q = chainSearch.toLowerCase();
+    return popularChains.filter(
+      (c) => resolveChainLabel(c).toLowerCase().includes(q)
+    );
+  }, [popularChains, chainSearch]);
+  const filteredOther = useMemo12(() => {
+    if (!chainSearch) return otherChains;
+    const q = chainSearch.toLowerCase();
+    return otherChains.filter(
+      (c) => resolveChainLabel(c).toLowerCase().includes(q)
+    );
+  }, [otherChains, chainSearch]);
   return /* @__PURE__ */ jsxs18(
     "div",
     {
@@ -11718,22 +12853,58 @@ function ChainSelectorPanel({
           "div",
           {
             style: {
-              padding: `${spacing[2]} ${spacing[3]}`,
-              borderBottom: `1px solid rgba(63, 63, 70, 0.5)`
+              padding: `${spacing[2]} ${spacing[2]}`,
+              borderBottom: `1px solid ${colors.border}`
             },
-            children: /* @__PURE__ */ jsx21(
-              "span",
-              {
-                style: {
-                  fontSize: fontSize.xs,
-                  fontWeight: fontWeight.medium,
-                  color: colors.mutedForeground,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.05em"
-                },
-                children: "Chain"
-              }
-            )
+            children: /* @__PURE__ */ jsxs18("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxs18(
+                "svg",
+                {
+                  style: {
+                    position: "absolute",
+                    left: spacing[2.5],
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    width: "1rem",
+                    height: "1rem",
+                    color: colors.mutedForeground,
+                    pointerEvents: "none"
+                  },
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: [
+                    /* @__PURE__ */ jsx21("circle", { cx: "11", cy: "11", r: "8" }),
+                    /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", d: "m21 21-4.35-4.35" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Chain",
+                  value: chainSearch,
+                  onChange: (e2) => setChainSearch(e2.target.value),
+                  style: {
+                    width: "100%",
+                    boxSizing: "border-box",
+                    paddingLeft: spacing[8],
+                    paddingRight: spacing[3],
+                    paddingTop: spacing[2],
+                    paddingBottom: spacing[2],
+                    fontSize: fontSize.sm,
+                    backgroundColor: colors.muted,
+                    border: `1px solid ${colors.border}`,
+                    borderRadius: borderRadius.lg,
+                    color: colors.foreground,
+                    outline: "none",
+                    transition: "all 0.2s"
+                  }
+                }
+              )
+            ] })
           }
         ),
         /* @__PURE__ */ jsx21(
@@ -11821,21 +12992,9 @@ function ChainSelectorPanel({
                 ]
               }
             ) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
-              popularChains.length > 0 && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: spacing[2] }, children: [
-                /* @__PURE__ */ jsx21("div", { style: { padding: `${spacing[1.5]} ${spacing[3]}` }, children: /* @__PURE__ */ jsx21(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "10px",
-                      fontWeight: fontWeight.medium,
-                      color: "rgba(161, 161, 170, 0.7)",
-                      textTransform: "uppercase",
-                      letterSpacing: "0.05em"
-                    },
-                    children: "Popular"
-                  }
-                ) }),
-                popularChains.map((chain, idx) => /* @__PURE__ */ jsx21(
+              filteredPopular.length > 0 && /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsx21(SectionLabel, { icon: "spark", children: "Popular chains" }),
+                filteredPopular.map((chain, idx) => /* @__PURE__ */ jsx21(
                   ChainItem,
                   {
                     chain,
@@ -11848,30 +13007,9 @@ function ChainSelectorPanel({
                   )
                 ))
               ] }),
-              otherChains.length > 0 && /* @__PURE__ */ jsxs18("div", { children: [
-                popularChains.length > 0 && /* @__PURE__ */ jsx21(
-                  "div",
-                  {
-                    style: {
-                      padding: `${spacing[1.5]} ${spacing[3]}`,
-                      marginTop: spacing[2]
-                    },
-                    children: /* @__PURE__ */ jsx21(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "10px",
-                          fontWeight: fontWeight.medium,
-                          color: "rgba(161, 161, 170, 0.7)",
-                          textTransform: "uppercase",
-                          letterSpacing: "0.05em"
-                        },
-                        children: "All Chains"
-                      }
-                    )
-                  }
-                ),
-                otherChains.map((chain, idx) => /* @__PURE__ */ jsx21(
+              filteredOther.length > 0 && /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsx21(SectionLabel, { icon: "sort", children: "Chains A-Z" }),
+                filteredOther.map((chain, idx) => /* @__PURE__ */ jsx21(
                   ChainItem,
                   {
                     chain,
@@ -11884,21 +13022,21 @@ function ChainSelectorPanel({
                   )
                 ))
               ] }),
-              popularChains.length === 0 && otherChains.length === 0 && /* @__PURE__ */ jsx21(
+              filteredPopular.length === 0 && filteredOther.length === 0 && /* @__PURE__ */ jsx21(
                 "div",
                 {
                   style: {
-                    padding: `${spacing[3]} ${spacing[4]}`,
+                    padding: `${spacing[3]} ${spacing[2]}`,
                     textAlign: "center"
                   },
                   children: /* @__PURE__ */ jsx21(
                     "p",
                     {
                       style: {
-                        fontSize: fontSize.sm,
+                        fontSize: fontSize.xs,
                         color: colors.mutedForeground
                       },
-                      children: "No chains available"
+                      children: "No chains found"
                     }
                   )
                 }
@@ -11969,8 +13107,8 @@ function TokenSearchInput({
           paddingTop: spacing[2],
           paddingBottom: spacing[2],
           fontSize: fontSize.sm,
-          backgroundColor: "rgba(63, 63, 70, 0.5)",
-          border: `1px solid rgba(63, 63, 70, 0.5)`,
+          backgroundColor: colors.muted,
+          border: `1px solid ${colors.border}`,
           borderRadius: borderRadius.lg,
           color: colors.foreground,
           outline: "none",
@@ -12442,7 +13580,87 @@ var init_WalletTokenListItem = __esm({
 });
 
 // src/widget/features/token-selection/components/TokenSelectorPanel.tsx
-import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+function TokenSectionLabel({
+  children,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.375rem",
+        paddingLeft: spacing[3],
+        paddingRight: spacing[3],
+        paddingTop: spacing[1],
+        paddingBottom: spacing[1],
+        marginTop: spacing[1],
+        marginBottom: spacing[1]
+      },
+      children: [
+        icon === "wallet" ? /* @__PURE__ */ jsx25(
+          "svg",
+          {
+            style: {
+              width: "0.75rem",
+              height: "0.75rem",
+              color: colors.primary,
+              flexShrink: 0
+            },
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx25(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18-3H3m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx25(
+          "svg",
+          {
+            style: {
+              width: "0.75rem",
+              height: "0.75rem",
+              color: colors.primary,
+              flexShrink: 0
+            },
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx25(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09Z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx25(
+          "span",
+          {
+            style: {
+              fontSize: "0.75rem",
+              lineHeight: "1rem",
+              fontWeight: fontWeight.medium,
+              color: colors.primary
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
 function TokenSelectorPanel({
   filteredTokens,
   filteredWalletTokens,
@@ -12455,9 +13673,10 @@ function TokenSelectorPanel({
   searchQuery,
   selectedChain,
   setSearchQuery,
-  tokensError,
-  walletAddress
+  tokensError
 }) {
+  const hasWalletTokens = filteredWalletTokens.length > 0;
+  const hasPopularTokens = filteredTokens.length > 0;
   return /* @__PURE__ */ jsxs22(
     "div",
     {
@@ -12468,61 +13687,20 @@ function TokenSelectorPanel({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx25(
           "div",
           {
             style: {
-              padding: `${spacing[2]} ${spacing[3]}`,
-              borderBottom: `1px solid rgba(63, 63, 70, 0.5)`
+              padding: `${spacing[2]} ${spacing[2]}`,
+              borderBottom: `1px solid ${colors.border}`
             },
-            children: [
-              /* @__PURE__ */ jsxs22(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: spacing[2],
-                    marginBottom: spacing[2]
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx25(
-                      "span",
-                      {
-                        style: {
-                          fontSize: fontSize.xs,
-                          fontWeight: fontWeight.medium,
-                          color: colors.mutedForeground,
-                          textTransform: "uppercase",
-                          letterSpacing: "0.05em"
-                        },
-                        children: "Token"
-                      }
-                    ),
-                    walletAddress && /* @__PURE__ */ jsx25(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "10px",
-                          color: colors.primary,
-                          backgroundColor: "rgba(59, 130, 246, 0.1)",
-                          padding: `${spacing[0.5]} ${spacing[1.5]}`,
-                          borderRadius: borderRadius.md
-                        },
-                        children: "Wallet Connected"
-                      }
-                    )
-                  ]
-                }
-              ),
-              selectedChain ? /* @__PURE__ */ jsx25(
-                TokenSearchInput,
-                {
-                  searchQuery,
-                  setSearchQuery
-                }
-              ) : null
-            ]
+            children: /* @__PURE__ */ jsx25(
+              TokenSearchInput,
+              {
+                searchQuery,
+                setSearchQuery
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx25(
@@ -12531,115 +13709,99 @@ function TokenSelectorPanel({
             style: {
               flex: 1,
               overflowY: "auto",
-              padding: `${spacing[2]} ${spacing[1]}`
+              padding: `${spacing[1]} ${spacing[1]}`
             },
-            children: !selectedChain || isLoadingTokens || tokensError || filteredTokens.length === 0 ? /* @__PURE__ */ jsx25(
+            children: !selectedChain ? /* @__PURE__ */ jsx25(
               TokenSelectorStateView,
               {
                 isLoadingTokens,
                 searchQuery,
                 setSearchQuery,
-                state: !selectedChain ? "no-chain" : tokensError ? "error" : "empty",
-                tokensError
+                state: "no-chain",
+                tokensError: null
               }
-            ) : /* @__PURE__ */ jsxs22(
-              "div",
+            ) : isLoadingTokens && !hasWalletTokens ? /* @__PURE__ */ jsx25(
+              TokenSelectorStateView,
               {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: spacing[0.5]
-                },
-                children: [
-                  filteredWalletTokens.length > 0 ? /* @__PURE__ */ jsx25(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "0.375rem",
-                        paddingLeft: "0.5rem",
-                        paddingRight: "0.5rem",
-                        marginBottom: spacing[2]
-                      },
-                      children: /* @__PURE__ */ jsx25(
-                        "span",
-                        {
-                          style: {
-                            fontSize: "0.75rem",
-                            lineHeight: "1rem",
-                            color: colors.primary
-                          },
-                          children: "Your tokens"
-                        }
-                      )
-                    }
-                  ) : null,
-                  filteredWalletTokens.map((token, i) => /* @__PURE__ */ jsx25(
-                    WalletTokenListItem,
-                    {
-                      token,
-                      onSelect: onSelectWalletToken
+                isLoadingTokens: true,
+                searchQuery,
+                setSearchQuery,
+                state: "empty",
+                tokensError: null
+              }
+            ) : tokensError && !hasWalletTokens ? /* @__PURE__ */ jsx25(
+              TokenSelectorStateView,
+              {
+                isLoadingTokens: false,
+                searchQuery,
+                setSearchQuery,
+                state: "error",
+                tokensError
+              }
+            ) : /* @__PURE__ */ jsxs22("div", { style: { display: "flex", flexDirection: "column" }, children: [
+              hasWalletTokens && /* @__PURE__ */ jsxs22(Fragment4, { children: [
+                /* @__PURE__ */ jsx25(TokenSectionLabel, { icon: "wallet", children: "Your tokens" }),
+                filteredWalletTokens.map((token, i) => /* @__PURE__ */ jsx25(
+                  WalletTokenListItem,
+                  {
+                    token,
+                    onSelect: onSelectWalletToken
+                  },
+                  `${token.address}-${i}`
+                ))
+              ] }),
+              isLoadingTokens ? /* @__PURE__ */ jsx25(
+                TokenSelectorStateView,
+                {
+                  isLoadingTokens: true,
+                  searchQuery,
+                  setSearchQuery,
+                  state: "empty",
+                  tokensError: null
+                }
+              ) : hasPopularTokens ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
+                /* @__PURE__ */ jsx25(TokenSectionLabel, { icon: "spark", children: "Popular tokens" }),
+                filteredTokens.map((token, i) => /* @__PURE__ */ jsx25(
+                  AvailableTokenListItem,
+                  {
+                    token,
+                    onSelect: onSelectToken
+                  },
+                  `${token.address}-${i}`
+                )),
+                hasNextPage ? /* @__PURE__ */ jsx25(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      void loadMore();
                     },
-                    `${token.address}-${i}`
-                  )),
-                  /* @__PURE__ */ jsx25(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "0.375rem",
-                        paddingLeft: "0.5rem",
-                        paddingRight: "0.5rem",
-                        marginBottom: spacing[2]
-                      },
-                      children: /* @__PURE__ */ jsx25(
-                        "span",
-                        {
-                          style: {
-                            fontSize: "0.75rem",
-                            lineHeight: "1rem",
-                            color: colors.primary
-                          },
-                          children: "Popular tokens"
-                        }
-                      )
-                    }
-                  ),
-                  filteredTokens.map((token, i) => /* @__PURE__ */ jsx25(
-                    AvailableTokenListItem,
-                    {
-                      token,
-                      onSelect: onSelectToken
+                    disabled: isLoadingMore,
+                    style: {
+                      marginTop: spacing[2],
+                      marginLeft: spacing[2],
+                      marginRight: spacing[2],
+                      padding: `${spacing[2]} ${spacing[3]}`,
+                      borderRadius: borderRadius.lg,
+                      border: `1px solid ${colors.border}`,
+                      backgroundColor: colors.card,
+                      color: colors.foreground,
+                      cursor: isLoadingMore ? "wait" : "pointer"
                     },
-                    `${token.address}-${i}`
-                  )),
-                  hasNextPage ? /* @__PURE__ */ jsx25(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        void loadMore();
-                      },
-                      disabled: isLoadingMore,
-                      style: {
-                        marginTop: spacing[2],
-                        marginLeft: spacing[2],
-                        marginRight: spacing[2],
-                        padding: `${spacing[2]} ${spacing[3]}`,
-                        borderRadius: borderRadius.lg,
-                        border: `1px solid ${colors.border}`,
-                        backgroundColor: colors.card,
-                        color: colors.foreground,
-                        cursor: isLoadingMore ? "wait" : "pointer"
-                      },
-                      children: isLoadingMore ? "Loading more..." : "Load more"
-                    }
-                  ) : null
-                ]
-              }
-            )
+                    children: isLoadingMore ? "Loading more..." : "Load more"
+                  }
+                ) : null
+              ] }) : !hasWalletTokens ? /* @__PURE__ */ jsx25(
+                TokenSelectorStateView,
+                {
+                  isLoadingTokens: false,
+                  searchQuery,
+                  setSearchQuery,
+                  state: "empty",
+                  tokensError: null
+                }
+              ) : null
+            ] })
           }
         )
       ]
@@ -12658,7 +13820,7 @@ var init_TokenSelectorPanel = __esm({
 });
 
 // src/widget/features/token-selection/hooks/useOrderedWalletTokens.ts
-import { useCallback as useCallback16, useMemo as useMemo12 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo13 } from "react";
 function useOrderedWalletTokens({
   amount,
   amountInputMode,
@@ -12676,7 +13838,7 @@ function useOrderedWalletTokens({
     },
     [setSelectedChain, setSelectedToken]
   );
-  const orderedTokens = useMemo12(() => {
+  const orderedTokens = useMemo13(() => {
     const selectedTokenChainType = selectedToken?.chainData?.type ?? selectedToken?.chainData?.chainType;
     const index = yourWalletTokens.findIndex(
       (token) => normalizeAddress2(
@@ -12752,7 +13914,7 @@ var init_useOrderedWalletTokens = __esm({
 });
 
 // src/widget/features/token-selection/hooks/useSelectTokenModel.ts
-import { useCallback as useCallback17, useMemo as useMemo13 } from "react";
+import { useCallback as useCallback17, useMemo as useMemo14 } from "react";
 function useSelectTokenModel({
   goBack,
   searchQuery,
@@ -12831,7 +13993,7 @@ function useSelectTokenModel({
     const address = token.address?.toLowerCase() ?? "";
     return symbol.includes(normalizedSearchQuery) || name.includes(normalizedSearchQuery) || address.includes(normalizedSearchQuery);
   };
-  const filteredWalletTokens = useMemo13(() => {
+  const filteredWalletTokens = useMemo14(() => {
     if (!selectedChain?.chainId) {
       return [];
     }
@@ -13022,7 +14184,7 @@ var init_AmountBalanceRow = __esm({
 });
 
 // src/widget/features/amount/components/AmountConversionRow.tsx
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 function formatTokenAmount(value) {
   const amount = Number(value ?? 0);
   if (amount <= 0) return "0";
@@ -13054,11 +14216,11 @@ function AmountConversionRow({
           fontSize: fontSize.lg,
           color: colors.mutedForeground
         },
-        children: amountInputMode === "usd" ? /* @__PURE__ */ jsxs24(Fragment4, { children: [
+        children: amountInputMode === "usd" ? /* @__PURE__ */ jsxs24(Fragment5, { children: [
           formatTokenAmount(amountComputation.tokenAmount),
           " ",
           selectedTokenSymbol
-        ] }) : /* @__PURE__ */ jsx27(Fragment4, { children: hasUsdPrice ? formatUsdAmount2(amountComputation.usdAmount) : "USD pricing unavailable" })
+        ] }) : /* @__PURE__ */ jsx27(Fragment5, { children: hasUsdPrice ? formatUsdAmount2(amountComputation.usdAmount) : "USD pricing unavailable" })
       }
     ),
     /* @__PURE__ */ jsx27(
@@ -13099,7 +14261,7 @@ var init_AmountConversionRow = __esm({
 });
 
 // src/widget/features/amount/components/AmountFeeSummary.tsx
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatEstimatedReceive(estimatedReceive, parsedAmount) {
   if (estimatedReceive) {
     return `~$${parseFloat(estimatedReceive).toLocaleString(void 0, {
@@ -13177,7 +14339,7 @@ function AmountFeeSummary({
       },
       children: "Enter an amount to continue."
     }
-  ) }) : /* @__PURE__ */ jsxs25(Fragment5, { children: [
+  ) }) : /* @__PURE__ */ jsxs25(Fragment6, { children: [
     /* @__PURE__ */ jsxs25("div", { style: feeSummaryRowStyle, children: [
       /* @__PURE__ */ jsx28("span", { style: { color: colors.mutedForeground }, children: "Network fee" }),
       isGasSponsored ? /* @__PURE__ */ jsx28(
@@ -13202,7 +14364,7 @@ function AmountFeeSummary({
         6
       ) })
     ] }),
-    relayFeeUsd != null && relayFeeUsd > 0 && /* @__PURE__ */ jsxs25(Fragment5, { children: [
+    relayFeeUsd != null && relayFeeUsd > 0 && /* @__PURE__ */ jsxs25(Fragment6, { children: [
       /* @__PURE__ */ jsx28("div", { style: feeSummaryDividerStyle }),
       /* @__PURE__ */ jsxs25("div", { style: feeSummaryRowStyle, children: [
         /* @__PURE__ */ jsx28("span", { style: { color: colors.mutedForeground }, children: "Bridge relay fee" }),
@@ -13408,7 +14570,7 @@ var init_CryptoPayAmountSection = __esm({
 });
 
 // src/widget/features/amount/hooks/useDepositAmountModel.ts
-import { useEffect as useEffect20, useMemo as useMemo14 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo15 } from "react";
 function useDepositAmountModel({
   amount,
   setAmount,
@@ -13422,7 +14584,7 @@ function useDepositAmountModel({
 }) {
   const tokenPriceUSD = typeof selectedToken?.usdPrice === "number" && Number.isFinite(selectedToken.usdPrice) && selectedToken.usdPrice > 0 ? selectedToken.usdPrice : 0;
   const hasUsdPrice = typeof tokenPriceUSD === "number" && Number.isFinite(tokenPriceUSD) && tokenPriceUSD > 0;
-  const normalizedTokenBalance = useMemo14(() => {
+  const normalizedTokenBalance = useMemo15(() => {
     if (!selectedToken?.balance) return 0;
     const normalized = Number(
       rawToDecimal(selectedToken.balance, selectedToken.decimals ?? 18)
@@ -13456,7 +14618,7 @@ function useDepositAmountModel({
     setAmount,
     setAmountInputMode
   ]);
-  const amountComputation = useMemo14(() => {
+  const amountComputation = useMemo15(() => {
     const rawAmount = (fixedFromAmountString ?? amount)?.trim();
     if (!rawAmount) {
       return {
@@ -13523,11 +14685,11 @@ function useDepositAmountModel({
     selectedToken?.decimals,
     tokenPriceUSD
   ]);
-  const requestedTokenAmount = useMemo14(() => {
+  const requestedTokenAmount = useMemo15(() => {
     const tokenAmount = Number(amountComputation.tokenAmount);
     return Number.isFinite(tokenAmount) ? tokenAmount : 0;
   }, [amountComputation.tokenAmount]);
-  const amountValidationError = useMemo14(() => {
+  const amountValidationError = useMemo15(() => {
     if (amountComputation.parseError) {
       return amountComputation.parseError;
     }
@@ -13560,17 +14722,17 @@ function useDepositAmountModel({
   ]);
   const amountWei = amountValidationError ? 0n : amountComputation.fromAmountWei ?? 0n;
   const parsedAmount = parseFloat(fixedFromAmountString ?? amount) || 0;
-  const maxTokenAmount = useMemo14(() => {
+  const maxTokenAmount = useMemo15(() => {
     const cap = Math.min(normalizedTokenBalance, 1e4);
     const token = selectedToken;
     const isSolNative = token?.category === "native" && typeof token.chain_key === "string" && token.chain_key.toLowerCase().includes("solana");
     return isSolNative ? Math.max(0, cap - 0.01) : cap;
   }, [normalizedTokenBalance, selectedToken]);
-  const maxUsdAmount = useMemo14(() => {
+  const maxUsdAmount = useMemo15(() => {
     if (!hasUsdPrice) return void 0;
     return Math.min(maxTokenAmount * tokenPriceUSD, 1e4);
   }, [hasUsdPrice, maxTokenAmount, tokenPriceUSD]);
-  const minAmountForMode = useMemo14(() => {
+  const minAmountForMode = useMemo15(() => {
     if (minAmountUsd == null) return 0;
     if (amountInputMode === "usd") {
       return minAmountUsd;
@@ -13579,11 +14741,11 @@ function useDepositAmountModel({
     return minAmountUsd / tokenPriceUSD;
   }, [amountInputMode, hasUsdPrice, minAmountUsd, tokenPriceUSD]);
   const sliderMax = amountInputMode === "usd" ? maxUsdAmount : maxTokenAmount;
-  const effectiveSliderMax = useMemo14(() => {
+  const effectiveSliderMax = useMemo15(() => {
     if (sliderMax == null || !Number.isFinite(sliderMax)) return void 0;
     return Math.max(sliderMax, 0);
   }, [sliderMax]);
-  const effectiveSliderMin = useMemo14(() => {
+  const effectiveSliderMin = useMemo15(() => {
     if (effectiveSliderMax == null || !Number.isFinite(effectiveSliderMax) || effectiveSliderMax <= 0) {
       return 0;
     }
@@ -13619,7 +14781,7 @@ var init_useDepositAmountModel = __esm({
 });
 
 // src/widget/features/amount/hooks/useHomeAmountModel.ts
-import { useEffect as useEffect21, useMemo as useMemo15 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo16 } from "react";
 function useHomeAmountModel({
   amount,
   setAmount,
@@ -13646,7 +14808,7 @@ function useHomeAmountModel({
     setAmountInputMode
   ]);
   const parsedAmount = parseFloat(fixedFromAmountString ?? amount) || 0;
-  const amountValidationMessage = useMemo15(() => {
+  const amountValidationMessage = useMemo16(() => {
     const rawAmount = (fixedFromAmountString ?? amount)?.trim();
     if (!rawAmount) return null;
     if (!/^\d*\.?\d*$/.test(rawAmount)) {
@@ -14569,7 +15731,7 @@ var init_HomePaymentOptions = __esm({
 });
 
 // src/widget/features/wallet/hooks/useHomeWalletActions.ts
-import { useCallback as useCallback18, useEffect as useEffect22, useMemo as useMemo16, useRef as useRef10, useState as useState21 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect22, useMemo as useMemo17, useRef as useRef10, useState as useState22 } from "react";
 function useHomeWalletActions({
   connectWallet,
   detectedWallets,
@@ -14578,8 +15740,8 @@ function useHomeWalletActions({
   WalletConnect
   // setCurrentStepInternal,
 }) {
-  const [isCryptoDropdownOpen, setIsCryptoDropdownOpen] = useState21(false);
-  const [isFiatDropdownOpen, setIsFiatDropdownOpen] = useState21(false);
+  const [isCryptoDropdownOpen, setIsCryptoDropdownOpen] = useState22(false);
+  const [isFiatDropdownOpen, setIsFiatDropdownOpen] = useState22(false);
   const cryptoDropdownRef = useRef10(null);
   const fiatDropdownRef = useRef10(null);
   const { disconnect } = useWalletInfo();
@@ -14630,7 +15792,7 @@ function useHomeWalletActions({
     WalletConnect().catch(() => resetNavigation());
   }, [setYourWalletTokens, disconnect]);
   const { selectedNamespace } = useDepositWallet();
-  const browserWallets = useMemo16(() => {
+  const browserWallets = useMemo17(() => {
     if (!detectedWallets?.length) return [];
     return detectedWallets.filter(
       (wallet) => wallet?.meta?.id !== "walletconnect" && wallet?.meta?.ecosystem.trim().toLowerCase() === selectedNamespace.trim().toLowerCase()
@@ -15042,7 +16204,7 @@ var init_relayFeeUtils = __esm({
 });
 
 // src/widget/features/route-preview/hooks/useRoutePreviewModel.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 function useRoutePreviewModel({
   amountUsd,
   amountValidationError,
@@ -15055,7 +16217,7 @@ function useRoutePreviewModel({
   walletAddress
 }) {
   const { chains } = useChains();
-  const destinationConfig = useMemo17(
+  const destinationConfig = useMemo18(
     () => ({
       dappName: config.messages?.title || "DApp",
       toChain: config.routes.toChain,
@@ -15069,7 +16231,7 @@ function useRoutePreviewModel({
       config.routes.toToken
     ]
   );
-  const routeConfig = useMemo17(() => {
+  const routeConfig = useMemo18(() => {
     const toChainId = config.routes.toChain;
     const toChainKey = normalizeChainKey2(toChainId);
     const toChain = toChainKey ? chains.find(
@@ -15106,7 +16268,7 @@ function useRoutePreviewModel({
     ...routeConfig,
     enabled: !!isReady
   });
-  const routePrerequisiteError = useMemo17(() => {
+  const routePrerequisiteError = useMemo18(() => {
     if (!isReady) return;
     if (!selectedChain) {
       return "Select a source chain to fetch a route.";
@@ -28848,7 +30010,7 @@ var init_smart_account2 = __esm({
 });
 
 // src/widget/features/transaction/hooks/useTransactionActionModel.ts
-import { useCallback as useCallback19, useEffect as useEffect23, useMemo as useMemo18, useRef as useRef11, useState as useState22 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect23, useMemo as useMemo19, useRef as useRef11, useState as useState23 } from "react";
 import { encodeFunctionData as encodeFunctionData8, erc20Abi } from "viem";
 function normalizeTokenAddressForCompare(chain, addr) {
   const chainType = (chain.type ?? chain.chainType ?? "").toLowerCase();
@@ -28883,7 +30045,7 @@ function useTransactionActionModel({
   const chainType = selectedChain?.type ?? selectedChain?.chainType;
   const chainTypeNormalized = (chainType ?? "").toLowerCase();
   const isEvm = chainTypeNormalized === "evm";
-  const backendChainId2 = useMemo18(() => {
+  const backendChainId2 = useMemo19(() => {
     const chainRef = routeResult?.txReq?.chainId ?? selectedChain?.networkIdentifier ?? selectedChain?.chainId ?? selectedChain?.id;
     if (chainRef == null) return null;
     return String(chainRef);
@@ -28893,7 +30055,7 @@ function useTransactionActionModel({
     selectedChain?.id,
     selectedChain?.networkIdentifier
   ]);
-  const selectedTokenOnBackendChain = useMemo18(() => {
+  const selectedTokenOnBackendChain = useMemo19(() => {
     if (!backendChainId2) return false;
     const target = normalizeChainKey2(backendChainId2);
     return [
@@ -28910,22 +30072,22 @@ function useTransactionActionModel({
     selectedChain?.id,
     selectedChain?.networkIdentifier
   ]);
-  const isNativeSelected = useMemo18(() => {
+  const isNativeSelected = useMemo19(() => {
     const address = selectedToken?.address;
     return isNativeTokenAddress(address, chainType) || isZeroAddrLike(address, chainType) || normalizeTokenAddressForCompare(selectedChain, address) === normalizeTokenAddressForCompare(
       selectedChain,
       getNativeTokenAddress2(chainType)
     );
   }, [chainType, selectedChain, selectedToken?.address]);
-  const spender = useMemo18(() => {
+  const spender = useMemo19(() => {
     const txReq = routeResult?.txReq;
     const addr = txReq?.to ?? txReq?.target;
     return addr ?? null;
   }, [routeResult?.txReq]);
-  const [allowanceWei, setAllowanceWei] = useState22(0n);
-  const [isReadingAllowance, setIsReadingAllowance] = useState22(false);
-  const [isApproving, setIsApproving] = useState22(false);
-  const [gasReservationWei, setGasReservationWei] = useState22(0n);
+  const [allowanceWei, setAllowanceWei] = useState23(0n);
+  const [isReadingAllowance, setIsReadingAllowance] = useState23(false);
+  const [isApproving, setIsApproving] = useState23(false);
+  const [gasReservationWei, setGasReservationWei] = useState23(0n);
   const readAllowance = useCallback19(async () => {
     if (!isEvm || isNativeSelected || !!routeResult?.sponsorship || // sponsored routes: SA approves bridge inside the UO batch
     !backendChainId2 || !selectedTokenOnBackendChain || !walletAddress || !spender || !selectedToken?.address) {
@@ -29165,7 +30327,7 @@ function useTransactionActionModel({
       void estimateGasReservationWei();
     }
   }, [estimateGasReservationWei, routeResult]);
-  const [smartAccountFailed, setSmartAccountFailed] = useState22(false);
+  const [smartAccountFailed, setSmartAccountFailed] = useState23(false);
   useEffect23(() => {
     setSmartAccountFailed(false);
   }, [routeResult?.intentId]);
@@ -29270,7 +30432,7 @@ function useTransactionActionModel({
   ]);
   const isWalletConnected = walletStatus === "connected";
   const canSwipe = parsedAmount > 0 && !!selectedToken && isWalletConnected && !isLoadingRoute && !isSubmitting && !!routeResult && !actionErrorMessage && !isApproving && !isReadingAllowance;
-  const swipeResetKey = useMemo18(() => {
+  const swipeResetKey = useMemo19(() => {
     const tokenAddress = selectedToken ? normalizeAddress2(
       selectedToken.address,
       selectedToken?.chainData?.type ?? selectedToken?.chainData?.chainType
@@ -29501,8 +30663,8 @@ var init_DefaultCryptoPay = __esm({
 });
 
 // src/widget/pages/CryptoPay/index.tsx
-import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useEffect as useEffect24, useMemo as useMemo20 } from "react";
+import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function CryptoPay({ style: _style }) {
   const {
     amount,
@@ -29525,17 +30687,17 @@ function CryptoPay({ style: _style }) {
   const { goBack, setCurrentStep, currentStep } = useDepositNavigation();
   const config = useTrustwareConfig();
   const { fixedFromAmountString, isFixedAmount, minAmountUsd, maxAmountUsd } = useAmountConstraints();
-  const routeRefreshMs = useMemo19(() => {
+  const routeRefreshMs = useMemo20(() => {
     const raw = config.routes?.options?.routeRefreshMs;
     const n = Number(raw);
     return Number.isFinite(n) && n > 0 ? n : void 0;
   }, [config.routes?.options?.routeRefreshMs]);
   const IsPos = (x) => x !== null && x !== void 0 && x.balance !== "0";
-  const showDefaultCryptoPay = useMemo19(() => {
+  const showDefaultCryptoPay = useMemo20(() => {
     const nonZer0Tks = (yourWalletTokens ?? []).filter(IsPos);
     return !yourWalletTokensLoading && nonZer0Tks.length === 0 && yourWalletTokens.length > 0;
   }, [yourWalletTokens, yourWalletTokensLoading]);
-  const showSkeleton = useMemo19(() => {
+  const showSkeleton = useMemo20(() => {
     return (yourWalletTokens ?? []).length === 0;
   }, [yourWalletTokens]);
   const isReady = selectedToken != null && selectedToken?.chainData !== void 0 && !showDefaultCryptoPay && !showSkeleton;
@@ -29640,7 +30802,7 @@ function CryptoPay({ style: _style }) {
     if (isFixedAmount) return;
     setAmount(value.toString());
   };
-  const relayFeeUsd = useMemo19(
+  const relayFeeUsd = useMemo20(
     () => computeRelayFeeUsd(routeResult, isNativeSelected),
     [isNativeSelected, routeResult]
   );
@@ -29741,7 +30903,7 @@ function CryptoPay({ style: _style }) {
             ]
           }
         ),
-        showSkeleton ? /* @__PURE__ */ jsx49(Fragment6, { children: /* @__PURE__ */ jsx49(
+        showSkeleton ? /* @__PURE__ */ jsx49(Fragment7, { children: /* @__PURE__ */ jsx49(
           "div",
           {
             style: {
@@ -29752,8 +30914,8 @@ function CryptoPay({ style: _style }) {
             },
             children: /* @__PURE__ */ jsx49(LoadingSkeleton, {})
           }
-        ) }) : /* @__PURE__ */ jsxs39(Fragment6, { children: [
-          isReady && /* @__PURE__ */ jsxs39(Fragment6, { children: [
+        ) }) : /* @__PURE__ */ jsxs39(Fragment7, { children: [
+          isReady && /* @__PURE__ */ jsxs39(Fragment7, { children: [
             /* @__PURE__ */ jsx49(
               CryptoPayAmountSection,
               {
@@ -29831,7 +30993,7 @@ var init_CryptoPay = __esm({
 });
 
 // src/widget/pages/Processing.tsx
-import { useEffect as useEffect25, useMemo as useMemo20, useRef as useRef12 } from "react";
+import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef12 } from "react";
 import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 function getProgressFromStatus(status) {
   switch (status) {
@@ -29882,15 +31044,15 @@ function Processing({ style }) {
       startPolling(intentId, transactionHash);
     }
   }, [intentId, transactionHash, isPolling, transactionStatus, startPolling]);
-  const progress = useMemo20(
+  const progress = useMemo21(
     () => getProgressFromStatus(transactionStatus),
     [transactionStatus]
   );
-  const stepText = useMemo20(
+  const stepText = useMemo21(
     () => getStepText(transactionStatus),
     [transactionStatus]
   );
-  const explorerUrl = useMemo20(() => {
+  const explorerUrl = useMemo21(() => {
     if (transaction?.fromChainTxUrl) {
       return transaction.fromChainTxUrl;
     }
@@ -30036,15 +31198,15 @@ var init_Processing = __esm({
 });
 
 // src/widget/pages/Success.tsx
-import { lazy, Suspense, useMemo as useMemo21 } from "react";
+import { lazy, Suspense, useMemo as useMemo22 } from "react";
 import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
 function Success({ style }) {
   const { selectedToken, selectedChain, amount } = useDepositForm();
   const { resetState } = useDepositNavigation();
   const { transactionHash } = useDepositTransaction();
   const { transaction } = useTransactionPolling();
-  const parsedAmount = useMemo21(() => parseFloat(amount) || 0, [amount]);
-  const explorerUrl = useMemo21(() => {
+  const parsedAmount = useMemo22(() => parseFloat(amount) || 0, [amount]);
+  const explorerUrl = useMemo22(() => {
     if (transaction?.toChainTxUrl) {
       return transaction.toChainTxUrl;
     }
@@ -30117,7 +31279,7 @@ var init_Success = __esm({
 });
 
 // src/widget/pages/Error.tsx
-import { useMemo as useMemo22, useEffect as useEffect26 } from "react";
+import { useMemo as useMemo23, useEffect as useEffect26 } from "react";
 import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
 function categorizeError(errorMessage) {
   if (!errorMessage) return "unknown";
@@ -30205,19 +31367,19 @@ function Error2({ style }) {
     setErrorMessage,
     transactionHash
   } = useDepositTransaction();
-  const errorCategory = useMemo22(
+  const errorCategory = useMemo23(
     () => categorizeError(errorMessage),
     [errorMessage]
   );
-  const errorTitle = useMemo22(
+  const errorTitle = useMemo23(
     () => getErrorTitle(errorCategory),
     [errorCategory]
   );
-  const errorSuggestion = useMemo22(
+  const errorSuggestion = useMemo23(
     () => getErrorSuggestion(errorCategory),
     [errorCategory]
   );
-  const retryStep = useMemo22(() => getRetryStep(errorCategory), [errorCategory]);
+  const retryStep = useMemo23(() => getRetryStep(errorCategory), [errorCategory]);
   useEffect26(() => {
     if (errorMessage) {
       try {
@@ -30240,7 +31402,7 @@ function Error2({ style }) {
   const handleStartOver = () => {
     resetState();
   };
-  const explorerUrl = useMemo22(() => {
+  const explorerUrl = useMemo23(() => {
     if (transactionHash && selectedChain?.blockExplorerUrls?.length) {
       return `${selectedChain.blockExplorerUrls[0].replace(/\/+$/, "")}/tx/${transactionHash}`;
     }
@@ -30389,18 +31551,18 @@ var init_widgetSteps = __esm({
 });
 
 // src/widget/app/WidgetRouter.tsx
-import { useMemo as useMemo23 } from "react";
+import { useMemo as useMemo24 } from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 function WidgetRouter({
   currentStep,
   navigationDirection,
   stepHistory
 }) {
-  const PageComponent = useMemo23(
+  const PageComponent = useMemo24(
     () => PAGE_COMPONENTS[currentStep],
     [currentStep]
   );
-  const animationClass = useMemo23(() => {
+  const animationClass = useMemo24(() => {
     return navigationDirection === "forward" ? "tw-animate-slide-in-right" : "tw-animate-slide-in-left";
   }, [navigationDirection]);
   return /* @__PURE__ */ jsx53(
@@ -30428,9 +31590,9 @@ var init_WidgetRouter = __esm({
 });
 
 // src/modes/swap/hooks/useSwapRoute.ts
-import { useCallback as useCallback20, useRef as useRef13, useState as useState23 } from "react";
+import { useCallback as useCallback20, useRef as useRef13, useState as useState24 } from "react";
 function useSwapRoute() {
-  const [state, setState] = useState23({
+  const [state, setState] = useState24({
     data: null,
     loading: false,
     error: null
@@ -30494,7 +31656,7 @@ var init_useSwapRoute = __esm({
 });
 
 // src/modes/swap/hooks/useSwapExecution.ts
-import { useCallback as useCallback21, useRef as useRef14, useState as useState24 } from "react";
+import { useCallback as useCallback21, useRef as useRef14, useState as useState25 } from "react";
 import { encodeFunctionData as encodeFunctionData9, erc20Abi as erc20Abi2 } from "viem";
 function normalizeTx(raw) {
   const r = raw;
@@ -30529,7 +31691,7 @@ async function waitForApprovalConfirmation(chainId, txHash) {
   throw new Error("Timed out waiting for approval confirmation");
 }
 function useSwapExecution(fromChain) {
-  const [state, setState] = useState24({
+  const [state, setState] = useState25({
     txStatus: "idle",
     txHash: null,
     intentId: null,
@@ -30905,11 +32067,11 @@ var init_forex = __esm({
 });
 
 // src/modes/swap/hooks/useForex.ts
-import { useEffect as useEffect27, useRef as useRef15, useState as useState25 } from "react";
+import { useEffect as useEffect27, useRef as useRef15, useState as useState26 } from "react";
 function useForex() {
-  const [rates, setRates] = useState25({ USD: 1 });
-  const [error, setError] = useState25(null);
-  const [lastUpdated, setLastUpdated] = useState25(null);
+  const [rates, setRates] = useState26({ USD: 1 });
+  const [error, setError] = useState26(null);
+  const [lastUpdated, setLastUpdated] = useState26(null);
   const timerRef = useRef15(null);
   useEffect27(() => {
     let cancelled = false;
@@ -30948,7 +32110,7 @@ var init_useForex = __esm({
 });
 
 // src/modes/swap/components/SwapTokenSelect.tsx
-import { useState as useState26, useMemo as useMemo24, useEffect as useEffect28 } from "react";
+import { useState as useState27, useMemo as useMemo25, useEffect as useEffect28 } from "react";
 import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 function SwapTokenSelect({
   side,
@@ -30964,9 +32126,9 @@ function SwapTokenSelect({
   allowedTokens,
   excludeToken
 }) {
-  const [localChain, setLocalChain] = useState26(initialChain);
-  const [pinnedTokens, setPinnedTokens] = useState26([]);
-  const [pinnedLoading, setPinnedLoading] = useState26(false);
+  const [localChain, setLocalChain] = useState27(initialChain);
+  const [pinnedTokens, setPinnedTokens] = useState27([]);
+  const [pinnedLoading, setPinnedLoading] = useState27(false);
   useEffect28(() => {
     if (!allowedTokens || allowedTokens.length === 0 || !localChain) {
       setPinnedTokens([]);
@@ -31048,26 +32210,26 @@ function SwapTokenSelect({
     walletAddress,
     yourWalletTokens
   });
-  const allowedSet = useMemo24(() => {
+  const allowedSet = useMemo25(() => {
     if (!allowedTokens || allowedTokens.length === 0) return null;
     return new Set(
       allowedTokens.map((t) => `${t.chainId}:${t.address.toLowerCase()}`)
     );
   }, [allowedTokens]);
-  const filteredWalletTokens = useMemo24(() => {
+  const filteredWalletTokens = useMemo25(() => {
     if (!allowedSet) return rawWalletTokens;
     return rawWalletTokens.filter(
       (t) => allowedSet.has(`${Number(t.chainId)}:${t.address.toLowerCase()}`)
     );
   }, [rawWalletTokens, allowedSet]);
   const excludeKey = excludeToken ? `${Number(excludeToken.chainId)}:${excludeToken.address.toLowerCase()}` : null;
-  const visibleTokens = useMemo24(() => {
+  const visibleTokens = useMemo25(() => {
     if (!excludeKey) return filteredTokens;
     return filteredTokens.filter(
       (t) => `${Number(t.chainId)}:${t.address.toLowerCase()}` !== excludeKey
     );
   }, [filteredTokens, excludeKey]);
-  const visibleWalletTokens = useMemo24(() => {
+  const visibleWalletTokens = useMemo25(() => {
     if (!excludeKey) return filteredWalletTokens;
     return filteredWalletTokens.filter(
       (t) => `${Number(t.chainId)}:${t.address.toLowerCase()}` !== excludeKey
@@ -31160,29 +32322,7 @@ function SwapTokenSelect({
               popularChains
             }
           ),
-          localChain === null ? /* @__PURE__ */ jsx54(
-            "div",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: spacing[4]
-              },
-              children: /* @__PURE__ */ jsx54(
-                "p",
-                {
-                  style: {
-                    fontSize: fontSize.sm,
-                    color: colors.mutedForeground,
-                    textAlign: "center"
-                  },
-                  children: "Select a chain to see tokens"
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsx54(
+          /* @__PURE__ */ jsx54(
             TokenSelectorPanel,
             {
               filteredTokens: visibleTokens,
@@ -31218,8 +32358,8 @@ var init_SwapTokenSelect = __esm({
 });
 
 // src/modes/swap/components/SwapWalletSelector.tsx
-import { useEffect as useEffect29, useMemo as useMemo25, useRef as useRef16, useState as useState27 } from "react";
-import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
+import { useEffect as useEffect29, useMemo as useMemo26, useRef as useRef16, useState as useState28 } from "react";
+import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 function SwapWalletSelector({
   walletStatus,
   walletAddress,
@@ -31235,10 +32375,10 @@ function SwapWalletSelector({
   } = useWalletInfo();
   const walletConnectCfg = TrustwareConfigStore.peek()?.walletConnect;
   const connectWC = useWalletConnectConnect(walletConnectCfg);
-  const [wcConnecting, setWcConnecting] = useState27(false);
-  const [connectingId, setConnectingId] = useState27(null);
-  const [timerExpired, setTimerExpired] = useState27(false);
-  const [selectedNamespace, setSelectedNamespace] = useState27("evm");
+  const [wcConnecting, setWcConnecting] = useState28(false);
+  const [connectingId, setConnectingId] = useState28(null);
+  const [timerExpired, setTimerExpired] = useState28(false);
+  const [selectedNamespace, setSelectedNamespace] = useState28("evm");
   const prevStatusRef = useRef16(walletStatus);
   useEffect29(() => {
     const t = setTimeout(() => setTimerExpired(true), 450);
@@ -31253,7 +32393,7 @@ function SwapWalletSelector({
       prevStatusRef.current = walletStatus;
     }
   }, [walletStatus]);
-  const filteredWallets = useMemo25(
+  const filteredWallets = useMemo26(
     () => detected.filter(
       (w) => (w.meta?.ecosystem ?? "").toLowerCase() === selectedNamespace
     ),
@@ -31373,58 +32513,38 @@ function SwapWalletSelector({
               children: "Connect Wallet"
             }
           ),
-          /* @__PURE__ */ jsxs44(
+          /* @__PURE__ */ jsx55(
             "div",
             {
               style: {
-                position: "relative",
                 display: "flex",
                 alignItems: "center",
-                borderRadius: "9999px",
-                background: colors.background,
-                border: `1px solid ${colors.mutedForeground}`,
-                padding: "3px"
+                borderRadius: borderRadius.lg,
+                backgroundColor: colors.muted,
+                padding: "3px",
+                gap: "2px"
               },
-              children: [
-                /* @__PURE__ */ jsx55(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: 3,
-                      bottom: 3,
-                      width: "calc(50% - 3px)",
-                      borderRadius: "9999px",
-                      background: `linear-gradient(to bottom, ${colors.zinc[100]}, ${colors.zinc[200]})`,
-                      border: `1px solid ${colors.mutedForeground}`,
-                      transition: "transform 300ms ease-out",
-                      transform: selectedNamespace === "evm" ? "translateX(0)" : "translateX(100%)"
-                    }
-                  }
-                ),
-                tabs.map((t) => /* @__PURE__ */ jsx55(
-                  "button",
-                  {
-                    onClick: () => setSelectedNamespace(t.id),
-                    style: {
-                      position: "relative",
-                      zIndex: 10,
-                      padding: "4px 11px",
-                      fontSize: "10px",
-                      outline: "none",
-                      fontWeight: 600,
-                      borderRadius: "9999px",
-                      background: "transparent",
-                      border: "none",
-                      cursor: "pointer",
-                      transition: "color 200ms",
-                      color: selectedNamespace === t.id ? colors.black : colors.mutedForeground
-                    },
-                    children: t.label
+              children: tabs.map((t) => /* @__PURE__ */ jsx55(
+                "button",
+                {
+                  onClick: () => setSelectedNamespace(t.id),
+                  style: {
+                    padding: `${spacing[1]} ${spacing[3]}`,
+                    fontSize: fontSize.sm,
+                    fontWeight: fontWeight.medium,
+                    borderRadius: borderRadius.md,
+                    background: selectedNamespace === t.id ? colors.card : "transparent",
+                    border: selectedNamespace === t.id ? `1px solid ${colors.border}` : "1px solid transparent",
+                    cursor: "pointer",
+                    transition: "all 0.15s",
+                    color: selectedNamespace === t.id ? colors.foreground : colors.mutedForeground,
+                    boxShadow: selectedNamespace === t.id ? "0 1px 3px rgba(0,0,0,0.08)" : "none",
+                    outline: "none"
                   },
-                  t.id
-                ))
-              ]
+                  children: t.label
+                },
+                t.id
+              ))
             }
           )
         ]
@@ -31697,7 +32817,7 @@ function SwapWalletSelector({
           })
         }
       ),
-      selectedNamespace === "evm" && /* @__PURE__ */ jsxs44(Fragment7, { children: [
+      selectedNamespace === "evm" && /* @__PURE__ */ jsxs44(Fragment8, { children: [
         /* @__PURE__ */ jsx55(
           "div",
           {
@@ -31939,11 +33059,12 @@ import {
   Suspense as Suspense2,
   useCallback as useCallback22,
   useEffect as useEffect30,
-  useMemo as useMemo26,
+  useMemo as useMemo27,
   useRef as useRef17,
-  useState as useState28
+  useState as useState29
 } from "react";
-import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
+import ReactDOM from "react-dom";
+import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 function fmtAmount(n, max = 6) {
   if (!isFinite(n) || n === 0) return "0";
   return n.toLocaleString(void 0, { maximumFractionDigits: max });
@@ -32032,35 +33153,35 @@ function RateRow({ label, value }) {
   );
 }
 function SwapMode({
-  theme = "system",
+  theme: themeProp,
   style
 }) {
-  const [stage, setStage] = useState28("home");
-  const [fromToken, setFromToken] = useState28(
+  const [stage, setStage] = useState29("home");
+  const [fromToken, setFromToken] = useState29(
     null
   );
-  const [fromChain, setFromChain] = useState28(null);
-  const [toToken, setToToken] = useState28(null);
-  const [toChain, setToChain] = useState28(null);
-  const [amount, setAmount] = useState28("");
-  const [amountInputMode, setAmountInputMode] = useState28(
+  const [fromChain, setFromChain] = useState29(null);
+  const [toToken, setToToken] = useState29(null);
+  const [toChain, setToChain] = useState29(null);
+  const [amount, setAmount] = useState29("");
+  const [amountInputMode, setAmountInputMode] = useState29(
     "usd"
   );
-  const [hoverSell, setHoverSell] = useState28(false);
-  const [showRateDetails, setShowRateDetails] = useState28(false);
-  const [showReviewDetails, setShowReviewDetails] = useState28(false);
-  const [showSettings, setShowSettings] = useState28(false);
-  const [maxApproval, setMaxApproval] = useState28(false);
-  const [slippage, setSlippage] = useState28(0.5);
-  const [slippageInput, setSlippageInput] = useState28("");
-  const [selectedCurrency, setSelectedCurrency] = useState28("USD");
-  const [showCurrencyDropdown, setShowCurrencyDropdown] = useState28(false);
-  const [completedAt, setCompletedAt] = useState28(null);
-  const [copiedHash, setCopiedHash] = useState28(null);
-  const [rateUpdated, setRateUpdated] = useState28(false);
+  const [hoverSell, setHoverSell] = useState29(false);
+  const [showRateDetails, setShowRateDetails] = useState29(false);
+  const [showReviewDetails, setShowReviewDetails] = useState29(false);
+  const [showSettings, setShowSettings] = useState29(false);
+  const [maxApproval, setMaxApproval] = useState29(false);
+  const [slippage, setSlippage] = useState29(0.5);
+  const [slippageInput, setSlippageInput] = useState29("");
+  const [selectedCurrency, setSelectedCurrency] = useState29("USD");
+  const [showCurrencyDropdown, setShowCurrencyDropdown] = useState29(false);
+  const [completedAt, setCompletedAt] = useState29(null);
+  const [copiedHash, setCopiedHash] = useState29(null);
+  const [rateUpdated, setRateUpdated] = useState29(false);
   const prevToAmountRef = useRef17(null);
-  const [destAddress, setDestAddress] = useState28("");
-  const [quoteAge, setQuoteAge] = useState28(0);
+  const [destAddress, setDestAddress] = useState29("");
+  const [quoteAge, setQuoteAge] = useState29(0);
   const quoteTimestampRef = useRef17(null);
   const latestFetchParamsRef = useRef17(null);
   const { rates: forexRates } = useForex();
@@ -32081,7 +33202,11 @@ function SwapMode({
   const settingsRef = useRef17(null);
   const currencyDropdownRef = useRef17(null);
   const { emitEvent } = useTrustware();
-  const { features } = useTrustwareConfig();
+  const { features, theme: configTheme } = useTrustwareConfig();
+  const effectiveThemeSetting = themeProp ?? configTheme ?? "system";
+  const { resolvedTheme, toggleTheme } = useThemePreference(
+    effectiveThemeSetting
+  );
   const defaultDestRef = features.swapDefaultDestToken;
   const lockDestToken = features.swapLockDestToken && !!defaultDestRef;
   const allowedDestTokens = features.swapAllowedDestTokens;
@@ -32091,21 +33216,21 @@ function SwapMode({
     isLoading: chainsLoading,
     error: chainsError
   } = useChains();
-  const allowedDestChainIds = useMemo26(() => {
+  const allowedDestChainIds = useMemo27(() => {
     if (!allowedDestTokens || allowedDestTokens.length === 0) return null;
     return new Set(allowedDestTokens.map((t) => t.chainId));
   }, [allowedDestTokens]);
-  const toPopularChains = useMemo26(
+  const toPopularChains = useMemo27(
     () => allowedDestChainIds ? popularChains.filter(
       (c) => allowedDestChainIds.has(Number(c.chainId))
     ) : popularChains,
     [popularChains, allowedDestChainIds]
   );
-  const toOtherChains = useMemo26(
+  const toOtherChains = useMemo27(
     () => allowedDestChainIds ? otherChains.filter((c) => allowedDestChainIds.has(Number(c.chainId))) : otherChains,
     [otherChains, allowedDestChainIds]
   );
-  const allChains = useMemo26(
+  const allChains = useMemo27(
     () => [...popularChains, ...otherChains],
     [popularChains, otherChains]
   );
@@ -32158,18 +33283,18 @@ function SwapMode({
   });
   const route = useSwapRoute();
   const execution = useSwapExecution(fromChain);
-  const fromTokenPriceUSD = useMemo26(() => {
+  const fromTokenPriceUSD = useMemo27(() => {
     const p = fromToken?.usdPrice;
     return typeof p === "number" && Number.isFinite(p) && p > 0 ? p : 0;
   }, [fromToken]);
   const hasFromUsdPrice = fromTokenPriceUSD > 0;
-  const toTokenPriceUSD = useMemo26(() => {
+  const toTokenPriceUSD = useMemo27(() => {
     const p = toToken?.usdPrice;
     return typeof p === "number" && Number.isFinite(p) && p > 0 ? p : 0;
   }, [toToken]);
   const hasToUsdPrice = toTokenPriceUSD > 0;
   const rawSellNum = parseFloat(amount) || 0;
-  const usdSellNum = useMemo26(() => {
+  const usdSellNum = useMemo27(() => {
     if (amountInputMode === "usd") return rawSellNum / currencyRate;
     return hasFromUsdPrice ? rawSellNum * fromTokenPriceUSD : 0;
   }, [
@@ -32179,7 +33304,7 @@ function SwapMode({
     hasFromUsdPrice,
     fromTokenPriceUSD
   ]);
-  const tokenSellNum = useMemo26(() => {
+  const tokenSellNum = useMemo27(() => {
     if (amountInputMode === "usd") {
       return hasFromUsdPrice && fromTokenPriceUSD > 0 ? usdSellNum / fromTokenPriceUSD : 0;
     }
@@ -32191,7 +33316,7 @@ function SwapMode({
     hasFromUsdPrice,
     fromTokenPriceUSD
   ]);
-  const tokenAmountStr = useMemo26(() => {
+  const tokenAmountStr = useMemo27(() => {
     if (tokenSellNum <= 0) return "";
     const decimals = fromToken?.decimals ?? 18;
     return truncateDecimal(tokenSellNum, Math.min(decimals, 18));
@@ -32398,7 +33523,7 @@ function SwapMode({
     fromToken?.decimals,
     route
   ]);
-  const fromBalance = useMemo26(() => {
+  const fromBalance = useMemo27(() => {
     const walletToken = fromToken;
     if (!walletToken || !("balance" in walletToken)) return null;
     const raw = walletToken.balance;
@@ -32408,7 +33533,7 @@ function SwapMode({
     return Number.isFinite(n) ? n : null;
   }, [fromToken]);
   const balanceUsd = fromBalance !== null && hasFromUsdPrice ? fromBalance * fromTokenPriceUSD : null;
-  const estimatedToAmount = useMemo26(() => {
+  const estimatedToAmount = useMemo27(() => {
     if (tokenSellNum <= 0 || !hasFromUsdPrice || !hasToUsdPrice) return null;
     return tokenSellNum * (fromTokenPriceUSD / toTokenPriceUSD);
   }, [
@@ -32418,10 +33543,10 @@ function SwapMode({
     hasFromUsdPrice,
     hasToUsdPrice
   ]);
-  const backendToUsdStr = useMemo26(() => {
+  const backendToUsdStr = useMemo27(() => {
     return route.data?.finalExchangeRate?.toAmountMinUSD ?? route.data?.route?.estimate?.toAmountMinUsd ?? route.data?.route?.estimate?.toAmountUsd ?? null;
   }, [route.data]);
-  const toAmount = useMemo26(() => {
+  const toAmount = useMemo27(() => {
     if (backendToUsdStr && toTokenPriceUSD > 0) {
       const usd = parseFloat(backendToUsdStr);
       if (Number.isFinite(usd) && usd > 0) return usd / toTokenPriceUSD;
@@ -32447,7 +33572,7 @@ function SwapMode({
     estimatedToAmount
   ]);
   const fromUsd = usdSellNum;
-  const toUsd = useMemo26(() => {
+  const toUsd = useMemo27(() => {
     if (backendToUsdStr) {
       const n = parseFloat(backendToUsdStr);
       if (Number.isFinite(n) && n > 0) return n;
@@ -32458,12 +33583,12 @@ function SwapMode({
   const isEstimate = !route.data;
   const USD_EPSILON = 1e-3;
   const displayToUsd = toUsd > USD_EPSILON ? toUsd : estimatedToAmount !== null && hasToUsdPrice ? estimatedToAmount * toTokenPriceUSD : 0;
-  const priceImpact = useMemo26(() => {
+  const priceImpact = useMemo27(() => {
     if (!route.data || fromUsd < 0.01 || displayToUsd < 0.01) return null;
     const impact = 1 - displayToUsd / fromUsd;
     return impact > 1e-3 ? impact : null;
   }, [route.data, fromUsd, displayToUsd]);
-  const routePath = useMemo26(() => {
+  const routePath = useMemo27(() => {
     if (!route.data) return null;
     const provider = route.data.route?.provider;
     const steps = route.data.route?.steps;
@@ -32490,19 +33615,19 @@ function SwapMode({
     return null;
   }, [route.data, fromToken?.symbol, toToken?.symbol]);
   const isGasSponsored = !!route.data?.sponsorship;
-  const networkCostUsd = useMemo26(() => {
+  const networkCostUsd = useMemo27(() => {
     const fees = route.data?.route?.estimate?.fees;
     if (!fees?.length) return null;
     const gasTotal = fees.filter((f) => f.type?.toLowerCase().includes("gas")).reduce((sum, f) => sum + (Number(f.amountUsd) || 0), 0);
     return gasTotal > 0 ? gasTotal : null;
   }, [route.data]);
-  const protocolFeeUsd = useMemo26(() => {
+  const protocolFeeUsd = useMemo27(() => {
     const fees = route.data?.route?.estimate?.fees;
     if (!fees?.length) return null;
     const total = fees.filter((f) => !f.type?.toLowerCase().includes("gas")).reduce((sum, f) => sum + (Number(f.amountUsd) || 0), 0);
     return total > 0 ? total : null;
   }, [route.data]);
-  const exchangeRate = useMemo26(() => {
+  const exchangeRate = useMemo27(() => {
     if (!hasFromUsdPrice || !hasToUsdPrice) return null;
     return toTokenPriceUSD / fromTokenPriceUSD;
   }, [fromTokenPriceUSD, toTokenPriceUSD, hasFromUsdPrice, hasToUsdPrice]);
@@ -32647,7 +33772,7 @@ function SwapMode({
     return () => document.removeEventListener("mousedown", handler);
   }, [showCurrencyDropdown]);
   if (stage === "select-from") {
-    return /* @__PURE__ */ jsx56(WidgetContainer, { theme, style, children: /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx56(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ jsx56(
       SwapTokenSelect,
       {
         side: "from",
@@ -32665,7 +33790,7 @@ function SwapMode({
     ) });
   }
   if (stage === "select-to" && !lockDestToken) {
-    return /* @__PURE__ */ jsx56(WidgetContainer, { theme, style, children: /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx56(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ jsx56(
       SwapTokenSelect,
       {
         side: "to",
@@ -32684,7 +33809,7 @@ function SwapMode({
     ) });
   }
   if (stage === "connect-wallet") {
-    return /* @__PURE__ */ jsxs45(WidgetContainer, { theme, style, children: [
+    return /* @__PURE__ */ jsxs45(WidgetContainer, { theme: resolvedTheme, style, children: [
       /* @__PURE__ */ jsx56(
         SwapWalletSelector,
         {
@@ -32727,7 +33852,7 @@ function SwapMode({
     const offset = circ - progress / 100 * circ;
     const isApproving = txStatus === "approving";
     const title = isApproving ? "Approving..." : "Order Submitted";
-    return /* @__PURE__ */ jsx56(WidgetContainer, { theme, style, children: /* @__PURE__ */ jsxs45("div", { style: { padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}` }, children: [
+    return /* @__PURE__ */ jsx56(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ jsxs45("div", { style: { padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}` }, children: [
       /* @__PURE__ */ jsxs45(
         "div",
         {
@@ -33123,7 +34248,7 @@ function SwapMode({
                           padding: 0,
                           transition: "color 0.15s"
                         },
-                        children: isCopied ? "Copied!" : /* @__PURE__ */ jsxs45(Fragment8, { children: [
+                        children: isCopied ? "Copied!" : /* @__PURE__ */ jsxs45(Fragment9, { children: [
                           txHash.slice(0, 6),
                           "\u2026",
                           txHash.slice(-4),
@@ -33177,7 +34302,7 @@ function SwapMode({
       dateStyle: "medium",
       timeStyle: "short"
     }) ?? null;
-    return /* @__PURE__ */ jsx56(WidgetContainer, { theme, style, children: /* @__PURE__ */ jsxs45("div", { style: { position: "relative", overflow: "hidden" }, children: [
+    return /* @__PURE__ */ jsx56(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ jsxs45("div", { style: { position: "relative", overflow: "hidden" }, children: [
       /* @__PURE__ */ jsx56(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx56(ConfettiEffect3, { isActive: true, pieceCount: 60, clearDelay: 4e3 }) }),
       /* @__PURE__ */ jsxs45("div", { style: { padding: `${spacing[6]} ${spacing[6]} 0` }, children: [
         /* @__PURE__ */ jsxs45(
@@ -33256,30 +34381,58 @@ function SwapMode({
                     fontSize: fontSize.sm
                   },
                   children: [
-                    /* @__PURE__ */ jsx56("span", { style: { color: colors.mutedForeground }, children: "You sold" }),
                     /* @__PURE__ */ jsxs45(
-                      "span",
+                      "div",
                       {
                         style: {
-                          display: "inline-flex",
+                          display: "flex",
                           alignItems: "center",
-                          gap: spacing[2],
+                          gap: spacing[2]
+                        },
+                        children: [
+                          fromToken?.iconUrl && /* @__PURE__ */ jsxs45("div", { style: { position: "relative", flexShrink: 0 }, children: [
+                            /* @__PURE__ */ jsx56(
+                              "img",
+                              {
+                                src: fromToken.iconUrl,
+                                alt: "",
+                                style: {
+                                  width: "1.375rem",
+                                  height: "1.375rem",
+                                  borderRadius: "9999px"
+                                }
+                              }
+                            ),
+                            fromChain?.chainIconURI && /* @__PURE__ */ jsx56(
+                              "img",
+                              {
+                                src: fromChain.chainIconURI,
+                                alt: "",
+                                style: {
+                                  position: "absolute",
+                                  bottom: -2,
+                                  right: -2,
+                                  width: "0.625rem",
+                                  height: "0.625rem",
+                                  borderRadius: "9999px",
+                                  border: `1.5px solid ${colors.background}`,
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx56("span", { style: { color: colors.mutedForeground }, children: "You sold" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs45(
+                      "span",
+                      {
+                        style: {
                           fontWeight: fontWeight.semibold,
                           color: colors.foreground
                         },
                         children: [
-                          fromToken?.iconUrl && /* @__PURE__ */ jsx56(
-                            "img",
-                            {
-                              src: fromToken.iconUrl,
-                              style: {
-                                width: "1.25rem",
-                                height: "1.25rem",
-                                borderRadius: "9999px"
-                              },
-                              alt: ""
-                            }
-                          ),
                           fmtAmount(tokenSellNum, 4),
                           " ",
                           fromToken?.symbol
@@ -33300,30 +34453,58 @@ function SwapMode({
                     marginTop: spacing[3]
                   },
                   children: [
-                    /* @__PURE__ */ jsx56("span", { style: { color: colors.mutedForeground }, children: "Received" }),
                     /* @__PURE__ */ jsxs45(
-                      "span",
+                      "div",
                       {
                         style: {
-                          display: "inline-flex",
+                          display: "flex",
                           alignItems: "center",
-                          gap: spacing[2],
+                          gap: spacing[2]
+                        },
+                        children: [
+                          toToken?.iconUrl && /* @__PURE__ */ jsxs45("div", { style: { position: "relative", flexShrink: 0 }, children: [
+                            /* @__PURE__ */ jsx56(
+                              "img",
+                              {
+                                src: toToken.iconUrl,
+                                alt: "",
+                                style: {
+                                  width: "1.375rem",
+                                  height: "1.375rem",
+                                  borderRadius: "9999px"
+                                }
+                              }
+                            ),
+                            toChain?.chainIconURI && /* @__PURE__ */ jsx56(
+                              "img",
+                              {
+                                src: toChain.chainIconURI,
+                                alt: "",
+                                style: {
+                                  position: "absolute",
+                                  bottom: -2,
+                                  right: -2,
+                                  width: "0.625rem",
+                                  height: "0.625rem",
+                                  borderRadius: "9999px",
+                                  border: `1.5px solid ${colors.background}`,
+                                  objectFit: "cover"
+                                }
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx56("span", { style: { color: colors.mutedForeground }, children: "Received" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs45(
+                      "span",
+                      {
+                        style: {
                           fontWeight: fontWeight.semibold,
                           color: colors.foreground
                         },
                         children: [
-                          toToken?.iconUrl && /* @__PURE__ */ jsx56(
-                            "img",
-                            {
-                              src: toToken.iconUrl,
-                              style: {
-                                width: "1.25rem",
-                                height: "1.25rem",
-                                borderRadius: "9999px"
-                              },
-                              alt: ""
-                            }
-                          ),
                           finalToAmount !== null ? fmtAmount(finalToAmount, 4) : "\u2014",
                           " ",
                           toToken?.symbol
@@ -33374,13 +34555,6 @@ function SwapMode({
                         value: effectiveRate
                       }
                     ),
-                    (fromChain?.networkName ?? fromChain?.axelarChainName) && /* @__PURE__ */ jsx56(
-                      SuccessReceiptRow,
-                      {
-                        label: "Network",
-                        value: fromChain?.networkName ?? fromChain?.axelarChainName
-                      }
-                    ),
                     completedStr && /* @__PURE__ */ jsx56(SuccessReceiptRow, { label: "Completed", value: completedStr }),
                     txHash && (() => {
                       const srcUrl = buildExplorerUrl(
@@ -33689,7 +34863,7 @@ function SwapMode({
     ] }) });
   }
   if (stage === "error") {
-    return /* @__PURE__ */ jsx56(WidgetContainer, { theme, style, children: /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsx56(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ jsxs45(
       "div",
       {
         style: {
@@ -33823,422 +34997,408 @@ function SwapMode({
   if (stage === "review") {
     const reviewToAmount = toAmount ?? displayToAmount;
     const reviewToUsd = toUsd > 0 ? toUsd : displayToUsd;
-    return /* @__PURE__ */ jsx56(WidgetContainer, { theme, style, children: /* @__PURE__ */ jsxs45("div", { style: { padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}` }, children: [
-      /* @__PURE__ */ jsxs45(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: spacing[5]
-          },
-          children: [
-            /* @__PURE__ */ jsx56(
-              "span",
-              {
-                style: {
-                  fontSize: fontSize.sm,
-                  fontWeight: fontWeight.medium,
-                  color: colors.mutedForeground
-                },
-                children: "You're swapping"
-              }
-            ),
-            /* @__PURE__ */ jsx56(
-              "button",
-              {
-                onClick: () => setStage("home"),
-                style: {
-                  width: "2rem",
-                  height: "2rem",
-                  borderRadius: "9999px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: "transparent",
-                  border: 0,
-                  cursor: "pointer"
-                },
-                children: /* @__PURE__ */ jsx56(
-                  "svg",
+    return /* @__PURE__ */ jsx56(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ jsxs45(
+      "div",
+      {
+        style: {
+          padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}`,
+          maxHeight: "85vh",
+          overflowY: "auto"
+        },
+        children: [
+          /* @__PURE__ */ jsxs45(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                marginBottom: spacing[5]
+              },
+              children: [
+                /* @__PURE__ */ jsx56(
+                  "span",
                   {
                     style: {
-                      width: "1.25rem",
-                      height: "1.25rem",
-                      color: colors.foreground
+                      fontSize: fontSize.sm,
+                      fontWeight: fontWeight.medium,
+                      color: colors.mutedForeground
                     },
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: 2,
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx56("path", { d: "M18 6L6 18M6 6l12 12" })
+                    children: "You're swapping"
+                  }
+                ),
+                /* @__PURE__ */ jsx56(
+                  "button",
+                  {
+                    onClick: () => setStage("home"),
+                    style: {
+                      width: "2rem",
+                      height: "2rem",
+                      borderRadius: "9999px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      backgroundColor: "transparent",
+                      border: 0,
+                      cursor: "pointer"
+                    },
+                    children: /* @__PURE__ */ jsx56(
+                      "svg",
+                      {
+                        style: {
+                          width: "1.25rem",
+                          height: "1.25rem",
+                          color: colors.foreground
+                        },
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: 2,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: /* @__PURE__ */ jsx56("path", { d: "M18 6L6 18M6 6l12 12" })
+                      }
+                    )
                   }
                 )
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs45(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          },
-          children: [
-            /* @__PURE__ */ jsxs45("div", { children: [
-              /* @__PURE__ */ jsxs45(
-                "p",
-                {
-                  style: {
-                    fontSize: "1.75rem",
-                    fontWeight: fontWeight.semibold,
-                    color: colors.foreground,
-                    lineHeight: 1.2
-                  },
-                  children: [
-                    fmtAmount(tokenSellNum, 5),
-                    " ",
-                    fromToken?.symbol
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx56(
-                "p",
-                {
-                  style: {
-                    fontSize: fontSize.sm,
-                    color: colors.mutedForeground,
-                    marginTop: "0.125rem"
-                  },
-                  children: fmtLocal(fromUsd)
-                }
-              )
-            ] }),
-            fromToken?.iconUrl && /* @__PURE__ */ jsx56(
-              TokenIcon,
-              {
-                icon: fromToken.iconUrl,
-                chainIcon: fromChain?.chainIconURI,
-                size: "lg"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx56(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "center",
-            margin: `${spacing[3]} 0`
-          },
-          children: /* @__PURE__ */ jsx56(
-            "svg",
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs45(
+            "div",
             {
               style: {
-                width: "1rem",
-                height: "1rem",
-                color: colors.mutedForeground
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
               },
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: 2,
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: /* @__PURE__ */ jsx56("path", { d: "M12 5v14m-7-7l7 7 7-7" })
+              children: [
+                /* @__PURE__ */ jsxs45("div", { children: [
+                  /* @__PURE__ */ jsxs45(
+                    "p",
+                    {
+                      style: {
+                        fontSize: "1.75rem",
+                        fontWeight: fontWeight.semibold,
+                        color: colors.foreground,
+                        lineHeight: 1.2
+                      },
+                      children: [
+                        fmtAmount(tokenSellNum, 5),
+                        " ",
+                        fromToken?.symbol
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx56(
+                    "p",
+                    {
+                      style: {
+                        fontSize: fontSize.sm,
+                        color: colors.mutedForeground,
+                        marginTop: "0.125rem"
+                      },
+                      children: fmtLocal(fromUsd)
+                    }
+                  )
+                ] }),
+                fromToken?.iconUrl && /* @__PURE__ */ jsx56(
+                  TokenIcon,
+                  {
+                    icon: fromToken.iconUrl,
+                    chainIcon: fromChain?.chainIconURI,
+                    size: "lg"
+                  }
+                )
+              ]
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs45(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          },
-          children: [
-            /* @__PURE__ */ jsxs45("div", { children: [
-              /* @__PURE__ */ jsxs45(
-                "p",
-                {
-                  style: {
-                    fontSize: "1.75rem",
-                    fontWeight: fontWeight.semibold,
-                    color: colors.foreground,
-                    lineHeight: 1.2
-                  },
-                  children: [
-                    reviewToAmount !== null ? fmtAmount(reviewToAmount, 5) : "\u2014",
-                    " ",
-                    toToken?.symbol
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx56(
-                "p",
+          ),
+          /* @__PURE__ */ jsx56(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                margin: `${spacing[3]} 0`
+              },
+              children: /* @__PURE__ */ jsx56(
+                "svg",
                 {
                   style: {
-                    fontSize: fontSize.sm,
-                    color: colors.mutedForeground,
-                    marginTop: "0.125rem"
+                    width: "1rem",
+                    height: "1rem",
+                    color: colors.mutedForeground
                   },
-                  children: fmtLocal(reviewToUsd)
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx56("path", { d: "M12 5v14m-7-7l7 7 7-7" })
                 }
               )
-            ] }),
-            toToken?.iconUrl && /* @__PURE__ */ jsx56(
-              TokenIcon,
-              {
-                icon: toToken.iconUrl,
-                chainIcon: toChain?.chainIconURI,
-                size: "lg"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs45(
-        "button",
-        {
-          onClick: () => setShowReviewDetails((v) => !v),
-          style: {
-            margin: `${spacing[5]} 0`,
-            display: "flex",
-            alignItems: "center",
-            gap: spacing[2],
-            width: "100%",
-            background: "none",
-            border: 0,
-            cursor: "pointer",
-            color: colors.foreground,
-            fontSize: fontSize.sm,
-            fontWeight: fontWeight.medium
-          },
-          children: [
-            /* @__PURE__ */ jsx56(
-              "div",
-              {
-                style: { flex: 1, height: "1px", backgroundColor: colors.border }
-              }
-            ),
-            /* @__PURE__ */ jsxs45(
-              "span",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.25rem",
-                  padding: `0 ${spacing[2]}`,
-                  whiteSpace: "nowrap"
-                },
-                children: [
-                  showReviewDetails ? "Show less" : "Show more",
-                  /* @__PURE__ */ jsx56(
-                    "svg",
+            }
+          ),
+          /* @__PURE__ */ jsxs45(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs45("div", { children: [
+                  /* @__PURE__ */ jsxs45(
+                    "p",
                     {
                       style: {
-                        width: "0.875rem",
-                        height: "0.875rem",
-                        transform: showReviewDetails ? "rotate(180deg)" : void 0,
-                        transition: "transform 0.2s"
+                        fontSize: "1.75rem",
+                        fontWeight: fontWeight.semibold,
+                        color: colors.foreground,
+                        lineHeight: 1.2
                       },
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: 2,
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      children: /* @__PURE__ */ jsx56("path", { d: "M6 9l6 6 6-6" })
+                      children: [
+                        reviewToAmount !== null ? fmtAmount(reviewToAmount, 5) : "\u2014",
+                        " ",
+                        toToken?.symbol
+                      ]
                     }
                   ),
-                  route.data && /* @__PURE__ */ jsxs45(
-                    "svg",
+                  /* @__PURE__ */ jsx56(
+                    "p",
                     {
-                      width: "14",
-                      height: "14",
-                      viewBox: "0 0 14 14",
                       style: {
-                        transform: "rotate(-90deg)",
-                        flexShrink: 0,
-                        opacity: 0.75,
-                        marginLeft: "0.125rem"
+                        fontSize: fontSize.sm,
+                        color: colors.mutedForeground,
+                        marginTop: "0.125rem"
                       },
-                      children: [
-                        /* @__PURE__ */ jsx56(
-                          "circle",
-                          {
-                            cx: "7",
-                            cy: "7",
-                            r: "5",
-                            fill: "none",
-                            stroke: "hsl(var(--tw-border))",
-                            strokeWidth: "1.5"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx56(
-                          "circle",
-                          {
-                            cx: "7",
-                            cy: "7",
-                            r: "5",
-                            fill: "none",
-                            stroke: quoteAge >= QUOTE_TTL - 10 ? colors.destructive : colors.primary,
-                            strokeWidth: "1.5",
-                            strokeLinecap: "round",
-                            strokeDasharray: "31.416",
-                            strokeDashoffset: 31.416 * (quoteAge / QUOTE_TTL),
-                            style: { transition: "stroke-dashoffset 1s linear" }
-                          }
-                        )
-                      ]
+                      children: fmtLocal(reviewToUsd)
                     }
                   )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx56(
-              "div",
-              {
-                style: { flex: 1, height: "1px", backgroundColor: colors.border }
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs45(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: spacing[3],
-            fontSize: fontSize.sm
-          },
-          children: [
-            showReviewDetails && exchangeRate !== null && /* @__PURE__ */ jsx56(
-              ReviewDetailRow,
-              {
-                label: "Rate",
-                tooltip: "Current exchange rate between the two tokens",
-                value: `1 ${fromToken?.symbol} = ${fmtAmount(1 / (exchangeRate ?? 1), 4)} ${toToken?.symbol} ($${fmtAmount(fromTokenPriceUSD, 2)})`
-              }
-            ),
-            /* @__PURE__ */ jsx56(
-              ReviewDetailRow,
-              {
-                label: "Fee",
-                tooltip: "Protocol fee charged by the bridge or DEX",
-                value: /* @__PURE__ */ jsx56(
-                  "span",
+                ] }),
+                toToken?.iconUrl && /* @__PURE__ */ jsx56(
+                  TokenIcon,
                   {
-                    style: {
-                      color: colors.foreground,
-                      fontWeight: fontWeight.medium
-                    },
-                    children: protocolFeeUsd !== null ? fmtLocal(protocolFeeUsd) : "Free"
+                    icon: toToken.iconUrl,
+                    chainIcon: toChain?.chainIconURI,
+                    size: "lg"
                   }
                 )
-              }
-            ),
-            /* @__PURE__ */ jsx56(
-              ReviewDetailRow,
-              {
-                label: "Network cost",
-                tooltip: "Estimated gas fee paid to the blockchain network",
-                value: isGasSponsored ? /* @__PURE__ */ jsx56(SponsoredBadge, {}) : networkCostUsd !== null ? /* @__PURE__ */ jsxs45(
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs45(
+            "button",
+            {
+              onClick: () => setShowReviewDetails((v) => !v),
+              style: {
+                margin: `${spacing[5]} 0`,
+                display: "flex",
+                alignItems: "center",
+                gap: spacing[2],
+                width: "100%",
+                background: "none",
+                border: 0,
+                cursor: "pointer",
+                color: colors.mutedForeground,
+                fontSize: fontSize.sm,
+                fontWeight: fontWeight.medium,
+                padding: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx56(
+                  "div",
+                  {
+                    style: { flex: 1, height: "1px", backgroundColor: colors.border }
+                  }
+                ),
+                /* @__PURE__ */ jsxs45(
                   "span",
                   {
                     style: {
                       display: "flex",
                       alignItems: "center",
                       gap: "0.25rem",
-                      color: colors.mutedForeground
+                      padding: `0 ${spacing[2]}`,
+                      whiteSpace: "nowrap"
                     },
                     children: [
-                      /* @__PURE__ */ jsx56(GasIcon, { size: "0.875rem" }),
-                      fmtLocal(networkCostUsd)
+                      showReviewDetails ? "Hide details" : "View details",
+                      /* @__PURE__ */ jsx56(
+                        "svg",
+                        {
+                          style: {
+                            width: "0.875rem",
+                            height: "0.875rem",
+                            transform: showReviewDetails ? "rotate(180deg)" : void 0,
+                            transition: "transform 0.2s"
+                          },
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 2,
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: /* @__PURE__ */ jsx56("path", { d: "M6 9l6 6 6-6" })
+                        }
+                      ),
+                      route.data && /* @__PURE__ */ jsxs45(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 14 14",
+                          style: {
+                            transform: "rotate(-90deg)",
+                            flexShrink: 0,
+                            opacity: 0.75,
+                            marginLeft: "0.125rem"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx56(
+                              "circle",
+                              {
+                                cx: "7",
+                                cy: "7",
+                                r: "5",
+                                fill: "none",
+                                stroke: "hsl(var(--tw-border))",
+                                strokeWidth: "1.5"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx56(
+                              "circle",
+                              {
+                                cx: "7",
+                                cy: "7",
+                                r: "5",
+                                fill: "none",
+                                stroke: quoteAge >= QUOTE_TTL - 10 ? colors.destructive : colors.primary,
+                                strokeWidth: "1.5",
+                                strokeLinecap: "round",
+                                strokeDasharray: "31.416",
+                                strokeDashoffset: 31.416 * (quoteAge / QUOTE_TTL),
+                                style: { transition: "stroke-dashoffset 1s linear" }
+                              }
+                            )
+                          ]
+                        }
+                      )
                     ]
                   }
-                ) : /* @__PURE__ */ jsx56("span", { style: { color: colors.mutedForeground }, children: "\u2014" })
-              }
-            ),
-            showReviewDetails && /* @__PURE__ */ jsxs45(Fragment8, { children: [
-              /* @__PURE__ */ jsx56(
-                ReviewDetailRow,
-                {
-                  label: "Max slippage",
-                  tooltip: "Max price movement allowed before the swap automatically reverts",
-                  value: /* @__PURE__ */ jsx56(
-                    "span",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: spacing[1.5]
-                      },
-                      children: /* @__PURE__ */ jsxs45("span", { style: { color: colors.mutedForeground }, children: [
-                        slippage,
-                        "%"
-                      ] })
-                    }
-                  )
-                }
-              ),
-              (routePath || route.data?.route?.provider) && /* @__PURE__ */ jsx56(
-                ReviewDetailRow,
-                {
-                  label: "Route",
-                  tooltip: "Protocol or bridge used to execute your swap",
-                  value: /* @__PURE__ */ jsx56(
-                    "span",
-                    {
-                      style: {
-                        color: colors.foreground,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                        maxWidth: "200px",
-                        display: "inline-block",
-                        verticalAlign: "bottom"
-                      },
-                      title: routePath ?? route.data?.route?.provider,
-                      children: routePath ?? route.data?.route?.provider
-                    }
-                  )
-                }
-              )
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx56(
-        SwapActionArea,
-        {
-          fromTokenSymbol: fromToken?.symbol ?? "",
-          allowanceStatus: execution.allowanceStatus,
-          txStatus: execution.txStatus,
-          isSubmitting: execution.isSubmitting,
-          isGasSponsored,
-          onExecute: () => void handleExecute()
-        }
-      )
-    ] }) });
+                ),
+                /* @__PURE__ */ jsx56(
+                  "div",
+                  {
+                    style: { flex: 1, height: "1px", backgroundColor: colors.border }
+                  }
+                )
+              ]
+            }
+          ),
+          showReviewDetails && /* @__PURE__ */ jsxs45(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: spacing[3],
+                fontSize: fontSize.sm,
+                marginBottom: spacing[2]
+              },
+              children: [
+                exchangeRate !== null && /* @__PURE__ */ jsx56(
+                  ReviewDetailRow,
+                  {
+                    label: "Rate",
+                    tooltip: "Current exchange rate between the two tokens",
+                    value: `1 ${fromToken?.symbol} = ${fmtAmount(1 / (exchangeRate ?? 1), 4)} ${toToken?.symbol} ($${fmtAmount(fromTokenPriceUSD, 2)})`
+                  }
+                ),
+                /* @__PURE__ */ jsx56(
+                  ReviewDetailRow,
+                  {
+                    label: "Fee",
+                    tooltip: "Protocol fee charged by the bridge or DEX",
+                    value: protocolFeeUsd !== null ? fmtLocal(protocolFeeUsd) : "Free"
+                  }
+                ),
+                /* @__PURE__ */ jsx56(
+                  ReviewDetailRow,
+                  {
+                    label: "Network cost",
+                    tooltip: "Estimated gas fee paid to the blockchain network",
+                    value: isGasSponsored ? /* @__PURE__ */ jsx56(SponsoredBadge, {}) : networkCostUsd !== null ? /* @__PURE__ */ jsxs45(
+                      "span",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "0.25rem"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx56(GasIcon, { size: "0.875rem" }),
+                          fmtLocal(networkCostUsd)
+                        ]
+                      }
+                    ) : "\u2014"
+                  }
+                ),
+                /* @__PURE__ */ jsx56(
+                  ReviewDetailRow,
+                  {
+                    label: "Max slippage",
+                    tooltip: "Max price movement allowed before the swap automatically reverts",
+                    value: `${slippage}%`
+                  }
+                ),
+                (routePath || route.data?.route?.provider) && /* @__PURE__ */ jsx56(
+                  ReviewDetailRow,
+                  {
+                    label: "Route",
+                    tooltip: "Protocol or bridge used to execute your swap",
+                    value: /* @__PURE__ */ jsx56(
+                      "span",
+                      {
+                        style: {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          maxWidth: "200px",
+                          display: "inline-block",
+                          verticalAlign: "bottom"
+                        },
+                        title: routePath ?? route.data?.route?.provider,
+                        children: routePath ?? route.data?.route?.provider
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx56(
+            SwapActionArea,
+            {
+              fromTokenSymbol: fromToken?.symbol ?? "",
+              allowanceStatus: execution.allowanceStatus,
+              txStatus: execution.txStatus,
+              isSubmitting: execution.isSubmitting,
+              isGasSponsored,
+              onExecute: () => void handleExecute()
+            }
+          )
+        ]
+      }
+    ) });
   }
   const ctaLabel = !hasTokens ? "Get started" : !hasAmount ? "Enter an amount" : insufficient ? `Insufficient ${fromToken?.symbol} balance` : !isConnected ? "Connect Wallet" : needsDestAddress && !isValidDestAddress ? `Enter ${toChain?.networkName ?? "destination"} address` : "Review";
   const ctaDisabled = !hasTokens || !hasAmount || insufficient || isConnected && needsDestAddress && !isValidDestAddress;
   const ctaAction = !isConnected ? handleConnectAndReview : () => void handleReview();
   const showRateRow = hasTokens && exchangeRate !== null;
-  return /* @__PURE__ */ jsx56(WidgetContainer, { theme, style, children: /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsx56(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ jsxs45(
     "div",
     {
       style: { display: "flex", flexDirection: "column", minHeight: "500px" },
@@ -34364,6 +35524,91 @@ function SwapMode({
                           zIndex: 100
                         },
                         children: [
+                          /* @__PURE__ */ jsx56(
+                            "p",
+                            {
+                              style: {
+                                fontSize: fontSize.xs,
+                                fontWeight: fontWeight.semibold,
+                                color: colors.mutedForeground,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.06em",
+                                marginBottom: spacing[3]
+                              },
+                              children: "Appearance"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx56("div", { style: { marginBottom: spacing[4] }, children: /* @__PURE__ */ jsxs45(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxs45("div", { children: [
+                                  /* @__PURE__ */ jsx56(
+                                    "p",
+                                    {
+                                      style: {
+                                        fontSize: fontSize.sm,
+                                        fontWeight: fontWeight.medium,
+                                        color: colors.foreground
+                                      },
+                                      children: "Dark mode"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx56(
+                                    "p",
+                                    {
+                                      style: {
+                                        fontSize: "0.625rem",
+                                        color: colors.mutedForeground,
+                                        marginTop: "2px"
+                                      },
+                                      children: resolvedTheme === "dark" ? "Dark theme active" : "Light theme active"
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsx56(
+                                  "button",
+                                  {
+                                    role: "switch",
+                                    "aria-checked": resolvedTheme === "dark",
+                                    onClick: toggleTheme,
+                                    style: {
+                                      width: "2.5rem",
+                                      height: "1.375rem",
+                                      borderRadius: "9999px",
+                                      backgroundColor: resolvedTheme === "dark" ? colors.primary : colors.muted,
+                                      border: 0,
+                                      cursor: "pointer",
+                                      position: "relative",
+                                      transition: "background-color 0.2s",
+                                      flexShrink: 0
+                                    },
+                                    children: /* @__PURE__ */ jsx56(
+                                      "span",
+                                      {
+                                        style: {
+                                          position: "absolute",
+                                          top: "0.1875rem",
+                                          left: resolvedTheme === "dark" ? "calc(100% - 1rem - 0.1875rem)" : "0.1875rem",
+                                          width: "1rem",
+                                          height: "1rem",
+                                          borderRadius: "9999px",
+                                          backgroundColor: colors.primaryForeground,
+                                          transition: "left 0.2s",
+                                          display: "block"
+                                        }
+                                      }
+                                    )
+                                  }
+                                )
+                              ]
+                            }
+                          ) }),
                           /* @__PURE__ */ jsx56(
                             "p",
                             {
@@ -35218,7 +36463,8 @@ function SwapMode({
                 fontSize: fontSize.base,
                 fontWeight: fontWeight.semibold,
                 border: 0,
-                transition: "all 0.2s"
+                transition: "all 0.2s",
+                marginBottom: spacing[3]
               },
               !ctaDisabled ? {
                 backgroundColor: colors.primary,
@@ -35516,12 +36762,15 @@ function SwapActionArea({
           fontSize: fontSize.xs,
           color: colors.mutedForeground,
           textAlign: "center",
-          marginTop: spacing[2]
+          marginTop: spacing[2],
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
         },
         children: [
-          "You'll approve ",
+          "Approve ",
           fromTokenSymbol,
-          " spend, then confirm the swap \u2014 2 wallet steps."
+          " access, then confirm swap \u2014 2 steps."
         ]
       }
     )
@@ -35736,7 +36985,14 @@ function ReviewDetailRow({
   value,
   tooltip
 }) {
-  const [tipVisible, setTipVisible] = useState28(false);
+  const iconRef = useRef17(null);
+  const [tipPos, setTipPos] = useState29(null);
+  const handleMouseEnter = () => {
+    if (!tooltip || !iconRef.current) return;
+    const r = iconRef.current.getBoundingClientRect();
+    setTipPos({ x: r.left + r.width / 2, y: r.top - 8 });
+  };
+  const handleMouseLeave = () => setTipPos(null);
   return /* @__PURE__ */ jsxs45(
     "div",
     {
@@ -35757,66 +37013,65 @@ function ReviewDetailRow({
             },
             children: [
               label,
-              /* @__PURE__ */ jsxs45(
+              /* @__PURE__ */ jsx56(
                 "span",
                 {
-                  style: {
-                    position: "relative",
-                    display: "inline-flex",
-                    alignItems: "center"
-                  },
-                  onMouseEnter: () => setTipVisible(true),
-                  onMouseLeave: () => setTipVisible(false),
-                  children: [
-                    /* @__PURE__ */ jsxs45(
-                      "svg",
-                      {
-                        style: {
-                          width: "0.875rem",
-                          height: "0.875rem",
-                          opacity: 0.6,
-                          cursor: tooltip ? "help" : "default"
-                        },
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: 2,
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        children: [
-                          /* @__PURE__ */ jsx56("circle", { cx: "12", cy: "12", r: "10" }),
-                          /* @__PURE__ */ jsx56("path", { d: "M12 16v-4M12 8h.01" })
-                        ]
-                      }
-                    ),
-                    tooltip && tipVisible && /* @__PURE__ */ jsx56(
-                      "span",
-                      {
-                        style: {
-                          position: "absolute",
-                          bottom: "calc(100% + 6px)",
-                          left: "50%",
-                          transform: "translateX(-50%)",
-                          backgroundColor: "hsl(var(--tw-foreground))",
-                          color: "hsl(var(--tw-background))",
-                          fontSize: "0.6875rem",
-                          lineHeight: 1.4,
-                          padding: "0.25rem 0.5rem",
-                          borderRadius: "0.375rem",
-                          whiteSpace: "nowrap",
-                          pointerEvents: "none",
-                          zIndex: 50
-                        },
-                        children: tooltip
-                      }
-                    )
-                  ]
+                  ref: iconRef,
+                  style: { display: "inline-flex", alignItems: "center" },
+                  onMouseEnter: handleMouseEnter,
+                  onMouseLeave: handleMouseLeave,
+                  children: /* @__PURE__ */ jsxs45(
+                    "svg",
+                    {
+                      style: {
+                        width: "0.875rem",
+                        height: "0.875rem",
+                        opacity: 0.6,
+                        cursor: tooltip ? "help" : "default"
+                      },
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx56("circle", { cx: "12", cy: "12", r: "10" }),
+                        /* @__PURE__ */ jsx56("path", { d: "M12 16v-4M12 8h.01" })
+                      ]
+                    }
+                  )
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx56("span", { style: { color: colors.mutedForeground }, children: value })
+        /* @__PURE__ */ jsx56("span", { style: { color: colors.foreground, fontWeight: fontWeight.medium }, children: value }),
+        tooltip && tipPos && typeof document !== "undefined" && ReactDOM.createPortal(
+          /* @__PURE__ */ jsx56(
+            "span",
+            {
+              style: {
+                position: "fixed",
+                left: tipPos.x,
+                top: tipPos.y,
+                transform: "translate(-50%, -100%)",
+                backgroundColor: "hsl(220 15% 15%)",
+                color: "#fff",
+                fontSize: "0.6875rem",
+                lineHeight: 1.4,
+                padding: "0.3rem 0.6rem",
+                borderRadius: "0.375rem",
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+                zIndex: 99999,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.25)"
+              },
+              children: tooltip
+            }
+          ),
+          document.body
+        )
       ]
     }
   );
@@ -36018,6 +37273,7 @@ var init_SwapMode = __esm({
     init_utils();
     init_components();
     init_registryClient();
+    init_useThemePreference();
     init_useWalletSessionState();
     init_useWalletTokenState();
     init_hooks2();
@@ -36054,14 +37310,14 @@ var init_swap = __esm({
 
 // src/widget/TrustwareWidgetV2.tsx
 import {
-  useState as useState29,
+  useState as useState30,
   useEffect as useEffect31,
   useRef as useRef18,
   useCallback as useCallback23,
   useImperativeHandle,
   forwardRef
 } from "react";
-import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 function WidgetContent({
   style,
   onStateChange,
@@ -36115,7 +37371,7 @@ function WidgetInner({
   const { transactionStatus } = useDepositTransaction();
   const { resolvedTheme } = useDepositUi();
   const { status, revalidate, errors } = useTrustware();
-  const [showConfirmDialog, setShowConfirmDialog] = useState29(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState30(false);
   const handleCloseRequest = useCallback23(() => {
     if (ACTIVE_TRANSACTION_STATUSES.includes(transactionStatus)) {
       setShowConfirmDialog(true);
@@ -36143,7 +37399,7 @@ function WidgetInner({
   const handleRefresh = useCallback23(() => {
     revalidate?.();
   }, [revalidate]);
-  return /* @__PURE__ */ jsxs46(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs46(Fragment10, { children: [
     /* @__PURE__ */ jsxs46(WidgetContainer, { theme: effectiveTheme, style, children: [
       /* @__PURE__ */ jsx57(
         WidgetContent,
@@ -36203,7 +37459,7 @@ var init_TrustwareWidgetV2 = __esm({
       zIndex: 12
     };
     TrustwareWidgetV2 = forwardRef(function TrustwareWidgetV22({
-      theme = "system",
+      theme,
       style,
       initialStep = "home",
       defaultOpen = true,
@@ -36211,7 +37467,7 @@ var init_TrustwareWidgetV2 = __esm({
       onOpen,
       showThemeToggle = true
     }, ref) {
-      const [isOpen, setIsOpen] = useState29(defaultOpen);
+      const [isOpen, setIsOpen] = useState30(defaultOpen);
       const closeRequestRef = useRef18(null);
       const config = useTrustwareConfig();
       const effectiveInitialStep = initialStep;