876: Allow pending transactions to be saved in localStorage (and big refactor)

src/components/@widgets/MakeWidget/MakeWidget.tsx

@@ -17,10 +17,8 @@ import nativeCurrency, {
 import { InterfaceContext } from "../../../contexts/interface/Interface";
 import { AppErrorType } from "../../../errors/appError";
 import { selectBalances } from "../../../features/balances/balancesSlice";
-import {
-  fetchIndexerUrls,
-  selectIndexerReducer,
-} from "../../../features/indexer/indexerSlice";
+import { fetchIndexerUrls } from "../../../features/indexer/indexerActions";
+import { selectIndexerReducer } from "../../../features/indexer/indexerSlice";
 import { createOtcOrder } from "../../../features/makeOtc/makeOtcActions";
 import {
   clearLastUserOrder,
@@ -33,11 +31,8 @@ import {
   selectAllTokenInfo,
   selectProtocolFee,
 } from "../../../features/metadata/metadataSlice";
-import {
-  approve,
-  deposit,
-  selectOrdersStatus,
-} from "../../../features/orders/ordersSlice";
+import { approve, deposit } from "../../../features/orders/ordersActions";
+import { selectOrdersStatus } from "../../../features/orders/ordersSlice";
 import {
   selectUserTokens,
   setUserTokens,
@@ -311,27 +306,19 @@ const MakeWidget: FC = () => {
         ? wrappedNativeToken
         : makerTokenInfo;
 
-    dispatch(
-      approve({
-        token: justifiedToken!,
-        library,
-        contractType: "Swap",
-        chainId: chainId!,
-        amount: makerAmountPlusFee,
-      })
-    );
+    dispatch(approve(makerAmountPlusFee, justifiedToken!, library!, "Swap"));
   };
 
   const depositNativeToken = async () => {
-    const result = await dispatch(
-      deposit({
-        chainId: chainId!,
-        senderAmount: shouldDepositNativeTokenAmount!,
-        senderTokenDecimals: makerTokenInfo!.decimals,
-        provider: library!,
-      })
+    dispatch(
+      deposit(
+        shouldDepositNativeTokenAmount!,
+        makerTokenInfo!,
+        wrappedNativeToken!,
+        chainId!,
+        library!
+      )
     );
-    await unwrapResult(result);
   };
 
   const handleEditButtonClick = () => {

src/components/@widgets/MyOrdersWidget/MyOrdersWidget.tsx

@@ -15,7 +15,7 @@ import {
   selectMyOrdersReducer,
   setActiveSortType,
 } from "../../../features/myOrders/myOrdersSlice";
-import { getNonceUsed } from "../../../features/orders/orderApi";
+import { getNonceUsed } from "../../../features/orders/ordersHelpers";
 import { cancelOrder } from "../../../features/takeOtc/takeOtcActions";
 import switchToDefaultChain from "../../../helpers/switchToDefaultChain";
 import { AppRoutes } from "../../../routes";

src/components/@widgets/OrderDetailWidget/OrderDetailWidget.tsx

@@ -6,28 +6,24 @@ import { useHistory, useLocation, useParams } from "react-router-dom";
 import { FullOrderERC20, ADDRESS_ZERO } from "@airswap/utils";
 import { Web3Provider } from "@ethersproject/providers";
 import { useToggle } from "@react-hookz/web";
-import { unwrapResult } from "@reduxjs/toolkit";
 import { UnsupportedChainIdError, useWeb3React } from "@web3-react/core";
 
 import { BigNumber } from "bignumber.js";
 
 import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import { InterfaceContext } from "../../../contexts/interface/Interface";
-import { AppErrorType } from "../../../errors/appError";
-import { selectIndexerReducer } from "../../../features/indexer/indexerSlice";
 import {
-  getFilteredOrders,
   fetchIndexerUrls,
-} from "../../../features/indexer/indexerSlice";
+  getFilteredOrders,
+} from "../../../features/indexer/indexerActions";
+import { selectIndexerReducer } from "../../../features/indexer/indexerSlice";
 import { selectMyOrdersReducer } from "../../../features/myOrders/myOrdersSlice";
-import { check } from "../../../features/orders/orderApi";
+import { approve, deposit, take } from "../../../features/orders/ordersActions";
+import { check } from "../../../features/orders/ordersHelpers";
 import {
-  approve,
   clear,
-  deposit,
   selectOrdersErrors,
   selectOrdersStatus,
-  take,
 } from "../../../features/orders/ordersSlice";
 import {
   reset,
@@ -200,53 +196,38 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
 
   const takeOrder = async () => {
     if (!library) return;
+
     const errors = await check(
       order,
       order.senderWallet,
       order.chainId,
       library
     );
+
     if (errors.length) {
       dispatch(setErrors(errors));
       return;
     }
 
-    await dispatch(
-      take({
-        order,
-        library: library,
-        contractType: "Swap",
-        onExpired: () => {},
-      })
-    );
+    await dispatch(take(order, signerToken!, senderToken!, library, "Swap"));
   };
 
   const approveToken = () => {
-    if (!senderToken || !senderAmount) {
+    if (!senderToken || !senderAmount || !library) {
       return;
     }
 
-    dispatch(
-      approve({
-        token: senderToken,
-        library,
-        contractType: "Swap",
-        chainId: chainId!,
-        amount: senderAmount,
-      })
-    );
+    dispatch(approve(senderAmount, senderToken, library, "Swap"));
   };
 
   const depositNativeToken = async () => {
-    const result = await dispatch(
-      deposit({
-        chainId: chainId!,
-        senderAmount: shouldDepositNativeTokenAmount!,
-        senderTokenDecimals: senderToken!.decimals,
-        provider: library!,
-      })
+    deposit(
+      shouldDepositNativeTokenAmount!,
+      senderToken!,
+      wrappedNativeToken!,
+      chainId!,
+      library!
     );
-    await unwrapResult(result);
   };
 
   const restart = () => {

src/components/@widgets/OrderDetailWidget/hooks/useOrderStatus.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { FullOrderERC20 } from "@airswap/utils";
 
 import { useAppSelector } from "../../../../app/hooks";
-import { getNonceUsed } from "../../../../features/orders/orderApi";
+import { getNonceUsed } from "../../../../features/orders/ordersHelpers";
 import { selectPendingTransactions } from "../../../../features/transactions/transactionsSlice";
 import useCancellationSuccess from "../../../../hooks/useCancellationSuccess";
 import useDefaultLibrary from "../../../../hooks/useDefaultLibrary";

src/components/@widgets/OrderDetailWidget/hooks/useSessionOrderTransaction.ts

@@ -1,10 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 
 import { useAppSelector } from "../../../../app/hooks";
-import {
-  selectOrderTransactions,
-  SubmittedTransaction,
-} from "../../../../features/transactions/transactionsSlice";
+import { SubmittedTransaction } from "../../../../entities/SubmittedTransaction/SubmittedTransaction";
+import { selectOrderTransactions } from "../../../../features/transactions/transactionsSlice";
 
 // This hook is very similar to useOrderTransaction but it will only return transactions that have been added since the component was mounted.