@xswap-link/sdk 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/Modal/index.tsx

@@ -35,11 +35,10 @@ export const Modal: FC<{
         className || ""
       }`}
       onMouseDown={(e) => {
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
-        e.preventDefault();
-
         if (e.target === e.currentTarget && overlay) {
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+          e.preventDefault();
           onClose();
         }
       }}

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

@@ -8,7 +8,7 @@ export const Header = ({ onClose }: Props) => {
   const { tab, bridgeUI } = useSwapContext();
 
   return (
-    <div className="flex justify-between">
+    <div className="flex justify-between mt-2 px-4">
       <div className="text-xl font-sans-bold font-bold">
         {tab === "Swap" && bridgeUI ? "Bridge" : tab}
       </div>

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

@@ -4,7 +4,7 @@ import { Slippage } from "./Slippage";
 
 export const SettingsView = () => {
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col gap-5 px-4">
       <Delivery />
       <InfiniteApproval />
       <Slippage />

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

@@ -1,10 +1,11 @@
-import { CloseIcon } from "@src/assets/icons";
+import { CloseIcon, SearchIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
 import { Chain, Web3Environment } from "@src/models";
-import { useMemo } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
 import { Virtuoso } from "react-virtuoso";
 import { SwapPanelType } from "../../../../SwapView";
 import { ChainItem } from "./ChainItem";
+import { TextInput } from "@src/components";
 
 type Props = {
   type: SwapPanelType;
@@ -28,13 +29,34 @@ export const ChainPicker = ({
     supportedChains,
   } = useSwapContext();
 
+  const [searchValue, setSearchValue] = useState("");
+  const chainSearchRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (chainSearchRef.current) {
+      setTimeout(() => {
+        chainSearchRef.current?.focus();
+      }, 10);
+    }
+  }, []);
+
   const filteredChains = useMemo(() => {
-    return supportedChains.filter(
+    const baseChains = supportedChains.filter(
       ({ web3Environment, swapSupported, bridgeSupported }) =>
         web3Environment === Web3Environment.MAINNET &&
         ((bridgeUI && bridgeSupported) || (!bridgeUI && swapSupported)),
     );
-  }, [bridgeUI, supportedChains]);
+
+    if (!searchValue) return baseChains;
+
+    return baseChains.filter((chain) => {
+      const searchLower = searchValue.toLowerCase();
+      return (
+        chain.displayName.toLowerCase().includes(searchLower) ||
+        chain.chainId.toLowerCase().includes(searchLower)
+      );
+    });
+  }, [bridgeUI, supportedChains, searchValue]);
 
   const select = (selectedChainId: string) => {
     const chain = supportedChains.find(
@@ -128,9 +150,22 @@ export const ChainPicker = ({
           <CloseIcon />
         </div>
       </div>
-      <div className="horizontal-separator" />
+
+      <TextInput
+        ref={chainSearchRef}
+        inputIcon={
+          <div className="fill-t_text_primary">
+            <SearchIcon />
+          </div>
+        }
+        placeholder="Search chain name"
+        value={searchValue}
+        handleChange={setSearchValue}
+      />
+
+      <div className="horizontal-separator mt-4" />
       <div className="h-full pt-4">
-        {filteredChains.length ? (
+        {sortedChains.length ? (
           <Virtuoso
             style={{ height: "100%" }}
             data={sortedChains}
@@ -144,7 +179,7 @@ export const ChainPicker = ({
             )}
           />
         ) : (
-          <div className="flex justify-center mt-4">"No chain found."</div>
+          <div className="flex justify-center mt-4">No chain found.</div>
         )}
       </div>
     </div>

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

@@ -77,7 +77,7 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
   return (
     <>
       {tokenPickerModalOpen && (
-        <Modal onClose={() => setTokenPickerModalOpen(false)} className="z-50">
+        <Modal onClose={() => setTokenPickerModalOpen(false)} className="z-[3]">
           <TokenPicker
             type={type}
             chain={chain!}

package/src/components/Swap/index.tsx

@@ -25,7 +25,7 @@ export const Swap = ({ onClose }: Props) => {
 
   return (
     <div
-      className={`relative flex flex-col gap-5 p-4 text-t_text_primary bg-t_bg_primary rounded-3xl flex-1`}
+      className={`relative flex flex-col gap-4 p-2 text-t_text_primary bg-t_bg_primary rounded-2xl flex-1`}
     >
       <Header onClose={onClose} />
       {view}

package/src/components/TxConfigForm/index.tsx

@@ -175,13 +175,13 @@ export const TxConfigForm = ({
                       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-3xl overflow-auto text-t_text_primary border-2 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 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]">
                         <Swap onSubmit={onSubmit} onClose={onClose} />
                         <PoweredBy />
                       </div>
                     </div>
                   ) : (
-                    <div className="bg-t_bg_primary rounded-3xl overflow-auto text-t_text_primary border-2 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="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">
                       <Swap onSubmit={() => {}} onClose={() => {}} />
                       <PoweredBy />
                     </div>

package/src/config/init.tsx

@@ -1,8 +1,8 @@
 import { WaitingForInit } from "@src/components/WaitingForInit";
+import { isServer } from "@src/utils";
 import { createRoot, Root } from "react-dom/client";
 import CSS from "../components/global.css";
 import { fontDefinitions } from "./fonts";
-import { isServer } from "@src/utils";
 
 export let xpayRoot: Root | null = null;
 export let xpayShadowRoot: ShadowRoot | null = null;
@@ -63,7 +63,10 @@ const setupFonts = () => {
 
 const createXPayRoot = async () => {
   const xswapElement = document.createElement("div");
-  xpayShadowRoot = xswapElement.attachShadow({ mode: "open" });
+  xpayShadowRoot = xswapElement.attachShadow({
+    mode: "open",
+    delegatesFocus: true,
+  });
   xswapElement.setAttribute("id", "xpay-root");
   document.body.appendChild(xswapElement);
   xpayRoot = createRoot(xpayShadowRoot);

package/src/context/SwapProvider.tsx

@@ -257,11 +257,14 @@ export const SwapProvider = ({
   );
 
   const routeAbortController = useRef<AbortController | null>(null);
-  const getTokenBalancesNonce = useRef(0);
   const refreshSelectedTokenBalanceNonce = useRef(crypto.randomUUID());
 
   const { history } = useHistory();
 
+  const [tokenBalances, setTokenBalances] = useState<
+    Record<string, Record<string, string>>
+  >({});
+
   useEffect(() => {
     if (supportedChains.length > 0) {
       const chainIds = supportedChains.map((chain) => chain.chainId);
@@ -525,7 +528,6 @@ export const SwapProvider = ({
       );
 
       setRoute(route);
-      setFetchingRoute(false);
       routeAbortController.current = null;
     } catch (error) {
       if (error !== DEFAULT_REQUEST_ABORT_MSG) {
@@ -533,6 +535,8 @@ export const SwapProvider = ({
         setError("Could not find route!");
         setRoute(undefined);
       }
+    } finally {
+      setFetchingRoute(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -551,6 +555,14 @@ export const SwapProvider = ({
     quoteRoute();
   }, [quoteRoute]);
 
+  useEffect(() => {
+    if (address && supportedChains.length > 0) {
+      getBalances({ walletAddress: address }).then((balances) => {
+        setTokenBalances(balances);
+      });
+    }
+  }, [address, supportedChains.length]);
+
   useEffect(() => {
     (async () => {
       // source chain
@@ -617,41 +629,29 @@ export const SwapProvider = ({
       }
       setDstChainOtherTokensOptions(dstOtherTokenOptions);
 
-      if (address) {
-        const nonce = Date.now();
-
-        getTokenBalancesNonce.current = nonce;
-
-        const tokenBalancesResponse = await getBalances({
-          walletAddress: address,
-        });
+      const addBalances = (tokenOptions: TokenOption[]) => {
+        return tokenOptions.map((token) => ({
+          ...token,
+          balance: BigNumber.from(
+            tokenBalances[token.chainId]?.[token.address] || 0,
+          ),
+        }));
+      };
 
-        const addBalances = (tokenOptions: TokenOption[]) => {
-          return tokenOptions.map((token) => ({
-            ...token,
-            balance: BigNumber.from(
-              tokenBalancesResponse[token.chainId][token.address] || 0,
-            ),
-          }));
-        };
-
-        if (getTokenBalancesNonce.current === nonce) {
-          setSrcChainTokensOptions(addBalances(srcTokenOptions));
-          setDstChainTokensOptions(addBalances(dstTokenOptions));
-          setSrcChainOtherTokensOptions(addBalances(srcOtherTokenOptions));
-          setDstChainOtherTokensOptions(addBalances(dstOtherTokenOptions));
-        }
-      }
+      setSrcChainTokensOptions(addBalances(srcTokenOptions));
+      setDstChainTokensOptions(addBalances(dstTokenOptions));
+      setSrcChainOtherTokensOptions(addBalances(srcOtherTokenOptions));
+      setDstChainOtherTokensOptions(addBalances(dstOtherTokenOptions));
     })();
   }, [
     bridgeUI,
     srcChain,
     dstChain,
-    address,
     getTokenOptions,
     supportedChains,
     srcToken?.symbol,
     dstToken?.symbol,
+    tokenBalances,
   ]);
 
   const refreshBalance = useCallback(async () => {

package/tailwind.config.js

@@ -83,7 +83,7 @@ export default {
         x_swap_secondary_active: "#e0e7fa",
       },
       minWidth: {
-        x_modal: "var(--modal-width, 360px)",
+        x_modal: "var(--modal-width, 340px)",
       },
       width: {
         x_modal: "var(--modal-width)",