@xswap-link/sdk 0.1.0 → 0.1.2

package/src/components/TxConfigForm/History.tsx

@@ -1,129 +1,65 @@
 import { Transaction, TransactionStatus, Chain } from "@src/models";
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { getHistory } from "@src/services";
-import { FALLBACK_CROSSCHAIN_ESTIMATION_TIME } from "@src/constants";
+import { DELIVERY_TIME, EXPRESS_DELIVERY_TIME } from "@src/constants";
 import BigNumberJS from "bignumber.js";
 import { HistoryCard } from "./HistoryCard";
 import { CircularProgressIcon } from "../icons";
 
-const PENDING_TXS_LOCAL_STORAGE_KEY = "pending_transactions";
-
-type LocalHistory = { [walletAddress: string]: Transaction[] };
-
 interface Props {
-  signer: string;
+  signer: string | undefined;
   supportedChains: Chain[];
 }
 
 export const History: FC<Props> = ({ signer, supportedChains }) => {
-  const [mappedHistory, setMappedHistory] = useState<Transaction[]>();
-  // const [latestHistory, setLatestHistory] = useState<Transaction[]>();
+  const [fetchedHistory, setFetchedHistory] = useState<Transaction[]>();
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
 
-  const getLocalHistory = () => {
-    return JSON.parse(
-      localStorage.getItem(PENDING_TXS_LOCAL_STORAGE_KEY) || "{}",
-    ) as LocalHistory;
-  };
-
-  const setLocalHistory = (data: LocalHistory) => {
-    localStorage.setItem(PENDING_TXS_LOCAL_STORAGE_KEY, JSON.stringify(data));
-  };
-
   const fetchHistory = useCallback(async () => {
-    const downloadedHistory = await getHistory({ walletAddress: signer });
-    const fetchedTransactions: Transaction[] = [];
-    if (downloadedHistory) {
-      for (const entry of downloadedHistory.history) {
-        if (!entry.source) {
-          continue;
-        }
-        let status: TransactionStatus;
-        if (entry.failed) status = "REVERTED";
-        if (!!entry.target) {
-          status = "DONE";
-        } else {
-          status = "IN_PROGRESS";
-        }
-        const timestampMs = new Date(entry.source?.blockTime).getTime();
-
-        let estimatedDeliveryTimestamp = FALLBACK_CROSSCHAIN_ESTIMATION_TIME;
-
-        if (new BigNumberJS(entry.source.valueForInstantCcipRecieve).gt(0)) {
-          estimatedDeliveryTimestamp = timestampMs + 30 * 1000;
-        } else {
-          const blockchainEstimate = timestampMs + 30 * 1000 * 60;
-
-          if (blockchainEstimate) {
-            estimatedDeliveryTimestamp = blockchainEstimate;
-          }
-        }
-
-        fetchedTransactions.push({
-          hash: entry.source.transactionHash,
-          timestamp: timestampMs / 1000,
-          sourceChainId: entry.source.blockchainId,
-          targetChainId: entry.source.targetBlockchainId,
-          amountWei: entry.source.tokenAmount,
-          tokenAddress: entry.source.tokenAddress,
-          tokenOutAddress:
-            entry.target?.tokenAddress || entry.source.tokenOutAddress,
-          tokenOutAmount:
-            entry.target?.tokenAmount || entry.source.estimatedAmountOut,
-          estimatedDeliveryTimestamp,
-          status,
-        });
-      }
-
-      const txHashToTxFromAPI: Record<string, Transaction> = {};
-      for (const transaction of fetchedTransactions) {
-        txHashToTxFromAPI[transaction.hash] = transaction;
-      }
-
-      const localHistory = getLocalHistory();
-      const newLocalHistory: Record<string, Transaction[]> = {};
-
-      for (const [walletAddress, transactions] of Object.entries(
-        localHistory,
-      )) {
-        if (walletAddress.toLowerCase() !== signer.toLowerCase()) {
-          continue;
-        }
-        const newLocalHistoryForWallet: Transaction[] = [];
-
-        for (const transaction of transactions) {
-          if (!txHashToTxFromAPI[transaction.hash]) {
-            // localStorage has fresher data.
-            fetchedTransactions.push(transaction);
-            newLocalHistoryForWallet.push(transaction);
+    if (signer) {
+      const downloadedHistory = await getHistory({ walletAddress: signer });
+      const fetchedTransactions: Transaction[] = [];
+      if (downloadedHistory) {
+        for (const entry of downloadedHistory.history) {
+          if (!entry.source) {
             continue;
           }
-
-          if (
-            txHashToTxFromAPI[transaction.hash] &&
-            transaction.status === "DONE" &&
-            txHashToTxFromAPI[transaction.hash]?.status === "IN_PROGRESS"
-          ) {
-            // If we know on the frontend that the tx is done we should update backend result
-            txHashToTxFromAPI[transaction.hash]!.status = "DONE";
+          let status: TransactionStatus;
+          if (entry.failed) status = "REVERTED";
+          if (!!entry.target) {
+            status = "DONE";
+          } else {
+            status = "IN_PROGRESS";
           }
 
-          if (
-            txHashToTxFromAPI[transaction.hash]?.status === "DONE" ||
-            txHashToTxFromAPI[transaction.hash]?.status === "REVERTED"
-          ) {
-            // API has the same or fresher data.
-            continue;
-          }
+          const blockTimestampMs = new Date(entry.source.blockTime).getTime();
+          const estimatedDeliveryTimestamp = new BigNumberJS(
+            entry.source.valueForInstantCcipRecieve,
+          ).gt(0)
+            ? blockTimestampMs + EXPRESS_DELIVERY_TIME
+            : blockTimestampMs + DELIVERY_TIME;
+
+          fetchedTransactions.push({
+            hash: entry.source.transactionHash,
+            timestamp: blockTimestampMs / 1000,
+            sourceChainId: entry.source.blockchainId,
+            targetChainId: entry.source.targetBlockchainId,
+            amountWei: entry.source.tokenAmount,
+            tokenAddress: entry.source.tokenAddress,
+            tokenOutAddress:
+              entry.target?.tokenAddress || entry.source.tokenOutAddress,
+            tokenOutAmount:
+              entry.target?.tokenAmount || entry.source.estimatedAmountOut,
+            estimatedDeliveryTimestamp,
+            status,
+          });
         }
 
-        newLocalHistory[walletAddress.toLowerCase()] = newLocalHistoryForWallet;
+        setFetchedHistory(
+          fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp),
+        );
+        setHistoryLoadedOnce(true);
       }
-      setLocalHistory(newLocalHistory);
-      setMappedHistory(
-        fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp),
-      );
-      setHistoryLoadedOnce(true);
     }
   }, [signer, getHistory]);
 
@@ -135,25 +71,34 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
 
+  if (!signer)
+    return (
+      <div className="flex items-center justify-center w-full h-[30vh]">
+        Connect a wallet to browse history
+      </div>
+    );
+
   return (
-    <div className="w-full h-[50vh] overflow-scroll overflow-x-hidden">
-      {mappedHistory?.length === 0 && historyLoadedOnce && (
-        <div className="w-full text-center py-4 px-0 text-[rgb(158,158,158)]">
-          Your history is empty...
-        </div>
-      )}
-      {!mappedHistory && !historyLoadedOnce && (
-        <div className="flex w-full h-full items-center justify-center">
-          <CircularProgressIcon />
-        </div>
-      )}
-      {mappedHistory?.map((transaction, index) => (
-        <HistoryCard
-          key={index}
-          transaction={transaction}
-          supportedChains={supportedChains}
-        />
-      ))}
+    <div className="flex items-center justify-center w-full">
+      <div className="w-full h-[30vh] overflow-scroll overflow-x-hidden">
+        {fetchedHistory?.length === 0 && historyLoadedOnce && (
+          <div className="w-full text-center py-4 px-0 text-[rgb(158,158,158)]">
+            Your history is empty...
+          </div>
+        )}
+        {!fetchedHistory && !historyLoadedOnce && (
+          <div className="flex w-full h-full items-center justify-center">
+            <CircularProgressIcon />
+          </div>
+        )}
+        {fetchedHistory?.map((transaction, index) => (
+          <HistoryCard
+            key={index}
+            transaction={transaction}
+            supportedChains={supportedChains}
+          />
+        ))}
+      </div>
     </div>
   );
 };

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -9,6 +9,7 @@ import {
   HourGlassIcon,
   XMarkIcon,
 } from "@src/components/icons";
+import { MINIMUM_DISPLAYED_TOKEN_AMOUNT } from "@src/constants";
 
 interface Props {
   transaction: Transaction;
@@ -158,8 +159,8 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
         <div className="flex items-center mb-2 last:mb-0">
           <div className="flex flex-1 items-center flex-wrap text-xs text-[rgba(255,255,255,0.6)]">
             <div className="flex items-center">
-              {Number(transferredAmount) < 0.0001
-                ? "<0.0001"
+              {Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT
+                ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}`
                 : transferredAmount}
               <div className="text-xs ml-1 text-rgba(255,255,255,0.6)">
                 {tokenData?.symbol}

package/src/components/TxConfigForm/Settings.tsx

@@ -0,0 +1,137 @@
+import { CloseIcon, InfoIcon, PercentageIcon } from "../icons";
+import { SLIPPAGE_PRESETS } from "@src/constants";
+import { FC, useState, useEffect } from "react";
+import { NUMBER_INPUT_REGEX } from "@src/constants";
+
+interface Props {
+  slippage: string;
+  setSlippage: React.Dispatch<React.SetStateAction<string>>;
+  setSettingsShown: React.Dispatch<React.SetStateAction<boolean>>;
+  expressChecked: boolean;
+  setExpressChecked: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Settings: FC<Props> = ({
+  setSlippage,
+  setSettingsShown,
+  slippage,
+  expressChecked,
+  setExpressChecked,
+}) => {
+  const [slippageActivePresetIndex, setSlippageActivePresetIndex] = useState(1);
+  const [usingSlippageInput, setUsingSlippageInput] = useState(false);
+
+  useEffect(() => {
+    if (!usingSlippageInput) {
+      setSlippage(
+        SLIPPAGE_PRESETS[slippageActivePresetIndex]?.toString() || "1.5",
+      );
+    }
+  }, [slippageActivePresetIndex, usingSlippageInput]);
+
+  return (
+    <div className="absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl">
+      <div className="flex flex-col gap-4 justify-between">
+        <div className="flex justify-between">
+          <div className="text-base">Settings</div>
+          <div
+            className="cursor-pointer"
+            onClick={() => setSettingsShown(false)}
+          >
+            <CloseIcon />
+          </div>
+        </div>
+        <div>
+          <div className="flex gap-2 items-center">
+            <div className="text-sm text-[rgba(255,255,255,0.6)]">
+              Express delivery
+            </div>
+            <div>
+              <span
+                className="inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer"
+                onClick={() => {
+                  setExpressChecked((x) => !x);
+                }}
+              >
+                <span className="h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]"></span>
+                <span
+                  className={`transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
+          ${expressChecked ? "translate-x-[12px] bg-x_blue" : "bg-white"} `}
+                ></span>
+              </span>
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="min-w-[26px] min-h-[26px] text-[#ffa726]">
+              <InfoIcon />
+            </div>
+            <div className="text-xs text-left">
+              Express delivery is a special feature of XSwap that reduces
+              transaction time across chains to around 30 seconds. It is
+              currently available for swaps below a value of $ 1000 USD.
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2 ">
+          <div className=" text-[rgba(255,255,255,0.6)] text-sm">Slippage</div>
+          <div className="flex gap-2">
+            <div className="flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl">
+              {SLIPPAGE_PRESETS.map((preset, index) => (
+                <div
+                  key={index}
+                  className={`transition-all cursor-pointer block rounded-lg p-2 border-none text-sm leading-[10px] ${
+                    index === slippageActivePresetIndex && !usingSlippageInput
+                      ? "text-white"
+                      : "text-[rgba(255,255,255,0.2)]"
+                  } ${
+                    index === slippageActivePresetIndex && !usingSlippageInput
+                      ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]"
+                      : ""
+                  }`}
+                  onClick={() => {
+                    setUsingSlippageInput(false);
+                    setSlippageActivePresetIndex(index);
+                  }}
+                >
+                  {`${preset.toFixed(1)}%`}
+                </div>
+              ))}
+            </div>
+            <div className="bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center">
+              <input
+                className="text-white border-none bg-[rgba(39,39,39,1)] w-10 placeholder:text-[rgba(255,255,255,0.2)] focus:outline-none text-sm leading-none"
+                placeholder="1.5"
+                value={usingSlippageInput ? slippage : ""}
+                onChange={(e) => {
+                  if (e.target.value.length > 0) {
+                    if (NUMBER_INPUT_REGEX.test(e.target.value)) {
+                      setUsingSlippageInput(true);
+                      setSlippage(e.target.value.replace(/,/g, "."));
+                    }
+                  } else {
+                    setUsingSlippageInput(false);
+                    setSlippageActivePresetIndex(1);
+                  }
+                }}
+              />
+              <PercentageIcon />
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <div className="min-w-[26px] min-h-[26px] text-[#ffa726]">
+              <InfoIcon />
+            </div>
+            <div className="text-xs text-left">
+              Slippage is the price variation you are willing to accept in the
+              event that the price of the trade changes while it is processing.
+              <br /> <br />
+              If the trade fails due to too-low slippage, you will receive USDC
+              on the destination chain.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/Summary.tsx

@@ -0,0 +1,57 @@
+import { FC } from "react";
+import { weiToHumanReadable } from "@src/utils";
+import { Chain, Route, Token } from "@src/models";
+import { ArrowDownIcon } from "../icons";
+
+interface Props {
+  isGettingRoute: boolean;
+  amount: string;
+  route: Route | undefined;
+  dstToken: Token | undefined;
+  dstChain: Chain | undefined;
+}
+
+export const Summary: FC<Props> = ({
+  isGettingRoute,
+  amount,
+  route,
+  dstToken,
+  dstChain,
+}) => {
+  return (
+    <div className="flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative">
+      <div className="flex flex-col gap-2">
+        <p className="text-[rgba(255,255,255,0.6)] text-sm">You receive</p>
+        {isGettingRoute && amount.length > 0 ? (
+          <div className="bg-current rounded animate-pulse w-[190px] h-7" />
+        ) : (
+          <div className="flex gap-2 items-center text-white text-2xl">
+            {weiToHumanReadable({
+              amount: route?.estAmountOut || "0",
+              decimals: dstToken?.decimals || 18,
+              precisionFractionalPlaces: 5,
+            })}
+            <div className="w-6 h-6">
+              <img src={dstToken?.image} alt={dstToken?.name} />
+            </div>
+            <p>{dstToken?.symbol}</p>
+          </div>
+        )}
+      </div>
+      <div className="flex flex-col gap-1 text-sm">
+        <p className="text-[rgba(255,255,255,0.6)] text-right">on chain:</p>
+        <div className="flex gap-1 text-white">
+          <div className="w-4 h-4">
+            <img src={dstChain?.image} alt={dstChain?.name} />
+          </div>
+          <div>{dstChain?.displayName}</div>
+        </div>
+      </div>
+      <div className="absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]">
+        <div className=" flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ">
+          <ArrowDownIcon />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxConfigForm/SwapPanel.tsx

@@ -0,0 +1,191 @@
+import { FC, useState, useEffect, useRef, useMemo } from "react";
+import { NUMBER_INPUT_REGEX } from "@src/constants";
+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";
+
+interface Props {
+  amount: string;
+  setAmount: React.Dispatch<React.SetStateAction<string>>;
+  srcToken: Token | undefined;
+  setSrcToken: React.Dispatch<React.SetStateAction<Token | undefined>>;
+  setSrcChain: React.Dispatch<React.SetStateAction<Chain | undefined>>;
+  srcChain: Chain | undefined;
+  signer: string | undefined;
+  balances: TokenBalances | undefined;
+  prices: TokenPrices | undefined;
+  supportedChains: Chain[];
+}
+
+export const SwapPanel: FC<Props> = ({
+  amount,
+  setAmount,
+  srcToken,
+  setSrcToken,
+  srcChain,
+  setSrcChain,
+  signer,
+  balances,
+  prices,
+  supportedChains,
+}) => {
+  const [chainListShown, setChainListShown] = useState(false);
+  const [tokenListShown, setTokenListShown] = useState(false);
+  const listRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (listRef.current && buttonRef.current) {
+      const listElement = listRef.current as HTMLElement;
+      const buttonElement = buttonRef.current as HTMLElement;
+      if (
+        !listElement.contains(event.target as Node) &&
+        !buttonElement.contains(event.target as Node)
+      )
+        setChainListShown(false);
+    }
+  };
+
+  const handleMaxClick = () => {
+    if (
+      balances &&
+      srcToken &&
+      balances[srcToken.address] &&
+      balances[srcToken.address]?.toString() !== "0"
+    )
+      setAmount(
+        weiToHumanReadable({
+          amount: balances[srcToken.address]?.toString() || "0",
+          decimals: srcToken.decimals,
+          precisionFractionalPlaces: 4,
+        }),
+      );
+  };
+
+  useEffect(() => {
+    if (chainListShown) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [chainListShown]);
+
+  const chainListOptions = useMemo(
+    () =>
+      supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
+    [supportedChains, srcChain],
+  );
+
+  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>
+          <input
+            className="p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis"
+            value={amount}
+            onChange={(e) => {
+              if (e.target.value === ".") return;
+              if (NUMBER_INPUT_REGEX.test(e.target.value)) {
+                setAmount(e.target.value.replace(/,/g, "."));
+              }
+            }}
+            inputMode="decimal"
+            spellCheck="false"
+            autoComplete="off"
+            autoCorrect="off"
+            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>
+      </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</>
+        )}
+        <div
+          onClick={handleMaxClick}
+          className="flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer"
+        >
+          {signer && (
+            <BalanceComponent balances={balances} srcToken={srcToken} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};