[DDW-675] Catalyst dynamic content

CHANGELOG.md

@@ -3,7 +3,9 @@
 ## vNext
 
 ### Features
+
 - Improved stake pool searchbar ([PR 2847](https://github.com/input-output-hk/daedalus/pull/2847))
+- Implemented catalyst dynamic content ([PR 2856](https://github.com/input-output-hk/daedalus/pull/2856))
 
 ## 4.9.0-FC1
 

source/renderer/app/api/api.ts

@@ -40,6 +40,7 @@ import { getPublicKey } from './transactions/requests/getPublicKey';
 import { getICOPublicKey } from './transactions/requests/getICOPublicKey';
 // Voting requests
 import { createWalletSignature } from './voting/requests/createWalletSignature';
+import { getCatalystFund } from './voting/requests/getCatalystFund';
 // Wallets requests
 import { updateSpendingPassword } from './wallets/requests/updateSpendingPassword';
 import { updateByronSpendingPassword } from './wallets/requests/updateByronSpendingPassword';
@@ -204,6 +205,8 @@ import type {
 import type {
   CreateVotingRegistrationRequest,
   CreateWalletSignatureRequest,
+  GetCatalystFundResponse,
+  CatalystFund,
 } from './voting/types';
 import type { StakePoolProps } from '../domains/StakePool';
 import type { FaultInjectionIpcRequest } from '../../../common/types/cardano-node.types';
@@ -2931,6 +2934,42 @@ export default class AdaApi {
     fakeStakePoolsJson: Array<StakePool>
   ) => void;
   setStakePoolsFetchingFailed: () => void;
+  getCatalystFund = async (): Promise<CatalystFund> => {
+    logger.debug('AdaApi::getCatalystFund called', {});
+
+    try {
+      const catalystFund = await getCatalystFund();
+
+      logger.debug('AdaApi::getCatalystFund success', {
+        catalystFund,
+      });
+
+      return {
+        current: {
+          number: catalystFund.id + 1,
+          startTime: new Date(catalystFund.fund_start_time),
+          endTime: new Date(catalystFund.fund_end_time),
+          resultsTime: new Date(
+            catalystFund.chain_vote_plans?.[0]?.chain_committee_end_time
+          ),
+          registrationSnapshotTime: new Date(
+            catalystFund.registration_snapshot_time
+          ),
+        },
+        next: {
+          number: catalystFund.id + 2,
+          startTime: new Date(catalystFund.next_fund_start_time),
+          registrationSnapshotTime: new Date(
+            catalystFund.next_registration_snapshot_time
+          ),
+        },
+      };
+    } catch (error) {
+      logger.error('AdaApi::getCatalystFund error', {
+        error,
+      });
+    }
+  };
 } // ========== TRANSFORM SERVER DATA INTO FRONTEND MODELS =========
 
 const _createWalletFromServerData = action(

source/renderer/app/api/voting/requests/getCatalystFund.ts

@@ -0,0 +1,11 @@
+import { externalRequest } from '../../utils/externalRequest';
+import { MAINNET_SERVICING_STATION_URL } from '../../../config/urlsConfig';
+import { GetCatalystFundResponse } from '../types';
+
+export const getCatalystFund = (): Promise<GetCatalystFundResponse> =>
+  externalRequest({
+    hostname: MAINNET_SERVICING_STATION_URL,
+    path: '/api/v0/fund',
+    method: 'GET',
+    protocol: 'https',
+  });

source/renderer/app/api/voting/types.ts

@@ -27,3 +27,29 @@ export type SignatureParams = {
     passphrase: string;
   };
 };
+export type GetCatalystFundResponse = {
+  id: number;
+  fund_end_time: string;
+  fund_name: string;
+  fund_start_time: string;
+  next_fund_start_time: string;
+  next_registration_snapshot_time: string;
+  registration_snapshot_time: string;
+  chain_vote_plans: Array<{
+    chain_committee_end_time: string;
+  }>;
+};
+export type CatalystFund = {
+  current: {
+    number: number;
+    startTime: Date;
+    endTime: Date;
+    resultsTime: Date;
+    registrationSnapshotTime: Date;
+  };
+  next: {
+    number: number;
+    startTime: Date;
+    registrationSnapshotTime: Date;
+  };
+};

source/renderer/app/components/voting/VotingNoWallets.tsx

@@ -8,7 +8,6 @@ import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import styles from './VotingNoWallets.scss';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module '../../assets/images/attention-... Remove this comment to see the full error message
 import icon from '../../assets/images/attention-big-thin.inline.svg';
-import { NEXT_VOTING_FUND_NUMBER } from '../../config/votingConfig';
 
 const messages = defineMessages({
   headLine: {
@@ -33,6 +32,7 @@ const messages = defineMessages({
 type Props = {
   onGoToCreateWalletClick: (...args: Array<any>) => any;
   minVotingFunds: number;
+  nextFundNumber: number;
 };
 export default class VotingNoWallets extends Component<Props> {
   static contextTypes = {
@@ -41,13 +41,17 @@ export default class VotingNoWallets extends Component<Props> {
 
   render() {
     const { intl } = this.context;
-    const { onGoToCreateWalletClick, minVotingFunds } = this.props;
+    const {
+      onGoToCreateWalletClick,
+      minVotingFunds,
+      nextFundNumber,
+    } = this.props;
     return (
       <div className={styles.component}>
         <SVGInline svg={icon} className={styles.icon} />
         <h1>
           {intl.formatMessage(messages.headLine, {
-            nextVotingFundNumber: NEXT_VOTING_FUND_NUMBER,
+            nextVotingFundNumber: nextFundNumber,
           })}
         </h1>
         <p>

source/renderer/app/components/voting/VotingRegistrationDialogWizard.tsx

@@ -42,6 +42,7 @@ type Props = {
   onRestart: (...args: Array<any>) => any;
   onExternalLinkClick: (...args: Array<any>) => any;
   hwDeviceStatus: HwDeviceStatus;
+  nextFundNumber: number;
 };
 
 @observer
@@ -75,6 +76,7 @@ class VotingRegistrationDialogWizard extends Component<Props> {
       hwDeviceStatus,
       isTrezor,
       isHardwareWallet,
+      nextFundNumber,
     } = this.props;
     const selectedWalletId = get(selectedWallet, 'id', null);
     let content = null;
@@ -93,6 +95,7 @@ class VotingRegistrationDialogWizard extends Component<Props> {
             onSelectWallet={onSelectWallet}
             isWalletAcceptable={isWalletAcceptable}
             getStakePoolById={getStakePoolById}
+            nextFundNumber={nextFundNumber}
           />
         );
         break;
@@ -114,6 +117,7 @@ class VotingRegistrationDialogWizard extends Component<Props> {
             selectedWallet={selectedWallet}
             isTrezor={isTrezor}
             isHardwareWallet={isHardwareWallet}
+            nextFundNumber={nextFundNumber}
           />
         );
         break;
@@ -130,6 +134,7 @@ class VotingRegistrationDialogWizard extends Component<Props> {
             transactionError={transactionError}
             onConfirm={onContinue}
             onRestart={onRestart}
+            nextFundNumber={nextFundNumber}
           />
         );
         break;
@@ -141,6 +146,7 @@ class VotingRegistrationDialogWizard extends Component<Props> {
             onClose={onClose}
             stepsList={stepsList}
             activeStep={activeStep}
+            nextFundNumber={nextFundNumber}
           />
         );
         break;
@@ -153,6 +159,7 @@ class VotingRegistrationDialogWizard extends Component<Props> {
             onDownloadPDF={onDownloadPDF}
             stepsList={stepsList}
             activeStep={activeStep}
+            nextFundNumber={nextFundNumber}
           />
         );
         break;

source/renderer/app/components/voting/voting-info/ApiError.messages.ts

@@ -0,0 +1,20 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  title: {
+    id: 'voting.apiError.title',
+    defaultMessage: '!!!Catalyst API unavailable',
+    description: 'Title',
+  },
+  description1: {
+    id: 'voting.apiError.description1',
+    defaultMessage:
+      '!!!Unable to communicate with the API that retrieves the Catalyst date information.',
+    description: 'Description 1',
+  },
+  description2: {
+    id: 'voting.apiError.description2',
+    defaultMessage: '!!!Please, try again later.',
+    description: 'Description 2',
+  },
+});

source/renderer/app/components/voting/voting-info/ApiError.scss

@@ -0,0 +1,24 @@
+@import '../votingConfig';
+
+.root {
+  @extend %regularText;
+  align-items: start;
+  background-color: var(--theme-button-flat-background-color);
+  border-radius: 5px;
+  color: var(--theme-button-flat-text-color);
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  width: 100%;
+
+  .title {
+    font-family: var(--font-semibold);
+    font-size: 18px;
+    line-height: 1.33;
+    margin-bottom: 11px;
+  }
+
+  .description2 {
+    font-family: var(--font-medium);
+  }
+}

source/renderer/app/components/voting/voting-info/ApiError.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import type { Intl } from '../../../types/i18nTypes';
+import styles from './ApiError.scss';
+import { messages } from './ApiError.messages';
+
+type Props = {
+  intl: Intl;
+};
+
+function ApiError({ intl }: Props) {
+  return (
+    <section className={styles.root}>
+      <h1 className={styles.title}>{intl.formatMessage(messages.title)}</h1>
+      <span className={styles.description1}>
+        {intl.formatMessage(messages.description1)}
+      </span>
+      <span className={styles.description2}>
+        {intl.formatMessage(messages.description2)}
+      </span>
+    </section>
+  );
+}
+
+export default injectIntl(ApiError);

source/renderer/app/components/voting/voting-info/CurrentPhase.scss

@@ -12,7 +12,7 @@
 
   .fundName {
     color: var(--theme-button-flat-text-color);
-    font-family: var(--font-bold);
+    font-family: var(--font-semibold);
     font-size: 18px;
     line-height: 1.33;
     margin-bottom: 11px;

source/renderer/app/components/voting/voting-info/Headline.scss

@@ -4,7 +4,8 @@
   .heading {
     @extend %accentText;
     font-family: var(--font-semibold);
-    font-size: 19px;
+    font-size: 18px;
+    letter-spacing: 2px;
     margin-bottom: 14px;
     text-align: center;
     text-transform: uppercase;

source/renderer/app/components/voting/voting-info/RegisterToVote.scss

@@ -7,7 +7,7 @@
   padding: 20px;
 
   .title {
-    font-family: var(--font-bold);
+    font-family: var(--font-semibold);
     font-size: 18px;
     line-height: 1.33;
   }

source/renderer/app/components/voting/voting-info/RegisterToVote.tsx

@@ -2,10 +2,6 @@ import React, { useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import {
-  VOTING_NEW_SNAPSHOT_DATE,
-  NEXT_VOTING_FUND_NUMBER,
-} from '../../../config/votingConfig';
 import {
   formattedDateTime,
   mapToLongDateTimeFormat,
@@ -18,11 +14,13 @@ import { messages as votingMessages } from './VotingInfo.messages';
 import styles from './RegisterToVote.scss';
 // @ts-ignore ts-migrate(2307) FIXME: Cannot find module './VotingInfo.scss' or its corr... Remove this comment to see the full error message
 import votingStyles from './VotingInfo.scss';
+import type { CatalystFund } from '../../../api/voting/types';
 
 type Props = {
   currentLocale: Locale;
   currentDateFormat: string;
   currentTimeFormat: string;
+  fundInfo: CatalystFund;
   intl: Intl;
   onRegisterToVoteClick: (...args: Array<any>) => any;
 };
@@ -31,31 +29,35 @@ function RegisterToVote({
   currentLocale,
   currentDateFormat,
   currentTimeFormat,
+  fundInfo,
   intl,
   onRegisterToVoteClick,
 }: Props) {
   const [step1, setStep1] = useState(false);
   const [step2, setStep2] = useState(false);
   const canRegister = step1 && step2;
-  const castEndDate = formattedDateTime(VOTING_NEW_SNAPSHOT_DATE, {
-    currentLocale,
-    ...mapToLongDateTimeFormat({
+  const snapshotDate = formattedDateTime(
+    fundInfo.next.registrationSnapshotTime,
+    {
       currentLocale,
-      currentDateFormat,
-      currentTimeFormat,
-    }),
-  });
+      ...mapToLongDateTimeFormat({
+        currentLocale,
+        currentDateFormat,
+        currentTimeFormat,
+      }),
+    }
+  );
   return (
     <div className={styles.root}>
       <span className={styles.title}>
         {intl.formatMessage(votingMessages.fundName, {
-          votingFundNumber: NEXT_VOTING_FUND_NUMBER,
+          votingFundNumber: fundInfo.next.number,
         })}
       </span>
       <span className={styles.dateLabel}>
         {intl.formatMessage(messages.dateLabel)}
       </span>
-      <span className={styles.date}>{castEndDate}</span>
+      <span className={styles.date}>{snapshotDate}</span>
       <hr className={votingStyles.separator} />
       <span className={styles.stepsTitle}>
         {intl.formatMessage(messages.stepsTitle)}