feat(wallet): implement wizard flow for wallet

ISSUES: unchained-capital#146
honoka428 · Dec 23, 2020 · c9ce2c4 · c9ce2c4
1 parent 7fafa54
commit c9ce2c4
Show file tree

Hide file tree

Showing 11 changed files with 333 additions and 64 deletions.
diff --git a/src/actions/walletActions.js b/src/actions/walletActions.js
@@ -27,6 +27,7 @@ export const RESET_WALLET = "RESET_WALLET";
 export const SPEND_SLICES = "SPEND_SLICES";
 export const INITIAL_LOAD_COMPLETE = "INITIAL_LOAD_COMPLETE";
 export const RESET_NODES_FETCH_ERRORS = "RESET_NODES_FETCH_ERRORS";
+export const UPDATE_WIZARD_STEP = "UPDATE_WIZARD_STEP";
 
 export const WALLET_MODES = {
   VIEW: 0,
@@ -328,3 +329,10 @@ export function resetNodesFetchErrors() {
     type: RESET_NODES_FETCH_ERRORS,
   };
 }
+
+export function updateWizardCurrentStep(value) {
+  return {
+    type: UPDATE_WIZARD_STEP,
+    value,
+  };
+}
diff --git a/src/components/AddressTypePicker.jsx b/src/components/AddressTypePicker.jsx
@@ -5,6 +5,7 @@ import { P2SH, P2SH_P2WSH, P2WSH } from "unchained-bitcoin";
 
 // Components
 import {
+  Box,
   Card,
   CardHeader,
   CardContent,
@@ -24,9 +25,20 @@ class AddressTypePicker extends React.Component {
   };
 
   render() {
-    const { addressType, frozen } = this.props;
+    const {
+      addressType,
+      frozen,
+      nextBtn,
+      prevBtn,
+      wizardCurrentStep,
+    } = this.props;
+
+    if (wizardCurrentStep !== 2) {
+      return null;
+    }
+
     return (
-      <Card>
+      <Card className="wizard-card-wrapper">
         <CardHeader title="Address Type" />
         <CardContent>
           <FormControl component="fieldset">
@@ -72,6 +84,10 @@ class AddressTypePicker extends React.Component {
               </small>
             </FormHelperText>
           </FormControl>
+          <Box mt={3} id="wallet-wizard-nav-btn-wrapper">
+            {prevBtn}
+            {nextBtn}
+          </Box>
         </CardContent>
       </Card>
     );
@@ -82,10 +98,23 @@ AddressTypePicker.propTypes = {
   addressType: PropTypes.string.isRequired,
   frozen: PropTypes.bool.isRequired,
   setType: PropTypes.func.isRequired,
+  nextBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  prevBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  wizardCurrentStep: PropTypes.number.isRequired,
+};
+
+AddressTypePicker.defaultProps = {
+  nextBtn: null,
+  prevBtn: null,
 };
 
 function mapStateToProps(state) {
-  return state.settings;
+  return {
+    ...state.settings,
+    ...{
+      wizardCurrentStep: state.wallet.common.wizardCurrentStep,
+    },
+  };
 }
 
 const mapDispatchToProps = {

diff --git a/src/components/ClientPicker/index.jsx b/src/components/ClientPicker/index.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import {
+  Box,
   Grid,
   Card,
   CardHeader,
@@ -113,13 +114,19 @@ class ClientPicker extends React.Component {
       usernameError,
       passwordError,
       privateNotes,
+      nextBtn,
+      prevBtn,
+      wizardCurrentStep,
     } = this.props;
     const { connectSuccess, connectError } = this.state;
+
+    if (wizardCurrentStep !== 3) {
+      return null;
+    }
+
     return (
-      <Card>
-        <Grid container justify="space-between">
-          <CardHeader title="Bitcoin Client" />
-        </Grid>
+      <Card className="wizard-card-wrapper">
+        <CardHeader title="Bitcoin Client" />
         <CardContent>
           <Grid item>
             <FormControl component="fieldset">
@@ -173,6 +180,10 @@ class ClientPicker extends React.Component {
               )}
             </FormControl>
           </Grid>
+          <Box mt={3} id="wallet-wizard-nav-btn-wrapper">
+            {prevBtn}
+            {nextBtn}
+          </Box>
         </CardContent>
       </Card>
     );
@@ -196,6 +207,9 @@ ClientPicker.propTypes = {
   usernameError: PropTypes.string,
   setUsername: PropTypes.func.isRequired,
   setUsernameError: PropTypes.func.isRequired,
+  nextBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  prevBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  wizardCurrentStep: PropTypes.number.isRequired,
 };
 
 ClientPicker.defaultProps = {
@@ -204,6 +218,8 @@ ClientPicker.defaultProps = {
   onSuccess: null,
   passwordError: "",
   privateNotes: React.createElement("span"),
+  nextBtn: null,
+  prevBtn: null,
 };
 
 function mapStateToProps(state) {
@@ -212,6 +228,9 @@ function mapStateToProps(state) {
     client: state.client,
     urlError: state.client.urlError,
     url: state.client.url,
+    ...{
+      wizardCurrentStep: state.wallet.common.wizardCurrentStep,
+    },
   };
 }
 

diff --git a/src/components/NetworkPicker.jsx b/src/components/NetworkPicker.jsx
@@ -6,6 +6,7 @@ import { TESTNET, MAINNET } from "unchained-bitcoin";
 // Components
 
 import {
+  Box,
   Card,
   CardHeader,
   CardContent,
@@ -26,9 +27,14 @@ class NetworkPicker extends React.Component {
   };
 
   render() {
-    const { network, frozen } = this.props;
+    const { network, frozen, nextBtn, prevBtn, wizardCurrentStep } = this.props;
+
+    if (wizardCurrentStep !== 4) {
+      return null;
+    }
+
     return (
-      <Card>
+      <Card className="wizard-card-wrapper">
         <CardHeader title="Network" />
         <CardContent>
           <FormControl component="fieldset">
@@ -61,6 +67,10 @@ class NetworkPicker extends React.Component {
               </small>
             </FormHelperText>
           </FormControl>
+          <Box mt={3} id="wallet-wizard-nav-btn-wrapper">
+            {prevBtn}
+            {nextBtn}
+          </Box>
         </CardContent>
       </Card>
     );
@@ -71,12 +81,23 @@ NetworkPicker.propTypes = {
   network: PropTypes.string.isRequired,
   frozen: PropTypes.bool.isRequired,
   setNetwork: PropTypes.func.isRequired,
+  nextBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  prevBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  wizardCurrentStep: PropTypes.number.isRequired,
+};
+
+NetworkPicker.defaultProps = {
+  nextBtn: null,
+  prevBtn: null,
 };
 
 function mapStateToProps(state) {
   return {
     network: state.settings.network,
     frozen: state.settings.frozen,
+    ...{
+      wizardCurrentStep: state.wallet.common.wizardCurrentStep,
+    },
   };
 }
 

diff --git a/src/components/QuorumPicker.jsx b/src/components/QuorumPicker.jsx
@@ -106,10 +106,20 @@ class QuorumPicker extends React.Component {
   };
 
   render() {
-    const { requiredSigners, totalSigners } = this.props;
+    const {
+      requiredSigners,
+      totalSigners,
+      nextBtn,
+      prevBtn,
+      wizardCurrentStep,
+    } = this.props;
+
+    if (wizardCurrentStep !== 1) {
+      return null;
+    }
 
     return (
-      <Card>
+      <Card className="wizard-card-wrapper">
         <CardHeader title="Quorum" />
         <CardContent>
           <Box>
@@ -179,6 +189,10 @@ class QuorumPicker extends React.Component {
               </Grid>
             </Grid>
           </Box>
+          <Box mt={3} id="wallet-wizard-nav-btn-wrapper">
+            {prevBtn}
+            {nextBtn}
+          </Box>
         </CardContent>
       </Card>
     );
@@ -191,10 +205,23 @@ QuorumPicker.propTypes = {
   frozen: PropTypes.bool.isRequired,
   setTotalSigners: PropTypes.func.isRequired,
   setRequiredSigners: PropTypes.func.isRequired,
+  nextBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  prevBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  wizardCurrentStep: PropTypes.number.isRequired,
+};
+
+QuorumPicker.defaultProps = {
+  nextBtn: null,
+  prevBtn: null,
 };
 
 function mapStateToProps(state) {
-  return state.settings;
+  return {
+    ...state.settings,
+    ...{
+      wizardCurrentStep: state.wallet.common.wizardCurrentStep,
+    },
+  };
 }
 
 const mapDispatchToProps = {

diff --git a/src/components/StartingAddressIndexPicker.jsx b/src/components/StartingAddressIndexPicker.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { validateBIP32Index } from "unchained-bitcoin";
 import {
+  Box,
   Grid,
   Card,
   CardHeader,
@@ -56,11 +57,15 @@ class StartingAddressIndexPicker extends React.Component {
       startingAddressIndexField,
       startingAddressIndexError,
     } = this.state;
+
+    const { nextBtn, prevBtn, wizardCurrentStep } = this.props;
+
+    if (wizardCurrentStep !== 5) {
+      return null;
+    }
     return (
-      <Card>
-        <Grid container justify="space-between">
-          <CardHeader title="Starting Address Index" />
-        </Grid>
+      <Card className="wizard-card-wrapper">
+        <CardHeader title="Starting Address Index" />
         <CardContent>
           <Grid item>
             <FormControl component="fieldset">
@@ -107,6 +112,10 @@ class StartingAddressIndexPicker extends React.Component {
               )}
             </FormControl>
           </Grid>
+          <Box mt={3} id="wallet-wizard-nav-btn-wrapper">
+            {prevBtn}
+            {nextBtn}
+          </Box>
         </CardContent>
       </Card>
     );
@@ -116,11 +125,22 @@ class StartingAddressIndexPicker extends React.Component {
 StartingAddressIndexPicker.propTypes = {
   startingAddressIndex: PropTypes.number.isRequired,
   setStartingAddressIndex: PropTypes.func.isRequired,
+  nextBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  prevBtn: PropTypes.shape({ $$typeof: PropTypes.symbol }),
+  wizardCurrentStep: PropTypes.number.isRequired,
+};
+
+StartingAddressIndexPicker.defaultProps = {
+  nextBtn: null,
+  prevBtn: null,
 };
 
 function mapStateToProps(state) {
   return {
     startingAddressIndex: state.settings.startingAddressIndex,
+    ...{
+      wizardCurrentStep: state.wallet.common.wizardCurrentStep,
+    },
   };
 }
 

diff --git a/src/components/Wallet/WalletGenerator.jsx b/src/components/Wallet/WalletGenerator.jsx
@@ -361,6 +361,7 @@ class WalletGenerator extends React.Component {
     const hasConflict = Object.values(extendedPublicKeyImporters).some(
       (xpub) => xpub.conflict
     );
+
     if (this.extendedPublicKeyCount() === totalSigners) {
       if (generating && !configuring) {
         return (
@@ -372,9 +373,9 @@ class WalletGenerator extends React.Component {
           <Card>
             <CardHeader title={this.title()} />
             <CardContent>
-              <Button href="#" onClick={(e) => this.toggleImporters(e, false)}>
+              {/* <Button href="#" onClick={(e) => this.toggleImporters(e, false)}>
                 {configuring ? "Hide Key Selection" : "Edit Details"}
-              </Button>
+              </Button> */}
               <ConfirmWallet />
               <p>
                 You have imported all&nbsp;