869: Speeding up the tx changes the tx id and is not tracked (#894)

src/App.tsx

@@ -13,6 +13,8 @@ import PageLoader from "./components/PageLoader/PageLoader";
 import Routes from "./components/Routes/Routes";
 import InterfaceProvider from "./contexts/interface/Interface";
 import LastLookProvider from "./contexts/lastLook/LastLook";
+import useTransactionsFilterFromLocalStorage from "./features/transactions/hooks/useTransactionsFilterFromLocalStorage";
+import { useTransactions } from "./features/transactions/transactionsHooks";
 import { selectTheme } from "./features/userSettings/userSettingsSlice";
 import useCustomServer from "./hooks/useCustomServer";
 import useSystemTheme from "./hooks/useSystemTheme";

src/components/@widgets/CancelWidget/CancelWidget.tsx

@@ -8,11 +8,7 @@ import { useWeb3React } from "@web3-react/core";
 
 import { useAppDispatch, useAppSelector } from "../../../app/hooks";
 import { cancelOrder } from "../../../features/takeOtc/takeOtcActions";
-import {
-  selectTakeOtcReducer,
-  selectTakeOtcStatus,
-  setIsCancelSuccessFull,
-} from "../../../features/takeOtc/takeOtcSlice";
+import { selectTakeOtcStatus } from "../../../features/takeOtc/takeOtcSlice";
 import useCancellationPending from "../../../hooks/useCancellationPending";
 import useCancellationSuccess from "../../../hooks/useCancellationSuccess";
 import { AppRoutes } from "../../../routes";
@@ -43,7 +39,6 @@ export const CancelWidget: FC<CancelWidgetProps> = ({ order, library }) => {
   const { chainId } = useWeb3React();
   const dispatch = useAppDispatch();
 
-  const { isCancelSuccessFull } = useAppSelector(selectTakeOtcReducer);
   const status = useAppSelector(selectTakeOtcStatus);
 
   const params = useParams<{ compressedOrder: string }>();
@@ -61,14 +56,12 @@ export const CancelWidget: FC<CancelWidgetProps> = ({ order, library }) => {
   };
 
   useEffect(() => {
-    if (isCancelSuccessFull && isCancelSuccess) {
+    if (isCancelSuccess) {
       history.push({
         pathname: `/${AppRoutes.order}/${params.compressedOrder}`,
       });
-
-      dispatch(setIsCancelSuccessFull(false));
     }
-  }, [history, params, isCancelSuccessFull, isCancelSuccess, dispatch]);
+  }, [isCancelSuccess]);
 
   const handleCancelClick = async () => {
     await dispatch(

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

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useAppSelector } from "../../../../app/hooks";
 import { SubmittedTransaction } from "../../../../entities/SubmittedTransaction/SubmittedTransaction";
 import { selectOrderTransactions } from "../../../../features/transactions/transactionsSlice";
+import { TransactionStatusType } from "../../../../types/transactionTypes";
 
 // This hook is very similar to useOrderTransaction but it will only return transactions that have been added since the component was mounted.
 
@@ -21,7 +22,7 @@ const useSessionOrderTransaction = (
 
     if (
       transactions[0].nonce === nonce &&
-      transactions[0].status === "processing"
+      transactions[0].status === TransactionStatusType.processing
     ) {
       setProcessingTransactionHash(transactions[0].hash);
     }

src/components/@widgets/SwapWidget/SwapWidget.tsx

@@ -98,6 +98,7 @@ import useTokenInfo from "../../../hooks/useTokenInfo";
 import useWithdrawalPending from "../../../hooks/useWithdrawalPending";
 import { AppRoutes } from "../../../routes";
 import { TokenSelectModalTypes } from "../../../types/tokenSelectModalTypes";
+import { TransactionStatusType } from "../../../types/transactionTypes";
 import ApproveReview from "../../@reviewScreens/ApproveReview/ApproveReview";
 import AvailableOrdersWidget from "../../AvailableOrdersWidget/AvailableOrdersWidget";
 import { ErrorList } from "../../ErrorList/ErrorList";
@@ -338,7 +339,7 @@ const SwapWidget: FC = () => {
   }, [hasDepositOrWithdrawalPending]);
 
   useEffect(() => {
-    if (activeTransaction?.status === "processing") {
+    if (activeTransaction?.status === TransactionStatusType.processing) {
       setShowOrderSubmitted(true);
       setIsSwapping(false);
     }
@@ -854,7 +855,8 @@ const SwapWidget: FC = () => {
             isWrapping={isWrapping}
             orderSubmitted={showOrderSubmitted}
             orderCompleted={
-              showOrderSubmitted && activeTransaction?.status === "succeeded"
+              showOrderSubmitted &&
+              activeTransaction?.status === TransactionStatusType.succeeded
             }
             requiresApproval={bestRfqOrder && shouldApprove}
             showViewAllQuotes={indexerOrders.length > 0}

src/components/OrderSubmittedScreen/OrderSubmittedScreen.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { SubmittedTransaction } from "../../entities/SubmittedTransaction/SubmittedTransaction";
+import { TransactionStatusType } from "../../types/transactionTypes";
 import { InfoSubHeading } from "../Typography/Typography";
 import {
   Container,
@@ -31,13 +32,13 @@ const OrderSubmittedScreen: FC<OrderSubmittedInfoProps> = ({
     <Container className={className}>
       <InfoContainer>
         <DoneAllIcon />
-        {transaction.status === "processing" && (
+        {transaction.status === TransactionStatusType.processing && (
           <>
             <StyledInfoHeading>{t("orders.submitted")}</StyledInfoHeading>
             <InfoSubHeading>{t("orders.trackTransaction")}</InfoSubHeading>
           </>
         )}
-        {transaction.status === "succeeded" && (
+        {transaction.status === TransactionStatusType.succeeded && (
           <>
             <StyledInfoHeading>
               {t("orders.transactionCompleted")}

src/components/Page/Page.tsx

@@ -9,9 +9,6 @@ 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 { Wallet } from "../../features/wallet/Wallet";
 import { setActiveProvider } from "../../features/wallet/walletSlice";
 import useAppRouteParams from "../../hooks/useAppRouteParams";
@@ -45,9 +42,6 @@ const Page: FC<PageProps> = ({ children, className }): ReactElement => {
     setShowWalletList,
   } = useContext(InterfaceContext);
 
-  useTransactions();
-  useTransactionsFilterFromLocalStorage();
-
   useKeyPress(() => setShowMobileToolbar(false), ["Escape"]);
 
   const reset = () => {

src/components/Routes/Routes.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { Route, Switch } from "react-router-dom";
 
+import { useTransactions } from "../../features/transactions/transactionsHooks";
 import Cancel from "../../pages/Cancel/Cancel";
 import MakePage from "../../pages/Make/Make";
 import MySwapsPage from "../../pages/MyOrders/MyOrders";
@@ -9,6 +10,8 @@ import SwapPage from "../../pages/Swap/Swap";
 import { AppRoutes } from "../../routes";
 
 const Routes: FC = () => {
+  useTransactions();
+
   return (
     <Switch>
       <Route path={`/${AppRoutes.make}`} component={MakePage} key="make" />

src/components/Toasts/ToastController.tsx

@@ -4,24 +4,23 @@ import { findTokenByAddress, FullOrderERC20, TokenInfo } from "@airswap/utils";
 
 import i18n from "i18next";
 
-import nativeCurrency from "../../constants/nativeCurrency";
 import {
   SubmittedApprovalTransaction,
   SubmittedDepositTransaction,
   SubmittedTransaction,
   SubmittedTransactionWithOrder,
   SubmittedWithdrawTransaction,
-  TransactionType,
 } from "../../entities/SubmittedTransaction/SubmittedTransaction";
 import findEthOrTokenByAddress from "../../helpers/findEthOrTokenByAddress";
+import { TransactionTypes } from "../../types/transactionTypes";
 import ConfirmationToast from "./ConfirmationToast";
 import CopyToast from "./CopyToast";
 import ErrorToast from "./ErrorToast";
 import OrderToast from "./OrderToast";
 import TransactionToast from "./TransactionToast";
 
 export const notifyTransaction = (
-  type: TransactionType,
+  type: TransactionTypes,
   transaction: SubmittedTransaction,
   tokens: TokenInfo[],
   error: boolean,
@@ -30,7 +29,9 @@ export const notifyTransaction = (
   let token: TokenInfo | null;
   // TODO: make a switch case to render a different toast for each case
   if (
-    (type === "Order" || type === "Deposit" || type === "Withdraw") &&
+    (type === TransactionTypes.order ||
+      type === TransactionTypes.deposit ||
+      type === TransactionTypes.withdraw) &&
     chainId
   ) {
     const tx: SubmittedTransactionWithOrder =
@@ -94,7 +95,7 @@ export const notifyApproval = (transaction: SubmittedApprovalTransaction) => {
     (t) => (
       <TransactionToast
         onClose={() => toast.dismiss(t.id)}
-        type="Approval"
+        type={TransactionTypes.approval}
         transaction={transaction}
         approvalToken={transaction.token}
       />
@@ -110,7 +111,7 @@ export const notifyDeposit = (transaction: SubmittedDepositTransaction) => {
     (t) => (
       <TransactionToast
         onClose={() => toast.dismiss(t.id)}
-        type="Deposit"
+        type={TransactionTypes.deposit}
         transaction={transaction}
         senderToken={transaction.senderToken}
         signerToken={transaction.signerToken}
@@ -127,7 +128,7 @@ export const notifyWithdrawal = (transaction: SubmittedWithdrawTransaction) => {
     (t) => (
       <TransactionToast
         onClose={() => toast.dismiss(t.id)}
-        type="Deposit"
+        type={TransactionTypes.withdraw}
         transaction={transaction}
         senderToken={transaction.senderToken}
         signerToken={transaction.signerToken}
@@ -144,7 +145,7 @@ export const notifyOrder = (transaction: SubmittedTransactionWithOrder) => {
     (t) => (
       <TransactionToast
         onClose={() => toast.dismiss(t.id)}
-        type="Order"
+        type={TransactionTypes.order}
         transaction={transaction}
         senderToken={transaction.senderToken}
         signerToken={transaction.signerToken}

src/components/Toasts/TransactionToast.tsx

@@ -10,8 +10,8 @@ import {
   SubmittedLastLookOrder,
   SubmittedRFQOrder,
   SubmittedTransaction,
-  TransactionType,
 } from "../../entities/SubmittedTransaction/SubmittedTransaction";
+import { TransactionTypes } from "../../types/transactionTypes";
 import { InfoHeading } from "../Typography/Typography";
 import {
   Container,
@@ -37,7 +37,7 @@ export type TransactionToastProps = {
   /**
    * Type of transaction the toast will display;
    */
-  type: TransactionType;
+  type: TransactionTypes;
   /**
    * Token Info of sender token
    */
@@ -74,7 +74,9 @@ const TransactionToast = ({
       </IconContainer>
       <TextContainer>
         <InfoHeading>
-          {type === "Order" || type === "Deposit" || type === "Withdraw"
+          {type === TransactionTypes.order ||
+          type === TransactionTypes.deposit ||
+          type === TransactionTypes.withdraw
             ? error
               ? t("toast.swapFail")
               : t("toast.swapComplete")
@@ -84,7 +86,11 @@ const TransactionToast = ({
         </InfoHeading>
         <SwapAmounts>
           {(() => {
-            if (type === "Order" || type === "Deposit" || type === "Withdraw") {
+            if (
+              type === TransactionTypes.order ||
+              type === TransactionTypes.deposit ||
+              type === TransactionTypes.withdraw
+            ) {
               if (transaction && senderToken && signerToken) {
                 const tx =
                   transaction.protocol === "last-look-erc20"

src/components/TransactionsTab/TransactionsTab.tsx

@@ -22,6 +22,7 @@ import useMediaQuery from "../../hooks/useMediaQuery";
 import useWindowSize from "../../hooks/useWindowSize";
 import breakPoints from "../../style/breakpoints";
 import { ClearOrderType } from "../../types/clearOrderType";
+import { TransactionStatusType } from "../../types/transactionTypes";
 import Icon from "../Icon/Icon";
 import {
   Container,
@@ -145,13 +146,15 @@ const TransactionsTab = ({
 
   const pendingTransactions = useMemo(() => {
     return transactions.filter(
-      (transaction) => transaction.status === "processing"
+      (transaction) => transaction.status === TransactionStatusType.processing
     );
   }, [transactions]);
 
   const completedTransactions = useMemo(() => {
     return transactions
-      .filter((transaction) => transaction.status !== "processing")
+      .filter(
+        (transaction) => transaction.status !== TransactionStatusType.processing
+      )
       .sort((a, b) => b.timestamp - a.timestamp);
   }, [transactions]);
 

src/components/TransactionsTab/helpers/getWalletTransactionStatusText.ts

@@ -1,21 +1,21 @@
 import { TFunction } from "react-i18next";
 
-import { StatusType } from "../../../entities/SubmittedTransaction/SubmittedTransaction";
+import { TransactionStatusType } from "../../../types/transactionTypes";
 
 export default function getWalletTransactionStatusText(
-  status: StatusType,
+  status: TransactionStatusType,
   t: TFunction
 ): string {
   switch (status) {
-    case "succeeded":
+    case TransactionStatusType.succeeded:
       return t("common.success");
-    case "processing":
+    case TransactionStatusType.processing:
       return t("common.processing");
-    case "expired":
+    case TransactionStatusType.expired:
       return t("common.expired");
-    case "reverted":
+    case TransactionStatusType.reverted:
       return t("common.failed");
-    case "declined":
+    case TransactionStatusType.declined:
       return t("orders.swapRejected");
     default:
       return t("common.unknown");

src/components/TransactionsTab/subcomponents/WalletTransaction/WalletTransaction.tsx

@@ -14,6 +14,7 @@ import {
   isOrderTransaction,
   isWithdrawTransaction,
 } from "../../../../entities/SubmittedTransaction/SubmittedTransactionHelpers";
+import { TransactionStatusType } from "../../../../types/transactionTypes";
 import ProgressBar from "../../../ProgressBar/ProgressBar";
 import getTimeAgoTranslation from "../../helpers/getTimeAgoTranslation";
 import getWalletTransactionStatusText from "../../helpers/getWalletTransactionStatusText";
@@ -90,7 +91,11 @@ const WalletTransaction = ({
           </SpanSubtitle>
         </TextContainer>
 
-        <StyledTransactionLink chainId={chainId} hash={transaction.hash} />
+        <StyledTransactionLink
+          hideLabel
+          chainId={chainId}
+          hash={transaction.hash}
+        />
       </Container>
     );
   }
@@ -120,14 +125,17 @@ const WalletTransaction = ({
 
     return (
       <Container transition={transition} animate={animate} initial={initial}>
-        {transaction.status === "processing" && (
+        {transaction.status === TransactionStatusType.processing && (
           <RotatedIcon name="swap" iconSize={1.25} />
         )}
         <TextContainer>
           {transaction && senderToken && signerToken && (
             <>
               <SpanTitle
-                hasProgress={hasExpiry && transaction.status === "processing"}
+                hasProgress={
+                  hasExpiry &&
+                  transaction.status === TransactionStatusType.processing
+                }
               >
                 {t(
                   transaction.protocol === "last-look-erc20"
@@ -155,7 +163,8 @@ const WalletTransaction = ({
                   }
                 )}
               </SpanTitle>
-              {hasExpiry && transaction.status === "processing" ? (
+              {hasExpiry &&
+              transaction.status === TransactionStatusType.processing ? (
                 <ProgressBar
                   startTime={transaction.timestamp}
                   endTime={parseInt(transaction.expiry!) * 1000}