@xswap-link/sdk 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/Skeleton/index.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 
-export const Skeleton = ({ w, h }: Style) => {
-  return <div className={`bg-current rounded animate-pulse ${w} ${h}`} />;
+type Props = {
+  width: string;
+  height: string;
+  other?: string;
 };
 
-type Style = {
-  w: string;
-  h: string;
+export const Skeleton = ({ width, height }: Props) => {
+  return (
+    <div className={`bg-current rounded animate-pulse ${width} ${height}`} />
+  );
 };

package/src/components/TxConfigForm/FeesDetails.tsx

@@ -26,8 +26,8 @@ export const FeesDetails: FC<Props> = ({
 }) => {
   return (
     <div className="flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex items-center gap-1 text-sm font-medium text-white opacity-60">
+      <div className="flex w-full items-center justify-between text-xs sm:text-sm ">
+        <div className="flex items-center gap-1 font-medium text-white opacity-60">
           <CoinsIcon />
           <div className="mr-1">Fees:</div>
           {isGettingRoute ? (
@@ -47,9 +47,9 @@ export const FeesDetails: FC<Props> = ({
             })} ${paymentToken?.symbol}`
           )}
         </div>
-        <div className="flex gap-1">
+        <div className="flex gap-1 items-center">
           <div
-            className={`flex gap-1 text-xs font-medium ${
+            className={`flex gap-1 items-center font-medium ${
               expressChecked ? "text-x_green" : "text-white opacity-60"
             }`}
           >
@@ -58,7 +58,7 @@ export const FeesDetails: FC<Props> = ({
           </div>
           <div
             onClick={() => setFeesDetailsShown((x) => !x)}
-            className="text-xs font-medium text-white opacity-60 cursor-pointer flex items-center"
+            className="font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]"
           >
             {feesDetailsShown ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </div>

package/src/components/TxConfigForm/Form.tsx

@@ -94,9 +94,13 @@ export const Form = ({
       }, ROUTE_TIMEOUT_MS);
       setIsGettingRoute(true);
       setFeesDetailsShown(false);
+      if (!srcToken.decimals)
+        throw new Error(
+          `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`,
+        );
       getRoute({
         fromAmount: ethers.utils
-          .parseUnits(debouncedAmount, srcToken?.decimals)
+          .parseUnits(debouncedAmount, srcToken.decimals)
           .toString(),
         fromAddress: signer || ADDRESSES[srcChain.chainId]!.FeeCollector,
         fromChain: srcChain.chainId,
@@ -214,7 +218,6 @@ export const Form = ({
           />
           <Summary
             isGettingRoute={isGettingRoute}
-            amount={amount}
             route={route}
             dstToken={dstToken}
             dstChain={dstChain}
@@ -231,7 +234,11 @@ export const Form = ({
           />
           {formError.length > 0 && <ErrorField error={formError} />}
           {srcChain && srcChain.chainId !== account.chainId?.toString() ? (
-            <button type="button" onClick={handleSwitchChain}>
+            <button
+              disabled={!signer}
+              type="button"
+              onClick={handleSwitchChain}
+            >
               Switch chain
             </button>
           ) : (

package/src/components/TxConfigForm/History.tsx

@@ -80,7 +80,7 @@ export const History: FC<Props> = ({ signer, supportedChains }) => {
 
   return (
     <div className="flex items-center justify-center w-full">
-      <div className="w-full h-[30vh] overflow-scroll overflow-x-hidden">
+      <div className="w-full h-96 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...

package/src/components/TxConfigForm/HistoryCard.tsx

@@ -1,5 +1,5 @@
 import { FC, useCallback, useMemo } from "react";
-import { format } from "date-fns";
+import { getDate } from "@src/utils";
 import { Transaction, Chain, Token } from "@src/models";
 import { deepMergeObjects, weiToHumanReadable } from "@src/utils";
 import {
@@ -17,11 +17,6 @@ interface Props {
 }
 
 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(() => {
@@ -80,34 +75,25 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
   );
 
   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">
+    <div className="flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2">
+      <div className="flex w-full items-center justify-between">
+        <div className="text-sm sm:text-base">{date}</div>
+        <div className="flex 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 className="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 className="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 className="text-[rgb(255,100,100)]">Reverted</div>
             </div>
           )}
 
@@ -122,26 +108,24 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
             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)]">
+            <div className="w-3.5 h-3.5">
               <ArrowUpRightIcon />
             </div>
           </a>
         </div>
       </div>
-      <div className="flex flex-wrap gap-8">
-        <div className="flex flex-grow items-center">
+      <div className="flex justify-between flex-wrap gap-2">
+        <div className="flex 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>{sourceChainData?.displayName}</div>
           </div>
 
-          <div className="w-3.5 h-3.5 text-[rgba(255,255,255,0.6)] my-0 mx-1.5">
+          <div className="w-3.5 h-3.5 my-0 mx-1.5">
             <ArrowRightIcon />
           </div>
 
@@ -151,20 +135,17 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
               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>{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 flex-wrap">
             <div className="flex items-center">
               {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}
-              </div>
+              <div className="ml-1">{tokenData?.symbol}</div>
               {tokenData?.image ? (
                 <img
                   src={tokenData?.image}
@@ -179,14 +160,12 @@ export const HistoryCard: FC<Props> = ({ transaction, supportedChains }) => {
             </div>
             {transaction.tokenOutAddress && (
               <>
-                <div className="w-3.5 h-3.5 text-[rgba(255,255,255,0.6)] my-0 mx-1.5">
+                <div className="w-3.5 h-3.5 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>
+                  <div className="ml-1">{tokenOutData?.symbol}</div>
 
                   {tokenOutData?.image ? (
                     <img

package/src/components/TxConfigForm/Summary.tsx

@@ -1,11 +1,13 @@
-import { FC } from "react";
+import React, { FC, useEffect, useMemo, useState } from "react";
 import { weiToHumanReadable } from "@src/utils";
-import { Chain, Route, Token } from "@src/models";
+import { Chain, Route, Token, TokenPrices } from "@src/models";
 import { ArrowDownIcon } from "../icons";
+import { UsdPrice } from "@src/components/TxConfigForm/UsdPrice";
+import { getPrices } from "@src/services";
+import { Skeleton } from "@src/components";
 
 interface Props {
   isGettingRoute: boolean;
-  amount: string;
   route: Route | undefined;
   dstToken: Token | undefined;
   dstChain: Chain | undefined;
@@ -13,40 +15,67 @@ interface Props {
 
 export const Summary: FC<Props> = ({
   isGettingRoute,
-  amount,
   route,
   dstToken,
   dstChain,
 }) => {
+  const [prices, setPrices] = useState<TokenPrices>();
+
+  const amountReadable = useMemo(
+    () =>
+      weiToHumanReadable({
+        amount: route?.estAmountOut || "0",
+        decimals: dstToken?.decimals || 18,
+        precisionFractionalPlaces: 5,
+      }),
+    [route, dstToken],
+  );
+
+  useEffect(() => {
+    if (dstChain) {
+      getPrices({ chainId: dstChain.chainId, currency: "USD" }).then((prices) =>
+        setPrices(prices),
+      );
+    }
+  }, [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 className="flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative">
+      <div className="flex justify-between">
+        <div className="flex flex-col gap-1">
+          <p className="text-[rgba(255,255,255,0.6)] text-sm">You receive</p>
+          {isGettingRoute ? (
+            <Skeleton
+              width="w-[100px]"
+              height="h-[36px]"
+              other="sm:w-[190px]"
+            />
+          ) : (
+            <div className="flex gap-2 items-center text-white text-xl sm:text-3xl">
+              {amountReadable}
+              <div className="w-4 sm:w-6 h-4 sm:h-6">
+                <img src={dstToken?.image} alt={dstToken?.name} />
+              </div>
+              <p className="text-base sm:text-xl">{dstToken?.symbol}</p>
             </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 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 items-center gap-1 text-white">
+            <div className="w-4 h-4">
+              <img src={dstChain?.image} alt={dstChain?.name} />
+            </div>
+            <div>{dstChain?.displayName}</div>
           </div>
-          <div>{dstChain?.displayName}</div>
         </div>
       </div>
+      <UsdPrice
+        prices={prices}
+        token={dstToken}
+        amount={amountReadable}
+        loading={isGettingRoute}
+      />
       <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 />

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();
@@ -153,7 +153,7 @@ export const TokenPicker: FC<Props> = ({
                               })}
                             </div>
                           ) : (
-                            <Skeleton w="w-12" h="h-3" />
+                            <Skeleton width="w-12" height="h-3" />
                           )}
                         </>
                       )}

package/src/components/TxConfigForm/TopBar.tsx

@@ -16,8 +16,8 @@ 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">
+    <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`}

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