Skip to content

Commit

Permalink
add error handling; hide input behind optional cta
Browse files Browse the repository at this point in the history
  • Loading branch information
@chikeichan
chikeichan committed Feb 18, 2021
1 parent 2da6291 commit d9e889a
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 29 deletions.
2 changes: 1 addition & 1 deletion app/pages/Onboarding/ImportSeedFlow/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ class ImportSeedFlow extends Component {
<OptInAnalytics
currentStep={5}
totalSteps={5}
onBack={() => this.setState({currentStep: ENTRY_STEP})}
onBack={() => this.goTo(UPDATE_ACCOUNT_DEPTH)}
onNext={async (optInState) => {
await analytics.setOptIn(optInState);
await this.finishFlow(this.state.mnemonic);
Expand Down
112 changes: 87 additions & 25 deletions app/pages/Onboarding/UpdateAccountDepth/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,102 @@ export default class UpdateAccountDepth extends Component {
this.state = {
depth: 200,
errorMessage: '',
isChanging: false,
};
}

updateAccountDepth = async () => {
const { depth } = this.state;

if (depth < 200) {
this.setState({
errorMessage: 'Account depth cannot be less than 200',
});
return;
}

this.props.onNext(depth);
};

renderMaybeChange() {
const { errorMessage } = this.state;
return (
<div className="update-account-depth__content">
<div className="update-account-depth__header_text">
Do you want to change default account depth?
</div>
<div className="update-account-depth__subheader">
Most users can safely keep default depth. A higher initial account depth configures your node to search for more transactions.
</div>
<div className="update-account-depth__error">
{errorMessage}
</div>
<div className="update-account-depth__footer">
<button
className="extension_cta_button update-account-depth__secondary-cta"
onClick={() => this.setState({ isChanging: true })}
>
Change Account Depth
</button>
<button
className="extension_cta_button update-account-depth__cta"
onClick={this.updateAccountDepth}
>
Keep Default Depth
</button>
</div>
</div>
)
}

renderChangeInput() {
const { depth, errorMessage } = this.state;
return (
<div className="update-account-depth__content">
<div className="update-account-depth__header_text">
Set Initial Account Depth
</div>
<div className="update-account-depth__subheader">
A higher initial account depth configures your node to search for more transactions. We recommend that power users set initial account depth to their wallet's total number of transactions, and round up to the nearest hundreds (e.g. set account depth to 1900 if your wallet has 1873 transactions).
</div>
<input
className={c('update-account-depth__input', {
'update-account-depth__input--error': errorMessage,
})}
min={200}
step={1}
pattern="[0-9]"
onChange={e => this.setState({ depth: +e.target.value, errorMessage: '' })}
value={depth}
/>
<div className="update-account-depth__error">
{errorMessage}
</div>
<div className="update-account-depth__footer">
<button
className="extension_cta_button update-account-depth__secondary-cta"
onClick={() => this.setState({
isChanging: false,
depth: 200,
errorMessage: '',
})}
>
Cancel
</button>
<button
className="extension_cta_button update-account-depth__cta"
onClick={this.updateAccountDepth}
>
Next
</button>
</div>
</div>
);
}

render() {
const { onBack, onCancel, currentStep, totalSteps } = this.props;
const { depth, errorMessage } = this.state;
const { isChanging } = this.state;

return (
<div className="update-account-depth">
Expand All @@ -38,30 +123,7 @@ export default class UpdateAccountDepth extends Component {
onBack={onBack}
onCancel={onCancel}
/>
<div className="update-account-depth__content">
<div className="update-account-depth__header_text">
Set Initial Account Depth
</div>
<div className="update-account-depth_subheader">
We recommend setting your initial account depth to total number of transactions, and round up to the nearest 100.
</div>
<input
className={c('update-account-depth__input', {
'update-account-depth__input--error': errorMessage,
})}
onChange={e => this.setState({ depth: +e.target.value, errorMessage: '' })}
value={depth}
/>
<div className="create-password__error">
{errorMessage}
</div>
<button
className="extension_cta_button update-account-depth_cta"
onClick={this.updateAccountDepth}
>
Next
</button>
</div>
{ isChanging ? this.renderChangeInput() : this.renderMaybeChange() }
</div>
);
}
Expand Down
38 changes: 35 additions & 3 deletions app/pages/Onboarding/UpdateAccountDepth/update-account-depth.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,21 @@
padding: 1.125rem 1.625rem 0.5rem;
}

&__error {
color: $orange-red;
font-size: 0.75rem;
margin: 0 24px;

&:empty {
margin: 0;
}
}

&__content {
display: flex;
flex-flow: column nowrap;
flex: 1 1 auto;
}

&__input {
@extend %box-input;
Expand All @@ -27,6 +42,12 @@
}
}

&__footer {
@extend %col-nowrap;
flex: 1 1 auto;
justify-content: flex-end;
}

&__button {
width: 100%;
height: 2.375rem;
Expand All @@ -48,15 +69,26 @@
}
}

.update-account-depth_subheader {
.update-account-depth__subheader {
color: $manatee-gray;
padding: 1.125rem 1.625rem 0.5rem;
}

.update-account-depth_cta {

.update-account-depth__cta {
width: calc(100% - 48px) !important;
height: 50px;
font-size: 18px;
font-weight: 500;
margin: 12px 24px 24px;
}

.update-account-depth__secondary-cta {
background-color: transparent !important;
color: #2480fd !important;
width: calc(100% - 48px) !important;
height: 50px;
font-size: 18px;
font-weight: 500;
margin: 12px 24px;
margin: 12px 24px 0;
}

0 comments on commit d9e889a

Please sign in to comment.