tkey share input

src/components/NavigationFrame.js

@@ -22,6 +22,8 @@ import CodeIcon from '@material-ui/icons/Code';
 import Tooltip from '@material-ui/core/Tooltip';
 import AddAccountDialog from './AddAccountDialog';
 import DeleteAccountDialog from './DeleteAccountDialog';
+import TkeyShareInputDialog from './TkeyShareInputDialog';
+import { useTkeyShareInput } from '../utils/tkey/tkey';
 
 const useStyles = makeStyles((theme) => ({
   content: {
@@ -129,6 +131,7 @@ function NetworkSelector() {
 
 function WalletSelector() {
   const { accounts, setWalletSelector, addAccount } = useWalletSelector();
+  const { action, flag } = useTkeyShareInput();
   const [anchorEl, setAnchorEl] = useState(null);
   const [addAccountOpen, setAddAccountOpen] = useState(false);
   const [deleteAccountOpen, setDeleteAccountOpen] = useState(false);
@@ -155,6 +158,7 @@ function WalletSelector() {
           setAddAccountOpen(false);
         }}
       />
+      <TkeyShareInputDialog open={flag} onAdd={action} />
       <DeleteAccountDialog
         open={deleteAccountOpen}
         onClose={() => setDeleteAccountOpen(false)}

src/components/TkeyShareInputDialog.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import {
+  DialogActions,
+  Button,
+  DialogTitle,
+  DialogContent,
+  TextField,
+} from '@material-ui/core';
+import DialogForm from './DialogForm';
+
+export default function TkeyShareInputDialog({ open, onAdd }) {
+  const [importedShare, setImportedShare] = useState('');
+
+  return (
+    <DialogForm open={open} onSubmit={() => onAdd(importedShare)} fullWidth>
+      <DialogTitle>Enter Share Mnemonic</DialogTitle>
+      <DialogContent style={{ paddingTop: 16 }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <TextField
+            label="Paste your share mnemonic"
+            fullWidth
+            type="password"
+            value={importedShare}
+            variant="outlined"
+            margin="normal"
+            onChange={(e) => setImportedShare(e.target.value.trim())}
+          />
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button type="submit" color="primary">
+          Add
+        </Button>
+      </DialogActions>
+    </DialogForm>
+  );
+}

src/pages/LoginPage.js

@@ -17,8 +17,9 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import CardActions from '@material-ui/core/CardActions';
 import Button from '@material-ui/core/Button';
 import { useCallAsync } from '../utils/notifications';
-import { useTkeyLogin } from '../utils/tkey/tkey';
+import { useTkeyLogin, useTkeyShareInput } from '../utils/tkey/tkey';
 import Link from '@material-ui/core/Link';
+import TkeyShareInputDialog from '../components/TkeyShareInputDialog';
 
 export default function LoginPage() {
   const [restore, setRestore] = useState(false);
@@ -45,20 +46,25 @@ export default function LoginPage() {
 
 function TkeyForm() {
   const tkeyLogin = useTkeyLogin();
+  const { action, flag } = useTkeyShareInput();
+
   return (
-    <Card>
-      <CardContent>
-        <Typography variant="h5" gutterBottom>
-          Threshold Key
-        </Typography>
-        <Typography paragraph>
-          Login with Google to create a new wallet / restore existing wallet
-        </Typography>
-      </CardContent>
-      <CardActions style={{ justifyContent: 'flex-end' }}>
-        <Button onClick={tkeyLogin}>Continue</Button>
-      </CardActions>
-    </Card>
+    <>
+      <Card>
+        <CardContent>
+          <Typography variant="h5" gutterBottom>
+            Threshold Key
+          </Typography>
+          <Typography paragraph>
+            Login with Google to create a new wallet / restore existing wallet
+          </Typography>
+        </CardContent>
+        <CardActions style={{ justifyContent: 'flex-end' }}>
+          <Button onClick={tkeyLogin}>Continue</Button>
+        </CardActions>
+      </Card>
+      <TkeyShareInputDialog open={flag} onAdd={action} />
+    </>
   );
 }
 

src/utils/tkey/ThresholdKeyController.js

@@ -143,7 +143,10 @@ export class ThresholdKeyController {
         console.warn("Couldn't find on device share");
         this.isShareInputRequired = true;
       }
+    } else {
+      this.isShareInputRequired = false;
     }
+    if (this.isShareInputRequired) return;
     const { privKey } = await this.tKey.reconstructKey();
     if (this.isNewKey) await this.sendMail();
     console.log(privKey.toString('hex'), 'reconstructed tkey');
@@ -185,7 +188,8 @@ export class ThresholdKeyController {
   };
 
   inputExternalShare = async (mnemonicShare) => {
-    const deserialiedShare = await this.tKey[
+    console.log(mnemonicShare);
+    const deserialiedShare = await this.tKey.modules[
       SHARE_SERIALIZATION_MODULE_NAME
     ].deserialize(mnemonicShare, 'mnemonic');
     // call api with new share

src/utils/tkey/tkey.js

@@ -45,6 +45,7 @@ export function useTkeyLogin() {
     const { privKey, postboxKey } = thresholdKeyInstance;
     setPostboxKey(postboxKey);
     console.log('adding account', privKey);
+    if (!privKey) return;
     const tkeyAccount = new Account(
       nacl.sign.keyPair.fromSeed(
         fromHexString(privKey.padStart(64, 0)),
@@ -70,6 +71,7 @@ export function useTkeyShareInput() {
     await thresholdKeyInstance.inputExternalShare(share);
     const { privKey } = thresholdKeyInstance;
     console.log('adding account', privKey);
+    if (!privKey) return;
     const tkeyAccount = new Account(
       nacl.sign.keyPair.fromSeed(
         fromHexString(privKey.padStart(64, 0)),
@@ -85,7 +87,10 @@ export function useTkeyShareInput() {
       importedPubkey: tkeyAccount.publicKey.toString(),
     });
   };
-  return { flag: thresholdKeyInstance.isPasswordInputRequired, action: fn };
+  return {
+    flag: thresholdKeyInstance.isShareInputRequired || false,
+    action: fn,
+  };
 }
 
 const fromHexString = (hexString) =>