feat(staking): expose activity detail drawer in staking section to be used by staking activity

Author: refi93

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

@@ -89,12 +89,15 @@ const buildGetActivityDetail =
       walletInfo
     } = get();
 
+    set({ fetchingActivityInfo: true });
+
     if (activityDetail.type === 'rewards') {
       const { activity, status, type } = activityDetail;
       const poolInfos = await getPoolInfos(
         activity.rewards.map(({ poolId }) => poolId),
         stakePoolProvider
       );
+      set({ fetchingActivityInfo: false });
 
       return {
         activity: {
@@ -128,7 +131,6 @@ const buildGetActivityDetail =
     const { activity: tx, status, type, direction } = activityDetail;
     const walletAssets = await firstValueFrom(wallet.assetInfo$);
     const protocolParameters = await firstValueFrom(wallet.protocolParameters$);
-    set({ fetchingActivityInfo: true });
 
     // Assets
     const assetIds = getTransactionAssetsId(tx.body.outputs);

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/MultiDelegationStaking.tsx

@@ -1,5 +1,5 @@
 import { OutsideHandlesProvider, Staking } from '@lace/staking';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import {
   useAnalyticsContext,
   useBackgroundServiceAPIContext,
@@ -17,6 +17,9 @@ import {
   MULTIDELEGATION_FIRST_VISIT_LS_KEY,
   MULTIDELEGATION_FIRST_VISIT_SINCE_PORTFOLIO_PERSISTENCE_LS_KEY
 } from '@utils/constants';
+import { ActivityDetail } from '../../activity';
+import { Drawer, DrawerNavigation } from '@lace/common';
+import { useTranslation } from 'react-i18next';
 
 export const MultiDelegationStaking = (): JSX.Element => {
   const { theme } = useTheme();
@@ -38,7 +41,9 @@ export const MultiDelegationStaking = (): JSX.Element => {
     fetchNetworkInfo,
     networkInfo,
     blockchainProvider,
-    currentChain
+    currentChain,
+    activityDetail,
+    resetActivityState
   } = useWalletStore((state) => ({
     getKeyAgentType: state.getKeyAgentType,
     inMemoryWallet: state.inMemoryWallet,
@@ -50,8 +55,11 @@ export const MultiDelegationStaking = (): JSX.Element => {
     fetchNetworkInfo: state.fetchNetworkInfo,
     blockchainProvider: state.blockchainProvider,
     walletInfo: state.walletInfo,
-    currentChain: state.currentChain
+    currentChain: state.currentChain,
+    activityDetail: state.activityDetail,
+    resetActivityState: state.resetActivityState
   }));
+  const { t } = useTranslation();
   const sendAnalytics = useCallback(() => {
     // TODO implement analytics for the new flow
     const analytics = {
@@ -80,6 +88,11 @@ export const MultiDelegationStaking = (): JSX.Element => {
   const walletAddress = walletInfo.addresses?.[0].address?.toString();
   const analytics = useAnalyticsContext();
 
+  // Reset current transaction details and close drawer if network (blockchainProvider) has changed
+  useEffect(() => {
+    resetActivityState();
+  }, [resetActivityState, blockchainProvider]);
+
   return (
     <OutsideHandlesProvider
       {...{
@@ -119,6 +132,27 @@ export const MultiDelegationStaking = (): JSX.Element => {
       }}
     >
       <Staking currentChain={currentChain} theme={theme.name} />
+      {/*
+        Note: Mounting the browser-extension activity details drawer here is just a workaround.
+        Ideally, the Drawer/Activity detail should be fully managed within the "Staking" component,
+        which contains the respective "Activity" section, but that would require moving/refactoring
+        large chunks of code, ATM tightly coupled with browser-extension state/logic,
+        to a separate package (core perhaps?).
+      */}
+      <Drawer
+        visible={!!activityDetail}
+        onClose={resetActivityState}
+        navigation={
+          <DrawerNavigation
+            title={t('transactions.detail.title')}
+            onCloseIconClick={() => {
+              resetActivityState();
+            }}
+          />
+        }
+      >
+        {activityDetail && priceResult && <ActivityDetail price={priceResult} />}
+      </Drawer>
     </OutsideHandlesProvider>
   );
 };