@xswap-link/sdk 0.3.5 → 0.4.1

package/src/components/TxConfigForm/index.tsx

@@ -1,34 +1,42 @@
-import "@src/global.css";
-import { MouseEvent, useMemo, useState } from "react";
+import { PoweredBy, Swap } from "@src/components";
+import { getWagmiConfig, waitForInitialization, xpayRoot } from "@src/config";
+import {
+  HistoryProvider,
+  SwapProvider,
+  TransactionProvider,
+  TxUIWrapper,
+} from "@src/context";
+import { ModalProvider } from "@src/context/ModalProvider";
+import { Chain, ModalIntegrationPayload, Route } from "@src/models";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MouseEvent, useMemo, useState } from "react";
 import { WagmiProvider } from "wagmi";
-import { getWagmiConfig, waitForInitialization, xpayRoot } from "@src/config";
-import { Chain, ContractCall, Route } from "@src/models";
-import { PoweredBy } from "@src/components/TxConfigForm/PoweredBy";
-import { Form } from "./Form";
 
-export type TxConfigFormProps = {
-  integratorId: string;
+export type TxConfigFormPayload = Omit<
+  ModalIntegrationPayload,
+  "dstChain" | "dstToken" | "dstDisplayToken" | "srcChain" | "srcToken"
+> & {
   dstChainId: string;
   dstTokenAddr: string;
-  customContractCalls: ContractCall[];
-  desc?: string;
-  supportedChains: Chain[];
-  returnTransactions?: boolean;
+  srcChainId?: string;
+  srcTokenAddr?: string;
   dstDisplayTokenAddr?: string;
+  supportedChains: Chain[];
 };
 const TxConfigForm = ({
   integratorId,
   dstChainId,
   dstTokenAddr,
+  srcChainId,
+  srcTokenAddr,
   customContractCalls,
   desc,
-  supportedChains,
   returnTransactions,
   dstDisplayTokenAddr,
+  supportedChains,
   onSubmit,
   onClose,
-}: TxConfigFormProps & {
+}: TxConfigFormPayload & {
   onSubmit: (route: Route) => void;
   onClose: () => void;
 }) => {
@@ -44,36 +52,45 @@ const TxConfigForm = ({
   const queryClient = new QueryClient();
   const wagmiConfig = useMemo(
     () => getWagmiConfig(supportedChains),
-    supportedChains,
+    [supportedChains],
   );
 
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <div
-          className="xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-bg-[rgba(0,0,0,0.8)] xpay-fixed xpay-flex xpay-items-center xpay-justify-center xpay-z-10"
-          onMouseDown={onBackdropClick}
-        >
-          <div className="xpay-relative xpay-bg-black xpay-rounded-3xl xpay-overflow-auto xpay-text-white xpay-border-2 xpay-border-solid xpay-border-[rgba(255,255,255,0.1)]">
-            <Form
-              integratorId={integratorId}
-              dstChainId={dstChainId}
-              dstTokenAddr={dstTokenAddr}
-              customContractCalls={customContractCalls}
-              desc={desc}
-              supportedChains={supportedChains}
-              wagmiConfig={wagmiConfig}
-              returnTransactions={!!returnTransactions}
-              dstDisplayTokenAddr={dstDisplayTokenAddr}
-              onSubmit={onSubmit}
-              onClose={onClose}
-              setBackdropClickDisabled={(disabled: boolean) =>
-                setBackdropClickDisabled(disabled)
-              }
-            />
-            <PoweredBy />
-          </div>
-        </div>
+        <HistoryProvider>
+          <SwapProvider
+            integrationConfig={{
+              integratorId,
+              dstChainId,
+              dstTokenAddr,
+              srcChainId,
+              srcTokenAddr,
+              customContractCalls,
+              desc,
+              dstDisplayTokenAddr,
+              returnTransactions,
+            }}
+            supportedChains={supportedChains}
+            wagmiConfig={wagmiConfig}
+          >
+            <TransactionProvider>
+              <TxUIWrapper>
+                <ModalProvider>
+                  <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"
+                    onMouseDown={onBackdropClick}
+                  >
+                    <div className="relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)] min-w-x_modal max-w-x_modal min-h-[432px] w-full">
+                      <Swap onSubmit={onSubmit} onClose={onClose} />
+                      <PoweredBy />
+                    </div>
+                  </div>
+                </ModalProvider>
+              </TxUIWrapper>
+            </TransactionProvider>
+          </SwapProvider>
+        </HistoryProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );
@@ -83,12 +100,14 @@ export const openTxConfigForm = async ({
   integratorId,
   dstChainId,
   dstTokenAddr,
+  srcChainId,
+  srcTokenAddr,
   customContractCalls,
   desc,
-  supportedChains,
   returnTransactions,
   dstDisplayTokenAddr,
-}: TxConfigFormProps): Promise<Route> => {
+  supportedChains,
+}: TxConfigFormPayload): Promise<Route> => {
   try {
     if (xpayRoot === null) {
       throw new Error("XPay was incorrectly initialised");
@@ -103,11 +122,13 @@ export const openTxConfigForm = async ({
           integratorId={integratorId}
           dstChainId={dstChainId}
           dstTokenAddr={dstTokenAddr}
+          srcChainId={srcChainId}
+          srcTokenAddr={srcTokenAddr}
           customContractCalls={customContractCalls}
           desc={desc}
-          supportedChains={supportedChains}
           returnTransactions={returnTransactions}
           dstDisplayTokenAddr={dstDisplayTokenAddr}
+          supportedChains={supportedChains}
           onSubmit={(route) => {
             if (returnTransactions) {
               resolve(route);

package/src/components/TxDataCard/TokenDetails/index.tsx

@@ -0,0 +1,30 @@
+import { TokenLogoWithChain } from "@src/components";
+import { Chain, Token } from "@src/models";
+
+type Props = {
+  chain: Chain | undefined;
+  token: Token | undefined;
+  amount: string;
+};
+
+export const TokenDetails = ({ chain, token, amount }: Props) => {
+  return (
+    <div className="flex gap-2">
+      <TokenLogoWithChain
+        token={token}
+        chain={chain}
+        tokenLogoClassName="min-w-9 w-9"
+        generatedLogoClassName="min-w-9 w-9 text-[16px]"
+        chainLogoClassName="min-w-5 w-5"
+      />
+      <div className="flex flex-col text-[12px]">
+        <div className="text-white text-nowrap">
+          {`${Number(amount) < 0.0001 ? "<0.0001" : amount} ${
+            token?.symbol ? token?.symbol : "unknown"
+          }`}
+        </div>
+        <div className="text-xs text-x_gray_200">{chain?.displayName}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxDataCard/TxDataCardUI/index.tsx

@@ -0,0 +1,133 @@
+import {
+  faArrowRight,
+  faArrowUpRightFromSquare,
+  faHourglassHalf,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Timer, TimerDisplayFormat } from "@src/components";
+import { CCIP_EXPLORER } from "@src/constants";
+import { Chain, Token, Transaction } from "@src/models";
+import { weiToHumanReadable } from "@src/utils";
+import { format } from "date-fns";
+import { useCallback } from "react";
+import { TokenDetails } from "../TokenDetails";
+
+interface Props {
+  transaction: Transaction;
+  supportedChains: Chain[];
+  srcToken?: Token;
+  dstToken?: Token;
+}
+
+export const TxDataCardUI = ({
+  transaction,
+  supportedChains,
+  srcToken,
+  dstToken,
+}: Props) => {
+  const getDate = useCallback((blockTimestamp: number) => {
+    // JS uses ms in timestamps
+    return format(new Date(blockTimestamp * 1000), "d MMM yyyy HH:mm:ss");
+  }, []);
+
+  const date = getDate(transaction.timestamp);
+
+  const transferredAmount = weiToHumanReadable({
+    amount: transaction.amountWei,
+    decimals: srcToken?.decimals || 18,
+    precisionFractionalPlaces: 4,
+  });
+  const receivedAmount = weiToHumanReadable({
+    amount: transaction?.tokenOutAmount || "0",
+    decimals: dstToken?.decimals || 18,
+    precisionFractionalPlaces: 4,
+  });
+
+  const srcChain = supportedChains.find(
+    (chain) => chain.chainId === transaction.sourceChainId,
+  );
+
+  const dstChain = supportedChains.find(
+    (chain) => chain.chainId === transaction.targetChainId,
+  );
+
+  return (
+    <div className="flex flex-col border border-white border-opacity-10 rounded-lg bg-x_gray_500 p-4 gap-4 mb-2">
+      <div className="flex items-center gap-2 border-b border-solid border-white border-opacity-10 pb-1">
+        <div className="text-xs text-white opacity-60">{date}</div>
+        <div className="flex grow justify-end items-center h-6">
+          {transaction.status === "IN_PROGRESS" ? (
+            <div className="flex items-center grow justify-end text-xs">
+              <FontAwesomeIcon
+                icon={faHourglassHalf}
+                className="w-4 h-4 mr-1 text-[#FAC864]"
+              />
+              <div className="text-xs text-[#FAC864] min-w-[108px]">
+                In progress (
+                <Timer
+                  displayFormat={TimerDisplayFormat.Minutes}
+                  expiryTimestamp={
+                    new Date(transaction.estimatedDeliveryTimestamp)
+                  }
+                  customTextOnExpire="finalizing"
+                />
+                )
+              </div>
+            </div>
+          ) : transaction.status === "DONE" ? (
+            <div className="flex items-center grow justify-end text-xs">
+              <div className=" mr-1 text-[#64C864]">Done</div>
+            </div>
+          ) : transaction.status === "REVERTED" ? (
+            <div className="flex items-center grow justify-end text-xs">
+              <div className="w-4 h-4 mr-1 text-[#FF6464]">Reverted</div>
+            </div>
+          ) : null}
+
+          <a
+            href={`${
+              transaction.messageId
+                ? `${CCIP_EXPLORER}${transaction.messageId}`
+                : `${
+                    supportedChains.find(
+                      (chain) => chain.chainId === transaction.sourceChainId,
+                    )?.transactionExplorer
+                  }/${transaction.hash}`
+            } `}
+            target="_blank"
+            rel="noreferrer"
+            className="no-underline ml-1.5 text-white "
+            aria-label="Show the transaction in the chain explorer"
+          >
+            <FontAwesomeIcon
+              icon={faArrowUpRightFromSquare}
+              className="w-[14px] h-[14px] text-white"
+            />
+          </a>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-8">
+        <div className="flex items-center gap-2">
+          <TokenDetails
+            chain={srcChain}
+            token={srcToken}
+            amount={transferredAmount}
+          />
+          {transaction.tokenOutAddress && (
+            <>
+              <FontAwesomeIcon
+                icon={faArrowRight}
+                className="w-5 h-5 text-white opacity-60 mx-1.5"
+              />
+              <TokenDetails
+                chain={dstChain}
+                token={dstToken}
+                amount={receivedAmount}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/TxDataCard/index.tsx

@@ -0,0 +1,30 @@
+import { useSwapContext } from "@src/context";
+import { Transaction } from "@src/models";
+import { TxDataCardUI } from "./TxDataCardUI";
+
+interface Props {
+  transaction: Transaction;
+}
+
+export const TxDataCard = ({ transaction }: Props) => {
+  const { supportedChains, findTokenDataByAddressAndChain } = useSwapContext();
+
+  const srcToken = findTokenDataByAddressAndChain(
+    transaction.tokenAddress.toLowerCase(),
+    transaction.sourceChainId,
+  );
+  const dstToken = transaction.tokenOutAddress
+    ? findTokenDataByAddressAndChain(
+        transaction.tokenOutAddress?.toLowerCase(),
+        transaction.targetChainId,
+      )
+    : undefined;
+  return (
+    <TxDataCardUI
+      transaction={transaction}
+      supportedChains={supportedChains}
+      srcToken={srcToken}
+      dstToken={dstToken}
+    />
+  );
+};

package/src/components/TxStatusButton/index.tsx

@@ -1,125 +1,73 @@
-import { FC, useMemo, useState } from "react";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CheckIcon,
-  CircularProgressIcon,
-  ArrowUpRightIcon,
-  XSwapLogo,
-} from "../icons";
-import { MonitoredTransaction } from "@src/models";
+import { ArrowLeftIcon, CheckIcon, XSwapLogo } from "@src/assets/icons";
 import { xpayTxStatusRoot } from "@src/config";
-import { UnknownTokenLogo } from "../UnknownTokenLogo/UnknownTokenLogo";
+import { Chain, Token, Transaction } from "@src/models";
+import { FC, useMemo, useState } from "react";
 import { Spinner } from "../Spinner";
+import { TxDataCardUI } from "../TxDataCard/TxDataCardUI";
 
 interface Props {
-  transaction: MonitoredTransaction;
+  transaction: Transaction;
+  supportedChains: Chain[];
+  srcToken?: Token;
+  dstToken?: Token;
 }
 
-export const TxStatusButton: FC<Props> = ({ transaction }) => {
-  const {
-    srcChain: fromChain,
-    srcChainImage: fromChainImage,
-    srcToken: fromToken,
-    srcTokenImage: fromTokenImage,
-    srcAmount: fromAmount,
-    dstChain: toChain,
-    dstChainImage: toChainImage,
-    isDone,
-    explorer,
-  } = transaction;
+export const TxStatusButton: FC<Props> = ({
+  transaction,
+  supportedChains,
+  srcToken,
+  dstToken,
+}) => {
   const [isWide, setIsWide] = useState(false);
 
   const background = useMemo(
     () =>
-      isDone
-        ? "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(76,175,80,0.2)] xpay-to-[rgba(46,125,50,0.2)]"
-        : "xpay-bg-[rgba(2,2,2,1)] xpay-bg-gradient-to-r xpay-from-[rgba(54,129,198,0.2)] xpay-to-[rgba(43,74,157,0.2)]",
-    [isDone],
+      transaction?.status === "DONE"
+        ? "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(76,175,80,0.2)] to-[rgba(46,125,50,0.2)]"
+        : "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(54,129,198,0.2)] to-[rgba(43,74,157,0.2)]",
+    [transaction],
   );
 
   const border = useMemo(
     () =>
-      isDone
-        ? "xpay-border xpay-border-solid xpay-border-x_green_dark"
-        : "xpay-border xpay-border-solid xpay-border-x_blue_dark",
-    [isDone],
+      transaction?.status === "DONE"
+        ? "border border-solid border-x_green_dark"
+        : "border border-solid border-x_blue_dark",
+    [transaction],
   );
 
   return (
     <div
-      className="xpay-flex xpay-gap-2"
+      className="flex gap-2 items-end justify-end flex-wrap"
       onClick={() => setIsWide((x: boolean) => !x)}
     >
       {isWide && (
-        <div
-          className={`xpay-flex xpay-items-center xpay-min-w-60 sm:xpay-w-[520px] xpay-text-white xpay-h-14 xpay-px-4 xpay-text-sm xpay-gap-3 xpay-rounded-xl ${background} ${border}`}
-        >
-          <div className="xpay-flex xpay-justify-between xpay-flex-col xpay-gap-2 sm:xpay-gap-5 sm:xpay-flex-row xpay-w-full">
-            <div className="xpay-flex xpay-items-center xpay-gap-2">
-              <img
-                className="xpay-w-5 xpay-h-5"
-                src={fromChainImage}
-                alt="source chain"
-              />
-              <div>{fromChain}</div>
-              <div className="xpay-w-3.5 xpay-h-3.5">
-                <ArrowRightIcon />
-              </div>
-              <img
-                className="xpay-w-5 xpay-h-5"
-                src={toChainImage}
-                alt="to chain"
-              />
-              <div>{toChain}</div>
-            </div>
-
-            <div className="xpay-flex xpay-items-center xpay-gap-2">
-              <div>Sent</div>
-              <div>{fromAmount}</div>
-              <div>{fromToken}</div>
-
-              {fromTokenImage ? (
-                <img
-                  className="xpay-w-5 xpay-h-5"
-                  src={fromTokenImage}
-                  alt="source token"
-                />
-              ) : (
-                <UnknownTokenLogo tokenName={"?"} />
-              )}
-            </div>
-          </div>
-          <a
-            href={explorer}
-            target="_blank"
-            rel="noreferrer"
-            className="xpay-no-underline xpay-cursor-pointer"
-            aria-label="Show the transaction in the chain explorer"
-          >
-            <div className="xpay-w-3.5 xpay-h-3.5">
-              <ArrowUpRightIcon />
-            </div>
-          </a>
-        </div>
+        <TxDataCardUI
+          transaction={transaction}
+          supportedChains={supportedChains}
+          srcToken={srcToken}
+          dstToken={dstToken}
+        />
       )}
       <div
-        className={`xpay-text-white xpay-rounded-xl xpay-cursor-pointer ${background} ${border}`}
+        className={`text-white rounded-xl h-14 w-20  mb-2 cursor-pointer ${background} ${border}`}
       >
-        <div className="xpay-flex xpay-gap-2 xpay-items-center xpay-h-14 xpay-w-20 xpay-justify-center">
-          <ArrowLeftIcon />
-          <div className="xpay-relative xpay-flex xpay-items-center xpay-justify-center xpay-w-9 xpay-h-9">
-            {isDone ? (
-              <div className="xpay-text-x_green xpay-w-5 xpay-h-5">
+        <div className="flex gap-2 items-center h-14 w-20 justify-center fill-white">
+          <div className={`${isWide ? "rotate-180" : ""}`}>
+            <ArrowLeftIcon />
+          </div>
+          <div className="relative flex items-center justify-center w-9 h-9">
+            {transaction?.status === "DONE" ? (
+              <div className="w-5 h-5 fill-x_green_400">
                 <CheckIcon />
               </div>
             ) : (
               <>
-                <div className="xpay-w-5 xpay-h-5">
+                <div className="w-5 h-5">
                   <XSwapLogo />
                 </div>
-                <div className="xpay-absolute xpay-flex xpay-items-center xpay-justify-center xpay-top-0 xpay-left-0 xpay-right-0 xpay-bottom-0 xpay-text-white">
-                  <Spinner width="10" height="10" />
+                <div className="absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white">
+                  <Spinner className="w-10 h-10" />
                 </div>
               </>
             )}
@@ -130,34 +78,42 @@ export const TxStatusButton: FC<Props> = ({ transaction }) => {
   );
 };
 
-let renderedTransactions: MonitoredTransaction[] = [];
+let renderedTransactions: Props[] = [];
 
-export const addTransactionToRenderedTransactions = (
-  transaction: MonitoredTransaction,
-) => {
-  if (!renderedTransactions.some(({ txHash }) => txHash === transaction.txHash))
+export const addTransactionToRenderedTransactions = (transaction: Props) => {
+  if (
+    !renderedTransactions.some(
+      ({ transaction }) => transaction.hash === transaction.hash,
+    )
+  )
     renderedTransactions.push(transaction);
 };
 
-export const removeTransactionFromRenderedTransactions = (txHash: string) => {
+export const removeTransactionFromRenderedTransactions = (hash: string) => {
   const filteredRenderedTransactions = renderedTransactions.filter(
-    (item) => item.txHash !== txHash,
+    (item) => item.transaction.hash !== hash,
   );
   renderedTransactions = [...filteredRenderedTransactions];
 };
 
-export const updateTransactionDoneInRenderedTransactions = (txHash: string) => {
-  const transaction = renderedTransactions.find(
-    (item) => item.txHash === txHash,
-  );
-  if (transaction) {
-    transaction.isDone = true;
-  }
+export const updateTransactionDoneInRenderedTransactions = (hash: string) => {
+  renderedTransactions = renderedTransactions.map((item) => {
+    if (item.transaction.hash === hash) {
+      return {
+        ...item,
+        transaction: {
+          ...item.transaction,
+          status: "DONE",
+        },
+      };
+    }
+    return item;
+  });
 };
 
 export const renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => (
-    <TxStatusButton key={item.txHash} transaction={item} />
+    <TxStatusButton key={item.transaction.hash} {...item} />
   ));
 
   if (xpayTxStatusRoot === null) {
@@ -165,7 +121,7 @@ export const renderTxStatusButtons = () => {
   }
 
   xpayTxStatusRoot.render(
-    <div className="xpay-fixed xpay-bottom-5 xpay-right-2 xpay-flex xpay-flex-col xpay-gap-3 xpay-pl-9 xpay-items-end xpay-w-full xpay-z-50">
+    <div className="fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50">
       {buttons}
     </div>,
   );