@xswap-link/sdk 0.14.1 → 0.15.0

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>
   );

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

@@ -7,14 +7,18 @@ export type SwapPanelType = "source" | "destination";
 
 export const SwapView = () => {
   return (
-    <div className="flex flex-col gap-6 fill-t_text_primary">
-      <div className="flex flex-col gap-1.5">
-        <SwapPanel type="source" />
-        <ReorderButton />
-        <SwapPanel type="destination" />
+    <div className="flex flex-col gap-8 fill-t_text_primary">
+      <div className="flex flex-col gap-6">
+        {/* ReorderButton is a zero-height anchor between the panels, so the
+            flex gap applies twice — 6px above and below it, 12px total. */}
+        <div className="flex flex-col gap-1.5">
+          <SwapPanel type="source" />
+          <ReorderButton />
+          <SwapPanel type="destination" />
+        </div>
+        <div className="h-px w-full gradient-sections-separator-container" />
+        <FeesPanel />
       </div>
-      <div className="h-px w-full gradient-sections-separator-container" />
-      <FeesPanel />
       <SwapButton />
     </div>
   );

package/src/components/Swap/WalletPickerView/index.tsx

@@ -0,0 +1,65 @@
+import { Ecosystem } from "@src/models";
+import { useWallet } from "@src/context/WalletProvider";
+import { WalletPicker } from "../SwapView/WalletPicker";
+
+/**
+ * Wallet picker rendered while one of the wallet modals is open, presented
+ * exactly like PickerView:
+ * - sm and up it replaces the swap view inside the widget container, so it
+ *   sits on the exact same glass background,
+ * - below sm the same element becomes a bottom sheet pinned to the viewport.
+ */
+export const WalletPickerView = () => {
+  const {
+    openEVMWalletModal,
+    setOpenEVMWalletModal,
+    openSolanaWalletModal,
+    setOpenSolanaWalletModal,
+    openSuiWalletModal,
+    setOpenSuiWalletModal,
+  } = useWallet();
+
+  const ecosystem = openEVMWalletModal
+    ? Ecosystem.EVM
+    : openSolanaWalletModal
+      ? Ecosystem.SOLANA
+      : openSuiWalletModal
+        ? Ecosystem.SUI
+        : null;
+
+  const close = () => {
+    setOpenEVMWalletModal(false);
+    setOpenSolanaWalletModal(false);
+    setOpenSuiWalletModal(false);
+  };
+
+  if (!ecosystem) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 bottom-0 z-10 flex flex-col justify-end bg-[rgba(2,2,2,0.8)] sm:absolute sm:z-[2] sm:justify-start sm:bg-transparent"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) {
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+          e.preventDefault();
+          close();
+        }
+      }}
+    >
+      <div className="flex flex-col w-full h-[85vh] max-h-full overflow-hidden p-4 pt-2.5 rounded-t-[24px] border-t border-solid border-t_text_primary border-opacity-10 bg-gradient-to-r from-t_bg_secondary/50 to-t_bg_secondary/50 bg-t_bg_primary sm:h-full sm:p-0 sm:rounded-none sm:border-0 sm:bg-none sm:bg-transparent">
+        <div className="sm:hidden mx-auto mb-4 h-1 w-8 rounded-full bg-t_bg_tertiary bg-opacity-10 shrink-0" />
+        <WalletPicker ecosystem={ecosystem} onClose={close} />
+      </div>
+    </div>
+  );
+};
+
+/** True while any of the wallet picker modals is requested open. */
+export const useWalletPickerOpen = () => {
+  const { openEVMWalletModal, openSolanaWalletModal, openSuiWalletModal } =
+    useWallet();
+  return openEVMWalletModal || openSolanaWalletModal || openSuiWalletModal;
+};

package/src/components/Swap/index.tsx

@@ -6,6 +6,7 @@ import { HistoryView } from "./HistoryView";
 import { PickerView } from "./PickerView";
 import { SettingsView } from "./SettingsView";
 import { SwapView } from "./SwapView";
+import { WalletPickerView, useWalletPickerOpen } from "./WalletPickerView";
 import { UnifiedRoute } from "@src/models";
 
 type Props = {
@@ -14,15 +15,14 @@ type Props = {
 };
 export const Swap = ({ onClose }: Props) => {
   const { tab, activePicker } = useSwapContext();
+  const walletPickerOpen = useWalletPickerOpen();
 
-  const view = useMemo(() => {
+  const overlayView = useMemo(() => {
     return tab === "Settings" ? (
       <SettingsView />
     ) : tab === "History" ? (
       <HistoryView />
-    ) : (
-      <SwapView />
-    );
+    ) : null;
   }, [tab]);
 
   return (
@@ -35,13 +35,30 @@ export const Swap = ({ onClose }: Props) => {
           defining the widget height for the picker to fill. */}
       <div className="relative flex flex-col flex-1 min-h-0">
         {activePicker && <PickerView />}
+        <WalletPickerView />
         <div
           className={`flex flex-col gap-6 flex-1 min-h-0 ${
-            activePicker ? "sm:invisible" : ""
+            activePicker || walletPickerOpen ? "sm:invisible" : ""
           }`}
         >
           <Header onClose={onClose} />
-          <div className="flex flex-col flex-1 min-h-0">{view}</div>
+          {/* SwapView stays in the layout on every tab (visibility only), so
+              it keeps defining one shared widget height; Settings/History
+              render as an overlay filling that height. */}
+          <div className="relative flex flex-col flex-1 min-h-0">
+            <div
+              className={`flex flex-col flex-1 min-h-0 ${
+                overlayView ? "invisible" : ""
+              }`}
+            >
+              <SwapView />
+            </div>
+            {overlayView && (
+              <div className="absolute inset-0 flex flex-col min-h-0">
+                {overlayView}
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <PoweredBy />

package/src/components/ToggleButton/index.tsx

@@ -10,17 +10,15 @@ const ToggleButton = ({ checked, onClick }: Props) => {
       role="switch"
       aria-checked={checked}
       onClick={onClick}
-      className={`relative inline-flex items-center w-12 h-6 p-[3px] rounded-full cursor-pointer transition-colors border-none ${
+      className={`relative inline-flex items-center w-10 h-5 p-0.5 rounded-full cursor-pointer transition-opacity border-none bg-gradient-to-r ${
         checked
-          ? "bg-gradient-to-r from-t_main_accent_light/40 to-t_main_accent_dark/60"
-          : "bg-t_bg_tertiary bg-opacity-10"
+          ? "from-t_main_accent_light/25 to-t_main_accent_dark/25"
+          : "from-t_main_accent_light/20 to-t_main_accent_dark/20 opacity-50"
       }`}
     >
       <span
-        className={`w-[18px] h-[18px] rounded-full transition-transform ${
-          checked
-            ? "translate-x-6 bg-t_main_accent_light"
-            : "translate-x-0 bg-t_text_primary opacity-40"
+        className={`w-4 h-4 rounded-full transition-transform bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark ${
+          checked ? "translate-x-5" : "translate-x-0"
         }`}
       ></span>
     </button>

package/src/components/TokenLogo/index.tsx

@@ -32,7 +32,7 @@ export const TokenLogo = ({
     <img
       src={token.image}
       alt={token.name}
-      className={`border border-solid border-t_text_primary border-opacity-10 rounded-2xl ${className}`}
+      className={`rounded-full ${className}`}
       onError={() => setErrorOccured(true)}
     />
   ) : (

package/src/components/TxModal/index.tsx

@@ -38,11 +38,11 @@ export const TxModal = ({
       onMouseDown={onBackdropClick}
     >
       <div
-        className={`relative bg-t_bg_primary rounded-3xl p-4 w-full min-w-[340px] overflow-auto max-w-x_modal border-2 ${
+        className={`relative rounded-[32px] p-6 sm:p-8 w-full min-w-[340px] overflow-auto max-w-x_modal backdrop-blur-[32px] bg-t_bg_secondary bg-opacity-75 border border-solid ${
           type === "error"
-            ? "border-t_error_dark"
+            ? "border-[#F44336]"
             : type === "success"
-            ? "border-t_success_dark"
+            ? "border-[#6AE89B]"
             : type === "warning"
             ? "border-t_warning_dark"
             : type === "waiting"
@@ -50,7 +50,17 @@ export const TxModal = ({
             : "border-t_text_primary border-opacity-10"
         } ${className}`}
       >
-        {children}
+        {(type === "error" || type === "success") && (
+          <div
+            aria-hidden
+            className={`absolute inset-0 rounded-[inherit] pointer-events-none ${
+              type === "error"
+                ? "tx-modal-glow-error"
+                : "tx-modal-glow-success"
+            }`}
+          />
+        )}
+        <div className="relative">{children}</div>
       </div>
     </div>,
     xpayShadowRoot!,

package/src/components/global.css

@@ -36,13 +36,30 @@
   }
 
   .gradient-sections-separator-container {
-    @apply bg-gradient-to-r from-transparent via-t_bg_tertiary/25 to-transparent;
+    @apply bg-gradient-to-r from-transparent via-t_bg_tertiary/10 to-transparent;
   }
 
   .x-border {
     @apply border border-solid border-t_text_primary border-opacity-10;
   }
 
+  /* Corner glow of the transaction result modal, fading towards the center */
+  .tx-modal-glow-success {
+    background: radial-gradient(
+      120% 60% at 0% 0%,
+      rgba(76, 175, 80, 0.25) 0%,
+      transparent 45%
+    );
+  }
+
+  .tx-modal-glow-error {
+    background: radial-gradient(
+      120% 60% at 0% 0%,
+      rgba(244, 67, 54, 0.25) 0%,
+      transparent 45%
+    );
+  }
+
   .xpay-tx-status {
     @apply fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
   }

package/src/constants/index.ts

@@ -49,6 +49,10 @@ export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 export const DEFAULT_SOURCE_CHAIN_ID = "1";
 export const DEFAULT_SOURCE_TOKEN_ADDR = constants.AddressZero;
 export const DEFAULT_DESTINATION_CHAIN_ID = "1";
+// Default bridge route: Ethereum -> Base; the token defaults to XSWAP via
+// getDefaultBridgeTokenForChain.
+export const DEFAULT_BRIDGE_SOURCE_CHAIN_ID = "1";
+export const DEFAULT_BRIDGE_DESTINATION_CHAIN_ID = "8453";
 export const DEFAULT_DESTINATION_TOKEN_ADDR =
   "0x8fe815417913a93ea99049fc0718ee1647a2a07c"; // XSWAP token
 export const CCIP_EXPLORER = "https://ccip.chain.link/";