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

package/dist/widget.cjs

@@ -543,20 +543,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."
@@ -593,7 +585,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";
@@ -2869,14 +2861,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."
@@ -3393,10 +3378,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);
@@ -3455,6 +3456,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
 function mapTokenDefToToken(tokenDef) {
   return {
@@ -3576,13 +4575,40 @@ function useTokens(chainId) {
       setIsLoadingMore(false);
     }
   };
+  const featuredAddresses = (0, import_react5.useMemo)(() => {
+    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 = (0, import_react5.useMemo)(() => {
+    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 = (0, import_react5.useMemo)(() => {
     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,
@@ -3595,7 +4621,7 @@ function useTokens(chainId) {
     isLoadingMore
   };
 }
-var import_react5, DEFAULT_PAGE_LIMIT;
+var import_react5, FEATURED, NATIVE_ADDRESSES, DEFAULT_PAGE_LIMIT;
 var init_useTokens = __esm({
   "src/core/useTokens.ts"() {
     "use strict";
@@ -3604,6 +4630,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;
   }
 });
@@ -7072,7 +8107,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,
@@ -7150,10 +8185,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 ?? {}
@@ -7553,27 +8585,38 @@ var init_useDepositNavigationState = __esm({
 });
 
 // src/widget/state/deposit/useThemePreference.ts
-function getInitialTheme() {
-  if (typeof window === "undefined") {
-    return "light";
-  }
+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] = (0, import_react14.useState)("light");
-  (0, import_react15.useEffect)(() => {
-    setResolvedTheme(getInitialTheme());
-  }, []);
+function useThemePreference(configTheme = "system") {
+  const [resolvedTheme, setResolvedTheme] = (0, import_react14.useState)(
+    () => resolveConfigTheme(configTheme)
+  );
+  (0, import_react14.useEffect)(() => {
+    setResolvedTheme(resolveConfigTheme(configTheme));
+  }, [configTheme]);
+  (0, import_react14.useEffect)(() => {
+    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 = (0, import_react14.useCallback)(() => {
     setResolvedTheme((current) => {
       const nextTheme = current === "light" ? "dark" : "light";
@@ -7589,28 +8632,27 @@ function useThemePreference() {
     toggleTheme
   };
 }
-var import_react14, import_react15, THEME_STORAGE_KEY;
+var import_react14, THEME_STORAGE_KEY;
 var init_useThemePreference = __esm({
   "src/widget/state/deposit/useThemePreference.ts"() {
     "use strict";
     import_react14 = require("react");
-    import_react15 = require("react");
     THEME_STORAGE_KEY = "trustware-widget-theme";
   }
 });
 
 // src/widget/state/deposit/useWalletSessionState.ts
 function useWalletSessionState() {
-  const [selectedWallet, setSelectedWallet] = (0, import_react16.useState)(walletManager.wallet);
-  const [walletAddress, setWalletAddress] = (0, import_react16.useState)(null);
-  const [walletStatus, setWalletStatus] = (0, import_react16.useState)(
+  const [selectedWallet, setSelectedWallet] = (0, import_react15.useState)(walletManager.wallet);
+  const [walletAddress, setWalletAddress] = (0, import_react15.useState)(null);
+  const [walletStatus, setWalletStatus] = (0, import_react15.useState)(
     walletManager.status
   );
   const { detected } = useWalletDetection();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     walletManager.setDetected(detected);
   }, [detected]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const unsubscribe = walletManager.onChange((status) => {
       setWalletStatus(status);
       setSelectedWallet(walletManager.wallet);
@@ -7631,13 +8673,13 @@ function useWalletSessionState() {
       unsubscribe();
     };
   }, []);
-  const connectWallet = (0, import_react16.useCallback)(async (wallet) => {
+  const connectWallet = (0, import_react15.useCallback)(async (wallet) => {
     await walletManager.connectDetected(wallet);
     const error = walletManager.error;
     const api = walletManager.wallet;
     return { error, api };
   }, []);
-  const disconnectWallet = (0, import_react16.useCallback)(async () => {
+  const disconnectWallet = (0, import_react15.useCallback)(async () => {
     await walletManager.disconnect();
   }, []);
   return {
@@ -7648,11 +8690,11 @@ function useWalletSessionState() {
     disconnectWallet
   };
 }
-var import_react16;
+var import_react15;
 var init_useWalletSessionState = __esm({
   "src/widget/state/deposit/useWalletSessionState.ts"() {
     "use strict";
-    import_react16 = require("react");
+    import_react15 = require("react");
     init_wallets();
   }
 });
@@ -7664,7 +8706,7 @@ function useWalletConnect({
 }) {
   const walletConnectCfg = TrustwareConfigStore.peek()?.walletConnect;
   const connectWC = useWalletConnectConnect(walletConnectCfg);
-  const WalletConnect = (0, import_react17.useCallback)(async () => {
+  const WalletConnect = (0, import_react16.useCallback)(async () => {
     if (walletManager.status === "connected" && walletManager.connectedVia === "walletconnect") {
       const address = walletManager.identity?.addresses[0]?.address ?? null;
       if (address) {
@@ -7684,7 +8726,7 @@ function useWalletConnect({
       setWalletType("other");
     }
   }, [connectWC, setCurrentStep, setWalletType]);
-  const disconnectWalletConnect = (0, import_react17.useCallback)(async () => {
+  const disconnectWalletConnect = (0, import_react16.useCallback)(async () => {
     await walletManager.disconnect();
     setWalletType("other");
     setCurrentStep("home");
@@ -7696,11 +8738,11 @@ function useWalletConnect({
     disconnectWalletConnect
   };
 }
-var import_react17;
+var import_react16;
 var init_useWalletConnect = __esm({
   "src/widget/state/deposit/useWalletConnect.ts"() {
     "use strict";
-    import_react17 = require("react");
+    import_react16 = require("react");
     init_config2();
     init_wallets();
   }
@@ -7721,7 +8763,8 @@ function DepositProvider({
     resetNavigation,
     setCurrentStepInternal
   } = useDepositNavigationState(initialStep);
-  const { resolvedTheme, toggleTheme } = useThemePreference();
+  const config = useTrustwareConfig();
+  const { resolvedTheme, toggleTheme } = useThemePreference(config.theme);
   const {
     selectedWallet,
     walletAddress: otherWalletAddress,
@@ -7729,21 +8772,21 @@ function DepositProvider({
     connectWallet,
     disconnectWallet
   } = useWalletSessionState();
-  const [amountInputMode, setAmountInputMode] = (0, import_react18.useState)(
+  const [amountInputMode, setAmountInputMode] = (0, import_react17.useState)(
     "usd"
   );
-  const [walletType, setWalletType] = (0, import_react18.useState)(
+  const [walletType, setWalletType] = (0, import_react17.useState)(
     "other"
   );
   const { walletConnectAddress, WalletConnect, disconnectWalletConnect } = useWalletConnect({
     setWalletType,
     setCurrentStep
   });
-  const [selectedToken, setSelectedToken] = (0, import_react18.useState)(null);
-  const [selectedChain, setSelectedChain] = (0, import_react18.useState)(null);
-  const [amount, setAmount] = (0, import_react18.useState)("");
-  const [selectedNamespace, setSelectedNamespace] = (0, import_react18.useState)("evm");
-  const walletAddress = (0, import_react18.useMemo)(
+  const [selectedToken, setSelectedToken] = (0, import_react17.useState)(null);
+  const [selectedChain, setSelectedChain] = (0, import_react17.useState)(null);
+  const [amount, setAmount] = (0, import_react17.useState)("");
+  const [selectedNamespace, setSelectedNamespace] = (0, import_react17.useState)("evm");
+  const walletAddress = (0, import_react17.useMemo)(
     () => walletType === "walletconnect" ? walletConnectAddress : otherWalletAddress,
     [walletType, walletConnectAddress, otherWalletAddress]
   );
@@ -7760,12 +8803,12 @@ function DepositProvider({
     selectedToken,
     setSelectedToken
   });
-  const [transactionStatus, setTransactionStatus] = (0, import_react18.useState)("idle");
-  const [transactionHash, setTransactionHash] = (0, import_react18.useState)(null);
-  const [errorMessage, setErrorMessage] = (0, import_react18.useState)(null);
-  const [intentId, setIntentId] = (0, import_react18.useState)(null);
-  const [paymentMethod, setPaymentMethod] = (0, import_react18.useState)("crypto");
-  const resetState = import_react18.default.useCallback(() => {
+  const [transactionStatus, setTransactionStatus] = (0, import_react17.useState)("idle");
+  const [transactionHash, setTransactionHash] = (0, import_react17.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react17.useState)(null);
+  const [intentId, setIntentId] = (0, import_react17.useState)(null);
+  const [paymentMethod, setPaymentMethod] = (0, import_react17.useState)("crypto");
+  const resetState = import_react17.default.useCallback(() => {
     resetNavigation();
     setSelectedToken(null);
     setSelectedChain(null);
@@ -7778,7 +8821,7 @@ function DepositProvider({
     setPaymentMethod("crypto");
     reloadWalletTokens();
   }, [reloadWalletTokens, resetNavigation]);
-  const navigationValue = (0, import_react18.useMemo)(
+  const navigationValue = (0, import_react17.useMemo)(
     () => ({
       currentStep,
       setCurrentStep,
@@ -7798,7 +8841,7 @@ function DepositProvider({
       stepHistory
     ]
   );
-  const walletValue = (0, import_react18.useMemo)(
+  const walletValue = (0, import_react17.useMemo)(
     () => ({
       selectedWallet,
       walletAddress,
@@ -7833,7 +8876,7 @@ function DepositProvider({
       setSelectedNamespace
     ]
   );
-  const formValue = (0, import_react18.useMemo)(
+  const formValue = (0, import_react17.useMemo)(
     () => ({
       selectedToken,
       setSelectedToken,
@@ -7855,7 +8898,7 @@ function DepositProvider({
       setPaymentMethod
     ]
   );
-  const transactionValue = (0, import_react18.useMemo)(
+  const transactionValue = (0, import_react17.useMemo)(
     () => ({
       transactionStatus,
       setTransactionStatus,
@@ -7868,14 +8911,14 @@ function DepositProvider({
     }),
     [errorMessage, intentId, transactionHash, transactionStatus]
   );
-  const uiValue = (0, import_react18.useMemo)(
+  const uiValue = (0, import_react17.useMemo)(
     () => ({
       resolvedTheme,
       toggleTheme
     }),
     [resolvedTheme, toggleTheme]
   );
-  const value = (0, import_react18.useMemo)(
+  const value = (0, import_react17.useMemo)(
     () => ({
       ...navigationValue,
       ...walletValue,
@@ -7888,7 +8931,7 @@ function DepositProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositNavigationContext.Provider, { value: navigationValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositWalletContext.Provider, { value: walletValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositFormContext.Provider, { value: formValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositTransactionContext.Provider, { value: transactionValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositUiContext.Provider, { value: uiValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositContext.Provider, { value, children }) }) }) }) }) });
 }
 function useRequiredContext(context, name) {
-  const value = (0, import_react18.useContext)(context);
+  const value = (0, import_react17.useContext)(context);
   if (value === void 0) {
     throw new Error(`${name} must be used within a DepositProvider`);
   }
@@ -7909,11 +8952,11 @@ function useDepositTransaction() {
 function useDepositUi() {
   return useRequiredContext(DepositUiContext, "useDepositUi");
 }
-var import_react18, import_jsx_runtime2, DepositContext, DepositNavigationContext, DepositWalletContext, DepositFormContext, DepositTransactionContext, DepositUiContext;
+var import_react17, import_jsx_runtime2, DepositContext, DepositNavigationContext, DepositWalletContext, DepositFormContext, DepositTransactionContext, DepositUiContext;
 var init_DepositContext = __esm({
   "src/widget/context/DepositContext.tsx"() {
     "use strict";
-    import_react18 = __toESM(require("react"), 1);
+    import_react17 = __toESM(require("react"), 1);
     init_provider();
     init_useDepositNavigationState();
     init_useThemePreference();
@@ -7921,15 +8964,16 @@ var init_DepositContext = __esm({
     init_useWalletTokenState();
     init_useWalletConnect();
     init_wallets();
+    init_useTrustwareConfig();
     import_jsx_runtime2 = require("react/jsx-runtime");
-    DepositContext = (0, import_react18.createContext)(
+    DepositContext = (0, import_react17.createContext)(
       void 0
     );
-    DepositNavigationContext = (0, import_react18.createContext)(void 0);
-    DepositWalletContext = (0, import_react18.createContext)(void 0);
-    DepositFormContext = (0, import_react18.createContext)(void 0);
-    DepositTransactionContext = (0, import_react18.createContext)(void 0);
-    DepositUiContext = (0, import_react18.createContext)(void 0);
+    DepositNavigationContext = (0, import_react17.createContext)(void 0);
+    DepositWalletContext = (0, import_react17.createContext)(void 0);
+    DepositFormContext = (0, import_react17.createContext)(void 0);
+    DepositTransactionContext = (0, import_react17.createContext)(void 0);
+    DepositUiContext = (0, import_react17.createContext)(void 0);
   }
 });
 
@@ -7942,7 +8986,7 @@ function AmountSlider({
   style,
   disabled = false
 }) {
-  const generateTickMarks = (0, import_react19.useCallback)(
+  const generateTickMarks = (0, import_react18.useCallback)(
     (minValue, maxValue) => {
       const range = maxValue - minValue;
       if (range <= 0) {
@@ -7990,25 +9034,25 @@ function AmountSlider({
     },
     []
   );
-  const tickMarks = (0, import_react19.useMemo)(
+  const tickMarks = (0, import_react18.useMemo)(
     () => generateTickMarks(min, max),
     [generateTickMarks, min, max]
   );
-  const getPercentage = (0, import_react19.useCallback)(() => {
+  const getPercentage = (0, import_react18.useCallback)(() => {
     const range = max - min;
     if (range <= 0) return 0;
     const clampedValue = Math.min(Math.max(value, min), max);
     return (clampedValue - min) / range * 100;
   }, [max, min, value]);
-  const percentage = (0, import_react19.useMemo)(() => getPercentage(), [getPercentage]);
-  const handleChange = (0, import_react19.useCallback)(
+  const percentage = (0, import_react18.useMemo)(() => getPercentage(), [getPercentage]);
+  const handleChange = (0, import_react18.useCallback)(
     (e2) => {
       const newValue = Math.min(Math.max(Number(e2.target.value), min), max);
       onChange(newValue);
     },
     [onChange, min, max]
   );
-  const handleTickClick = (0, import_react19.useCallback)(
+  const handleTickClick = (0, import_react18.useCallback)(
     (tickValue) => {
       if (disabled) return;
       onChange(tickValue);
@@ -8223,11 +9267,11 @@ function AmountSlider({
     )
   ] }) });
 }
-var import_react19, import_jsx_runtime3, roundToNiceNumber, formatValue;
+var import_react18, import_jsx_runtime3, roundToNiceNumber, formatValue;
 var init_AmountSlider = __esm({
   "src/widget/components/AmountSlider.tsx"() {
     "use strict";
-    import_react19 = require("react");
+    import_react18 = require("react");
     init_styles();
     import_jsx_runtime3 = require("react/jsx-runtime");
     roundToNiceNumber = (value, range) => {
@@ -8311,8 +9355,8 @@ function AmountInputDisplay({
   style,
   inputAriaLabel = "Deposit amount"
 }) {
-  const [isEditing, setIsEditing] = (0, import_react20.useState)(false);
-  const inputRef = (0, import_react20.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react19.useState)(false);
+  const inputRef = (0, import_react19.useRef)(null);
   const handleAmountClick = () => {
     if (isFixedAmount) return;
     const isZeroish = !amount || parseFloat(amount) === 0;
@@ -8428,11 +9472,11 @@ function AmountInputDisplay({
     }
   );
 }
-var import_react20, import_jsx_runtime4;
+var import_react19, import_jsx_runtime4;
 var init_AmountInputDisplay = __esm({
   "src/widget/components/AmountInputDisplay.tsx"() {
     "use strict";
-    import_react20 = require("react");
+    import_react19 = require("react");
     init_styles();
     import_jsx_runtime4 = require("react/jsx-runtime");
   }
@@ -8554,8 +9598,8 @@ function ConfettiEffect({
   clearDelay = 3e3,
   pieceCount = 50
 }) {
-  const [pieces, setPieces] = (0, import_react21.useState)([]);
-  (0, import_react21.useEffect)(() => {
+  const [pieces, setPieces] = (0, import_react20.useState)([]);
+  (0, import_react20.useEffect)(() => {
     if (isActive) {
       const colors2 = [
         "#10b981",
@@ -8631,22 +9675,22 @@ function ConfettiEffect({
     }
   );
 }
-var import_react21, import_jsx_runtime6, ConfettiEffect_default;
+var import_react20, import_jsx_runtime6, ConfettiEffect_default;
 var init_ConfettiEffect = __esm({
   "src/widget/components/ConfettiEffect.tsx"() {
     "use strict";
-    import_react21 = require("react");
+    import_react20 = require("react");
     import_jsx_runtime6 = require("react/jsx-runtime");
     ConfettiEffect_default = ConfettiEffect;
   }
 });
 
 // src/widget/components/Dialog.tsx
-var import_react22, import_jsx_runtime7, Dialog;
+var import_react21, import_jsx_runtime7, Dialog;
 var init_Dialog = __esm({
   "src/widget/components/Dialog.tsx"() {
     "use strict";
-    import_react22 = require("react");
+    import_react21 = require("react");
     init_styles();
     import_jsx_runtime7 = require("react/jsx-runtime");
     Dialog = ({
@@ -8659,11 +9703,11 @@ var init_Dialog = __esm({
       confirmText = "Close Anyway",
       isDark = false
     }) => {
-      const dialogRef = (0, import_react22.useRef)(null);
-      const overlayRef = (0, import_react22.useRef)(null);
-      const firstButtonRef = (0, import_react22.useRef)(null);
-      const lastButtonRef = (0, import_react22.useRef)(null);
-      (0, import_react22.useEffect)(() => {
+      const dialogRef = (0, import_react21.useRef)(null);
+      const overlayRef = (0, import_react21.useRef)(null);
+      const firstButtonRef = (0, import_react21.useRef)(null);
+      const lastButtonRef = (0, import_react21.useRef)(null);
+      (0, import_react21.useEffect)(() => {
         const handleEscape = (e2) => {
           if (e2.key === "Escape" && open) {
             e2.preventDefault();
@@ -8677,7 +9721,7 @@ var init_Dialog = __esm({
           document.removeEventListener("keydown", handleEscape);
         };
       }, [open, onCancel]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react21.useEffect)(() => {
         const handleTabKey = (e2) => {
           if (!open) return;
           if (e2.key === "Tab") {
@@ -8701,7 +9745,7 @@ var init_Dialog = __esm({
           document.removeEventListener("keydown", handleTabKey);
         };
       }, [open]);
-      (0, import_react22.useEffect)(() => {
+      (0, import_react21.useEffect)(() => {
         if (open) {
           const originalStyle = window.getComputedStyle(document.body).overflow;
           document.body.style.overflow = "hidden";
@@ -9021,33 +10065,33 @@ function SwipeToConfirmTokens({
   style,
   text
 }) {
-  const [dragX, setDragX] = (0, import_react23.useState)(0);
-  const [isDragging, setIsDragging] = (0, import_react23.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react23.useState)(false);
-  const trackRef = (0, import_react23.useRef)(null);
-  const thumbRef = (0, import_react23.useRef)(null);
-  const [isLongPressing, setIsLongPressing] = (0, import_react23.useState)(false);
-  const [longPressProgress, setLongPressProgress] = (0, import_react23.useState)(0);
-  const longPressTimerRef = (0, import_react23.useRef)(null);
-  const longPressStartRef = (0, import_react23.useRef)(null);
-  const longPressAnimationRef = (0, import_react23.useRef)(null);
+  const [dragX, setDragX] = (0, import_react22.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react22.useState)(false);
+  const trackRef = (0, import_react22.useRef)(null);
+  const thumbRef = (0, import_react22.useRef)(null);
+  const [isLongPressing, setIsLongPressing] = (0, import_react22.useState)(false);
+  const [longPressProgress, setLongPressProgress] = (0, import_react22.useState)(0);
+  const longPressTimerRef = (0, import_react22.useRef)(null);
+  const longPressStartRef = (0, import_react22.useRef)(null);
+  const longPressAnimationRef = (0, import_react22.useRef)(null);
   const LONG_PRESS_DURATION = 1500;
   const thumbSize = 48;
   const padding = 4;
   const threshold = 0.8;
-  const getMaxDrag = (0, import_react23.useCallback)(() => {
+  const getMaxDrag = (0, import_react22.useCallback)(() => {
     if (!trackRef.current) return 0;
     return trackRef.current.offsetWidth - thumbSize - padding * 2;
   }, []);
-  const getProgress = (0, import_react23.useCallback)(() => {
+  const getProgress = (0, import_react22.useCallback)(() => {
     const maxDrag = getMaxDrag();
     return maxDrag > 0 ? dragX / maxDrag : 0;
   }, [dragX, getMaxDrag]);
-  const handleDragStart = (0, import_react23.useCallback)(() => {
+  const handleDragStart = (0, import_react22.useCallback)(() => {
     if (disabled || isComplete) return;
     setIsDragging(true);
   }, [disabled, isComplete]);
-  const handleDragMove = (0, import_react23.useCallback)(
+  const handleDragMove = (0, import_react22.useCallback)(
     (clientX) => {
       if (!isDragging || !trackRef.current || isComplete) return;
       const rect = trackRef.current.getBoundingClientRect();
@@ -9058,7 +10102,7 @@ function SwipeToConfirmTokens({
     },
     [isDragging, isComplete, getMaxDrag]
   );
-  const handleDragEnd = (0, import_react23.useCallback)(() => {
+  const handleDragEnd = (0, import_react22.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const progress2 = getProgress();
@@ -9071,14 +10115,14 @@ function SwipeToConfirmTokens({
       setDragX(0);
     }
   }, [isDragging, getProgress, getMaxDrag, onConfirm]);
-  const triggerConfirmation = (0, import_react23.useCallback)(() => {
+  const triggerConfirmation = (0, import_react22.useCallback)(() => {
     if (isComplete) return;
     setDragX(getMaxDrag());
     setIsComplete(true);
     if (navigator.vibrate) navigator.vibrate(50);
     setTimeout(() => onConfirm(), 150);
   }, [isComplete, getMaxDrag, onConfirm]);
-  const cancelLongPress = (0, import_react23.useCallback)(() => {
+  const cancelLongPress = (0, import_react22.useCallback)(() => {
     setIsLongPressing(false);
     setLongPressProgress(0);
     longPressStartRef.current = null;
@@ -9091,7 +10135,7 @@ function SwipeToConfirmTokens({
       longPressAnimationRef.current = null;
     }
   }, []);
-  const startLongPress = (0, import_react23.useCallback)(() => {
+  const startLongPress = (0, import_react22.useCallback)(() => {
     if (disabled || isComplete || isDragging) return;
     setIsLongPressing(true);
     longPressStartRef.current = Date.now();
@@ -9109,7 +10153,7 @@ function SwipeToConfirmTokens({
     };
     longPressAnimationRef.current = requestAnimationFrame(animateProgress);
   }, [disabled, isComplete, isDragging, triggerConfirmation, cancelLongPress]);
-  const handleKeyDown = (0, import_react23.useCallback)(
+  const handleKeyDown = (0, import_react22.useCallback)(
     (e2) => {
       if (disabled || isComplete) return;
       if (e2.key === "Enter" || e2.key === " ") {
@@ -9119,7 +10163,7 @@ function SwipeToConfirmTokens({
     },
     [disabled, isComplete, startLongPress]
   );
-  const handleKeyUp = (0, import_react23.useCallback)(
+  const handleKeyUp = (0, import_react22.useCallback)(
     (e2) => {
       if (e2.key === "Enter" || e2.key === " ") {
         e2.preventDefault();
@@ -9128,7 +10172,7 @@ function SwipeToConfirmTokens({
     },
     [cancelLongPress]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     return () => {
       if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current);
       if (longPressAnimationRef.current)
@@ -9139,15 +10183,15 @@ function SwipeToConfirmTokens({
     e2.preventDefault();
     handleDragStart();
   };
-  const handleMouseMove = (0, import_react23.useCallback)(
+  const handleMouseMove = (0, import_react22.useCallback)(
     (e2) => handleDragMove(e2.clientX),
     [handleDragMove]
   );
-  const handleMouseUp = (0, import_react23.useCallback)(() => handleDragEnd(), [handleDragEnd]);
+  const handleMouseUp = (0, import_react22.useCallback)(() => handleDragEnd(), [handleDragEnd]);
   const handleTouchStart = () => handleDragStart();
   const handleTouchMove = (e2) => handleDragMove(e2.touches[0].clientX);
   const handleTouchEnd = () => handleDragEnd();
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (isDragging) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -9159,8 +10203,8 @@ function SwipeToConfirmTokens({
   }, [isDragging, handleMouseMove, handleMouseUp]);
   const progress = getProgress();
   const effectiveProgress = isLongPressing ? longPressProgress : progress;
-  const [blinkOpacity, setBlinkOpacity] = (0, import_react23.useState)(1);
-  (0, import_react23.useEffect)(() => {
+  const [blinkOpacity, setBlinkOpacity] = (0, import_react22.useState)(1);
+  (0, import_react22.useEffect)(() => {
     if (disabled || isComplete || isDragging || isLongPressing) {
       setBlinkOpacity(1);
       return;
@@ -9521,11 +10565,11 @@ function SwipeToConfirmTokens({
     }
   );
 }
-var import_react23, import_jsx_runtime9;
+var import_react22, import_jsx_runtime9;
 var init_SwipeToConfirmTokens = __esm({
   "src/widget/components/SwipeToConfirmTokens.tsx"() {
     "use strict";
-    import_react23 = require("react");
+    import_react22 = require("react");
     init_styles();
     init_components();
     import_jsx_runtime9 = require("react/jsx-runtime");
@@ -9634,14 +10678,14 @@ function ToastItem({
   duration = 4e3,
   onDismiss
 }) {
-  const [isExiting, setIsExiting] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const [isExiting, setIsExiting] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     const timer = setTimeout(() => {
       setIsExiting(true);
     }, duration);
     return () => clearTimeout(timer);
   }, [duration]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (isExiting) {
       const exitTimer = setTimeout(() => {
         onDismiss(id);
@@ -9840,8 +10884,8 @@ function toast(data) {
   };
 }
 function ToastContainer() {
-  const [activeToasts, setActiveToasts] = (0, import_react24.useState)([]);
-  (0, import_react24.useEffect)(() => {
+  const [activeToasts, setActiveToasts] = (0, import_react23.useState)([]);
+  (0, import_react23.useEffect)(() => {
     const listener = (newToasts) => {
       setActiveToasts(newToasts);
     };
@@ -9853,7 +10897,7 @@ function ToastContainer() {
       }
     };
   }, []);
-  const handleDismiss = (0, import_react24.useCallback)((id) => {
+  const handleDismiss = (0, import_react23.useCallback)((id) => {
     toasts = toasts.filter((t) => t.id !== id);
     notifyListeners();
   }, []);
@@ -9888,11 +10932,11 @@ function ToastContainer() {
     }
   );
 }
-var import_react24, import_jsx_runtime11, variantStyles, listeners, toasts, toastId;
+var import_react23, import_jsx_runtime11, variantStyles, listeners, toasts, toastId;
 var init_Toast = __esm({
   "src/widget/components/Toast.tsx"() {
     "use strict";
-    import_react24 = require("react");
+    import_react23 = require("react");
     init_styles();
     import_jsx_runtime11 = require("react/jsx-runtime");
     variantStyles = {
@@ -9933,10 +10977,10 @@ function TokenSwipePill({
   walletAddress,
   style
 }) {
-  const [isDragging, setIsDragging] = (0, import_react25.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react25.useState)(0);
-  const startXRef = (0, import_react25.useRef)(0);
-  const containerRef = (0, import_react25.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react24.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react24.useState)(0);
+  const startXRef = (0, import_react24.useRef)(0);
+  const containerRef = (0, import_react24.useRef)(null);
   const currentIndex = tokens.findIndex(
     (t) => normalizeAddress2(
       t.address,
@@ -9957,11 +11001,11 @@ function TokenSwipePill({
     }
     return pos;
   };
-  const handleDragStart = (0, import_react25.useCallback)((clientX) => {
+  const handleDragStart = (0, import_react24.useCallback)((clientX) => {
     setIsDragging(true);
     startXRef.current = clientX;
   }, []);
-  const handleDragMove = (0, import_react25.useCallback)(
+  const handleDragMove = (0, import_react24.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const delta = startXRef.current - clientX;
@@ -9969,7 +11013,7 @@ function TokenSwipePill({
     },
     [isDragging]
   );
-  const handleDragEnd = (0, import_react25.useCallback)(() => {
+  const handleDragEnd = (0, import_react24.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     if (Math.abs(dragOffset) > swipeThreshold) {
@@ -9987,13 +11031,13 @@ function TokenSwipePill({
     e2.preventDefault();
     handleDragStart(e2.clientX);
   };
-  const handleMouseMove = (0, import_react25.useCallback)(
+  const handleMouseMove = (0, import_react24.useCallback)(
     (e2) => {
       handleDragMove(e2.clientX);
     },
     [handleDragMove]
   );
-  const handleMouseUp = (0, import_react25.useCallback)(() => {
+  const handleMouseUp = (0, import_react24.useCallback)(() => {
     handleDragEnd();
   }, [handleDragEnd]);
   const handleTouchStart = (e2) => {
@@ -10007,7 +11051,7 @@ function TokenSwipePill({
   const handleTouchEnd = () => {
     handleDragEnd();
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (isDragging) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -10021,7 +11065,7 @@ function TokenSwipePill({
   const getChainInitials = (chain) => {
     return chain?.slice(0, 2).toUpperCase();
   };
-  const chainBadge = (0, import_react25.useMemo)(() => {
+  const chainBadge = (0, import_react24.useMemo)(() => {
     const url = selectedToken.chainData?.chainIconURI || selectedToken.chainData?.iconUrl;
     return url?.toString();
   }, [selectedToken]);
@@ -10307,7 +11351,7 @@ function TokenSwipePill({
                       const token = tokens[index];
                       const prevIndex = uniqueIndices[i - 1];
                       const showGap = i > 0 && index - prevIndex > 1;
-                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react25.default.Fragment, { children: [
+                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react24.default.Fragment, { children: [
                         showGap && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                           "span",
                           {
@@ -10487,11 +11531,11 @@ function TokenSwipePill({
     }
   );
 }
-var import_react25, import_jsx_runtime12, MAX_VISIBLE_DOTS;
+var import_react24, import_jsx_runtime12, MAX_VISIBLE_DOTS;
 var init_TokenSwipePill = __esm({
   "src/widget/components/TokenSwipePill.tsx"() {
     "use strict";
-    import_react25 = __toESM(require("react"), 1);
+    import_react24 = __toESM(require("react"), 1);
     init_styles();
     init_chainHelpers();
     init_components();
@@ -10533,14 +11577,14 @@ function TransactionSteps({
   style,
   stepLabels
 }) {
-  const labels = (0, import_react26.useMemo)(
+  const labels = (0, import_react25.useMemo)(
     () => ({
       ...DEFAULT_LABELS,
       ...stepLabels
     }),
     [stepLabels]
   );
-  const steps = (0, import_react26.useMemo)(
+  const steps = (0, import_react25.useMemo)(
     () => getSteps(transactionStatus, labels),
     [transactionStatus, labels]
   );
@@ -10697,11 +11741,11 @@ function TransactionSteps({
     }
   );
 }
-var import_react26, import_jsx_runtime13, DEFAULT_LABELS;
+var import_react25, import_jsx_runtime13, DEFAULT_LABELS;
 var init_TransactionSteps = __esm({
   "src/widget/components/TransactionSteps.tsx"() {
     "use strict";
-    import_react26 = require("react");
+    import_react25 = require("react");
     init_styles();
     import_jsx_runtime13 = require("react/jsx-runtime");
     DEFAULT_LABELS = {
@@ -10720,8 +11764,8 @@ function WidgetContainer({
   className,
   style
 }) {
-  const [resolvedTheme, setResolvedTheme] = (0, import_react27.useState)("light");
-  (0, import_react27.useEffect)(() => {
+  const [resolvedTheme, setResolvedTheme] = (0, import_react26.useState)("light");
+  (0, import_react26.useEffect)(() => {
     if (theme === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       setResolvedTheme(mediaQuery.matches ? "dark" : "light");
@@ -10770,11 +11814,11 @@ function WidgetContainer({
     )
   ] });
 }
-var import_react27, import_jsx_runtime14, INJECTED_STYLES;
+var import_react26, import_jsx_runtime14, INJECTED_STYLES;
 var init_WidgetContainer = __esm({
   "src/widget/components/WidgetContainer.tsx"() {
     "use strict";
-    import_react27 = require("react");
+    import_react26 = require("react");
     init_Toast();
     init_styles();
     init_styles();
@@ -11018,18 +12062,18 @@ function ImageLoader({
   onLoad,
   onError
 }) {
-  const [status, setStatus] = (0, import_react28.useState)("idle");
-  const [attempt, setAttempt] = (0, import_react28.useState)(0);
-  const [srcIsEmpty, setSrcIsEmpty] = (0, import_react28.useState)(false);
-  const imgRef = (0, import_react28.useRef)(null);
-  const observerRef = (0, import_react28.useRef)(null);
-  const onLoadRef = (0, import_react28.useRef)(onLoad);
-  const onErrorRef = (0, import_react28.useRef)(onError);
-  (0, import_react28.useEffect)(() => {
+  const [status, setStatus] = (0, import_react27.useState)("idle");
+  const [attempt, setAttempt] = (0, import_react27.useState)(0);
+  const [srcIsEmpty, setSrcIsEmpty] = (0, import_react27.useState)(false);
+  const imgRef = (0, import_react27.useRef)(null);
+  const observerRef = (0, import_react27.useRef)(null);
+  const onLoadRef = (0, import_react27.useRef)(onLoad);
+  const onErrorRef = (0, import_react27.useRef)(onError);
+  (0, import_react27.useEffect)(() => {
     onLoadRef.current = onLoad;
     onErrorRef.current = onError;
   }, [onLoad, onError]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (status === "error" && attempt < retry) {
       const timer = setTimeout(() => {
         setAttempt((prev) => prev + 1);
@@ -11038,7 +12082,7 @@ function ImageLoader({
       return () => clearTimeout(timer);
     }
   }, [status, attempt, retry, retryDelay]);
-  const loadImage = (0, import_react28.useCallback)(() => {
+  const loadImage = (0, import_react27.useCallback)(() => {
     if (!src) {
       setSrcIsEmpty(true);
       return;
@@ -11056,7 +12100,7 @@ function ImageLoader({
       onErrorRef.current?.();
     };
   }, [src]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!lazy3) {
       const timer = setTimeout(() => loadImage(), 0);
       return () => clearTimeout(timer);
@@ -11077,7 +12121,7 @@ function ImageLoader({
     }
     return () => observerRef.current?.disconnect();
   }, [lazy3, src, loadImage]);
-  const showFallback = (0, import_react28.useMemo)(() => {
+  const showFallback = (0, import_react27.useMemo)(() => {
     return (status === "error" && attempt >= retry || srcIsEmpty) && Fallback;
   }, [status, attempt, retry, srcIsEmpty, Fallback]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: imgRef, style: { position: "relative" }, children: [
@@ -11115,11 +12159,11 @@ function ImageLoader({
     showFallback && Fallback
   ] });
 }
-var import_react28, import_jsx_runtime17;
+var import_react27, import_jsx_runtime17;
 var init_ImageLoader = __esm({
   "src/widget/components/ImageLoader.tsx"() {
     "use strict";
-    import_react28 = require("react");
+    import_react27 = require("react");
     import_jsx_runtime17 = require("react/jsx-runtime");
   }
 });
@@ -11633,8 +12677,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
@@ -11644,8 +12688,8 @@ function ChainItem({
           "div",
           {
             style: {
-              width: "2rem",
-              height: "2rem",
+              width: "1.5rem",
+              height: "1.5rem",
               borderRadius: "9999px",
               backgroundColor: colors.muted,
               display: "flex",
@@ -11723,6 +12767,81 @@ function ChainItem({
     String(key)
   );
 }
+function SectionLabel({
+  children,
+  icon
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.25rem",
+        padding: `${spacing[1.5]} ${spacing[3]}`,
+        marginTop: spacing[2]
+      },
+      children: [
+        icon === "spark" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "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__ */ (0, import_jsx_runtime21.jsx)(
+              "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__ */ (0, import_jsx_runtime21.jsx)(
+          "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__ */ (0, import_jsx_runtime21.jsx)(
+              "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__ */ (0, import_jsx_runtime21.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: "10px",
+              fontWeight: fontWeight.medium,
+              color: colors.primary
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
 function ChainSelectorPanel({
   error,
   isChainSelected,
@@ -11731,6 +12850,21 @@ function ChainSelectorPanel({
   otherChains,
   popularChains
 }) {
+  const [chainSearch, setChainSearch] = (0, import_react28.useState)("");
+  const filteredPopular = (0, import_react28.useMemo)(() => {
+    if (!chainSearch) return popularChains;
+    const q = chainSearch.toLowerCase();
+    return popularChains.filter(
+      (c) => resolveChainLabel(c).toLowerCase().includes(q)
+    );
+  }, [popularChains, chainSearch]);
+  const filteredOther = (0, import_react28.useMemo)(() => {
+    if (!chainSearch) return otherChains;
+    const q = chainSearch.toLowerCase();
+    return otherChains.filter(
+      (c) => resolveChainLabel(c).toLowerCase().includes(q)
+    );
+  }, [otherChains, chainSearch]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
@@ -11746,22 +12880,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__ */ (0, import_jsx_runtime21.jsx)(
-              "span",
-              {
-                style: {
-                  fontSize: fontSize.xs,
-                  fontWeight: fontWeight.medium,
-                  color: colors.mutedForeground,
-                  textTransform: "uppercase",
-                  letterSpacing: "0.05em"
-                },
-                children: "Chain"
-              }
-            )
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                "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__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { strokeLinecap: "round", d: "m21 21-4.35-4.35" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "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__ */ (0, import_jsx_runtime21.jsx)(
@@ -11849,21 +13019,9 @@ function ChainSelectorPanel({
                 ]
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-              popularChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: spacing[2] }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { padding: `${spacing[1.5]} ${spacing[3]}` }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  "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__ */ (0, import_jsx_runtime21.jsx)(
+              filteredPopular.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SectionLabel, { icon: "spark", children: "Popular chains" }),
+                filteredPopular.map((chain, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   ChainItem,
                   {
                     chain,
@@ -11876,30 +13034,9 @@ function ChainSelectorPanel({
                   )
                 ))
               ] }),
-              otherChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-                popularChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                  "div",
-                  {
-                    style: {
-                      padding: `${spacing[1.5]} ${spacing[3]}`,
-                      marginTop: spacing[2]
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      "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__ */ (0, import_jsx_runtime21.jsx)(
+              filteredOther.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SectionLabel, { icon: "sort", children: "Chains A-Z" }),
+                filteredOther.map((chain, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   ChainItem,
                   {
                     chain,
@@ -11912,21 +13049,21 @@ function ChainSelectorPanel({
                   )
                 ))
               ] }),
-              popularChains.length === 0 && otherChains.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              filteredPopular.length === 0 && filteredOther.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "div",
                 {
                   style: {
-                    padding: `${spacing[3]} ${spacing[4]}`,
+                    padding: `${spacing[3]} ${spacing[2]}`,
                     textAlign: "center"
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "p",
                     {
                       style: {
-                        fontSize: fontSize.sm,
+                        fontSize: fontSize.xs,
                         color: colors.mutedForeground
                       },
-                      children: "No chains available"
+                      children: "No chains found"
                     }
                   )
                 }
@@ -11938,10 +13075,11 @@ function ChainSelectorPanel({
     }
   );
 }
-var import_jsx_runtime21;
+var import_react28, import_jsx_runtime21;
 var init_ChainSelectorPanel = __esm({
   "src/widget/features/token-selection/components/ChainSelectorPanel.tsx"() {
     "use strict";
+    import_react28 = require("react");
     init_utils2();
     init_styles();
     import_jsx_runtime21 = require("react/jsx-runtime");
@@ -11998,8 +13136,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",
@@ -12475,6 +13613,86 @@ var init_WalletTokenListItem = __esm({
 });
 
 // src/widget/features/token-selection/components/TokenSelectorPanel.tsx
+function TokenSectionLabel({
+  children,
+  icon
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "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__ */ (0, import_jsx_runtime25.jsx)(
+          "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__ */ (0, import_jsx_runtime25.jsx)(
+              "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__ */ (0, import_jsx_runtime25.jsx)(
+          "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__ */ (0, import_jsx_runtime25.jsx)(
+              "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__ */ (0, import_jsx_runtime25.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: "0.75rem",
+              lineHeight: "1rem",
+              fontWeight: fontWeight.medium,
+              color: colors.primary
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
 function TokenSelectorPanel({
   filteredTokens,
   filteredWalletTokens,
@@ -12487,9 +13705,10 @@ function TokenSelectorPanel({
   searchQuery,
   selectedChain,
   setSearchQuery,
-  tokensError,
-  walletAddress
+  tokensError
 }) {
+  const hasWalletTokens = filteredWalletTokens.length > 0;
+  const hasPopularTokens = filteredTokens.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
@@ -12500,61 +13719,20 @@ function TokenSelectorPanel({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "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__ */ (0, import_jsx_runtime25.jsxs)(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: spacing[2],
-                    marginBottom: spacing[2]
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                      "span",
-                      {
-                        style: {
-                          fontSize: fontSize.xs,
-                          fontWeight: fontWeight.medium,
-                          color: colors.mutedForeground,
-                          textTransform: "uppercase",
-                          letterSpacing: "0.05em"
-                        },
-                        children: "Token"
-                      }
-                    ),
-                    walletAddress && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                      "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__ */ (0, import_jsx_runtime25.jsx)(
-                TokenSearchInput,
-                {
-                  searchQuery,
-                  setSearchQuery
-                }
-              ) : null
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              TokenSearchInput,
+              {
+                searchQuery,
+                setSearchQuery
+              }
+            )
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -12563,115 +13741,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__ */ (0, import_jsx_runtime25.jsx)(
+            children: !selectedChain ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               TokenSelectorStateView,
               {
                 isLoadingTokens,
                 searchQuery,
                 setSearchQuery,
-                state: !selectedChain ? "no-chain" : tokensError ? "error" : "empty",
-                tokensError
+                state: "no-chain",
+                tokensError: null
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-              "div",
+            ) : isLoadingTokens && !hasWalletTokens ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              TokenSelectorStateView,
               {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: spacing[0.5]
-                },
-                children: [
-                  filteredWalletTokens.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "0.375rem",
-                        paddingLeft: "0.5rem",
-                        paddingRight: "0.5rem",
-                        marginBottom: spacing[2]
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                        "span",
-                        {
-                          style: {
-                            fontSize: "0.75rem",
-                            lineHeight: "1rem",
-                            color: colors.primary
-                          },
-                          children: "Your tokens"
-                        }
-                      )
-                    }
-                  ) : null,
-                  filteredWalletTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    WalletTokenListItem,
-                    {
-                      token,
-                      onSelect: onSelectWalletToken
+                isLoadingTokens: true,
+                searchQuery,
+                setSearchQuery,
+                state: "empty",
+                tokensError: null
+              }
+            ) : tokensError && !hasWalletTokens ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              TokenSelectorStateView,
+              {
+                isLoadingTokens: false,
+                searchQuery,
+                setSearchQuery,
+                state: "error",
+                tokensError
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { display: "flex", flexDirection: "column" }, children: [
+              hasWalletTokens && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TokenSectionLabel, { icon: "wallet", children: "Your tokens" }),
+                filteredWalletTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  WalletTokenListItem,
+                  {
+                    token,
+                    onSelect: onSelectWalletToken
+                  },
+                  `${token.address}-${i}`
+                ))
+              ] }),
+              isLoadingTokens ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                TokenSelectorStateView,
+                {
+                  isLoadingTokens: true,
+                  searchQuery,
+                  setSearchQuery,
+                  state: "empty",
+                  tokensError: null
+                }
+              ) : hasPopularTokens ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TokenSectionLabel, { icon: "spark", children: "Popular tokens" }),
+                filteredTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  AvailableTokenListItem,
+                  {
+                    token,
+                    onSelect: onSelectToken
+                  },
+                  `${token.address}-${i}`
+                )),
+                hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      void loadMore();
                     },
-                    `${token.address}-${i}`
-                  )),
-                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "0.375rem",
-                        paddingLeft: "0.5rem",
-                        paddingRight: "0.5rem",
-                        marginBottom: spacing[2]
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                        "span",
-                        {
-                          style: {
-                            fontSize: "0.75rem",
-                            lineHeight: "1rem",
-                            color: colors.primary
-                          },
-                          children: "Popular tokens"
-                        }
-                      )
-                    }
-                  ),
-                  filteredTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                    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__ */ (0, import_jsx_runtime25.jsx)(
-                    "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__ */ (0, import_jsx_runtime25.jsx)(
+                TokenSelectorStateView,
+                {
+                  isLoadingTokens: false,
+                  searchQuery,
+                  setSearchQuery,
+                  state: "empty",
+                  tokensError: null
+                }
+              ) : null
+            ] })
           }
         )
       ]
@@ -31222,29 +32384,7 @@ function SwapTokenSelect({
               popularChains
             }
           ),
-          localChain === null ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            "div",
-            {
-              style: {
-                flex: 1,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: spacing[4]
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-                "p",
-                {
-                  style: {
-                    fontSize: fontSize.sm,
-                    color: colors.mutedForeground,
-                    textAlign: "center"
-                  },
-                  children: "Select a chain to see tokens"
-                }
-              )
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             TokenSelectorPanel,
             {
               filteredTokens: visibleTokens,
@@ -31436,58 +32576,38 @@ function SwapWalletSelector({
               children: "Connect Wallet"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "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__ */ (0, import_jsx_runtime55.jsx)(
-                  "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__ */ (0, import_jsx_runtime55.jsx)(
-                  "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__ */ (0, import_jsx_runtime55.jsx)(
+                "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
+              ))
             }
           )
         ]
@@ -32088,7 +33208,7 @@ function RateRow({ label, value }) {
   );
 }
 function SwapMode({
-  theme = "system",
+  theme: themeProp,
   style
 }) {
   const [stage, setStage] = (0, import_react46.useState)("home");
@@ -32137,7 +33257,11 @@ function SwapMode({
   const settingsRef = (0, import_react46.useRef)(null);
   const currencyDropdownRef = (0, import_react46.useRef)(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;
@@ -32703,7 +33827,7 @@ function SwapMode({
     return () => document.removeEventListener("mousedown", handler);
   }, [showCurrencyDropdown]);
   if (stage === "select-from") {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       SwapTokenSelect,
       {
         side: "from",
@@ -32721,7 +33845,7 @@ function SwapMode({
     ) });
   }
   if (stage === "select-to" && !lockDestToken) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       SwapTokenSelect,
       {
         side: "to",
@@ -32740,7 +33864,7 @@ function SwapMode({
     ) });
   }
   if (stage === "connect-wallet") {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(WidgetContainer, { theme, style, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(WidgetContainer, { theme: resolvedTheme, style, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         SwapWalletSelector,
         {
@@ -32783,7 +33907,7 @@ function SwapMode({
     const offset = circ - progress / 100 * circ;
     const isApproving = txStatus === "approving";
     const title = isApproving ? "Approving..." : "Order Submitted";
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}` }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}` }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "div",
         {
@@ -33233,7 +34357,7 @@ function SwapMode({
       dateStyle: "medium",
       timeStyle: "short"
     }) ?? null;
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { position: "relative", overflow: "hidden" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { position: "relative", overflow: "hidden" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react46.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ConfettiEffect3, { isActive: true, pieceCount: 60, clearDelay: 4e3 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { padding: `${spacing[6]} ${spacing[6]} 0` }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
@@ -33312,30 +34436,58 @@ function SwapMode({
                     fontSize: fontSize.sm
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: colors.mutedForeground }, children: "You sold" }),
                     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                      "span",
+                      "div",
                       {
                         style: {
-                          display: "inline-flex",
+                          display: "flex",
                           alignItems: "center",
-                          gap: spacing[2],
+                          gap: spacing[2]
+                        },
+                        children: [
+                          fromToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                              "img",
+                              {
+                                src: fromToken.iconUrl,
+                                alt: "",
+                                style: {
+                                  width: "1.375rem",
+                                  height: "1.375rem",
+                                  borderRadius: "9999px"
+                                }
+                              }
+                            ),
+                            fromChain?.chainIconURI && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                              "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__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: colors.mutedForeground }, children: "You sold" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                      "span",
+                      {
+                        style: {
                           fontWeight: fontWeight.semibold,
                           color: colors.foreground
                         },
                         children: [
-                          fromToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                            "img",
-                            {
-                              src: fromToken.iconUrl,
-                              style: {
-                                width: "1.25rem",
-                                height: "1.25rem",
-                                borderRadius: "9999px"
-                              },
-                              alt: ""
-                            }
-                          ),
                           fmtAmount(tokenSellNum, 4),
                           " ",
                           fromToken?.symbol
@@ -33356,30 +34508,58 @@ function SwapMode({
                     marginTop: spacing[3]
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: colors.mutedForeground }, children: "Received" }),
                     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                      "span",
+                      "div",
                       {
                         style: {
-                          display: "inline-flex",
+                          display: "flex",
                           alignItems: "center",
-                          gap: spacing[2],
+                          gap: spacing[2]
+                        },
+                        children: [
+                          toToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                              "img",
+                              {
+                                src: toToken.iconUrl,
+                                alt: "",
+                                style: {
+                                  width: "1.375rem",
+                                  height: "1.375rem",
+                                  borderRadius: "9999px"
+                                }
+                              }
+                            ),
+                            toChain?.chainIconURI && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                              "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__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: colors.mutedForeground }, children: "Received" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                      "span",
+                      {
+                        style: {
                           fontWeight: fontWeight.semibold,
                           color: colors.foreground
                         },
                         children: [
-                          toToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                            "img",
-                            {
-                              src: toToken.iconUrl,
-                              style: {
-                                width: "1.25rem",
-                                height: "1.25rem",
-                                borderRadius: "9999px"
-                              },
-                              alt: ""
-                            }
-                          ),
                           finalToAmount !== null ? fmtAmount(finalToAmount, 4) : "\u2014",
                           " ",
                           toToken?.symbol
@@ -33430,13 +34610,6 @@ function SwapMode({
                         value: effectiveRate
                       }
                     ),
-                    (fromChain?.networkName ?? fromChain?.axelarChainName) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                      SuccessReceiptRow,
-                      {
-                        label: "Network",
-                        value: fromChain?.networkName ?? fromChain?.axelarChainName
-                      }
-                    ),
                     completedStr && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SuccessReceiptRow, { label: "Completed", value: completedStr }),
                     txHash && (() => {
                       const srcUrl = buildExplorerUrl(
@@ -33745,7 +34918,7 @@ function SwapMode({
     ] }) });
   }
   if (stage === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
       "div",
       {
         style: {
@@ -33879,422 +35052,408 @@ function SwapMode({
   if (stage === "review") {
     const reviewToAmount = toAmount ?? displayToAmount;
     const reviewToUsd = toUsd > 0 ? toUsd : displayToUsd;
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}` }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: spacing[5]
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              "span",
-              {
-                style: {
-                  fontSize: fontSize.sm,
-                  fontWeight: fontWeight.medium,
-                  color: colors.mutedForeground
-                },
-                children: "You're swapping"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              "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__ */ (0, import_jsx_runtime56.jsx)(
-                  "svg",
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      "div",
+      {
+        style: {
+          padding: `${spacing[5]} ${spacing[6]} ${spacing[6]}`,
+          maxHeight: "85vh",
+          overflowY: "auto"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                marginBottom: spacing[5]
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  "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__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
+                    children: "You're swapping"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  "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__ */ (0, import_jsx_runtime56.jsx)(
+                      "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__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })
+                      }
+                    )
                   }
                 )
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                "p",
-                {
-                  style: {
-                    fontSize: "1.75rem",
-                    fontWeight: fontWeight.semibold,
-                    color: colors.foreground,
-                    lineHeight: 1.2
-                  },
-                  children: [
-                    fmtAmount(tokenSellNum, 5),
-                    " ",
-                    fromToken?.symbol
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                "p",
-                {
-                  style: {
-                    fontSize: fontSize.sm,
-                    color: colors.mutedForeground,
-                    marginTop: "0.125rem"
-                  },
-                  children: fmtLocal(fromUsd)
-                }
-              )
-            ] }),
-            fromToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              TokenIcon,
-              {
-                icon: fromToken.iconUrl,
-                chainIcon: fromChain?.chainIconURI,
-                size: "lg"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "center",
-            margin: `${spacing[3]} 0`
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-            "svg",
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            "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__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M12 5v14m-7-7l7 7 7-7" })
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                    "p",
+                    {
+                      style: {
+                        fontSize: "1.75rem",
+                        fontWeight: fontWeight.semibold,
+                        color: colors.foreground,
+                        lineHeight: 1.2
+                      },
+                      children: [
+                        fmtAmount(tokenSellNum, 5),
+                        " ",
+                        fromToken?.symbol
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    "p",
+                    {
+                      style: {
+                        fontSize: fontSize.sm,
+                        color: colors.mutedForeground,
+                        marginTop: "0.125rem"
+                      },
+                      children: fmtLocal(fromUsd)
+                    }
+                  )
+                ] }),
+                fromToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  TokenIcon,
+                  {
+                    icon: fromToken.iconUrl,
+                    chainIcon: fromChain?.chainIconURI,
+                    size: "lg"
+                  }
+                )
+              ]
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                "p",
-                {
-                  style: {
-                    fontSize: "1.75rem",
-                    fontWeight: fontWeight.semibold,
-                    color: colors.foreground,
-                    lineHeight: 1.2
-                  },
-                  children: [
-                    reviewToAmount !== null ? fmtAmount(reviewToAmount, 5) : "\u2014",
-                    " ",
-                    toToken?.symbol
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                "p",
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "center",
+                margin: `${spacing[3]} 0`
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                "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__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M12 5v14m-7-7l7 7 7-7" })
                 }
               )
-            ] }),
-            toToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              TokenIcon,
-              {
-                icon: toToken.iconUrl,
-                chainIcon: toChain?.chainIconURI,
-                size: "lg"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        "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__ */ (0, import_jsx_runtime56.jsx)(
-              "div",
-              {
-                style: { flex: 1, height: "1px", backgroundColor: colors.border }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-              "span",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.25rem",
-                  padding: `0 ${spacing[2]}`,
-                  whiteSpace: "nowrap"
-                },
-                children: [
-                  showReviewDetails ? "Show less" : "Show more",
-                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                    "svg",
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                    "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__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M6 9l6 6 6-6" })
+                      children: [
+                        reviewToAmount !== null ? fmtAmount(reviewToAmount, 5) : "\u2014",
+                        " ",
+                        toToken?.symbol
+                      ]
                     }
                   ),
-                  route.data && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                    "svg",
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    "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__ */ (0, import_jsx_runtime56.jsx)(
-                          "circle",
-                          {
-                            cx: "7",
-                            cy: "7",
-                            r: "5",
-                            fill: "none",
-                            stroke: "hsl(var(--tw-border))",
-                            strokeWidth: "1.5"
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                          "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__ */ (0, import_jsx_runtime56.jsx)(
-              "div",
-              {
-                style: { flex: 1, height: "1px", backgroundColor: colors.border }
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: spacing[3],
-            fontSize: fontSize.sm
-          },
-          children: [
-            showReviewDetails && exchangeRate !== null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              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__ */ (0, import_jsx_runtime56.jsx)(
-              ReviewDetailRow,
-              {
-                label: "Fee",
-                tooltip: "Protocol fee charged by the bridge or DEX",
-                value: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                  "span",
+                ] }),
+                toToken?.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  TokenIcon,
                   {
-                    style: {
-                      color: colors.foreground,
-                      fontWeight: fontWeight.medium
-                    },
-                    children: protocolFeeUsd !== null ? fmtLocal(protocolFeeUsd) : "Free"
+                    icon: toToken.iconUrl,
+                    chainIcon: toChain?.chainIconURI,
+                    size: "lg"
                   }
                 )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              ReviewDetailRow,
-              {
-                label: "Network cost",
-                tooltip: "Estimated gas fee paid to the blockchain network",
-                value: isGasSponsored ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SponsoredBadge, {}) : networkCostUsd !== null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            "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__ */ (0, import_jsx_runtime56.jsx)(
+                  "div",
+                  {
+                    style: { flex: 1, height: "1px", backgroundColor: colors.border }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                   "span",
                   {
                     style: {
                       display: "flex",
                       alignItems: "center",
                       gap: "0.25rem",
-                      color: colors.mutedForeground
+                      padding: `0 ${spacing[2]}`,
+                      whiteSpace: "nowrap"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(GasIcon, { size: "0.875rem" }),
-                      fmtLocal(networkCostUsd)
+                      showReviewDetails ? "Hide details" : "View details",
+                      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                        "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__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M6 9l6 6 6-6" })
+                        }
+                      ),
+                      route.data && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 14 14",
+                          style: {
+                            transform: "rotate(-90deg)",
+                            flexShrink: 0,
+                            opacity: 0.75,
+                            marginLeft: "0.125rem"
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                              "circle",
+                              {
+                                cx: "7",
+                                cy: "7",
+                                r: "5",
+                                fill: "none",
+                                stroke: "hsl(var(--tw-border))",
+                                strokeWidth: "1.5"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                              "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__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: colors.mutedForeground }, children: "\u2014" })
-              }
-            ),
-            showReviewDetails && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                ReviewDetailRow,
-                {
-                  label: "Max slippage",
-                  tooltip: "Max price movement allowed before the swap automatically reverts",
-                  value: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                    "span",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: spacing[1.5]
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { style: { color: colors.mutedForeground }, children: [
-                        slippage,
-                        "%"
-                      ] })
-                    }
-                  )
-                }
-              ),
-              (routePath || route.data?.route?.provider) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                ReviewDetailRow,
-                {
-                  label: "Route",
-                  tooltip: "Protocol or bridge used to execute your swap",
-                  value: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                    "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__ */ (0, import_jsx_runtime56.jsx)(
-        SwapActionArea,
-        {
-          fromTokenSymbol: fromToken?.symbol ?? "",
-          allowanceStatus: execution.allowanceStatus,
-          txStatus: execution.txStatus,
-          isSubmitting: execution.isSubmitting,
-          isGasSponsored,
-          onExecute: () => void handleExecute()
-        }
-      )
-    ] }) });
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  "div",
+                  {
+                    style: { flex: 1, height: "1px", backgroundColor: colors.border }
+                  }
+                )
+              ]
+            }
+          ),
+          showReviewDetails && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: spacing[3],
+                fontSize: fontSize.sm,
+                marginBottom: spacing[2]
+              },
+              children: [
+                exchangeRate !== null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  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__ */ (0, import_jsx_runtime56.jsx)(
+                  ReviewDetailRow,
+                  {
+                    label: "Fee",
+                    tooltip: "Protocol fee charged by the bridge or DEX",
+                    value: protocolFeeUsd !== null ? fmtLocal(protocolFeeUsd) : "Free"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  ReviewDetailRow,
+                  {
+                    label: "Network cost",
+                    tooltip: "Estimated gas fee paid to the blockchain network",
+                    value: isGasSponsored ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SponsoredBadge, {}) : networkCostUsd !== null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                      "span",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "0.25rem"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(GasIcon, { size: "0.875rem" }),
+                          fmtLocal(networkCostUsd)
+                        ]
+                      }
+                    ) : "\u2014"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  ReviewDetailRow,
+                  {
+                    label: "Max slippage",
+                    tooltip: "Max price movement allowed before the swap automatically reverts",
+                    value: `${slippage}%`
+                  }
+                ),
+                (routePath || route.data?.route?.provider) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  ReviewDetailRow,
+                  {
+                    label: "Route",
+                    tooltip: "Protocol or bridge used to execute your swap",
+                    value: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                      "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__ */ (0, import_jsx_runtime56.jsx)(
+            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__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(WidgetContainer, { theme: resolvedTheme, style, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       style: { display: "flex", flexDirection: "column", minHeight: "500px" },
@@ -34420,6 +35579,91 @@ function SwapMode({
                           zIndex: 100
                         },
                         children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            "p",
+                            {
+                              style: {
+                                fontSize: fontSize.xs,
+                                fontWeight: fontWeight.semibold,
+                                color: colors.mutedForeground,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.06em",
+                                marginBottom: spacing[3]
+                              },
+                              children: "Appearance"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { marginBottom: spacing[4] }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between"
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                                    "p",
+                                    {
+                                      style: {
+                                        fontSize: fontSize.sm,
+                                        fontWeight: fontWeight.medium,
+                                        color: colors.foreground
+                                      },
+                                      children: "Dark mode"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                                    "p",
+                                    {
+                                      style: {
+                                        fontSize: "0.625rem",
+                                        color: colors.mutedForeground,
+                                        marginTop: "2px"
+                                      },
+                                      children: resolvedTheme === "dark" ? "Dark theme active" : "Light theme active"
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                                  "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__ */ (0, import_jsx_runtime56.jsx)(
+                                      "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__ */ (0, import_jsx_runtime56.jsx)(
                             "p",
                             {
@@ -35274,7 +36518,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,
@@ -35572,12 +36817,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."
         ]
       }
     )
@@ -35792,7 +37040,14 @@ function ReviewDetailRow({
   value,
   tooltip
 }) {
-  const [tipVisible, setTipVisible] = (0, import_react46.useState)(false);
+  const iconRef = (0, import_react46.useRef)(null);
+  const [tipPos, setTipPos] = (0, import_react46.useState)(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__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
@@ -35813,66 +37068,65 @@ function ReviewDetailRow({
             },
             children: [
               label,
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "span",
                 {
-                  style: {
-                    position: "relative",
-                    display: "inline-flex",
-                    alignItems: "center"
-                  },
-                  onMouseEnter: () => setTipVisible(true),
-                  onMouseLeave: () => setTipVisible(false),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-                      "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__ */ (0, import_jsx_runtime56.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M12 16v-4M12 8h.01" })
-                        ]
-                      }
-                    ),
-                    tooltip && tipVisible && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                      "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__ */ (0, import_jsx_runtime56.jsxs)(
+                    "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__ */ (0, import_jsx_runtime56.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M12 16v-4M12 8h.01" })
+                      ]
+                    }
+                  )
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: colors.mutedForeground }, children: value })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { style: { color: colors.foreground, fontWeight: fontWeight.medium }, children: value }),
+        tooltip && tipPos && typeof document !== "undefined" && import_react_dom.default.createPortal(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            "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
+        )
       ]
     }
   );
@@ -36066,15 +37320,17 @@ function ProcessingStepLine({ done }) {
     }
   );
 }
-var import_react46, import_jsx_runtime56, ConfettiEffect3, QUOTE_TTL, PERCENT_OPTIONS;
+var import_react46, import_react_dom, import_jsx_runtime56, ConfettiEffect3, QUOTE_TTL, PERCENT_OPTIONS;
 var init_SwapMode = __esm({
   "src/modes/swap/SwapMode.tsx"() {
     "use strict";
     import_react46 = require("react");
+    import_react_dom = __toESM(require("react-dom"), 1);
     init_styles();
     init_utils();
     init_components();
     init_registryClient();
+    init_useThemePreference();
     init_useWalletSessionState();
     init_useWalletTokenState();
     init_hooks2();
@@ -36254,7 +37510,7 @@ var init_TrustwareWidgetV2 = __esm({
       zIndex: 12
     };
     TrustwareWidgetV2 = (0, import_react47.forwardRef)(function TrustwareWidgetV22({
-      theme = "system",
+      theme,
       style,
       initialStep = "home",
       defaultOpen = true,