Merge pull request #2100 from Emurgo/yushi/hw-catalyst-ui

UI updates for hardware wallet Catalyst registration
Emurgo · Jun 16, 2021 · a396ea8 · a396ea8
2 parents d6efe27 + 13d25aa
commit a396ea8
Show file tree

Hide file tree

Showing 21 changed files with 575 additions and 104 deletions.
diff --git a/packages/yoroi-extension/app/assets/images/pic-catalyst-step3-ledger.inline.svg b/packages/yoroi-extension/app/assets/images/pic-catalyst-step3-ledger.inline.svg
diff --git a/packages/yoroi-extension/app/assets/images/pic-catalyst-step3-trezor.inline.svg b/packages/yoroi-extension/app/assets/images/pic-catalyst-step3-trezor.inline.svg
diff --git a/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js b/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js
@@ -17,6 +17,7 @@ import { ProgressInfo } from '../../../stores/ada/VotingStore';
 import PinInput from '../../widgets/forms/PinInput';
 
 import styles from './ConfirmPinDialog.scss';
+import type { StepsList } from './types';
 
 const messages = defineMessages({
   line1: {
@@ -26,13 +27,15 @@ const messages = defineMessages({
 });
 
 type Props = {|
+  +stepsList: StepsList,
   +progressInfo: ProgressInfo,
   +goBack: void => void,
   +submit: void => PossiblyAsync<void>,
   +error: void => PossiblyAsync<void>,
   +cancel: void => void,
   +classicTheme: boolean,
   +pinValidation: string => boolean,
+  +isProcessing: boolean,
 |};
 
 @observer
@@ -51,17 +54,21 @@ export default class ConfirmPinDialog extends Component<Props> {
   render(): Node {
     const { intl } = this.context;
     const {
+      stepsList,
       progressInfo,
       goBack,
       cancel,
       classicTheme,
       pinValidation,
+      isProcessing,
     } = this.props;
 
     const dailogActions = [{
       label: intl.formatMessage(globalMessages.stepConfirm),
       primary: true,
       onClick: this._submitForm,
+      isSubmitting: isProcessing,
+      disabled: isProcessing,
     }];
 
     return (
@@ -74,7 +81,11 @@ export default class ConfirmPinDialog extends Component<Props> {
         backButton={<DialogBackButton onBack={goBack} />}
         onClose={cancel}
       >
-        <ProgressStepBlock progressInfo={progressInfo} classicTheme={classicTheme} />
+        <ProgressStepBlock
+          stepsList={stepsList}
+          progressInfo={progressInfo}
+          classicTheme={classicTheme}
+        />
         <div className={classnames([styles.lineText, styles.firstItem])}>
           <FormattedHTMLMessage {...messages.line1} />
         </div>

diff --git a/packages/yoroi-extension/app/components/wallet/voting/CreateTxExecutingDialog.js b/packages/yoroi-extension/app/components/wallet/voting/CreateTxExecutingDialog.js
@@ -0,0 +1,36 @@
+// @flow
+
+import React, { Component } from 'react';
+import { intlShape } from 'react-intl';
+import { observer } from 'mobx-react';
+import globalMessages from '../../../i18n/global-messages';
+import Dialog from '../../widgets/Dialog';
+import AnnotatedLoader from '../../transfer/AnnotatedLoader';
+
+import type { Node } from 'react';
+import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+
+type Props = {|
+|};
+
+@observer
+export default class CreateTxExecutingDialog extends Component<Props> {
+  static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
+    intl: intlShape.isRequired,
+  };
+
+  render(): Node {
+    const { intl } = this.context;
+    return (
+      <Dialog
+        title={intl.formatMessage(globalMessages.processingLabel)}
+        closeOnOverlayClick={false}
+      >
+        <AnnotatedLoader
+          title={intl.formatMessage(globalMessages.processingLabel)}
+          details={intl.formatMessage(globalMessages.txGeneration)}
+        />
+      </Dialog>
+    );
+  }
+}
diff --git a/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js b/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js
@@ -17,6 +17,7 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { ProgressInfo } from '../../../stores/ada/VotingStore';
 
 import styles from './GeneratePinDialog.scss';
+import type { StepsList } from './types';
 
 const messages = defineMessages({
   line1: {
@@ -30,6 +31,7 @@ const messages = defineMessages({
 });
 
 type Props = {|
+  +stepsList: StepsList,
   +progressInfo: ProgressInfo,
   +next: void => void,
   +cancel: void => void,
@@ -46,7 +48,7 @@ export default class GeneratePinDialog extends Component<Props> {
 
   render(): Node {
     const { intl } = this.context;
-    const { progressInfo, next, cancel, classicTheme, pin } = this.props;
+    const { stepsList, progressInfo, next, cancel, classicTheme, pin } = this.props;
 
     const dialogActions = [
       {
@@ -75,7 +77,11 @@ export default class GeneratePinDialog extends Component<Props> {
         backButton={<DialogBackButton onBack={this.props.onBack} />}
         onClose={cancel}
       >
-        <ProgressStepBlock progressInfo={progressInfo} classicTheme={classicTheme} />
+        <ProgressStepBlock
+          stepsList={stepsList}
+          progressInfo={progressInfo}
+          classicTheme={classicTheme}
+        />
 
         <div className={classnames([styles.lineText, styles.firstItem, styles.importantText])}>
           <FormattedHTMLMessage {...messages.line1} />

diff --git a/packages/yoroi-extension/app/components/wallet/voting/ProgressStepBlock.js b/packages/yoroi-extension/app/components/wallet/voting/ProgressStepBlock.js
@@ -6,10 +6,11 @@ import { intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 import ProgressSteps from '../../widgets/ProgressSteps';
-import globalMessages from '../../../i18n/global-messages';
 import { ProgressInfo } from '../../../stores/ada/VotingStore';
+import type { StepsList } from './types';
 
 type Props = {|
+  +stepsList: StepsList,
   +progressInfo: ProgressInfo,
   +classicTheme: boolean
 |};
@@ -23,18 +24,14 @@ export default class ProgressStepBlock extends Component<Props> {
 
   render(): Node {
     const { intl } = this.context;
-    const { progressInfo, classicTheme } = this.props;
+    const { stepsList, progressInfo, classicTheme } = this.props;
+
+    const currentStep = stepsList.findIndex(({ step }) => step === progressInfo.currentStep);
 
     return (
       <ProgressSteps
-        stepsList={[
-          intl.formatMessage(globalMessages.stepPin),
-          intl.formatMessage(globalMessages.stepConfirm),
-          intl.formatMessage(globalMessages.registerLabel),
-          intl.formatMessage(globalMessages.transactionLabel),
-          intl.formatMessage(globalMessages.stepQrCode)
-        ]}
-        currentStep={progressInfo.currentStep}
+        stepsList={stepsList.map(({ message }) => intl.formatMessage(message))}
+        currentStep={currentStep}
         stepState={progressInfo.stepState}
         classicTheme={classicTheme}
       />);

diff --git a/packages/yoroi-extension/app/components/wallet/voting/QrCodeDialog.js b/packages/yoroi-extension/app/components/wallet/voting/QrCodeDialog.js
@@ -11,6 +11,7 @@ import DialogCloseButton from '../../widgets/DialogCloseButton';
 import ProgressStepBlock from './ProgressStepBlock';
 import { ProgressInfo } from '../../../stores/ada/VotingStore';
 import QrCodeWrapper from '../../widgets/QrCodeWrapper';
+import type { StepsList } from './types';
 
 import styles from './QrCodeDialog.scss';
 
@@ -34,6 +35,7 @@ const messages = defineMessages({
 });
 
 type Props = {|
+  +stepsList: StepsList,
   +progressInfo: ProgressInfo,
   +onExternalLinkClick: MouseEvent => void,
   +submit: void => PossiblyAsync<void>,
@@ -50,7 +52,7 @@ export default class QrCodeDialog extends Component<Props> {
 
   render(): Node {
     const { intl } = this.context;
-    const { progressInfo, submit, cancel, classicTheme, votingKey } = this.props;
+    const { stepsList, progressInfo, submit, cancel, classicTheme, votingKey } = this.props;
 
     const dialogActions = [
       {
@@ -69,7 +71,11 @@ export default class QrCodeDialog extends Component<Props> {
         closeButton={<DialogCloseButton />}
         onClose={cancel}
       >
-        <ProgressStepBlock progressInfo={progressInfo} classicTheme={classicTheme} />
+        <ProgressStepBlock
+          stepsList={stepsList}
+          progressInfo={progressInfo}
+          classicTheme={classicTheme}
+        />
 
         <div className={classnames([styles.lineTitle, styles.firstItem])}>
           {intl.formatMessage(messages.lineTitle)}

diff --git a/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js b/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js
@@ -16,6 +16,7 @@ import ProgressStepBlock from './ProgressStepBlock';
 import { ProgressInfo } from '../../../stores/ada/VotingStore';
 
 import styles from './RegisterDialog.scss';
+import type { StepsList } from './types';
 
 const messages = defineMessages({
   line1: {
@@ -25,6 +26,7 @@ const messages = defineMessages({
 });
 
 type Props = {|
+  +stepsList: StepsList,
   +progressInfo: ProgressInfo,
   +submit: string => PossiblyAsync<void>,
   +cancel: void => void,
@@ -47,6 +49,7 @@ export default class RegisterDialog extends Component<Props> {
   render(): Node {
     const { intl } = this.context;
     const {
+      stepsList,
       progressInfo,
       cancel,
       classicTheme,
@@ -70,7 +73,11 @@ export default class RegisterDialog extends Component<Props> {
         closeButton={<DialogCloseButton />}
         onClose={cancel}
       >
-        <ProgressStepBlock progressInfo={progressInfo} classicTheme={classicTheme} />
+        <ProgressStepBlock
+          stepsList={stepsList}
+          progressInfo={progressInfo}
+          classicTheme={classicTheme}
+        />
         <div className={classnames([styles.lineText, styles.firstItem])}>
           {intl.formatMessage(messages.line1)}
         </div>

diff --git a/packages/yoroi-extension/app/components/wallet/voting/Voting.js b/packages/yoroi-extension/app/components/wallet/voting/Voting.js
@@ -3,7 +3,7 @@ import type { Node } from 'react';
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import globalMessages from '../../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
@@ -13,6 +13,7 @@ import PlayStoreBadge from '../../../assets/images/google-play-badge.inline.svg'
 import WarningBox from '../../widgets/WarningBox';
 
 import styles from './Voting.scss';
+import type { WalletType } from './types';
 
 const messages = defineMessages({
   lineTitle: {
@@ -39,6 +40,14 @@ const messages = defineMessages({
     id: 'wallet.voting.keepDelegated',
     defaultMessage: '!!!Your voting power is how much you delegate and the voting rewards will be distributed to your delegation reward address. Please keep delegated until the voting ends.',
   },
+  trezorTRequirement: {
+    id: 'wallet.voting.trezorTRequirement',
+    defaultMessage: '!!!<a target="_blank" rel="noopener noreferrer" href="https://wiki.trezor.io/User_manual:Updating_the_Trezor_device_firmware">Update</a> your Trezor Model T firmware version to ?.?.? or above.',
+  },
+  ledgerNanoRequirement: {
+    id: 'wallet.voting.ledgerNanoRequirement',
+    defaultMessage: '!!!<a target="_blank" rel="noopener noreferrer" href="https://emurgo.github.io/yoroi-extension-ledger-connect-vnext/catalyst/update-ledger-app/">Update</a>the Cardano app on your Ledger to version 2.3.2 or above with <a target="_blank" rel="noopener noreferrer" href="https://www.ledger.com/ledger-live"> Ledger Live</a>.',
+  },
 });
 
 type Props = {|
@@ -47,6 +56,7 @@ type Props = {|
   +hasAnyPending: boolean,
   +isDelegated: boolean,
   +round: number,
+  +walletType: WalletType,
 |};
 
 @observer
@@ -55,6 +65,39 @@ export default class Voting extends Component<Props> {
     intl: intlShape.isRequired,
   };
 
+  renderStep3(): Node {
+    const { walletType } = this.props;
+
+    if (walletType === 'mnemonic') {
+      return null;
+    }
+    if (walletType === 'trezorT') {
+      return (
+        <div className={classnames([styles.card, styles.bgStep3TrezorT])}>
+          <div className={styles.number}>
+            <span>3</span>
+          </div>
+          <div className={classnames([styles.lineText, styles.step2Text])}>
+            <FormattedHTMLMessage {...messages.trezorTRequirement} />
+          </div>
+        </div>
+      );
+    }
+    if (walletType === 'ledgerNano') {
+      return (
+        <div className={classnames([styles.card, styles.bgStep3LedgerNano])}>
+          <div className={styles.number}>
+            <span>3</span>
+          </div>
+          <div className={classnames([styles.lineText, styles.step2Text])}>
+            <FormattedHTMLMessage {...messages.ledgerNanoRequirement} />
+          </div>
+        </div>
+      );
+    }
+    throw new Error(`${nameof(Voting)} impossible wallet type`);
+  }
+
   render(): Node {
     const { intl } = this.context;
 
@@ -77,7 +120,25 @@ export default class Voting extends Component<Props> {
     return (
       <>
         {pendingTxWarningComponent}
+
         <div className={styles.voting}>
+          <div className={styles.delegationStatus}>
+            {this.props.isDelegated ?
+              (
+                <div className={styles.lineText}>
+                  {intl.formatMessage(messages.keepDelegated)}
+                </div>
+              ) :
+              (
+                <div className={styles.warningBox}>
+                  <WarningBox>
+                    {intl.formatMessage(messages.notDelegated)}
+                  </WarningBox>
+                </div>
+              )
+            }
+          </div>
+
           <div className={classnames([styles.lineTitle, styles.firstItem])}>
             {intl.formatMessage(messages.lineTitle, { round })}
           </div>
@@ -119,22 +180,7 @@ export default class Voting extends Component<Props> {
                 {intl.formatMessage(messages.line4)}
               </div>
             </div>
-          </div>
-          <div className={styles.delegationStatus}>
-            {this.props.isDelegated ?
-              (
-                <div className={styles.lineText}>
-                  {intl.formatMessage(messages.keepDelegated)}
-                </div>
-              ) :
-              (
-                <div className={styles.warningBox}>
-                  <WarningBox>
-                    {intl.formatMessage(messages.notDelegated)}
-                  </WarningBox>
-                </div>
-              )
-            }
+            {this.renderStep3()}
           </div>
           <div className={styles.registerButton}>
             <Button

diff --git a/packages/yoroi-extension/app/components/wallet/voting/Voting.scss b/packages/yoroi-extension/app/components/wallet/voting/Voting.scss
@@ -61,6 +61,12 @@
     &.bgStep2 {
       background-image: url(../../../assets/images/pic-catalyst-step2.inline.svg);
     }
+    &.bgStep3TrezorT {
+      background-image: url(../../../assets/images/pic-catalyst-step3-trezor.inline.svg);
+    }
+    &.bgStep3LedgerNano {
+      background-image: url(../../../assets/images/pic-catalyst-step3-ledger.inline.svg);
+    }
   }
 
   .lineTitle {
@@ -89,6 +95,6 @@
 
   .delegationStatus {
     text-align: center;
-    margin-bottom: 32px;
+    margin-top: 32px;
   }
 }