@xswap-link/sdk 0.10.0 → 0.10.2

package/localTheme.ts

@@ -108,6 +108,7 @@ const styleMap: ModalIntegrationThemeStyles & ModalIntegrationStyles = {
   errorLight: "--error-light",
   width: "--modal-width",
   chainlinkLogo: "--chainlink-logo",
+  fontFamily: "--font-family",
 };
 
 export function changeHostVariableColor(

package/package.json

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

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

@@ -56,6 +56,7 @@ export const TokenPicker = ({
     supportedChains,
     findTokenDataByAddressAndChain,
     tokenPrices,
+    addTokenToChainIfNotExists,
   } = useSwapContext();
   const { address } = useAccount();
   const evmContractApi = useEvmContractApi();
@@ -93,10 +94,18 @@ export const TokenPicker = ({
         };
         localStorage.setItem("custom-tokens", JSON.stringify(customTokens));
       }
-      onSelect(newCustomToken);
+
+      addTokenToChainIfNotExists(newCustomToken.chainId, newCustomToken);
+
       setModalOpen(false);
     }
-  }, [chain, searchValue, customTokenData, onSelect, setModalOpen]);
+  }, [
+    chain,
+    customTokenData,
+    searchValue,
+    addTokenToChainIfNotExists,
+    setModalOpen,
+  ]);
 
   const getCustomTokenData = useCallback(async () => {
     const nonce = Date.now();
@@ -236,21 +245,21 @@ export const TokenPicker = ({
     // Create groups based on chain and wallet connection status
     const groups = chain
       ? [
-          ...(!!address && ownedFilteredTokens.length && type === "source"
+          ...(!!address && ownedFilteredTokens.length
             ? [ownedFilteredTokens]
             : []),
           currentChainTokens,
           otherChainTokens,
         ]
       : [
-          ...(!!address && ownedFilteredTokens.length && type === "source"
+          ...(!!address && ownedFilteredTokens.length
             ? [ownedFilteredTokens]
             : []),
           [...currentChainTokens, ...otherChainTokens],
         ];
 
     return groups.flat();
-  }, [filteredTokens, otherFilteredTokens, chain, address, type, tokenPrices]);
+  }, [filteredTokens, otherFilteredTokens, chain, address, tokenPrices]);
 
   const ownedTokens = useMemo(
     () => allTokens.filter((token) => token.balance?.gt(0)),
@@ -260,19 +269,15 @@ export const TokenPicker = ({
   const tokenGroups = useMemo(() => {
     return chain
       ? [
-          ...(type === "source" && !!address && ownedTokens.length
-            ? [ownedTokens]
-            : []),
+          ...(!!address && ownedTokens.length ? [ownedTokens] : []),
           filteredTokens,
           otherFilteredTokens,
         ]
       : [
-          ...(type === "source" && !!address && ownedTokens.length
-            ? [ownedTokens]
-            : []),
+          ...(!!address && ownedTokens.length ? [ownedTokens] : []),
           otherFilteredTokens,
         ];
-  }, [chain, type, address, ownedTokens, filteredTokens, otherFilteredTokens]);
+  }, [chain, address, ownedTokens, filteredTokens, otherFilteredTokens]);
 
   return showImportWarning ? (
     <>
@@ -465,7 +470,7 @@ export const TokenPicker = ({
                                 if (!address) {
                                   return `${chain.displayName} network`;
                                 }
-                                return ownedTokens.length && type === "source"
+                                return ownedTokens.length
                                   ? "My tokens"
                                   : `${chain.displayName} network`;
                               }
@@ -489,7 +494,7 @@ export const TokenPicker = ({
                                 if (!address) {
                                   return "All networks";
                                 }
-                                return ownedTokens.length && type === "source"
+                                return ownedTokens.length
                                   ? "My tokens"
                                   : "All networks";
                               }

package/src/components/TxConfigForm/index.tsx

@@ -245,9 +245,9 @@ export const openTxConfigForm = async ({
         <TxConfigForm
           integratorId={integratorId}
           dstChainId={dstChainId}
-          dstTokenAddr={dstTokenAddr}
+          dstTokenAddr={dstTokenAddr?.toLowerCase()}
           srcChainId={srcChainId}
-          srcTokenAddr={srcTokenAddr}
+          srcTokenAddr={srcTokenAddr?.toLowerCase()}
           customContractCalls={customContractCalls}
           desc={desc}
           dstDisplayTokenAddr={dstDisplayTokenAddr}

package/src/components/TxWidgetWC/index.tsx

@@ -11,6 +11,7 @@ import { useEffect, useState } from "react";
 import { Spinner } from "../Spinner";
 import { TxConfigForm } from "../TxConfigForm";
 import CSS from "../global.css";
+import { addCustomTokensToChains } from "@src/utils/tokens";
 
 const TxWidget = ({
   integratorId,
@@ -56,7 +57,9 @@ const TxWidget = ({
           (bridgeSupported || swapSupported),
       );
 
-      setSupportedChains(chains);
+      const chainsWithCustomTokens = addCustomTokensToChains(chains);
+
+      setSupportedChains(chainsWithCustomTokens);
       setLoading(false);
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/config/init.tsx

@@ -65,7 +65,6 @@ const createXPayRoot = async () => {
   const xswapElement = document.createElement("div");
   xpayShadowRoot = xswapElement.attachShadow({
     mode: "open",
-    delegatesFocus: true,
   });
   xswapElement.setAttribute("id", "xpay-root");
   document.body.appendChild(xswapElement);

package/src/context/SwapProvider.tsx

@@ -117,6 +117,10 @@ type SwapContext = {
   bridgeTokensDictionary: BridgeTokensDictionary | null;
   onConnectWallet: () => void;
   hasOnConnectWalletCallback: boolean;
+  addTokenToChainIfNotExists: (
+    chainId: string | undefined,
+    token: TokenOption,
+  ) => void;
 };
 
 const functionNotImplemented = () => {
@@ -183,6 +187,7 @@ const init: SwapContext = {
   hasOnConnectWalletCallback: false,
   srcChainOptions: [],
   dstChainOptions: [],
+  addTokenToChainIfNotExists: functionNotImplemented,
 };
 
 const swapContext = createContext(init);
@@ -668,6 +673,27 @@ export const SwapProvider = ({
     }
   }, [integrationConfig]);
 
+  const addTokenToChainIfNotExists = useCallback(
+    (chainId: string | undefined, token: TokenOption) => {
+      const chain = supportedChains.find((chain) => chain.chainId === chainId);
+
+      if (!chain) return chain;
+
+      const tokenExists = chain.tokens.some(
+        (existingToken) =>
+          existingToken.address.toLowerCase() === token.address.toLowerCase(),
+      );
+
+      const updated = tokenExists
+        ? chain
+        : { ...chain, tokens: [...chain.tokens, token] };
+
+      setSrcChain(updated);
+      setSrcToken(token);
+    },
+    [supportedChains],
+  );
+
   // =============================================================================
   // Effects
   // =============================================================================
@@ -987,7 +1013,8 @@ export const SwapProvider = ({
     }
     if (initDstChain) {
       initDstToken = initDstChain.tokens.find(
-        ({ address }) => address.toLowerCase() === dstTokenAddress,
+        ({ address }) =>
+          address.toLowerCase() === dstTokenAddress?.toLowerCase(),
       );
     }
 
@@ -1182,6 +1209,7 @@ export const SwapProvider = ({
         bridgeTokensDictionary,
         onConnectWallet,
         hasOnConnectWalletCallback,
+        addTokenToChainIfNotExists,
       }}
     >
       {children}

package/src/models/payloads/ModalIntegrationPayload.ts

@@ -30,11 +30,12 @@ export type ModalIntegrationThemeStyles = {
   errorDark?: string;
   errorLight?: string;
   chainlinkLogo?: string;
+  fontFamily?: string;
 };
 
 export type ModalIntegrationStyles = Pick<
   ModalIntegrationThemeStyles,
-  "mainAccentLight" | "mainAccentDark" | "textSecondary"
+  "mainAccentLight" | "mainAccentDark" | "textSecondary" | "fontFamily"
 > & { width?: string };
 
 export type ModalIntegrationPayload = {

package/src/services/integrations/transactions.ts

@@ -87,13 +87,7 @@ const validateSwapTxData = (
     if (!supportedDstChain) {
       throw new Error(`Provided chain '${dstChain}' is not supported`);
     }
-    if (
-      dstToken &&
-      (!isETHAddressValid(dstToken) ||
-        supportedDstChain.tokens.findIndex(
-          ({ address }) => address.toLowerCase() === dstToken.toLowerCase(),
-        ) === -1)
-    ) {
+    if (dstToken && !isETHAddressValid(dstToken)) {
       throw new Error(
         `Provided token address ${dstToken} on chain ${dstChain} is invalid`,
       );
@@ -107,13 +101,7 @@ const validateSwapTxData = (
     if (!supportedSrcChain) {
       throw new Error(`Provided chain '${srcChain}' is not supported`);
     }
-    if (
-      srcToken &&
-      (!isETHAddressValid(srcToken) ||
-        supportedSrcChain.tokens.findIndex(
-          ({ address }) => address.toLowerCase() === srcToken.toLowerCase(),
-        ) === -1)
-    ) {
+    if (srcToken && !isETHAddressValid(srcToken)) {
       throw new Error(
         `Provided token address ${srcToken} on chain ${srcChain} is invalid`,
       );

package/src/utils/tokens.ts

@@ -0,0 +1,52 @@
+import { Chain, Token } from "@src/models";
+import { isServer } from "@src/utils";
+
+/**
+ * Retrieves custom tokens from localStorage and adds them to the provided chains
+ * @param chains - The original chains to which custom tokens should be added
+ * @returns A new array of chains with custom tokens added
+ */
+export const addCustomTokensToChains = (chains: Chain[]): Chain[] => {
+  const customTokensObj = !isServer
+    ? JSON.parse(localStorage.getItem("custom-tokens") || "{}")
+    : {};
+
+  const customTokens = Object.entries(customTokensObj).reduce(
+    (acc, [chainId, tokensObj]) => {
+      acc[chainId] = Object.values(tokensObj as Record<string, Token>);
+      return acc;
+    },
+    {} as Record<string, Token[]>,
+  );
+
+  return chains.map((chain) => {
+    const chainCustomTokens = customTokens[chain.chainId] || [];
+
+    if (chainCustomTokens.length === 0) {
+      return chain;
+    }
+
+    const filteredCustomTokens = chainCustomTokens.filter(
+      (customToken: Token) =>
+        !chain.tokens.some(
+          (existingToken) =>
+            existingToken.address.toLowerCase() ===
+            customToken.address.toLowerCase(),
+        ),
+    );
+
+    if (filteredCustomTokens.length === 0) {
+      return chain;
+    }
+
+    return {
+      ...chain,
+      tokens: [
+        ...chain.tokens,
+        ...filteredCustomTokens.map((customToken: Token) => ({
+          ...customToken,
+        })),
+      ],
+    };
+  });
+};

package/tailwind.config.js

@@ -1,12 +1,20 @@
 /** @type {import("tailwindcss").Config} */
 
+const withFontVariable = (fallback) => `var(--font-family, ${fallback})`;
+
 export default {
   content: ["src/components/**/*.{ts,tsx}", "src/context/**/*.{ts,tsx}"],
   theme: {
     fontFamily: {
-      body: ["'Satoshi-Medium'", "Tahoma", "Verdana", "ui-sans-serif"],
-      sans: ["Satoshi-Medium", "Tahoma", "Verdana", "ui-sans-serif"],
-      "sans-bold": ["Satoshi-Bold", "Tahoma", "Verdana", "ui-sans-serif"],
+      body: [
+        withFontVariable("'Satoshi-Medium', Tahoma, Verdana, ui-sans-serif"),
+      ],
+      sans: [
+        withFontVariable("'Satoshi-Medium', Tahoma, Verdana, ui-sans-serif"),
+      ],
+      "sans-bold": [
+        withFontVariable("'Satoshi-Bold', Tahoma, Verdana, ui-sans-serif"),
+      ],
     },
     extend: {
       colors: {