@xswap-link/sdk 0.0.12 → 0.1.0

package/src/components/TxConfigForm/History.tsx

@@ -0,0 +1,159 @@
+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 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 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);
+            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="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>
+  );
+};

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/TokenPicker.tsx

@@ -0,0 +1,165 @@
+import React, { MouseEvent, FC, useState, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { SearchIcon } from "../icons";
+import { Token, TokenBalances } from "@src/models";
+import { weiToHumanReadable } from "@src/utils";
+import { Skeleton } from "@src/components";
+
+interface Props {
+  onCloseClick: () => void;
+  tokens: Token[] | undefined;
+  selectedToken: Token | undefined;
+  setSelectedToken: (token: Token) => void;
+  signer: string;
+  balances: TokenBalances | undefined;
+}
+
+export const TokenPicker: FC<Props> = ({
+  onCloseClick,
+  tokens,
+  selectedToken,
+  setSelectedToken,
+  signer,
+  balances,
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  const modalRoot = document.querySelector(".xswap");
+
+  const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    if (e.target === e.currentTarget) {
+      onCloseClick();
+    }
+  };
+
+  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(),
+    );
+  }, [searchValue, tokens]);
+
+  return modalRoot
+    ? createPortal(
+        <div
+          onClick={onBackdropClick}
+          className="box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5"
+        >
+          <div className="relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]">
+            <p className="text-base mb-4">Pick a token</p>
+            <div className="flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]">
+              <div className="w-6 h-6">
+                <SearchIcon />
+              </div>
+              <input
+                placeholder="Search name or paste address"
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="relative h-[41px] leading-[41px] font-normal z-[1] w-full text-white bg-transparent border-none outline-none placeholder:text-sm"
+              />
+            </div>
+            <div className="my-4 mx-0 flex flex-wrap gap-3">
+              {tokens
+                ?.filter((token) => token?.quickPick)
+                .map((token) => (
+                  <div
+                    key={token.address}
+                    className={`flex gap-2 py-1 px-2 items-center bg-[rgb(15,15,15)] rounded-2xl border border-solid border-[rgba(255,255,255,0.1)] hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${
+                      token.address === selectedToken?.address
+                        ? "bg-[rgb(35, 35, 35)]"
+                        : ""
+                    }`}
+                    onClick={() => {
+                      setSelectedToken(token);
+                      onCloseClick();
+                    }}
+                  >
+                    <img src={token.image} alt={token.name} className="w-5" />
+                    <div className="text-sm">{token.symbol}</div>
+                  </div>
+                ))}
+            </div>
+            <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)}
+                        </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>
+                        {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>
+                    </div>
+                  ))
+              ) : (
+                <div className="mt-4 flex justify-center">
+                  <p className="text-sm text-white">No tokens found.</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>,
+        modalRoot,
+      )
+    : null;
+};

package/src/components/TxConfigForm/index.jsx

@@ -0,0 +1,100 @@
+import "@src/global.css";
+import { Form } from "./Form";
+import { CloseIcon } from "@src/components/icons/CloseIcon";
+import React from "react";
+import ReactDOM from "react-dom";
+
+const TxConfigForm = ({ isOpen, onClose, content }) => {
+  const onBackdropClick = (e) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <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"
+      onClick={onBackdropClick}
+    >
+      <div className="relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
+        {content}
+        <div
+          className="absolute top-3.5 right-3 cursor-pointer text-white"
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+class TxConfigModalWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isOpen: false, content: "No wallet connected" };
+    this.closeModal = this.closeModal.bind(this);
+  }
+
+  openModal(content) {
+    this.setState({ isOpen: true, content });
+  }
+
+  closeModal() {
+    this.setState({ isOpen: false });
+  }
+
+  render() {
+    return this.state.isOpen ? (
+      <TxConfigForm
+        isOpen={this.state.isOpen}
+        onClose={this.closeModal}
+        content={this.state.content}
+      />
+    ) : null;
+  }
+}
+
+// skip on server-side integrations
+let modalWrapperInstance;
+if (typeof document !== "undefined") {
+  // Create a div element that will host the modal, and append it to the body
+  const modalDiv = document.createElement("div");
+  modalDiv.classList.add("xswap");
+  document.body.appendChild(modalDiv);
+
+  // // Render the ModalWrapper component into the modalDiv
+  modalWrapperInstance = ReactDOM.render(<TxConfigModalWrapper />, modalDiv);
+}
+
+export const openTxConfigForm = async ({
+  dstChainId,
+  dstTokenAddr,
+  customContractCalls,
+  desc,
+  supportedChains,
+}) => {
+  try {
+    return await new Promise((resolve) => {
+      modalWrapperInstance.openModal(
+        <Form
+          dstChainId={dstChainId}
+          dstTokenAddr={dstTokenAddr}
+          customContractCalls={customContractCalls}
+          desc={desc}
+          supportedChains={supportedChains}
+          onSubmit={(route) => {
+            resolve(route);
+            modalWrapperInstance.closeModal();
+          }}
+        />,
+      );
+    });
+  } catch (err) {
+    throw new Error(`User input failed, ${err}`);
+  }
+};

package/src/components/global.css

@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.xswap {
+  /* Works on Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #252525 #000;
+  }
+
+  /* Works on Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: #000;
+    border-radius: 4px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: #252525;
+    border-radius: 4px;
+  }
+
+  button {
+    @apply text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25;
+  }
+
+  .globalBorder {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}

package/src/components/global.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react-scripts" />
+
+interface Window {
+  // eslint-disable-next-line
+  ethereum: any;
+}

package/src/components/icons/ArrowRightIcon.tsx

@@ -0,0 +1,11 @@
+export const ArrowRightIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      fill="currentColor"
+    >
+      <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+    </svg>
+  );
+};