@xswap-link/sdk 0.14.0 → 0.15.0

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 { ChevronDownThinIcon } from "@src/assets/icons";
+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 shrink-0 min-h-11 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 text-t_text_primary opacity-50">
+          <ChevronDownThinIcon />
+        </div>
+      )}
+    </button>
   );
 };

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

@@ -16,11 +16,11 @@ export const UsdValue = ({ type }: Props) => {
   );
 
   if (type === "destination" && isFetchingRoute) {
-    return <Skeleton className="w-[80px] h-[16px]" />;
+    return <Skeleton className="w-[80px] h-[16px] my-1" />;
   }
 
   return (
-    <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap">
+    <p className="py-1 text-[10px] leading-4 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap">
       {valueUsd ? `${valueUsd} USD` : ""}
     </p>
   );

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

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from "@src/assets/icons";
+import { ChevronDownThinSmallIcon } from "@src/assets/icons";
 import { useWallet } from "@src/context/WalletProvider";
 import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "../..";
@@ -27,19 +27,18 @@ export const WalletPanel = ({ chain, className }: Props) => {
   const openEvmWalletModal = useCallback(() => {
     // Mirror SwapButton's contract: when the integrator supplied their own
     // connect handler and did not opt into the built-in picker, defer to it
-    // (e.g. the host dapp's RainbowKit modal) instead of opening the SDK picker.
+    // in every state — the host decides whether to show its connect modal or
+    // its account modal (e.g. RainbowKit) for an already-connected wallet.
     if (!integrationConfig.defaultWalletPicker && hasOnConnectWalletCallback) {
       onConnectWallet();
       return;
     }
     setOpenEVMWalletModal(true);
-    evm.connectWallet();
   }, [
     integrationConfig.defaultWalletPicker,
     hasOnConnectWalletCallback,
     onConnectWallet,
     setOpenEVMWalletModal,
-    evm,
   ]);
 
   const openWalletModal = useCallback(() => {
@@ -50,17 +49,10 @@ export const WalletPanel = ({ chain, className }: Props) => {
       openEvmWalletModal();
     } else if (chain.ecosystem === "solana") {
       setOpenSolanaWalletModal(true);
-      solana.connectWallet();
     } else if (chain.ecosystem === "sui") {
       setOpenSuiWalletModal(true);
     }
-  }, [
-    chain,
-    openEvmWalletModal,
-    solana,
-    setOpenSolanaWalletModal,
-    setOpenSuiWalletModal,
-  ]);
+  }, [chain, openEvmWalletModal, setOpenSolanaWalletModal, setOpenSuiWalletModal]);
 
   const address = useMemo(() => {
     if (!chain) {
@@ -76,23 +68,25 @@ export const WalletPanel = ({ chain, className }: Props) => {
     return "";
   }, [chain, evm, solana, sui]);
 
+  // Reserve the button's height before the chain loads so the card
+  // doesn't grow when the wallet button appears.
   if (!chain) {
-    return null;
+    return <div className="h-6" aria-hidden />;
   }
 
   return (
     <button
       type="button"
       onClick={openWalletModal}
-      className={`flex items-center justify-center gap-0.5 px-2 py-1 rounded bg-t_bg_tertiary bg-opacity-5 hover:bg-opacity-10 transition-colors ${
+      className={`flex items-center justify-center px-2 py-1 rounded bg-t_bg_tertiary bg-opacity-5 hover:bg-opacity-10 transition-colors ${
         className || ""
       }`}
     >
       <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary whitespace-nowrap">
         {address ? shortAddress(address) : "Connect"}
       </p>
-      <div className="flex items-center justify-center w-4 h-4 fill-t_text_primary opacity-50 [&_svg]:w-2.5 [&_svg]:h-2.5">
-        <ChevronDownIcon />
+      <div className="flex items-center justify-center w-4 h-4 text-t_text_primary opacity-50">
+        <ChevronDownThinSmallIcon />
       </div>
     </button>
   );

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

@@ -25,13 +25,13 @@ export const SwapPanel = ({ type }: Props) => {
 
   return (
     <div
-      className={`flex flex-col gap-2 px-4 sm:px-6 py-4 rounded-2xl bg-t_bg_secondary bg-opacity-60 ${
+      className={`flex flex-col gap-2 px-4 sm:px-6 py-4 rounded-2xl backdrop-blur-[12px] ${
         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]"
       }`}
     >
-      <div className="flex gap-2 items-center w-full">
+      <div className="flex gap-2 items-center w-full min-h-6">
         <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary text-opacity-50">
           {type === "source" ? "Source" : "Destination"}
         </p>
@@ -41,7 +41,7 @@ export const SwapPanel = ({ type }: Props) => {
         <AmountPanel type={type} />
         <TokenPanel chain={chain} token={token} type={type} />
       </div>
-      <div className="flex items-center justify-between w-full gap-4">
+      <div className="flex items-center justify-between w-full gap-4 min-h-6">
         <UsdValue type={type} />
         <Balance type={type} />
       </div>

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

@@ -4,7 +4,7 @@ import {
   DotRedIcon,
   WalletConnectIcon,
 } from "@src/assets/icons";
-import { FC, useCallback } from "react";
+import { FC, ReactNode, useCallback } from "react";
 import { Connector, useAccount, useConnect, useDisconnect } from "wagmi";
 import { useWallet as useSolanaWallet } from "@solana/wallet-adapter-react";
 import { Ecosystem } from "@src/models";
@@ -24,7 +24,7 @@ const ConnectorIcon: FC<{ connector: Connector; className?: string }> = ({
     case "WalletConnect": {
       return (
         <WalletConnectIcon
-          className={`w-[34px] h-[34px] rounded-md ${className || ""}`}
+          className={`w-10 h-10 rounded-lg shrink-0 ${className || ""}`}
         />
       );
     }
@@ -33,13 +33,50 @@ const ConnectorIcon: FC<{ connector: Connector; className?: string }> = ({
         <img
           src={connector.icon}
           alt={connector.name}
-          className={`w-[34px] h-[34px] rounded-md ${className || ""}`}
+          className={`w-10 h-10 rounded-lg shrink-0 ${className || ""}`}
         />
       );
     }
   }
 };
 
+/** Wallet list row styled after the ChainPicker/TokenItem rows. */
+const WalletRow: FC<{
+  icon: ReactNode;
+  name: string;
+  isConnected: boolean;
+  onClick: () => void;
+}> = ({ icon, name, isConnected, onClick }) => (
+  <div className="pb-2">
+    <button
+      type="button"
+      onClick={onClick}
+      className={`group flex gap-3 items-center w-full 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 ${
+        isConnected ? "!bg-t_bg_tertiary !bg-opacity-10" : ""
+      }`}
+    >
+      {icon}
+      <div className="flex justify-between items-center gap-2 w-full min-w-0">
+        <p className="text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary text-left">
+          {name}
+        </p>
+        {isConnected && (
+          <span className="flex items-center gap-1.5 text-xs leading-[18px] tracking-[0.01em] whitespace-nowrap">
+            <span className="group-hover:hidden flex items-center gap-1.5 text-t_text_green">
+              <DotGreenIcon />
+              Connected
+            </span>
+            <span className="hidden group-hover:flex items-center gap-1.5 text-t_text_red">
+              <DotRedIcon />
+              Disconnect
+            </span>
+          </span>
+        )}
+      </div>
+    </button>
+  </div>
+);
+
 export const WalletPicker: FC<{
   ecosystem: Ecosystem;
   className?: string;
@@ -114,167 +151,122 @@ export const WalletPicker: FC<{
     }
   }, [disconnectSuiWalletMut, onClose]);
 
+  // The host's wagmi config may register the same connector more than once
+  // (e.g. WalletConnect via several RainbowKit wallets) — show each name once.
+  const visibleConnectors = connectors.filter(
+    (connector, index) =>
+      connectors.findIndex(({ name }) => name === connector.name) === index,
+  );
+
+  const visibleSolanaWallets = wallets
+    // MetaMask registers as a Wallet Standard Solana wallet (in more
+    // than one variant) but doesn't actually work here, so keep it out
+    // of the Solana picker entirely.
+    .filter((wallet) => !/metamask/i.test(wallet.adapter.name));
+
   return (
-    <div className={`flex flex-col h-full ${className || ""}`}>
-      <div className="flex justify-between">
-        <div className="text-base/4 mb-4 text-t_text_primary">Pick wallet</div>
-        <div
-          className="w-4 h-4 fill-t_text_primary cursor-pointer"
+    <div className={`flex flex-col h-full min-h-0 ${className || ""}`}>
+      <div className="flex justify-between items-center mb-6">
+        <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+          Select Wallet
+        </div>
+        <button
+          type="button"
+          aria-label="Close"
+          className="flex items-center justify-center w-8 h-8 rounded-md bg-t_bg_tertiary bg-opacity-5 hover:bg-opacity-10 transition-colors"
           onClick={onClose}
         >
-          <CloseIcon />
-        </div>
+          <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
+            <CloseIcon />
+          </div>
+        </button>
       </div>
-      <div className="horizontal-separator" />
-      <div className="h-full pt-4">
-        {ecosystem === Ecosystem.EVM && (
-          <>
-            {connectors.map((connector) => {
-              const isConnected = activeConnector?.id === connector.id;
-              return (
-                <button
-                  key={connector.id}
-                  onClick={async () => {
-                    isConnected
-                      ? disconnect()
-                      : await handleEvmWalletClick(connector);
-                    onClose();
-                  }}
-                  className="group flex items-center w-full gap-3 mt-2 mb-2 cursor-pointer p-4  border border-solid border-white border-opacity-0 hover:selected-wallet-item"
-                >
-                  <ConnectorIcon connector={connector} />
-                  <div className="text-t_text_primary">{connector.name}</div>
-                  {isConnected && (
-                    <>
-                      <div className="flex w-full justify-end items-baseline gap-1">
-                        <div className="group-hover:hidden">
-                          <DotGreenIcon />
-                        </div>
-                        <div className="hidden group-hover:block">
-                          <DotRedIcon />
-                        </div>
-                        <div className="text-t_text_green group-hover:hidden">
-                          connected
-                        </div>
-                        <div className="text-t_text_red hidden group-hover:block">
-                          disconnect
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </button>
-              );
-            })}
-          </>
-        )}
-        {ecosystem === Ecosystem.SOLANA && (
-          <>
-            {wallets
-              // MetaMask registers as a Wallet Standard Solana wallet (in more
-              // than one variant) but doesn't actually work here, so keep it out
-              // of the Solana picker entirely.
-              .filter((wallet) => !/metamask/i.test(wallet.adapter.name))
-              .map((wallet) => {
+      <div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
+        {ecosystem === Ecosystem.EVM &&
+          visibleConnectors.map((connector) => {
+            const isConnected = activeConnector?.id === connector.id;
+            return (
+              <WalletRow
+                key={connector.id}
+                icon={<ConnectorIcon connector={connector} />}
+                name={connector.name}
+                isConnected={isConnected}
+                onClick={async () => {
+                  isConnected
+                    ? disconnect()
+                    : await handleEvmWalletClick(connector);
+                  onClose();
+                }}
+              />
+            );
+          })}
+        {ecosystem === Ecosystem.SOLANA &&
+          (visibleSolanaWallets.length ? (
+            visibleSolanaWallets.map((wallet) => {
               const isConnected =
-                publicKey && activeWallet?.adapter.name === wallet.adapter.name;
+                !!publicKey &&
+                activeWallet?.adapter.name === wallet.adapter.name;
               return (
-                <button
+                <WalletRow
                   key={wallet.adapter.name}
+                  icon={
+                    <img
+                      src={wallet.adapter.icon}
+                      alt={wallet.adapter.name}
+                      className="w-10 h-10 rounded-lg shrink-0"
+                    />
+                  }
+                  name={wallet.adapter.name}
+                  isConnected={isConnected}
                   onClick={async () => {
                     isConnected
                       ? await disconnectSolana()
                       : await handleConnectSolana(wallet.adapter.name);
                     onClose();
                   }}
-                  className="group flex items-center w-full gap-3 mt-2 mb-2 cursor-pointer p-4  border border-solid border-white border-opacity-0 hover:selected-wallet-item"
-                >
-                  <img
-                    src={wallet.adapter.icon}
-                    alt={wallet.adapter.name}
-                    className={`w-[34px] h-[34px] rounded-md ${
-                      className || ""
-                    }`}
-                  />
-                  <div className="text-t_text_primary">
-                    {wallet.adapter.name}
-                  </div>
-                  {isConnected && (
-                    <>
-                      <div className="flex w-full justify-end items-baseline gap-1">
-                        <div className="group-hover:hidden">
-                          <DotGreenIcon />
-                        </div>
-                        <div className="hidden group-hover:block">
-                          <DotRedIcon />
-                        </div>
-                        <div className="text-t_text_green group-hover:hidden">
-                          connected
-                        </div>
-                        <div className="text-t_text_red hidden group-hover:block">
-                          disconnect
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </button>
+                />
               );
-            })}
-          </>
-        )}
-        {ecosystem === Ecosystem.SUI && (
-          <>
-            {suiWallets.map((wallet) => {
+            })
+          ) : (
+            <div className="text-center py-1 text-sm text-t_text_primary text-opacity-50">
+              No wallet found
+            </div>
+          ))}
+        {ecosystem === Ecosystem.SUI &&
+          (suiWallets.length ? (
+            suiWallets.map((wallet) => {
               const isConnected =
                 !!suiAccount?.address &&
                 suiCurrentWallet?.currentWallet?.name === wallet.name;
-
-              const icon = wallet.icon;
-
               return (
-                <button
+                <WalletRow
                   key={wallet.name}
+                  icon={
+                    wallet.icon ? (
+                      <img
+                        src={wallet.icon}
+                        alt={wallet.name}
+                        className="w-10 h-10 rounded-lg shrink-0"
+                      />
+                    ) : (
+                      <div className="w-10 h-10 rounded-lg shrink-0 bg-t_bg_tertiary bg-opacity-10" />
+                    )
+                  }
+                  name={wallet.name}
+                  isConnected={isConnected}
                   onClick={async () => {
                     isConnected
                       ? await handleDisconnectSui()
                       : await handleConnectSui(wallet);
                   }}
-                  className="group flex items-center w-full gap-3 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-wallet-item"
-                >
-                  {icon ? (
-                    <img
-                      src={icon}
-                      alt={wallet.name}
-                      className={`w-[34px] h-[34px] rounded-md ${
-                        className || ""
-                      }`}
-                    />
-                  ) : (
-                    <div className="w-[34px] h-[34px] rounded-md bg-white/10" />
-                  )}
-
-                  <div className="text-t_text_primary">{wallet.name}</div>
-
-                  {isConnected && (
-                    <div className="flex w-full justify-end items-baseline gap-1">
-                      <div className="group-hover:hidden">
-                        <DotGreenIcon />
-                      </div>
-                      <div className="hidden group-hover:block">
-                        <DotRedIcon />
-                      </div>
-                      <div className="text-t_text_green group-hover:hidden">
-                        connected
-                      </div>
-                      <div className="text-t_text_red hidden group-hover:block">
-                        disconnect
-                      </div>
-                    </div>
-                  )}
-                </button>
+                />
               );
-            })}
-          </>
-        )}
+            })
+          ) : (
+            <div className="text-center py-1 text-sm text-t_text_primary text-opacity-50">
+              No wallet found
+            </div>
+          ))}
       </div>
     </div>
   );