@xswap-link/sdk 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.7.0",
+  "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/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

@@ -24,6 +24,7 @@ export const SwapButton = () => {
   const { integrationConfig } = useSwapContext();
 
   const {
+    bridgeUI,
     error,
     srcChain,
     dstChain,
@@ -199,13 +200,14 @@ export const SwapButton = () => {
     }
 
     return {
-      text: "Swap",
+      text: bridgeUI ? "Bridge" : "Swap",
       fn: async () => {
         showSwapConfirmationView();
       },
       disabled: false,
     };
   }, [
+    bridgeUI,
     srcChainId,
     dstChainId,
     srcTokenAddress,

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,4 +1,5 @@
 import { CloseIcon } from "@src/assets/icons";
+import { useSwapContext } from "@src/context";
 import { Chain, Web3Environment } from "@src/models";
 import { useMemo } from "react";
 import { Virtuoso } from "react-virtuoso";
@@ -7,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 {
+    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(
@@ -41,6 +51,56 @@ export const ChainPicker = ({
     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">
@@ -59,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}
+              />
             )}
           />
         ) : (

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

@@ -1,7 +1,7 @@
 import { ArrowDownIcon } from "@src/assets/icons";
 import { Modal } from "@src/components/Modal";
 import { useSwapContext } from "@src/context";
-import { Chain } from "@src/models";
+import { Chain, Token } from "@src/models";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAccount } from "wagmi";
 import { SwapPanelType } from "../../../SwapView";
@@ -10,9 +10,10 @@ import { ChainPicker } from "./ChainPicker";
 type Props = {
   chain: Chain | undefined;
   type: SwapPanelType;
+  className?: string;
 };
 
-export const ChainPanel = ({ chain, type }: Props) => {
+export const ChainPanel = ({ chain, type, className }: Props) => {
   const {
     supportedChains,
     srcChain,
@@ -22,20 +23,28 @@ export const ChainPanel = ({ chain, type }: Props) => {
     setSrcToken,
     dstToken,
     setDstToken,
-    srcChainProvided,
-    dstChainProvided,
+    srcChainLocked,
+    dstChainLocked,
+    integrationConfig,
+    bridgeUI,
+    bridgeTokensDictionary,
   } = useSwapContext();
 
   const { chainId } = useAccount();
 
-  const projectSelectedDestinationChain = useMemo(
-    () => type === "destination" && dstChainProvided,
-    [type, dstChainProvided],
+  const projectLockedDestinationChain = useMemo(
+    () => type === "destination" && dstChainLocked,
+    [type, dstChainLocked],
+  );
+
+  const projectLockedSourceChain = useMemo(
+    () => type === "source" && srcChainLocked,
+    [type, srcChainLocked],
   );
 
   // select chain from user wallet
   useEffect(() => {
-    if (!chainId || srcChainProvided) return;
+    if (!chainId || integrationConfig.srcChainId) return;
 
     const userChainFromWallet = supportedChains.find(
       (chain) => chain.chainId === String(chainId),
@@ -54,13 +63,57 @@ export const ChainPanel = ({ chain, type }: Props) => {
 
   const handleSrcChainChange = useCallback(
     (chain: Chain) => {
-      const newSrcToken =
-        chain.tokens.find((token) => token.symbol === srcToken?.symbol) ||
-        chain.tokens.find((token) => token.symbol === chain.tokenSymbol);
+      let newSrcToken: Token | undefined = undefined;
+
+      if (bridgeUI) {
+        const bridgeableTokensAddresses = Object.keys(
+          bridgeTokensDictionary?.[chain.chainId] || {},
+        ).map((address) => address.toLowerCase());
+
+        // Attempt to use the same token on a new chain matching by symbol.
+        newSrcToken = chain.tokens.find(
+          (token) =>
+            token.symbol === srcToken?.symbol &&
+            bridgeableTokensAddresses.includes(token.address.toLowerCase()),
+        );
+
+        if (!newSrcToken) {
+          // The token from the previous chain is not bridgeable on the new chain.
+          // We will use the first available bridgeable token on the new chain.
+
+          const firstAvailableBridgeableTokenAddress =
+            bridgeableTokensAddresses[0];
+
+          if (!firstAvailableBridgeableTokenAddress) {
+            throw new Error(
+              `Couldn't find any available bridgeable token on the chain ${chain.chainId}, but bridging is available`,
+            );
+          }
+
+          newSrcToken = chain.tokens.find(
+            (token) =>
+              token.address.toLowerCase() ===
+              firstAvailableBridgeableTokenAddress.toLowerCase(),
+          );
+
+          if (!newSrcToken) {
+            throw new Error(
+              `Found bridgeable token (${firstAvailableBridgeableTokenAddress}) on the chain ${chain.chainId}, but token was not defined in chains collection`,
+            );
+          }
+        }
+      } else {
+        newSrcToken =
+          // Attempt to use the same token on a new chain.
+          chain.tokens.find((token) => token.symbol === srcToken?.symbol) ||
+          // Otherwise, use the default token on this chain.
+          chain.tokens.find((token) => token.symbol === chain.tokenSymbol);
+      }
+
       setSrcChain(chain);
       setSrcToken(newSrcToken);
     },
-    [setSrcChain, setSrcToken, srcToken],
+    [setSrcChain, setSrcToken, srcToken, bridgeTokensDictionary, bridgeUI],
   );
 
   const handleDstChainChange = useCallback(
@@ -80,7 +133,6 @@ export const ChainPanel = ({ chain, type }: Props) => {
         <Modal onClose={() => setChainPickerModalOpen(false)}>
           <ChainPicker
             type={type}
-            supportedChains={supportedChains}
             setSrcChain={handleSrcChainChange}
             setDstChain={handleDstChainChange}
             onClose={() => setChainPickerModalOpen(false)}
@@ -90,8 +142,9 @@ export const ChainPanel = ({ chain, type }: Props) => {
 
       <button
         type="button"
-        disabled={projectSelectedDestinationChain}
+        disabled={projectLockedDestinationChain || projectLockedSourceChain}
         onClick={() => setChainPickerModalOpen(true)}
+        className={`${className || ""}`}
       >
         <div className="flex justify-between items-center p-4 gap-8">
           <div className="flex flex-col font-medium items-start">
@@ -102,7 +155,7 @@ export const ChainPanel = ({ chain, type }: Props) => {
               {chain ? chain.displayName : "Select"}
             </p>
           </div>
-          {!projectSelectedDestinationChain && (
+          {!projectLockedDestinationChain && !projectLockedSourceChain && (
             <div className="w-4 h-2 fill-t_text_primary">
               <ArrowDownIcon />
             </div>

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

@@ -49,7 +49,8 @@ export const TokenPicker = ({
   const currentRouteRequestNonce = useRef<number>(0);
   const tokenSearchRef = useRef<HTMLInputElement | null>(null);
 
-  const { supportedChains, findTokenDataByAddressAndChain } = useSwapContext();
+  const { bridgeUI, supportedChains, findTokenDataByAddressAndChain } =
+    useSwapContext();
   const evmContractApi = useEvmContractApi();
 
   useEffect(() => {
@@ -131,6 +132,7 @@ export const TokenPicker = ({
 
   useEffect(() => {
     if (
+      !bridgeUI &&
       isETHAddressValid(searchValue) &&
       !findTokenDataByAddressAndChain(searchValue.toLowerCase(), chain.chainId)
     ) {
@@ -139,7 +141,13 @@ export const TokenPicker = ({
       setLoadingCustomTokenData(false);
       setCustomTokenData(null);
     }
-  }, [searchValue, getCustomTokenData, findTokenDataByAddressAndChain, chain]);
+  }, [
+    bridgeUI,
+    searchValue,
+    getCustomTokenData,
+    findTokenDataByAddressAndChain,
+    chain,
+  ]);
 
   useEffect(() => {
     setSearchValue("");

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

@@ -10,10 +10,12 @@ type Props = {
   chain: Chain | undefined;
   token: Token | undefined;
   type: SwapPanelType;
+  className?: string;
 };
 
-export const TokenPanel = ({ chain, token, type }: Props) => {
+export const TokenPanel = ({ chain, token, type, className }: Props) => {
   const {
+    bridgeUI,
     srcChainTokensOptions,
     srcChainOtherTokensOptions,
     dstChainTokensOptions,
@@ -23,12 +25,18 @@ export const TokenPanel = ({ chain, token, type }: Props) => {
     supportedChains,
     setDstToken,
     setDstChain,
-    dstTokenProvided,
+    dstTokenLocked,
+    srcTokenLocked,
   } = useSwapContext();
 
-  const projectSelectedDestinationToken = useMemo(
-    () => type === "destination" && dstTokenProvided,
-    [type, dstTokenProvided],
+  const integratorLockedDestinationToken = useMemo(
+    () => type === "destination" && dstTokenLocked,
+    [type, dstTokenLocked],
+  );
+
+  const integratorLockedSourceToken = useMemo(
+    () => type === "source" && srcTokenLocked,
+    [type, srcTokenLocked],
   );
 
   const [tokenPickerModalOpen, setTokenPickerModalOpen] = useState(false);
@@ -38,6 +46,11 @@ export const TokenPanel = ({ chain, token, type }: Props) => {
     [dstChainTokensOptions, srcChainTokensOptions, type],
   );
 
+  const pickerDisabled = useMemo(
+    () => type === "destination" && bridgeUI,
+    [bridgeUI, type],
+  );
+
   const otherTokensWithBalances = useMemo(
     () =>
       type === "source"
@@ -80,10 +93,15 @@ export const TokenPanel = ({ chain, token, type }: Props) => {
 
       <button
         type="button"
-        disabled={projectSelectedDestinationToken}
+        disabled={
+          pickerDisabled ||
+          integratorLockedDestinationToken ||
+          integratorLockedSourceToken
+        }
         onClick={() => {
           setTokenPickerModalOpen(true);
         }}
+        className={`${className || ""}`}
       >
         <div className="flex justify-between items-center p-4 gap-8 border-r border-solid border-t_text_primary border-opacity-10">
           <div className="flex gap-2 items-center">
@@ -99,11 +117,13 @@ export const TokenPanel = ({ chain, token, type }: Props) => {
               </p>
             </div>
           </div>
-          {!projectSelectedDestinationToken && (
-            <div className="w-4 h-2 fill-t_text_primary">
-              <ArrowDownIcon />
-            </div>
-          )}
+          {!pickerDisabled &&
+            !integratorLockedDestinationToken &&
+            !integratorLockedSourceToken && (
+              <div className="w-4 h-2 fill-t_text_primary">
+                <ArrowDownIcon />
+              </div>
+            )}
         </div>
       </button>
     </>

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

@@ -24,9 +24,14 @@ export const SwapPanel = ({ type }: Props) => {
 
   return (
     <div className="flex flex-col x-border rounded-xl bg-t_bg_tertiary bg-opacity-5">
-      <div className="grid grid-cols-2 border-b border-solid border-t_text_primary border-opacity-10">
-        <TokenPanel chain={chain} token={token} type={type} />
-        <ChainPanel chain={chain} type={type} />
+      <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
+        <TokenPanel
+          chain={chain}
+          token={token}
+          type={type}
+          className="w-full flex-grow"
+        />
+        <ChainPanel chain={chain} type={type} className="w-full max-w-[36%]" />
       </div>
       <div
         className={`flex justify-between ${