@xswap-link/sdk 0.6.10 → 0.8.0

package/src/components/TxModal/index.tsx

@@ -0,0 +1,59 @@
+import { xpayShadowRoot } from "@src/config";
+import { MouseEvent, ReactElement } from "react";
+import { createPortal } from "react-dom";
+
+export type TxModalType =
+  | "neutral"
+  | "waiting"
+  | "warning"
+  | "error"
+  | "success";
+
+type Props = {
+  id: string;
+  children: ReactElement | ReactElement[];
+  onCloseClick: () => void;
+  type?: TxModalType;
+  className?: string;
+};
+
+export const TxModal = ({
+  id,
+  children,
+  onCloseClick,
+  type = "waiting",
+  className,
+}: Props) => {
+  const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    if (e.target === e.currentTarget) {
+      onCloseClick();
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed box-border inset-0 z-20 flex items-center justify-center bg-black bg-opacity-80"
+      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 ${
+          type === "error"
+            ? "border-t_error_dark"
+            : type === "success"
+            ? "border-t_success_dark"
+            : type === "warning"
+            ? "border-t_warning_dark"
+            : type === "waiting"
+            ? "border-t_main_accent_dark"
+            : "border-t_text_primary border-opacity-10"
+        } ${className}`}
+      >
+        {children}
+      </div>
+    </div>,
+    xpayShadowRoot!,
+    id,
+  );
+};

package/src/components/TxWidgetWC/index.tsx

@@ -5,12 +5,12 @@ import {
   WidgetIntegrationPayload,
 } from "@src/models";
 import { getChains } from "@src/services";
+import { isServer } from "@src/utils";
 import { createWebComponent } from "@src/utils/webComponents";
 import { useEffect, useState } from "react";
 import { Spinner } from "../Spinner";
 import { TxConfigForm } from "../TxConfigForm";
 import CSS from "../global.css";
-import { isServer } from "@src/utils";
 
 const TxWidget = ({
   integratorId,
@@ -24,6 +24,16 @@ const TxWidget = ({
   lightTheme,
   defaultWalletPicker,
   styles,
+  onPendingTransactionsChange,
+  dstTokenLocked,
+  dstChainLocked,
+  srcTokenLocked,
+  srcChainLocked,
+  onDstTokenChange,
+  onDstChainChange,
+  onSrcTokenChange,
+  onSrcChainChange,
+  bridge,
 }: WidgetIntegrationPayload) => {
   const [loading, setLoading] = useState(true);
   const [supportedChains, setSupportedChains] = useState<Chain[]>([]);
@@ -57,7 +67,9 @@ const TxWidget = ({
       <style>{CSS}</style>
 
       {loading ? (
-        <Spinner className="w-10 h-10" />
+        <div className="min-h-[532px] w-full flex items-center justify-center">
+          <Spinner className="w-10 h-10" />
+        </div>
       ) : (
         <TxConfigForm
           integratorId={integratorId}
@@ -73,6 +85,16 @@ const TxWidget = ({
           lightTheme={lightTheme}
           defaultWalletPicker={defaultWalletPicker}
           styles={parsedStyles}
+          onPendingTransactionsChange={onPendingTransactionsChange}
+          dstTokenLocked={dstTokenLocked}
+          dstChainLocked={dstChainLocked}
+          srcTokenLocked={srcTokenLocked}
+          srcChainLocked={srcChainLocked}
+          onDstTokenChange={onDstTokenChange}
+          onDstChainChange={onDstChainChange}
+          onSrcTokenChange={onSrcTokenChange}
+          onSrcChainChange={onSrcChainChange}
+          bridge={bridge}
         />
       )}
     </>
@@ -106,6 +128,16 @@ export const createTxWidgetWC = () => {
       lightTheme: "boolean",
       defaultWalletPicker: "boolean",
       styles: "json",
+      onPendingTransactionsChange: "function",
+      dstTokenLocked: "boolean",
+      dstChainLocked: "boolean",
+      srcTokenLocked: "boolean",
+      srcChainLocked: "boolean",
+      bridge: "boolean",
+      onDstTokenChange: "function",
+      onDstChainChange: "function",
+      onSrcTokenChange: "function",
+      onSrcChainChange: "function",
     },
   });
 
@@ -116,6 +148,8 @@ export const createTxWidgetWC = () => {
   return TxWidgetWC;
 };
 
+// Most fields are required here to enforce adding them in TxWidgetWCWrapped.
+// callbacks are optional, because it will not be passed in TxWidgetWCWrapped.
 export type TxWidgetWCAttributes = {
   "integrator-id": WidgetIntegrationPayload["integratorId"];
   "dst-chain": WidgetIntegrationPayload["dstChain"];
@@ -128,4 +162,15 @@ export type TxWidgetWCAttributes = {
   "light-theme": WidgetIntegrationPayload["lightTheme"];
   "default-wallet-picker": WidgetIntegrationPayload["defaultWalletPicker"];
   styles: string | undefined;
+  "on-pending-transactions-change"?:
+    | WidgetIntegrationPayload["onPendingTransactionsChange"];
+  "dst-token-locked": WidgetIntegrationPayload["dstTokenLocked"] | undefined;
+  "dst-chain-locked": WidgetIntegrationPayload["dstChainLocked"] | undefined;
+  "src-token-locked": WidgetIntegrationPayload["srcTokenLocked"] | undefined;
+  "src-chain-locked": WidgetIntegrationPayload["srcChainLocked"] | undefined;
+  "on-dst-token-change"?: WidgetIntegrationPayload["onDstTokenChange"];
+  "on-dst-chain-change"?: WidgetIntegrationPayload["onDstChainChange"];
+  "on-src-token-change"?: WidgetIntegrationPayload["onSrcTokenChange"];
+  "on-src-chain-change"?: WidgetIntegrationPayload["onSrcChainChange"];
+  bridge: WidgetIntegrationPayload["bridge"] | undefined;
 };

package/src/components/TxWidgetWCWrapped/index.tsx

@@ -1,6 +1,7 @@
 import { WidgetIntegrationPayload } from "@src/models";
-import { createTxWidgetWC, TxWidgetWCAttributes } from "../TxWidgetWC";
 import { isServer } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { createTxWidgetWC, TxWidgetWCAttributes } from "../TxWidgetWC";
 
 const TxWidgetWC = createTxWidgetWC();
 
@@ -35,7 +36,33 @@ export const TxWidgetWCWrapped = ({
   lightTheme,
   defaultWalletPicker,
   styles,
+  onPendingTransactionsChange,
+  dstTokenLocked,
+  dstChainLocked,
+  srcTokenLocked,
+  srcChainLocked,
+  onDstTokenChange,
+  onDstChainChange,
+  onSrcTokenChange,
+  onSrcChainChange,
+  bridge,
 }: WidgetIntegrationPayload) => {
+  useEffect(() => {
+    // We couldn't find a way to pass a function to the web component created by @r2wc/core.
+    // It is assigned to window to be accessed later from within the web component.
+    window.xPayOnPendingTransactionsChange = onPendingTransactionsChange;
+    window.xPayOnDstTokenChange = onDstTokenChange;
+    window.xPayOnDstChainChange = onDstChainChange;
+    window.xPayOnSrcTokenChange = onSrcTokenChange;
+    window.xPayOnSrcChainChange = onSrcChainChange;
+  }, [
+    onPendingTransactionsChange,
+    onDstTokenChange,
+    onDstChainChange,
+    onSrcTokenChange,
+    onSrcChainChange,
+  ]);
+
   return (
     <xpay-widget
       integrator-id={integratorId}
@@ -49,6 +76,11 @@ export const TxWidgetWCWrapped = ({
       light-theme={lightTheme}
       default-wallet-picker={defaultWalletPicker}
       styles={typeof styles === "string" ? styles : JSON.stringify(styles)}
+      dst-token-locked={dstTokenLocked}
+      dst-chain-locked={dstChainLocked}
+      src-token-locked={srcTokenLocked}
+      src-chain-locked={srcChainLocked}
+      bridge={bridge}
     ></xpay-widget>
   );
 };

package/src/components/index.ts

@@ -17,6 +17,7 @@ export * from "./TokenLogo/WithChain";
 export * from "./Tooltip";
 export * from "./TxConfigForm";
 export * from "./TxDataCard";
+export * from "./TxModal";
 export * from "./TxStatusButton";
 export * from "./TxWidgetWC";
 export * from "./TxWidgetWCWrapped";

package/src/config/index.ts

@@ -1,2 +1,2 @@
-export * from "./wagmiConfig";
 export * from "./init";
+export * from "./wagmiConfig";

package/src/context/SwapProvider.tsx

@@ -8,6 +8,8 @@ import {
 } from "@src/constants";
 import { ADDRESSES } from "@src/contracts";
 import {
+  BridgeToken,
+  BridgeTokensDictionary,
   Chain,
   Route,
   Token,
@@ -16,7 +18,12 @@ import {
   Transaction,
   Web3Environment,
 } from "@src/models";
-import { getBalances, getPrices, getRoute } from "@src/services";
+import {
+  getBalances,
+  getBridgeTokens,
+  getPrices,
+  getRoute,
+} from "@src/services";
 import {
   deepMergeObjects,
   getBalanceOf,
@@ -25,6 +32,7 @@ import {
   safeBigNumberFrom,
   weiToHumanReadable,
 } from "@src/utils";
+import { mapToValidPath } from "@src/utils/validation";
 import BigNumberJS from "bignumber.js";
 import { BigNumber, constants } from "ethers";
 import {
@@ -44,6 +52,7 @@ import { useHistory } from "./HistoryProvider";
 
 type Tab = "Swap" | "History" | "Settings";
 type SwapContext = {
+  bridgeUI: boolean;
   integrationConfig: Partial<TxConfigFormPayload>;
   wagmiConfig: Config;
   supportedChains: Chain[];
@@ -53,22 +62,22 @@ type SwapContext = {
   error: string;
   setError: Dispatch<SetStateAction<string>>;
   feeToken: Token | undefined;
-  srcChainProvided: boolean;
   srcChain: Chain | undefined;
   setSrcChain: Dispatch<SetStateAction<Chain | undefined>>;
   srcChainTokensOptions: TokenOption[];
   srcChainOtherTokensOptions: TokenOption[];
   srcChainTokensPrices: TokenPrices;
   dstChainTokensPrices: TokenPrices;
-  srcTokenProvided: boolean;
   srcToken: Token | undefined;
   setSrcToken: Dispatch<SetStateAction<Token | undefined>>;
-  dstChainProvided: boolean;
   dstChain: Chain | undefined;
   setDstChain: Dispatch<SetStateAction<Chain | undefined>>;
   dstChainTokensOptions: TokenOption[];
   dstChainOtherTokensOptions: TokenOption[];
-  dstTokenProvided: boolean;
+  dstTokenLocked: boolean;
+  dstChainLocked?: boolean;
+  srcTokenLocked?: boolean;
+  srcChainLocked?: boolean;
   dstToken: Token | undefined;
   setDstToken: Dispatch<SetStateAction<Token | undefined>>;
   srcValue: string;
@@ -102,6 +111,7 @@ type SwapContext = {
     tokenAddress: string,
     chainId: string,
   ) => Token | undefined;
+  bridgeTokensDictionary: BridgeTokensDictionary | null;
 };
 
 const functionNotImplemented = () => {
@@ -109,6 +119,7 @@ const functionNotImplemented = () => {
 };
 
 const init: SwapContext = {
+  bridgeUI: false,
   integrationConfig: {},
   wagmiConfig: {} as Config,
   supportedChains: [],
@@ -116,19 +127,19 @@ const init: SwapContext = {
   overlay: false,
   error: "",
   feeToken: undefined,
-  srcChainProvided: false,
   srcChain: undefined,
   srcChainTokensOptions: [],
   srcChainOtherTokensOptions: [],
   srcChainTokensPrices: {},
   dstChainTokensPrices: {},
-  dstChainProvided: false,
   dstChain: undefined,
   dstChainTokensOptions: [],
   dstChainOtherTokensOptions: [],
-  srcTokenProvided: false,
   srcToken: undefined,
-  dstTokenProvided: false,
+  dstTokenLocked: false,
+  dstChainLocked: false,
+  srcTokenLocked: false,
+  srcChainLocked: false,
   dstToken: undefined,
   srcValue: "",
   srcValueWei: "",
@@ -164,6 +175,7 @@ const init: SwapContext = {
   quoteRoute: functionNotImplemented,
   refreshBalance: functionNotImplemented,
   findTokenDataByAddressAndChain: functionNotImplemented,
+  bridgeTokensDictionary: null,
 };
 
 const swapContext = createContext(init);
@@ -189,22 +201,28 @@ export const SwapProvider = ({
   const [infiniteApproval, setInfiniteApproval] = useState(
     init.infiniteApproval,
   );
-  const srcTokenProvided = useMemo(
-    () => !!integrationConfig?.srcTokenAddr,
-    [integrationConfig?.srcTokenAddr],
+  const srcTokenLocked = useMemo(
+    () => !!integrationConfig?.srcTokenLocked,
+    [integrationConfig?.srcTokenLocked],
+  );
+  const dstTokenLocked = useMemo(
+    () => !!integrationConfig?.dstTokenLocked,
+    [integrationConfig?.dstTokenLocked],
   );
-  const dstTokenProvided = useMemo(
-    () => !!integrationConfig?.dstTokenAddr,
-    [integrationConfig?.dstTokenAddr],
+  const srcChainLocked = useMemo(
+    () => !!integrationConfig?.srcChainLocked,
+    [integrationConfig?.srcChainLocked],
   );
-  const srcChainProvided = useMemo(
-    () => !!integrationConfig?.srcChainId,
-    [integrationConfig?.srcChainId],
+  const dstChainLocked = useMemo(
+    () => !!integrationConfig?.dstChainLocked,
+    [integrationConfig?.dstChainLocked],
   );
-  const dstChainProvided = useMemo(
-    () => !!integrationConfig?.dstChainId,
-    [integrationConfig?.dstChainId],
+
+  const bridgeUI = useMemo(
+    () => !!integrationConfig.bridge,
+    [integrationConfig.bridge],
   );
+
   const [slippage, setSlippage] = useState(init.slippage);
   const [srcChain, setSrcChain] = useState(init.srcChain);
   const [dstChain, setDstChain] = useState(init.dstChain);
@@ -288,14 +306,66 @@ export const SwapProvider = ({
     return tempChainToTokenOptionsMap;
   }, [supportedTokens]);
 
+  const [bridgeTokens, setBridgeTokens] = useState<BridgeToken[]>([]);
+  useEffect(() => {
+    (async () => {
+      const data = await getBridgeTokens();
+      setBridgeTokens(data);
+    })();
+  }, []);
+
+  const bridgeTokensDictionary = useMemo(() => {
+    const result: BridgeTokensDictionary = {};
+
+    for (const dict of bridgeTokens) {
+      const [chainId0, address0] = Object.entries(dict)[0]!;
+      const [chainId1, address1] = Object.entries(dict)[1]!;
+      if (!result[chainId0]) {
+        result[chainId0] = {};
+      }
+      if (!result[chainId0][address0]) {
+        result[chainId0][address0] = {};
+      }
+      result[chainId0][address0][chainId1] = address1;
+      if (!result[chainId1]) {
+        result[chainId1] = {};
+      }
+      if (!result[chainId1][address1]) {
+        result[chainId1][address1] = {};
+      }
+      result[chainId1][address1][chainId0] = address0;
+    }
+
+    if (Object.keys(result).length) {
+      return result;
+    }
+
+    return null;
+  }, [bridgeTokens]);
+
   const getTokenOptions = useCallback(
-    (chainId: string, oppositeChainId: string) => {
+    (chainId: string | undefined, oppositeChainId: string | undefined) => {
       if (!chainId || !oppositeChainId) {
         return [];
       }
+
+      if (bridgeTokensDictionary && bridgeUI) {
+        if (!chainToTokenOptionsMap[chainId]) {
+          return [];
+        }
+
+        return chainToTokenOptionsMap[chainId].filter((tokenData) => {
+          const supportedTokensAddresses = Object.keys(
+            bridgeTokensDictionary[chainId] || {},
+          );
+
+          return supportedTokensAddresses.includes(tokenData.address);
+        });
+      }
+
       return chainToTokenOptionsMap[chainId] || [];
     },
-    [chainToTokenOptionsMap],
+    [bridgeTokensDictionary, bridgeUI, chainToTokenOptionsMap],
   );
 
   const srcTokenBalanceInfo = useMemo(() => {
@@ -665,9 +735,88 @@ export const SwapProvider = ({
     setDstToken(initDstToken);
   }, [integrationConfig, supportedChains]);
 
+  useEffect(() => {
+    if (!bridgeTokensDictionary) {
+      return;
+    }
+
+    const { source, target } = mapToValidPath({
+      source: { chain: srcChain, token: srcToken },
+      target: { chain: dstChain, token: dstToken },
+      type: bridgeUI ? "BRIDGE" : "SWAP",
+      supportedChains,
+      bridgeTokensDictionary,
+    });
+
+    if (source.chain?.chainId !== srcChain?.chainId) {
+      setSrcChain(source.chain);
+    }
+
+    if (target.chain?.chainId !== dstChain?.chainId) {
+      setDstChain(target.chain);
+    }
+
+    if (source.token?.address !== srcToken?.address) {
+      setSrcToken(source.token);
+    }
+
+    if (target.token?.address !== dstToken?.address) {
+      setDstToken(target.token);
+    }
+  }, [
+    srcChain,
+    srcToken,
+    dstChain,
+    dstToken,
+    bridgeUI,
+    supportedChains,
+    bridgeTokensDictionary,
+  ]);
+
+  useEffect(() => {
+    if (integrationConfig.onDstChainChange) {
+      integrationConfig.onDstChainChange(dstChain?.chainId);
+    } else if (window.xPayOnDstChainChange) {
+      window.xPayOnDstChainChange(dstChain?.chainId);
+    }
+  }, [integrationConfig, dstChain]);
+
+  useEffect(() => {
+    const token = dstToken
+      ? { address: dstToken.address.toLowerCase(), symbol: dstToken.symbol }
+      : undefined;
+
+    if (integrationConfig.onDstTokenChange) {
+      integrationConfig.onDstTokenChange(token);
+    } else if (window.xPayOnDstTokenChange) {
+      window.xPayOnDstTokenChange(token);
+    }
+  }, [integrationConfig, dstToken]);
+
+  useEffect(() => {
+    if (integrationConfig.onSrcChainChange) {
+      integrationConfig.onSrcChainChange(srcChain?.chainId);
+    } else if (window.xPayOnSrcChainChange) {
+      window.xPayOnSrcChainChange(srcChain?.chainId);
+    }
+  }, [integrationConfig, srcChain]);
+
+  useEffect(() => {
+    const token = srcToken
+      ? { address: srcToken.address.toLowerCase(), symbol: srcToken.symbol }
+      : undefined;
+
+    if (integrationConfig.onSrcTokenChange) {
+      integrationConfig.onSrcTokenChange(token);
+    } else if (window.xPayOnSrcTokenChange) {
+      window.xPayOnSrcTokenChange(token);
+    }
+  }, [integrationConfig, srcToken]);
+
   return (
     <swapContext.Provider
       value={{
+        bridgeUI,
         integrationConfig,
         wagmiConfig,
         supportedChains,
@@ -677,22 +826,18 @@ export const SwapProvider = ({
         error,
         setError,
         feeToken,
-        srcChainProvided,
         srcChain,
         setSrcChain,
         srcChainTokensOptions,
         srcChainOtherTokensOptions,
         dstChainTokensPrices,
         srcChainTokensPrices,
-        dstChainProvided,
         dstChain,
         setDstChain,
         dstChainTokensOptions,
         dstChainOtherTokensOptions,
-        srcTokenProvided,
         srcToken,
         setSrcToken,
-        dstTokenProvided,
         dstToken,
         setDstToken,
         srcValue,
@@ -723,6 +868,11 @@ export const SwapProvider = ({
         quoteRoute,
         refreshBalance,
         findTokenDataByAddressAndChain,
+        srcTokenLocked,
+        srcChainLocked,
+        dstTokenLocked,
+        dstChainLocked,
+        bridgeTokensDictionary,
       }}
     >
       {children}

package/src/context/TxUIWrapper.tsx

@@ -1,10 +1,10 @@
 import { CloseIcon } from "@src/assets/icons";
 import {
   Button,
-  Modal,
-  ModalType,
   SnackMessage,
   Spinner,
+  TxModal,
+  TxModalType,
 } from "@src/components";
 import { ConfirmationView } from "@src/components/Swap/SwapView/ConfirmationView";
 import { CCIP_EXPLORER } from "@src/constants";
@@ -319,7 +319,7 @@ export const TxUIWrapper = ({ children }: Props) => {
     isTxModalOpenRef.current = flag;
   }, []);
 
-  const modalType: ModalType = useMemo(
+  const modalType: TxModalType = useMemo(
     () =>
       txError
         ? "error"
@@ -369,14 +369,14 @@ export const TxUIWrapper = ({ children }: Props) => {
   return (
     <TxUIWrapperContext.Provider value={state}>
       {isTxModalOpen && (
-        <Modal
+        <TxModal
           id="tx_modal"
           className="max-w-x_modal"
           type={modalType}
           onCloseClick={closeTxModal}
         >
           <ConfirmationView onCloseClick={closeTxModal} />
-        </Modal>
+        </TxModal>
       )}
       {children}
     </TxUIWrapperContext.Provider>

package/src/hooks/index.ts

@@ -1,5 +1,4 @@
 export * from "./useBatchQuery";
 export * from "./useDebounce";
 export * from "./useEvmContractApi";
-export * from "./usePortal";
 export * from "./useXPower";

package/src/models/BridgeTokensDictionary.ts

@@ -0,0 +1,7 @@
+export type BridgeTokensDictionary = {
+  [chainId0: string]: {
+    [tokenAddress0: string]: {
+      [chainId1: string]: string; // string is tokenAddress1
+    };
+  };
+};

package/src/models/TokenData.ts

@@ -1,5 +1,5 @@
-import { Web3Environment } from "./Web3Environment";
 import { BigNumber } from "ethers";
+import { Web3Environment } from "./Web3Environment";
 
 export type Chain = {
   ecosystem: string;
@@ -17,6 +17,8 @@ export type Chain = {
   publicRpcUrls: string[];
   privateRpcUrls?: string[];
   scanApiURL?: string;
+  defaultDstChain?: string;
+  disabledForDestination?: string[];
 };
 
 export type Token = {

package/src/models/index.ts

@@ -1,7 +1,6 @@
 export * from "./Addresses";
-export * from "./XSwapConfig";
 export * from "./BridgeToken";
-export * from "./TokenData";
+export * from "./BridgeTokensDictionary";
 export * from "./CoinTypeAddress";
 export * from "./CollectFees";
 export * from "./ContractCall";
@@ -11,9 +10,11 @@ export * from "./forms";
 export * from "./integrations";
 export * from "./payloads";
 export * from "./Protocol";
-export * from "./Route";
-export * from "./Web3Environment";
-export * from "./XSwapCallType";
 export * from "./Referral";
+export * from "./Route";
+export * from "./TokenData";
 export * from "./TransactionHistory";
 export * from "./TxUIWrapper";
+export * from "./Web3Environment";
+export * from "./XSwapCallType";
+export * from "./XSwapConfig";