diff --git a/packages/yoroi-extension/app/assets/images/revamp/catalyst-step1.inline.svg b/packages/yoroi-extension/app/assets/images/revamp/catalyst-step1.inline.svg new file mode 100644 index 0000000000..d5ac59cede --- /dev/null +++ b/packages/yoroi-extension/app/assets/images/revamp/catalyst-step1.inline.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/yoroi-extension/app/assets/images/revamp/catalyst-step2.inline.svg b/packages/yoroi-extension/app/assets/images/revamp/catalyst-step2.inline.svg new file mode 100644 index 0000000000..78907ccb07 --- /dev/null +++ b/packages/yoroi-extension/app/assets/images/revamp/catalyst-step2.inline.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/yoroi-extension/app/assets/images/revamp/icons/cross.inline.svg b/packages/yoroi-extension/app/assets/images/revamp/icons/cross.inline.svg new file mode 100644 index 0000000000..ae73095834 --- /dev/null +++ b/packages/yoroi-extension/app/assets/images/revamp/icons/cross.inline.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/yoroi-extension/app/assets/images/revamp/icons/exclamation-circle.inline.svg b/packages/yoroi-extension/app/assets/images/revamp/icons/exclamation-circle.inline.svg new file mode 100644 index 0000000000..9203ed1d3e --- /dev/null +++ b/packages/yoroi-extension/app/assets/images/revamp/icons/exclamation-circle.inline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/yoroi-extension/app/components/common/card/Card.js b/packages/yoroi-extension/app/components/common/card/Card.js new file mode 100644 index 0000000000..60f6651b4d --- /dev/null +++ b/packages/yoroi-extension/app/components/common/card/Card.js @@ -0,0 +1,39 @@ +// @flow +import type { Node } from 'react'; +import { Box, Typography } from '@mui/material'; +import styles from './Card.scss'; + +type Props = {| + label: string, + description: string | Node, + imageSrc: string, + onClick?: () => void, + children?: Node, + style?: Object, +|}; + +export default function Card(props: Props): Node { + const { label, description, imageSrc, onClick, style } = props; + return ( + + ); +} diff --git a/packages/yoroi-extension/app/components/common/card/Card.scss b/packages/yoroi-extension/app/components/common/card/Card.scss new file mode 100644 index 0000000000..79b2cbf445 --- /dev/null +++ b/packages/yoroi-extension/app/components/common/card/Card.scss @@ -0,0 +1,33 @@ +.component { + background: linear-gradient(180deg, #e4e8f7 0%, #c6f7f7 100%); + border-radius: 8px; + padding: 16px; + width: 100%; + max-width: 312px; + min-height: 352px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + cursor: pointer; + position: relative; + z-index: 1; + + &::before { + position: absolute; + content: ''; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + background: linear-gradient(180deg, #93f5e1 0%, #c6f7ed 100%); + border-radius: 8px; + z-index: -1; + transition: opacity 300ms linear; + opacity: 0; + } + + &:hover::before { + opacity: 1; + } +} diff --git a/packages/yoroi-extension/app/components/common/stepper/Stepper.js b/packages/yoroi-extension/app/components/common/stepper/Stepper.js index 6ed9079bb4..334dafecaa 100644 --- a/packages/yoroi-extension/app/components/common/stepper/Stepper.js +++ b/packages/yoroi-extension/app/components/common/stepper/Stepper.js @@ -91,4 +91,4 @@ function Stepper(props: Props & Intl): Node { ); } -export default (injectIntl(observer(Stepper)): ComponentType); +export default (injectIntl(observer(Stepper)): ComponentType); \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/common/stepper/Stepper.scss b/packages/yoroi-extension/app/components/common/stepper/Stepper.scss index cabfb46430..30f817514f 100644 --- a/packages/yoroi-extension/app/components/common/stepper/Stepper.scss +++ b/packages/yoroi-extension/app/components/common/stepper/Stepper.scss @@ -17,4 +17,4 @@ border-style: solid; border-radius: 50%; transition: color 300ms ease; -} +} \ No newline at end of file diff --git a/packages/yoroi-extension/app/components/layout/TopBarLayout.js b/packages/yoroi-extension/app/components/layout/TopBarLayout.js index 91b1a59aab..5b7a996146 100644 --- a/packages/yoroi-extension/app/components/layout/TopBarLayout.js +++ b/packages/yoroi-extension/app/components/layout/TopBarLayout.js @@ -21,6 +21,8 @@ type Props = {| |}; type InjectedProps = {| isRevampLayout: boolean, currentTheme: string |}; + +type AllProps = {| ...Props, ...InjectedProps |}; /** Adds a top bar above the wrapped node */ function TopBarLayout({ banner, @@ -36,7 +38,7 @@ function TopBarLayout({ isRevampLayout, asModern, bgcolor, -}: Props & InjectedProps) { +}: AllProps) { const isModern = currentTheme === THEMES.YOROI_MODERN; const getContentUnderBanner: void => Node = () => { @@ -50,7 +52,6 @@ function TopBarLayout({ {isRevampLayout && asModern !== true && !isModern ? ( @@ -187,15 +183,7 @@ function TopBarLayout({ display: 'flex', flexDirection: 'column', position: 'relative', - backgroundColor: - showInContainer === true && isRevampLayout - ? 'common.white' - : 'var(--yoroi-palette-gray-50)', - ...(isRevampLayout && - asModern !== true && - !isModern && { - backgroundColor: 'common.white', - }), + backgroundColor: isRevampLayout && asModern !== true && !isModern ? 'common.white' : '', }} > {banner} diff --git a/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js b/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js index ccd9b85640..d83a382c9e 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/ConfirmPinDialog.js @@ -18,11 +18,14 @@ import PinInput from '../../widgets/forms/PinInput'; import styles from './ConfirmPinDialog.scss'; import type { StepsList } from './types'; +import { Typography } from '@mui/material'; +import Stepper from '../../common/stepper/Stepper'; const messages = defineMessages({ line1: { id: 'wallet.voting.dialog.step.confirm.line1', - defaultMessage: '!!!Please enter the PIN as you will need it every time you want to access the Catalyst Voting app.', + defaultMessage: + '!!!Please enter the PIN as you will need it every time you want to access the Catalyst Voting app.', }, }); @@ -36,13 +39,13 @@ type Props = {| +classicTheme: boolean, +pinValidation: string => boolean, +isProcessing: boolean, + +isRevamp: boolean, |}; @observer export default class ConfirmPinDialog extends Component { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { + intl: intlShape.isRequired, }; @observable pinForm: void | ReactToolboxMobxForm; @@ -63,13 +66,15 @@ export default class ConfirmPinDialog extends Component { isProcessing, } = this.props; - const dailogActions = [{ - label: intl.formatMessage(globalMessages.stepConfirm), - primary: true, - onClick: this._submitForm, - isSubmitting: isProcessing, - disabled: isProcessing, - }]; + const dailogActions = [ + { + label: intl.formatMessage(globalMessages.stepConfirm), + primary: true, + onClick: this._submitForm, + isSubmitting: isProcessing, + disabled: isProcessing, + }, + ]; return ( { backButton={} onClose={cancel} > - -
- -
+ {this.props.isRevamp ? ( + <> + ({ message: step.message, stepId: String(step.step) }))} + setCurrentStep={() => goBack()} + /> + + + + + ) : ( + <> + +
+ +
+ + )}
this.setPinForm(form)} @@ -101,7 +127,8 @@ export default class ConfirmPinDialog extends Component { allowEmptyInput={false} />
- ); + + ); } _submitForm: void => Promise = async () => { diff --git a/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js b/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js index 4b51590663..a7880fc6b8 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/GeneratePinDialog.js @@ -1,28 +1,26 @@ // @flow import type { Node } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { StepsList } from './types'; import { Component } from 'react'; import { observer } from 'mobx-react'; -import classnames from 'classnames'; import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; - +import { ProgressInfo } from '../../../stores/ada/VotingStore'; +import { Box, Typography } from '@mui/material'; import globalMessages from '../../../i18n/global-messages'; - import Dialog from '../../widgets/Dialog'; +import Stepper from '../../common/stepper/Stepper'; import DialogCloseButton from '../../widgets/DialogCloseButton'; import DialogBackButton from '../../widgets/DialogBackButton'; - +import classnames from 'classnames'; import ProgressStepBlock from './ProgressStepBlock'; - -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: { id: 'wallet.voting.dialog.step.pin.line1', - defaultMessage: '!!!Please write down this PIN as you will need it every time you want to access the Catalyst Voting app.', + defaultMessage: + '!!!Please write down this PIN as you will need it every time you want to access the Catalyst Voting app.', }, actionButton: { id: 'wallet.voting.dialog.step.pin.actionButton', @@ -38,6 +36,7 @@ type Props = {| +onBack: void => void, +classicTheme: boolean, +pin: Array, + +isRevamp: boolean, |}; @observer @@ -48,7 +47,7 @@ export default class GeneratePinDialog extends Component { render(): Node { const { intl } = this.context; - const { stepsList, progressInfo, next, cancel, classicTheme, pin } = this.props; + const { stepsList, progressInfo, next, cancel, classicTheme, pin, isRevamp } = this.props; const dialogActions = [ { @@ -62,7 +61,29 @@ export default class GeneratePinDialog extends Component {
{pin.map((value, index) => { // eslint-disable-next-line react/no-array-index-key - return
{value}
; + return isRevamp ? ( + + + {value} + + + ) : ( +
+ {value} +
+ ); })}
); @@ -77,15 +98,36 @@ export default class GeneratePinDialog extends Component { backButton={} onClose={cancel} > - + {this.props.isRevamp ? ( + <> + ({ message: step.message, stepId: String(step.step) }))} + setCurrentStep={() => {}} + /> + + + + + ) : ( + <> + -
- -
+
+ +
+ + )} {pinCards} ); diff --git a/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js b/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js index ce884a7e4d..12c94e7dbe 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js +++ b/packages/yoroi-extension/app/components/wallet/voting/RegisterDialog.js @@ -1,27 +1,28 @@ // @flow import type { Node } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { StepsList } from './types'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { observable, action } from 'mobx'; -import classnames from 'classnames'; import { defineMessages, intlShape } from 'react-intl'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { ProgressInfo } from '../../../stores/ada/VotingStore'; +import classnames from 'classnames'; import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm'; import globalMessages from '../../../i18n/global-messages'; import Dialog from '../../widgets/Dialog'; import DialogCloseButton from '../../widgets/DialogCloseButton'; import SpendingPasswordInput from '../../widgets/forms/SpendingPasswordInput'; import ProgressStepBlock from './ProgressStepBlock'; - -import { ProgressInfo } from '../../../stores/ada/VotingStore'; - import styles from './RegisterDialog.scss'; -import type { StepsList } from './types'; +import { Typography } from '@mui/material'; +import Stepper from '../../common/stepper/Stepper'; const messages = defineMessages({ line1: { id: 'wallet.voting.dialog.step.register.line1', - defaultMessage: '!!!Enter your spending password to be able to generate the required certificate for voting.', + defaultMessage: + '!!!Enter your spending password to be able to generate the required certificate for voting.', }, }); @@ -32,13 +33,13 @@ type Props = {| +cancel: void => void, +classicTheme: boolean, +isProcessing: boolean, + +isRevamp: boolean, |}; @observer export default class RegisterDialog extends Component { - - static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = { - intl: intlShape.isRequired + static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { + intl: intlShape.isRequired, }; @observable spendingPasswordForm: void | ReactToolboxMobxForm; @@ -48,21 +49,17 @@ export default class RegisterDialog extends Component { } render(): Node { const { intl } = this.context; - const { - stepsList, - progressInfo, - cancel, - classicTheme, - isProcessing, - } = this.props; + const { stepsList, progressInfo, cancel, classicTheme, isProcessing } = this.props; - const dailogActions = [{ - label: intl.formatMessage(globalMessages.nextButtonLabel), - primary: true, - onClick: this._submitForm, - isSubmitting: isProcessing, - disabled: isProcessing, - }]; + const dailogActions = [ + { + label: intl.formatMessage(globalMessages.nextButtonLabel), + primary: true, + onClick: this._submitForm, + isSubmitting: isProcessing, + disabled: isProcessing, + }, + ]; return ( { closeButton={} onClose={cancel} > - -
- {intl.formatMessage(messages.line1)} -
+ {this.props.isRevamp ? ( + <> + ({ message: step.message, stepId: String(step.step) }))} + setCurrentStep={() => {}} + /> + + {intl.formatMessage(messages.line1)} + + + ) : ( + <> + +
+ {intl.formatMessage(messages.line1)} +
+ + )}
this.setSpendingPasswordForm(form)} + setForm={form => this.setSpendingPasswordForm(form)} classicTheme={this.props.classicTheme} isSubmitting={isProcessing} />
- ); + + ); } _submitForm: void => Promise = async () => { diff --git a/packages/yoroi-extension/app/components/wallet/voting/Voting.js b/packages/yoroi-extension/app/components/wallet/voting/Voting.js index a2652e90e6..0b695c8612 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/Voting.js +++ b/packages/yoroi-extension/app/components/wallet/voting/Voting.js @@ -1,19 +1,25 @@ // @flow import type { ComponentType, Node } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { WalletType } from './types'; import { Component } from 'react'; import { observer } from 'mobx-react'; -import classnames from 'classnames'; import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; -import globalMessages from '../../../i18n/global-messages'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import { Button } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import { ReactComponent as AppStoreBadge } from '../../../assets/images/app-store-badge.inline.svg'; import { ReactComponent as PlayStoreBadge } from '../../../assets/images/google-play-badge.inline.svg'; +import { ReactComponent as ExclamationIcon } from '../../../assets/images/revamp/icons/exclamation-circle.inline.svg'; +import { ReactComponent as CrossIcon } from '../../../assets/images/revamp/icons/cross.inline.svg'; +import { withLayout } from '../../../styles/context/layout'; +import Step1Image from '../../../assets/images/revamp/catalyst-step1.inline.svg'; +import Step2Image from '../../../assets/images/revamp/catalyst-step2.inline.svg'; +import TrezorStepImage from '../../../assets/images/pic-catalyst-step3-trezor.inline.svg'; +import LedgerStepImage from '../../../assets/images/pic-catalyst-step3-ledger.inline.svg'; +import classnames from 'classnames'; +import globalMessages from '../../../i18n/global-messages'; import WarningBox from '../../widgets/WarningBox'; - +import Card from '../../common/card/Card'; import styles from './Voting.scss'; -import type { WalletType } from './types'; -import { withLayout } from '../../../styles/context/layout'; const messages = defineMessages({ lineTitle: { @@ -50,7 +56,8 @@ const messages = defineMessages({ }, ledgerNanoRequirement: { id: 'wallet.voting.ledgerNanoRequirement', - defaultMessage: '!!!Updatethe Cardano app on your Ledger to version 6 or above with Ledger Live.', + defaultMessage: + '!!!Update the Cardano app on your Ledger to version 6 or above with Ledger Live.', }, }); @@ -67,12 +74,20 @@ type InjectedProps = {| +isRevampLayout: boolean, |}; +type State = {| + +showDisclamer: boolean, +|}; + @observer -class Voting extends Component { +class Voting extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; + state = { + showDisclamer: true, + }; + renderStep3(): Node { const { walletType } = this.props; @@ -106,17 +121,127 @@ class Voting extends Component { throw new Error(`${nameof(Voting)} impossible wallet type`); } - render(): Node { + renderRevampLayout() { const { intl } = this.context; - const fundName = this.props.name; - const isRevamp = this.props.isRevampLayout; - + const { walletType, name: fundName } = this.props; + const { showDisclamer } = this.state; const pendingTxWarningComponent = this.props.hasAnyPending ? (
{this.context.intl.formatMessage(globalMessages.sendingIsDisabled)}
) : null; + return ( + <> + {pendingTxWarningComponent} + + + + {intl.formatMessage(messages.lineTitle, { fundName })} + + + + {intl.formatMessage(messages.line2)} + + + {showDisclamer && ( + + +
+ +
+ + + Disclamer + + + this.setState({ showDisclamer: false })} + > + + + + + {intl.formatMessage( + this.props.isDelegated ? messages.keepDelegated : messages.notDelegated + )} + + + )} +
+ + + + + {(walletType === 'trezorT' || walletType === 'ledgerNano') && ( + + } + /> + )} +
+
+ +
+ + + ); + } + + renderLayout() { + const { intl } = this.context; + const fundName = this.props.name; + const pendingTxWarningComponent = this.props.hasAnyPending ? ( +
+ {this.context.intl.formatMessage(globalMessages.sendingIsDisabled)} +
+ ) : null; return ( <> {pendingTxWarningComponent} @@ -175,8 +300,7 @@ class Voting extends Component {
{spendingPasswordForm} - {this.props.error - ? ( -

- {intl.formatMessage(this.props.error, this.props.error.values)} -

- ) - : null - } - + {this.props.error ? ( +

+ {intl.formatMessage(this.props.error, this.props.error.values)} +

+ ) : null} ); } diff --git a/packages/yoroi-extension/app/components/widgets/Dialog.js b/packages/yoroi-extension/app/components/widgets/Dialog.js index cdc60f0a13..352288533a 100644 --- a/packages/yoroi-extension/app/components/widgets/Dialog.js +++ b/packages/yoroi-extension/app/components/widgets/Dialog.js @@ -137,7 +137,7 @@ const ModalContainer = styled(Box)(({ theme }) => ({ minWidth: 'var(--yoroi-comp-dialog-min-width-md)', borderRadius: theme.name === 'classic' ? 0 : 8, paddingTop: theme.name === 'classic' ? '25px' : '24px', - paddingBottom: theme.name === 'classic' ? '30px' : '40px', + paddingBottom: theme.name === 'classic' ? '30px' : '24px', maxWidth: theme.name === 'classic' ? '785px' : '560px', backgroundColor: 'var(--yoroi-comp-dialog-background)', color: 'var(--yoroi-comp-dialog-text)', @@ -157,16 +157,16 @@ const ModalContent = styled(Box)(({ theme }) => ({ overflowX: 'hidden', overflowY: 'overlay', maxHeight: '60vh', - paddingLeft: theme.name === 'classic' ? '30px' : '40px', - paddingRight: theme.name === 'classic' ? '30px' : '40px', + paddingLeft: theme.name === 'classic' ? '30px' : '24px', + paddingRight: theme.name === 'classic' ? '30px' : '24px', })); const ModalFooter = styled(Box)(({ theme }) => ({ display: 'flex', - paddingLeft: theme.name === 'classic' ? '30px' : '40px', - paddingRight: theme.name === 'classic' ? '30px' : '40px', + paddingLeft: theme.name === 'classic' ? '30px' : '24px', + paddingRight: theme.name === 'classic' ? '30px' : '24px', marginTop: theme.name === 'classic' ? '20px' : '34px', '& button': { - width: ' 50%', + width: '50%', '&:only-child': { margin: 'auto', width: '100%', diff --git a/packages/yoroi-extension/app/containers/wallet/dialogs/voting/RegisterDialogContainer.js b/packages/yoroi-extension/app/containers/wallet/dialogs/voting/RegisterDialogContainer.js index 71feee92d5..cf7b12d0e3 100644 --- a/packages/yoroi-extension/app/containers/wallet/dialogs/voting/RegisterDialogContainer.js +++ b/packages/yoroi-extension/app/containers/wallet/dialogs/voting/RegisterDialogContainer.js @@ -1,19 +1,20 @@ // @flow -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; +import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import type { InjectedOrGenerated } from '../../../../types/injectedPropsType'; +import type { StepsList } from '../../../../components/wallet/voting/types'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { computed } from 'mobx'; import { intlShape } from 'react-intl'; -import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; +import { ProgressInfo } from '../../../../stores/ada/VotingStore'; +import { withLayout } from '../../../../styles/context/layout'; import globalMessages from '../../../../i18n/global-messages'; import DialogCloseButton from '../../../../components/widgets/DialogCloseButton'; import Dialog from '../../../../components/widgets/Dialog'; -import type { InjectedOrGenerated } from '../../../../types/injectedPropsType'; import LocalizableError from '../../../../i18n/LocalizableError'; import ErrorBlock from '../../../../components/widgets/ErrorBlock'; -import { ProgressInfo } from '../../../../stores/ada/VotingStore'; import RegisterDialog from '../../../../components/wallet/voting/RegisterDialog'; -import type { StepsList } from '../../../../components/wallet/voting/types'; export type GeneratedData = typeof RegisterDialogContainer.prototype.generated; @@ -27,8 +28,14 @@ type Props = {| +classicTheme: boolean, |}; +type InjectedProps = {| + +isRevampLayout: boolean, +|}; + +type AllProps = {| ...Props, ...InjectedProps |}; + @observer -export default class RegisterDialogContainer extends Component { +class RegisterDialogContainer extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -51,7 +58,7 @@ export default class RegisterDialogContainer extends Component { try { await this.generated.actions.ada.votingTransaction.createTransaction.trigger( walletPassword - ); + ); await submit(); } catch (error) { onError(error); @@ -60,6 +67,7 @@ export default class RegisterDialogContainer extends Component { isProcessing={votingStore.isActionProcessing} cancel={cancel} classicTheme={classicTheme} + isRevamp={this.props.isRevampLayout} /> ); } @@ -148,3 +156,5 @@ export default class RegisterDialogContainer extends Component { }); } } + +export default (withLayout(RegisterDialogContainer): ComponentType); diff --git a/packages/yoroi-extension/app/containers/wallet/dialogs/voting/TransactionDialogContainer.js b/packages/yoroi-extension/app/containers/wallet/dialogs/voting/TransactionDialogContainer.js index 3815df25e7..5421aafec6 100644 --- a/packages/yoroi-extension/app/containers/wallet/dialogs/voting/TransactionDialogContainer.js +++ b/packages/yoroi-extension/app/containers/wallet/dialogs/voting/TransactionDialogContainer.js @@ -1,22 +1,20 @@ // @flow -import type { Node } from 'react'; -import { Component } from 'react'; -import { observer, } from 'mobx-react'; -import { computed, } from 'mobx'; -import { intlShape } from 'react-intl'; +import type { Node, ComponentType } from 'react'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { InjectedOrGenerated } from '../../../../types/injectedPropsType'; -import VotingRegTxDialog from '../../../../components/wallet/voting/VotingRegTxDialog'; -import LocalizableError from '../../../../i18n/LocalizableError'; -import { PublicDeriver } from '../../../../api/ada/lib/storage/models/PublicDeriver/index'; import type { CreateVotingRegTxFunc } from '../../../../api/ada/index'; -import { ProgressInfo } from '../../../../stores/ada/VotingStore'; import type { TokenInfoMap } from '../../../../stores/toplevel/TokenInfoStore'; +import type { WalletType, StepsList } from '../../../../components/wallet/voting/types'; +import { Component } from 'react'; +import { observer } from 'mobx-react'; +import { computed } from 'mobx'; +import { intlShape } from 'react-intl'; +import { PublicDeriver } from '../../../../api/ada/lib/storage/models/PublicDeriver/index'; +import { ProgressInfo } from '../../../../stores/ada/VotingStore'; import { genLookupOrFail } from '../../../../stores/stateless/tokenHelpers'; -import type { - WalletType, - StepsList, -} from '../../../../components/wallet/voting/types'; +import { withLayout } from '../../../../styles/context/layout'; +import VotingRegTxDialog from '../../../../components/wallet/voting/VotingRegTxDialog'; +import LocalizableError from '../../../../i18n/LocalizableError'; export type GeneratedData = typeof TransactionDialogContainer.prototype.generated; @@ -30,9 +28,14 @@ type Props = {| +onError: Error => void, +walletType: WalletType, |}; +type InjectedProps = {| + +isRevampLayout: boolean, +|}; + +type AllProps = {| ...Props, ...InjectedProps |}; @observer -export default class TransactionDialogContainer extends Component { +class TransactionDialogContainer extends Component { static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = { intl: intlShape.isRequired, }; @@ -63,16 +66,16 @@ export default class TransactionDialogContainer extends Component { await this.generated.actions.ada.votingTransaction.signTransaction.trigger({ password, publicDeriver: selectedWallet, - }) + }); await submit(); } catch (error) { onError(error); } - } - } + }} classicTheme={this.props.classicTheme} error={votingStore.error} walletType={walletType} + isRevamp={this.props.isRevampLayout} /> ); } @@ -171,3 +174,4 @@ export default class TransactionDialogContainer extends Component { }); } } +export default (withLayout(TransactionDialogContainer): ComponentType); diff --git a/packages/yoroi-extension/app/containers/wallet/dialogs/voting/VotingRegistrationDialogContainer.js b/packages/yoroi-extension/app/containers/wallet/dialogs/voting/VotingRegistrationDialogContainer.js index 0a18829143..76cd3d3c6e 100644 --- a/packages/yoroi-extension/app/containers/wallet/dialogs/voting/VotingRegistrationDialogContainer.js +++ b/packages/yoroi-extension/app/containers/wallet/dialogs/voting/VotingRegistrationDialogContainer.js @@ -1,36 +1,39 @@ // @flow -import type { Node } from 'react'; +import type { Node, ComponentType } from 'react'; +import type { InjectedOrGenerated } from '../../../../types/injectedPropsType'; +import type { GeneratedData as TransactionDialogData } from './TransactionDialogContainer'; +import type { GeneratedData as RegisterDialogData } from './RegisterDialogContainer'; +import type { WalletType } from '../../../../components/wallet/voting/types'; import { Component } from 'react'; import { observer } from 'mobx-react'; import { computed } from 'mobx'; - -import type { InjectedOrGenerated } from '../../../../types/injectedPropsType'; import { Logger } from '../../../../utils/logging'; import { handleExternalLinkClick } from '../../../../utils/routing'; +import { withLayout } from '../../../../styles/context/layout'; +import { ProgressStep, ProgressInfo } from '../../../../stores/ada/VotingStore'; import GeneratePinDialog from '../../../../components/wallet/voting/GeneratePinDialog'; import ConfirmPinDialog from '../../../../components/wallet/voting/ConfirmPinDialog'; import QrCodeDialog from '../../../../components/wallet/voting/QrCodeDialog'; import TransactionDialogContainer from './TransactionDialogContainer'; import RegisterDialogContainer from './RegisterDialogContainer'; -import type { GeneratedData as TransactionDialogData } from './TransactionDialogContainer'; -import type { GeneratedData as RegisterDialogData } from './RegisterDialogContainer'; -import { ProgressStep, ProgressInfo } from '../../../../stores/ada/VotingStore'; -import type { WalletType } from '../../../../components/wallet/voting/types'; import globalMessages from '../../../../i18n/global-messages'; -import CreateTxExecutingDialog from '../../../../components/wallet/voting/CreateTxExecutingDialog' +import CreateTxExecutingDialog from '../../../../components/wallet/voting/CreateTxExecutingDialog'; export type GeneratedData = typeof VotingRegistrationDialogContainer.prototype.generated; - type Props = {| ...InjectedOrGenerated, +onClose: void => void, +walletType: WalletType, |}; +type InjectedProps = {| + +isRevampLayout: boolean, +|}; -@observer -export default class VotingRegistrationDialogContainer extends Component { +type AllProps = {| ...Props, ...InjectedProps |}; - cancel: (() => void) = () => { +@observer +class VotingRegistrationDialogContainer extends Component { + cancel: () => void = () => { this.props.onClose(); this.generated.actions.ada.votingActions.cancel.trigger(); }; @@ -45,7 +48,7 @@ export default class VotingRegistrationDialogContainer extends Component render(): null | Node { const votingStore = this.generated.stores.substores.ada.votingStore; if (votingStore.createVotingRegTx.isExecuting) { - return (); + return ; } const { profile } = this.generated.stores; @@ -54,11 +57,9 @@ export default class VotingRegistrationDialogContainer extends Component const stepsList = [ { step: ProgressStep.GENERATE, message: globalMessages.stepPin }, { step: ProgressStep.CONFIRM, message: globalMessages.stepConfirm }, - ...( - walletType === 'mnemonic' ? - [{ step: ProgressStep.REGISTER, message: globalMessages.registerLabel }] : - [] - ), + ...(walletType === 'mnemonic' + ? [{ step: ProgressStep.REGISTER, message: globalMessages.registerLabel }] + : []), { step: ProgressStep.TRANSACTION, message: globalMessages.transactionLabel }, { step: ProgressStep.QR_CODE, message: globalMessages.stepQrCode }, ]; @@ -76,11 +77,14 @@ export default class VotingRegistrationDialogContainer extends Component cancel={this.cancel} classicTheme={profile.isClassicTheme} onBack={this.props.onClose} - />); + isRevamp={this.props.isRevampLayout} + /> + ); break; case ProgressStep.CONFIRM: component = ( error={votingActions.submitConfirmError.trigger} cancel={this.cancel} classicTheme={profile.isClassicTheme} - pinValidation={(enteredPin)=>{ - const pin = votingStore.pin.join(''); - return pin === enteredPin; - } - } + pinValidation={enteredPin => { + const pin = votingStore.pin.join(''); + return pin === enteredPin; + }} isProcessing={votingStore.isActionProcessing} - />); + /> + ); break; case ProgressStep.REGISTER: component = ( @@ -106,7 +110,8 @@ export default class VotingRegistrationDialogContainer extends Component cancel={this.cancel} classicTheme={profile.isClassicTheme} onError={votingActions.submitRegisterError.trigger} - />); + /> + ); break; case ProgressStep.TRANSACTION: component = ( @@ -119,7 +124,8 @@ export default class VotingRegistrationDialogContainer extends Component goBack={votingActions.goBackToRegister.trigger} onError={votingActions.submitTransactionError.trigger} walletType={walletType} - />); + /> + ); break; case ProgressStep.QR_CODE: component = ( @@ -131,10 +137,15 @@ export default class VotingRegistrationDialogContainer extends Component cancel={this.cancel} classicTheme={profile.isClassicTheme} votingKey={votingStore.encryptedKey} - />); + /> + ); break; default: - Logger.error(`${nameof(VotingRegistrationDialogContainer)}::${nameof(this.render)}: something unexpected happened`); + Logger.error( + `${nameof(VotingRegistrationDialogContainer)}::${nameof( + this.render + )}: something unexpected happened` + ); break; } @@ -149,34 +160,34 @@ export default class VotingRegistrationDialogContainer extends Component cancel: {| trigger: (params: void) => void |}, submitGenerate: {| trigger: (params: void) => void |}, goBackToGenerate: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, submitConfirm: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, submitConfirmError: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, submitRegister: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, submitRegisterError: {| - trigger: (params: Error) => void + trigger: (params: Error) => void, |}, goBackToRegister: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, submitTransaction: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, submitTransactionError: {| - trigger: (params: Error) => void + trigger: (params: Error) => void, |}, finishQRCode: {| - trigger: (params: void) => void + trigger: (params: void) => void, |}, - |} - |} + |}, + |}, |}, stores: {| profile: {| @@ -193,12 +204,12 @@ export default class VotingRegistrationDialogContainer extends Component isExecuting: boolean, |}, |}, - |} - |} + |}, + |}, |}, TransactionDialogProps: InjectedOrGenerated, RegisterDialogProps: InjectedOrGenerated, - |} { + |} { if (this.props.generated !== undefined) { return this.props.generated; } @@ -235,7 +246,9 @@ export default class VotingRegistrationDialogContainer extends Component trigger: actions.ada.voting.goBackToGenerate.trigger, }, submitConfirm: { - trigger: () => { actions.ada.voting.submitConfirm.trigger() }, + trigger: () => { + actions.ada.voting.submitConfirm.trigger(); + }, }, submitConfirmError: { trigger: actions.ada.voting.submitConfirmError.trigger, @@ -265,10 +278,10 @@ export default class VotingRegistrationDialogContainer extends Component }, generateCatalystKey: { trigger: actions.ada.voting.generateCatalystKey.trigger }, }, - TransactionDialogProps: - ({ actions, stores, }: InjectedOrGenerated), - RegisterDialogProps: - ({ actions, stores, }: InjectedOrGenerated), + TransactionDialogProps: ({ actions, stores }: InjectedOrGenerated), + RegisterDialogProps: ({ actions, stores }: InjectedOrGenerated), }); } } + +export default (withLayout(VotingRegistrationDialogContainer): ComponentType); diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index df1e5b23e0..a22cdd2734 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -1030,7 +1030,7 @@ "wallet.voting.dialog.title": "Register for Voting", "wallet.voting.dialog.transactionLabel": "Transaction", "wallet.voting.keepDelegated": "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.", - "wallet.voting.ledgerNanoRequirement": "Updatethe Cardano app on your Ledger to version 6 or above with Ledger Live.", + "wallet.voting.ledgerNanoRequirement": "Update the Cardano app on your Ledger to version 6 or above with Ledger Live.", "wallet.voting.line2": "Before you begin, make sure to complete steps below", "wallet.voting.line3": "Download the Catalyst Voting App.", "wallet.voting.line4": "Open the Catalyst Voting App and click on the Complete registration button.",