Add dispatch action to wallet setup UI component

Author: AmirAbrams

web/package-lock.json

@@ -12,14 +12,17 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/react-redux": "^7.1.9",
+    "@types/react-router": "^5.1.8",
     "@types/sjcl": "^1.0.29",
     "axios": "^0.20.0",
+    "connected-react-router": "^6.8.0",
     "node-fetch": "^2.6.1",
     "node-forge": "0.10.0",
     "qrcode-generator": "^1.4.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.1",
+    "react-router": "^5.2.0",
     "react-scripts": "3.4.3",
     "redux": "^4.0.5",
     "redux-injectors": "^1.3.0",

web/package.json

@@ -9,6 +9,7 @@ export interface SetupWizardProps {
 
 export interface SetupWizardState {
   currentStep?: number;
+  mnemonic?: string;
 }
 
 export class SetupWizard extends Component<SetupWizardProps, SetupWizardState> {
@@ -76,7 +77,11 @@ export class SetupWizard extends Component<SetupWizardProps, SetupWizardState> {
           <Grid.Row textAlign="center">
             {this.state && this.state.currentStep === 1 && (
               <Grid.Column>
-                <WalletSetup onComplete={() => this.props.onComplete()} />
+                <WalletSetup 
+                  onComplete={() => this.props.onComplete()} 
+                  onCancel={() => this.setState({ currentStep: 1 })}
+                  walletImportMnemonic={(mnemonic) => this.setState({ mnemonic: mnemonic })}
+                />
               </Grid.Column>
             )}
           </Grid.Row>

web/src/components/SetupWizard.tsx

@@ -10,12 +10,12 @@ import { H3, Text } from "../ui/Text";
 import { FilePathInfo } from "../../shared/FilePathInfo";
 import { WalletRestoreFilePassword } from "./RestoreFilePassword";
 import { RequestConfig } from "../../api/Config";
-import { ImportMnemonicRequest } from "../../shared/Mnemonic";
 import axios from "axios";
 
 export interface WalletFileRestoreProps {
   onComplete: () => void;
   onCancel: () => void;
+  onRestoreMnemonic: (words: string) => void;
 }
 
 export interface WalletFileRestoreState {
@@ -72,15 +72,8 @@ export class WalletFileRestore extends Component<
       wordCount === 24 ||
       wordCount === 25
     ) {
-      var request: ImportMnemonicRequest = {
-        mnemonic: wordlist
-      }
-      axios.post<ImportMnemonicRequest>("/wallet/mnemonic", request, RequestConfig).then(function (response) {
-        console.log(JSON.stringify(response.data, null, 2));
-        self.setState( { loading: true, mnemonic: wordlist }, self.waitForRescan());
-      }).catch(function (error) {
-        console.log("onMnemonic execute wallet/mnemonic [Post] Error: " + error);
-      });
+      self.props.onRestoreMnemonic(wordlist);
+      this.setState( { loading: true } );
     } else {
       var err: DropzoneError = {
         title: "Incorrect Word Count",
@@ -91,11 +84,6 @@ export class WalletFileRestore extends Component<
     }
   };
 
-  // Returns a Promise that resolves after "ms" Milliseconds
-  private timer(ms: number) {
-    return new Promise(res => setTimeout(res, ms));
-  }
-
   private waitForRescan(): | undefined {
     //TODO: Use redux-saga for these types of actions
     console.log('waitForRescan');

web/src/components/wallet/FileRestore.tsx

@@ -10,6 +10,8 @@ import { WalletRestore } from "./Restore";
 import { WalletFileRestore } from "./FileRestore";
 import { WalletMnemonicRestore } from "./MnemonicRestore";
 import { WalletPassword } from "./WalletPassword";
+import { PickedDispatchProps } from "../../state/shared/PickedDispatchProps";
+import { ManageWalletActions } from "../../state/actions/manageWallet";
 
 enum SetupState {
   Init = 1,
@@ -18,36 +20,54 @@ enum SetupState {
   Restore,
   RestoreWithMnemonic,
   RestoreWithSecureFile,
-  CreatePassword
+  CreatePassword,
+  Waiting,
+  Complete,
 }
 
 export interface WalletSetupProps {
   onComplete: () => void;
+  onCancel: () => void;
 }
 
+export type WalletViewDispatch = PickedDispatchProps<typeof ManageWalletActions, "walletImportMnemonic" >;
+
+type WalletViewDispatchProps = WalletSetupProps & WalletViewDispatch;
+
 export interface WalletSetupState {
   setupState: SetupState;
 }
 
-export class WalletSetup extends Component<WalletSetupProps, WalletSetupState> {
-  constructor(props: WalletSetupProps) {
+export class WalletSetup extends Component<WalletViewDispatchProps, WalletSetupState> {
+  constructor(props: WalletViewDispatchProps) {
     super(props);
     // bind events
     this.componentDidMount = this.componentDidMount.bind(this);
     this.componentWillUnmount = this.componentWillUnmount.bind(this);
-    this.onNewWallet = this.onNewWallet.bind(this);
+    this.onInitWallet = this.onInitWallet.bind(this);
+    this.onRequestNewWallet = this.onRequestNewWallet.bind(this);
+    this.onRequestRestoreWallet = this.onRequestRestoreWallet.bind(this);
   }
 
   componentDidMount(): void {
     this.setState({
       setupState: SetupState.Init
     });
+    this.onInitWallet();
   }
 
   componentWillUnmount(): void {}
 
-  private onNewWallet(): void {
-    this.props.onComplete();
+  private onInitWallet(): void {
+    this.props.walletImportMnemonic("hello test green oil elephant");
+  }
+
+  private onRequestNewWallet(): void {
+    this.setState({ setupState: SetupState.New })
+  }
+
+  private onRequestRestoreWallet(): void {
+    this.setState({ setupState: SetupState.Restore })
   }
 
   render() {
@@ -63,7 +83,7 @@ export class WalletSetup extends Component<WalletSetupProps, WalletSetupState> {
             <Box direction="column" align="center" width="100%">
               <Box display="flex" direction="row" align="center" width="100%">
                 <SCard
-                  onClick={() => this.setState({ setupState: SetupState.New })}
+                  onClick={() => this.onRequestNewWallet()}
                 >
                   <ImportIconWhite height="80px" width="80px" />
                   <H3 align="start" color="white" minwidth="50px">
@@ -74,10 +94,7 @@ export class WalletSetup extends Component<WalletSetupProps, WalletSetupState> {
                   </Text>
                 </SCard>
                 <SCard
-                  onClick={() =>
-                    this.setState({ setupState: SetupState.Restore })
-                  }
-                >
+                  onClick={() =>this.onRequestRestoreWallet()}>
                   <RestoreIconWhite height="80px" width="80px" />
                   <H3 align="start" color="white" minwidth="50px">
                     Restore Wallet
@@ -136,7 +153,8 @@ export class WalletSetup extends Component<WalletSetupProps, WalletSetupState> {
           this.state.setupState === SetupState.RestoreWithSecureFile && (
             <WalletFileRestore
               onComplete={() => this.props.onComplete()}
-              onCancel={() => this.setState({ setupState: SetupState.Restore })}
+              onCancel={() => this.props.onCancel()}
+              onRestoreMnemonic={(words) => this.props.walletImportMnemonic(words)}
             />
           )}
       </>