fix(extension): replace local logic with txSummaryInspector - LW-11936 (#1589)

- replace local logic with txSummaryInspector
- test(extension): update step for tx cost and fee verification
- test(extension): add fee to tx summary value

---------

Co-authored-by: wklos-iohk <[email protected]>

Author: mirceahasegan

apps/browser-extension-wallet/src/stores/slices/wallet-activities-slice.ts

@@ -22,8 +22,7 @@ import {
   AssetActivityItemProps,
   AssetActivityListProps,
   ConwayEraCertificatesTypes,
-  DelegationActivityType,
-  TransactionActivityType
+  DelegationActivityType
 } from '@lace/core';
 import { CurrencyInfo, TxDirections } from '@src/types';
 import { getTxDirection, inspectTxType } from '@src/utils/tx-inspection';
@@ -91,7 +90,7 @@ const getDelegationAmount = (activity: DelegationActivityItemProps) => {
     activity.type === DelegationActivityType.delegationRegistration ||
     activity.type === ConwayEraCertificatesTypes.Registration
   ) {
-    return fee.plus(activity.deposit);
+    return fee.plus(activity.deposit).negated();
   }
 
   if (
@@ -101,7 +100,7 @@ const getDelegationAmount = (activity: DelegationActivityItemProps) => {
     return new BigNumber(activity.depositReclaim).minus(fee);
   }
 
-  return fee;
+  return fee.negated();
 };
 
 const FIAT_PRICE_DECIMAL_PLACES = 2;
@@ -371,12 +370,6 @@ const mapWalletActivities = memoize(
           amount: `${getDelegationAmount(activity)} ${cardanoCoin.symbol}`,
           fiatAmount: `${getFiatAmount(getDelegationAmount(activity), cardanoFiatPrice)} ${fiatCurrency.code}`
         }),
-        ...(activity.type === TransactionActivityType.self && {
-          amount: `${activity.fee} ${cardanoCoin.symbol}`,
-          fiatAmount: cardanoFiatPrice
-            ? `${getFiatAmount(new BigNumber(activity.fee), cardanoFiatPrice)} ${fiatCurrency.code}`
-            : '-'
-        }),
         assets: activity.assets.map((asset: ActivityAssetProp) => {
           const assetId = Wallet.Cardano.AssetId(asset.id);
           const token = assetsInfo.get(assetId);

apps/browser-extension-wallet/src/utils/mocks/test-helpers.tsx

@@ -83,7 +83,7 @@ export const mockWalletState: ObservableWalletState = {
               value: { assets: new Map(), coins: BigInt(200) }
             }
           ],
-          fee: '100000'
+          fee: BigInt(100_000)
         }
       } as unknown as Wallet.Cardano.HydratedTx
     ],

apps/browser-extension-wallet/src/views/browser-view/features/activity/helpers/__tests__/pending-tx-transformer.test.ts

@@ -106,7 +106,10 @@ describe('Testing tx transformers utils', () => {
           Promise.resolve({
             address: sendingAddress,
             value: {
-              coins: BigInt('2000000')
+              coins: BigInt('2000000'),
+              assets: new Map([
+                [Wallet.Cardano.AssetId('6b8d07d69639e9413dd637a1a815a7323c69c86abbafb66dbfdb1aa7'), BigInt('100')]
+              ]) as Wallet.Cardano.TokenMap
             }
           })
       });
@@ -118,13 +121,13 @@ describe('Testing tx transformers utils', () => {
           depositReclaim: undefined,
           direction: 'Outgoing',
           fee: '1.00',
-          fiatAmount: '1.00 USD',
+          fiatAmount: '-2.00 USD',
           id: '6804edf9712d2b619edb6ac86861fe93a730693183a262b165fcc1ba1bc99cad',
-          amount: '1.00 ADA',
+          amount: '-2.00 ADA',
           assets: [
             {
               id: '6b8d07d69639e9413dd637a1a815a7323c69c86abbafb66dbfdb1aa7',
-              val: '100'
+              val: '-100'
             }
           ],
           assetsNumber: 2,

apps/browser-extension-wallet/src/views/browser-view/features/activity/helpers/common-tx-transformer.ts

@@ -4,16 +4,17 @@
 import BigNumber from 'bignumber.js';
 import { Wallet } from '@lace/cardano';
 import { CurrencyInfo, TxDirections } from '@types';
-import { inspectTxValues, inspectTxType, txIncludesConwayCertificates } from '@src/utils/tx-inspection';
+import { inspectTxType, txIncludesConwayCertificates } from '@src/utils/tx-inspection';
 import { formatDate, formatTime } from '@src/utils/format-date';
-import { getTransactionTotalAmount } from '@src/utils/get-transaction-total-amount';
 import type { TransformedActivity, TransformedTransactionActivity } from './types';
 import { ActivityStatus, ConwayEraCertificatesTypes, DelegationActivityType } from '@lace/core';
 import capitalize from 'lodash/capitalize';
 import dayjs from 'dayjs';
 import { hasPhase2ValidationFailed } from '@src/utils/phase2-validation';
+import { createTxInspector, Milliseconds, transactionSummaryInspector } from '@cardano-sdk/core';
 
-const { util } = Wallet.Cardano;
+// eslint-disable-next-line no-magic-numbers
+const TIMEOUT = 1000 as Milliseconds;
 
 export interface TxTransformerInput {
   tx: Wallet.TxInFlight | Wallet.Cardano.HydratedTx | Wallet.KeyManagement.WitnessedTx;
@@ -110,24 +111,14 @@ const transformTransactionStatus = (
 };
 
 type GetTxFormattedAmount = (
-  args: Pick<
-    TxTransformerInput,
-    'walletAddresses' | 'tx' | 'direction' | 'resolveInput' | 'cardanoCoin' | 'fiatCurrency' | 'fiatPrice'
-  >
+  args: Pick<TxTransformerInput, 'tx' | 'cardanoCoin' | 'fiatCurrency' | 'fiatPrice'> & { amount: bigint }
 ) => Promise<{
   amount: string;
   fiatAmount: string;
 }>;
 
-const getTxFormattedAmount: GetTxFormattedAmount = async ({
-  resolveInput,
-  tx,
-  walletAddresses,
-  direction,
-  cardanoCoin,
-  fiatCurrency,
-  fiatPrice
-}) => {
+const getTxFormattedAmount: GetTxFormattedAmount = async ({ tx, cardanoCoin, fiatCurrency, fiatPrice, amount }) => {
+  const outputAmount = new BigNumber(amount.toString());
   const transaction = 'tx' in tx ? tx.tx : tx;
   const { body } = transaction;
   if (hasPhase2ValidationFailed(transaction)) {
@@ -141,16 +132,6 @@ const getTxFormattedAmount: GetTxFormattedAmount = async ({
     };
   }
 
-  const outputAmount = await getTransactionTotalAmount({
-    addresses: walletAddresses,
-    inputs: body.inputs,
-    outputs: body.outputs,
-    fee: body.fee,
-    direction,
-    withdrawals: body.withdrawals,
-    resolveInput
-  });
-
   return {
     amount: Wallet.util.getFormattedAmount({ amount: outputAmount.toString(), cardanoCoin }),
     fiatAmount: getFormattedFiatAmount({ amount: outputAmount, fiatCurrency, fiatPrice })
@@ -186,17 +167,36 @@ export const txTransformer = async ({
   isSharedWallet
 }: TxTransformerInput): Promise<TransformedTransactionActivity[]> => {
   const transaction = 'tx' in tx ? tx.tx : tx;
-  const implicitCoin = util.computeImplicitCoin(protocolParameters, transaction.body);
-  const deposit = implicitCoin.deposit ? Wallet.util.lovelacesToAdaString(implicitCoin.deposit.toString()) : undefined;
-  const depositReclaimValue = Wallet.util.calculateDepositReclaim(implicitCoin);
+
+  const txSummaryInspector = createTxInspector({
+    summary: transactionSummaryInspector({
+      addresses: walletAddresses.map((addr) => addr.address),
+      rewardAccounts: walletAddresses.map((addr) => addr.rewardAccount),
+      inputResolver: { resolveInput },
+      protocolParameters,
+      // Using a dummy asset provider as we don't need to fetch assets for the summary
+      // On reject, the summary inspector will use the information it can extract from the assetId, and
+      // all we need here is the id and the amount
+      assetProvider: {
+        getAsset: () => Promise.reject({}),
+        getAssets: () => Promise.reject({}),
+        healthCheck: () => Promise.resolve({ ok: true })
+      },
+      timeout: TIMEOUT,
+      logger: console
+    })
+  });
+
+  // TODO: LW-8767 investigate why in-flight transactions do not have a `witness` property and add it
+  const { summary } = await txSummaryInspector({ witness: undefined, ...transaction });
+
+  const deposit = summary.deposit ? Wallet.util.lovelacesToAdaString(summary.deposit.toString()) : undefined;
+  const depositReclaimValue = summary.returnedDeposit;
   const depositReclaim = depositReclaimValue
     ? Wallet.util.lovelacesToAdaString(depositReclaimValue.toString())
     : undefined;
-  const { assets } = await inspectTxValues({
-    addresses: walletAddresses,
-    tx: transaction as unknown as Wallet.Cardano.HydratedTx,
-    direction
-  });
+
+  const assets = summary.assets;
 
   const formattedDate = dayjs().isSame(date, 'day')
     ? 'Today'
@@ -208,25 +208,23 @@ export const txTransformer = async ({
 
   const assetsEntries = assets
     ? [...assets.entries()]
-        .map(([id, val]) => ({ id: id.toString(), val: val.toString() }))
+        .map(([id, { amount: val }]) => ({ id: id.toString(), val: val.toString() }))
         .sort((a, b) => Number(b.val) - Number(a.val))
     : [];
 
   const formattedAmount = await getTxFormattedAmount({
     cardanoCoin,
     fiatCurrency,
-    resolveInput,
     tx,
-    walletAddresses,
-    direction,
-    fiatPrice
+    fiatPrice,
+    amount: summary.coins
   });
 
   const baseTransformedActivity = {
     id: transaction.id.toString(),
     deposit,
     depositReclaim,
-    fee: Wallet.util.lovelacesToAdaString(transaction.body.fee.toString()),
+    fee: Wallet.util.lovelacesToAdaString(summary.fee.toString()),
     status: transformTransactionStatus(transaction, status),
     amount: formattedAmount.amount,
     fiatAmount: formattedAmount.fiatAmount,

packages/core/src/ui/components/Activity/AssetActivityItem.tsx

@@ -243,10 +243,7 @@ export const AssetActivityItem = ({
           ref={ref}
         >
           <span>
-            <span data-testid="balance">
-              {isNegativeBalance ? '-' : ''}
-              {assetsText.text}
-            </span>
+            <span data-testid="balance">{assetsText.text}</span>
             {assetsText.suffix && (
               <Tooltip
                 overlayClassName={styles.tooltip}

packages/core/src/ui/components/Activity/__tests__/AssetActivityItem.test.tsx

@@ -51,7 +51,7 @@ describe('Testing AssetActivityItem component', () => {
 
       const totalAmount = await findByTestId('balance');
 
-      expect(totalAmount).toHaveTextContent(`-${props.amount}`);
+      expect(totalAmount).toHaveTextContent(`${props.amount}`);
     });
   });
 
@@ -65,7 +65,7 @@ describe('Testing AssetActivityItem component', () => {
     const { findByTestId } = render(<AssetActivityItem {...props} />);
 
     const activityAmount = await findByTestId(assetsAmountTestId);
-    const tickerText = `-${props.amount}, ${props.assets?.[0].val} ${props.assets?.[0].info?.ticker}`;
+    const tickerText = `${props.amount}, ${props.assets?.[0].val} ${props.assets?.[0].info?.ticker}`;
     const activityAssetTickerText = await within(activityAmount).findByText(tickerText);
 
     expect(activityAssetTickerText).toBeVisible();

packages/e2e-tests/src/features/HdWalletExtended.feature

@@ -18,7 +18,7 @@ Feature: HD wallet - extended view
     Then I can see transaction <txNumber> has type "<txType>" and value "<txValue>"
     Examples:
       | txNumber | txType           | txValue | Notes                             |
-      | 1        | Sent             | 17.00   |                                   |
+      | 1        | Sent             | 17.19   |                                   |
       | 2        | Received         | 16.00   | Was received to not first address |
       | 3        | Received         | 4.00    | Was received to first address     |
       | 6        | Self Transaction | 0.17    | Was send to first address         |

packages/e2e-tests/src/features/TransactionsExtended.part2.feature

@@ -34,7 +34,7 @@ Feature: Transactions - Extended view
     And I save tx hash value "a21a3069e214f34ef32e4797865233f87195b753a4cfbca7bed2ccf4807d98d0"
     And I am on Transactions extended page
     And I wait for the transaction history to be loaded and all transactions to be confirmed
-    When the Sent transaction is displayed with value: "24.79 tADA" and tokens count 1
+    When the Sent transaction is displayed with value: "25.00 tADA" and tokens count 1
     When I click on a transaction: 1
     Then The Tx details are displayed as "core.activityDetails.sent" for ADA with value: 24.79 and wallet: "addr_test1qp7vynpwhsyjsqvyw9n8r4uy3uj5hu2arfy94vynvng6556hhqrnhndmg2pntqazt36v700x6kryqjhe75p58v65v6kszx7h3j" address
 

packages/e2e-tests/src/features/WalletAddressPageExtended.feature

@@ -71,7 +71,7 @@ Feature: Wallet address page
     And The Transaction submitted screen is displayed in extended mode
     And I close the drawer by clicking close button
     And I navigate to Transactions extended page
-    And the Sent transaction is displayed with value: "2.00 tADA" and tokens count 1
+    And the Sent transaction is displayed with value: "2.17 tADA" and tokens count 1
     And I open wallet: "UnusedAddressWallet" in: extended mode
     And I click "Receive" button on page header
     And I click "Wallet Address" "Advanced mode" toggle

packages/e2e-tests/src/features/analytics/AnalyticsSendExtended.feature

@@ -30,7 +30,7 @@ Feature: Analytics - Posthog - Sending - Extended View
     And I click "View transaction" button on submitted transaction page
     And Local storage unconfirmedTransaction contains tx with type: "internal"
     And I validate latest analytics single event "send | all done | view transaction | click"
-    When the Sent transaction is displayed with value: "2.12 tADA" and tokens count 1
+    When the Sent transaction is displayed with value: "2.30 tADA" and tokens count 1
     Then I validate latest analytics single event "send | transaction confirmed"
     And I validate that the "send | transaction confirmed" event includes property "tx_creation_type" with value "internal" in posthog
     And I validate that 7 analytics event(s) have been sent
@@ -62,7 +62,7 @@ Feature: Analytics - Posthog - Sending - Extended View
     And I wait 2000 milliseconds
     And I set up request interception for posthog analytics request(s)
     Then Local storage unconfirmedTransaction contains tx with type: "external"
-    When the Sent transaction is displayed with value: "3.00 tADA" and tokens count 1
+    When the Sent transaction is displayed with value: "3.17 tADA" and tokens count 1
     Then I validate latest analytics single event "send | transaction confirmed"
     And I validate that the "send | transaction confirmed" event includes property "tx_creation_type" with value "external" in posthog
     And I validate that 1 analytics event(s) have been sent