fix: [lw-10691]: show register as drep banner and stake key raw info …

…in staking center

apps/browser-extension-wallet/.env.defaults

@@ -52,6 +52,7 @@ TERMS_OF_USE_URL=https://www.lace.io/iohktermsandconditions.pdf
 YOUTUBE_RECOVERY_PHRASE_VIDEO_URL=https://www.youtube-nocookie.com/embed/hOFVXo969rk?si=0a-hNDVME6eTboIX
 BANXA_LACE_URL=https://lacewallet.banxa-sandbox.com/
 BANXA_HOMEPAGE_URL=https://banxa.com/
+GOV_TOOLS_URL=https://gov.tools/
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io

apps/browser-extension-wallet/.env.developerpreview

@@ -51,6 +51,7 @@ TERMS_OF_USE_URL=https://www.lace.io/iohktermsandconditions.pdf
 YOUTUBE_RECOVERY_PHRASE_VIDEO_URL=https://www.youtube-nocookie.com/embed/hOFVXo969rk?si=0a-hNDVME6eTboIX
 BANXA_LACE_URL=https://lacewallet.banxa-sandbox.com/
 BANXA_HOMEPAGE_URL=https://banxa.com/
+GOV_TOOLS_URL=https://gov.tools/
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io

apps/browser-extension-wallet/.env.example

@@ -50,6 +50,7 @@ TERMS_OF_USE_URL=https://www.lace.io/iohktermsandconditions.pdf
 YOUTUBE_RECOVERY_PHRASE_VIDEO_URL=https://www.youtube-nocookie.com/embed/hOFVXo969rk?si=0a-hNDVME6eTboIX
 BANXA_LACE_URL=https://lacewallet.banxa-sandbox.com/
 BANXA_HOMEPAGE_URL=https://banxa.com/
+GOV_TOOLS_URL=https://gov.tools/
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io
 # set this variable to true only in release packages. By having this set to false, we ensure that we will not be using Post Hog production projects tokens in development stage

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

@@ -4,10 +4,16 @@ import { useMultiDelegationEnabled } from '@hooks/useMultiDelegationEnabled';
 import React from 'react';
 import { MultiDelegationStakingPopup } from './MultiDelegationStakingPopup';
 import { DelegationContent } from './DelegationContent';
+import { StakingModals } from '@src/features/stake-pool-details';
 
 export const DelegationContainer = (): React.ReactElement => {
   // TODO: LW-7575 Remove old staking in post-MVP of multi delegation staking.
   const multiDelegationEnabled = useMultiDelegationEnabled();
 
-  return <>{multiDelegationEnabled ? <MultiDelegationStakingPopup /> : <DelegationContent />}</>;
+  return (
+    <>
+      {multiDelegationEnabled ? <MultiDelegationStakingPopup /> : <DelegationContent />}
+      <StakingModals popupView />
+    </>
+  );
 };

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

@@ -9,7 +9,7 @@ import { useRedirection, useBalances, useFetchCoinPrice, useDelegationDetails, u
 import { useWalletStore } from '@stores';
 import { networkInfoStatusSelector, stakePoolResultsSelector } from '@stores/selectors/staking-selectors';
 import { walletBalanceTransformer } from '@src/api/transformers';
-import { StakePoolDetails, StakingModals } from '../../stake-pool-details';
+import { StakePoolDetails } from '../../stake-pool-details';
 import { Sections } from '@views/browser/features/staking/types';
 import { useStakePoolDetails } from '../../stake-pool-details/store';
 import { useDelegationStore } from '../stores';
@@ -161,7 +161,6 @@ export const DelegationContent = (): React.ReactElement => {
         onStake={onStake}
         popupView
       />
-      <StakingModals popupView />
     </>
   );
 };

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

@@ -1,9 +1,10 @@
-import React from 'react';
+/* eslint-disable complexity */
+import React, { useMemo } from 'react';
 import isNumber from 'lodash/isNumber';
 import { useTranslation } from 'react-i18next';
 import { Skeleton, Typography } from 'antd';
 import { Wallet } from '@lace/cardano';
-import { StakePoolSearch, StakePoolSearchProps } from '@lace/staking';
+import { StakePoolSearch, StakePoolSearchProps, RegisterAsDRepBanner } from '@lace/staking';
 import { StakeFundsBanner } from '@views/browser/features/staking/components/StakeFundsBanner';
 import { FundWalletBanner } from '@src/views/browser-view/components';
 import { StakingInfo } from '@views/browser/features/staking/components/StakingInfo';
@@ -12,6 +13,10 @@ import { ExpandViewBanner } from './ExpandViewBanner';
 import styles from './DelegationLayout.module.scss';
 import { SectionTitle } from '@components/Layout/SectionTitle';
 import { useWalletStore } from '@src/stores';
+import { useObservable } from '@lace/common';
+import { Box } from '@input-output-hk/lace-ui-toolkit';
+import { useExternalLinkOpener } from '@providers';
+import { useStakePoolDetails } from '@src/features/stake-pool-details/store';
 
 const { Text } = Typography;
 
@@ -69,7 +74,10 @@ export const DelegationLayout = ({
   cardanoCoin
 }: DelegationLayoutProps): React.ReactElement => {
   const { t } = useTranslation();
+  const { inMemoryWallet } = useWalletStore();
   const totalResultCount = useWalletStore(({ stakePoolSearchResults }) => stakePoolSearchResults?.totalResultCount);
+  const openExternalLink = useExternalLinkOpener();
+  const { setIsRegisterAsDRepModalVisible } = useStakePoolDetails();
   const showExpandView = hasNoFunds || (!hasNoFunds && !isDelegating) || isDelegating;
 
   const stakePoolSearchTranslations = {
@@ -80,6 +88,28 @@ export const DelegationLayout = ({
     searchPlaceholder: t('cardano.stakePoolSearch.searchPlaceholder')
   };
 
+  const rewardAccounts = useObservable(inMemoryWallet.delegation.rewardAccounts$);
+  const rewardAccountsWithRegisteredStakeCreds = rewardAccounts?.filter(
+    ({ credentialStatus }) => Wallet.Cardano.StakeCredentialStatus.Registered === credentialStatus
+  );
+  const showRegisterAsDRepBanner =
+    !hasNoFunds &&
+    rewardAccountsWithRegisteredStakeCreds?.length > 0 &&
+    !rewardAccountsWithRegisteredStakeCreds.some(({ dRepDelegatee }) => dRepDelegatee);
+
+  const poolIdToRewardAccountMap = useMemo(
+    () =>
+      new Map(
+        rewardAccountsWithRegisteredStakeCreds?.map((rewardAccount) => {
+          const { delegatee } = rewardAccount;
+          const delagationInfo = delegatee?.nextNextEpoch || delegatee?.nextEpoch || delegatee?.currentEpoch;
+
+          return [delagationInfo?.id.toString(), rewardAccount];
+        })
+      ),
+    [rewardAccountsWithRegisteredStakeCreds]
+  );
+
   return (
     <ContentLayout
       title={<SectionTitle title={t('staking.sectionTitle')} classname={styles.sectionTilte} />}
@@ -88,6 +118,16 @@ export const DelegationLayout = ({
       <div className={styles.content}>
         <Skeleton loading={!isNumber(coinBalance)}>
           <div className={styles.contentWrapper}>
+            {showRegisterAsDRepBanner && (
+              <Box mt="$16">
+                <RegisterAsDRepBanner
+                  openExternalLink={openExternalLink}
+                  onConfirm={() => setIsRegisterAsDRepModalVisible(true)}
+                  popupView
+                />
+              </Box>
+            )}
+
             {canDelegate && <StakeFundsBanner balance={coinBalance} popupView />}
 
             {hasNoFunds && (
@@ -103,6 +143,7 @@ export const DelegationLayout = ({
               <StakingInfo
                 {...{
                   ...currentStakePool,
+                  stakeKey: poolIdToRewardAccountMap.get(currentStakePool.id)?.address,
                   coinBalance,
                   fiat,
                   totalRewards,

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

@@ -29,6 +29,7 @@ import { withSignTxConfirmation } from '@lib/wallet-api-ui';
 import { isMultidelegationSupportedByDevice } from '@views/browser/features/staking';
 import { useSharedWalletData } from '@hooks/useSharedWalletData';
 import { SignPolicy, useSecrets } from '@lace/core';
+import { useStakePoolDetails } from '@src/features/stake-pool-details/store';
 
 export const MultiDelegationStakingPopup = (): JSX.Element => {
   const { t } = useTranslation();
@@ -120,6 +121,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     fetchNetworkInfo();
   }, [fetchNetworkInfo, blockchainProvider]);
 
+  const { setIsRegisterAsDRepModalVisible } = useStakePoolDetails();
+
   return (
     <OutsideHandlesProvider
       {...{
@@ -170,7 +173,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
         isSharedWallet,
         signPolicy,
         sharedWalletKey,
-        coSigners
+        coSigners,
+        setIsRegisterAsDRepModalVisible
       }}
     >
       <ContentLayout