chore: tracking txs usd amounts to amplitude (#2564)

Author: mgrabina

src/components/transactions/Borrow/BorrowActions.tsx

@@ -6,6 +6,7 @@ import {
   MAX_UINT_AMOUNT,
   ProtocolAction,
 } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
@@ -126,6 +127,9 @@ export const BorrowActions = React.memo(
           asset: poolAddress,
           amount: amountToBorrow,
           assetName: poolReserve.name,
+          amountUsd: valueToBigNumber(amountToBorrow)
+            .multipliedBy(poolReserve.priceInUSD)
+            .toString(),
         });
 
         queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });

src/components/transactions/DebtSwitch/DebtSwitchActions.tsx

@@ -3,6 +3,7 @@ import {
   gasLimitRecommendations,
   ProtocolAction,
 } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { SignatureLike } from '@ethersproject/bytes';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
@@ -194,6 +195,14 @@ export const DebtSwitchActions = ({
         txState: 'success',
         previousState: `${route.outputAmount} variable ${poolReserve.symbol}`,
         newState: `${route.inputAmount} variable ${targetReserve.symbol}`,
+        amountUsd: valueToBigNumber(parseUnits(amountToSwap, poolReserve.decimals).toString())
+          .multipliedBy(poolReserve.priceInUSD)
+          .toString(),
+        outAmountUsd: valueToBigNumber(
+          parseUnits(amountToReceive, targetReserve.decimals).toString()
+        )
+          .multipliedBy(targetReserve.priceInUSD)
+          .toString(),
       });
 
       queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });

src/components/transactions/Repay/RepayActions.tsx

@@ -1,4 +1,5 @@
 import { gasLimitRecommendations, InterestRate, ProtocolAction } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { TransactionResponse } from '@ethersproject/providers';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
@@ -29,6 +30,7 @@ export interface RepayActionProps extends BoxProps {
   repayWithATokens: boolean;
   blocked?: boolean;
   maxApproveNeeded: string;
+  maxAmountToRepay: string;
 }
 
 export const RepayActions = ({
@@ -41,6 +43,7 @@ export const RepayActions = ({
   repayWithATokens,
   blocked,
   maxApproveNeeded,
+  maxAmountToRepay,
   ...props
 }: RepayActionProps) => {
   const [
@@ -197,8 +200,11 @@ export const RepayActions = ({
         action,
         txState: 'success',
         asset: poolAddress,
-        amount: amountToRepay,
+        amount: amountToRepay === '-1' ? maxAmountToRepay : amountToRepay,
         assetName: symbol,
+        amountUsd: valueToBigNumber(amountToRepay === '-1' ? maxAmountToRepay : amountToRepay)
+          .multipliedBy(poolReserve.priceInUSD)
+          .toString(),
       });
 
       queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });

src/components/transactions/Repay/RepayModalContent.tsx

@@ -289,6 +289,7 @@ export const RepayModalContent = ({
         isWrongNetwork={isWrongNetwork}
         symbol={modalSymbol}
         repayWithATokens={repayWithATokens}
+        maxAmountToRepay={maxAmountToRepay.toString(10)}
       />
     </>
   );

src/components/transactions/Supply/SupplyActions.tsx

@@ -1,10 +1,12 @@
 import { gasLimitRecommendations, ProtocolAction } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { TransactionResponse } from '@ethersproject/providers';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import { parseUnits } from 'ethers/lib/utils';
 import React, { useEffect, useState } from 'react';
+import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { SignedParams, useApprovalTx } from 'src/hooks/useApprovalTx';
 import { usePoolApprovedAmount } from 'src/hooks/useApprovedAmount';
 import { useModalContext } from 'src/hooks/useModal';
@@ -60,6 +62,7 @@ export const SupplyActions = React.memo(
         state.currentMarketData,
       ])
     );
+    const { reserves } = useAppDataContext();
     const {
       approvalTxState,
       mainTxState,
@@ -181,6 +184,12 @@ export const SupplyActions = React.memo(
           asset: poolAddress,
           amount: amountToSupply,
           assetName: symbol,
+          amountUsd: (() => {
+            const reserve = reserves.find((r) => r.underlyingAsset === poolAddress);
+            return reserve
+              ? valueToBigNumber(amountToSupply).multipliedBy(reserve.priceInUSD).toString()
+              : undefined;
+          })(),
         });
 
         queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });

src/components/transactions/Supply/SupplyModalContent.tsx

@@ -475,6 +475,7 @@ export const SupplyWrappedTokenModalContent = ({
           decimals={18}
           symbol={wrappedTokenConfig.tokenIn.symbol}
           isWrongNetwork={isWrongNetwork}
+          reserve={poolReserve}
         />
       ) : (
         <SupplyActions

src/components/transactions/Supply/SupplyWrappedTokenActions.tsx

@@ -1,11 +1,13 @@
 import { gasLimitRecommendations, ProtocolAction } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { SignatureLike } from '@ethersproject/bytes';
 import { TransactionResponse } from '@ethersproject/providers';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
 import { parseUnits } from 'ethers/lib/utils';
 import { useState } from 'react';
+import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { useApprovalTx } from 'src/hooks/useApprovalTx';
 import { useApprovedAmount } from 'src/hooks/useApprovedAmount';
 import { useModalContext } from 'src/hooks/useModal';
@@ -32,6 +34,7 @@ interface SupplyWrappedTokenActionProps extends BoxProps {
   symbol: string;
   tokenWrapperAddress: string;
   isWrongNetwork: boolean;
+  reserve: ComputedReserveData;
 }
 export const SupplyWrappedTokenActions = ({
   tokenIn,
@@ -41,7 +44,8 @@ export const SupplyWrappedTokenActions = ({
   tokenWrapperAddress,
   isWrongNetwork,
   sx,
-  ...props
+  reserve,
+  ...propsx
 }: SupplyWrappedTokenActionProps) => {
   const [user, estimateGasLimit, addTransaction, marketData] = useRootStore(
     useShallow((state) => [
@@ -174,6 +178,7 @@ export const SupplyWrappedTokenActions = ({
         asset: tokenIn,
         amount: amountToSupply,
         assetName: symbol,
+        amountUsd: valueToBigNumber(amountToSupply).multipliedBy(reserve.priceInUSD).toString(),
       });
 
       queryClient.invalidateQueries({ queryKey: queryKeysFactory.pool });
@@ -212,7 +217,7 @@ export const SupplyWrappedTokenActions = ({
       requiresApproval={requiresApproval}
       tryPermit={usePermit}
       sx={sx}
-      {...props}
+      {...propsx}
     />
   );
 };

src/components/transactions/Withdraw/WithdrawActions.tsx

@@ -1,4 +1,5 @@
 import { ProtocolAction } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
 import { useTransactionHandler } from 'src/helpers/useTransactionHandler';
@@ -42,6 +43,9 @@ export const WithdrawActions = ({
         amount: amountToWithdraw,
         assetName: poolReserve.name,
         asset: poolReserve.underlyingAsset,
+        amountUsd: valueToBigNumber(amountToWithdraw)
+          .multipliedBy(poolReserve.priceInUSD)
+          .toString(),
       },
       protocolAction: ProtocolAction.withdraw,
     });

src/components/transactions/Withdraw/WithdrawAndSwitchActions.tsx

@@ -1,4 +1,5 @@
 import { ERC20Service, gasLimitRecommendations, ProtocolAction } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { SignatureLike } from '@ethersproject/bytes';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
@@ -148,6 +149,14 @@ export const WithdrawAndSwitchActions = ({
         outAsset: targetReserve.underlyingAsset,
         outAssetName: targetReserve.name,
         outAmount: parseUnits(route.outputAmount, targetReserve.decimals).toString(),
+        amountUsd: valueToBigNumber(parseUnits(route.inputAmount, poolReserve.decimals).toString())
+          .multipliedBy(poolReserve.priceInUSD)
+          .toString(),
+        outAmountUsd: valueToBigNumber(
+          parseUnits(route.outputAmount, targetReserve.decimals).toString()
+        )
+          .multipliedBy(targetReserve.priceInUSD)
+          .toString(),
       });
     } catch (error) {
       const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);

src/modules/umbrella/UmbrellaActions.tsx

@@ -5,6 +5,7 @@ import {
   StakeTokenService,
   UmbrellaBatchHelperService,
 } from '@aave/contract-helpers';
+import { valueToBigNumber } from '@aave/math-utils';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
@@ -13,6 +14,7 @@ import { parseUnits } from 'ethers/lib/utils';
 import { useEffect, useState } from 'react';
 import { TxActionsWrapper } from 'src/components/transactions/TxActionsWrapper';
 import { APPROVAL_GAS_LIMIT, checkRequiresApproval } from 'src/components/transactions/utils';
+import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { MergedStakeData } from 'src/hooks/stake/useUmbrellaSummary';
 import { SignedParams, useApprovalTx } from 'src/hooks/useApprovalTx';
 import { useApprovedAmount } from 'src/hooks/useApprovedAmount';
@@ -37,6 +39,7 @@ export interface StakeActionProps extends BoxProps {
   selectedToken: StakeInputAsset;
   event: string;
   isMaxSelected: boolean;
+  reserve: ComputedReserveData;
 }
 
 export const UmbrellaActions = ({
@@ -49,6 +52,7 @@ export const UmbrellaActions = ({
   event,
   stakeData,
   isMaxSelected,
+  reserve,
   ...props
 }: StakeActionProps) => {
   const queryClient = useQueryClient();
@@ -193,6 +197,7 @@ export const UmbrellaActions = ({
         action: ProtocolAction.umbrellaStake,
         amount: amountToStake,
         assetName: selectedToken.symbol,
+        amountUsd: valueToBigNumber(amountToStake).multipliedBy(reserve.priceInUSD).toString(),
       });
 
       queryClient.invalidateQueries({ queryKey: queryKeysFactory.umbrella });