move mnemonic passphrase to mnemonic page and add checkbox to show it

disable updater for now
add description to dapps

README.md

@@ -50,7 +50,12 @@ npx cap sync
 npx cap update
 ```
 
-two last commands are synced code for android and ios.
+two last commands are synced code for android and ios. if you want to build for desktop you must enter these two commands to sync code
+
+```
+npx cap sync electron
+npx cap sync update electron
+```
 
 ### Android
 
@@ -63,10 +68,12 @@ IOS users can open ios project in code, open it in xcode and build any version t
 
 ### Desktop systems
 
-for desktop systems you can use electron use command below 
+To build desktop version of project you must enter to electron directory and build project
 
 ```
-npm run build:electron:<your platform choices are: linux/win/mac>
+npm run build
+npm run electron:pack
+npm run electron:make
 ```
 
 

electron/src/index.ts

@@ -4,7 +4,7 @@ import type { MenuItemConstructorOptions } from 'electron';
 import { app, MenuItem } from 'electron';
 import electronIsDev from 'electron-is-dev';
 import unhandled from 'electron-unhandled';
-import { autoUpdater } from 'electron-updater';
+// import { autoUpdater } from 'electron-updater';
 
 import { ElectronCapacitorApp, setupContentSecurityPolicy, setupReloadWatcher } from './setup';
 
@@ -46,7 +46,7 @@ if (electronIsDev) {
   // Initialize our app, build windows, and load content.
   await myCapacitorApp.init();
   // Check for updates if we are in a packaged app.
-  autoUpdater.checkForUpdatesAndNotify();
+  // autoUpdater.checkForUpdatesAndNotify();
 })();
 
 // Handle when all of our windows are close (platforms have their own expectations).

electron/src/setup.ts

@@ -212,9 +212,9 @@ export class ElectronCapacitorApp {
         this.MainWindow.show();
       }
       setTimeout(() => {
-        // if (electronIsDev) {
+        if (electronIsDev) {
           this.MainWindow.webContents.openDevTools();
-        // }
+        }
         CapElectronEventEmitter.emit('CAPELECTRON_DeeplinkListenerInitialized', '');
       }, 400);
     });

src/api/wallet-add/WalletCreate.tsx

@@ -5,7 +5,7 @@ import * as walletActions from "../../action/wallet";
 import Stepper from "@material-ui/core/Stepper";
 import Step from "@material-ui/core/Step";
 import StepLabel from "@material-ui/core/StepLabel";
-import WalletName from "./WalletName";
+import WalletName from "./elements/WalletName";
 import WalletTypeSelect from "./elements/WalletTypeSelect";
 import { NETWORK_TYPES } from "../../config/network_type";
 import WalletPassword from "./WalletPassword";
@@ -17,7 +17,7 @@ interface PropsType extends RouteComponentProps {
 
 interface StateType {
     mnemonic: string;
-    mnemonicPassPhrase: string;
+    mnemonic_passphrase: string;
     step: number;
     name: string;
     type: WalletType;
@@ -29,7 +29,7 @@ interface StateType {
 class WalletCreate extends React.Component<PropsType, StateType> {
     state: StateType = {
         mnemonic: "",
-        mnemonicPassPhrase: "",
+        mnemonic_passphrase: "",
         step: 0,
         name: "",
         type: WalletType.Normal,
@@ -43,8 +43,8 @@ class WalletCreate extends React.Component<PropsType, StateType> {
         "Password"
     ];
 
-    gotoMnemonic = (name: string, password: string) => {
-        this.setState({ name: name, mnemonicPassPhrase: password, step: 1 });
+    gotoMnemonic = (name: string) => {
+        this.setState({ name: name, step: 1 });
     };
 
     goPassword = () => {
@@ -55,8 +55,8 @@ class WalletCreate extends React.Component<PropsType, StateType> {
         this.setState({ step: 0 });
     };
 
-    goConfirm = (mnemonic: string, network: string) => {
-        this.setState({ mnemonic: mnemonic, step: 2, network_type: network });
+    goConfirm = (mnemonic: string, network: string, mnemonic_passphrase: string) => {
+        this.setState({ mnemonic: mnemonic, step: 2, network_type: network, mnemonic_passphrase: mnemonic_passphrase });
     };
 
     saveWallet = (password: string) => {
@@ -66,7 +66,7 @@ class WalletCreate extends React.Component<PropsType, StateType> {
                 this.state.name,
                 this.state.type,
                 this.state.mnemonic,
-                this.state.mnemonicPassPhrase,
+                this.state.mnemonic_passphrase,
                 this.state.network_type,
                 password
             ).then(() => {
@@ -81,10 +81,8 @@ class WalletCreate extends React.Component<PropsType, StateType> {
     renderName = () => (
         <WalletName
             name={this.state.name}
-            password={this.state.mnemonicPassPhrase}
             goBack={this.props.back}
-            confirm={false}
-            goForward={(name, password) => this.gotoMnemonic(name, password)}>
+            goForward={(name) => this.gotoMnemonic(name)}>
             <>
                 <p>Enter wallet name and password.</p>
                 <WalletTypeSelect value={this.state.type} setValue={value => this.setState({ type: value })} />
@@ -95,7 +93,7 @@ class WalletCreate extends React.Component<PropsType, StateType> {
     renderPassword = () => (
         <WalletPassword
             goForward={(password) => this.saveWallet(password)}
-            goBack={() => this.goConfirm(this.state.mnemonic, this.state.network_type)}
+            goBack={() => this.goConfirm(this.state.mnemonic, this.state.network_type, this.state.mnemonic_passphrase)}
         />)
 
     renderMnemonic = (): ReactNode | null => null;

src/api/wallet-add/elements/MnemonicPassword.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import { Checkbox, Container, FormControlLabel, Grid } from "@material-ui/core";
+import PasswordInput from "../../../components/PasswordInput";
+
+interface PropsType {
+    password: string;
+    valid: boolean;
+    confirm?: boolean;
+    goBack?: () => any;
+    setPassword: (password: string, valid: boolean) => any;
+}
+
+const MnemonicPassword = (props: PropsType) => {
+    const [usePassword, setUsePassword] = useState(!!props.password);
+    const [password, setPassword] = useState(props.password ? props.password : "");
+    const [passwordConfirm, setPasswordConfirm] = useState(props.password ? props.password : "");
+
+    const validatePasswordConfirm = () => {
+        if (!props.confirm || !usePassword) return "";
+        return (passwordConfirm !== password) ? "Passwords are not same" : "";
+    };
+    useEffect(() => {
+        const valid = validatePasswordConfirm() === '';
+        const aggregated_password = usePassword ? password : ""
+        if(props.password !== aggregated_password || valid !== props.valid){
+            props.setPassword(aggregated_password, valid)
+        }
+    })
+    return (
+        <Grid container spacing={2}>
+            <Grid item xs={12}>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            checked={usePassword}
+                            onChange={event => setUsePassword(event.target.checked)}
+                            name="use Password"
+                            color="primary"
+                        />
+                    }
+                    label="Extend Mnemonic using extra password"
+                />
+            </Grid>
+            {usePassword ? (
+                <React.Fragment>
+                    <PasswordInput
+                        label="Mnemonic passphrase"
+                        error={""}
+                        password={password}
+                        setPassword={setPassword} />
+                    {
+                        props.confirm ? (
+                            <PasswordInput
+                                error={validatePasswordConfirm()}
+                                password={passwordConfirm}
+                                setPassword={setPasswordConfirm}
+                                label="Confirm Mnemonic passphrase" />
+                        ) : null
+                    }
+                </React.Fragment>
+            ) : null}
+        </Grid>
+    );
+
+};
+
+
+export default MnemonicPassword;

src/api/wallet-add/WalletName.tsx → src/api/wallet-add/elements/WalletName.tsx

@@ -1,34 +1,22 @@
 import React, { useState } from "react";
 import { Button, Container, Grid } from "@material-ui/core";
-import PasswordInput from "../../components/PasswordInput";
-import TextInput from "../../components/TextInput";
+import TextInput from "../../../components/TextInput";
 
 interface PropsType {
     name: string;
-    password?: string;
-    hidePassword?: boolean;
-    hideDbPassword?: boolean;
-    confirm?: boolean;
     goBack?: () => any;
-    goForward: (name: string, password: string) => any;
+    goForward: (name: string) => any;
     children: React.ReactElement;
 }
 
 const WalletName = (props: PropsType) => {
     const [name, setName] = useState(props.name);
-    const [password, setPassword] = useState(props.password ? props.password : "");
-    const [passwordConfirm, setPasswordConfirm] = useState(props.password ? props.password : "");
-
-    const validatePasswordConfirm = () => {
-        if (props.hidePassword || !props.confirm) return "";
-        return (passwordConfirm !== password) ? "Passwords are not same" : "";
-    };
 
     const validateName = () => {
         return (name === "") ? "Name must entered" : "";
     };
     const formValid = () => {
-        return validatePasswordConfirm() + validateName() === "";
+        return validateName() === "";
     };
 
     return (
@@ -44,22 +32,6 @@ const WalletName = (props: PropsType) => {
                     error={validateName()}
                     value={name}
                     setValue={setName} />
-                {props.hidePassword ? null : (
-                    <React.Fragment>
-                        <PasswordInput
-                            label="Mnemonic passphrase"
-                            error={""}
-                            password={password}
-                            setPassword={setPassword} />
-                        {props.confirm ? (
-                            <PasswordInput
-                                error={validatePasswordConfirm()}
-                                password={passwordConfirm}
-                                setPassword={setPasswordConfirm}
-                                label="Confirm Mnemonic passphrase" />
-                        ) : null}
-                    </React.Fragment>
-                )}
             </Grid>
             <Grid container spacing={2} justifyContent="space-between">
                 <Grid item>
@@ -74,7 +46,7 @@ const WalletName = (props: PropsType) => {
                     <Button
                         variant="contained"
                         color="primary"
-                        onClick={() => props.goForward(name, password)}
+                        onClick={() => props.goForward(name)}
                         disabled={!formValid()}>
                         Next
                     </Button>

src/api/wallet-add/insert/InsertWallet.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import WalletName from "../WalletName";
+import WalletName from "../elements/WalletName";
 import Mnemonic from "./Mnemonic";
 import MnemonicConfirm from "./MnemonicConfirm";
 import { withRouter } from "react-router-dom";
@@ -10,10 +10,8 @@ class InsertWallet extends WalletCreate {
     renderName = () => (
         <WalletName
             name={this.state.name}
-            password={this.state.mnemonicPassPhrase}
             goBack={this.props.back}
-            confirm={true}
-            goForward={(name, password) => this.gotoMnemonic(name, password)}>
+            goForward={(name) => this.gotoMnemonic(name)}>
             <>
                 Enter new wallet name and password.
                 <p style={{ color: "red" }}>
@@ -27,10 +25,10 @@ class InsertWallet extends WalletCreate {
     renderMnemonic = () => (
         <Mnemonic
             mnemonic={this.state.mnemonic}
+            mnemonic_passphrase={this.state.mnemonic_passphrase}
             goBack={() => this.goBackName()}
             network={this.state.network_type}
-            goForward={(mnemonic: string, network: string) => this.goConfirm(mnemonic, network)} />
-
+            goForward={(mnemonic: string, network: string, mnemonic_passphrase: string) => this.goConfirm(mnemonic, network, mnemonic_passphrase)} />
     );
 
     renderConfirm = () => (

src/api/wallet-add/insert/Mnemonic.tsx

@@ -3,23 +3,29 @@ import { generateMnemonic } from "bip39";
 import { Container, Grid, Button } from "@material-ui/core";
 import MnemonicView from "../elements/MnemonicView";
 import WalletNetworkSelect from "../elements/WalletNetworkSelect";
+import MnemonicPassword from "../elements/MnemonicPassword";
 
 interface PropsType {
     mnemonic?: string;
+    mnemonic_passphrase: string;
     goBack: () => any;
-    goForward: (mnemonic: string, network: string) => any;
+    goForward: (mnemonic: string, network: string, mnemonic_passphrase: string) => any;
     network: string;
 }
 
 const Mnemonic = (props: PropsType) => {
     const initialMnemonic = props.mnemonic ? props.mnemonic : generateMnemonic(160);
     const [mnemonic] = useState(initialMnemonic);
     const [network, setNetwork] = useState(props.network);
+    const [mnemonic_passphrase, set_mnemonic_passphrase] = useState<{ password: string, valid: boolean }>({
+        password: props.mnemonic_passphrase,
+        valid: true
+    });
     return (
         <Container>
             <Grid container spacing={2}>
                 <Grid item xs={12}>
-                    <WalletNetworkSelect network={network} setNetworkType={(newNetwork) => setNetwork(newNetwork)}/>
+                    <WalletNetworkSelect network={network} setNetworkType={(newNetwork) => setNetwork(newNetwork)} />
                 </Grid>
                 <Grid item xs={12}>
                     <h2>Create Wallet</h2>
@@ -33,14 +39,30 @@ const Mnemonic = (props: PropsType) => {
                 </Grid>
                 <MnemonicView mnemonic={mnemonic} />
             </Grid>
+            <Grid container spacing={2}>
+                <Grid item xs={12}>
+                    <MnemonicPassword
+                        confirm={true}
+                        password={mnemonic_passphrase.password}
+                        valid={mnemonic_passphrase.valid}
+                        setPassword={(password: string, valid: boolean) => set_mnemonic_passphrase({
+                            password,
+                            valid
+                        })} />
+                </Grid>
+            </Grid>
             <Grid container spacing={2} justifyContent="space-between">
                 <Grid item>
                     <Button variant="contained" color="primary" onClick={props.goBack}>
                         Back
                     </Button>
                 </Grid>
                 <Grid item>
-                    <Button variant="contained" color="primary" onClick={() => props.goForward(mnemonic, network)}>
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        disabled={!mnemonic_passphrase.valid}
+                        onClick={() => props.goForward(mnemonic, network, mnemonic_passphrase.password)}>
                         Yes. I've write it down
                     </Button>
                 </Grid>

src/api/wallet-add/readonly/ReadOnlyWallet.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import WalletCreate from "../WalletCreate";
-import WalletName from "../WalletName";
+import WalletName from "../elements/WalletName";
 import { withRouter } from "react-router-dom";
 import ReadOnlyWalletAddress from "./ReadOnlyWalletAddress";
 import * as walletActions from '../../../action/wallet';
@@ -13,11 +13,9 @@ class ReadOnlyWallet extends WalletCreate {
     ];
     renderName = () => (
         <WalletName
-            hidePassword={true}
-            hideDbPassword={true}
             name={this.state.name}
             goBack={this.props.back}
-            goForward={(name, password) => this.gotoMnemonic(name, password)}>
+            goForward={(name) => this.gotoMnemonic(name)}>
             <>
                 Enter new wallet name.
                 <p style={{ color: "red" }}>