@xswap-link/sdk 0.6.10 → 0.8.0

package/package.json

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

package/src/assets/icons/ArrowsExchange.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+export const ArrowsExchange: FC = () => {
+  return (
+    <svg
+      width="14"
+      height="18"
+      viewBox="0 0 14 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.66665 9.83335V3.85419L1.52081 6.00002L0.333313 4.83335L4.49998 0.666687L8.66665 4.83335L7.47915 6.00002L5.33331 3.85419V9.83335H3.66665ZM9.49998 17.3334L5.33331 13.1667L6.52081 12L8.66665 14.1459V8.16669H10.3333V14.1459L12.4791 12L13.6666 13.1667L9.49998 17.3334Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/index.ts

@@ -2,6 +2,7 @@ export * from "./ArrowDownIcon";
 export * from "./ArrowDownLongIcon";
 export * from "./ArrowLeftIcon";
 export * from "./ArrowRightIcon";
+export * from "./ArrowsExchange";
 export * from "./ArrowUpIcon";
 export * from "./ArrowUpRightIcon";
 export * from "./CashbacklIcon";

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/Header/index.tsx

@@ -5,11 +5,13 @@ type Props = {
   onClose: () => void;
 };
 export const Header = ({ onClose }: Props) => {
-  const { tab } = useSwapContext();
+  const { tab, bridgeUI } = useSwapContext();
 
   return (
     <div className="flex justify-between">
-      <div className="text-xl">{tab}</div>
+      <div className="text-xl">
+        {tab === "Swap" && bridgeUI ? "Bridge" : tab}
+      </div>
       <Controls onClose={onClose} />
     </div>
   );

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

@@ -22,7 +22,7 @@ export const HistoryView = () => {
     return (
       <Virtuoso
         data={history}
-        style={{ height: "100%" }}
+        style={{ height: "532px" }}
         itemContent={(_, transaction) => {
           return <TxDataCard transaction={transaction} />;
         }}
@@ -30,5 +30,5 @@ export const HistoryView = () => {
     );
   }, [history, historyLoadedOnce]);
 
-  return <div className="h-[40vh] overflow-hidden">{view}</div>;
+  return <div className="flex-1 overflow-hidden">{view}</div>;
 };

package/src/components/Swap/ReorderButton/ReorderButton.tsx

@@ -0,0 +1,37 @@
+import { ArrowsExchange } from "@src/assets/icons";
+import { useSwapContext } from "@src/context";
+import { FC } from "react";
+
+export const ReorderButton: FC = () => {
+  const {
+    dstChain,
+    dstToken,
+    srcChain,
+    srcToken,
+    setDstChain,
+    setDstToken,
+    setSrcChain,
+    setSrcToken,
+  } = useSwapContext();
+
+  const onReorderClick = () => {
+    setDstChain(srcChain);
+    setSrcChain(dstChain);
+    setDstToken(srcToken);
+    setSrcToken(dstToken);
+  };
+
+  return (
+    <button
+      onClick={onReorderClick}
+      aria-label="Switch target token with the source token"
+      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-14 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary"
+    >
+      <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-lg">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
+          <ArrowsExchange />
+        </div>
+      </div>
+    </button>
+  );
+};

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/ArrowIcon.tsx

@@ -2,7 +2,7 @@ import { ArrowDownLongIcon } from "@src/assets/icons";
 
 export const ArrowIcon = () => {
   return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary">
+    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-14 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary">
       <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-xl">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
           <ArrowDownLongIcon />

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,10 +20,11 @@ type Button = {
 export const SwapButton = () => {
   const { address, chainId } = useAccount();
   const { switchChainAsync } = useSwitchChain();
-  const { openModal } = useModal();
+  const [connectWalletModalOpen, setConnectWalletModalOpen] = useState(false);
   const { integrationConfig } = useSwapContext();
 
   const {
+    bridgeUI,
     error,
     srcChain,
     dstChain,
@@ -113,7 +114,7 @@ export const SwapButton = () => {
           ? "Connect wallet"
           : "Connect wallet first",
         fn: () => {
-          openModal(<WalletPicker />);
+          setConnectWalletModalOpen(true);
         },
         disabled: !integrationConfig.defaultWalletPicker,
       };
@@ -199,13 +200,14 @@ export const SwapButton = () => {
     }
 
     return {
-      text: "Swap",
+      text: bridgeUI ? "Bridge" : "Swap",
       fn: async () => {
         showSwapConfirmationView();
       },
       disabled: false,
     };
   }, [
+    bridgeUI,
     srcChainId,
     dstChainId,
     srcTokenAddress,
@@ -218,7 +220,6 @@ export const SwapButton = () => {
     isFetchingRoute,
     currentTokenAllowance,
     integrationConfig.defaultWalletPicker,
-    openModal,
     switchChainAsync,
     enqueueTransaction,
     approve,
@@ -229,17 +230,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/ChainItem/index.tsx

@@ -1,74 +1,107 @@
 import { DotGreenIcon, HelpIcon } from "@src/assets/icons";
-import { Tooltip } from "@src/components";
+import { SwapPanelType } from "@src/components/Swap/SwapView";
+import { Tooltip } from "@src/components/Tooltip";
 import { useSwapContext } from "@src/context";
+import useNetworks from "@src/hooks/networkManagement/useNetworks";
 import { Chain } from "@src/models";
 import { useMemo, useRef } from "react";
-import { SwapPanelType } from "../../../../../SwapView";
 
 type Props = {
   chain: Chain;
   type: SwapPanelType;
-  disabledChain?: string;
+  disabledChains: string[];
   onClick: (chainId: string) => void;
 };
-export const ChainItem = ({ chain, type, disabledChain, onClick }: Props) => {
-  // todo check useModal, we could improve this part to have the react state here, right now this line throws an error
-  // const { address, chainId } = useAccount();
+
+export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
+  const {
+    networks: { evm },
+  } = useNetworks();
 
   const tooltipTriggerRef = useRef<SVGSVGElement>(null);
 
-  const { srcChain, dstChain } = useSwapContext();
+  const { srcChain, dstChain, bridgeUI } = useSwapContext();
+
   const currentChainId = useMemo(
     () => (type === "source" ? srcChain?.chainId : dstChain?.chainId),
     [dstChain, srcChain, type],
   );
 
-  const connected = false; //address && chainId?.toString() === chain.chainId;
+  const connected = useMemo(
+    () => evm.signer && evm.chainId === chain.chainId,
+    [chain.chainId, evm.chainId, evm.signer],
+  );
+
+  const sameChainId = useMemo(() => {
+    if (!bridgeUI) {
+      return undefined;
+    }
+
+    return type === "destination" ? srcChain?.chainId : dstChain?.chainId;
+  }, [bridgeUI, dstChain?.chainId, srcChain?.chainId, type]);
+
+  const isInDisabledChains = disabledChains.includes(chain.chainId);
 
   return (
     <div
       onClick={() => {
-        if (chain.chainId === disabledChain) {
+        if (chain.chainId === sameChainId || isInDisabledChains) {
           return;
         }
         onClick(chain.chainId);
       }}
-      className={`flex justify-between gap-3 mt-2 mb-2 border border-solid border-transparent cursor-pointer p-4 hover:selected-chain-item ${
-        currentChainId === chain.chainId
-          ? "selected-chain-item"
-          : "bg-t_bg_primary"
+      className={`flex justify-between items-center gap-3 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-chain-item ${
+        currentChainId === chain.chainId ? "selected-chain-item" : ""
       } ${
-        chain.chainId === disabledChain
+        chain.chainId === sameChainId || isInDisabledChains
           ? "disabled-chain-item cursor-default"
           : ""
       }`}
     >
       <div className="flex gap-3 items-center w-full">
         <img src={chain.image} alt={chain.name} className="w-[34px] h-[34px]" />
-        <p className="text-t_text_primary">{chain.displayName}</p>
+        <p>{chain.displayName}</p>
       </div>
 
       {connected && (
-        <div className="flex items-center gap-1">
+        <div className="flex items-baseline gap-1">
           <DotGreenIcon />
           <div className="text-t_text_green">connected</div>
         </div>
       )}
-      {chain.chainId === disabledChain && (
+
+      {isInDisabledChains && chain.chainId !== sameChainId && (
         <div className="flex items-center gap-1">
           <Tooltip
-            text="Transfers between same chain not available"
+            text={
+              bridgeUI
+                ? "Token is not available on this chain"
+                : `Transfers from ${
+                    srcChain?.name || "the source chain"
+                  } to this chain are currently not supported.`
+            }
             position="BOTTOM"
             triggerRef={tooltipTriggerRef}
-            id="transfers-between-same-chains-tooltip"
+            id="transfers-from-chain-not-supported-tooltip"
           />
+        </div>
+      )}
 
-          <HelpIcon
-            ref={tooltipTriggerRef}
-            className="cursor-help fill-t_main_accent_light w-[18px] h-[18px]"
+      {chain.chainId === sameChainId && (
+        <div className="flex items-center gap-1">
+          <Tooltip
+            text="Transfers between the same chain are not available"
+            id="transfers-between-same-chains-tooltip"
+            position="BOTTOM"
+            triggerRef={tooltipTriggerRef}
           />
         </div>
       )}
+
+      <HelpIcon
+        ref={tooltipTriggerRef}
+        className="cursor-help fill-t_main_accent_light w-[18px] h-[18px] min-w-[18px] min-h-[18px] max-w-[18px] max-h-[18px]"
+      />
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import { CloseIcon } from "@src/assets/icons";
-import { useModal } from "@src/context/ModalProvider";
+import { useSwapContext } from "@src/context";
 import { Chain, Web3Environment } from "@src/models";
 import { useMemo } from "react";
 import { Virtuoso } from "react-virtuoso";
@@ -8,24 +8,33 @@ import { ChainItem } from "./ChainItem";
 
 type Props = {
   type: SwapPanelType;
-  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 {
+    srcChain,
+    srcToken,
+    dstChain,
+    dstToken,
+    bridgeUI,
+    bridgeTokensDictionary,
+    supportedChains,
+  } = useSwapContext();
 
   const filteredChains = useMemo(() => {
     return supportedChains.filter(
-      ({ web3Environment, swapSupported }) =>
-        web3Environment === Web3Environment.MAINNET && swapSupported,
+      ({ web3Environment, swapSupported, bridgeSupported }) =>
+        web3Environment === Web3Environment.MAINNET &&
+        ((bridgeUI && bridgeSupported) || (!bridgeUI && swapSupported)),
     );
-  }, [supportedChains]);
+  }, [bridgeUI, supportedChains]);
 
   const select = (selectedChainId: string) => {
     const chain = supportedChains.find(
@@ -39,16 +48,66 @@ export const ChainPicker = ({
     }
 
     type === "source" ? setSrcChain(chain) : setDstChain(chain);
-    closeModal();
+    onClose();
   };
 
+  const disabledChains = useMemo(() => {
+    if (!srcChain?.chainId || !srcToken?.address) {
+      return [];
+    }
+
+    if (!bridgeUI) {
+      const disabledForDestination =
+        supportedChains.find((chain) => chain.chainId === srcChain.chainId)
+          ?.disabledForDestination || [];
+
+      if (type === "destination") {
+        return filteredChains
+          ?.filter((chain) => disabledForDestination.includes(chain.chainId))
+          .map(({ chainId }) => chainId);
+      }
+
+      return [];
+    }
+
+    if (type === "destination") {
+      const availableChains =
+        bridgeTokensDictionary?.[srcChain.chainId]?.[srcToken.address];
+      const disabledChains = filteredChains
+        ?.filter((chain) => !availableChains?.[chain.chainId])
+        .map(({ chainId }) => chainId);
+      return disabledChains;
+    } else {
+      if (!dstChain || !dstToken) {
+        return [];
+      }
+
+      const availableChains =
+        bridgeTokensDictionary?.[dstChain.chainId]?.[dstToken.address];
+      const disabledChains = filteredChains
+        ?.filter((chain) => !availableChains?.[chain.chainId])
+        .map(({ chainId }) => chainId);
+      return disabledChains;
+    }
+  }, [
+    bridgeTokensDictionary,
+    bridgeUI,
+    filteredChains,
+    srcChain,
+    srcToken,
+    dstChain,
+    dstToken,
+    type,
+    supportedChains,
+  ]);
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex justify-between">
         <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>
@@ -60,7 +119,12 @@ export const ChainPicker = ({
             style={{ height: "100%" }}
             data={filteredChains}
             itemContent={(_, chain) => (
-              <ChainItem chain={chain} type={type} onClick={select} />
+              <ChainItem
+                chain={chain}
+                type={type}
+                disabledChains={disabledChains}
+                onClick={select}
+              />
             )}
           />
         ) : (