@xswap-link/sdk 0.3.5 → 0.4.1

package/src/components/TxConfigForm/TokenPicker.tsx

@@ -1,176 +0,0 @@
-import React, { MouseEvent, FC, useState, useMemo } from "react";
-import { createPortal } from "react-dom";
-import { CloseIcon, 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 | undefined;
-  balances: TokenBalances | undefined;
-}
-
-export const TokenPicker: FC<Props> = ({
-  onCloseClick,
-  tokens,
-  selectedToken,
-  setSelectedToken,
-  signer,
-  balances,
-}) => {
-  const [searchValue, setSearchValue] = useState("");
-
-  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(),
-      )
-      .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]);
-
-  const xpayRoot = document.querySelector("#xpay-root");
-
-  return xpayRoot
-    ? createPortal(
-        <div
-          onClick={onBackdropClick}
-          className="xpay-box-border xpay-fixed xpay-h-full xpay-w-full xpay-z-[999] xpay-top-0 xpay-left-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-flex xpay-items-center xpay-justify-center xpay-p-5"
-        >
-          <div className="xpay-relative xpay-bg-black xpay-rounded-3xl xpay-p-6 xpay-max-h-[70%] xpay-flex xpay-flex-col xpay-text-base xpay-text-white xpay-w-[452px] xpay-h-[70%] xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.2)]">
-            <div
-              onClick={onCloseClick}
-              className="xpay-absolute xpay-top-4 xpay-right-4 xpay-cursor-pointer"
-            >
-              <CloseIcon />
-            </div>
-            <p className="xpay-text-base xpay-mb-4">Pick a token</p>
-            <div className="xpay-flex xpay-items-center xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.1)] xpay-rounded-lg xpay-py-0 xpay-px-3 xpay-gap-2 xpay-bg-[rgba(15,15,15,1)]">
-              <div className="xpay-w-6 xpay-h-6">
-                <SearchIcon />
-              </div>
-              <input
-                placeholder="Search name or paste address"
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-                className="xpay-relative xpay-h-[41px] xpay-leading-[41px] xpay-font-normal xpay-z-[1] xpay-w-full xpay-text-white xpay-bg-transparent xpay-border-none xpay-outline-none placeholder:xpay-text-sm"
-              />
-            </div>
-            <div className="xpay-my-4 xpay-mx-0 xpay-flex xpay-flex-wrap xpay-gap-3">
-              {tokens
-                ?.filter((token) => token?.quickPick)
-                .map((token) => (
-                  <div
-                    key={token.address}
-                    className={`xpay-flex xpay-gap-2 xpay-py-1 xpay-px-2 xpay-items-center xpay-bg-[rgb(15,15,15)] xpay-rounded-2xl xpay-border xpay-border-solid xpay-border-[rgba(255,255,255,0.1)] hover:xpay-bg-[rgb(25,25,25)] hover:xpay-cursor-pointer ${
-                      token.address === selectedToken?.address
-                        ? "xpay-bg-[rgb(35, 35, 35)]"
-                        : ""
-                    }`}
-                    onClick={() => {
-                      setSelectedToken(token);
-                      onCloseClick();
-                    }}
-                  >
-                    <img
-                      src={token.image}
-                      alt={token.name}
-                      className="xpay-w-5"
-                    />
-                    <div className="xpay-text-sm">{token.symbol}</div>
-                  </div>
-                ))}
-            </div>
-            <div className="xpay-h-[2px] xpay-my-0 xpay-mx-[-24px] xpay-w-[100%+48px] xpay-px-12 xpay-bg-[rgba(255,255,255,0.1)]" />
-            <div className="xpay-overflow-y-scroll xpay-h-full xpay-mx-[-24px] xpay-w-[100%+48px] xpay-flex xpay-flex-col">
-              {filteredTokens && filteredTokens.length > 0 ? (
-                filteredTokens.map((token, index) => (
-                  <div
-                    key={`${index}_${token.address}`}
-                    className={`xpay-flex xpay-gap-3 xpay-py-2 xpay-px-[24px] xpay-w-full xpay-items-center hover:xpay-bg-[rgb(25,25,25)] hover:xpay-cursor-pointer ${
-                      token.address === selectedToken?.address
-                        ? "xpay-bg-[rgb(35,35,35)]"
-                        : ""
-                    }`}
-                    onClick={() => {
-                      setSelectedToken(token);
-                      onCloseClick();
-                    }}
-                  >
-                    {token.image ? (
-                      <img src={token.image} alt={token.name} />
-                    ) : (
-                      <div className="xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9 xpay-text-[15px] xpay-ml-1 xpay-rounded-full xpay-bg-[#272e40] xpay-text-[#e0e7fa]">
-                        {token?.symbol.substring(0, 1)}
-                      </div>
-                    )}
-                    <div className="xpay-flex xpay-justify-between xpay-items-center xpay-gap-1 xpay-overflow-hidden xpay-grow">
-                      <div className="xpay-flex xpay-flex-col xpay-leading-[16px]">
-                        <div className="xpay-overflow-hidden xpay-whitespace-nowrap xpay-text-ellipsis xpay-text-[15px]">
-                          {token.name}
-                        </div>
-                        <div className="xpay-text-[#888] xpay-text-[11px]">
-                          {token.symbol}
-                        </div>
-                      </div>
-                      {signer && (
-                        <>
-                          {balances &&
-                          balances[token.address] &&
-                          token.decimals ? (
-                            <div className="xpay-text-xs">
-                              {weiToHumanReadable({
-                                amount:
-                                  balances[token.address]?.toString() || "0",
-                                decimals: token.decimals,
-                                precisionFractionalPlaces: 4,
-                              })}
-                            </div>
-                          ) : (
-                            <Skeleton width="xpay-w-12" height="xpay-h-3" />
-                          )}
-                        </>
-                      )}
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <div className="xpay-mt-4 xpay-flex xpay-justify-center">
-                  <p className="xpay-text-sm xpay-text-white">
-                    No tokens found.
-                  </p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>,
-        xpayRoot,
-      )
-    : null;
-};

package/src/components/TxConfigForm/TopBar.tsx

@@ -1,58 +0,0 @@
-import { FC } from "react";
-import { shortAddress } from "@src/utils";
-import { SettingsIcon, HistoryIcon, CloseIcon } from "../icons";
-
-interface Props {
-  signer: string | undefined;
-  setSettingsShown: React.Dispatch<React.SetStateAction<boolean>>;
-  historyTabShown: boolean;
-  setHistoryTabShown: React.Dispatch<React.SetStateAction<boolean>>;
-  onClose: () => void;
-}
-
-export const TopBar: FC<Props> = ({
-  signer,
-  setSettingsShown,
-  setHistoryTabShown,
-  historyTabShown,
-  onClose,
-}) => {
-  return (
-    <div className="xpay-flex xpay-w-full xpay-justify-between xpay-items-center xpay-mx-auto xpay-p-2">
-      <div className="xpay-rounded-lg xpay-text-[rgba(255,255,255,0.6)] xpay-text-xs sm:xpay-text-base xpay-whitespace-nowrap">
-        {signer
-          ? `Connected wallet: ${shortAddress(signer)}`
-          : `Wallet disconnected`}
-      </div>
-      <div className="xpay-flex xpay-gap-2 xpay-justify-center xpay-items-center">
-        {!historyTabShown && (
-          <div
-            onClick={() => setSettingsShown(true)}
-            className="xpay-flex xpay-items-center xpay-text-xs xpay-gap-1 xpay-cursor-pointer"
-          >
-            <div className="xpay-w-7 xpay-h-7 xpay-rounded-full xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-flex xpay-items-center xpay-justify-center">
-              <SettingsIcon />
-            </div>
-          </div>
-        )}
-        <div
-          onClick={() => setHistoryTabShown((x) => !x)}
-          className="xpay-flex xpay-items-center xpay-text-sm xpay-gap-1 xpay-cursor-pointer"
-        >
-          {!historyTabShown ? (
-            <>
-              <div className="xpay-w-7 xpay-h-7 xpay-rounded-full xpay-bg-gradient-to-r xpay-from-x_blue_light xpay-to-x_blue_dark xpay-flex xpay-items-center xpay-justify-center">
-                <HistoryIcon />
-              </div>
-            </>
-          ) : (
-            <div>Back</div>
-          )}
-        </div>
-        <div className="xpay-cursor-pointer xpay-text-white" onClick={onClose}>
-          <CloseIcon />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/TxConfigForm/UsdPrice.tsx

@@ -1,44 +0,0 @@
-import { Alert, Skeleton } from "@src/components";
-import { Token, TokenPrices } from "@src/models";
-import { FC, useEffect, 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]) {
-      const newUsdPrice = (
-        Number(amount) * Number(prices[token.address.toLowerCase()])
-      ).toFixed(2);
-      setUsdPrice(newUsdPrice);
-    }
-  }, [token, prices, amount]);
-
-  return (
-    <div className="xpay-opacity-60">
-      {loading ? (
-        <Skeleton width="xpay-w-12" height="xpay-h-4" />
-      ) : token ? (
-        prices && prices[token.address] ? (
-          <div>{`$${usdPrice}`}</div>
-        ) : (
-          <Alert desc="Unknown price" />
-        )
-      ) : (
-        <>$0.00</>
-      )}
-    </div>
-  );
-};

package/src/components/icons/ChevronDownIcon.tsx

@@ -1,15 +0,0 @@
-export const ChevronDownIcon = () => {
-  return (
-    <svg
-      width="12"
-      height="12"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-    >
-      <path
-        fill="currentColor"
-        d="M233.4 406.6c12.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 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
-      ></path>
-    </svg>
-  );
-};

package/src/components/icons/ChevronUpIcon.tsx

@@ -1,10 +0,0 @@
-export const ChevronUpIcon = () => {
-  return (
-    <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"
-      ></path>
-    </svg>
-  );
-};

package/src/components/icons/CloseIcon.tsx

@@ -1,15 +0,0 @@
-export const CloseIcon = () => {
-  return (
-    <svg
-      height="18"
-      width="18"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 10.312 8.319"
-    >
-      <path
-        fill="white"
-        d="M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z"
-      />
-    </svg>
-  );
-};

package/src/components/icons/HistoryIcon.tsx

@@ -1,16 +0,0 @@
-export const HistoryIcon = () => {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.98413 17.5C8.1633 17.5 6.57667 16.8646 5.22424 15.5938C3.8718 14.3229 3.09663 12.7361 2.89871 10.8333H4.52163C4.70635 12.2778 5.3166 13.4722 6.35236 14.4167C7.38812 15.3611 8.59871 15.8333 9.98413 15.8333C11.5279 15.8333 12.8374 15.2674 13.9128 14.1354C14.9881 13.0035 15.5258 11.625 15.5258 10C15.5258 8.375 14.9881 6.99653 13.9128 5.86458C12.8374 4.73264 11.5279 4.16667 9.98413 4.16667C9.07371 4.16667 8.22267 4.38889 7.43101 4.83333C6.63934 5.27778 5.97302 5.88889 5.43205 6.66667H7.60913V8.33333H2.85913V3.33333H4.44246V5.29167C5.11538 4.40278 5.93673 3.71528 6.90653 3.22917C7.87632 2.74306 8.90219 2.5 9.98413 2.5C10.9737 2.5 11.9006 2.69792 12.7649 3.09375C13.6291 3.48958 14.3812 4.02431 15.0211 4.69792C15.661 5.37153 16.169 6.16319 16.5451 7.07292C16.9211 7.98264 17.1091 8.95833 17.1091 10C17.1091 11.0417 16.9211 12.0174 16.5451 12.9271C16.169 13.8368 15.661 14.6285 15.0211 15.3021C14.3812 15.9757 13.6291 16.5104 12.7649 16.9062C11.9006 17.3021 10.9737 17.5 9.98413 17.5ZM12.2008 13.5L9.19246 10.3333V5.83333H10.7758V9.66667L13.3091 12.3333L12.2008 13.5Z"
-        fill="white"
-      />
-    </svg>
-  );
-};

package/src/components/icons/SettingsIcon.tsx

@@ -1,16 +0,0 @@
-export const SettingsIcon = () => {
-  return (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6.62325 17.5L6.26504 14.78C6.07101 14.7092 5.88818 14.6242 5.71653 14.525C5.54489 14.4258 5.37698 14.3196 5.2128 14.2063L2.54862 15.2688L0.0859375 11.2312L2.39191 9.57375C2.37698 9.47458 2.36952 9.37896 2.36952 9.28687V8.71313C2.36952 8.62104 2.37698 8.52542 2.39191 8.42625L0.0859375 6.76875L2.54862 2.73125L5.2128 3.79375C5.37698 3.68042 5.54862 3.57417 5.72773 3.475C5.90683 3.37583 6.08594 3.29083 6.26504 3.22L6.62325 0.5H11.5486L11.9068 3.22C12.1009 3.29083 12.2837 3.37583 12.4553 3.475C12.627 3.57417 12.7949 3.68042 12.9591 3.79375L15.6233 2.73125L18.0859 6.76875L15.78 8.42625C15.7949 8.52542 15.8024 8.62104 15.8024 8.71313V9.28687C15.8024 9.37896 15.7874 9.47458 15.7576 9.57375L18.0635 11.2312L15.6009 15.2688L12.9591 14.2063C12.7949 14.3196 12.6233 14.4258 12.4441 14.525C12.265 14.6242 12.0859 14.7092 11.9068 14.78L11.5486 17.5H6.62325ZM9.13071 11.975C9.99639 11.975 10.7352 11.6846 11.3471 11.1038C11.9591 10.5229 12.265 9.82167 12.265 9C12.265 8.17833 11.9591 7.47708 11.3471 6.89625C10.7352 6.31542 9.99639 6.025 9.13071 6.025C8.25012 6.025 7.50758 6.31542 6.9031 6.89625C6.29862 7.47708 5.99639 8.17833 5.99639 9C5.99639 9.82167 6.29862 10.5229 6.9031 11.1038C7.50758 11.6846 8.25012 11.975 9.13071 11.975ZM9.13071 10.275C8.75758 10.275 8.44042 10.151 8.17922 9.90312C7.91803 9.65521 7.78743 9.35417 7.78743 9C7.78743 8.64583 7.91803 8.34479 8.17922 8.09688C8.44042 7.84896 8.75758 7.725 9.13071 7.725C9.50385 7.725 9.82101 7.84896 10.0822 8.09688C10.3434 8.34479 10.474 8.64583 10.474 9C10.474 9.35417 10.3434 9.65521 10.0822 9.90312C9.82101 10.151 9.50385 10.275 9.13071 10.275ZM8.19042 15.8H9.95907L10.2725 13.5475C10.7352 13.4342 11.1643 13.2677 11.5598 13.0481C11.9553 12.8285 12.3173 12.5629 12.6456 12.2513L14.8621 13.1225L15.7352 11.6775L13.8098 10.2963C13.8844 10.0979 13.9367 9.88896 13.9665 9.66938C13.9964 9.44979 14.0113 9.22667 14.0113 9C14.0113 8.77333 13.9964 8.55021 13.9665 8.33063C13.9367 8.11104 13.8844 7.90208 13.8098 7.70375L15.7352 6.3225L14.8621 4.8775L12.6456 5.77C12.3173 5.44417 11.9553 5.17146 11.5598 4.95188C11.1643 4.73229 10.7352 4.56583 10.2725 4.4525L9.98146 2.2H8.2128L7.89937 4.4525C7.43668 4.56583 7.00758 4.73229 6.61206 4.95188C6.21653 5.17146 5.85459 5.43708 5.52624 5.74875L3.30982 4.8775L2.43668 6.3225L4.36206 7.6825C4.28743 7.895 4.23519 8.1075 4.20534 8.32C4.17549 8.5325 4.16056 8.75917 4.16056 9C4.16056 9.22667 4.17549 9.44625 4.20534 9.65875C4.23519 9.87125 4.28743 10.0837 4.36206 10.2963L2.43668 11.6775L3.30982 13.1225L5.52624 12.23C5.85459 12.5558 6.21653 12.8285 6.61206 13.0481C7.00758 13.2677 7.43668 13.4342 7.89937 13.5475L8.19042 15.8Z"
-        fill="white"
-      />
-    </svg>
-  );
-};