fix: [lw-10691]: add register as dRep banner and stake key raw info (#1537)

* fix: [lw-10691]: show register as drep banner and stake key raw info in staking center

* fix: [lw-10691]: fix sonarcloud issues

* fix: [lw-10691]: resolve pr comments

* fix: [lw-10691]: fix ci issues

* fix: [lw-10691]: fix tests

* fix: [lw-10691]: resolve pr comments

* fix: [lw-10691]: resolve pr comments

* fix: [lw-10691] update to the latest figma

* fix: [lw-10691]: resolve pr comments

* fix: [lw-10691]: handle retired drep flow

* fix: resolve sdet comments

---------

Co-authored-by: Mircea Hasegan <mircea.hasegan@iohk.io>

Author: vetalcore

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

@@ -52,6 +52,10 @@ 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_MAINNET=https://gov.tools
+GOV_TOOLS_URL_PREPROD=
+GOV_TOOLS_URL_PREVIEW=https://preview.gov.tools
+GOV_TOOLS_URL_SANCHONET=
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io

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

@@ -51,6 +51,10 @@ 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_MAINNET=https://gov.tools
+GOV_TOOLS_URL_PREPROD=
+GOV_TOOLS_URL_PREVIEW=https://preview.gov.tools
+GOV_TOOLS_URL_SANCHONET=
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io

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

@@ -50,6 +50,10 @@ 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_MAINNET=https://gov.tools
+GOV_TOOLS_URL_PREPROD=
+GOV_TOOLS_URL_PREVIEW=https://preview.gov.tools
+GOV_TOOLS_URL_SANCHONET=
 # 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/package.json

@@ -34,7 +34,7 @@
     "prepack": "yarn build",
     "prepare": "ts-patch install -s",
     "prettier": "run -T prettier --write .",
-    "test": "run -T jest --config test/jest.config.js --silent",
+    "test": "run -T jest --config test/jest.config.js",
     "test:e2e": "yarn exec echo \"No e2e tests on this app yet!\"",
     "type-check": "echo \"@lace/browser-extension-wallet: no type-check command specified\"",
     "watch": "NODE_OPTIONS='--openssl-legacy-provider' rm -rf dist & run -T webpack --config webpack.sw.dev.js --progress --watch & run -T webpack --config webpack.app.dev.js --progress --watch"

apps/browser-extension-wallet/src/config.ts

@@ -32,6 +32,7 @@ export type Config = {
   CEXPLORER_URL_PATHS: CExplorerUrlPaths;
   SAVED_PRICE_DURATION: number;
   DEFAULT_SUBMIT_API: string;
+  GOV_TOOLS_URLS: Record<EnvironmentTypes, string>;
 };
 
 // eslint-disable-next-line complexity
@@ -134,6 +135,12 @@ export const config = (): Config => {
     SAVED_PRICE_DURATION: !Number.isNaN(Number(process.env.SAVED_PRICE_DURATION_IN_MINUTES))
       ? Number(process.env.SAVED_PRICE_DURATION_IN_MINUTES)
       : 720,
-    DEFAULT_SUBMIT_API: 'http://localhost:8090/api/submit/tx'
+    DEFAULT_SUBMIT_API: 'http://localhost:8090/api/submit/tx',
+    GOV_TOOLS_URLS: {
+      Mainnet: `${process.env.GOV_TOOLS_URL_MAINNET}`,
+      Preprod: `${process.env.GOV_TOOLS_URL_PREPROD}`,
+      Preview: `${process.env.GOV_TOOLS_URL_PREVIEW}`,
+      Sanchonet: `${process.env.GOV_TOOLS_URL_SANCHONET}`
+    }
   };
 };

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

@@ -3,7 +3,7 @@ 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 +12,10 @@ import { ExpandViewBanner } from './ExpandViewBanner';
 import styles from './DelegationLayout.module.scss';
 import { SectionTitle } from '@components/Layout/SectionTitle';
 import { useWalletStore } from '@src/stores';
+import { Box } from '@input-output-hk/lace-ui-toolkit';
+import { useExternalLinkOpener } from '@providers';
+import { useRewardAccountsData } from '@src/views/browser-view/features/staking/hooks';
+import { config } from '@src/config';
 
 const { Text } = Typography;
 
@@ -69,7 +73,10 @@ export const DelegationLayout = ({
   cardanoCoin
 }: DelegationLayoutProps): React.ReactElement => {
   const { t } = useTranslation();
+  const { environmentName } = useWalletStore();
   const totalResultCount = useWalletStore(({ stakePoolSearchResults }) => stakePoolSearchResults?.totalResultCount);
+  const openExternalLink = useExternalLinkOpener();
+  const { GOV_TOOLS_URLS } = config();
   const showExpandView = hasNoFunds || (!hasNoFunds && !isDelegating) || isDelegating;
 
   const stakePoolSearchTranslations = {
@@ -80,6 +87,9 @@ export const DelegationLayout = ({
     searchPlaceholder: t('cardano.stakePoolSearch.searchPlaceholder')
   };
 
+  const { areAllRegisteredStakeKeysWithoutVotingDelegation, poolIdToRewardAccountsMap } = useRewardAccountsData();
+  const showRegisterAsDRepBanner = !hasNoFunds && areAllRegisteredStakeKeysWithoutVotingDelegation;
+
   return (
     <ContentLayout
       title={<SectionTitle title={t('staking.sectionTitle')} classname={styles.sectionTilte} />}
@@ -88,6 +98,16 @@ export const DelegationLayout = ({
       <div className={styles.content}>
         <Skeleton loading={!isNumber(coinBalance)}>
           <div className={styles.contentWrapper}>
+            {showRegisterAsDRepBanner && (
+              <Box mt="$16">
+                <RegisterAsDRepBanner
+                  openExternalLink={openExternalLink}
+                  govToolUrl={GOV_TOOLS_URLS[environmentName]}
+                  popupView
+                />
+              </Box>
+            )}
+
             {canDelegate && <StakeFundsBanner balance={coinBalance} popupView />}
 
             {hasNoFunds && (
@@ -103,6 +123,7 @@ export const DelegationLayout = ({
               <StakingInfo
                 {...{
                   ...currentStakePool,
+                  rewardAccount: poolIdToRewardAccountsMap.get(currentStakePool.id)?.[0],
                   coinBalance,
                   fiat,
                   totalRewards,

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

@@ -28,6 +28,8 @@ 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 { useRewardAccountsData } from '@src/views/browser-view/features/staking/hooks';
+import { config } from '@src/config';
 
 export const MultiDelegationStakingPopup = (): JSX.Element => {
   const { t } = useTranslation();
@@ -115,6 +117,8 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     fetchNetworkInfo();
   }, [fetchNetworkInfo, blockchainProvider]);
 
+  const { GOV_TOOLS_URLS } = config();
+
   return (
     <OutsideHandlesProvider
       {...{
@@ -162,7 +166,9 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
         isSharedWallet,
         signPolicy,
         sharedWalletKey,
-        coSigners
+        coSigners,
+        useRewardAccountsData,
+        govToolUrl: GOV_TOOLS_URLS[environmentName]
       }}
     >
       <ContentLayout