@xswap-link/sdk 0.14.0 → 0.14.1

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/NetworkFilter/index.tsx

@@ -56,7 +56,7 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, []);
 
-  const previewChains = chains.slice(0, 4);
+  const previewChains = chains.slice(0, 3);
 
   return (
     <div className="relative" ref={containerRef}>
@@ -72,19 +72,21 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
             className="w-5 h-5 rounded-full"
           />
         ) : (
-          <div className="grid grid-cols-2 gap-0.5 w-6 shrink-0">
+          <div className="flex -space-x-1.5 shrink-0">
             {previewChains.map((chain) => (
               <img
                 key={chain.chainId}
                 src={chain.image}
                 alt={chain.displayName}
-                className="w-[11px] h-[11px] rounded-full"
+                className="w-5 h-5 rounded-full border border-solid border-t_bg_primary bg-t_bg_primary"
               />
             ))}
           </div>
         )}
         <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary whitespace-nowrap max-w-[120px] truncate">
-          {selectedChain ? selectedChain.displayName : "All Networks"}
+          {selectedChain
+            ? selectedChain.displayName
+            : `${chains.length} Networks`}
         </p>
         <div
           className={`flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-50 transition-transform [&_svg]:w-3 [&_svg]:h-3 ${
@@ -132,13 +134,13 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
                       className="w-5 h-5 rounded-full"
                     />
                   ) : (
-                    <div className="grid grid-cols-2 gap-px w-5 shrink-0">
+                    <div className="flex -space-x-1 shrink-0">
                       {previewChains.map((previewChain) => (
                         <img
                           key={previewChain.chainId}
                           src={previewChain.image}
                           alt={previewChain.displayName}
-                          className="w-[9px] h-[9px] rounded-full"
+                          className="w-4 h-4 rounded-full border border-solid border-t_bg_primary bg-t_bg_primary"
                         />
                       ))}
                     </div>

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/TokenItem/index.tsx

@@ -69,7 +69,7 @@ export const TokenItem = ({
   return (
     <div className="pb-2">
       <div
-        className={`flex gap-3 items-center p-3 sm:p-4 rounded-xl cursor-pointer bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.02] bg-t_bg_secondary bg-opacity-15 hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
+        className={`flex gap-3 items-center p-3 sm:p-4 rounded-xl cursor-pointer bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.02] bg-[rgba(40,40,40,0.15)] hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
           isSelected ? "!bg-t_bg_tertiary !bg-opacity-10" : ""
         }`}
         onClick={onClick}
@@ -142,9 +142,16 @@ export const TokenItem = ({
               <div className="flex items-center justify-end gap-1.5 text-[#D77F02]">
                 <WarningIcon className="w-3.5 h-3.5 shrink-0" />
                 <span className="text-xs leading-[18px] tracking-[0.01em] whitespace-nowrap">
-                  {resetWarning === "source"
-                    ? "Source will reset after selection."
-                    : "Destination will reset after selection."}
+                  <span className="sm:hidden">
+                    {resetWarning === "source"
+                      ? "Source will reset."
+                      : "Destination will reset."}
+                  </span>
+                  <span className="hidden sm:inline">
+                    {resetWarning === "source"
+                      ? "Source will reset after selection."
+                      : "Destination will reset after selection."}
+                  </span>
                 </span>
               </div>
             ) : (

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/index.tsx

@@ -9,10 +9,9 @@ import {
 } from "@src/components";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { useSwapContext } from "@src/context";
-import { ERC20Abi } from "@src/contracts";
-import { useEvmContractApi } from "@src/hooks";
 import { Chain, Ecosystem, ImportedTokenData, TokenOption } from "@src/models";
 import {
+  isBridgeTokenConnectionSupported,
   isChainConnectionSupported,
   isETHAddressValid,
   isServer,
@@ -28,6 +27,7 @@ import { useAccount } from "wagmi";
 import { Connection, PublicKey } from "@solana/web3.js";
 import { METADATA_PROGRAM_ID } from "@src/constants";
 import { useWallet } from "@src/context/WalletProvider";
+import { getTokenMetadata } from "@src/services/api";
 
 type Props = {
   type: SwapPanelType;
@@ -67,21 +67,26 @@ export const TokenPicker = ({
     findTokenDataByAddressAndChain,
     tokenPrices,
     addTokenToChainIfNotExists,
+    bridgeTokensDictionary,
   } = useSwapContext();
   const { address } = useAccount();
   const {
     solana: { address: solanaAddress },
   } = useWallet();
-  const evmContractApi = useEvmContractApi();
 
   useEffect(() => {
     setShowImportWarning(false);
     setAcceptRisks(false);
   }, [isOpen]);
 
+  // Custom token imports follow the network filter, not the chain currently
+  // set on the swap panel — the picker lists tokens across networks, so a
+  // pasted address is resolved on the network the user is browsing.
+  const importChain = networkFilter ?? chain;
+
   const importCustomToken = useCallback(() => {
     if (
-      chain &&
+      importChain &&
       customTokenData &&
       (isETHAddressValid(searchValue) || isSolanaAddressValid(searchValue))
     ) {
@@ -101,12 +106,12 @@ export const TokenPicker = ({
         quickPick: false,
         supported: true,
         priority: 0,
-        chainId: chain.chainId,
+        chainId: importChain.chainId,
       };
 
       if (!isServer) {
-        customTokens[chain.chainId] = {
-          ...(customTokens[chain.chainId] || {}),
+        customTokens[importChain.chainId] = {
+          ...(customTokens[importChain.chainId] || {}),
           [searchValue.toLowerCase()]: newCustomToken,
         };
         localStorage.setItem("custom-tokens", JSON.stringify(customTokens));
@@ -117,7 +122,7 @@ export const TokenPicker = ({
       setModalOpen(false);
     }
   }, [
-    chain,
+    importChain,
     customTokenData,
     searchValue,
     addTokenToChainIfNotExists,
@@ -125,42 +130,32 @@ export const TokenPicker = ({
   ]);
 
   const getCustomTokenData = useCallback(async () => {
+    if (!importChain) {
+      return;
+    }
     const nonce = Date.now();
     currentRouteRequestNonce.current = nonce;
-    const rpcUrl = supportedChains.find(
-      ({ ecosystem, chainId }) =>
-        ecosystem === Ecosystem.EVM && chainId === chain?.chainId,
-    )?.publicRpcUrls[0];
-    const customTokenContract = new ethers.Contract(
-      searchValue.toLowerCase(),
-      ERC20Abi,
-      ethers.getDefaultProvider(rpcUrl),
-    );
     setLoadingCustomTokenData(true);
     try {
-      const responses = await Promise.all([
-        evmContractApi.query(customTokenContract, "decimals"),
-        evmContractApi.query(customTokenContract, "name"),
-        evmContractApi.query(customTokenContract, "symbol"),
-      ]);
+      // Resolved server-side through private RPCs — public ones often 429
+      const tokenData = await getTokenMetadata({
+        chainId: importChain.chainId,
+        tokenAddress: searchValue.toLowerCase(),
+      });
       if (nonce !== currentRouteRequestNonce.current) {
         return;
       }
-      const [decimals, name, symbol] = responses;
-      setCustomTokenData({
-        address: searchValue.toLowerCase(),
-        decimals,
-        name,
-        symbol,
-      });
+      setCustomTokenData(tokenData);
     } catch (_) {
-      setCustomTokenData(null);
+      if (nonce === currentRouteRequestNonce.current) {
+        setCustomTokenData(null);
+      }
     } finally {
       if (nonce === currentRouteRequestNonce.current) {
         setLoadingCustomTokenData(false);
       }
     }
-  }, [chain, searchValue, evmContractApi, supportedChains]);
+  }, [importChain, searchValue]);
 
   const getCustomSolanaTokenData = useCallback(async () => {
     const nonce = Date.now();
@@ -168,7 +163,7 @@ export const TokenPicker = ({
 
     const rpcUrl = supportedChains.find(
       ({ ecosystem, chainId }) =>
-        ecosystem === Ecosystem.SOLANA && chainId === chain?.chainId,
+        ecosystem === Ecosystem.SOLANA && chainId === importChain?.chainId,
     )?.publicRpcUrls[0];
 
     if (!rpcUrl || !searchValue || !isSolanaAddressValid(searchValue)) {
@@ -258,23 +253,26 @@ export const TokenPicker = ({
         setLoadingCustomTokenData(false);
       }
     }
-  }, [chain, searchValue, supportedChains]);
+  }, [importChain, searchValue, supportedChains]);
 
   useEffect(() => {
     if (
       !bridgeUI &&
-      chain &&
+      importChain &&
       !findTokenDataByAddressAndChain(
-        chain.ecosystem === Ecosystem.EVM
+        importChain.ecosystem === Ecosystem.EVM
           ? searchValue.toLowerCase()
           : searchValue,
-        chain.chainId,
+        importChain.chainId,
       )
     ) {
-      if (chain.ecosystem === Ecosystem.EVM && isETHAddressValid(searchValue)) {
+      if (
+        importChain.ecosystem === Ecosystem.EVM &&
+        isETHAddressValid(searchValue)
+      ) {
         getCustomTokenData();
       } else if (
-        chain.ecosystem === Ecosystem.SOLANA &&
+        importChain.ecosystem === Ecosystem.SOLANA &&
         isSolanaAddressValid(searchValue)
       ) {
         getCustomSolanaTokenData();
@@ -292,7 +290,7 @@ export const TokenPicker = ({
     getCustomTokenData,
     getCustomSolanaTokenData,
     findTokenDataByAddressAndChain,
-    chain,
+    importChain,
   ]);
 
   useEffect(() => {
@@ -330,6 +328,47 @@ export const TokenPicker = ({
     [tokenPrices],
   );
 
+  const getResetWarning = useCallback(
+    (token: TokenOption): SwapPanelType | null => {
+      if (type === "destination") {
+        if (
+          srcChain &&
+          !isChainConnectionSupported(srcChain, token.chainId, bridgeUI)
+        ) {
+          return "source";
+        }
+        return null;
+      }
+      const tokenChain = supportedChains.find(
+        ({ chainId }) => chainId === token.chainId,
+      );
+      if (
+        dstChain &&
+        tokenChain &&
+        (!isChainConnectionSupported(tokenChain, dstChain.chainId, bridgeUI) ||
+          (bridgeUI &&
+            !isBridgeTokenConnectionSupported({
+              token,
+              tokenChain,
+              dstChainId: dstChain.chainId,
+              bridgeTokensDictionary,
+            })))
+      ) {
+        return "destination";
+      }
+      return null;
+    },
+    [type, srcChain, dstChain, bridgeUI, supportedChains, bridgeTokensDictionary],
+  );
+
+  // Tokens that reset the other side of the swap on selection go below
+  // the ones that can be picked freely.
+  const compareByResetWarning = useCallback(
+    (tokenA: TokenOption, tokenB: TokenOption) =>
+      Number(!!getResetWarning(tokenA)) - Number(!!getResetWarning(tokenB)),
+    [getResetWarning],
+  );
+
   const ownedTokens = useMemo(() => {
     if (!address && !solanaAddress) {
       return [];
@@ -337,6 +376,10 @@ export const TokenPicker = ({
     return visibleTokens
       .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
       .sort((tokenA, tokenB) => {
+        const warningOrder = compareByResetWarning(tokenA, tokenB);
+        if (warningOrder !== 0) {
+          return warningOrder;
+        }
         const valueA = calculateTokenValue(tokenA);
         const valueB = calculateTokenValue(tokenB);
         // First sort by USD value
@@ -346,7 +389,13 @@ export const TokenPicker = ({
         // If USD values are equal (or both 0), sort by priority
         return tokenB.priority - tokenA.priority;
       });
-  }, [visibleTokens, address, solanaAddress, calculateTokenValue]);
+  }, [
+    visibleTokens,
+    address,
+    solanaAddress,
+    calculateTokenValue,
+    compareByResetWarning,
+  ]);
 
   const recommendedTokens = useMemo(
     () =>
@@ -357,9 +406,11 @@ export const TokenPicker = ({
             BigNumber.from(token?.balance || "0").eq(0),
         )
         .sort(
-          (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+          (tokenDataA, tokenDataB) =>
+            compareByResetWarning(tokenDataA, tokenDataB) ||
+            tokenDataB.priority - tokenDataA.priority,
         ),
-    [visibleTokens, address, solanaAddress],
+    [visibleTokens, address, solanaAddress, compareByResetWarning],
   );
 
   const tokenGroups = useMemo(() => {
@@ -376,32 +427,6 @@ export const TokenPicker = ({
     [tokenGroups],
   );
 
-  const getResetWarning = useCallback(
-    (token: TokenOption): SwapPanelType | null => {
-      if (type === "destination") {
-        if (
-          srcChain &&
-          !isChainConnectionSupported(srcChain, token.chainId, bridgeUI)
-        ) {
-          return "source";
-        }
-        return null;
-      }
-      const tokenChain = supportedChains.find(
-        ({ chainId }) => chainId === token.chainId,
-      );
-      if (
-        dstChain &&
-        tokenChain &&
-        !isChainConnectionSupported(tokenChain, dstChain.chainId, bridgeUI)
-      ) {
-        return "destination";
-      }
-      return null;
-    },
-    [type, srcChain, dstChain, bridgeUI, supportedChains],
-  );
-
   useEffect(() => {
     if (isOpen && tokenSearchRef.current) {
       setTimeout(() => {
@@ -549,7 +574,7 @@ export const TokenPicker = ({
               <div className="flex gap-3 py-3 px-4 items-center rounded-xl bg-t_bg_tertiary bg-opacity-[0.03]">
                 <TokenLogoWithChain
                   token={customTokenData}
-                  chain={chain}
+                  chain={importChain}
                   tokenLogoClassName="w-9 h-9"
                   generatedLogoClassName="w-9 h-9 text-[16px]"
                   chainLogoClassName="w-5"
@@ -560,7 +585,7 @@ export const TokenPicker = ({
                       {customTokenData.name}
                     </div>
                     <div className="text-xs text-t_text_primary !text-opacity-50 font-medium">
-                      {chain?.displayName}
+                      {importChain?.displayName}
                     </div>
                   </div>
                   <div className="text-sm text-t_text_primary text-opacity-50">
@@ -583,12 +608,16 @@ export const TokenPicker = ({
                   style={{ maxHeight: "700px", height: "100%" }}
                   groupCounts={tokenGroups.map((group) => group.tokens.length)}
                   groupContent={(index) => (
-                    <div className="pb-3 bg-t_bg_primary">
-                      <p className="text-[10px] font-medium leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left">
+                    // Sticky section label: a near-opaque, blurred, widget-glass-colored
+                    // band — rows dissolve under it while scrolling instead
+                    // of showing through, and the band still picks up a hint
+                    // of the page glow like the glass around it.
+                    <div className="backdrop-blur-xl bg-gradient-to-r from-t_bg_secondary/40 to-t_bg_secondary/40 bg-t_bg_primary bg-opacity-75">
+                      <p className="pb-3 text-[10px] font-medium leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left">
                         {tokenGroups[index]?.label}
                       </p>
                       {!tokenGroups[index]?.tokens.length && (
-                        <div className="text-center py-1 text-sm text-t_text_primary text-opacity-50">
+                        <div className="text-center py-1 pb-3 text-sm text-t_text_primary text-opacity-50">
                           No token found
                         </div>
                       )}

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/index.tsx

@@ -1,11 +1,9 @@
 import { ChevronDownIcon } from "@src/assets/icons";
-import { Modal, TokenLogoWithChain } from "@src/components";
+import { TokenLogoWithChain } from "@src/components";
 import { useSwapContext } from "@src/context";
-import { Chain, Token, TokenOption } from "@src/models";
-import { isChainConnectionSupported } from "@src/utils";
-import { useMemo, useState } from "react";
+import { Chain, Token } from "@src/models";
+import { useMemo } from "react";
 import { SwapPanelType } from "../../index";
-import { TokenPicker } from "./TokenPicker";
 
 type Props = {
   chain: Chain | undefined;
@@ -17,19 +15,10 @@ type Props = {
 export const TokenPanel = ({ chain, token, type, className }: Props) => {
   const {
     bridgeUI,
-    srcChain,
-    dstChain,
-    srcChainTokensOptions,
-    srcChainOtherTokensOptions,
-    dstChainTokensOptions,
-    dstChainOtherTokensOptions,
-    setSrcToken,
-    setSrcChain,
-    supportedChains,
-    setDstToken,
-    setDstChain,
     dstTokenLocked,
     srcTokenLocked,
+    dstChainLocked,
+    setActivePicker,
   } = useSwapContext();
 
   const integratorLockedDestinationToken = useMemo(
@@ -42,120 +31,65 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
     [type, srcTokenLocked],
   );
 
-  const [tokenPickerModalOpen, setTokenPickerModalOpen] = useState(false);
-
-  const tokensWithBalances = useMemo(
-    () => (type === "source" ? srcChainTokensOptions : dstChainTokensOptions),
-    [dstChainTokensOptions, srcChainTokensOptions, type],
-  );
-
-  const pickerDisabled = useMemo(
+  // In bridge mode the destination token is derived from the source token,
+  // so the destination panel picks a chain instead of a token.
+  const bridgeDestination = useMemo(
     () => type === "destination" && bridgeUI,
     [bridgeUI, type],
   );
 
-  const otherTokensWithBalances = useMemo(
-    () =>
-      type === "source"
-        ? srcChainOtherTokensOptions
-        : dstChainOtherTokensOptions,
-    [dstChainOtherTokensOptions, srcChainOtherTokensOptions, type],
-  );
-
-  const onTokenSelect = (token: TokenOption) => {
-    const newChain = supportedChains.find(
-      (chain) => chain.chainId === token.chainId,
-    );
-
-    if (type === "source") {
-      setSrcToken(token);
-      setSrcChain(newChain);
-      // The new source chain cannot reach the current destination —
-      // reset the destination so the user picks a reachable one.
-      if (
-        dstChain &&
-        !isChainConnectionSupported(newChain, dstChain.chainId, bridgeUI)
-      ) {
-        setDstChain(undefined);
-        setDstToken(undefined);
-      }
-    } else {
-      setDstToken(token);
-      setDstChain(newChain);
-      // The current source cannot reach the new destination chain —
-      // reset the source so the user picks a reachable one.
-      if (
-        srcChain &&
-        newChain &&
-        !isChainConnectionSupported(srcChain, newChain.chainId, bridgeUI)
-      ) {
-        setSrcChain(undefined);
-        setSrcToken(undefined);
-      }
-    }
-    setTokenPickerModalOpen(false);
-  };
-
   const locked =
-    pickerDisabled ||
+    (bridgeDestination && dstChainLocked) ||
     integratorLockedDestinationToken ||
     integratorLockedSourceToken;
 
   return (
-    <>
-      {tokenPickerModalOpen && (
-        <Modal onClose={() => setTokenPickerModalOpen(false)} className="z-[3]">
-          <TokenPicker
-            type={type}
-            chain={chain!}
-            tokens={tokensWithBalances}
-            otherTokens={otherTokensWithBalances}
-            selectedTokenAddress={token?.address}
-            onSelect={onTokenSelect}
-            isOpen={tokenPickerModalOpen}
-            setModalOpen={setTokenPickerModalOpen}
+    <button
+      type="button"
+      disabled={locked}
+      onClick={() => {
+        setActivePicker(type);
+      }}
+      className={`flex items-center gap-1 shrink-0 rounded-lg ${
+        locked ? "" : "hover:opacity-80 transition-opacity"
+      } ${className || ""}`}
+    >
+      <div className="flex items-center gap-3">
+        <p
+          className={`text-sm font-medium leading-6 tracking-[0.01em] text-t_text_primary ${
+            token ? "" : "opacity-60"
+          }`}
+        >
+          {token
+            ? token.symbol
+            : bridgeDestination && chain
+            ? chain.displayName
+            : "Select"}
+        </p>
+        {token ? (
+          <TokenLogoWithChain
+            token={token}
+            chain={chain}
+            tokenLogoClassName="w-10 h-10"
+            generatedLogoClassName="w-10 h-10 text-[16px]"
+            chainLogoClassName="w-[18px]"
           />
-        </Modal>
-      )}
-
-      <button
-        type="button"
-        disabled={locked}
-        onClick={() => {
-          setTokenPickerModalOpen(true);
-        }}
-        className={`flex items-center gap-1 shrink-0 rounded-lg ${
-          locked ? "" : "hover:opacity-80 transition-opacity"
-        } ${className || ""}`}
-      >
-        <div className="flex items-center gap-3">
-          <p
-            className={`text-sm font-medium leading-6 tracking-[0.01em] text-t_text_primary ${
-              token ? "" : "opacity-60"
-            }`}
-          >
-            {token
-              ? token.symbol
-              : type === "destination" && bridgeUI
-              ? "-"
-              : "Select"}
-          </p>
-          {token && (
-            <TokenLogoWithChain
-              token={token}
-              chain={chain}
-              tokenLogoClassName="w-10 h-10"
-              generatedLogoClassName="w-10 h-10 text-[16px]"
-              chainLogoClassName="w-[18px]"
+        ) : (
+          bridgeDestination &&
+          chain && (
+            <img
+              src={chain.image}
+              alt={chain.displayName}
+              className="w-10 h-10 rounded-full"
             />
-          )}
-        </div>
-        {!locked && (
-          <div className="flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-50 [&_svg]:w-3 [&_svg]:h-3">
-            <ChevronDownIcon />
-          </div>
+          )
         )}
-      </button>
-    </>
+      </div>
+      {!locked && (
+        <div className="flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-50 [&_svg]:w-3 [&_svg]:h-3">
+          <ChevronDownIcon />
+        </div>
+      )}
+    </button>
   );
 };

package/src/components/Swap/SwapView/SwapPanel/index.tsx

@@ -27,7 +27,7 @@ export const SwapPanel = ({ type }: Props) => {
     <div
       className={`flex flex-col gap-2 px-4 sm:px-6 py-4 rounded-2xl bg-t_bg_secondary bg-opacity-60 ${
         type === "source"
-          ? "bg-gradient-to-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 border border-solid border-t_text_primary border-opacity-10"
+          ? "bg-gradient-to-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 border border-solid border-t_text_primary border-opacity-25"
           : "bg-gradient-to-r from-t_bg_tertiary/[0.03] to-t_bg_tertiary/[0.03]"
       }`}
     >

package/src/components/Swap/index.tsx

@@ -3,6 +3,7 @@ import { useSwapContext } from "@src/context";
 import { useMemo } from "react";
 import { Header } from "./Header";
 import { HistoryView } from "./HistoryView";
+import { PickerView } from "./PickerView";
 import { SettingsView } from "./SettingsView";
 import { SwapView } from "./SwapView";
 import { UnifiedRoute } from "@src/models";
@@ -12,7 +13,7 @@ type Props = {
   onClose: () => void;
 };
 export const Swap = ({ onClose }: Props) => {
-  const { tab } = useSwapContext();
+  const { tab, activePicker } = useSwapContext();
 
   const view = useMemo(() => {
     return tab === "Settings" ? (
@@ -26,10 +27,23 @@ export const Swap = ({ onClose }: Props) => {
 
   return (
     <div
-      className={`relative flex flex-col gap-6 p-5 sm:p-6 text-t_text_primary bg-t_bg_secondary bg-opacity-50 backdrop-blur-[12px] rounded-[20px] border border-solid border-t_text_primary border-opacity-10 flex-1`}
+      className={`relative flex flex-col gap-6 p-4 sm:p-8 text-t_text_primary bg-gradient-to-r from-t_bg_tertiary/[0.01] to-t_bg_tertiary/[0.01] bg-t_bg_secondary bg-opacity-50 backdrop-blur-[48px] rounded-[32px] border border-solid border-t_text_primary border-opacity-10 flex-1`}
     >
-      <Header onClose={onClose} />
-      <div className="flex flex-col flex-1 min-h-0">{view}</div>
+      {/* On sm+ the picker replaces the header and the current view in
+          place; below sm it renders as a bottom sheet over them. The
+          replaced content stays in the layout (visibility only), so it keeps
+          defining the widget height for the picker to fill. */}
+      <div className="relative flex flex-col flex-1 min-h-0">
+        {activePicker && <PickerView />}
+        <div
+          className={`flex flex-col gap-6 flex-1 min-h-0 ${
+            activePicker ? "sm:invisible" : ""
+          }`}
+        >
+          <Header onClose={onClose} />
+          <div className="flex flex-col flex-1 min-h-0">{view}</div>
+        </div>
+      </div>
       <PoweredBy />
     </div>
   );