fix(staking): clicking on drift warning not working (popup) LW-9438 (#…

…918)

* fix(staking): clicking on drift warning not working (popup) LW-9438

apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx

@@ -111,7 +111,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
           setMultidelegationFirstVisit(false);
           setMultidelegationFirstVisitSincePortfolioPersistence(false);
         },
-        expandStakingView: () => handleOpenBrowser({ section: BrowserViewSections.STAKING }),
+        expandStakingView: (urlSearchParams?: string) =>
+          handleOpenBrowser({ section: BrowserViewSections.STAKING, urlSearchParams }),
         balancesBalance: balance,
         delegationStoreSetDelegationTxBuilder: setDelegationTxBuilder,
         delegationStoreDelegationTxBuilder: delegationTxBuilder,

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

@@ -43,6 +43,7 @@ interface TokenAPIResponse {
 
 const migrationState$ = new BehaviorSubject<MigrationState | undefined>(undefined);
 
+// eslint-disable-next-line complexity
 const handleOpenBrowser = async (data: OpenBrowserData) => {
   let path = '';
   switch (data.section) {
@@ -79,7 +80,8 @@ const handleOpenBrowser = async (data: OpenBrowserData) => {
       path = walletRoutePaths.sharedWallet.root;
       break;
   }
-  await tabs.create({ url: `app.html#${path}` }).catch((error) => console.error(error));
+  const params = data.urlSearchParams ? `?${data.urlSearchParams}` : '';
+  await tabs.create({ url: `app.html#${path}${params}` }).catch((error) => console.error(error));
 };
 
 const handleChangeTheme = (data: ChangeThemeData) => requestMessage$.next({ type: MessageTypes.CHANGE_THEME, data });

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

@@ -39,6 +39,7 @@ export enum BrowserViewSections {
 
 export interface OpenBrowserData {
   section: BrowserViewSections;
+  urlSearchParams?: string;
 }
 
 interface ChangeThemeMessage {
@@ -56,7 +57,7 @@ interface OpenBrowserMessage {
 export type Message = ChangeThemeMessage | HTTPConnectionMessage | OpenBrowserMessage;
 
 export type BackgroundService = {
-  handleOpenBrowser: (data: OpenBrowserData) => Promise<void>;
+  handleOpenBrowser: (data: OpenBrowserData, urlSearchParams?: string) => Promise<void>;
   requestMessage$: Subject<Message>;
   migrationState$: BehaviorSubject<MigrationState | undefined>;
   coinPrices: CoinPrices;

packages/staking/src/features/outside-handles-provider/types.ts

@@ -62,7 +62,7 @@ export type OutsideHandlesContextValue = {
   stakingBrowserPreferencesPersistence: StakingBrowserPreferences;
   setStakingBrowserPreferencesPersistence: (preferences: StakingBrowserPreferences) => void;
   walletManagerExecuteWithPassword: <T>(action: () => Promise<T>, password?: string) => Promise<T>;
-  expandStakingView?: () => void;
+  expandStakingView?: (urlSearchParams?: string) => void;
   balancesBalance?: Balance;
   delegationStoreSetDelegationTxBuilder: (txBuilder?: TxBuilder) => void;
   delegationStoreSetDelegationTxFee: (fee?: string) => void;

packages/staking/src/features/overview/ExpandViewBanner.tsx

@@ -8,7 +8,7 @@ import styles from './ExpandViewBanner.module.scss';
 
 export const ExpandViewBanner = (): React.ReactElement => {
   const { t } = useTranslation();
-  const { expandStakingView } = useOutsideHandles();
+  const { expandStakingView = () => void 0 } = useOutsideHandles();
 
   return (
     <div className={styles.wrapper}>
@@ -20,7 +20,7 @@ export const ExpandViewBanner = (): React.ReactElement => {
           {t('popup.expandBanner.description')}
         </div>
         <Button
-          onClick={expandStakingView}
+          onClick={() => expandStakingView()}
           className={styles.button}
           size="large"
           color="gradient"

packages/staking/src/features/overview/Overview.tsx

@@ -1,13 +1,15 @@
 import { useObservable } from '@lace/common';
 import { Box, ControlButton, Flex, Text } from '@lace/ui';
 import { Skeleton } from 'antd';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DelegationCard } from '../DelegationCard';
 import { useOutsideHandles } from '../outside-handles-provider';
 import { useDelegationPortfolioStore } from '../store';
 import { FundWalletBanner } from './FundWalletBanner';
 import { GetStartedSteps } from './GetStartedSteps';
 import { hasMinimumFundsToDelegate, hasPendingDelegationTransaction, mapPortfolioToDisplayData } from './helpers';
+import { useStakingSectionLoadActions } from './hooks';
 import { StakeFundsBanner } from './StakeFundsBanner';
 import { StakingInfoCard } from './StakingInfoCard';
 import { StakingNotificationBanners, getCurrentStakingNotifications } from './StakingNotificationBanners';
@@ -29,10 +31,28 @@ export const Overview = () => {
     currentPortfolio: store.currentPortfolio,
     portfolioMutators: store.mutators,
   }));
+  const { onLoad } = useStakingSectionLoadActions();
   const stakingNotifications = getCurrentStakingNotifications({ currentPortfolio, walletActivities });
 
   const totalCoinBalance = balancesBalance?.total?.coinBalance;
 
+  useEffect(() => {
+    if (
+      totalCoinBalance &&
+      protocolParameters?.stakeKeyDeposit &&
+      balancesBalance?.available?.coinBalance &&
+      rewardAccounts
+    ) {
+      onLoad();
+    }
+  }, [
+    balancesBalance?.available?.coinBalance,
+    onLoad,
+    protocolParameters?.stakeKeyDeposit,
+    rewardAccounts,
+    totalCoinBalance,
+  ]);
+
   if (
     !totalCoinBalance ||
     !protocolParameters?.stakeKeyDeposit ||

packages/staking/src/features/overview/OverviewPopup.tsx

@@ -87,7 +87,7 @@ export const OverviewPopup = () => {
     <>
       {stakingNotifications.length > 0 && (
         <Flex mb="$32" flexDirection="column">
-          <StakingNotificationBanners notifications={stakingNotifications} />
+          <StakingNotificationBanners notifications={stakingNotifications} popupView />
         </Flex>
       )}
       <Box mb="$32">

packages/staking/src/features/overview/StakingNotificationBanners/PortfolioDriftBanner.tsx

@@ -17,7 +17,7 @@ export const PortfolioDriftBanner: VFC<PortfolioDriftBannerProps> = ({ popupView
 
   const onBannerClick = () => {
     if (popupView) {
-      expandStakingView();
+      expandStakingView('onLoadAction=ManagePortfolio');
       return;
     }
 

packages/staking/src/features/overview/StakingNotificationBanners/StakingNotificationBanners.tsx

@@ -21,7 +21,7 @@ export const StakingNotificationBanners = ({ popupView, notifications }: Staking
 
   const onPoolRetiredOrSaturatedBannerClick = () => {
     if (popupView) {
-      expandStakingView();
+      expandStakingView('onLoadAction=ManagePortfolio');
       return;
     }
 

packages/staking/src/features/overview/hooks.ts

@@ -0,0 +1,22 @@
+import { useSearchParams } from '@lace/common';
+import { useDelegationPortfolioStore } from 'features/store';
+import { useCallback, useState } from 'react';
+
+export const useStakingSectionLoadActions = () => {
+  const portfolioMutators = useDelegationPortfolioStore((store) => store.mutators);
+  const { onLoadAction } = useSearchParams(['onLoadAction']);
+  const [executed, setExecuted] = useState(false);
+
+  const onLoad = useCallback(() => {
+    if (!executed && onLoadAction === 'ManagePortfolio') {
+      portfolioMutators.executeCommand({
+        type: 'ManagePortfolio',
+      });
+      setExecuted(true);
+    }
+  }, [executed, onLoadAction, portfolioMutators]);
+
+  return {
+    onLoad,
+  };
+};