@xswap-link/sdk 0.6.10 → 0.7.0

package/package.json

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

package/src/components/Modal/index.tsx

@@ -1,52 +1,59 @@
-import { xpayShadowRoot } from "@src/config";
-import { MouseEvent, ReactElement } from "react";
-import { createPortal } from "react-dom";
+import { useSwapContext } from "@src/context";
+import { FC, ReactNode } from "react";
 
-export type ModalType = "neutral" | "waiting" | "warning" | "error" | "success";
-type Props = {
-  id: string;
-  children: ReactElement | ReactElement[];
-  onCloseClick: () => void;
-  type?: ModalType;
+/**
+ * This component was created to meet the following requirements:
+ * - Modals needs to be inside the shadow root,
+ * - Modals needs to be inside all app's main contexts,
+ * - Modals' need to rerender on props change.
+ *
+ * Usage:
+ * ```
+ * const [open, setOpen] = useState(false);
+ *
+ * return (
+ *  <>
+ *    { open && <Modal onClose={() => setOpen(false)}>...</Modal>}
+ *
+ *    <button onClick={() => setOpen(true)}>Open modal</button>
+ *  </>
+ * );
+ * ```
+ */
+export const Modal: FC<{
   className?: string;
-};
-export const Modal = ({
-  id,
-  children,
-  onCloseClick,
-  type = "waiting",
-  className,
-}: Props) => {
-  const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    if (e.target === e.currentTarget) {
-      onCloseClick();
-    }
-  };
+  children: ReactNode;
+  onClose: () => void;
+}> = ({ className, children, onClose }) => {
+  const { overlay } = useSwapContext();
 
-  return createPortal(
+  return (
     <div
-      className="fixed box-border inset-0 z-20 flex items-center justify-center bg-black bg-opacity-80"
-      onMouseDown={onBackdropClick}
+      className={`${
+        overlay ? "fixed bg-[rgba(0,0,0,0.8)]" : "absolute"
+      } top-0 left-0 right-0 bottom-0 flex items-center justify-center z-10 ${
+        className || ""
+      }`}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+        e.preventDefault();
+
+        if (e.target === e.currentTarget && overlay) {
+          onClose();
+        }
+      }}
     >
       <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}`}
+        className="flex flex-col bg-t_bg_primary x-border rounded-3xl p-4 w-full min-w-[340px]"
+        style={{
+          height: overlay ? "600px" : "100%",
+          maxWidth: "480px",
+          maxHeight: "100%",
+        }}
       >
         {children}
       </div>
-    </div>,
-    xpayShadowRoot!,
-    id,
+    </div>
   );
 };

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

@@ -1,15 +1,15 @@
+import { Modal } from "@src/components/Modal";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
-import { useModal } from "@src/context/ModalProvider";
+import { ADDRESSES } from "@src/contracts";
+import { specialApprovalTokens } from "@src/contracts/specialApprovalTokens";
+import useNetworks from "@src/hooks/networkManagement/useNetworks";
+import { useERC20Token } from "@src/hooks/useERC20Token";
 import { TxStatus } from "@src/models";
 import { safeBigNumberFrom } from "@src/utils";
+import { BigNumber } from "ethers";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAccount, useSwitchChain } from "wagmi";
 import { WalletPicker } from "../WalletPicker";
-import { BigNumber } from "ethers";
-import useNetworks from "@src/hooks/networkManagement/useNetworks";
-import { useERC20Token } from "@src/hooks/useERC20Token";
-import { ADDRESSES } from "@src/contracts";
-import { specialApprovalTokens } from "@src/contracts/specialApprovalTokens";
 
 type Button = {
   text: string;
@@ -20,7 +20,7 @@ type Button = {
 export const SwapButton = () => {
   const { address, chainId } = useAccount();
   const { switchChainAsync } = useSwitchChain();
-  const { openModal } = useModal();
+  const [connectWalletModalOpen, setConnectWalletModalOpen] = useState(false);
   const { integrationConfig } = useSwapContext();
 
   const {
@@ -113,7 +113,7 @@ export const SwapButton = () => {
           ? "Connect wallet"
           : "Connect wallet first",
         fn: () => {
-          openModal(<WalletPicker />);
+          setConnectWalletModalOpen(true);
         },
         disabled: !integrationConfig.defaultWalletPicker,
       };
@@ -218,7 +218,6 @@ export const SwapButton = () => {
     isFetchingRoute,
     currentTokenAllowance,
     integrationConfig.defaultWalletPicker,
-    openModal,
     switchChainAsync,
     enqueueTransaction,
     approve,
@@ -229,17 +228,25 @@ export const SwapButton = () => {
   ]);
 
   return (
-    <button
-      type="button"
-      disabled={button.disabled}
-      onClick={button.fn}
-      className={`text-xl w-full py-5 cursor-pointer disabled:cursor-not-allowed rounded-2xl border-none ${
-        button.disabled
-          ? "bg-t_button_pr_off_bg text-t_button_pr_off_text"
-          : "bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark text-t_button_pr_text"
-      }`}
-    >
-      {button.text}
-    </button>
+    <>
+      {connectWalletModalOpen && (
+        <Modal onClose={() => setConnectWalletModalOpen(false)}>
+          <WalletPicker onClose={() => setConnectWalletModalOpen(false)} />
+        </Modal>
+      )}
+
+      <button
+        type="button"
+        disabled={button.disabled}
+        onClick={button.fn}
+        className={`text-xl w-full py-5 cursor-pointer disabled:cursor-not-allowed rounded-2xl border-none ${
+          button.disabled
+            ? "bg-t_button_pr_off_bg text-t_button_pr_off_text"
+            : "bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark text-t_button_pr_text"
+        }`}
+      >
+        {button.text}
+      </button>
+    </>
   );
 };

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

@@ -1,5 +1,4 @@
 import { CloseIcon } from "@src/assets/icons";
-import { useModal } from "@src/context/ModalProvider";
 import { Chain, Web3Environment } from "@src/models";
 import { useMemo } from "react";
 import { Virtuoso } from "react-virtuoso";
@@ -11,15 +10,15 @@ type Props = {
   supportedChains: Chain[];
   setSrcChain: (chain: Chain) => void;
   setDstChain: (chain: Chain) => void;
+  onClose: () => void;
 };
 export const ChainPicker = ({
   type,
   supportedChains,
   setSrcChain,
   setDstChain,
+  onClose,
 }: Props) => {
-  const { closeModal } = useModal();
-
   const filteredChains = useMemo(() => {
     return supportedChains.filter(
       ({ web3Environment, swapSupported }) =>
@@ -39,7 +38,7 @@ export const ChainPicker = ({
     }
 
     type === "source" ? setSrcChain(chain) : setDstChain(chain);
-    closeModal();
+    onClose();
   };
 
   return (
@@ -48,7 +47,7 @@ export const ChainPicker = ({
         <div className="text-base/4 text-t_text_primary mb-4">{`Pick ${type} chain`}</div>
         <div
           className="w-4 h-4 fill-t_text_primary cursor-pointer"
-          onClick={closeModal}
+          onClick={onClose}
         >
           <CloseIcon />
         </div>

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

@@ -1,12 +1,11 @@
 import { ArrowDownIcon } from "@src/assets/icons";
+import { Modal } from "@src/components/Modal";
 import { useSwapContext } from "@src/context";
-import { useModal } from "@src/context/ModalProvider";
 import { Chain } from "@src/models";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 import { SwapPanelType } from "../../../SwapView";
 import { ChainPicker } from "./ChainPicker";
-import { useMemo } from "react";
 
 type Props = {
   chain: Chain | undefined;
@@ -51,7 +50,7 @@ export const ChainPanel = ({ chain, type }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chainId]);
 
-  const { openModal } = useModal();
+  const [chainPickerModalOpen, setChainPickerModalOpen] = useState(false);
 
   const handleSrcChainChange = useCallback(
     (chain: Chain) => {
@@ -77,19 +76,22 @@ export const ChainPanel = ({ chain, type }: Props) => {
 
   return (
     <>
+      {chainPickerModalOpen && (
+        <Modal onClose={() => setChainPickerModalOpen(false)}>
+          <ChainPicker
+            type={type}
+            supportedChains={supportedChains}
+            setSrcChain={handleSrcChainChange}
+            setDstChain={handleDstChainChange}
+            onClose={() => setChainPickerModalOpen(false)}
+          />
+        </Modal>
+      )}
+
       <button
         type="button"
         disabled={projectSelectedDestinationChain}
-        onClick={() =>
-          openModal(
-            <ChainPicker
-              type={type}
-              supportedChains={supportedChains}
-              setSrcChain={handleSrcChainChange}
-              setDstChain={handleDstChainChange}
-            />,
-          )
-        }
+        onClick={() => setChainPickerModalOpen(true)}
       >
         <div className="flex justify-between items-center p-4 gap-8">
           <div className="flex flex-col font-medium items-start">

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

@@ -57,11 +57,15 @@ export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
                 })
               : "<0.0001"}
           </div>
-        ) : address ? (
-          <div>
-            <Skeleton className="w-[48px] h-[12px]" />
-          </div>
-        ) : null}
+        ) : (
+          <>
+            {address ? (
+              <div>
+                <Skeleton className="w-[48px] h-[12px]" />
+              </div>
+            ) : null}
+          </>
+        )}
       </div>
     </div>
   );

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

@@ -10,7 +10,6 @@ import {
 } from "@src/components";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { useSwapContext } from "@src/context";
-import { useModal } from "@src/context/ModalProvider";
 import { ERC20Abi } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import { Chain, Ecosystem, ImportedTokenData, TokenOption } from "@src/models";
@@ -52,7 +51,6 @@ export const TokenPicker = ({
 
   const { supportedChains, findTokenDataByAddressAndChain } = useSwapContext();
   const evmContractApi = useEvmContractApi();
-  const { closeModal } = useModal();
 
   useEffect(() => {
     setShowImportWarning(false);
@@ -217,7 +215,7 @@ export const TokenPicker = ({
         <div className="text-base/4 mb-4">Import token</div>
         <div
           className="w-4 h-4 fill-t_text_primary cursor-pointer"
-          onClick={closeModal}
+          onClick={() => setModalOpen(false)}
         >
           <CloseIcon />
         </div>
@@ -301,7 +299,7 @@ export const TokenPicker = ({
         <div className="text-base/4 text-t_text_primary mb-4">{`Pick ${type} token`}</div>
         <div
           className="w-4 h-4 fill-t_text_primary cursor-pointer"
-          onClick={closeModal}
+          onClick={() => setModalOpen(false)}
         >
           <CloseIcon />
         </div>

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

@@ -1,7 +1,6 @@
 import { ArrowDownIcon } from "@src/assets/icons";
-import { TokenLogo } from "@src/components";
+import { Modal, TokenLogo } from "@src/components";
 import { useSwapContext } from "@src/context";
-import { useModal } from "@src/context/ModalProvider";
 import { Chain, Token, TokenOption } from "@src/models";
 import { useMemo, useState } from "react";
 import { SwapPanelType } from "../../index";
@@ -14,8 +13,6 @@ type Props = {
 };
 
 export const TokenPanel = ({ chain, token, type }: Props) => {
-  const [open, setOpen] = useState(false);
-
   const {
     srcChainTokensOptions,
     srcChainOtherTokensOptions,
@@ -34,7 +31,7 @@ export const TokenPanel = ({ chain, token, type }: Props) => {
     [type, dstTokenProvided],
   );
 
-  const { openModal, closeModal } = useModal();
+  const [tokenPickerModalOpen, setTokenPickerModalOpen] = useState(false);
 
   const tokensWithBalances = useMemo(
     () => (type === "source" ? srcChainTokensOptions : dstChainTokensOptions),
@@ -61,27 +58,31 @@ export const TokenPanel = ({ chain, token, type }: Props) => {
       setDstToken(token);
       setDstChain(newChain);
     }
-    closeModal();
+    setTokenPickerModalOpen(false);
   };
 
   return (
     <>
+      {tokenPickerModalOpen && (
+        <Modal onClose={() => setTokenPickerModalOpen(false)}>
+          <TokenPicker
+            type={type}
+            chain={chain!}
+            tokens={tokensWithBalances}
+            otherTokens={otherTokensWithBalances}
+            selectedTokenAddress={token?.address}
+            onSelect={onTokenSelect}
+            isOpen={tokenPickerModalOpen}
+            setModalOpen={setTokenPickerModalOpen}
+          />
+        </Modal>
+      )}
+
       <button
         type="button"
         disabled={projectSelectedDestinationToken}
         onClick={() => {
-          openModal(
-            <TokenPicker
-              type={type}
-              chain={chain!}
-              tokens={tokensWithBalances}
-              otherTokens={otherTokensWithBalances}
-              selectedTokenAddress={token?.address}
-              onSelect={onTokenSelect}
-              isOpen={open}
-              setModalOpen={setOpen}
-            />,
-          );
+          setTokenPickerModalOpen(true);
         }}
       >
         <div className="flex justify-between items-center p-4 gap-8 border-r border-solid border-t_text_primary border-opacity-10">

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

@@ -1,5 +1,4 @@
 import { CloseIcon, WalletConnectIcon } from "@src/assets/icons";
-import { useModal } from "@src/context/ModalProvider";
 import { FC, useCallback, useMemo } from "react";
 import { Connector, useConnect } from "wagmi";
 
@@ -27,8 +26,10 @@ const ConnectorIcon: FC<{ connector: Connector; className?: string }> = ({
   }
 };
 
-export const WalletPicker: FC<{ className?: string }> = ({ className }) => {
-  const { closeModal } = useModal();
+export const WalletPicker: FC<{ className?: string; onClose: () => void }> = ({
+  className,
+  onClose,
+}) => {
   const { connectors, connectAsync } = useConnect();
 
   const allowedConnectors = useMemo(() => {
@@ -44,9 +45,9 @@ export const WalletPicker: FC<{ className?: string }> = ({ className }) => {
   const handleWalletClick = useCallback(
     async (connector: Connector) => {
       await connectAsync({ connector });
-      closeModal();
+      onClose();
     },
-    [connectAsync, closeModal],
+    [connectAsync, onClose],
   );
 
   return (
@@ -55,7 +56,7 @@ export const WalletPicker: FC<{ className?: string }> = ({ className }) => {
         <div className="text-base/4 mb-4 text-t_text_primary">Pick wallet</div>
         <div
           className="w-4 h-4 fill-t_text_primary cursor-pointer"
-          onClick={closeModal}
+          onClick={onClose}
         >
           <CloseIcon />
         </div>

package/src/components/TxConfigForm/index.tsx

@@ -6,13 +6,12 @@ import {
   TransactionProvider,
   TxUIWrapper,
 } from "@src/context";
-import { ModalProvider } from "@src/context/ModalProvider";
 import { Chain, ModalIntegrationPayload, Route } from "@src/models";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { FC, MouseEvent, useEffect, useMemo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { useReconnect, WagmiProvider } from "wagmi";
 import { changeHostVariableColor } from "../../../localTheme";
-import { ErrorBoundary } from "react-error-boundary";
 
 export type TxConfigFormPayload = Omit<
   ModalIntegrationPayload,
@@ -121,24 +120,22 @@ export const TxConfigForm = ({
             >
               <TransactionProvider>
                 <TxUIWrapper>
-                  <ModalProvider>
-                    {overlay ? (
-                      <div
-                        className="top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex 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)] min-w-x_modal max-w-x_modal min-h-[432px] w-full">
-                          <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-[432px] w-full">
-                        <Swap onSubmit={() => {}} onClose={() => {}} />
+                  {overlay ? (
+                    <div
+                      className="top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex 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)] min-w-x_modal max-w-x_modal min-h-[432px] w-full">
+                        <Swap onSubmit={onSubmit} onClose={onClose} />
                         <PoweredBy />
                       </div>
-                    )}
-                  </ModalProvider>
+                    </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-[432px] w-full">
+                      <Swap onSubmit={() => {}} onClose={() => {}} />
+                      <PoweredBy />
+                    </div>
+                  )}
                 </TxUIWrapper>
               </TransactionProvider>
             </SwapProvider>

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/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/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/payloads/ModalIntegrationPayload.ts

@@ -38,8 +38,8 @@ export type ModalIntegrationStyles = Pick<
 
 export type ModalIntegrationPayload = {
   integratorId: string;
-  dstChain: string;
-  dstToken: string;
+  dstChain?: string;
+  dstToken?: string;
   srcChain?: string;
   srcToken?: string;
   customContractCalls?: ContractCall[];