[DDW-651] Implements the 'Voting registration unavailable' screen (#2518

)
input-output-hk · Apr 13, 2021 · f74692c · f74692c
1 parent 6dfd02d
commit f74692c
Show file tree

Hide file tree

Showing 8 changed files with 255 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Added "Voting registration not available" screen ([PR 2518](https://github.com/input-output-hk/daedalus/pull/2518))
 - Added Japanese translation to the external currencies list ([PR 2497](https://github.com/input-output-hk/daedalus/pull/2497))
 
 ### Fixes

diff --git a/source/renderer/app/components/voting/VotingUnavailable.js b/source/renderer/app/components/voting/VotingUnavailable.js
@@ -1,32 +1,124 @@
 // @flow
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { observer } from 'mobx-react';
-import { FormattedHTMLMessage } from 'react-intl';
+import {
+  defineMessages,
+  intlShape,
+  FormattedMessage,
+  FormattedHTMLMessage,
+} from 'react-intl';
 import BigNumber from 'bignumber.js';
+import { Link } from 'react-polymorph/lib/components/Link';
 import globalMessages from '../../i18n/global-messages';
 import LoadingSpinner from '../widgets/LoadingSpinner';
 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 Fund3 has now ended. Fund4 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',
+  },
+});
+
 type Props = {
   syncPercentage: number,
+  isVotingRegistrationAvailable: boolean,
+  onExternalLinkClick: Function,
 };
 
 @observer
 export default class VotingUnavailable extends Component<Props> {
+  static contextTypes = {
+    intl: intlShape.isRequired,
+  };
+
   render() {
-    const { syncPercentage } = this.props;
+    const { intl } = this.context;
+    const {
+      syncPercentage,
+      isVotingRegistrationAvailable,
+      onExternalLinkClick,
+    } = this.props;
+
+    const heading = intl.formatMessage(messages.heading);
+    const paragraph1 = intl.formatMessage(messages.paragraph1);
+    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}>
-        <LoadingSpinner big />
-        <div className={styles.description}>
-          <FormattedHTMLMessage
-            {...globalMessages.featureUnavailableWhileSyncing}
-            values={{
-              syncPercentage: new BigNumber(syncPercentage).toFormat(2),
-            }}
-          />
-        </div>
+        {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"
+            />
+          </>
+        )}
       </div>
     );
   }

diff --git a/source/renderer/app/components/voting/VotingUnavailable.scss b/source/renderer/app/components/voting/VotingUnavailable.scss
@@ -10,6 +10,25 @@
   padding: 20px;
   text-align: center;
 
+  h1 {
+    font-family: var(--font-medium);
+    font-size: 20px;
+    line-height: 1.4;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 1.38;
+    margin-top: 11px;
+    max-width: 500px;
+
+    .link {
+      font-family: var(--font-regular);
+      font-size: inherit;
+      word-break: keep-all;
+    }
+  }
+
   b {
     @extend %accentText;
   }

diff --git a/source/renderer/app/config/votingConfig.js b/source/renderer/app/config/votingConfig.js
@@ -1,6 +1,7 @@
 // @flow
 const { isDev } = global.environment;
 
+export const IS_VOTING_REGISTRATION_AVAILABLE = false;
 export const VOTING_FUND_NUMBER = 4;
 export const VOTING_REGISTRATION_MIN_WALLET_FUNDS = 500; // 500 ADA | unit: ADA
 export const VOTING_REGISTRATION_FEE_CALCULATION_AMOUNT = 1; // 1 ADA | unit: ADA

diff --git a/source/renderer/app/containers/voting/VotingRegistrationPage.js b/source/renderer/app/containers/voting/VotingRegistrationPage.js
@@ -2,7 +2,10 @@
 import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import Layout from '../MainLayout';
-import { VOTING_REGISTRATION_MIN_WALLET_FUNDS } from '../../config/votingConfig';
+import {
+  IS_VOTING_REGISTRATION_AVAILABLE,
+  VOTING_REGISTRATION_MIN_WALLET_FUNDS,
+} from '../../config/votingConfig';
 import VerticalFlexContainer from '../../components/layout/VerticalFlexContainer';
 import VotingInfo from '../../components/voting/VotingInfo';
 import VotingNoWallets from '../../components/voting/VotingNoWallets';
@@ -35,11 +38,18 @@ export default class VotingRegistrationPage extends Component<Props> {
       VotingRegistrationDialog
     );
 
-    if (!isSynced && !isVotingRegistrationDialogOpen) {
+    if (
+      !IS_VOTING_REGISTRATION_AVAILABLE ||
+      (!isSynced && !isVotingRegistrationDialogOpen)
+    ) {
       return (
         <Layout>
           <VerticalFlexContainer>
-            <VotingUnavailable syncPercentage={syncPercentage} />
+            <VotingUnavailable
+              syncPercentage={syncPercentage}
+              isVotingRegistrationAvailable={IS_VOTING_REGISTRATION_AVAILABLE}
+              onExternalLinkClick={openExternalLink}
+            />
           </VerticalFlexContainer>
         </Layout>
       );

diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -8688,6 +8688,109 @@
     ],
     "path": "source/renderer/app/components/voting/VotingNoWallets.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Project Catalyst voting registration",
+        "description": "Headline for the \"Voting unavailable\" screen",
+        "end": {
+          "column": 3,
+          "line": 21
+        },
+        "file": "source/renderer/app/components/voting/VotingUnavailable.js",
+        "id": "voting.unavailable.heading",
+        "start": {
+          "column": 11,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Project Catalyst Fund3 has now ended. Fund4 is currently in preparation, voting registration is not available yet.",
+        "description": "First paragraph on the \"Voting unavailable\" screen",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "source/renderer/app/components/voting/VotingUnavailable.js",
+        "id": "voting.unavailable.paragraph1",
+        "start": {
+          "column": 14,
+          "line": 22
+        }
+      },
+      {
+        "defaultMessage": "!!!Join our {link1} and {link2} Telegram channels for the latest updates (English language only).",
+        "description": "Second paragraph on the \"Voting unavailable\" screen",
+        "end": {
+          "column": 3,
+          "line": 33
+        },
+        "file": "source/renderer/app/components/voting/VotingUnavailable.js",
+        "id": "voting.unavailable.paragraph2",
+        "start": {
+          "column": 14,
+          "line": 28
+        }
+      },
+      {
+        "defaultMessage": "!!!Catalyst Announcements",
+        "description": "First link text on the \"Voting unavailable\" screen",
+        "end": {
+          "column": 3,
+          "line": 38
+        },
+        "file": "source/renderer/app/components/voting/VotingUnavailable.js",
+        "id": "voting.unavailable.link1Text",
+        "start": {
+          "column": 13,
+          "line": 34
+        }
+      },
+      {
+        "defaultMessage": "!!!Project Catalyst Chat",
+        "description": "Second link text on the \"Voting unavailable\" screen",
+        "end": {
+          "column": 3,
+          "line": 43
+        },
+        "file": "source/renderer/app/components/voting/VotingUnavailable.js",
+        "id": "voting.unavailable.link2Text",
+        "start": {
+          "column": 13,
+          "line": 39
+        }
+      },
+      {
+        "defaultMessage": "!!!https://t.me/cardanocatalyst",
+        "description": "First link URL on the \"Voting unavailable\" screen",
+        "end": {
+          "column": 3,
+          "line": 48
+        },
+        "file": "source/renderer/app/components/voting/VotingUnavailable.js",
+        "id": "voting.unavailable.link1Url",
+        "start": {
+          "column": 12,
+          "line": 44
+        }
+      },
+      {
+        "defaultMessage": "!!!https://t.me/ProjectCatalystChat",
+        "description": "Second link URL on the \"Voting unavailable\" screen",
+        "end": {
+          "column": 3,
+          "line": 53
+        },
+        "file": "source/renderer/app/components/voting/VotingUnavailable.js",
+        "id": "voting.unavailable.link2Url",
+        "start": {
+          "column": 12,
+          "line": 49
+        }
+      }
+    ],
+    "path": "source/renderer/app/components/voting/VotingUnavailable.json"
+  },
   {
     "descriptors": [
       {

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -634,6 +634,13 @@
   "voting.info.noWallets.instructions": "Create a new wallet and transfer a minimum of {minVotingFunds} ADA (or restore an existing wallet with funds), then return here to register for voting.",
   "voting.info.stepTitle1": "Decide which innovative ideas for Cardano will receive funding.",
   "voting.info.stepTitle2": "$140.000 worth of ada rewards will be distributed between ada holders who register their vote.",
+  "voting.unavailable.heading": "Project Catalyst voting registration",
+  "voting.unavailable.link1Text": "Catalyst Announcements",
+  "voting.unavailable.link1Url": "https://t.me/cardanocatalyst",
+  "voting.unavailable.link2Text": "Project Catalyst Chat",
+  "voting.unavailable.link2Url": "https://t.me/ProjectCatalystChat",
+  "voting.unavailable.paragraph1": "Project Catalyst Fund3 has now ended. Fund4 is currently in preparation, voting registration is not available yet.",
+  "voting.unavailable.paragraph2": "Join our {link1} and {link2} Telegram channels for the latest updates (English language only).",
   "voting.votingRegistration.chooseWallet.step.continueButtonLabel": "Continue",
   "voting.votingRegistration.chooseWallet.step.description": "You can only use one wallet when registering. To maximize rewards and voting power, choose the wallet with the largest balance.",
   "voting.votingRegistration.chooseWallet.step.errorHardwareWallet": "This wallet cannot be registered for voting as it is a hardware wallet. <span>Hardware wallets will be supported in the future.</span>",

diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
@@ -634,6 +634,13 @@
   "voting.info.noWallets.instructions": "ウォレットを作成し、そこに{minVotingFunds} ADA以上を移してから（または既存の資金入りウォレットを復元してから）、改めてここで有権者登録を行ってください。",
   "voting.info.stepTitle1": "Cardanoの革新的なアイデアの中で、どのアイデアに資金を提供するか決定します。",
   "voting.info.stepTitle2": "140,000米ドル相当のADA報酬が、有権者登録を行ったADA保有者に分配されます。",
+  "voting.unavailable.heading": "Project Catalyst有権者登録",
+  "voting.unavailable.link1Text": "Catalyst案内",
+  "voting.unavailable.link1Url": "https://t.me/cardanocatalyst",
+  "voting.unavailable.link2Text": "Project Catalyst Chat",
+  "voting.unavailable.link2Url": "https://t.me/ProjectCatalystChat",
+  "voting.unavailable.paragraph1": "Project Catalyst Fund3は終了しました。現在Fund4は準備中です。有権者登録の開始までしばらくお待ちください。",
+  "voting.unavailable.paragraph2": "!最新情報は、{link1}やTelegramの{link2}でチェックしてください（英語のみ）。",
   "voting.votingRegistration.chooseWallet.step.continueButtonLabel": "続ける",
   "voting.votingRegistration.chooseWallet.step.description": "投票に使用できるウォレットは1つだけです。報酬と議決権を最大にするには、残高の一番大きなウォレットを選択してください。",
   "voting.votingRegistration.chooseWallet.step.errorHardwareWallet": "このウォレットはハードウェアウォレットであるため、有権者登録に使用できません。<span>ハードウェアウォレットは今後サポートされる予定です。</span>",