@xswap-link/sdk 0.13.1 → 0.14.0

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

@@ -1,7 +1,8 @@
-import { ArrowDownIcon } from "@src/assets/icons";
-import { Modal, TokenLogo } from "@src/components";
+import { ChevronDownIcon } from "@src/assets/icons";
+import { Modal, 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 { SwapPanelType } from "../../index";
 import { TokenPicker } from "./TokenPicker";
@@ -16,6 +17,8 @@ type Props = {
 export const TokenPanel = ({ chain, token, type, className }: Props) => {
   const {
     bridgeUI,
+    srcChain,
+    dstChain,
     srcChainTokensOptions,
     srcChainOtherTokensOptions,
     dstChainTokensOptions,
@@ -67,13 +70,37 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
     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 ||
+    integratorLockedDestinationToken ||
+    integratorLockedSourceToken;
+
   return (
     <>
       {tokenPickerModalOpen && (
@@ -93,42 +120,41 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
 
       <button
         type="button"
-        disabled={
-          pickerDisabled ||
-          integratorLockedDestinationToken ||
-          integratorLockedSourceToken
-        }
+        disabled={locked}
         onClick={() => {
           setTokenPickerModalOpen(true);
         }}
-        className={`${className || ""}`}
+        className={`flex items-center gap-1 shrink-0 rounded-lg ${
+          locked ? "" : "hover:opacity-80 transition-opacity"
+        } ${className || ""}`}
       >
-        <div className="flex justify-between items-center p-4 gap-8 border-r border-solid border-t_text_primary border-opacity-10">
-          <div className="flex gap-2 items-center">
-            <TokenLogo
+        <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}
-              className="w-9 h-9"
-              generatedLogoClassName="w-9 h-9 text-[16px]"
+              chain={chain}
+              tokenLogoClassName="w-10 h-10"
+              generatedLogoClassName="w-10 h-10 text-[16px]"
+              chainLogoClassName="w-[18px]"
             />
-            <div className="flex flex-col font-medium items-start">
-              <p className="text-xs opacity-60">Token: </p>
-              <p className={`${token ? "" : "opacity-60"}`}>
-                {token
-                  ? token.symbol
-                  : type === "destination" && bridgeUI
-                  ? "-"
-                  : "Select"}
-              </p>
-            </div>
-          </div>
-          {!pickerDisabled &&
-            !integratorLockedDestinationToken &&
-            !integratorLockedSourceToken && (
-              <div className="w-4 h-2 fill-t_text_primary">
-                <ArrowDownIcon />
-              </div>
-            )}
+          )}
         </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/UsdValue/index.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { useMemo } from "react";
+import { SwapPanelType } from "../../../SwapView";
+
+type Props = {
+  type: SwapPanelType;
+};
+
+export const UsdValue = ({ type }: Props) => {
+  const { srcValueUsd, dstValueUsd, isFetchingRoute } = useSwapContext();
+
+  const valueUsd = useMemo(
+    () => (type === "source" ? srcValueUsd : dstValueUsd),
+    [dstValueUsd, srcValueUsd, type],
+  );
+
+  if (type === "destination" && isFetchingRoute) {
+    return <Skeleton className="w-[80px] h-[16px]" />;
+  }
+
+  return (
+    <p className="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,7 +1,9 @@
+import { ChevronDownIcon } from "@src/assets/icons";
 import { useWallet } from "@src/context/WalletProvider";
+import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "../..";
 import { Chain } from "@src/models";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { shortAddress } from "@src/utils";
 
 type Props = {
@@ -10,7 +12,7 @@ type Props = {
   className?: string;
 };
 
-export const WalletPanel = ({ chain, type, className }: Props) => {
+export const WalletPanel = ({ chain, className }: Props) => {
   const {
     setOpenEVMWalletModal,
     setOpenSolanaWalletModal,
@@ -19,13 +21,33 @@ export const WalletPanel = ({ chain, type, className }: Props) => {
     solana,
     sui,
   } = useWallet();
+  const { integrationConfig, hasOnConnectWalletCallback, onConnectWallet } =
+    useSwapContext();
+
+  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.
+    if (!integrationConfig.defaultWalletPicker && hasOnConnectWalletCallback) {
+      onConnectWallet();
+      return;
+    }
+    setOpenEVMWalletModal(true);
+    evm.connectWallet();
+  }, [
+    integrationConfig.defaultWalletPicker,
+    hasOnConnectWalletCallback,
+    onConnectWallet,
+    setOpenEVMWalletModal,
+    evm,
+  ]);
+
   const openWalletModal = useCallback(() => {
     if (!chain) {
       return;
     }
     if (chain.ecosystem === "evm") {
-      setOpenEVMWalletModal(true);
-      evm.connectWallet();
+      openEvmWalletModal();
     } else if (chain.ecosystem === "solana") {
       setOpenSolanaWalletModal(true);
       solana.connectWallet();
@@ -34,55 +56,44 @@ export const WalletPanel = ({ chain, type, className }: Props) => {
     }
   }, [
     chain,
-    evm,
+    openEvmWalletModal,
     solana,
-    setOpenEVMWalletModal,
     setOpenSolanaWalletModal,
     setOpenSuiWalletModal,
   ]);
-  const renderAddress = useCallback(
-    (chainEcosystem: string) => {
-      if (chainEcosystem === "evm") {
-        return shortAddress(evm.address || "");
-      } else if (chainEcosystem === "solana") {
-        return shortAddress(solana.address || "");
-      } else if (chainEcosystem === "sui") {
-        return shortAddress(sui.address || "");
-      }
-    },
-    [evm, solana, sui],
-  );
+
+  const address = useMemo(() => {
+    if (!chain) {
+      return "";
+    }
+    if (chain.ecosystem === "evm") {
+      return evm.address || "";
+    } else if (chain.ecosystem === "solana") {
+      return solana.address || "";
+    } else if (chain.ecosystem === "sui") {
+      return sui.address || "";
+    }
+    return "";
+  }, [chain, evm, solana, sui]);
+
+  if (!chain) {
+    return null;
+  }
+
   return (
-    <>
-      <button
-        type="button"
-        onClick={() => openWalletModal()}
-        className={`${className || ""}`}
-      >
-        <div className="flex justify-between items-center p-4 gap-8">
-          <div className="flex flex-col items-start">
-            {type === "source" ? (
-              <div className="flex items-center gap-2">
-                <p className="text-xs font-medium opacity-60">Sender:</p>
-                {chain && (
-                  <p className="text-sm font-medium">
-                    {renderAddress(chain.ecosystem)}
-                  </p>
-                )}
-              </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                <p className="text-xs font-medium opacity-60">Receiver:</p>
-                {chain && (
-                  <p className="text-sm font-medium">
-                    {renderAddress(chain.ecosystem)}
-                  </p>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </button>
-    </>
+    <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 || ""
+      }`}
+    >
+      <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>
+    </button>
   );
 };

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

@@ -2,9 +2,9 @@ import { useSwapContext } from "@src/context";
 import { useMemo } from "react";
 import { SwapPanelType } from "../index";
 import { AmountPanel } from "./AmountPanel";
-import { ChainPanel } from "./ChainPanel";
-import { MaxPanel } from "./MaxPanel";
+import { Balance } from "./AmountPanel/Balance";
 import { TokenPanel } from "./TokenPanel";
+import { UsdValue } from "./UsdValue";
 import { WalletPanel } from "./WalletPanel";
 
 type Props = {
@@ -24,31 +24,26 @@ export const SwapPanel = ({ type }: Props) => {
   );
 
   return (
-    <div className="flex flex-col x-border rounded-xl bg-t_bg_tertiary bg-opacity-5">
-      <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
-        <WalletPanel chain={chain} type={type} className="w-full flex-grow" />
+    <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/[0.03] to-t_bg_tertiary/[0.03]"
+      }`}
+    >
+      <div className="flex gap-2 items-center w-full">
+        <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary text-opacity-50">
+          {type === "source" ? "Source" : "Destination"}
+        </p>
+        <WalletPanel chain={chain} type={type} />
       </div>
-      <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
-        <TokenPanel
-          chain={chain}
-          token={token}
-          type={type}
-          className="w-full flex-grow"
-        />
-        <ChainPanel
-          chain={chain}
-          type={type}
-          className="w-full max-w-[160px]"
-        />
-      </div>
-      <div
-        className={`flex justify-between rounded-b-[11px] ${
-          type === "destination" &&
-          "bg-gradient-to-r from-t_main_accent_light/20 to-t_main_accent_dark/20"
-        }`}
-      >
+      <div className="flex items-center justify-between w-full gap-4">
         <AmountPanel type={type} />
-        <MaxPanel type={type} />
+        <TokenPanel chain={chain} token={token} type={type} />
+      </div>
+      <div className="flex items-center justify-between w-full gap-4">
+        <UsdValue type={type} />
+        <Balance type={type} />
       </div>
     </div>
   );

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

@@ -169,7 +169,12 @@ export const WalletPicker: FC<{
         )}
         {ecosystem === Ecosystem.SOLANA && (
           <>
-            {wallets.map((wallet) => {
+            {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) => {
               const isConnected =
                 publicKey && activeWallet?.adapter.name === wallet.adapter.name;
               return (

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

@@ -8,11 +8,12 @@ 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-[11px]">
+      <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 />
       <SwapButton />
     </div>

package/src/components/Swap/index.tsx

@@ -1,3 +1,4 @@
+import { PoweredBy } from "@src/components/PoweredBy";
 import { useSwapContext } from "@src/context";
 import { useMemo } from "react";
 import { Header } from "./Header";
@@ -25,10 +26,11 @@ export const Swap = ({ onClose }: Props) => {
 
   return (
     <div
-      className={`relative flex flex-col gap-4 p-2 text-t_text_primary bg-t_bg_primary rounded-2xl flex-1`}
+      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`}
     >
       <Header onClose={onClose} />
-      {view}
+      <div className="flex flex-col flex-1 min-h-0">{view}</div>
+      <PoweredBy />
     </div>
   );
 };

package/src/components/ToggleButton/index.tsx

@@ -5,22 +5,25 @@ type Props = {
 
 const ToggleButton = ({ checked, onClick }: Props) => {
   return (
-    <div>
+    <button
+      type="button"
+      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 ${
+        checked
+          ? "bg-gradient-to-r from-t_main_accent_light/40 to-t_main_accent_dark/60"
+          : "bg-t_bg_tertiary bg-opacity-10"
+      }`}
+    >
       <span
-        className="inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer"
-        onClick={onClick}
-      >
-        <span className="h-full w-full rounded-lg bg-t_bg_tertiary bg-opacity-30"></span>
-        <span
-          className={`transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
-          ${
-            checked
-              ? "translate-x-[12px] bg-t_main_accent_light"
-              : "bg-t_bg_tertiary"
-          } `}
-        ></span>
-      </span>
-    </div>
+        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"
+        }`}
+      ></span>
+    </button>
   );
 };
 

package/src/components/TxConfigForm/index.tsx

@@ -1,4 +1,4 @@
-import { PoweredBy, Swap } from "@src/components";
+import { Swap } from "@src/components";
 import { getWagmiConfig, waitForInitialization, xpayRoot } from "@src/config";
 import {
   HistoryProvider,
@@ -87,6 +87,7 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
     srcTokenAddr,
     customContractCalls,
     desc,
+    widgetTitle,
     dstDisplayTokenAddr,
     supportedChains,
     onSubmit,
@@ -161,6 +162,7 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
                 srcTokenAddr,
                 customContractCalls,
                 desc,
+                widgetTitle,
                 dstDisplayTokenAddr,
                 defaultWalletPicker,
                 dstTokenLocked,
@@ -187,15 +189,13 @@ 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 bg-t_bg_primary rounded-2xl overflow-auto text-t_text_primary border-[1px] border-solid border-[rgba(255,255,255,0.1)] w-x_modal min-w-x_modal max-w-x_modal min-h-[532px]">
+                      <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">
                         <Swap onSubmit={onSubmit} onClose={onClose} />
-                        <PoweredBy />
                       </div>
                     </div>
                   ) : (
-                    <div className="bg-t_bg_primary rounded-2xl overflow-auto text-t_text_primary border-[1px] border-solid border-[rgba(255,255,255,0.1)] min-h-[532px] w-x_modal min-w-x_modal max-w-x_modal flex flex-col">
+                    <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">
                       <Swap onSubmit={() => {}} onClose={() => {}} />
-                      <PoweredBy />
                     </div>
                   )}
                 </TxUIWrapper>

package/src/components/TxWidgetWC/index.tsx

@@ -21,6 +21,7 @@ const TxWidget = ({
   srcToken: srcTokenId,
   customContractCalls = [],
   desc,
+  widgetTitle,
   dstDisplayToken,
   lightTheme,
   defaultWalletPicker,
@@ -116,6 +117,7 @@ const TxWidget = ({
           srcTokenAddr={srcTokenAddr}
           customContractCalls={customContractCalls}
           desc={desc}
+          widgetTitle={widgetTitle}
           dstDisplayTokenAddr={dstDisplayToken}
           supportedChains={supportedChains}
           overlay={false}
@@ -166,6 +168,7 @@ export const createTxWidgetWC = () => {
       srcToken: "string",
       customContractCalls: "json",
       desc: "string",
+      widgetTitle: "string",
       dstDisplayToken: "string",
       lightTheme: "boolean",
       defaultWalletPicker: "boolean",
@@ -204,6 +207,7 @@ export type TxWidgetWCAttributes = {
   "src-token": WidgetIntegrationPayload["srcToken"];
   "custom-contract-calls": string | undefined;
   desc: WidgetIntegrationPayload["desc"];
+  "widget-title": WidgetIntegrationPayload["widgetTitle"];
   "dst-display-token": WidgetIntegrationPayload["dstDisplayToken"];
   "light-theme": WidgetIntegrationPayload["lightTheme"];
   "default-wallet-picker": WidgetIntegrationPayload["defaultWalletPicker"];

package/src/components/TxWidgetWCWrapped/index.tsx

@@ -32,6 +32,7 @@ export const TxWidgetWCWrapped = ({
   srcToken,
   customContractCalls = [],
   desc,
+  widgetTitle,
   dstDisplayToken,
   lightTheme,
   defaultWalletPicker,
@@ -85,6 +86,7 @@ export const TxWidgetWCWrapped = ({
       src-token={srcToken}
       custom-contract-calls={JSON.stringify(customContractCalls)}
       desc={desc}
+      widget-title={widgetTitle}
       dst-display-token={dstDisplayToken}
       light-theme={lightTheme}
       default-wallet-picker={defaultWalletPicker}

package/src/context/HistoryProvider.tsx

@@ -230,6 +230,7 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
 
         fetchedTransactions.push({
           messageId: entry.messageId,
+          receiver: entry.walletAddress,
           hash: entry.source.transactionHash,
           timestamp: timestampMs / 1000,
           sourceChainId: entry.source.blockchainId,

package/src/models/TransactionHistory.ts

@@ -43,6 +43,7 @@ export type TransactionStatus =
 
 export type Transaction = {
   messageId?: string;
+  receiver?: string;
   hash: string;
   timestamp: number;
   sourceChainId: string;

package/src/models/payloads/ModalIntegrationPayload.ts

@@ -47,6 +47,7 @@ export type ModalIntegrationPayload = {
   srcToken?: string;
   customContractCalls?: ContractCall[];
   desc?: string;
+  widgetTitle?: string;
   dstDisplayToken?: string;
   lightTheme?: boolean;
   defaultWalletPicker?: boolean;

package/src/models/payloads/WidgetIntegrationPayload.ts

@@ -9,6 +9,7 @@ export type WidgetIntegrationPayload = {
   srcToken?: string;
   customContractCalls?: ContractCall[];
   desc?: string;
+  widgetTitle?: string;
   dstDisplayToken?: string;
   lightTheme?: boolean;
   defaultWalletPicker?: boolean;

package/src/utils/index.ts

@@ -77,6 +77,27 @@ export const resolveTokenAddress = (
     ?.address?.toLowerCase();
 };
 
+/**
+ * Checks whether a transfer from `srcChain` can reach `dstChainId`,
+ * based on the chain-level support lists.
+ */
+export const isChainConnectionSupported = (
+  srcChain: Chain | undefined,
+  dstChainId: string | undefined,
+  bridgeUI: boolean,
+): boolean => {
+  if (!srcChain || !dstChainId) {
+    return true;
+  }
+  if (srcChain.chainId === dstChainId) {
+    return true;
+  }
+  const supportedDst = bridgeUI
+    ? srcChain.supportedDstForBridge
+    : srcChain.supportedDstForSwap;
+  return !!supportedDst?.includes(dstChainId);
+};
+
 export const sortChains = (chains: Chain[], disabledChainIds: string[]) =>
   [...chains]
 

package/tailwind.config.js

@@ -96,10 +96,10 @@ export default {
         x_modal: "var(--modal-width, 340px)",
       },
       width: {
-        x_modal: "var(--modal-width)",
+        x_modal: "var(--modal-width, 620px)",
       },
       maxWidth: {
-        x_modal: "var(--modal-width, 480px)",
+        x_modal: "var(--modal-width, 620px)",
       },
       animation: {
         "spin-slow": "spin 3s linear infinite",