feat: add tempo-vote support for governance actions (#1900)

greatertomi · web-flow · commit 53fb46036e9d · 2025-06-13T13:04:21.000+02:00
diff --git a/apps/browser-extension-wallet/.env.defaults b/apps/browser-extension-wallet/.env.defaults
@@ -57,6 +57,10 @@ GOV_TOOLS_URL_MAINNET=https://gov.tools
 GOV_TOOLS_URL_PREPROD=https://preprod.gov.tools
 GOV_TOOLS_URL_PREVIEW=https://preview.gov.tools
 GOV_TOOLS_URL_SANCHONET=
+TEMPO_VOTE_URL_MAINNET=https://tempo.vote
+TEMPO_VOTE_URL_PREPROD=https://preprod.tempo.vote
+TEMPO_VOTE_URL_PREVIEW=https://preview.tempo.vote
+TEMPO_VOTE_URL_SANCHONET=https://sanchonet.tempo.vote
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io
diff --git a/apps/browser-extension-wallet/.env.developerpreview b/apps/browser-extension-wallet/.env.developerpreview
@@ -55,6 +55,10 @@ GOV_TOOLS_URL_MAINNET=https://gov.tools
 GOV_TOOLS_URL_PREPROD=https://preprod.gov.tools
 GOV_TOOLS_URL_PREVIEW=https://preview.gov.tools
 GOV_TOOLS_URL_SANCHONET=
+TEMPO_VOTE_URL_MAINNET=https://tempo.vote
+TEMPO_VOTE_URL_PREPROD=https://preprod.tempo.vote
+TEMPO_VOTE_URL_PREVIEW=https://preview.tempo.vote
+TEMPO_VOTE_URL_SANCHONET=https://sanchonet.tempo.vote
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io
diff --git a/apps/browser-extension-wallet/.env.example b/apps/browser-extension-wallet/.env.example
@@ -54,6 +54,11 @@ GOV_TOOLS_URL_MAINNET=https://gov.tools
 GOV_TOOLS_URL_PREPROD=https://preprod.gov.tools
 GOV_TOOLS_URL_PREVIEW=https://preview.gov.tools
 GOV_TOOLS_URL_SANCHONET=
+TEMPO_VOTE_URL_MAINNET=https://tempo.vote
+TEMPO_VOTE_URL_PREPROD=https://preprod.tempo.vote
+TEMPO_VOTE_URL_PREVIEW=https://preview.tempo.vote
+TEMPO_VOTE_URL_SANCHONET=https://sanchonet.tempo.vote
+
 # 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
diff --git a/apps/browser-extension-wallet/src/config.ts b/apps/browser-extension-wallet/src/config.ts
@@ -33,6 +33,7 @@ export type Config = {
   SAVED_PRICE_DURATION: number;
   DEFAULT_SUBMIT_API: string;
   GOV_TOOLS_URLS: Record<EnvironmentTypes, string>;
+  TEMPO_VOTE_URLS: Record<EnvironmentTypes, string>;
   SESSION_TIMEOUT: Milliseconds;
   POSTHOG_FEATURE_FLAG_CHECK_FREQUENCY_SECONDS: number;
   MEMPOOL_URLS: Record<BitcoinNetworks, string>;
@@ -147,6 +148,12 @@ export const config = (): Config => {
       Preview: `${process.env.GOV_TOOLS_URL_PREVIEW}`,
       Sanchonet: `${process.env.GOV_TOOLS_URL_SANCHONET}`
     },
+    TEMPO_VOTE_URLS: {
+      Mainnet: `${process.env.TEMPO_VOTE_URL_MAINNET}`,
+      Preprod: `${process.env.TEMPO_VOTE_URL_PREPROD}`,
+      Preview: `${process.env.TEMPO_VOTE_URL_PREVIEW}`,
+      Sanchonet: `${process.env.TEMPO_VOTE_URL_SANCHONET}`
+    },
     // eslint-disable-next-line new-cap
     SESSION_TIMEOUT: Milliseconds(
       !Number.isNaN(Number.parseInt(process.env.SESSION_TIMEOUT))
diff --git a/apps/browser-extension-wallet/src/features/delegation/components/DelegationLayout.tsx b/apps/browser-extension-wallet/src/features/delegation/components/DelegationLayout.tsx
@@ -15,7 +15,7 @@ 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';
+import { walletRoutePaths } from '@routes';
 
 const { Text } = Typography;
 
@@ -73,10 +73,8 @@ 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 = {
@@ -102,7 +100,7 @@ export const DelegationLayout = ({
               <Box mt="$16">
                 <RegisterAsDRepBanner
                   openExternalLink={openExternalLink}
-                  govToolUrl={GOV_TOOLS_URLS[environmentName]}
+                  votingCenterUrl={walletRoutePaths.voting}
                   popupView
                 />
               </Box>
diff --git a/apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx b/apps/browser-extension-wallet/src/features/delegation/components/MultiDelegationStakingPopup.tsx
@@ -36,10 +36,10 @@ import { withSignTxConfirmation } from '@lib/wallet-api-ui';
 import { isMultidelegationSupportedByDevice } from '@views/browser/features/staking';
 import { useSecrets, useSignPolicy } from '@lace/core';
 import { useRewardAccountsData } from '@src/views/browser-view/features/staking/hooks';
-import { config } from '@src/config';
 import { parseError } from '@src/utils/parse-error';
 import { getParentWalletCIP1854Account } from '@lib/scripts/background/util';
 import { useObservable } from '@lace/common';
+import { walletRoutePaths } from '@routes';
 
 export const MultiDelegationStakingPopup = (): JSX.Element => {
   const { t } = useTranslation();
@@ -124,8 +124,6 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
     fetchNetworkInfo();
   }, [fetchNetworkInfo, blockchainProvider]);
 
-  const { GOV_TOOLS_URLS } = config();
-
   return (
     <OutsideHandlesProvider
       {...{
@@ -175,7 +173,7 @@ export const MultiDelegationStakingPopup = (): JSX.Element => {
         sharedWalletKey: parentMultiSigAccount?.extendedAccountPublicKey,
         coSigners: wallet?.metadata?.coSigners,
         useRewardAccountsData,
-        govToolUrl: GOV_TOOLS_URLS[environmentName],
+        votingCenterUrl: walletRoutePaths.voting,
         parseError
       }}
     >
diff --git a/apps/browser-extension-wallet/src/features/voting-beta/components/Voting.tsx b/apps/browser-extension-wallet/src/features/voting-beta/components/Voting.tsx
@@ -10,7 +10,7 @@ import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 export const Voting = (): React.ReactElement => {
   const openExternalLink = useExternalLinkOpener();
   const { environmentName } = useWalletStore();
-  const { GOV_TOOLS_URLS } = config();
+  const { GOV_TOOLS_URLS, TEMPO_VOTE_URLS } = config();
   const analytics = useAnalyticsContext();
 
   const openLink = useCallback(
@@ -26,7 +26,12 @@ export const Voting = (): React.ReactElement => {
     <ContentLayout>
       <div className={styles.activitiesContainer}>
         <div className={styles.emptyState}>
-          <VotingCenterBanner openExternalLink={openLink} govToolUrl={GOV_TOOLS_URLS[environmentName]} popupView />
+          <VotingCenterBanner
+            openExternalLink={openLink}
+            govToolUrl={GOV_TOOLS_URLS[environmentName]}
+            tempoVoteUrl={TEMPO_VOTE_URLS[environmentName]}
+            popupView
+          />
         </div>
       </div>
     </ContentLayout>
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/Staking.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/Staking.tsx
@@ -24,8 +24,8 @@ import { useObservable } from '@lace/common';
 import { fetchPoolsInfo } from '../utils';
 import { Box } from '@input-output-hk/lace-ui-toolkit';
 import { useExternalLinkOpener } from '@providers';
-import { config } from '@src/config';
 import { useRewardAccountsData } from '../hooks';
+import { walletRoutePaths } from '@routes';
 
 const stepsWithExitConfirmation = new Set([Sections.CONFIRMATION, Sections.SIGN, Sections.FAIL_TX]);
 
@@ -41,8 +41,7 @@ export const Staking = (): React.ReactElement => {
     blockchainProvider,
     walletInfo,
     inMemoryWallet,
-    walletUI: { cardanoCoin },
-    environmentName
+    walletUI: { cardanoCoin }
   } = useWalletStore();
   const { fetchStakePools } = useWalletStore(stakePoolResultsSelector);
   const { priceResult } = useFetchCoinPrice();
@@ -68,7 +67,6 @@ export const Staking = (): React.ReactElement => {
 
   const { areAllRegisteredStakeKeysWithoutVotingDelegation, poolIdToRewardAccountsMap } = useRewardAccountsData();
   const showRegisterAsDRepBanner = !hasNoFunds && areAllRegisteredStakeKeysWithoutVotingDelegation;
-  const { GOV_TOOLS_URLS } = config();
 
   const openDelagationConfirmation = useCallback(() => {
     setSection();
@@ -119,7 +117,7 @@ export const Staking = (): React.ReactElement => {
     <>
       {showRegisterAsDRepBanner && (
         <Box mb="$56">
-          <RegisterAsDRepBanner openExternalLink={openExternalLink} govToolUrl={GOV_TOOLS_URLS[environmentName]} />
+          <RegisterAsDRepBanner openExternalLink={openExternalLink} votingCenterUrl={walletRoutePaths.voting} />
         </Box>
       )}
       <div>
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingContainer.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingContainer.tsx
@@ -29,10 +29,10 @@ import { useWalletActivities } from '@hooks/useWalletActivities';
 import { useSubmitingState } from '@views/browser/features/send-transaction';
 import { useSecrets, useSignPolicy } from '@lace/core';
 import { useRewardAccountsData } from '../hooks';
-import { config } from '@src/config';
 import { parseError } from '@src/utils/parse-error';
 import { useObservable } from '@lace/common';
 import { getParentWalletCIP1854Account } from '@lib/scripts/background/util';
+import { walletRoutePaths } from '@routes';
 
 export const StakingContainer = (): React.ReactElement => {
   // TODO: LW-7575 Remove old staking in post-MVP of multi delegation staking.
@@ -111,7 +111,6 @@ export const StakingContainer = (): React.ReactElement => {
   const sharedWalletKey = parentMultiSigAccount?.extendedAccountPublicKey;
   const coSigners = wallet?.metadata?.coSigners;
   const signPolicy = useSignPolicy(wallet, 'staking');
-  const { GOV_TOOLS_URLS } = config();
 
   return (
     <Layout>
@@ -159,7 +158,7 @@ export const StakingContainer = (): React.ReactElement => {
           sharedWalletKey,
           coSigners,
           useRewardAccountsData,
-          govToolUrl: GOV_TOOLS_URLS[environmentName],
+          votingCenterUrl: walletRoutePaths.voting,
           parseError
         }}
       >
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/voting-beta/components/VotingCenterBanner/VotingCenterBanner.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/voting-beta/components/VotingCenterBanner/VotingCenterBanner.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { Box, Button, Flex } from '@input-output-hk/lace-ui-toolkit';
+import { Button, Flex } from '@input-output-hk/lace-ui-toolkit';
 import cn from 'classnames';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -11,9 +11,15 @@ type props = {
   popupView?: boolean;
   openExternalLink: (url: string) => void;
   govToolUrl: string;
+  tempoVoteUrl: string;
 };
 
-export const VotingCenterBanner = ({ popupView, openExternalLink, govToolUrl }: props): React.ReactElement => {
+export const VotingCenterBanner = ({
+  popupView,
+  openExternalLink,
+  govToolUrl,
+  tempoVoteUrl
+}: props): React.ReactElement => {
   const { t } = useTranslation();
   const btnWidth = popupView ? '$fill' : '$auto';
 
@@ -36,14 +42,20 @@ export const VotingCenterBanner = ({ popupView, openExternalLink, govToolUrl }:
             />
           )}
         </div>
-        <Box w={btnWidth} mt="$20" h="$48">
+        <Flex gap="$16" w={btnWidth} mt="$20" h="$48">
           <Button.CallToAction
             w={btnWidth}
             onClick={() => openExternalLink(govToolUrl)}
             data-testid="voting-center-gov-tool-button"
-            label={t('browserView.voting-beta.modal.cta')}
+            label={t('browserView.voting-beta.modal.govTool.cta')}
           />
-        </Box>
+          <Button.CallToAction
+            w={btnWidth}
+            onClick={() => openExternalLink(tempoVoteUrl)}
+            data-testid="voting-center-tempo-vote-button"
+            label={t('browserView.voting-beta.modal.tempoVote.cta')}
+          />
+        </Flex>
       </Flex>
     </div>
   );
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/voting-beta/components/VotingLayout.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/voting-beta/components/VotingLayout.tsx
@@ -14,7 +14,7 @@ export const VotingLayout = (): ReactElement => {
 
   const openExternalLink = useExternalLinkOpener();
   const { environmentName } = useWalletStore();
-  const { GOV_TOOLS_URLS } = config();
+  const { GOV_TOOLS_URLS, TEMPO_VOTE_URLS } = config();
 
   const educationalList = getEducationalList(t);
 
@@ -32,7 +32,11 @@ export const VotingLayout = (): ReactElement => {
       <SectionLayout
         sidePanelContent={<EducationalList items={educationalList} title={t('browserView.sidePanel.learnAbout')} />}
       >
-        <VotingCenterBanner openExternalLink={openLink} govToolUrl={GOV_TOOLS_URLS[environmentName]} />
+        <VotingCenterBanner
+          openExternalLink={openLink}
+          govToolUrl={GOV_TOOLS_URLS[environmentName]}
+          tempoVoteUrl={TEMPO_VOTE_URLS[environmentName]}
+        />
       </SectionLayout>
     </Layout>
   );
diff --git a/packages/e2e-tests/src/data/EducationalArticles.ts b/packages/e2e-tests/src/data/EducationalArticles.ts
@@ -36,9 +36,9 @@ export const faqArticles: Record<string, Record<string, string>> = {
     question: 'how-is-the-conway-ledger-era-also-called-governance-era-supported-by-lace',
     title: 'How is the Conway Ledger era (also called governance era) supported by Lace?'
   },
-  'What type of governance features are supported in Lace using the GovTool?': {
+  'What type of governance features are supported in Lace?': {
     question: 'what-type-of-governance-features-are-supported-in-lace-using-the-govtool-in-the-current',
-    title: 'What type of governance features are supported in Lace using the GovTool?'
+    title: 'What type of governance features are supported in Lace?'
   },
   'What type of governance actions are supported by Lace?': {
     question: 'what-type-of-governance-actions-are-supported-by-lace',
diff --git a/packages/e2e-tests/src/features/TokensPageExtended.part1.feature b/packages/e2e-tests/src/features/TokensPageExtended.part1.feature
@@ -69,5 +69,5 @@ Feature: LW: Tokens tab - extended view
       | Video    | Secure self-custody with Lace                                                |
       | Video    | Connecting to DApps with Lace                                                |
       | FAQ      | How is the Conway Ledger era (also called governance era) supported by Lace? |
-      | FAQ      | What type of governance features are supported in Lace using the GovTool?    |
+      | FAQ      | What type of governance features are supported in Lace?    |
       | FAQ      | What type of governance actions are supported by Lace?                       |
diff --git a/packages/staking/package.json b/packages/staking/package.json
@@ -70,6 +70,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-i18next": "^12.3.1",
     "react-responsive": "^9.0.2",
+    "react-router-dom": "5.2.0",
     "react-virtuoso": "^4.6.3",
     "recharts": "^2.9.2",
     "rxjs": "7.4.0",
diff --git a/packages/staking/src/features/Drawer/confirmation/StakePoolConfirmationContent.tsx b/packages/staking/src/features/Drawer/confirmation/StakePoolConfirmationContent.tsx
@@ -11,6 +11,8 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import isNil from 'lodash/isNil';
 import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
 import { useOutsideHandles } from '../../outside-handles-provider';
 import { StakingError, StakingErrorType, useDelegationPortfolioStore, useStakingStore } from '../../store';
 import { AmountInfo } from './AmountInfo';
@@ -41,6 +43,7 @@ const isInputSelectionError = (error: any): error is { failure: InputSelectionFa
 export const StakePoolConfirmationContent = (): React.ReactElement => {
   const { t } = useTranslation();
   const { setIsBuildingTx, setStakingError, stakingError } = useStakingStore();
+  const { push } = useHistory();
   const {
     balancesBalance: balance,
     walletStoreInMemoryWallet: inMemoryWallet,
@@ -54,8 +57,7 @@ export const StakePoolConfirmationContent = (): React.ReactElement => {
     signPolicy,
     sharedWalletKey,
     coSigners,
-    govToolUrl,
-    openExternalLink,
+    votingCenterUrl,
   } = useOutsideHandles();
   const { draftPortfolio } = useDelegationPortfolioStore((store) => ({
     draftPortfolio: store.draftPortfolio || [],
@@ -141,7 +143,7 @@ export const StakePoolConfirmationContent = (): React.ReactElement => {
         i18nKey="drawer.confirmation.errors.rewardsLocked"
         t={t}
         components={{
-          Link: <a onClick={() => openExternalLink(govToolUrl)} />,
+          Link: <a onClick={() => push(votingCenterUrl)} />,
           keys: <LockedStakeKeysList items={error.data} />,
         }}
       />
diff --git a/packages/staking/src/features/outside-handles-provider/types.ts b/packages/staking/src/features/outside-handles-provider/types.ts
@@ -111,6 +111,6 @@ export type OutsideHandlesContextValue = {
     areAllRegisteredStakeKeysWithoutVotingDelegation: boolean;
     poolIdToRewardAccountsMap: Map<string, Wallet.Cardano.RewardAccountInfo[]>;
   };
-  govToolUrl: string;
+  votingCenterUrl: string;
   parseError: (maybeError: unknown) => Error;
 };
diff --git a/packages/staking/src/features/overview/Overview.tsx b/packages/staking/src/features/overview/Overview.tsx
@@ -27,7 +27,7 @@ export const Overview = () => {
     walletStoreWalletActivities: walletActivities,
     walletStoreInMemoryWallet: inMemoryWallet,
     isSharedWallet,
-    govToolUrl,
+    votingCenterUrl,
     openExternalLink,
     useRewardAccountsData,
   } = useOutsideHandles();
@@ -123,7 +123,7 @@ export const Overview = () => {
     <>
       {showRegisterAsDRepBanner && (
         <Box mb="$28" mt="$32">
-          <RegisterAsDRepBanner openExternalLink={openExternalLink} govToolUrl={govToolUrl} />
+          <RegisterAsDRepBanner openExternalLink={openExternalLink} votingCenterUrl={votingCenterUrl} />
         </Box>
       )}
       {!isSharedWallet && (
diff --git a/packages/staking/src/features/overview/OverviewPopup.tsx b/packages/staking/src/features/overview/OverviewPopup.tsx
@@ -27,7 +27,7 @@ export const OverviewPopup = () => {
     walletStoreWalletActivities: walletActivities,
     isSharedWallet,
     openExternalLink,
-    govToolUrl,
+    votingCenterUrl,
     useRewardAccountsData,
   } = useOutsideHandles();
   const rewardAccounts = useObservable(inMemoryWallet.delegation.rewardAccounts$);
@@ -97,7 +97,7 @@ export const OverviewPopup = () => {
     <>
       {showRegisterAsDRepBanner && (
         <Box mb="$28" mt="$32">
-          <RegisterAsDRepBanner openExternalLink={openExternalLink} govToolUrl={govToolUrl} popupView />
+          <RegisterAsDRepBanner openExternalLink={openExternalLink} votingCenterUrl={votingCenterUrl} popupView />
         </Box>
       )}
       {stakingNotifications.length > 0 && (
diff --git a/packages/staking/src/features/overview/RegisterAsDRepBanner/RegisterAsDRepBanner.tsx b/packages/staking/src/features/overview/RegisterAsDRepBanner/RegisterAsDRepBanner.tsx
diff --git a/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx b/packages/staking/src/features/overview/StakingInfoCard/StakingInfoCard.tsx
diff --git a/packages/translation/src/lib/translations/browser-extension-wallet/en.json b/packages/translation/src/lib/translations/browser-extension-wallet/en.json
diff --git a/packages/translation/src/lib/translations/staking/en.json b/packages/translation/src/lib/translations/staking/en.json
diff --git a/yarn.lock b/yarn.lock
