@xswap-link/sdk 0.1.1 → 0.1.3

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -4,10 +4,9 @@ import { DownArrowIcon } from "../icons";
 import { Token, Chain, TokenBalances, TokenPrices } from "@src/models";
 import { TokenPicker } from "./TokenPicker";
 import { weiToHumanReadable } from "@src/utils";
-import { Alert } from "../Alert";
 import { ChainListElement } from "./ChainListElement";
 import { BalanceComponent } from "./BalanceComponent";
-import BigNumber from "bignumber.js";
+import { UsdPrice } from "@src/components/TxConfigForm/UsdPrice";
 
 interface Props {
   amount: string;
@@ -82,10 +81,12 @@ export const SwapPanel: FC<Props> = ({
   );
 
   return (
-    <div className="flex flex-col items-start globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
-      <div className="w-full flex gap-4 items-start justify-between mb-4">
-        <div className="flex flex-col gap-2 overflow-hidden w-1/2">
-          <p className="text-white opacity-60 text-sm font-medium">You pay</p>
+    <div className="flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4">
+      <div className="flex flex-col justify-between gap-2 overflow-hidden w-1/2">
+        <div className="flex flex-col gap-1">
+          <p className="text-white opacity-60 text-xs sm:text-sm font-medium">
+            You pay
+          </p>
           <input
             className="p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis"
             value={amount}
@@ -102,80 +103,41 @@ export const SwapPanel: FC<Props> = ({
             placeholder="0"
           />
         </div>
-        <div className="flex flex-col relative items-end gap-2.5 w-1/2 text-xs">
-          <div
-            ref={buttonRef}
-            className="bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2"
-            onClick={() => setChainListShown((prev) => !prev)}
-          >
-            <img
-              width="16"
-              height="16"
-              src={srcChain?.image}
-              alt={srcChain?.name}
-            />
-            <div>{srcChain?.displayName}</div>
-            <DownArrowIcon />
-          </div>
-
-          {chainListShown && (
-            <ul
-              ref={listRef}
-              className="bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20"
-            >
-              {chainListOptions.map((chain, index) => (
-                <ChainListElement
-                  index={index}
-                  length={supportedChains.length}
-                  setSrcChain={setSrcChain}
-                  setChainListShown={setChainListShown}
-                  chain={chain}
-                />
-              ))}
-            </ul>
-          )}
-          <div
-            className="flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap"
-            onClick={() => {
-              setTokenListShown((state) => !state);
-            }}
-          >
-            <img
-              height={16}
-              width={16}
-              src={srcToken?.image}
-              alt={srcToken?.name}
-            />
-            <div>{srcToken?.symbol}</div>
-            <DownArrowIcon />
-          </div>
-
-          {tokenListShown && (
-            <TokenPicker
-              onCloseClick={() => setTokenListShown(false)}
-              tokens={srcChain?.tokens}
-              signer={signer}
-              selectedToken={srcToken}
-              setSelectedToken={(token) => setSrcToken(token)}
-              balances={balances}
-            />
-          )}
+        <div className="flex items-center text-sm text-[rgba(255,255,255,0.6)]">
+          <UsdPrice
+            prices={prices}
+            token={srcToken}
+            amount={amount}
+            loading={false}
+          />
         </div>
       </div>
+      <div className="flex flex-col relative items-end gap-2.5 w-1/2 text-xs">
+        <div
+          className="flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap"
+          onClick={() => {
+            setTokenListShown((state) => !state);
+          }}
+        >
+          <img
+            height={16}
+            width={16}
+            src={srcToken?.image}
+            alt={srcToken?.name}
+          />
+          <div>{srcToken?.symbol}</div>
+          <DownArrowIcon />
+        </div>
 
-      <div className="flex justify-between items-center w-full text-sm text-[rgba(255,255,255,0.6)] relative">
-        {srcToken ? (
-          prices && prices[srcToken.address] ? (
-            <div>
-              {`$${(Number(amount) * Number(prices[srcToken.address])).toFixed(
-                2,
-              )}`}
-            </div>
-          ) : (
-            <Alert desc="Unknown price" />
-          )
-        ) : (
-          <>$0.00</>
+        {tokenListShown && (
+          <TokenPicker
+            onCloseClick={() => setTokenListShown(false)}
+            tokens={srcChain?.tokens}
+            signer={signer}
+            selectedToken={srcToken}
+            setSelectedToken={(token) => setSrcToken(token)}
+            balances={balances}
+          />
         )}
         <div
           onClick={handleMaxClick}
@@ -185,6 +147,37 @@ export const SwapPanel: FC<Props> = ({
             <BalanceComponent balances={balances} srcToken={srcToken} />
           )}
         </div>
+        <div
+          ref={buttonRef}
+          className="bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2"
+          onClick={() => setChainListShown((prev) => !prev)}
+        >
+          <img
+            width="16"
+            height="16"
+            src={srcChain?.image}
+            alt={srcChain?.name}
+          />
+          <div>{srcChain?.displayName}</div>
+          <DownArrowIcon />
+        </div>
+
+        {chainListShown && (
+          <ul
+            ref={listRef}
+            className="bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20"
+          >
+            {chainListOptions.map((chain, index) => (
+              <ChainListElement
+                index={index}
+                length={supportedChains.length}
+                setSrcChain={setSrcChain}
+                setChainListShown={setChainListShown}
+                chain={chain}
+              />
+            ))}
+          </ul>
+        )}
       </div>
     </div>
   );

package/src/components/TxConfigForm/TokenPicker.tsx

@@ -24,7 +24,7 @@ export const TokenPicker: FC<Props> = ({
 }) => {
   const [searchValue, setSearchValue] = useState("");
 
-  const modalRoot = document.querySelector(".xswap");
+  const modalRoot = document.querySelector("#xswap-modal");
 
   const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
@@ -37,12 +37,24 @@ export const TokenPicker: FC<Props> = ({
   const filteredTokens = useMemo(() => {
     const isMatch = (value: string, searchValue: string) =>
       value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-    return tokens?.filter(
-      (token) =>
-        isMatch(token.symbol, searchValue) ||
-        isMatch(token.name, searchValue) ||
-        token.address === searchValue.toLowerCase(),
-    );
+
+    return tokens
+      ?.filter(
+        (token) =>
+          isMatch(token.symbol, searchValue) ||
+          isMatch(token.name, searchValue) ||
+          token.address === searchValue.toLowerCase(),
+      )
+      .sort((a, b) =>
+        a.priority < b.priority
+          ? 1
+          : balances &&
+            balances[a.address] &&
+            balances[b.address] &&
+            balances[a.address]?.lte(balances[b.address] || "0")
+          ? 1
+          : -1,
+      );
   }, [searchValue, tokens]);
 
   return modalRoot
@@ -94,69 +106,60 @@ export const TokenPicker: FC<Props> = ({
             <div className="h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" />
             <div className="overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col">
               {filteredTokens && filteredTokens.length > 0 ? (
-                filteredTokens
-                  .sort((a, b) =>
-                    balances &&
-                    balances[a.address] &&
-                    balances[b.address] &&
-                    balances[a.address]?.lte(balances[b.address] || "0")
-                      ? 1
-                      : -1,
-                  )
-                  .map((token, index) => (
-                    <div
-                      key={`${index}_${token.address}`}
-                      className={`flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
-                        token.address === selectedToken?.address
-                          ? "bg-[rgb(35,35,35)]"
-                          : ""
-                      }`}
-                      onClick={() => {
-                        setSelectedToken(token);
-                        onCloseClick();
-                      }}
-                    >
-                      {token.image ? (
-                        <img
-                          src={token.image}
-                          alt={token.name}
-                          className="token-picker__all__logo"
-                        />
-                      ) : (
-                        <div className="flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
-                          {token?.symbol.substring(0, 1)}
+                filteredTokens.map((token, index) => (
+                  <div
+                    key={`${index}_${token.address}`}
+                    className={`flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
+                      token.address === selectedToken?.address
+                        ? "bg-[rgb(35,35,35)]"
+                        : ""
+                    }`}
+                    onClick={() => {
+                      setSelectedToken(token);
+                      onCloseClick();
+                    }}
+                  >
+                    {token.image ? (
+                      <img
+                        src={token.image}
+                        alt={token.name}
+                        className="token-picker__all__logo"
+                      />
+                    ) : (
+                      <div className="flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                        {token?.symbol.substring(0, 1)}
+                      </div>
+                    )}
+                    <div className="flex justify-between items-center gap-1 overflow-hidden grow">
+                      <div className="flex flex-col leading-[16px]">
+                        <div className="overflow-hidden whitespace-nowrap text-ellipsis text-[15px]">
+                          {token.name}
                         </div>
-                      )}
-                      <div className="flex justify-between items-center gap-1 overflow-hidden grow">
-                        <div className="flex flex-col leading-[16px]">
-                          <div className="overflow-hidden whitespace-nowrap text-ellipsis text-[15px]">
-                            {token.name}
-                          </div>
-                          <div className="text-[#888] text-[11px]">
-                            {token.symbol}
-                          </div>
+                        <div className="text-[#888] text-[11px]">
+                          {token.symbol}
                         </div>
-                        {signer && (
-                          <>
-                            {balances &&
-                            balances[token.address] &&
-                            token.decimals ? (
-                              <div className="text-xs">
-                                {weiToHumanReadable({
-                                  amount:
-                                    balances[token.address]?.toString() || "0",
-                                  decimals: token.decimals,
-                                  precisionFractionalPlaces: 4,
-                                })}
-                              </div>
-                            ) : (
-                              <Skeleton w="w-12" h="h-3" />
-                            )}
-                          </>
-                        )}
                       </div>
+                      {signer && (
+                        <>
+                          {balances &&
+                          balances[token.address] &&
+                          token.decimals ? (
+                            <div className="text-xs">
+                              {weiToHumanReadable({
+                                amount:
+                                  balances[token.address]?.toString() || "0",
+                                decimals: token.decimals,
+                                precisionFractionalPlaces: 4,
+                              })}
+                            </div>
+                          ) : (
+                            <Skeleton width="w-12" height="h-3" />
+                          )}
+                        </>
+                      )}
                     </div>
-                  ))
+                  </div>
+                ))
               ) : (
                 <div className="mt-4 flex justify-center">
                   <p className="text-sm text-white">No tokens found.</p>

package/src/components/TxConfigForm/TopBar.tsx

@@ -16,9 +16,11 @@ export const TopBar: FC<Props> = ({
   historyTabShown,
 }) => {
   return (
-    <div className="flex w-full justify-between mx-auto pl-4 pr-8 pt-2">
-      <div className="rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap">
-        {signer ? `Connected wallet: ${shortAddress(signer)}` : `Disconnected`}
+    <div className="flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2">
+      <div className="rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap">
+        {signer
+          ? `Connected wallet: ${shortAddress(signer)}`
+          : `Wallet disconnected`}
       </div>
       <div className="flex gap-2">
         {!historyTabShown && (
@@ -31,22 +33,20 @@ export const TopBar: FC<Props> = ({
             </div>
           </div>
         )}
-        {signer && (
-          <div
-            onClick={() => setHistoryTabShown((x) => !x)}
-            className="flex items-center text-sm gap-1 cursor-pointer"
-          >
-            {!historyTabShown ? (
-              <>
-                <div className="w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center">
-                  <HistoryIcon />
-                </div>
-              </>
-            ) : (
-              <div>Back</div>
-            )}
-          </div>
-        )}
+        <div
+          onClick={() => setHistoryTabShown((x) => !x)}
+          className="flex items-center text-sm gap-1 cursor-pointer"
+        >
+          {!historyTabShown ? (
+            <>
+              <div className="w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center">
+                <HistoryIcon />
+              </div>
+            </>
+          ) : (
+            <div>Back</div>
+          )}
+        </div>
       </div>
     </div>
   );

package/src/components/TxConfigForm/UsdPrice.tsx

@@ -0,0 +1,41 @@
+import { Alert, Skeleton } from "@src/components";
+import { Token, TokenPrices } from "@src/models";
+import { FC, useEffect, useMemo, useState } from "react";
+
+type Props = {
+  prices: TokenPrices | undefined;
+  token: Token | undefined;
+  amount: string | undefined;
+  loading: boolean;
+};
+
+export const UsdPrice: FC<Props> = ({
+  prices,
+  token,
+  amount = "0",
+  loading = false,
+}) => {
+  const [usdPrice, setUsdPrice] = useState<string>("0.00");
+
+  useEffect(() => {
+    if (token && prices && prices[token.address]) {
+      setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
+    }
+  }, [token, prices, amount]);
+
+  return (
+    <div className="opacity-60 py-4">
+      {loading ? (
+        <Skeleton width="w-12" height="h-4" />
+      ) : token ? (
+        prices && prices[token.address] ? (
+          <div>{`$${usdPrice}`}</div>
+        ) : (
+          <Alert desc="Unknown price" />
+        )
+      ) : (
+        <>$0.00</>
+      )}
+    </div>
+  );
+};

package/src/components/TxConfigForm/index.tsx

@@ -114,8 +114,7 @@ export const openTxConfigForm = async ({
 let txConfigFormRoot: Root;
 if (typeof document !== "undefined") {
   const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "txConfigFormRoot");
-  xswapElement.classList.add("xswap");
+  xswapElement.setAttribute("id", "xswap-modal");
   document.body.appendChild(xswapElement);
   txConfigFormRoot = createRoot(xswapElement);
 }

package/src/components/TxHistoryButton/index.tsx

@@ -0,0 +1,150 @@
+import { FC, useState } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  CircularProgressIcon,
+} from "../icons";
+import { ArrowUpRightIcon, XSwapLogo } from "../icons";
+import { MonitoredTransaction } from "@src/models";
+
+interface Props {
+  transaction: MonitoredTransaction;
+}
+
+export const TxHistoryButton: FC<Props> = ({ transaction }) => {
+  const {
+    fromChain,
+    fromChainImage,
+    fromToken,
+    fromTokenImage,
+    fromAmount,
+    toChain,
+    toChainImage,
+    isDone,
+    txHash,
+    explorer,
+  } = transaction;
+  const [isWide, setIsWide] = useState(false);
+  return (
+    <div className="flex gap-2" onClick={() => setIsWide((x: boolean) => !x)}>
+      {isWide && (
+        <div
+          className={`flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl bg-gradient-to-r ${
+            isDone
+              ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark"
+              : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"
+          }`}
+        >
+          <div className="flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full">
+            <div className="flex items-center gap-2">
+              <img
+                className="w-5 h-5"
+                src={fromChainImage}
+                alt="source chain"
+              />
+              <div>{fromChain}</div>
+              <div className="w-3.5 h-3.5">
+                <ArrowRightIcon />
+              </div>
+              <img className="w-5 h-5" src={toChainImage} alt="to chain" />
+              <div>{toChain}</div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <div>Sent</div>
+              <div>{fromAmount}</div>
+              <div>{fromToken}</div>
+              <img
+                className="w-5 h-5"
+                src={fromTokenImage}
+                alt="source token"
+              />
+            </div>
+          </div>
+          <a
+            href={explorer}
+            target="_blank"
+            rel="noreferrer"
+            className="no-underline cursor-pointer"
+            aria-label="Show the transaction in the chain explorer"
+          >
+            <div className="w-3.5 h-3.5">
+              <ArrowUpRightIcon />
+            </div>
+          </a>
+        </div>
+      )}
+      <div
+        className={`text-white rounded-xl cursor-pointer bg-gradient-to-r 
+           ${
+             isDone
+               ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark"
+               : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"
+           }`}
+      >
+        <div className="flex gap-2 items-center h-14 w-20 justify-center">
+          <ArrowLeftIcon />
+          <div className="relative flex items-center justify-center w-9 h-9">
+            {isDone ? (
+              <div className="text-x_green w-5 h-5">
+                <CheckIcon />
+              </div>
+            ) : (
+              <>
+                <div className="w-5 h-5">
+                  <XSwapLogo />
+                </div>
+                <div className="absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white">
+                  <CircularProgressIcon />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+let renderedTransactions: MonitoredTransaction[] = [];
+
+export const addTransactionToRenderedTransactions = (
+  transaction: MonitoredTransaction,
+) => {
+  if (!renderedTransactions.some(({ txHash }) => txHash === transaction.txHash))
+    renderedTransactions.push(transaction);
+};
+
+export const removeTransactionFromRenderedTransactions = (txHash: string) => {
+  const filteredRenderedTransactions = renderedTransactions.filter(
+    (item) => item.txHash !== txHash,
+  );
+  renderedTransactions = [...filteredRenderedTransactions];
+};
+
+export const updateTransactionDoneInRenderedTransactions = (txHash: string) => {
+  const transaction = renderedTransactions.find(
+    (item) => item.txHash === txHash,
+  );
+  if (transaction) {
+    transaction.isDone = true;
+  }
+};
+
+const historyElement = document.createElement("div");
+historyElement.setAttribute("id", "xswap-history");
+historyElement.setAttribute(
+  "class",
+  "absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50",
+);
+document.body.appendChild(historyElement);
+const txHistoryButtonRoot = createRoot(historyElement);
+
+export const renderTxHistoryButtons = () => {
+  const buttons = renderedTransactions.map((item) => (
+    <TxHistoryButton key={item.txHash} transaction={item} />
+  ));
+  txHistoryButtonRoot.render(buttons);
+};

package/src/components/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,16 @@
+export const ArrowLeftIcon = () => {
+  return (
+    <svg
+      width="10"
+      height="16"
+      viewBox="0 0 10 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.5 8L8.13251 15.5L9.5 14.1562L3.20318 8L9.4682 1.84375L8.10071 0.5L0.5 8Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

package/src/components/icons/ChevronUpIcon.tsx

@@ -1,11 +1,6 @@
 export const ChevronUpIcon = () => {
   return (
-    <svg
-      height="12"
-      width="12"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
       <path
         fill="currentColor"
         d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"

package/src/components/icons/CircularProgressIcon.tsx

@@ -1,24 +1,22 @@
 export const CircularProgressIcon = () => {
   return (
     <svg
-      className="animate-spin -ml-1 mr-3 h-10 w-10 text-white"
-      xmlns="http://www.w3.org/2000/svg"
+      className="animate-spin-slow text-white"
+      width="33"
+      height="33"
+      viewBox="0 0 33 33"
       fill="none"
-      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      ></circle>
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      ></path>
+        cx="16.5"
+        cy="16.5"
+        r="15.5"
+        stroke="white"
+        strokeOpacity="0.2"
+        strokeWidth="2"
+      />
+      <path d="M1 16C1 7.71573 7.71573 1 16 1" stroke="white" strokeWidth="2" />
     </svg>
   );
 };