@xswap-link/sdk 0.3.5 → 0.4.0

package/src/context/HistoryProvider.tsx

@@ -0,0 +1,339 @@
+import { CloseIcon } from "@src/assets/icons";
+import { Button, SnackMessage } from "@src/components";
+import {
+  CCIP_EXPLORER,
+  FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
+  crosschainEstimationTimes,
+} from "@src/constants";
+import { useDebounce } from "@src/hooks";
+import { Transaction, TransactionStatus } from "@src/models";
+import { getHistory } from "@src/services";
+import BigNumberJS from "bignumber.js";
+import { closeSnackbar, useSnackbar } from "notistack";
+import {
+  Context,
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useAccount } from "wagmi";
+
+export interface HistoryState {
+  history: Transaction[];
+  addTransactionToLocalHistory: (
+    transaction: Transaction,
+    userAddress: string,
+  ) => void;
+  updateTransactionInLocalHistory: (
+    transaction: Transaction,
+    userAddress: string,
+  ) => void;
+  historyLoadedOnce: boolean;
+}
+
+const HistoryContext: Context<HistoryState> = createContext<HistoryState>(
+  {} as HistoryState,
+);
+
+interface HistoryProviderProps {
+  children: ReactNode;
+}
+
+const PENDING_TXS_LOCAL_STORAGE_KEY = "pending_transactions";
+
+type LocalHistory = { [walletAddress: string]: Transaction[] };
+
+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));
+};
+
+export const HistoryProvider = ({ children }: HistoryProviderProps) => {
+  const { address } = useAccount();
+
+  const [history, setHistory] = useState<Transaction[]>([]);
+  const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
+
+  const { enqueueSnackbar } = useSnackbar();
+  const { debounce: getHistoryDebounce } = useDebounce({
+    delayMs: 600,
+  });
+
+  useEffect(() => {
+    // @TODO remove this line after some time.
+    // It is just to clean up users' browsers from the previous leaderboard implementation.
+    localStorage.removeItem("transactions-history");
+  }, []);
+
+  const fetchHistory = useCallback(async () => {
+    try {
+      if (!address) {
+        return;
+      }
+
+      const fetchedHistory = await getHistory({
+        walletAddress: address,
+      });
+      const fetchedTransactions: Transaction[] = [];
+
+      for (const entry of fetchedHistory.history) {
+        if (!entry.source) {
+          // In case some processing misalignments that might cause source to be null for a brief moment.
+          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 || "0").gt(0)
+        ) {
+          estimatedDeliveryTimestamp = timestampMs + 30 * 1000;
+        } else {
+          const blockchainEstimate =
+            timestampMs +
+            crosschainEstimationTimes?.[entry.source.blockchainId]?.[
+              entry.source.targetBlockchainId
+            ];
+
+          if (blockchainEstimate) {
+            estimatedDeliveryTimestamp = blockchainEstimate;
+          }
+        }
+
+        fetchedTransactions.push({
+          messageId: entry.messageId,
+          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: LocalHistory = {};
+
+      for (const [walletAddress, transactions] of Object.entries(
+        localHistory,
+      )) {
+        if (
+          walletAddress.toLowerCase().toLowerCase() !== address.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
+            // @ts-ignore
+            txHashToTxFromAPI[transaction.hash].status = "DONE";
+          }
+
+          if (
+            // @ts-ignore
+            txHashToTxFromAPI[transaction.hash].status === "DONE" ||
+            // @ts-ignore
+            txHashToTxFromAPI[transaction.hash].status === "REVERTED"
+          ) {
+            // API has the same or newer data.
+            continue;
+          }
+        }
+
+        newLocalHistory[walletAddress.toLowerCase()] = newLocalHistoryForWallet;
+      }
+      setLocalHistory(newLocalHistory);
+      setHistory(fetchedTransactions.sort((a, b) => b.timestamp - a.timestamp));
+    } catch (err) {
+      console.error(err);
+      enqueueSnackbar(
+        <SnackMessage
+          message={{
+            text: `Failed to fetch history!`,
+            variant: "error",
+          }}
+        />,
+        { persist: false },
+      );
+    } finally {
+      setHistoryLoadedOnce(true);
+    }
+  }, [address, getHistory, enqueueSnackbar]);
+
+  useEffect(() => {
+    if (!historyLoadedOnce) {
+      getHistoryDebounce(fetchHistory);
+    }
+    const timer = setInterval(() => {
+      getHistoryDebounce(fetchHistory);
+    }, 60000);
+    return () => clearInterval(timer);
+  }, [
+    address,
+    fetchHistory,
+    getHistory,
+    getHistoryDebounce,
+    historyLoadedOnce,
+  ]);
+
+  const addTransactionToLocalHistory = useCallback(
+    (transaction: Transaction, userAddress: string) => {
+      setHistory((prevHistory) => {
+        // Remove old tx, if it exists already. It's very unlikely though.
+        const clearedPrevHistory = prevHistory.filter(
+          (historyTransaction) => historyTransaction.hash !== transaction.hash,
+        );
+
+        const localHistory = getLocalHistory();
+        setLocalHistory({
+          ...localHistory,
+          [userAddress]: [transaction, ...clearedPrevHistory],
+        });
+
+        return [transaction, ...clearedPrevHistory];
+      });
+    },
+    [],
+  );
+
+  const showSnackbarForDoneTx = useCallback(
+    (messageId: string) => {
+      enqueueSnackbar(
+        <SnackMessage
+          message={{
+            text: `Destination chain transaction mined successfully!`,
+            variant: "success",
+            action: () => (
+              <div className="flex items-center flex-nowrap">
+                <Button
+                  type="button"
+                  onClick={() => {
+                    window.open(`${CCIP_EXPLORER}${messageId}`);
+                  }}
+                >
+                  View
+                </Button>
+
+                <div
+                  className="transaction-provider__close fill-white leading-[0px]"
+                  onClick={() => closeSnackbar(messageId)}
+                >
+                  <CloseIcon />
+                </div>
+              </div>
+            ),
+          }}
+        />,
+        { persist: false, key: messageId },
+      );
+    },
+    [enqueueSnackbar],
+  );
+
+  const updateTransactionInLocalHistory = useCallback(
+    (transaction: Transaction, userAddress: string) => {
+      setHistory((prevHistory) => {
+        const newHistory = prevHistory.map((historyTransaction) =>
+          historyTransaction.hash === transaction.hash &&
+          historyTransaction.status !== "DONE"
+            ? transaction
+            : historyTransaction,
+        );
+
+        const localHistory = getLocalHistory();
+        setLocalHistory({
+          ...localHistory,
+          [userAddress]: [...newHistory],
+        });
+
+        switch (transaction.status) {
+          case "DONE": {
+            showSnackbarForDoneTx(transaction.hash);
+            break;
+          }
+          case "REVERTED": {
+            // @TODO Add some modal when frontend starts listening for the event
+            break;
+          }
+        }
+
+        return [...newHistory];
+      });
+    },
+    [showSnackbarForDoneTx],
+  );
+
+  useEffect(() => {
+    setHistoryLoadedOnce(false);
+    setHistory([]);
+  }, [address]);
+
+  const state = useMemo<HistoryState>(
+    () => ({
+      history,
+      addTransactionToLocalHistory,
+      updateTransactionInLocalHistory,
+      historyLoadedOnce,
+    }),
+    [
+      history,
+      addTransactionToLocalHistory,
+      updateTransactionInLocalHistory,
+      historyLoadedOnce,
+    ],
+  );
+
+  return (
+    <HistoryContext.Provider value={state}>{children}</HistoryContext.Provider>
+  );
+};
+
+export function useHistory(): HistoryState {
+  return useContext(HistoryContext);
+}

package/src/context/ModalProvider.tsx

@@ -0,0 +1,47 @@
+import { createContext, FC, ReactNode, useContext, useState } from "react";
+
+interface ModalState {
+  openModal: (modalContent: ReactNode) => void;
+  closeModal: () => void;
+}
+
+const ModalContext = createContext<ModalState>({
+  openModal: () => {
+    throw new Error(`openModal is not implemented`);
+  },
+  closeModal: () => {
+    throw new Error(`closeModal is not implemented`);
+  },
+});
+
+export const ModalProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [content, setContent] = useState<ReactNode | null>(null);
+
+  const openModal = (modalContent: ReactNode) => {
+    setContent(modalContent);
+  };
+
+  const closeModal = () => {
+    setContent(null);
+  };
+
+  return (
+    <ModalContext.Provider value={{ openModal, closeModal }}>
+      {children}
+      {content && (
+        <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">
+          <div
+            className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 bg-x_gray_600 x-border rounded-3xl p-4 w-full min-w-[340px]"
+            style={{ maxWidth: "480px" }}
+          >
+            {content}
+          </div>
+        </div>
+      )}
+    </ModalContext.Provider>
+  );
+};
+
+export const useModal = () => {
+  return useContext(ModalContext);
+};