@xswap-link/sdk 0.6.10 → 0.8.0

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

@@ -1,19 +1,19 @@
 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 { Chain, Token } from "@src/models";
+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;
   type: SwapPanelType;
+  className?: string;
 };
 
-export const ChainPanel = ({ chain, type }: Props) => {
+export const ChainPanel = ({ chain, type, className }: Props) => {
   const {
     supportedChains,
     srcChain,
@@ -23,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),
@@ -51,17 +59,61 @@ 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) => {
-      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(
@@ -77,19 +129,22 @@ export const ChainPanel = ({ chain, type }: Props) => {
 
   return (
     <>
+      {chainPickerModalOpen && (
+        <Modal onClose={() => setChainPickerModalOpen(false)}>
+          <ChainPicker
+            type={type}
+            setSrcChain={handleSrcChainChange}
+            setDstChain={handleDstChainChange}
+            onClose={() => setChainPickerModalOpen(false)}
+          />
+        </Modal>
+      )}
+
       <button
         type="button"
-        disabled={projectSelectedDestinationChain}
-        onClick={() =>
-          openModal(
-            <ChainPicker
-              type={type}
-              supportedChains={supportedChains}
-              setSrcChain={handleSrcChainChange}
-              setDstChain={handleDstChainChange}
-            />,
-          )
-        }
+        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">
@@ -100,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/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";
@@ -50,9 +49,9 @@ 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();
-  const { closeModal } = useModal();
 
   useEffect(() => {
     setShowImportWarning(false);
@@ -133,6 +132,7 @@ export const TokenPicker = ({
 
   useEffect(() => {
     if (
+      !bridgeUI &&
       isETHAddressValid(searchValue) &&
       !findTokenDataByAddressAndChain(searchValue.toLowerCase(), chain.chainId)
     ) {
@@ -141,7 +141,13 @@ export const TokenPicker = ({
       setLoadingCustomTokenData(false);
       setCustomTokenData(null);
     }
-  }, [searchValue, getCustomTokenData, findTokenDataByAddressAndChain, chain]);
+  }, [
+    bridgeUI,
+    searchValue,
+    getCustomTokenData,
+    findTokenDataByAddressAndChain,
+    chain,
+  ]);
 
   useEffect(() => {
     setSearchValue("");
@@ -217,7 +223,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 +307,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";
@@ -11,12 +10,12 @@ type Props = {
   chain: Chain | undefined;
   token: Token | undefined;
   type: SwapPanelType;
+  className?: string;
 };
 
-export const TokenPanel = ({ chain, token, type }: Props) => {
-  const [open, setOpen] = useState(false);
-
+export const TokenPanel = ({ chain, token, type, className }: Props) => {
   const {
+    bridgeUI,
     srcChainTokensOptions,
     srcChainOtherTokensOptions,
     dstChainTokensOptions,
@@ -26,21 +25,32 @@ 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 { openModal, closeModal } = useModal();
+  const [tokenPickerModalOpen, setTokenPickerModalOpen] = useState(false);
 
   const tokensWithBalances = useMemo(
     () => (type === "source" ? srcChainTokensOptions : dstChainTokensOptions),
     [dstChainTokensOptions, srcChainTokensOptions, type],
   );
 
+  const pickerDisabled = useMemo(
+    () => type === "destination" && bridgeUI,
+    [bridgeUI, type],
+  );
+
   const otherTokensWithBalances = useMemo(
     () =>
       type === "source"
@@ -61,28 +71,37 @@ 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}
+        disabled={
+          pickerDisabled ||
+          integratorLockedDestinationToken ||
+          integratorLockedSourceToken
+        }
         onClick={() => {
-          openModal(
-            <TokenPicker
-              type={type}
-              chain={chain!}
-              tokens={tokensWithBalances}
-              otherTokens={otherTokensWithBalances}
-              selectedTokenAddress={token?.address}
-              onSelect={onTokenSelect}
-              isOpen={open}
-              setModalOpen={setOpen}
-            />,
-          );
+          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">
@@ -98,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 ${

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

@@ -1,16 +1,16 @@
+import { ReorderButton } from "../ReorderButton/ReorderButton";
 import { FeesPanel } from "./FeesPanel";
 import { SwapButton } from "./SwapButton";
 import { SwapPanel } from "./SwapPanel";
-import { ArrowIcon } from "@src/components/Swap/SwapView/ConfirmationView/TxOverview/ArrowIcon";
 
 export type SwapPanelType = "source" | "destination";
 
 export const SwapView = () => {
   return (
     <div className="flex flex-col gap-2 fill-t_text_primary">
-      <div className="relative flex flex-col gap-5">
+      <div className="flex flex-col gap-5">
         <SwapPanel type="source" />
-        <ArrowIcon />
+        <ReorderButton />
         <SwapPanel type="destination" />
       </div>
       <FeesPanel />

package/src/components/Swap/index.tsx

@@ -25,7 +25,7 @@ export const Swap = ({ onClose }: Props) => {
 
   return (
     <div
-      className={`flex flex-col gap-5 p-4 mx-auto text-t_text_primary bg-t_bg_primary rounded-3xl`}
+      className={`relative flex flex-col gap-5 p-4 text-t_text_primary bg-t_bg_primary rounded-3xl flex-1`}
     >
       <Header onClose={onClose} />
       {view}

package/src/components/TxConfigForm/index.tsx

@@ -5,14 +5,14 @@ import {
   SwapProvider,
   TransactionProvider,
   TxUIWrapper,
+  useHistory,
 } 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,
@@ -24,7 +24,6 @@ export type TxConfigFormPayload = Omit<
   srcTokenAddr?: string;
   dstDisplayTokenAddr?: string;
   supportedChains: Chain[];
-  defaultWalletPicker?: boolean;
 };
 
 const queryClient = new QueryClient();
@@ -45,6 +44,27 @@ const WagmiReload: FC = () => {
   return <></>;
 };
 
+const PendingTransactionsEmitter: FC<{
+  onPendingTransactionsChange: ModalIntegrationPayload["onPendingTransactionsChange"];
+}> = ({ onPendingTransactionsChange }) => {
+  const { history } = useHistory();
+
+  const pendingTransactions = useMemo(
+    () => history.filter((entry) => entry.status === "IN_PROGRESS"),
+    [history],
+  );
+
+  useEffect(() => {
+    if (onPendingTransactionsChange) {
+      onPendingTransactionsChange(pendingTransactions);
+    } else if (window.xPayOnPendingTransactionsChange) {
+      window.xPayOnPendingTransactionsChange(pendingTransactions);
+    }
+  }, [onPendingTransactionsChange, pendingTransactions]);
+
+  return <></>;
+};
+
 export const TxConfigForm = ({
   integratorId,
   dstChainId,
@@ -61,6 +81,16 @@ export const TxConfigForm = ({
   lightTheme,
   defaultWalletPicker,
   styles,
+  onPendingTransactionsChange,
+  dstTokenLocked,
+  dstChainLocked,
+  srcTokenLocked,
+  srcChainLocked,
+  onDstTokenChange,
+  onDstChainChange,
+  onSrcTokenChange,
+  onSrcChainChange,
+  bridge,
 }: TxConfigFormPayload &
   (
     | {
@@ -103,6 +133,9 @@ export const TxConfigForm = ({
         <QueryClientProvider client={queryClient}>
           <WagmiReload />
           <HistoryProvider>
+            <PendingTransactionsEmitter
+              onPendingTransactionsChange={onPendingTransactionsChange}
+            />
             <SwapProvider
               integrationConfig={{
                 integratorId,
@@ -114,6 +147,15 @@ export const TxConfigForm = ({
                 desc,
                 dstDisplayTokenAddr,
                 defaultWalletPicker,
+                dstTokenLocked,
+                dstChainLocked,
+                srcTokenLocked,
+                srcChainLocked,
+                onDstTokenChange,
+                onDstChainChange,
+                onSrcTokenChange,
+                onSrcChainChange,
+                bridge,
               }}
               supportedChains={supportedChains}
               wagmiConfig={wagmiConfig}
@@ -121,24 +163,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 flex-col 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-[532px] 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-[532px] w-full flex flex-col">
+                      <Swap onSubmit={() => {}} onClose={() => {}} />
+                      <PoweredBy />
+                    </div>
+                  )}
                 </TxUIWrapper>
               </TransactionProvider>
             </SwapProvider>
@@ -162,6 +202,11 @@ export const openTxConfigForm = async ({
   lightTheme,
   defaultWalletPicker,
   styles,
+  onPendingTransactionsChange,
+  dstTokenLocked,
+  dstChainLocked,
+  srcTokenLocked,
+  srcChainLocked,
 }: TxConfigFormPayload): Promise<Route> => {
   try {
     if (xpayRoot === null) {
@@ -200,6 +245,11 @@ export const openTxConfigForm = async ({
           }}
           overlay={true}
           defaultWalletPicker={defaultWalletPicker}
+          onPendingTransactionsChange={onPendingTransactionsChange}
+          dstTokenLocked={dstTokenLocked}
+          dstChainLocked={dstChainLocked}
+          srcTokenLocked={srcTokenLocked}
+          srcChainLocked={srcChainLocked}
         />,
       );
     });