@xswap-link/sdk 0.14.0 → 0.15.0

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

@@ -3,8 +3,10 @@ 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 { WalletPickerView, useWalletPickerOpen } from "./WalletPickerView";
 import { UnifiedRoute } from "@src/models";
 
 type Props = {
@@ -12,24 +14,53 @@ type Props = {
   onClose: () => void;
 };
 export const Swap = ({ onClose }: Props) => {
-  const { tab } = useSwapContext();
+  const { tab, activePicker } = useSwapContext();
+  const walletPickerOpen = useWalletPickerOpen();
 
-  const view = useMemo(() => {
+  const overlayView = useMemo(() => {
     return tab === "Settings" ? (
       <SettingsView />
     ) : tab === "History" ? (
       <HistoryView />
-    ) : (
-      <SwapView />
-    );
+    ) : null;
   }, [tab]);
 
   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 />}
+        <WalletPickerView />
+        <div
+          className={`flex flex-col gap-6 flex-1 min-h-0 ${
+            activePicker || walletPickerOpen ? "sm:invisible" : ""
+          }`}
+        >
+          <Header onClose={onClose} />
+          {/* 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 />
     </div>
   );

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/TxConfigForm/index.tsx

@@ -189,12 +189,12 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
                       className="top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex flex-col items-center justify-center z-10"
                       onMouseDown={onBackdropClick}
                     >
-                      <div className="relative rounded-[20px] overflow-auto text-t_text_primary w-x_modal min-w-x_modal max-w-x_modal min-h-[532px] flex flex-col">
+                      <div className="relative rounded-[32px] overflow-auto text-t_text_primary w-x_modal min-w-x_modal max-w-x_modal min-h-[532px] flex flex-col">
                         <Swap onSubmit={onSubmit} onClose={onClose} />
                       </div>
                     </div>
                   ) : (
-                    <div className="rounded-[20px] overflow-auto text-t_text_primary min-h-[532px] w-x_modal min-w-x_modal max-w-x_modal flex flex-col">
+                    <div className="rounded-[32px] overflow-auto text-t_text_primary min-h-[532px] w-x_modal min-w-x_modal max-w-x_modal flex flex-col">
                       <Swap onSubmit={() => {}} onClose={() => {}} />
                     </div>
                   )}

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/";

package/src/context/HistoryProvider.tsx

@@ -360,7 +360,7 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
                 </Button>
 
                 <div
-                  className="transaction-provider__close fill-white leading-[0px]"
+                  className="transaction-provider__close fill-white text-white leading-[0px]"
                   onClick={() => closeSnackbar(messageId)}
                 >
                   <CloseIcon />