[DDW-1222] Catalyst UI improvements

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Features
 
-- Show "To be defined" if date of the next Catalyst fund is in the past ([PR 3105](https://github.com/input-output-hk/daedalus/pull/3105))
+- Apply Catalyst API improvements ([PR 3136](https://github.com/input-output-hk/daedalus/pull/3136))
 - Switched to the new Catalyst API ([PR 3129](https://github.com/input-output-hk/daedalus/pull/3129))
 
 ### Fixes

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

@@ -11,7 +11,7 @@ const messages = defineMessages({
   headLine: {
     id: 'voting.info.noWallets.headLine',
     defaultMessage:
-      '!!!Voting registration for Fund{nextVotingFundNumber} is not available as you currently do not have any Shelley-compatible wallets.',
+      '!!!Voting registration is not available as you currently do not have any Shelley-compatible wallets.',
     description: '"No wallets" headLine on the voting info page.',
   },
   instructions: {
@@ -30,7 +30,6 @@ const messages = defineMessages({
 type Props = {
   onGoToCreateWalletClick: (...args: Array<any>) => any;
   minVotingFunds: number;
-  nextFundNumber: number;
 };
 export default class VotingNoWallets extends Component<Props> {
   static contextTypes = {
@@ -39,19 +38,11 @@ export default class VotingNoWallets extends Component<Props> {
 
   render() {
     const { intl } = this.context;
-    const {
-      onGoToCreateWalletClick,
-      minVotingFunds,
-      nextFundNumber,
-    } = this.props;
+    const { onGoToCreateWalletClick, minVotingFunds } = this.props;
     return (
       <div className={styles.component}>
         <SVGInline svg={icon} className={styles.icon} />
-        <h1>
-          {intl.formatMessage(messages.headLine, {
-            nextVotingFundNumber: nextFundNumber,
-          })}
-        </h1>
+        <h1>{intl.formatMessage(messages.headLine)}</h1>
         <p>
           {intl.formatMessage(messages.instructions, {
             minVotingFunds: new BigNumber(minVotingFunds).toFormat(0),

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

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

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

@@ -1,10 +1,11 @@
 import { defineMessages } from 'react-intl';
 
 export const messages = defineMessages({
-  dateLabel: {
-    id: 'voting.registerToVote.dateLabel',
-    defaultMessage: '!!!Snapshot date:',
-    description: 'Voting info snapshot date label',
+  votingInstructions: {
+    id: 'voting.registerToVote.votingInstructions',
+    defaultMessage:
+      '!!!If you are not registered yet, make sure to register to vote in the current fund before the snapshot date.',
+    description: 'Voting instructions',
   },
   stepsTitle: {
     id: 'voting.registerToVote.stepsTitle',
@@ -27,10 +28,4 @@ export const messages = defineMessages({
     defaultMessage: '!!!Register to vote',
     description: 'Button Label for voting registration steps',
   },
-  toBeDefined: {
-    id: 'voting.resultsPhase.toBeDefined',
-    defaultMessage: '!!!To be defined',
-    description:
-      'Text to show when Catalyst API is returning a past date value',
-  },
 });

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

@@ -12,8 +12,9 @@
     line-height: 1.33;
   }
 
-  .dateLabel {
+  .votingInstructions {
     display: block;
+    font-family: var(--font-light);
     margin-top: 11px;
   }
 
@@ -24,6 +25,7 @@
 
   .stepsTitle {
     font-family: var(--font-medium);
+    margin-top: 14px;
   }
 
   .step {

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

@@ -1,80 +1,33 @@
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl';
-import moment from 'moment';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
-import {
-  formattedDateTime,
-  mapToLongDateTimeFormat,
-} from '../../../utils/formatters';
-import type { Locale } from '../../../../../common/types/locales.types';
 import type { Intl } from '../../../types/i18nTypes';
 import { messages } from './RegisterToVote.messages';
 import { messages as votingMessages } from './VotingInfo.messages';
 import styles from './RegisterToVote.scss';
-import votingStyles from './VotingInfo.scss';
-import type { CatalystFund } from '../../../api/voting/types';
-import { logger } from '../../../utils/logging';
 
 type Props = {
-  currentLocale: Locale;
-  currentDateFormat: string;
-  currentTimeFormat: string;
-  fundInfo: CatalystFund;
   intl: Intl;
   onRegisterToVoteClick: (...args: Array<any>) => any;
 };
 
-const isFutureDate = (date: Date): boolean => {
-  try {
-    return moment().diff(date) < 0;
-  } catch (error) {
-    logger.error('Voting::NextFund::Invalid date', {
-      error,
-    });
-  }
-  return false;
-};
-
-function RegisterToVote({
-  currentLocale,
-  currentDateFormat,
-  currentTimeFormat,
-  fundInfo,
-  intl,
-  onRegisterToVoteClick,
-}: Props) {
+function RegisterToVote({ intl, onRegisterToVoteClick }: Props) {
   const [step1, setStep1] = useState(false);
   const [step2, setStep2] = useState(false);
   const canRegister = step1 && step2;
-  const nextSnapshotDateTime = fundInfo.next.registrationSnapshotTime;
-
-  const snapshotDate = isFutureDate(nextSnapshotDateTime)
-    ? formattedDateTime(nextSnapshotDateTime, {
-        currentLocale,
-        ...mapToLongDateTimeFormat({
-          currentLocale,
-          currentDateFormat,
-          currentTimeFormat,
-        }),
-      })
-    : intl.formatMessage(messages.toBeDefined);
 
   return (
     <div className={styles.root}>
-      <span className={styles.title}>
-        {intl.formatMessage(votingMessages.fundName, {
-          votingFundNumber: fundInfo.next.number,
-        })}
-      </span>
-      <span className={styles.dateLabel}>
-        {intl.formatMessage(messages.dateLabel)}
-      </span>
-      <span className={styles.date}>{snapshotDate}</span>
-      <hr className={votingStyles.separator} />
-      <span className={styles.stepsTitle}>
+      <div className={styles.title}>
+        {intl.formatMessage(votingMessages.registerToVoteHeader)}
+      </div>
+      <div className={styles.votingInstructions}>
+        {intl.formatMessage(messages.votingInstructions)}
+      </div>
+      <div className={styles.stepsTitle}>
         {intl.formatMessage(messages.stepsTitle)}
-      </span>
+      </div>
       <div className={styles.step}>
         <Checkbox
           checked={step1}

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

@@ -6,4 +6,9 @@ export const messages = defineMessages({
     defaultMessage: '!!!Fund{votingFundNumber}',
     description: 'Current fund name',
   },
+  registerToVoteHeader: {
+    id: 'voting.registerToVote.header',
+    defaultMessage: 'Register to vote',
+    description: 'Right hand side section header',
+  },
 });

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

@@ -55,13 +55,7 @@ function VotingInfo({
                 </div>
               </div>
               <div className={styles.rightContent}>
-                <RegisterToVote
-                  fundInfo={fundInfo}
-                  currentLocale={currentLocale}
-                  currentDateFormat={currentDateFormat}
-                  currentTimeFormat={currentTimeFormat}
-                  onRegisterToVoteClick={onRegisterToVoteClick}
-                />
+                <RegisterToVote onRegisterToVoteClick={onRegisterToVoteClick} />
               </div>
             </>
           )}

source/renderer/app/components/voting/voting-registration-wizard-steps/VotingRegistrationStepsChooseWallet.tsx

@@ -74,7 +74,6 @@ type Props = {
   selectedWalletId: string | null | undefined;
   isWalletAcceptable: (...args: Array<any>) => any;
   getStakePoolById: (...args: Array<any>) => any;
-  nextFundNumber: number;
 };
 type State = {
   selectedWalletId: string | null | undefined;
@@ -111,7 +110,6 @@ export default class VotingRegistrationStepsChooseWallet extends Component<
       isWalletAcceptable,
       numberOfStakePools,
       getStakePoolById,
-      nextFundNumber,
     } = this.props;
     const buttonLabel = intl.formatMessage(messages.continueButtonLabel);
     const selectedWallet: Wallet | null | undefined = wallets.find(
@@ -168,7 +166,6 @@ export default class VotingRegistrationStepsChooseWallet extends Component<
         activeStep={activeStep}
         actions={actions}
         containerClassName={styles.component}
-        nextFundNumber={nextFundNumber}
       >
         <p className={styles.description}>
           <FormattedHTMLMessage {...messages.description} />

source/renderer/app/components/voting/voting-registration-wizard-steps/VotingRegistrationStepsConfirm.tsx

@@ -80,7 +80,6 @@ type Props = {
     | (LocalizableError | null | undefined);
   onConfirm: (...args: Array<any>) => any;
   onRestart: (...args: Array<any>) => any;
-  nextFundNumber: number;
 };
 
 @observer
@@ -101,7 +100,6 @@ class VotingRegistrationStepsConfirm extends Component<Props> {
       transactionConfirmations,
       transactionError,
       onClose,
-      nextFundNumber,
     } = this.props;
     const description = intl.formatMessage(messages.description);
     const descriptionRestart = (
@@ -156,7 +154,6 @@ class VotingRegistrationStepsConfirm extends Component<Props> {
         actions={actions}
         containerClassName={styles.component}
         hideSteps={!!transactionError}
-        nextFundNumber={nextFundNumber}
       >
         {transactionError ? (
           <Fragment>

source/renderer/app/components/voting/voting-registration-wizard-steps/VotingRegistrationStepsEnterPinCode.tsx

@@ -17,7 +17,7 @@ const messages = defineMessages({
   description: {
     id: 'voting.votingRegistration.enterPinCode.step.description',
     defaultMessage:
-      '!!!Please enter a PIN for your Fund{nextVotingFundNumber} voting registration. The PIN you set here, and the QR code which you will get in the next step, will be required for you to vote using the Catalyst Voting app on your smartphone.',
+      '!!!Set a PIN for your voting registration. You will need this PIN and the QR code you will get in the next step to vote in the Catalyst Voting app.',
     description:
       'Description on the voting registration "enter pin code" step.',
   },
@@ -62,7 +62,6 @@ type Props = {
   stepsList: Array<string>;
   activeStep: number;
   onSetPinCode: (...args: Array<any>) => any;
-  nextFundNumber: number;
 };
 
 interface FormFields {
@@ -137,7 +136,7 @@ class VotingRegistrationStepsEnterPinCode extends Component<Props> {
   render() {
     const { form } = this;
     const { intl } = this.context;
-    const { onClose, stepsList, activeStep, nextFundNumber } = this.props;
+    const { onClose, stepsList, activeStep } = this.props;
     const buttonLabel = intl.formatMessage(messages.continueButtonLabel);
     const enterPinCodeLabel = intl.formatMessage(messages.enterPinCodeLabel);
     const repeatPinCodeLabel = intl.formatMessage(messages.repeatPinCodeLabel);
@@ -162,15 +161,9 @@ class VotingRegistrationStepsEnterPinCode extends Component<Props> {
         activeStep={activeStep}
         actions={actions}
         containerClassName={styles.component}
-        nextFundNumber={nextFundNumber}
       >
         <p className={styles.description}>
-          <FormattedHTMLMessage
-            {...messages.description}
-            values={{
-              nextVotingFundNumber: nextFundNumber,
-            }}
-          />
+          {intl.formatMessage(messages.description)}
         </p>
 
         <div className={styles.pinCode}>