Merge pull request #2771 from input-output-hk/feature/ddw-796-Implement-catalyst-state-snapshot-phase

[DDW-796] Implement catalyst state snapshot phase

Author: danielmain

.gitignore

@@ -86,6 +86,10 @@ mainnet-genesis-dryrun-with-stakeholders.json
 
 # nix-build results
 result*
+!result*.js
+!result*.jsx
+!result*.ts
+!result*.tsx
 
 # Npm
 package-lock.json

source/renderer/app/components/staking/delegation-center/WalletRow.js

@@ -82,22 +82,16 @@ const messages = defineMessages({
 type Props = {
   wallet: Wallet,
   delegatedStakePool?: ?StakePool,
-  numberOfStakePools: number,
   numberOfRankedStakePools: number,
   onDelegate: Function,
   onUndelegate: Function,
   getStakePoolById: Function,
   nextEpochNumber: number,
   futureEpochNumber: number,
-  onSelect?: Function,
-  selectedPoolId?: ?number,
-  isListActive?: boolean,
   currentTheme: string,
   onOpenExternalLink: Function,
   showWithSelectButton?: boolean,
   containerClassName: string,
-  setListActive?: Function,
-  listName?: string,
 };
 
 type WalletRowState = {

source/renderer/app/components/voting/VotingUnavailable.js

@@ -1,132 +1,30 @@
 // @flow
-import React, { Component } from 'react';
+import React from 'react';
 import { observer } from 'mobx-react';
-import {
-  defineMessages,
-  intlShape,
-  FormattedMessage,
-  FormattedHTMLMessage,
-} from 'react-intl';
-import BigNumber from 'bignumber.js';
-import { Link } from 'react-polymorph/lib/components/Link';
+import { FormattedHTMLMessage } from 'react-intl';
 import globalMessages from '../../i18n/global-messages';
 import LoadingSpinner from '../widgets/LoadingSpinner';
-import {
-  CURRENT_VOTING_FUND_NUMBER,
-  NEXT_VOTING_FUND_NUMBER,
-} from '../../config/votingConfig';
 import styles from './VotingUnavailable.scss';
-
-const messages = defineMessages({
-  heading: {
-    id: 'voting.unavailable.heading',
-    defaultMessage: '!!!Project Catalyst voting registration',
-    description: 'Headline for the "Voting unavailable" screen',
-  },
-  paragraph1: {
-    id: 'voting.unavailable.paragraph1',
-    defaultMessage:
-      '!!!Project Catalyst Fund{currentVotingFundNumber} has now ended. Fund{nextVotingFundNumber} is currently in preparation, voting registration is not available yet.',
-    description: 'First paragraph on the "Voting unavailable" screen',
-  },
-  paragraph2: {
-    id: 'voting.unavailable.paragraph2',
-    defaultMessage:
-      '!!!Join our {link1} and {link2} Telegram channels for the latest updates (English language only).',
-    description: 'Second paragraph on the "Voting unavailable" screen',
-  },
-  link1Text: {
-    id: 'voting.unavailable.link1Text',
-    defaultMessage: '!!!Catalyst Announcements',
-    description: 'First link text on the "Voting unavailable" screen',
-  },
-  link2Text: {
-    id: 'voting.unavailable.link2Text',
-    defaultMessage: '!!!Project Catalyst Chat',
-    description: 'Second link text on the "Voting unavailable" screen',
-  },
-  link1Url: {
-    id: 'voting.unavailable.link1Url',
-    defaultMessage: '!!!https://t.me/cardanocatalyst',
-    description: 'First link URL on the "Voting unavailable" screen',
-  },
-  link2Url: {
-    id: 'voting.unavailable.link2Url',
-    defaultMessage: '!!!https://t.me/ProjectCatalystChat',
-    description: 'Second link URL on the "Voting unavailable" screen',
-  },
-});
+import { formattedNumber } from '../../utils/formatters';
 
 type Props = {
   syncPercentage: number,
-  isVotingRegistrationAvailable: boolean,
-  onExternalLinkClick: Function,
 };
 
-@observer
-export default class VotingUnavailable extends Component<Props> {
-  static contextTypes = {
-    intl: intlShape.isRequired,
-  };
-
-  render() {
-    const { intl } = this.context;
-    const {
-      syncPercentage,
-      isVotingRegistrationAvailable,
-      onExternalLinkClick,
-    } = this.props;
-
-    const heading = intl.formatMessage(messages.heading);
-    const paragraph1 = intl.formatMessage(messages.paragraph1, {
-      currentFundNumber: CURRENT_VOTING_FUND_NUMBER,
-      nextVotingFundNumber: NEXT_VOTING_FUND_NUMBER,
-    });
-    const link1 = (
-      <Link
-        className={styles.link}
-        label={intl.formatMessage(messages.link1Text)}
-        onClick={() =>
-          onExternalLinkClick(intl.formatMessage(messages.link1Url))
-        }
-      />
-    );
-    const link2 = (
-      <Link
-        className={styles.link}
-        label={intl.formatMessage(messages.link2Text)}
-        onClick={() =>
-          onExternalLinkClick(intl.formatMessage(messages.link2Url))
-        }
-      />
-    );
-
-    return (
-      <div className={styles.component}>
-        {isVotingRegistrationAvailable ? (
-          <>
-            <LoadingSpinner big />
-            <div className={styles.description}>
-              <FormattedHTMLMessage
-                {...globalMessages.featureUnavailableWhileSyncing}
-                values={{
-                  syncPercentage: new BigNumber(syncPercentage).toFormat(2),
-                }}
-              />
-            </div>
-          </>
-        ) : (
-          <>
-            <h1>{heading}</h1>
-            <p>{paragraph1}</p>
-            <FormattedMessage
-              {...messages.paragraph2}
-              values={{ link1, link2 }}
-              tagName="p"
-            />
-          </>
-        )}
+const VotingUnavailable = ({ syncPercentage }: Props) => {
+  return (
+    <div className={styles.component}>
+      <LoadingSpinner big />
+      <div className={styles.description}>
+        <FormattedHTMLMessage
+          {...globalMessages.featureUnavailableWhileSyncing}
+          values={{
+            syncPercentage: formattedNumber(syncPercentage, 2),
+          }}
+        />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export default observer(VotingUnavailable);

source/renderer/app/components/voting/voting-info/CurrentFund.js

@@ -1,13 +1,12 @@
 @import '../votingConfig';
 
-.component {
+.root {
   @extend %regularText;
   align-items: start;
   background-color: var(--theme-button-flat-background-color);
   border-radius: 5px;
   display: flex;
   flex-direction: column;
-  height: 175px;
   padding: 20px;
   width: 271px;
 
@@ -16,23 +15,30 @@
     font-family: var(--font-bold);
     font-size: 18px;
     line-height: 1.33;
+    margin-bottom: 11px;
   }
 
-  .endDateBlock {
+  .block {
     align-items: start;
     display: flex;
     flex-direction: column;
-    margin-bottom: 20px;
-    margin-top: 11px;
 
-    .endDateText {
+    .label {
       color: var(--theme-button-flat-text-color);
       display: block;
     }
 
-    .endDate {
+    .value {
       color: var(--theme-button-flat-text-color);
       font-family: var(--font-medium);
     }
+
+    & + .block {
+      margin-top: 11px;
+    }
+  }
+
+  .resultsButton {
+    margin-top: 20px;
   }
 }

source/renderer/app/components/voting/voting-info/CurrentFund.messages.js

@@ -4,7 +4,7 @@ import { injectIntl } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import {
-  VOTING_REGISTRATION_END_DATE,
+  VOTING_NEW_SNAPSHOT_DATE,
   NEXT_VOTING_FUND_NUMBER,
 } from '../../../config/votingConfig';
 import {
@@ -13,8 +13,10 @@ import {
 } from '../../../utils/formatters';
 import type { Locale } from '../../../../../common/types/locales.types';
 import type { Intl } from '../../../types/i18nTypes';
-import styles from './RegisterToVote.scss';
 import { messages } from './RegisterToVote.messages';
+import { messages as votingMessages } from './VotingInfo.messages';
+import styles from './RegisterToVote.scss';
+import votingStyles from './VotingInfo.scss';
 
 type Props = {
   currentLocale: Locale,
@@ -34,7 +36,7 @@ function RegisterToVote({
   const [step1, setStep1] = useState(false);
   const [step2, setStep2] = useState(false);
   const canRegister = step1 && step2;
-  const castEndDate = formattedDateTime(VOTING_REGISTRATION_END_DATE, {
+  const castEndDate = formattedDateTime(VOTING_NEW_SNAPSHOT_DATE, {
     currentLocale,
     ...mapToLongDateTimeFormat({
       currentLocale,
@@ -46,15 +48,15 @@ function RegisterToVote({
   return (
     <div className={styles.root}>
       <span className={styles.title}>
-        {intl.formatMessage(messages.name, {
-          nextVotingFundNumber: NEXT_VOTING_FUND_NUMBER,
+        {intl.formatMessage(votingMessages.fundName, {
+          votingFundNumber: NEXT_VOTING_FUND_NUMBER,
         })}
       </span>
       <span className={styles.dateLabel}>
         {intl.formatMessage(messages.dateLabel)}
       </span>
       <span className={styles.date}>{castEndDate}</span>
-      <div className={styles.separator} />
+      <hr className={votingStyles.separator} />
       <span className={styles.stepsTitle}>
         {intl.formatMessage(messages.stepsTitle)}
       </span>

source/renderer/app/components/voting/voting-info/CurrentFund.scss renamed to source/renderer/app/components/voting/voting-info/CurrentPhase.scss

@@ -2,11 +2,6 @@
 import { defineMessages } from 'react-intl';
 
 export const messages = defineMessages({
-  name: {
-    id: 'voting.registerToVote.name',
-    defaultMessage: '!!!Fund{nextVotingFundNumber}',
-    description: 'Regiter to fund name',
-  },
   dateLabel: {
     id: 'voting.registerToVote.dateLabel',
     defaultMessage: '!!!Snapshot date:',