888: Refactor of useHistoricalTransactions

airswap · Mar 29, 2024 · efab39c · efab39c
1 parent efd735d
commit efab39c
Show file tree

Hide file tree

Showing 19 changed files with 424 additions and 443 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@airswap/libraries": "4.3.4",
+    "@airswap/pool": "^4.2.2",
     "@craco/craco": "^6.2.0",
     "@fontsource/dm-mono": "^4.5.0",
     "@greypixel_/nicenumbers": "^0.0.18",

diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
@@ -9,9 +9,9 @@ import { useAppDispatch } from "../../app/hooks";
 import { WalletProvider } from "../../constants/supportedWalletProviders";
 import { InterfaceContext } from "../../contexts/interface/Interface";
 import { clear, setResetStatus } from "../../features/orders/ordersSlice";
+import useHistoricalTransactions from "../../features/transactions/hooks/useHistoricalTransactions";
+import useTransactionsFilterFromLocalStorage from "../../features/transactions/hooks/useTransactionsFilterFromLocalStorage";
 import { useTransactions } from "../../features/transactions/transactionsHooks";
-import useHistoricalTransactions from "../../features/transactions/useHistoricalTransactions";
-import useTransactionsFilterFromLocalStorage from "../../features/transactions/useTransactionsFilterFromLocalStorage";
 import { Wallet } from "../../features/wallet/Wallet";
 import { setActiveProvider } from "../../features/wallet/walletSlice";
 import useAppRouteParams from "../../hooks/useAppRouteParams";
@@ -46,7 +46,6 @@ const Page: FC<PageProps> = ({ children, className }): ReactElement => {
   } = useContext(InterfaceContext);
 
   useTransactions();
-  // useHistoricalTransactions();
   useTransactionsFilterFromLocalStorage();
 
   useKeyPress(() => setShowMobileToolbar(false), ["Escape"]);

diff --git a/src/components/TransactionsTab/TransactionsTab.tsx b/src/components/TransactionsTab/TransactionsTab.tsx
@@ -238,7 +238,7 @@ const TransactionsTab = ({
             </LegendContainer>
             <TransactionContainer>
               <AnimatePresence initial={false}>
-                {completedTransactions.slice(0, 10).map((transaction) => (
+                {completedTransactions.map((transaction) => (
                   <AnimatedWalletTransaction
                     key={`${transaction.hash}-${transaction.nonce}-${transaction.expiry}`}
                     transaction={transaction}

diff --git a/src/contexts/lastLook/LastLook.tsx b/src/contexts/lastLook/LastLook.tsx
@@ -183,6 +183,7 @@ const LastLookProvider: FC = ({ children }) => {
       const senderToken = tokens.find((t) => t.address === order.senderToken);
 
       const transaction = transformToSubmittedLastLookOrder(
+        undefined,
         order,
         signerToken!,
         senderToken!

diff --git a/src/entities/OrderERC20/OrderERC20Transformers.ts b/src/entities/OrderERC20/OrderERC20Transformers.ts
@@ -0,0 +1,19 @@
+import { OrderERC20, Signature } from "@airswap/utils";
+import { FullSwapERC20 } from "@airswap/utils/build/src/swap-erc20";
+
+export const transformFullSwapERC20ToOrderERC20 = (
+  swap: FullSwapERC20,
+  nonce: string,
+  signature: Signature = { v: "", r: "", s: "" }
+): OrderERC20 => {
+  return {
+    nonce,
+    expiry: Math.round(+nonce / 1000).toString(),
+    signerWallet: swap.signerWallet,
+    signerToken: swap.signerToken,
+    signerAmount: swap.signerAmount,
+    senderToken: swap.senderToken,
+    senderAmount: swap.senderAmount,
+    ...signature,
+  };
+};
diff --git a/src/entities/SubmittedTransaction/SubmittedTransactionHelpers.ts b/src/entities/SubmittedTransaction/SubmittedTransactionHelpers.ts
@@ -45,3 +45,10 @@ export const isOrderTransaction = (
     isLastLookOrderTransaction(transaction)
   );
 };
+
+export const sortSubmittedTransactionsByExpiry = (
+  a: SubmittedTransaction,
+  b: SubmittedTransaction
+) => {
+  return b.timestamp - a.timestamp;
+};
diff --git a/src/entities/SubmittedTransaction/SubmittedTransactionTransformers.ts b/src/entities/SubmittedTransaction/SubmittedTransactionTransformers.ts
@@ -79,37 +79,41 @@ export const transformToSubmittedRFQOrder = (
   order: OrderERC20,
   signerToken: TokenInfo,
   senderToken: TokenInfo,
-  status: StatusType = "processing"
+  status: StatusType = "processing",
+  timestamp = Date.now()
 ): SubmittedRFQOrder => {
   return {
     type: "Order",
     expiry: order.expiry,
-    hash: hash,
+    hash,
     nonce: order.nonce,
     order,
     protocol: "request-for-quote-erc20",
     senderToken,
     signerToken,
     status,
-    timestamp: Date.now(),
+    timestamp,
   };
 };
 
 export const transformToSubmittedLastLookOrder = (
+  hash: string | undefined,
   order: OrderERC20,
   signerToken: TokenInfo,
   senderToken: TokenInfo,
-  status: StatusType = "processing"
+  status: StatusType = "processing",
+  timestamp = Date.now()
 ): SubmittedLastLookOrder => {
   return {
     type: "Order",
     expiry: order.expiry,
+    hash,
     nonce: order.nonce,
     order,
     protocol: "last-look-erc20",
     senderToken,
     signerToken,
     status,
-    timestamp: Date.now(),
+    timestamp,
   };
 };
diff --git a/src/features/transactions/hooks/useHistoricalTransactions.ts b/src/features/transactions/hooks/useHistoricalTransactions.ts
@@ -0,0 +1,104 @@
+import { useMemo, useState } from "react";
+
+import { useAppSelector } from "../../../app/hooks";
+import { SubmittedTransaction } from "../../../entities/SubmittedTransaction/SubmittedTransaction";
+import { sortSubmittedTransactionsByExpiry } from "../../../entities/SubmittedTransaction/SubmittedTransactionHelpers";
+import { transformToSubmittedRFQOrder } from "../../../entities/SubmittedTransaction/SubmittedTransactionTransformers";
+import { getUniqueArrayChildren } from "../../../helpers/array";
+import { getOrdersFromLogs } from "../../../helpers/getOrdersFromLogs";
+import { selectAllTokenInfo } from "../../metadata/metadataSlice";
+import useSwapLogs from "./useSwapLogs";
+
+interface HistoricalTransactionsCollection {
+  chainId: number;
+  account: string;
+  transactions: SubmittedTransaction[];
+}
+
+const useHistoricalTransactions = (
+  chainId?: number,
+  account?: string
+): [HistoricalTransactionsCollection | undefined, boolean] => {
+  const tokens = useAppSelector(selectAllTokenInfo);
+  const { result: swapLogs, status: swapLogStatus } = useSwapLogs(
+    chainId,
+    account
+  );
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [transactions, setTransactions] =
+    useState<HistoricalTransactionsCollection>();
+
+  useMemo(() => {
+    if (
+      !chainId ||
+      !swapLogs ||
+      swapLogStatus === "loading" ||
+      swapLogStatus === "not-executed" ||
+      swapLogs.chainId !== chainId ||
+      swapLogs.account !== account
+    ) {
+      return;
+    }
+
+    setIsLoading(true);
+    setTransactions(undefined);
+
+    const getTransactionsFromLogs = async () => {
+      const rfqOrders = await getOrdersFromLogs(chainId, swapLogs.swapLogs);
+      // TODO: Add support for lastLook orders https://github.com/airswap/airswap-web/issues/891
+      // const lastLookOrders = await getOrdersFromLogs(swapLogs.swapLogs);
+
+      const rfqSubmittedTransactions = rfqOrders
+        .filter(
+          (order) =>
+            order.params.signerWallet.toLowerCase() === account.toLowerCase() ||
+            order.senderWallet.toLowerCase() === account.toLowerCase()
+        )
+        .map((order) => {
+          const signerToken = tokens.find(
+            (token) => token.address === order.params.signerToken
+          );
+          const senderToken = tokens.find(
+            (token) => token.address === order.params.senderToken
+          );
+
+          if (!signerToken || !senderToken) return;
+
+          return transformToSubmittedRFQOrder(
+            order.hash,
+            order.params,
+            signerToken,
+            senderToken,
+            "succeeded",
+            order.timestamp
+          );
+        });
+
+      const transactions = rfqSubmittedTransactions.filter(
+        (order) => !!order
+      ) as SubmittedTransaction[];
+      const uniqueTransactions = getUniqueArrayChildren<SubmittedTransaction>(
+        transactions,
+        "nonce"
+      );
+
+      const sortedTransactions = uniqueTransactions.sort(
+        sortSubmittedTransactionsByExpiry
+      );
+
+      setIsLoading(false);
+      setTransactions({
+        chainId,
+        account,
+        transactions: sortedTransactions,
+      });
+    };
+
+    getTransactionsFromLogs();
+  }, [swapLogs, swapLogStatus]);
+
+  return [transactions, isLoading];
+};
+
+export default useHistoricalTransactions;
diff --git a/src/features/transactions/hooks/useSwapLogs.ts b/src/features/transactions/hooks/useSwapLogs.ts
@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+
+import { SwapERC20, Wrapper } from "@airswap/libraries";
+import { Contract } from "@ethersproject/contracts";
+import { useAsync } from "@react-hookz/web/esm";
+import { IAsyncState } from "@react-hookz/web/esm/useAsync/useAsync";
+import { useWeb3React } from "@web3-react/core";
+
+import { Event } from "ethers";
+import { providers } from "ethers";
+
+import getContractEvents from "../../../helpers/getContractEvents";
+
+interface SwapLogs {
+  swapLogs: Event[];
+  wrappedSwapLogs: Event[];
+  chainId: number;
+  account: string;
+}
+
+const useSwapLogs = (
+  chainId?: number,
+  account?: string
+): IAsyncState<SwapLogs | null> => {
+  const { library: provider } = useWeb3React<providers.Provider>();
+
+  const [accountState, setAccountState] = useState<string>();
+  const [chainIdState, setChainIdState] = useState<number>();
+
+  const [state, actions] = useAsync(
+    async (
+      swapContract: Contract,
+      wrapperContract: Contract,
+      account: string
+    ) => {
+      const signerSwapFilter = swapContract.filters.SwapERC20(null);
+      const wrapperSwapFilter = wrapperContract.filters.WrappedSwapFor(null);
+
+      const firstTxBlockSwapContract =
+        chainId && SwapERC20.deployedBlocks[chainId];
+      const firstTxBlockWrapperContract =
+        chainId && Wrapper.deployedBlocks[chainId];
+      const currentBlock = await provider?.getBlockNumber();
+
+      if (
+        !firstTxBlockSwapContract ||
+        !firstTxBlockWrapperContract ||
+        !currentBlock
+      ) {
+        throw new Error("Could not get block numbers");
+      }
+
+      const swapLogs = await getContractEvents(
+        swapContract,
+        signerSwapFilter,
+        firstTxBlockSwapContract,
+        currentBlock
+      );
+      const wrappedSwapLogs = await getContractEvents(
+        wrapperContract,
+        wrapperSwapFilter,
+        firstTxBlockWrapperContract,
+        currentBlock
+      );
+
+      return {
+        swapLogs,
+        wrappedSwapLogs,
+        chainId,
+        account,
+      };
+    },
+    null
+  );
+
+  useEffect(() => {
+    if (!chainId || !account || !provider) return;
+
+    if (account === accountState && chainId === chainIdState) return;
+
+    const swapContract = SwapERC20.getContract(provider, chainId);
+    const wrapperContract = Wrapper.getContract(provider, chainId);
+    actions.execute(swapContract, wrapperContract, account);
+
+    setAccountState(account);
+    setChainIdState(chainId);
+  }, [chainId, account, provider, actions]);
+
+  return state;
+};
+
+export default useSwapLogs;
diff --git a/.../useTransactionsFilterFromLocalStorage.ts → .../useTransactionsFilterFromLocalStorage.ts b/.../useTransactionsFilterFromLocalStorage.ts → .../useTransactionsFilterFromLocalStorage.ts
@@ -3,13 +3,13 @@ import { useEffect } from "react";
 import { useLocalStorageValue } from "@react-hookz/web/esm";
 import { useWeb3React } from "@web3-react/core";
 
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import {
   selectTransactionsFilter,
   setFilters,
   TransactionsState,
-} from "./transactionsSlice";
-import { getTransactionsFilterLocalStorageKey } from "./transactionsUtils";
+} from "../transactionsSlice";
+import { getTransactionsFilterLocalStorageKey } from "../transactionsUtils";
 
 const useTransactionsFilterFromLocalStorage = () => {
   const dispatch = useAppDispatch();

diff --git a/src/features/transactions/transactionsHooks.ts b/src/features/transactions/transactionsHooks.ts
@@ -4,6 +4,9 @@ import { useWeb3React } from "@web3-react/core";
 
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { SubmittedTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
+import { sortSubmittedTransactionsByExpiry } from "../../entities/SubmittedTransaction/SubmittedTransactionHelpers";
+import { getUniqueArrayChildren } from "../../helpers/array";
+import useHistoricalTransactions from "./hooks/useHistoricalTransactions";
 import { selectTransactions, setTransactions } from "./transactionsSlice";
 import {
   getLocalStorageTransactions,
@@ -14,13 +17,17 @@ import {
 export const useTransactions = (): void => {
   const dispatch = useAppDispatch();
 
-  const { account, library, chainId } = useWeb3React();
+  const { chainId, account, library } = useWeb3React();
   const transactions: SubmittedTransaction[] =
     useAppSelector(selectTransactions);
 
   const [activeListenerHashes, setActiveListenerHashes] = useState<string[]>(
     []
   );
+  const [historicalTransactions] = useHistoricalTransactions(
+    chainId,
+    account || undefined
+  );
 
   useEffect(() => {
     if (!account || !chainId || !library) {
@@ -53,4 +60,30 @@ export const useTransactions = (): void => {
 
     dispatch(setTransactions(getLocalStorageTransactions(account, chainId)));
   }, [account, chainId]);
+
+  useEffect(() => {
+    if (!historicalTransactions) {
+      return;
+    }
+
+    if (
+      historicalTransactions.chainId === chainId &&
+      historicalTransactions.account === account
+    ) {
+      const updatedTransactions = [
+        ...historicalTransactions.transactions,
+        ...transactions,
+      ];
+      // Remove duplicates, in favour of store transactions.
+      const uniqueTransactions = getUniqueArrayChildren<SubmittedTransaction>(
+        updatedTransactions,
+        "hash"
+      );
+      const sortedTransactions = uniqueTransactions.sort(
+        sortSubmittedTransactionsByExpiry
+      );
+
+      dispatch(setTransactions(sortedTransactions));
+    }
+  }, [historicalTransactions]);
 };