@xswap-link/sdk 0.10.1 → 0.10.3

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.1",
+  "version": "0.10.3",
   "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();

package/src/components/TxConfigForm/index.tsx

@@ -29,6 +29,20 @@ export type TxConfigFormPayload = Omit<
   integratorFeeReceiverAddress?: string;
 };
 
+type TxConfigFormProps = TxConfigFormPayload &
+  (
+    | {
+        onSubmit: (route: Route) => void;
+        onClose: () => void;
+        overlay: true;
+      }
+    | {
+        onSubmit?: undefined;
+        onClose?: undefined;
+        overlay: false;
+      }
+  );
+
 const queryClient = new QueryClient();
 
 const WagmiReload: FC = () => {
@@ -52,6 +66,14 @@ const WagmiReload: FC = () => {
   return <></>;
 };
 
+const normalizeTxConfigFormProps = (props: TxConfigFormProps) => {
+  return {
+    ...props,
+    dstTokenAddr: props.dstTokenAddr?.toLowerCase(),
+    srcTokenAddr: props.srcTokenAddr?.toLowerCase(),
+  };
+};
+
 const PendingTransactionsEmitter: FC<{
   onPendingTransactionsChange: ModalIntegrationPayload["onPendingTransactionsChange"];
 }> = ({ onPendingTransactionsChange }) => {
@@ -73,49 +95,44 @@ const PendingTransactionsEmitter: FC<{
   return <></>;
 };
 
-export const TxConfigForm = ({
-  integratorId,
-  dstChainId,
-  dstTokenAddr,
-  srcChainId,
-  srcTokenAddr,
-  customContractCalls,
-  desc,
-  dstDisplayTokenAddr,
-  supportedChains,
-  onSubmit,
-  onClose,
-  overlay,
-  lightTheme,
-  defaultWalletPicker,
-  styles,
-  onPendingTransactionsChange,
-  dstTokenLocked,
-  dstChainLocked,
-  srcTokenLocked,
-  srcChainLocked,
-  onDstTokenChange,
-  onDstChainChange,
-  onSrcTokenChange,
-  onSrcChainChange,
-  bridge,
-  onConnectWallet,
-  override,
-  integratorFee,
-  integratorFeeReceiverAddress,
-}: TxConfigFormPayload &
-  (
-    | {
-        onSubmit: (route: Route) => void;
-        onClose: () => void;
-        overlay: true;
-      }
-    | {
-        onSubmit?: undefined;
-        onClose?: undefined;
-        overlay: false;
-      }
-  )) => {
+export const TxConfigForm = (props: TxConfigFormProps) => {
+  const normalizedProps = useMemo(
+    () => normalizeTxConfigFormProps(props),
+    [props],
+  );
+
+  const {
+    integratorId,
+    dstChainId,
+    dstTokenAddr,
+    srcChainId,
+    srcTokenAddr,
+    customContractCalls,
+    desc,
+    dstDisplayTokenAddr,
+    supportedChains,
+    onSubmit,
+    onClose,
+    overlay,
+    lightTheme,
+    defaultWalletPicker,
+    styles,
+    onPendingTransactionsChange,
+    dstTokenLocked,
+    dstChainLocked,
+    srcTokenLocked,
+    srcChainLocked,
+    onDstTokenChange,
+    onDstChainChange,
+    onSrcTokenChange,
+    onSrcChainChange,
+    bridge,
+    onConnectWallet,
+    override,
+    integratorFee,
+    integratorFeeReceiverAddress,
+  } = normalizedProps;
+
   const onBackdropClick = (e: MouseEvent) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();

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: {