create account page

tauri-wallet/src/context/main.tsx

@@ -1,6 +1,6 @@
-import { invoke } from '@tauri-apps/api'
-import React, { createContext, useCallback, useEffect, useState } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
+import { invoke } from '@tauri-apps/api'
 import { Coin, TClientDetails } from '../types'
 
 type TClientContext = {
@@ -23,7 +23,7 @@ export const ClientContextProvider = ({
   const history = useHistory()
 
   useEffect(() => {
-    !clientDetails ? history.push('/signin') : history.push('/bond')
+    !clientDetails ? history.push('/signin') : history.push('/balance')
   }, [clientDetails])
 
   const logIn = async (clientDetails: TClientDetails) => {

tauri-wallet/src/routes/index.tsx

@@ -13,7 +13,7 @@ import { InternalDocs } from './internal-docs'
 
 export const Routes = () => (
   <Switch>
-    <Route path="/signin" exact>
+    <Route path="/signin">
       <SignIn />
     </Route>
     <Route path="/balance">

tauri-wallet/src/routes/sign-in.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 import {
   TextField,
   CircularProgress,
@@ -11,39 +12,15 @@ import {
 } from '@material-ui/core'
 import { Alert } from '@material-ui/lab'
 import { useTheme } from '@material-ui/styles'
+import { ArrowBack } from '@material-ui/icons'
 import { invoke } from '@tauri-apps/api'
 import logo from '../images/logo-background.svg'
 import { ClientContext } from '../context/main'
 import { TClientDetails } from '../types/global'
 
 export const SignIn = () => {
-  const [mnemonic, setMnemonic] = useState<string>(
-    'alley mutual arrange escape army vacuum cherry ozone frame steel current smile dad subject primary foster lazy want perfect fury general eye cannon motor'
-  )
-  const [inputError, setInputError] = useState<string | undefined>()
-  const [isLoading, setIsLoading] = useState(false)
-
-  const { logIn } = useContext(ClientContext)
-
   const theme: Theme = useTheme()
-
-  const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    setIsLoading(true)
-    setInputError(undefined)
-
-    invoke('connect_with_mnemonic', { mnemonic })
-      .then((res) => {
-        setIsLoading(false)
-        logIn(res as TClientDetails)
-      })
-      .catch((e) => {
-        setIsLoading(false)
-        setInputError(e)
-      })
-  }
-
+  const [showCreateAccount, setShowCreateAccount] = useState(false)
   return (
     <div
       style={{
@@ -76,63 +53,154 @@ export const SignIn = () => {
           background: theme.palette.grey[100],
         }}
       >
-        <Card
-          style={{
-            width: 600,
-            padding: theme.spacing(6, 10),
-            borderRadius: theme.shape.borderRadius,
-          }}
-        >
-          <Typography variant="h4">Sign in</Typography>
-          <form noValidate onSubmit={handleSignIn}>
-            <Grid container direction="column" spacing={1}>
-              <Grid item>
-                <TextField
-                  value={mnemonic}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    setMnemonic(e.target.value)
-                  }
-                  size="medium"
-                  variant="outlined"
-                  margin="normal"
-                  required
-                  fullWidth
-                  id="mnemonic"
-                  label="BIP-39 Mnemonic"
-                  name="mnemonic"
-                  autoComplete="mnemonic"
-                  autoFocus
-                  disabled={isLoading}
-                />
-              </Grid>
-              <Grid item>
-                <Button
-                  fullWidth
-                  variant="contained"
-                  color="primary"
-                  type="submit"
-                  disabled={isLoading}
-                  endIcon={isLoading && <CircularProgress size={20} />}
-                  disableElevation
-                >
-                  {!isLoading ? 'Sign In' : 'Signing in'}
-                </Button>
-              </Grid>
-              {inputError && (
-                <Grid item style={{ marginTop: theme.spacing(1) }}>
-                  <Alert severity="error">{inputError}</Alert>
-                </Grid>
-              )}
-              <Grid item style={{ marginTop: theme.spacing(1) }}>
-                <Typography variant="body2" component="span">
-                  Don't have an account?
-                </Typography>{' '}
-                <Link>Create one</Link>
-              </Grid>
-            </Grid>
-          </form>
-        </Card>
+        {showCreateAccount ? (
+          <CreateAccountContent
+            showSignIn={() => setShowCreateAccount(false)}
+          />
+        ) : (
+          <SignInContent showCreateAccount={() => setShowCreateAccount(true)} />
+        )}
       </div>
     </div>
   )
 }
+
+const SignInContent = ({
+  showCreateAccount,
+}: {
+  showCreateAccount: () => void
+}) => {
+  const [mnemonic, setMnemonic] = useState<string>(
+    'alley mutual arrange escape army vacuum cherry ozone frame steel current smile dad subject primary foster lazy want perfect fury general eye cannon motor'
+  )
+  const [inputError, setInputError] = useState<string | undefined>()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const { logIn } = useContext(ClientContext)
+
+  const theme: Theme = useTheme()
+
+  const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    setIsLoading(true)
+    setInputError(undefined)
+
+    invoke('connect_with_mnemonic', { mnemonic })
+      .then((res) => {
+        setIsLoading(false)
+        logIn(res as TClientDetails)
+      })
+      .catch((e) => {
+        setIsLoading(false)
+        setInputError(e)
+      })
+  }
+
+  return (
+    <Card
+      style={{
+        width: 600,
+        padding: theme.spacing(6, 10),
+        borderRadius: theme.shape.borderRadius,
+      }}
+    >
+      <Typography variant="h4">Sign in</Typography>
+      <form noValidate onSubmit={handleSignIn}>
+        <Grid container direction="column" spacing={1}>
+          <Grid item>
+            <TextField
+              value={mnemonic}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setMnemonic(e.target.value)
+              }
+              size="medium"
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="mnemonic"
+              label="BIP-39 Mnemonic"
+              name="mnemonic"
+              autoComplete="mnemonic"
+              autoFocus
+              disabled={isLoading}
+            />
+          </Grid>
+          <Grid item>
+            <Button
+              fullWidth
+              variant="contained"
+              color="primary"
+              type="submit"
+              disabled={isLoading}
+              endIcon={isLoading && <CircularProgress size={20} />}
+              disableElevation
+            >
+              {!isLoading ? 'Sign In' : 'Signing in'}
+            </Button>
+          </Grid>
+          {inputError && (
+            <Grid item style={{ marginTop: theme.spacing(1) }}>
+              <Alert severity="error">{inputError}</Alert>
+            </Grid>
+          )}
+          <Grid item style={{ marginTop: theme.spacing(1) }}>
+            <Typography variant="body2" component="span">
+              Don't have an account?
+            </Typography>{' '}
+            <Link href="#" onClick={showCreateAccount}>
+              Create one
+            </Link>
+          </Grid>
+        </Grid>
+      </form>
+    </Card>
+  )
+}
+
+const CreateAccountContent = ({ showSignIn }: { showSignIn: () => void }) => {
+  const theme: Theme = useTheme()
+  return (
+    <>
+      <Card
+        style={{
+          width: 600,
+          padding: theme.spacing(6, 10),
+          borderRadius: theme.shape.borderRadius,
+        }}
+      >
+        <img src={logo} />
+        <Typography variant="h4">Create wallet</Typography>
+        <Grid container direction="column" spacing={1}>
+          <Grid item>
+            <Typography color="textSecondary">
+              Create an new wallet to start using the Nym network
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Button
+              fullWidth
+              variant="contained"
+              color="primary"
+              type="submit"
+              disableElevation
+            >
+              Create
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button
+              fullWidth
+              variant="text"
+              onClick={showSignIn}
+              startIcon={<ArrowBack />}
+            >
+              Sign in
+            </Button>
+          </Grid>
+        </Grid>
+      </Card>
+    </>
+  )
+}