@xswap-link/sdk 0.0.13 → 0.1.1

package/src/components/TxConfigForm/History.tsx

@@ -0,0 +1,155 @@
+import { Transaction, TransactionStatus, Chain } from "@src/models";
+import React, { FC, useCallback, useEffect, useState } from "react";
+import { getHistory } from "@src/services";
+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;
+  supportedChains: Chain[];
+}
+
+export const History: FC<Props> = ({ signer, supportedChains }) => {
+  const [mappedHistory, setMappedHistory] = useState<Transaction[]>();
+  // const [latestHistory, setLatestHistory] = 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 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,
+        });
+      }
+
+      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);
+            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";
+          }
+
+          if (
+            txHashToTxFromAPI[transaction.hash]?.status === "DONE" ||
+            txHashToTxFromAPI[transaction.hash]?.status === "REVERTED"
+          ) {
+            // API has the same or fresher data.
+            continue;
+          }
+        }
+
+        newLocalHistory[walletAddress.toLowerCase()] = newLocalHistoryForWallet;
+      }
+      setLocalHistory(newLocalHistory);
+      setMappedHistory(
+        fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp),
+      );
+      setHistoryLoadedOnce(true);
+    }
+  }, [signer, getHistory]);
+
+  useEffect(() => {
+    if (!historyLoadedOnce) fetchHistory();
+    const timer = setInterval(() => {
+      fetchHistory();
+    }, 60000);
+    return () => clearInterval(timer);
+  }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
+
+  return (
+    <div className="flex items-center justify-center w-full">
+      <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>
+    </div>
+  );
+};

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -0,0 +1,209 @@
+import { FC, useCallback, useMemo } from "react";
+import { format } from "date-fns";
+import { Transaction, Chain, Token } from "@src/models";
+import { deepMergeObjects, weiToHumanReadable } from "@src/utils";
+import {
+  ArrowRightIcon,
+  ArrowUpRightIcon,
+  CheckIcon,
+  HourGlassIcon,
+  XMarkIcon,
+} from "@src/components/icons";
+
+interface Props {
+  transaction: Transaction;
+  supportedChains: Chain[];
+}
+
+export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
+  const getDate = useCallback((blockTimestamp: number) => {
+    const date = new Date(blockTimestamp * 1000);
+    return format(date, "d MMM yyyy HH:mm:ss");
+  }, []);
+
+  const date = getDate(transaction.timestamp);
+
+  const supportedTokens: Record<string, Record<string, Token>> = useMemo(() => {
+    const customTokens = JSON.parse(
+      localStorage.getItem("custom-tokens") || "{}",
+    );
+
+    const chainIdToTokenAddressToData: Record<
+      string,
+      Record<string, Token>
+    > = {};
+
+    supportedChains.forEach((chain) => {
+      chainIdToTokenAddressToData[chain.chainId] = {};
+      chain.tokens.forEach((token) => {
+        chainIdToTokenAddressToData[chain.chainId]![token.address] = token;
+      });
+    });
+    return deepMergeObjects(chainIdToTokenAddressToData, customTokens);
+  }, [supportedChains]);
+
+  const findTokenDataByAddressAndChain = useCallback(
+    (tokenAddress: string, chainId: string): Token | undefined => {
+      return supportedTokens[chainId]?.[tokenAddress];
+    },
+    [supportedTokens],
+  );
+
+  const tokenData = findTokenDataByAddressAndChain(
+    transaction.tokenAddress.toLowerCase(),
+    transaction.sourceChainId,
+  );
+  const tokenOutData = transaction.tokenOutAddress
+    ? findTokenDataByAddressAndChain(
+        transaction.tokenOutAddress?.toLowerCase(),
+        transaction.targetChainId,
+      )
+    : undefined;
+  const transferredAmount = weiToHumanReadable({
+    amount: transaction.amountWei,
+    decimals: tokenData?.decimals || 18,
+    precisionFractionalPlaces: 4,
+  });
+  const receivedAmount = weiToHumanReadable({
+    amount: transaction?.tokenOutAmount || "0",
+    decimals: tokenOutData?.decimals || 18,
+    precisionFractionalPlaces: 4,
+  });
+
+  const sourceChainData = supportedChains.find(
+    (chain) => chain.chainId === transaction.sourceChainId,
+  );
+
+  const targetChainData = supportedChains.find(
+    (chain) => chain.chainId === transaction.targetChainId,
+  );
+
+  return (
+    <div className="flex flex-col border border-solid border-[rgba(255,255,255,0.1)] rounded-xl bg-[rgb(15,15,15)] p-2 gap-4 mb-2">
+      <div className="flex items-center">
+        <div className="text-[rgba(255,255,255,0.6)] text-xs">{date}</div>
+        <div className="flex flex-grow justify-end items-center">
+          {transaction.status === "IN_PROGRESS" && (
+            <div className="flex items-center">
+              <div className="w-3.5 h-3.5 mr-1 text-[rgb(250,200,100)]">
+                <HourGlassIcon />
+              </div>
+              <div className="text-xs text-[rgb(250,200,100)]">In progress</div>
+            </div>
+          )}
+
+          {transaction.status === "DONE" && (
+            <div className="flex items-center">
+              <div className="w-3.5 h-3.5 mr-1 text-[rgb(100,200,100)]">
+                <CheckIcon />
+              </div>
+              <div className="text-xs text-[rgb(100,200,100)]">Done</div>
+            </div>
+          )}
+
+          {transaction.status === "REVERTED" && (
+            <div className="flex items-center">
+              <div className="w-4 h-4 mr-1 text-[rgb(255,100,100)]">
+                <XMarkIcon />
+              </div>
+              <div className="text-xs text-[rgb(255,100,100)]">Reverted</div>
+            </div>
+          )}
+
+          <a
+            href={`${
+              supportedChains.find(
+                (chain) => chain.chainId === transaction.sourceChainId,
+              )?.transactionExplorer
+            }/${transaction.hash}`}
+            target="_blank"
+            rel="noreferrer"
+            className="ml-2 no-underline"
+            aria-label="Show the transaction in the chain explorer"
+          >
+            <div className="w-3.5 h-3.5 text-[rgba(255,255,255,0.6)]">
+              <ArrowUpRightIcon />
+            </div>
+          </a>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-8">
+        <div className="flex flex-grow items-center">
+          <div className="flex items-center">
+            <img
+              src={sourceChainData?.image}
+              alt={`${sourceChainData?.name} logo`}
+              className="w-5 h-5 mr-1"
+            />
+            <div className="text-xs text-[rgba(255,255,255,0.6)]">
+              {sourceChainData?.displayName}
+            </div>
+          </div>
+
+          <div className="w-3.5 h-3.5 text-[rgba(255,255,255,0.6)] my-0 mx-1.5">
+            <ArrowRightIcon />
+          </div>
+
+          <div className="flex items-center">
+            <img
+              src={targetChainData?.image}
+              alt={`${targetChainData?.name} logo`}
+              className="w-5 h-5 mr-1"
+            />
+            <div className="text-xs text-[rgba(255,255,255,0.6)]">
+              {targetChainData?.displayName}
+            </div>
+          </div>
+        </div>
+        <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"
+                : transferredAmount}
+              <div className="text-xs ml-1 text-rgba(255,255,255,0.6)">
+                {tokenData?.symbol}
+              </div>
+              {tokenData?.image ? (
+                <img
+                  src={tokenData?.image}
+                  alt={tokenData?.name || ""}
+                  className="w-5 h-5 ml-1"
+                />
+              ) : (
+                <div className="flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                  {tokenData?.symbol.substring(0, 1)}
+                </div>
+              )}
+            </div>
+            {transaction.tokenOutAddress && (
+              <>
+                <div className="w-3.5 h-3.5 text-[rgba(255,255,255,0.6)] my-0 mx-1.5">
+                  <ArrowRightIcon />
+                </div>
+                <div className="flex items-center">
+                  {Number(receivedAmount) < 0.0001 ? "<0.0001" : receivedAmount}
+                  <div className="text-xs ml-1 text-[rgba(255,255,255,0.6)]">
+                    {tokenOutData?.symbol}
+                  </div>
+
+                  {tokenOutData?.image ? (
+                    <img
+                      src={tokenOutData?.image}
+                      alt={tokenOutData?.name || ""}
+                      className="w-5 h-5 ml-1"
+                    />
+                  ) : (
+                    <div className="flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]">
+                      {tokenData?.symbol.substring(0, 1)}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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>
+  );
+};