Merge branch 'main' into feat/lw-12079-virtualize-the-list-of-nfts

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/components/Layout/Layout.module.scss

@@ -67,7 +67,7 @@ $main-gap: 49px;
     'nav side-panel'
     'nav main';
   margin-right: size_unit(4);
-  grid-template-columns: $navigation-col-width-collapsed 1fr;
+  grid-template-columns: $navigation-col-width-collapsed minmax(0, 1fr);
   grid-template-rows: $row-height 1fr;
   height: 100%;
 
@@ -78,7 +78,7 @@ $main-gap: 49px;
   }
 
   @media (min-width: $breakpoint-xsmall) {
-    grid-template-columns: $navigation-col-width 1fr;
+    grid-template-columns: $navigation-col-width minmax(0, 1fr);
     margin: 0 size_unit(4) 0 size_unit(5);
   }
 

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,

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx

@@ -1,15 +1,12 @@
 import { Layout, SectionLayout } from '@views/browser/components';
 import SimpleView from './SimpleView';
-import DappLayout from '../layout/dapp';
 import React from 'react';
 
 export const DAppExplorer: React.FC = () => (
   <>
     <Layout noAside>
       <SectionLayout>
-        <DappLayout>
-          <SimpleView />
-        </DappLayout>
+        <SimpleView />
       </SectionLayout>
     </Layout>
     <div id={'dAppStore'} />

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx

@@ -18,9 +18,9 @@ export const AboutDapp: React.FC = () => {
         <Text.Body.Normal>{data?.longDescription}</Text.Body.Normal>
       </Box>
       {data?.screenshots && (
-        <Box mb="$24">
+        <Box mb="$16">
           <Box mb="$24">
-            <Text.SubHeading weight="$bold">{t('dappdiscovery.side_panel.gallery')}</Text.SubHeading>
+            <Text.Body.Large weight="$bold">{t('dappdiscovery.side_panel.gallery')}</Text.Body.Large>
           </Box>
           <IogSlider
             data={data.screenshots}

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/ContactItem/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IIcon } from '../../../../components/Icon/types';
+import { Flex } from '@input-output-hk/lace-ui-toolkit';
 
 interface ContactItemType {
   itemIcon: React.ReactElement<IIcon>;
@@ -12,11 +13,13 @@ export const ContactItem: React.FC<ContactItemType> = ({ itemIcon, itemTitle, it
     <span className="iog-contact-item-icon" data-testid="contact-icon">
       {itemIcon}
     </span>
-    <span className="iog-contact-item-title" data-testid="contact-name">
-      {itemTitle}
-    </span>
-    <span className="iog-contact-item-data" data-testid="contact-data">
-      {itemData}
-    </span>
+    <Flex flexDirection="column">
+      <span className="iog-contact-item-title" data-testid="contact-name">
+        {itemTitle}
+      </span>
+      <span className="iog-contact-item-data" data-testid="contact-data">
+        {itemData}
+      </span>
+    </Flex>
   </div>
 );

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/styles.scss

@@ -1,17 +1,15 @@
 @import '../../../styles/colors.scss';
 
 .iog-contact-item {
-  display: grid;
-  grid-template-columns: 24px auto;
-  grid-template-areas:
-      'icon title'
-      '. data';
-    column-gap: 12px;
-    font-size: 16px;
-    align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  gap: 12px;
 
   .iog-contact-item-icon {
-    grid-area: icon;
+    width: 24px;
+    height: 24px;
+    margin-top: 4px;
 
     svg {
       width: 100%;
@@ -22,12 +20,10 @@
 
   .iog-contact-item-title {
     font-weight: bold;
-    grid-area: title;
     color: var(--text-color-primary) !important;
   }
 
   .iog-contact-item-data {
-    grid-area: data;
-    color: var(--light-mode-dark-grey, var(--dark-mode-light-grey))
+    color: var(--light-mode-dark-grey, var(--dark-mode-light-grey));
   }
 }

apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Drawer, DrawerNavigation, Button } from '@lace/common';
+import { Drawer, DrawerNavigation, Button, PostHogAction } from '@lace/common';
 import { Tabs } from 'antd';
 import { EDrawerAction, useDrawer } from './drawer';
 import { ISectionCardItem } from '../../services/helpers/apis-formatter/types';
@@ -11,6 +11,7 @@ import LinkIcon from '../../assets/icons/link.component.svg';
 
 import './styles.scss';
 import { Flex, Text } from '@input-output-hk/lace-ui-toolkit';
+import { useAnalyticsContext } from '@providers';
 
 const shortenURL = (url?: string) => {
   if (!url) return '';
@@ -23,13 +24,22 @@ const ProjectDetail: React.FC = () => {
     state: { open, data },
     dispatch
   } = useDrawer<ISectionCardItem>();
+  const analytics = useAnalyticsContext();
 
   const { t } = useTranslation();
 
   const handleClose = () => dispatch({ type: EDrawerAction.CLOSE });
 
   const handleOpenUrl = () => {
     window.open(data?.companyWebsite, 'blank');
+    void analytics.sendEventToPostHog(PostHogAction.DappExplorerDetailDrawerRedirectClick, {
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_category_name: data?.category,
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_dapp_name: data?.title,
+      // eslint-disable-next-line camelcase
+      dapp_explorer_selected_dapp_url: data?.link
+    });
   };
 
   const tabItems = [
@@ -64,14 +74,18 @@ const ProjectDetail: React.FC = () => {
                 fit="contain"
                 src={data?.image?.src || ''}
                 alt={data?.image?.alt || 'Image'}
-                width={80}
-                height={80}
+                width={50}
+                height={50}
                 data-testid="dapp-info-modal-icon"
               />
             )}
-            <Flex flexDirection="column" gap="$8">
-              <Text.SubHeading data-testid="dapp-info-modal-title">{data?.title}</Text.SubHeading>
-              <Text.Body.Large>{data?.category}</Text.Body.Large>
+            <Flex flexDirection="column" gap="$4">
+              <Text.Body.Normal data-testid="dapp-info-modal-title" weight="$bold">
+                {data?.title}
+              </Text.Body.Normal>
+              <Text.Body.Small color="secondary" weight="$semibold">
+                {data?.category}
+              </Text.Body.Small>
             </Flex>
           </div>
         </Flex>