893: Add FullSwapERC20 to order transactions

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

@@ -13,7 +13,6 @@ import { Registry, Server, Wrapper } from "@airswap/libraries";
 import { OrderERC20, Pricing, ProtocolIds, 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 { useAppDispatch, useAppSelector } from "../../../app/hooks";

src/components/@widgets/SwapWidget/hooks/useBestTradeOptionTransaction.ts

@@ -27,10 +27,9 @@ const useBestTradeOptionTransaction = (
 
       const senderAmount = toAtomicString(quoteAmount, tokenInfo.decimals);
 
-      return (
-        transaction.order.nonce === nonce ||
-        transaction.order.senderAmount === senderAmount
-      );
+      return transaction.order.nonce
+        ? transaction.order.nonce === nonce
+        : transaction.order.senderAmount === senderAmount;
     });
   }, [transactions, nonce, quoteAmount]);
 };

src/components/TransactionsTab/TransactionsTab.tsx

@@ -51,7 +51,7 @@ import AnimatedWalletTransaction from "./subcomponents/AnimatedWalletTransaction
 import ClearTransactionsSelector from "./subcomponents/ClearTransactionsSelector/ClearTransactionsSelector";
 
 type TransactionsTabType = {
-  address: string;
+  account: string;
   chainId: number;
   open: boolean;
   protocolFee: number;
@@ -67,7 +67,7 @@ type TransactionsTabType = {
 };
 
 const TransactionsTab = ({
-  address = "",
+  account = "",
   chainId,
   open,
   protocolFee,
@@ -92,7 +92,7 @@ const TransactionsTab = ({
   const transactionsScrollRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLDivElement>(null);
 
-  const addressOrName = useAddressOrEnsName(address);
+  const addressOrName = useAddressOrEnsName(account);
   const walletInfoText = useMemo(() => {
     return isUnsupportedNetwork
       ? t("wallet.unsupported")
@@ -101,8 +101,8 @@ const TransactionsTab = ({
       : t("wallet.notConnected");
   }, [addressOrName, isUnsupportedNetwork, t]);
   const walletUrl = useMemo(
-    () => getAccountUrl(chainId, address),
-    [chainId, address]
+    () => getAccountUrl(chainId, account),
+    [chainId, account]
   );
   useKeyPress(() => setTransactionsTabOpen(false), ["Escape"]);
 
@@ -205,7 +205,7 @@ const TransactionsTab = ({
             {showMobileMenu && (
               <StyledWalletMobileMenu
                 walletUrl={walletUrl}
-                address={address}
+                address={account}
                 onDisconnectButtonClick={onDisconnectWalletClicked}
               />
             )}
@@ -230,6 +230,7 @@ const TransactionsTab = ({
                     protocolFee={protocolFee}
                     transaction={transaction}
                     chainId={chainId!}
+                    account={account}
                   />
                 ))}
               </AnimatePresence>
@@ -248,6 +249,7 @@ const TransactionsTab = ({
                     protocolFee={protocolFee}
                     transaction={transaction}
                     chainId={chainId!}
+                    account={account}
                   />
                 ))}
               </AnimatePresence>

src/components/TransactionsTab/helpers/getWalletTransactionOrderText.ts

@@ -0,0 +1,50 @@
+import { TokenInfo } from "@airswap/utils";
+import { formatUnits } from "@ethersproject/units";
+
+import { BigNumber } from "bignumber.js";
+
+import {
+  SubmittedDepositTransaction,
+  SubmittedOrder,
+  SubmittedTransaction,
+  SubmittedWithdrawTransaction,
+} from "../../../entities/SubmittedTransaction/SubmittedTransaction";
+import {
+  getDepositOrWithdrawalTransactionLabel,
+  getOrderTransactionLabel,
+  isDepositTransaction,
+  isLastLookOrderTransaction,
+  isSubmittedOrder,
+  isWithdrawTransaction,
+} from "../../../entities/SubmittedTransaction/SubmittedTransactionHelpers";
+import { compareAddresses } from "../../../helpers/string";
+import i18n from "../../../i18n/i18n";
+
+const getWalletTransactionOrderText = (
+  transaction:
+    | SubmittedOrder
+    | SubmittedWithdrawTransaction
+    | SubmittedDepositTransaction,
+  signerToken: TokenInfo,
+  senderToken: TokenInfo,
+  account: string,
+  protocolFee: number
+): string => {
+  if (isWithdrawTransaction(transaction) || isDepositTransaction(transaction)) {
+    return getDepositOrWithdrawalTransactionLabel(
+      transaction,
+      signerToken,
+      senderToken
+    );
+  }
+
+  return getOrderTransactionLabel(
+    transaction,
+    signerToken,
+    senderToken,
+    account,
+    protocolFee
+  );
+};
+
+export default getWalletTransactionOrderText;

src/components/TransactionsTab/subcomponents/AnimatedWalletTransaction/AnimatedWalletTransaction.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { TokenInfo } from "@airswap/utils";
-
 import { useReducedMotion } from "framer-motion";
 import { useTheme } from "styled-components";
 
@@ -14,12 +12,14 @@ interface AnimatedWalletTransactionProps {
   protocolFee: number;
   transaction: SubmittedTransaction;
   chainId: number;
+  account: string;
 }
 
 const AnimatedWalletTransaction = ({
   protocolFee,
   transaction,
   chainId,
+  account,
 }: AnimatedWalletTransactionProps) => {
   const theme = useTheme();
   const shouldReduceMotion = useReducedMotion();
@@ -69,6 +69,7 @@ const AnimatedWalletTransaction = ({
         }}
         transaction={transaction}
         chainId={chainId}
+        account={account}
       />
     </Container>
   );

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

@@ -19,6 +19,7 @@ import {
 import { TransactionStatusType } from "../../../../types/transactionTypes";
 import ProgressBar from "../../../ProgressBar/ProgressBar";
 import getTimeAgoTranslation from "../../helpers/getTimeAgoTranslation";
+import getWalletTransactionOrderText from "../../helpers/getWalletTransactionOrderText";
 import getWalletTransactionStatusText from "../../helpers/getWalletTransactionStatusText";
 import {
   Container,
@@ -33,6 +34,7 @@ interface WalletTransactionProps extends HTMLMotionProps<"div"> {
   protocolFee: number;
   transaction: SubmittedTransaction;
   chainId: number;
+  account: string;
 }
 
 const WalletTransaction = ({
@@ -42,6 +44,7 @@ const WalletTransaction = ({
   animate,
   initial,
   transition,
+  account,
 }: WalletTransactionProps) => {
   const { t } = useTranslation();
 
@@ -102,7 +105,6 @@ const WalletTransaction = ({
 
   if (
     isSubmittedOrder(transaction) ||
-    isSubmittedOrderUnderConsideration(transaction) ||
     isWithdrawTransaction(transaction) ||
     isDepositTransaction(transaction)
   ) {
@@ -111,16 +113,6 @@ const WalletTransaction = ({
       ? transaction.order.expiry
       : undefined;
 
-    // For last look transactions, the user has sent the signer amount plus
-    // the fee:
-    let signerAmountWithFee: string | null = null;
-    if (isLastLookOrderTransaction(transaction)) {
-      signerAmountWithFee = new BigNumber(transaction.order.signerAmount)
-        .multipliedBy(1 + protocolFee / 10000)
-        .integerValue(BigNumber.ROUND_FLOOR)
-        .toString();
-    }
-
     const timeBetween = getTimeAgoTranslation(
       new Date(transaction.timestamp),
       t
@@ -140,30 +132,12 @@ const WalletTransaction = ({
                   transaction.status === TransactionStatusType.processing
                 }
               >
-                {t(
-                  isSubmittedOrder(transaction) && transaction.isLastLook
-                    ? "wallet.lastLookTransaction"
-                    : "wallet.transaction",
-                  {
-                    senderAmount: parseFloat(
-                      Number(
-                        formatUnits(
-                          transaction.order.senderAmount,
-                          senderToken.decimals
-                        )
-                      ).toFixed(5)
-                    ),
-                    senderToken: senderToken.symbol,
-                    signerAmount: parseFloat(
-                      Number(
-                        formatUnits(
-                          signerAmountWithFee || transaction.order.signerAmount,
-                          signerToken.decimals
-                        )
-                      ).toFixed(5)
-                    ),
-                    signerToken: signerToken.symbol,
-                  }
+                {getWalletTransactionOrderText(
+                  transaction,
+                  signerToken,
+                  senderToken,
+                  account,
+                  protocolFee
                 )}
               </SpanTitle>
               {!!expiry &&

src/entities/SubmittedTransaction/SubmittedTransaction.ts

@@ -1,4 +1,4 @@
-import { OrderERC20, TokenInfo } from "@airswap/utils";
+import { FullSwapERC20, OrderERC20, TokenInfo } from "@airswap/utils";
 
 import {
   TransactionStatusType,
@@ -27,6 +27,7 @@ export interface SubmittedOrder extends SubmittedTransactionWithHash {
   isLastLook?: boolean;
   type: TransactionTypes.order;
   order: OrderERC20;
+  swap?: FullSwapERC20;
   senderToken: TokenInfo;
   signerToken: TokenInfo;
 }

src/entities/SubmittedTransaction/SubmittedTransactionHelpers.ts

@@ -1,3 +1,10 @@
+import { TokenInfo } from "@airswap/utils";
+import { formatUnits } from "@ethersproject/units";
+
+import { BigNumber } from "bignumber.js";
+
+import { compareAddresses } from "../../helpers/string";
+import i18n from "../../i18n/i18n";
 import { TransactionTypes } from "../../types/transactionTypes";
 import {
   SubmittedApprovalTransaction,
@@ -33,7 +40,7 @@ export const isWithdrawTransaction = (
 export const isSubmittedOrder = (
   transaction: SubmittedTransaction
 ): transaction is SubmittedOrder => {
-  return transaction.type === TransactionTypes.order && !!transaction.hash;
+  return transaction.type === TransactionTypes.order;
 };
 
 export const isSubmittedOrderUnderConsideration = (
@@ -69,7 +76,7 @@ export const getSubmittedTransactionKey = (
   return transaction.hash;
 };
 
-export const doesTransactionsMatch = (
+export const doTransactionsMatch = (
   transaction: SubmittedTransaction,
   match: SubmittedTransaction,
   hash?: string
@@ -83,3 +90,95 @@ export const doesTransactionsMatch = (
 
   return transaction.hash === match.hash || transaction.hash === hash;
 };
+
+export const getDepositOrWithdrawalTransactionLabel = (
+  transaction: SubmittedDepositTransaction | SubmittedWithdrawTransaction,
+  signerToken: TokenInfo,
+  senderToken: TokenInfo
+): string => {
+  const signerAmount = parseFloat(
+    Number(
+      formatUnits(transaction.order.signerAmount, signerToken.decimals)
+    ).toFixed(5)
+  );
+
+  const senderAmount = parseFloat(
+    Number(
+      formatUnits(transaction.order.senderAmount, senderToken.decimals)
+    ).toFixed(5)
+  );
+
+  return i18n.t("wallet.transaction", {
+    signerAmount,
+    signerToken: signerToken.symbol,
+    senderAmount,
+    senderToken: senderToken.symbol,
+  });
+};
+
+const isSenderWalletAccount = (
+  transaction: SubmittedTransaction,
+  account: string
+) => {
+  if (isSubmittedOrder(transaction) && transaction.swap) {
+    return compareAddresses(transaction.swap.senderWallet, account);
+  }
+
+  return false;
+};
+
+export const getOrderTransactionLabel = (
+  transaction: SubmittedOrder,
+  signerToken: TokenInfo,
+  senderToken: TokenInfo,
+  account: string,
+  protocolFee: number
+) => {
+  const { order, swap } = transaction;
+
+  const signerAmountWithFee =
+    !swap && transaction.isLastLook
+      ? new BigNumber(transaction.order.signerAmount)
+          .multipliedBy(1 + protocolFee / 10000)
+          .integerValue(BigNumber.ROUND_FLOOR)
+          .toString()
+      : undefined;
+
+  const translation =
+    isSubmittedOrder(transaction) && transaction.isLastLook
+      ? "wallet.lastLookTransaction"
+      : "wallet.transaction";
+
+  const signerAmount = parseFloat(
+    Number(
+      formatUnits(
+        signerAmountWithFee || (swap || order).signerAmount,
+        signerToken.decimals
+      )
+    ).toFixed(5)
+  );
+
+  const senderAmount = parseFloat(
+    Number(
+      formatUnits((swap || order).senderAmount, senderToken.decimals)
+    ).toFixed(5)
+  );
+
+  const accountIsSender = isSenderWalletAccount(transaction, account);
+
+  if (accountIsSender) {
+    return i18n.t(translation, {
+      signerAmount,
+      signerToken: signerToken.symbol,
+      senderAmount,
+      senderToken: senderToken.symbol,
+    });
+  }
+
+  return i18n.t(translation, {
+    signerAmount: senderAmount,
+    signerToken: senderToken.symbol,
+    senderAmount: signerAmount,
+    senderToken: signerToken.symbol,
+  });
+};