@xswap-link/sdk 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.1.1",
+  "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

@@ -17,6 +17,7 @@ import { Summary } from "./Summary";
 import { SwapPanel } from "./SwapPanel";
 import { ErrorField } from "./ErrorField";
 import { Description } from "./Description";
+import { DEFAULT_SOURCE_CHAIN_ID } from "@src/constants";
 
 export const Form = ({
   dstChainId,
@@ -55,17 +56,15 @@ export const Form = ({
   }, [account.address]);
 
   useEffect(() => {
-    if (
-      supportedChains.some(
-        ({ chainId }) => chainId === account.chainId?.toString(),
-      )
-    ) {
-      setSrcChain(
+    const defaultChain = supportedChains.find(
+      ({ chainId }) => chainId === account.chainId?.toString(),
+    );
+    setSrcChain(
+      defaultChain ??
         supportedChains.find(
-          ({ chainId }) => chainId === account.chainId?.toString(),
+          ({ chainId }) => chainId === DEFAULT_SOURCE_CHAIN_ID,
         ),
-      );
-    }
+    );
   }, [account.chainId]);
 
   useEffect(() => {
@@ -95,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,
@@ -178,7 +181,7 @@ export const Form = ({
 
   return (
     <form
-      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-[360px] sm:w-[600px]"
+      className="flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop"
       onSubmit={handleSubmit}
     >
       <TopBar
@@ -197,7 +200,7 @@ export const Form = ({
         />
       )}
       {historyTabShown ? (
-        signer && <History signer={signer} supportedChains={supportedChains} />
+        <History signer={signer} supportedChains={supportedChains} />
       ) : (
         <div className="flex flex-col gap-2">
           {desc && <Description description={desc} />}
@@ -215,7 +218,6 @@ export const Form = ({
           />
           <Summary
             isGettingRoute={isGettingRoute}
-            amount={amount}
             route={route}
             dstToken={dstToken}
             dstChain={dstChain}
@@ -232,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

@@ -6,118 +6,60 @@ 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 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);
+    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]);
 
@@ -129,20 +71,27 @@ 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="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 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...
           </div>
         )}
-        {!mappedHistory && !historyLoadedOnce && (
+        {!fetchedHistory && !historyLoadedOnce && (
           <div className="flex w-full h-full items-center justify-center">
             <CircularProgressIcon />
           </div>
         )}
-        {mappedHistory?.map((transaction, index) => (
+        {fetchedHistory?.map((transaction, index) => (
           <HistoryCard
             key={index}
             transaction={transaction}

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 {
@@ -9,6 +9,7 @@ import {
   HourGlassIcon,
   XMarkIcon,
 } from "@src/components/icons";
+import { MINIMUM_DISPLAYED_TOKEN_AMOUNT } from "@src/constants";
 
 interface Props {
   transaction: Transaction;
@@ -16,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(() => {
@@ -79,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>
           )}
 
@@ -121,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>
 
@@ -150,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) < 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}
-              </div>
+              <div className="ml-1">{tokenData?.symbol}</div>
               {tokenData?.image ? (
                 <img
                   src={tokenData?.image}
@@ -178,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 />