Merge branch 'develop' of github.com:airswap/airswap-web into develop

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

@@ -48,7 +48,6 @@ import {
   selectOrdersErrors,
   selectOrdersStatus,
   setErrors,
-  setResetStatus,
 } from "../../../features/orders/ordersSlice";
 import useQuotes from "../../../features/quotes/quotesHooks";
 import { reset as clearQuotes } from "../../../features/quotes/quotesSlice";
@@ -58,7 +57,6 @@ import {
   selectTradeTerms,
   setTradeTerms,
 } from "../../../features/tradeTerms/tradeTermsSlice";
-import useLatestSucceededTransaction from "../../../features/transactions/hooks/useLatestSucceededTransaction";
 import {
   selectCustomServerUrl,
   setCustomServerUrl,
@@ -80,6 +78,7 @@ import useSwapType from "../../../hooks/useSwapType";
 import useTokenInfo from "../../../hooks/useTokenInfo";
 import useWithdrawalPending from "../../../hooks/useWithdrawalPending";
 import { AppRoutes } from "../../../routes";
+import { SwapType } from "../../../types/swapType";
 import { TokenSelectModalTypes } from "../../../types/tokenSelectModalTypes";
 import { TransactionStatusType } from "../../../types/transactionTypes";
 import ApproveReview from "../../@reviewScreens/ApproveReview/ApproveReview";
@@ -98,7 +97,6 @@ import StyledSwapWidget, {
   StyledDebugMenu,
 } from "./SwapWidget.styles";
 import getTokenPairs from "./helpers/getTokenPairs";
-import useBestTradeOptionTransaction from "./hooks/useBestTradeOptionTransaction";
 import useTokenOrFallback from "./hooks/useTokenOrFallback";
 import ActionButtons, {
   ButtonActions,
@@ -199,7 +197,8 @@ const SwapWidget: FC = () => {
     baseTokenInfo,
     baseAmount
   );
-  const shouldApprove = !hasSufficientAllowance && swapType !== "wrapOrUnwrap";
+  const shouldApprove =
+    !hasSufficientAllowance && swapType !== SwapType.wrapOrUnwrap;
 
   const activeOrderTransaction = useOrderTransaction(activeOrderNonce);
   const approvalTransaction = useApprovalPending(baseToken);
@@ -247,7 +246,7 @@ const SwapWidget: FC = () => {
   }, [allowances.swap.status, allowances.wrapper.status]);
 
   const quoteAmount =
-    swapType === "wrapOrUnwrap" ? baseAmount : quote?.bestQuote || "";
+    swapType === SwapType.wrapOrUnwrap ? baseAmount : quote?.bestQuote || "";
   const formattedQuoteAmount = useMemo(
     () => stringToSignificantDecimals(quoteAmount),
     [quoteAmount]
@@ -337,17 +336,23 @@ const SwapWidget: FC = () => {
 
   const swapWithRequestForQuote = async () => {
     try {
-      if (!library) return;
+      if (!library || !chainId || !account) return;
+
       const senderWallet =
-        swapType === "swapWithWrap" ? Wrapper.getAddress(chainId!) : account!;
+        swapType === SwapType.swapWithWrap
+          ? Wrapper.getAddress(chainId)
+          : account;
+
       const order = quote.bestOrder as OrderERC20;
+
       if (!senderWallet) return;
+
       const errors = await check(
         order,
         senderWallet,
-        chainId || 1,
+        chainId,
         library,
-        swapType === "swapWithWrap"
+        swapType === SwapType.swapWithWrap
       );
 
       if (errors.length) {
@@ -361,7 +366,7 @@ const SwapWidget: FC = () => {
           quoteTokenInfo!,
           baseTokenInfo!,
           library,
-          swapType === "swapWithWrap" ? "Wrapper" : "Swap"
+          swapType === SwapType.swapWithWrap ? "Wrapper" : "Swap"
         )
       );
 
@@ -460,9 +465,9 @@ const SwapWidget: FC = () => {
         break;
 
       case ButtonActions.takeQuote:
-        if (["swap", "swapWithWrap"].includes(swapType)) {
+        if ([SwapType.swap, SwapType.swapWithWrap].includes(swapType)) {
           await takeBestOption();
-        } else if (swapType === "wrapOrUnwrap") {
+        } else if (swapType === SwapType.wrapOrUnwrap) {
           await doWrap();
         }
         break;
@@ -499,7 +504,7 @@ const SwapWidget: FC = () => {
         baseAmount,
         baseTokenInfo!,
         library!,
-        swapType === "swapWithWrap" ? "Wrapper" : "Swap"
+        swapType === SwapType.swapWithWrap ? "Wrapper" : "Swap"
       )
     );
     setIsApproving(false);

src/entities/SubmittedTransaction/SubmittedTransactionHelpers.ts

@@ -1,4 +1,4 @@
-import { OrderERC20, TokenInfo } from "@airswap/utils";
+import { ADDRESS_ZERO, OrderERC20, TokenInfo } from "@airswap/utils";
 import { FullSwapERC20 } from "@airswap/utils/build/src/swap-erc20";
 import { formatUnits } from "@ethersproject/units";
 
@@ -121,8 +121,17 @@ const isSenderWalletAccount = (
   transaction: SubmittedTransaction,
   account: string
 ) => {
-  if (isSubmittedOrder(transaction) && transaction.swap) {
-    return compareAddresses(transaction.swap.senderWallet, account);
+  // If senderToken is ADDRESS_ZERO, then that means a swapWithWrap transaction has been done.
+  // So the account must be the senderWallet.
+  if (
+    isSubmittedOrder(transaction) &&
+    transaction.order.senderToken === ADDRESS_ZERO
+  ) {
+    return true;
+  }
+
+  if (isSubmittedOrder(transaction)) {
+    return !compareAddresses(transaction.order.signerWallet, account);
   }
 
   return false;

src/features/quotes/hooks/useQuotesDebug.ts

@@ -110,7 +110,7 @@ const useQuotesDebug = () => {
 
     if (isDebugMode && bestRfqOrder && signerToken) {
       const lastLookQuote = formatUnits(
-        bestRfqOrder.senderAmount,
+        bestRfqOrder.signerAmount,
         signerToken.decimals
       );
 

src/features/quotes/quotesHooks.ts

@@ -1,15 +1,23 @@
 import { useEffect, useState } from "react";
 
-import { OrderERC20, ProtocolIds, UnsignedOrderERC20 } from "@airswap/utils";
+import { Wrapper } from "@airswap/libraries";
+import {
+  ADDRESS_ZERO,
+  OrderERC20,
+  ProtocolIds,
+  UnsignedOrderERC20,
+} from "@airswap/utils";
 import { noop } from "@react-hookz/web/esnext/util/const";
 import { useWeb3React } from "@web3-react/core";
 
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { ExtendedPricing } from "../../entities/ExtendedPricing/ExtendedPricing";
 import { getOrderExpiryWithBufferInSeconds } from "../../entities/OrderERC20/OrderERC20Helpers";
 import { PricingErrorType } from "../../errors/pricingError";
+import useNativeWrappedToken from "../../hooks/useNativeWrappedToken";
 import useSwapType from "../../hooks/useSwapType";
 import useTokenInfo from "../../hooks/useTokenInfo";
+import { SwapType } from "../../types/swapType";
 import { getGasPrice } from "../gasCost/gasCostApi";
 import { selectProtocolFee } from "../metadata/metadataSlice";
 import { selectTradeTerms } from "../tradeTerms/tradeTermsSlice";
@@ -64,12 +72,21 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
   const isLoading = isLastLookLoading || isRfqLoading || isGasCostLoading;
   const baseTokenInfo = useTokenInfo(baseToken.address);
   const quoteTokenInfo = useTokenInfo(quoteToken.address);
+  const wrappedTokenInfo = useNativeWrappedToken(chainId);
+
   const error =
     !isLoading && !bestOrder ? lastLookError || rfqError : undefined;
 
   const [fetchCount, setFetchCount] = useState(0);
 
   const swapType = useSwapType(baseTokenInfo, quoteTokenInfo);
+  const justifiedBaseTokenInfo =
+    swapType === SwapType.swapWithWrap ? wrappedTokenInfo : baseTokenInfo;
+  const justifiedQuoteTokenInfo =
+    quoteTokenInfo?.address === ADDRESS_ZERO
+      ? wrappedTokenInfo
+      : quoteTokenInfo;
+
   useQuotesDebug();
 
   useEffect(() => {
@@ -96,8 +113,8 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
       !chainId ||
       !library ||
       !isSubmitted ||
-      !baseTokenInfo ||
-      !quoteTokenInfo ||
+      !justifiedBaseTokenInfo ||
+      !justifiedQuoteTokenInfo ||
       !account
     ) {
       return;
@@ -126,10 +143,13 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
       fetchBestRfqOrder({
         provider: library,
         baseTokenAmount,
-        baseToken: baseTokenInfo,
+        baseToken: justifiedBaseTokenInfo,
         chainId,
-        quoteToken: quoteTokenInfo,
-        senderWallet: account,
+        quoteToken: justifiedQuoteTokenInfo,
+        senderWallet:
+          swapType === SwapType.swapWithWrap
+            ? Wrapper.getAddress(chainId)!
+            : account,
       })
     );
   }, [fetchCount]);
@@ -140,32 +160,37 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
       !library ||
       !account ||
       !bestPricing ||
-      !baseTokenInfo ||
-      !quoteTokenInfo
+      !justifiedBaseTokenInfo ||
+      !justifiedQuoteTokenInfo
     ) {
       return;
     }
 
     dispatch(
       createLastLookUnsignedOrder({
         account,
-        baseToken: baseTokenInfo,
+        baseToken: justifiedBaseTokenInfo,
         baseAmount: baseTokenAmount,
         pricing: bestPricing,
         protocolFee,
-        quoteToken: quoteTokenInfo,
+        quoteToken: justifiedQuoteTokenInfo,
       })
     );
   }, [bestPricing]);
 
   useEffect(() => {
-    if (isLoading || !quoteTokenInfo || !isSubmitted || !isGasCostSuccessful) {
+    if (
+      isLoading ||
+      !justifiedQuoteTokenInfo ||
+      !isSubmitted ||
+      !isGasCostSuccessful
+    ) {
       return;
     }
 
     dispatch(
       compareOrdersAndSetBestOrder(
-        quoteTokenInfo,
+        justifiedQuoteTokenInfo,
         disableLastLook ? undefined : bestLastLookOrder,
         disableRfq ? undefined : bestRfqOrder,
         swapTransactionCost
@@ -179,7 +204,7 @@ const useQuotes = (isSubmitted: boolean): UseQuotesValues => {
     bestRfqOrder,
   ]);
 
-  if (swapType === "wrapOrUnwrap") {
+  if (swapType === SwapType.wrapOrUnwrap) {
     return {
       isFailed: false,
       isLoading: false,

src/helpers/getOrdersFromLogs.ts → src/features/transactions/helpers/getOrdersFromLogs.ts

@@ -8,9 +8,9 @@ import {
 
 import { BigNumber, Event } from "ethers";
 
-import { transformFullSwapERC20ToOrderERC20 } from "../entities/OrderERC20/OrderERC20Transformers";
+import { transformFullSwapERC20ToOrderERC20 } from "../../../entities/OrderERC20/OrderERC20Transformers";
 
-interface FullSwapErc20Log {
+export interface FullSwapErc20Log {
   hash: string;
   order: OrderERC20;
   swap: FullSwapERC20;

src/features/transactions/helpers/getOrdersFromWrappedEventLogs.ts

@@ -0,0 +1,42 @@
+import { ADDRESS_ZERO, FullSwapERC20, OrderERC20 } from "@airswap/utils";
+
+import { Event } from "ethers";
+
+import { FullSwapErc20Log } from "./getOrdersFromLogs";
+
+export const getOrdersFromWrappedEventLogs = (
+  logs: FullSwapErc20Log[],
+  wrappedEvents: Event[]
+): FullSwapErc20Log[] => {
+  const filteredLogs = logs.map((log) => {
+    const wrappedEvent = wrappedEvents.find(
+      (event) => event.transactionHash === log.hash
+    );
+
+    if (!wrappedEvent) return;
+
+    const args = wrappedEvent.args || [];
+    const senderWallet = args[0] as string | undefined;
+
+    if (!senderWallet) return;
+
+    const order: OrderERC20 = {
+      ...log.order,
+      senderToken: ADDRESS_ZERO,
+    };
+
+    const swap: FullSwapERC20 = {
+      ...log.swap,
+      senderToken: ADDRESS_ZERO,
+      senderWallet,
+    };
+
+    return {
+      ...log,
+      order,
+      swap,
+    };
+  });
+
+  return filteredLogs.filter(Boolean) as FullSwapErc20Log[];
+};

src/features/transactions/hooks/useHistoricalTransactions.ts

@@ -7,10 +7,12 @@ import { SubmittedTransaction } from "../../../entities/SubmittedTransaction/Sub
 import { sortSubmittedTransactionsByExpiry } from "../../../entities/SubmittedTransaction/SubmittedTransactionHelpers";
 import { transformToSubmittedTransactionWithOrder } from "../../../entities/SubmittedTransaction/SubmittedTransactionTransformers";
 import { getUniqueArrayChildren } from "../../../helpers/array";
-import { getOrdersFromLogs } from "../../../helpers/getOrdersFromLogs";
 import { compareAddresses } from "../../../helpers/string";
+import useNativeToken from "../../../hooks/useNativeToken";
 import { TransactionStatusType } from "../../../types/transactionTypes";
 import { selectAllTokenInfo } from "../../metadata/metadataSlice";
+import { getOrdersFromLogs } from "../helpers/getOrdersFromLogs";
+import { getOrdersFromWrappedEventLogs } from "../helpers/getOrdersFromWrappedEventLogs";
 import useSwapLogs from "./useSwapLogs";
 
 interface HistoricalTransactionsCollection {
@@ -30,6 +32,9 @@ const useHistoricalTransactions = (): [
   const { chainId, account, library } = useWeb3React();
 
   const tokens = useAppSelector(selectAllTokenInfo);
+  const nativeToken = useNativeToken(chainId);
+  const allTokens = [nativeToken, ...tokens];
+
   const { result: swapLogs, status: swapLogStatus } = useSwapLogs(
     chainId,
     account
@@ -56,18 +61,22 @@ const useHistoricalTransactions = (): [
 
     const getTransactionsFromLogs = async () => {
       const logs = await getOrdersFromLogs(chainId, swapLogs.swapLogs);
+      const wrappedLogs = getOrdersFromWrappedEventLogs(
+        logs,
+        swapLogs.wrappedSwapLogs
+      );
 
-      const submittedTransactions = logs
+      const submittedTransactions = [...logs, ...wrappedLogs]
         .filter(
           (order) =>
             compareAddresses(order.order.signerWallet, account) ||
             compareAddresses(order.swap.senderWallet, account)
         )
         .map((log) => {
-          const signerToken = tokens.find(
+          const signerToken = allTokens.find(
             (token) => token.address === log.order.signerToken
           );
-          const senderToken = tokens.find(
+          const senderToken = allTokens.find(
             (token) => token.address === log.order.senderToken
           );
 

src/features/transactions/hooks/useLatestSwapFromEvents.ts

@@ -45,7 +45,10 @@ const useLatestSwapFromEvents = (
 
         if (
           !compareAddresses(swap.signerWallet, account) &&
-          !compareAddresses(swap.senderWallet, account)
+          !compareAddresses(swap.senderWallet, account) &&
+          // When the senderWallet is the wrapper contract, we can still use the receipt to lead the transaction back
+          // to the original sender wallet
+          !compareAddresses(receipt.from, account)
         ) {
           return;
         }

src/features/transactions/transactionsHooks.ts

@@ -73,7 +73,9 @@ export const useTransactions = (): void => {
     };
 
     const processingTransactions = localStorageTransactions.filter(
-      (transaction) => transaction.status === TransactionStatusType.processing
+      (transaction) =>
+        transaction.status === TransactionStatusType.processing ||
+        transaction.status === TransactionStatusType.expired
     );
 
     processingTransactions.forEach(getTransactionReceiptAndUpdateTransaction);