feat: display end txs message in the activity tab (#1660)

* feat: display end txs message in the activity tab

* feat: bump cardano-js-sdk for partial tx history

* feat(all): bump sdk version

* refactor(extension): remove leftover comment

* fix: resolve pr comments

* feat: always use extension storage

ignore posthog feature flag

* refactor(extension,cardano): fix sonar/lint/unit tests

* refactor(extension,cardano,staking): remove redundant code and fix errors

* test(extension): fix LW-2337

* fix: activity tab now uses wallet input resolver

* fix: use wallet input resolver on Nami activity tab

* fix: limit rewards history

* chore: activity sideText "recent" instead of count

* test: e2e - fix check for activity section title

* test: e2e - wait for address inf DApp connector test

---------

Co-authored-by: Martynas Kazlauskas <martynas.kazlauskas@iohk.io>
Co-authored-by: Przemysław Włodek <przem.wlodek.github@gmail.com>
Co-authored-by: wklos-iohk <wojciech.klos@iohk.io>
Co-authored-by: Angel Castillo <angel.castillo@iohk.io>
Co-authored-by: Mircea Hasegan <mircea.hasegan@iohk.io>
Co-authored-by: Lukasz Jagiela <Lukasz.Jagiela@iohk.io>

Author: 7 people

apps/browser-extension-wallet/package.json

@@ -41,15 +41,15 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@cardano-sdk/cardano-services-client": "0.23.6",
-    "@cardano-sdk/core": "0.43.0",
-    "@cardano-sdk/dapp-connector": "0.13.1",
-    "@cardano-sdk/input-selection": "0.13.34",
-    "@cardano-sdk/tx-construction": "0.24.4",
+    "@cardano-sdk/cardano-services-client": "0.26.0",
+    "@cardano-sdk/core": "0.45.0",
+    "@cardano-sdk/dapp-connector": "0.13.3",
+    "@cardano-sdk/input-selection": "0.14.1",
+    "@cardano-sdk/tx-construction": "0.26.0",
     "@cardano-sdk/util": "0.15.5",
-    "@cardano-sdk/util-rxjs": "0.9.2",
-    "@cardano-sdk/wallet": "0.49.2",
-    "@cardano-sdk/web-extension": "0.37.5",
+    "@cardano-sdk/util-rxjs": "0.9.4",
+    "@cardano-sdk/wallet": "0.51.3",
+    "@cardano-sdk/web-extension": "0.38.3",
     "@emurgo/cip14-js": "~3.0.1",
     "@input-output-hk/lace-ui-toolkit": "1.21.0",
     "@lace/cardano": "0.1.0",
@@ -104,7 +104,7 @@
     "zustand": "3.5.14"
   },
   "devDependencies": {
-    "@cardano-sdk/hardware-ledger": "0.13.2",
+    "@cardano-sdk/hardware-ledger": "0.15.0",
     "@emurgo/cardano-message-signing-asmjs": "1.0.1",
     "@openpgp/web-stream-tools": "0.0.11-patch-0",
     "@pdfme/common": "^4.0.2",

apps/browser-extension-wallet/src/features/activity/components/Activity.tsx

@@ -12,6 +12,7 @@ import { walletRoutePaths } from '@routes';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { useAnalyticsContext } from '@providers';
 import { useWalletActivities } from '@hooks/useWalletActivities';
+import { Flex, Text } from '@input-output-hk/lace-ui-toolkit';
 
 export const Activity = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -24,9 +25,12 @@ export const Activity = (): React.ReactElement => {
   const sendAnalytics = useCallback(() => {
     analytics.sendEventToPostHog(PostHogAction.ActivityActivityActivityRowClick);
   }, [analytics]);
-  const { walletActivities, walletActivitiesStatus, activitiesCount } = useWalletActivities({ sendAnalytics });
+  const { walletActivities, walletActivitiesStatus } = useWalletActivities({
+    sendAnalytics,
+    withLimitedRewardsHistory: true
+  });
 
-  const layoutSideText = `(${activitiesCount})`;
+  const layoutSideText = `(${t('browserView.activity.titleSideText')})`;
   const isLoading = walletActivitiesStatus !== StateStatus.LOADED;
   const hasActivities = walletActivities?.length > 0;
 
@@ -53,7 +57,14 @@ export const Activity = (): React.ReactElement => {
         {hasActivities ? (
           <GroupedAssetActivityList
             lists={walletActivities}
-            infiniteScrollProps={{ scrollableTarget: 'contentLayout' }}
+            infiniteScrollProps={{
+              scrollableTarget: 'contentLayout',
+              endMessage: (
+                <Flex justifyContent="center">
+                  <Text.Label>{t('walletActivity.endMessage')}</Text.Label>
+                </Flex>
+              )
+            }}
           />
         ) : (
           <div className={styles.emptyState}>

apps/browser-extension-wallet/src/hooks/useWalletActivities.ts

@@ -6,12 +6,14 @@ import noop from 'lodash/noop';
 
 type UseWalletActivitiesProps = {
   sendAnalytics: () => void;
+  withLimitedRewardsHistory?: boolean;
 };
 const noAnalyticsProps = { sendAnalytics: noop };
 type WalletActivities = Omit<WalletActivitiesSlice, 'getWalletActivities'>;
 
 export const useWalletActivities = ({
-  sendAnalytics
+  sendAnalytics,
+  withLimitedRewardsHistory
 }: UseWalletActivitiesProps = noAnalyticsProps): WalletActivities => {
   const { fiatCurrency } = useCurrencyStore();
   const { priceResult } = useFetchCoinPrice();
@@ -26,9 +28,10 @@ export const useWalletActivities = ({
       getWalletActivities({
         fiatCurrency,
         cardanoFiatPrice,
-        sendAnalytics
+        sendAnalytics,
+        withLimitedRewardsHistory
       });
-  }, [fiatCurrency, cardanoFiatPrice, getWalletActivities, sendAnalytics]);
+  }, [fiatCurrency, cardanoFiatPrice, getWalletActivities, withLimitedRewardsHistory, sendAnalytics]);
 
   useEffect(() => {
     fetchWalletActivities();

apps/browser-extension-wallet/src/hooks/useWalletManager.ts

@@ -167,13 +167,14 @@ const getExtendedAccountPublicKey = async (
         passphrase
       );
       const rootPrivateKeyBuffer = Buffer.from(rootPrivateKeyBytes);
+      const bip32Ed25519 = await Wallet.getBip32Ed25519();
       const accountPrivateKey = await Wallet.KeyManagement.util.deriveAccountPrivateKey({
-        bip32Ed25519: Wallet.bip32Ed25519,
+        bip32Ed25519,
         accountIndex,
         rootPrivateKey: Wallet.Crypto.Bip32PrivateKeyHex(rootPrivateKeyBuffer.toString('hex')),
         purpose
       });
-      const accountPublicKey = await Wallet.bip32Ed25519.getBip32PublicKey(accountPrivateKey);
+      const accountPublicKey = bip32Ed25519.getBip32PublicKey(accountPrivateKey);
       clearBytes(passphrase);
       clearBytes(rootPrivateKeyBytes);
       clearBytes(rootPrivateKeyBuffer);
@@ -631,7 +632,7 @@ export const useWalletManager = (): UseWalletManager => {
         purpose: KeyManagement.KeyPurpose.STANDARD
       },
       {
-        bip32Ed25519: Wallet.bip32Ed25519,
+        bip32Ed25519: await Wallet.getBip32Ed25519(),
         logger
       }
     );

apps/browser-extension-wallet/src/lib/scripts/background/config.ts

@@ -63,7 +63,7 @@ export const getProviders = async (chainName: Wallet.ChainName): Promise<Wallet.
       useDrepProviderOverrideActiveStatus: isExperimentEnabled(ExperimentName.USE_DREP_PROVIDER_OVERRIDE),
       useWebSocket: isExperimentEnabled(ExperimentName.WEBSOCKET_API),
       useBlockfrostAssetProvider: isExperimentEnabled(ExperimentName.BLOCKFROST_ASSET_PROVIDER),
-      useBlockfrostChainHistoryProvider: isExperimentEnabled(ExperimentName.BLOCKFROST_CHAIN_HISTORY_PROVIDER),
+      useBlockfrostChainHistoryProvider: true,
       useBlockfrostNetworkInfoProvider: isExperimentEnabled(ExperimentName.BLOCKFROST_NETWORK_INFO_PROVIDER),
       useBlockfrostRewardsProvider: isExperimentEnabled(ExperimentName.BLOCKFROST_REWARDS_PROVIDER),
       useBlockfrostTxSubmitProvider: isExperimentEnabled(ExperimentName.BLOCKFROST_TX_SUBMIT_PROVIDER),

apps/browser-extension-wallet/src/lib/scripts/background/storage/extension-document-store.ts

@@ -29,6 +29,7 @@ export class ExtensionDocumentStore<T extends {}> extends ExtensionStore impleme
 
   /**
    * @param docId unique document id within the store, used as extension storage key
+   * @param logger
    */
   constructor(protected docId: string, logger: Logger) {
     super(contextLogger(logger, `ExtensionStore(${docId})`));
@@ -44,6 +45,10 @@ export class ExtensionDocumentStore<T extends {}> extends ExtensionStore impleme
     );
   }
 
+  delete(): Observable<void> {
+    return from(this.storage.remove(this.docId));
+  }
+
   get(): Observable<T> {
     return from(this.storage.get(this.docId)).pipe(
       mergeMap((values) => {

apps/browser-extension-wallet/src/lib/scripts/background/wallet.ts

@@ -241,8 +241,9 @@ const pouchdbStoresFactory: StoresFactory = {
       inFlightTransactions: new storage.PouchDbInFlightTransactionsStore(docsDbName, 'transactionsInFlight_v3', logger),
       policyIds: new storage.PouchDbPolicyIdsStore(docsDbName, 'policyIds', logger),
       protocolParameters: new storage.PouchDbProtocolParametersStore(docsDbName, 'protocolParameters', logger),
-      rewardsBalances: new storage.PouchDbRewardsBalancesStore(`${baseDbName}RewardsBalances`, logger),
       rewardsHistory: new storage.PouchDbRewardsHistoryStore(`${baseDbName}RewardsHistory`, logger),
+      delegationPortfolio: new storage.PouchDbDelegationPortfolioStore(docsDbName, 'delegationPortfolio', logger),
+      rewardAccountInfo: new storage.PouchDbRewardAccountInfoStore(`${baseDbName}RewardAccountsInfo`, logger),
       stakePools: new storage.PouchDbStakePoolsStore(`${baseDbName}StakePools`, logger),
       signedTransactions: new storage.PouchDbSignedTransactionsStore(baseDbName, 'signedTransactions', logger),
       tip: new storage.PouchDbTipStore(docsDbName, 'tip', logger),
@@ -294,7 +295,8 @@ export const extensionStorageStoresFactory: StoresFactory = {
     inFlightTransactions: new ExtensionDocumentStore(`${name}_transactionsInFlight`, logger),
     policyIds: new ExtensionDocumentStore(`${name}_handlePolicyIds`, logger),
     protocolParameters: new ExtensionDocumentStore(`${name}_protocolParameters`, logger),
-    rewardsBalances: new ExtensionBlobKeyValueStore(`${name}_rewardsBalances`, logger),
+    delegationPortfolio: new ExtensionDocumentStore(`${name}_delegationPortfolio`, logger),
+    rewardAccountInfo: new ExtensionBlobKeyValueStore(`${name}_rewardAccountInfo`, logger),
     rewardsHistory: new ExtensionBlobKeyValueStore(`${name}_rewardsHistory`, logger),
     stakePools: new ExtensionBlobKeyValueStore(`${name}_stakePools`, logger),
     signedTransactions: new ExtensionDocumentStore(`${name}_signedTransactions`, logger),
@@ -306,26 +308,18 @@ export const extensionStorageStoresFactory: StoresFactory = {
   })
 };
 
-// Used for migrations to get feature flags, which are enabled per chainId
-// This is coupled with WalletManager implementation (getWalletStoreId function)
-const getNetworkMagic = (storeName: string) => Number.parseInt(storeName.split('-')[1]) as Cardano.NetworkMagic;
-
 const storesFactory: StoresFactory = {
   async create(props) {
-    const featureFlags = await getFeatureFlags(getNetworkMagic(props.name));
-    if (isExperimentEnabled(featureFlags, ExperimentName.EXTENSION_STORAGE)) {
-      const extensionStores = await extensionStorageStoresFactory.create(props);
-      if (await shouldAttemptWalletStoresMigration(extensionStores)) {
-        const pouchdbStores = await pouchdbStoresFactory.create(props);
-        if (await migrateWalletStores(pouchdbStores, extensionStores, logger)) {
-          // TODO: safe to destroy pouchdb stores on successful migration
-          // once EXTENSION_STORAGE experiment runs in production for some time
-          // and we are sure that it's working well
-        }
+    const extensionStores = await extensionStorageStoresFactory.create(props);
+    if (await shouldAttemptWalletStoresMigration(extensionStores)) {
+      const pouchdbStores = await pouchdbStoresFactory.create(props);
+      if (await migrateWalletStores(pouchdbStores, extensionStores, logger)) {
+        // TODO: safe to destroy pouchdb stores on successful migration
+        // once EXTENSION_STORAGE experiment runs in production for some time
+        // and we are sure that it's working well
       }
-      return extensionStores;
     }
-    return pouchdbStoresFactory.create(props);
+    return extensionStores;
   }
 };
 

apps/browser-extension-wallet/src/lib/wallet-api-ui.ts

@@ -55,7 +55,7 @@ export const walletRepository = consumeRemoteApi<WalletRepositoryApi<Wallet.Wall
   { logger, runtime }
 );
 
-export const keyAgentFactory = createKeyAgentFactory({ bip32Ed25519: Wallet.bip32Ed25519, logger });
+export const keyAgentFactory = createKeyAgentFactory({ getBip32Ed25519: Wallet.getBip32Ed25519, logger });
 
 export const signingCoordinator = new SigningCoordinator<Wallet.WalletMetadata, Wallet.AccountMetadata>(
   { hwOptions: { manifest: Wallet.manifest, communicationType: Wallet.KeyManagement.CommunicationType.Web } },

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

@@ -11,6 +11,7 @@ export interface IBlockchainProvider {
   networkInfoProvider: Wallet.NetworkInfoProvider;
   utxoProvider: Wallet.UtxoProvider;
   chainHistoryProvider: Wallet.ChainHistoryProvider;
+  rewardAccountInfoProvider: Wallet.RewardAccountInfoProvider;
   rewardsProvider: Wallet.RewardsProvider;
   drepProvider?: DRepProvider;
   inputResolver: Cardano.InputResolver;
@@ -25,6 +26,7 @@ export const IBlockchainProvider = {
     txSubmitProvider: providers?.txSubmitProvider,
     networkInfoProvider: providers?.networkInfoProvider,
     utxoProvider: providers?.utxoProvider,
+    rewardAccountInfoProvider: providers?.rewardAccountInfoProvider,
     rewardsProvider: providers?.rewardsProvider,
     chainHistoryProvider: providers?.chainHistoryProvider,
     drepProvider: providers?.drepProvider,
@@ -36,6 +38,7 @@ export const IBlockchainProvider = {
     stakePoolProvider: providers?.stakePoolProvider,
     networkInfoProvider: providers?.networkInfoProvider,
     utxoProvider: providers?.utxoProvider,
+    rewardAccountInfoProvider: providers?.rewardAccountInfoProvider,
     rewardsProvider: providers?.rewardsProvider,
     chainHistoryProvider: providers?.chainHistoryProvider,
     drepProvider: providers?.drepProvider,

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

@@ -39,7 +39,6 @@ import {
 } from '../types';
 import { getAssetsInformation } from '@src/utils/get-assets-information';
 import { rewardHistoryTransformer } from '@src/views/browser-view/features/activity/helpers/reward-history-transformer';
-import { createHistoricalOwnInputResolver } from '@src/utils/own-input-resolver';
 import { isKeyHashAddress } from '@cardano-sdk/wallet';
 import { ObservableWalletState } from '@hooks/useWalletState';
 import { IBlockchainProvider } from './blockchain-provider-slice';
@@ -49,6 +48,7 @@ export interface FetchWalletActivitiesProps {
   cardanoFiatPrice: number;
   assetId?: Wallet.Cardano.AssetId; // Allows to filter historicals tx by asset
   sendAnalytics?: () => void;
+  withLimitedRewardsHistory?: boolean;
 }
 
 interface FetchWalletActivitiesPropsWithSetter extends FetchWalletActivitiesProps {
@@ -124,18 +124,20 @@ const mapWalletActivities = memoize(
       assetInfo,
       delegation: { rewardsHistory }
     }: ObservableWalletState,
-    { fiatCurrency, cardanoFiatPrice, sendAnalytics }: FetchWalletActivitiesProps,
+    { fiatCurrency, cardanoFiatPrice, sendAnalytics, withLimitedRewardsHistory = false }: FetchWalletActivitiesProps,
     {
       assetDetails,
       assetProvider,
       cardanoCoin,
       setRewardsActivityDetail,
       setTransactionActivityDetail,
-      isSharedWallet
+      isSharedWallet,
+      inputResolver
     }: Pick<UISlice['walletUI'], 'cardanoCoin'> &
       Pick<ActivityDetailSlice, 'setRewardsActivityDetail' | 'setTransactionActivityDetail'> &
       Pick<AssetDetailsSlice, 'assetDetails'> &
       Pick<IBlockchainProvider, 'assetProvider'> &
+      Pick<IBlockchainProvider, 'inputResolver'> &
       Pick<WalletInfoSlice, 'isSharedWallet'>
   ) => {
     const epochRewardsMapper = (earnedEpoch: Wallet.Cardano.EpochNo, rewards: Reward[]): ExtendedActivityProps => {
@@ -167,7 +169,6 @@ const mapWalletActivities = memoize(
       };
     };
 
-    const inputResolver = createHistoricalOwnInputResolver({ addresses, transactions });
     const resolveInput = inputResolver.resolveInput;
 
     // eslint-disable-next-line unicorn/no-array-callback-reference
@@ -298,20 +299,26 @@ const mapWalletActivities = memoize(
     /**
      * Sanitizes historical rewards data
      */
-    const getRewardsHistory = () =>
+    const getRewardsHistory = (oldestHistoricalTxDate?: Date) =>
       Object.entries(groupBy(rewardsHistory.all, ({ epoch }) => epoch.toString()))
         .map(([epoch, rewards]) => epochRewardsMapper(Number(epoch) as Wallet.Cardano.EpochNo, rewards))
-        .filter((reward) => reward.date.getTime() < Date.now());
+        .filter(
+          (reward) =>
+            reward.date.getTime() < Date.now() &&
+            (!oldestHistoricalTxDate || reward.date.getTime() >= oldestHistoricalTxDate.getTime())
+        );
 
     /**
      * Emits the lists combined and sets current state for Zustand
      */
-    const [historicalTransactions, pendingTransactions, rewards] = await Promise.all([
+    const [historicalTransactions, pendingTransactions] = await Promise.all([
       getHistoricalTransactions(),
-      getPendingTransactions(),
-      assetDetails ? [] : getRewardsHistory()
+      getPendingTransactions()
     ]);
 
+    const oldestHistoricalTxDate = withLimitedRewardsHistory ? historicalTransactions[0]?.date : undefined;
+    const rewards = assetDetails ? [] : getRewardsHistory(oldestHistoricalTxDate);
+
     const confirmedTxs = historicalTransactions;
     const pendingTxs = pendingTransactions;
     /* After the transaction is confirmed is not being removed from pendingTransactions$, so we have to remove it manually from pending list
@@ -423,7 +430,7 @@ const getWalletActivities = async ({
     setTransactionActivityDetail,
     setRewardsActivityDetail,
     assetDetails,
-    blockchainProvider: { assetProvider },
+    blockchainProvider: { assetProvider, inputResolver },
     isSharedWallet
   } = get();
   if (!walletState) {
@@ -440,7 +447,8 @@ const getWalletActivities = async ({
       setRewardsActivityDetail,
       setTransactionActivityDetail,
       assetDetails,
-      isSharedWallet
+      isSharedWallet,
+      inputResolver
     }
   );
 
@@ -461,7 +469,21 @@ export const walletActivitiesSlice: SliceCreator<
   WalletInfoSlice & WalletActivitiesSlice & ActivityDetailSlice & AssetDetailsSlice & UISlice & BlockchainProviderSlice,
   WalletActivitiesSlice
 > = ({ set, get }) => ({
-  getWalletActivities: ({ fiatCurrency, cardanoFiatPrice, assetId, sendAnalytics }: FetchWalletActivitiesProps) =>
-    getWalletActivities({ fiatCurrency, cardanoFiatPrice, assetId, sendAnalytics, set, get }),
+  getWalletActivities: ({
+    fiatCurrency,
+    cardanoFiatPrice,
+    assetId,
+    sendAnalytics,
+    withLimitedRewardsHistory
+  }: FetchWalletActivitiesProps) =>
+    getWalletActivities({
+      fiatCurrency,
+      cardanoFiatPrice,
+      assetId,
+      sendAnalytics,
+      withLimitedRewardsHistory,
+      set,
+      get
+    }),
   ...initialState
 });