From c6a207b54242d73b824855626a41c1e56164e407 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Wed, 24 Mar 2021 13:36:02 +0100
Subject: [PATCH] Manage share reconstruction (#830)

* password mnemonic reset shareTransfer

* styling

* error handling and button styling

* lint

* cleanup logs

* disable buttons when thre is an error

* Apply suggestions from code review

Co-authored-by: Ryan Noble <ryanjnoble@gmail.com>

* remove checkbox and save json to filestorage

* Apply suggestions from code review

* add some error handling with try/catch

* lint

* prevent double screen

Co-authored-by: Ryan Noble <ryanjnoble@gmail.com>
---
 .../Modules/LoginModule/InitialScreen.tsx     |  41 +--
 .../Modules/LoginModule/MissingShares.tsx     | 317 +++++++++++++++---
 .../Modules/LoginModule/SaveNewDevice.tsx     | 132 +++++++-
 .../src/Components/Pages/LoginPage.tsx        |  66 +++-
 .../src/Contexts/ThresholdKeyContext.tsx      | 274 ++++++---------
 5 files changed, 560 insertions(+), 270 deletions(-)

diff --git a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
index 9ffd8f7bae..4926145275 100644
--- a/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
+++ b/packages/files-ui/src/Components/Modules/LoginModule/InitialScreen.tsx
@@ -10,33 +10,8 @@ import { LOGIN_TYPE } from "@toruslabs/torus-direct-web-sdk"
 import { ROUTE_LINKS } from "../../FilesRoutes"
 
 const useStyles = makeStyles(
-  ({ constants, palette, breakpoints, zIndex }: CSFTheme) =>
+  ({ constants, palette, breakpoints }: CSFTheme) =>
     createStyles({
-      root: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        flex: "1 1 0",
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-        zIndex: zIndex?.layer1,
-        backgroundColor: constants.landing.background,
-        border: `1px solid ${constants.landing.border}`,
-        boxShadow: constants.landing.boxShadow,
-        borderRadius: 6,
-        [breakpoints.up("md")]:{
-          minHeight: "64vh",
-          justifyContent: "space-between",
-          minWidth: 440
-        },
-        [breakpoints.down("md")]: {
-          padding: `${constants.generalUnit * 4}px ${constants.generalUnit * 6.5}px`,
-          justifyContent: "center",
-          width: `calc(100vw - ${constants.generalUnit * 2}px)`
-        }
-      },
       buttonSection: {
         [breakpoints.up("md")]: {
           position: "absolute",
@@ -117,15 +92,11 @@ const useStyles = makeStyles(
           display: "none"
         }
       }
-    }
-    )
+    })
 )
 
 const InitialScreen: React.FC = () => {
-  const {
-    selectWallet,
-    resetAndSelectWallet
-  } = useImployApi()
+  const { selectWallet, resetAndSelectWallet } = useImployApi()
   const { desktop } = useThemeSwitcher()
   const { wallet } = useWeb3()
   const { login } = useThresholdKey()
@@ -192,7 +163,7 @@ const InitialScreen: React.FC = () => {
   }
 
   return (
-    <div className={classes.root}>
+    <>
       {
         desktop && !isConnecting && !error && (
           <Typography
@@ -337,7 +308,7 @@ const InitialScreen: React.FC = () => {
               <section className={classes.connectingWallet}>
                 <Typography variant='h2'><Trans>Connection failed</Trans></Typography>  
                 <Typography variant='h5'>
-                  <Trans>{error}</Trans>
+                  {error}
                 </Typography>
                 <Button onClick={resetLogin}>
                   <Trans>Try again</Trans>
@@ -346,7 +317,7 @@ const InitialScreen: React.FC = () => {
             </>
           )
       }
-    </div>
+    </>
   )
 }
 
diff --git a/packages/files-ui/src/Components/Modules/LoginModule/MissingShares.tsx b/packages/files-ui/src/Components/Modules/LoginModule/MissingShares.tsx
index 1a42cfbc3b..970eaaae80 100644
--- a/packages/files-ui/src/Components/Modules/LoginModule/MissingShares.tsx
+++ b/packages/files-ui/src/Components/Modules/LoginModule/MissingShares.tsx
@@ -1,61 +1,298 @@
-import React, { useState } from "react"
+import React, { ChangeEvent, useCallback, useState } from "react"
 import { useThresholdKey } from "../../../Contexts/ThresholdKeyContext"
-import { Button, TextInput } from "@chainsafe/common-components"
+import { Button, TextInput, Typography } from "@chainsafe/common-components"
 import { SECURITY_QUESTIONS_MODULE_NAME } from "@tkey/security-questions"
+import { t, Trans } from "@lingui/macro"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
+import { CSFTheme } from "../../../Themes/types"
+import clsx from "clsx"
 
-const MissingShares: React.FC = () => {
-  const {
-    keyDetails,
-    inputPasswordShare,
-    inputMnemonicShare
-  } = useThresholdKey()
-  const [password, setPassword] = useState<string>("")
-  const [mnemonic, setMnemonic] = useState<string>("")
+const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
+  createStyles({
+    content:{
+      width: "100%"
+    },
+    buttonSection: {
+      [breakpoints.up("md")]: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      },
+      [breakpoints.down("md")]: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-evenly"
+      }
+    },
+    button: {
+      width: `calc(100% - ${constants.generalUnit * 8}px)`,
+      marginLeft: constants.generalUnit * 4,
+      marginRight: constants.generalUnit * 4,
+      marginBottom: constants.generalUnit * 2,
+      [breakpoints.up("md")]: {
+        backgroundColor: palette.common.black.main,
+        color: palette.common.white.main
+      },
+      [breakpoints.down("md")]: {
+        backgroundColor: palette.common.black.main,
+        color: palette.common.white.main
+      }
+    },
+    buttonWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      marginTop: constants.generalUnit * 4,
+      marginBottom: constants.generalUnit * 4
+    },
+    headerText: {
+      textAlign: "center",
+      [breakpoints.up("md")]: {
+        paddingTop: constants.generalUnit * 4,
+        paddingBottom: constants.generalUnit * 8
+      },
+      [breakpoints.down("md")]: {
+        paddingTop: constants.generalUnit * 3,
+        paddingBottom: constants.generalUnit * 3,
+        textAlign: "center"
+      }
+    },
+    text: {
+      display: "inline-block",
+      paddingLeft: constants.generalUnit * 4,
+      paddingRight: constants.generalUnit * 4,
+      textAlign: "center",
+      [breakpoints.down("md")]: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        "&.label": {
+          paddingLeft: constants.generalUnit * 4
+        }
+      }
+    },
+    footer: {
+      textAlign: "center",
+      marginTop: constants.generalUnit * 2,
+      padding: `${constants.generalUnit * 2.5}px ${constants.generalUnit * 1.5}px`,
+      width: "100%"
+    },
+    buttonLink: {
+      color: palette.additional["gray"][10],
+      outline: "none",
+      textDecoration: "underline",
+      cursor: "pointer"
+    },
+    textInput:{
+      width: "100%",
+      margin: 0,
+      paddingLeft: constants.generalUnit*4,
+      paddingRight: constants.generalUnit*4
+    },
+    belowInput: {
+      margin: "auto",
+      marginTop: constants.generalUnit * 4
+    },
+    textAreaContainer: {
+      marginTop: constants.generalUnit,
+      paddingLeft: constants.generalUnit * 4,
+      paddingRight: constants.generalUnit * 4,
+      "& > textarea" : {
+        width: "100%",
+        height: constants.generalUnit * 10,
+        padding: constants.generalUnit
+      }
+    },
+    error: {
+      display: "inline-block",
+      padding: constants.generalUnit * 4
+    }
+  }))
 
+const MissingShares: React.FC = () => {
+  const { keyDetails, inputPasswordShare, inputMnemonicShare } = useThresholdKey()
+  const [password, setPassword] = useState("")
+  const [mnemonic, setMnemonic] = useState("")
+  const [withMnemonic, setWithMnemonic] = useState(false)
+  const [withPassword, setWithPassword] = useState(false)
+  const classes = useStyles()
+  const { logout } = useThresholdKey()
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState("")
+  
   const shares = keyDetails
     ? Object.values(keyDetails.shareDescriptions).map((share) => {
       return JSON.parse(share[0])
     })
     : []
 
-  const hasPasswordShare =
-    shares.filter((s) => s.module === SECURITY_QUESTIONS_MODULE_NAME).length > 0
+  const hasPasswordShare = shares.filter((s) => s.module === SECURITY_QUESTIONS_MODULE_NAME).length > 0
 
-  const handleSubmitPassword = async () => {
+  const handleSubmitPassword = () => {
     if (!password) return
-    await inputPasswordShare(password)
+    setIsLoading(true)
+
+    inputPasswordShare(password)
+      .catch((e) => {
+        setIsLoading(false)
+        setError(t`Password does not match user account, please double-check and try again.`)
+        console.error("error upon password input", e)
+      })
   }
 
-  const handleSubmitMnemonicShare = async () => {
+  const handleSubmitMnemonicShare = () => {
     if (!mnemonic) return
-    await inputMnemonicShare(mnemonic)
+    setIsLoading(true)
+
+    inputMnemonicShare(mnemonic)
+      .catch(() => {
+        setIsLoading(false)
+        setError(t`Backup phrase does not match user account, please double-check and try again.`)
+      })
   }
 
+  const onPasswordChange = useCallback((password: string | number | undefined) => {
+    setError("")
+    setPassword(password?.toString() || "") 
+  }, [])
+
+  const onMnemonicChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
+    setError("")
+    setMnemonic(event.currentTarget.value) 
+  }, [])
+
+  const onResetMethod = useCallback(() => {
+    setError("")
+    setMnemonic("") 
+    setPassword("")
+    setWithMnemonic(false)
+    setWithPassword(false)
+  }, [])
+
   return (
-    <div>
-      {hasPasswordShare && (
-        <>
-          <label>Enter you account password:</label>
-          <TextInput
-            value={password}
-            onChange={(val) =>
-              val ? setPassword(val.toString()) : setPassword("")
-            }
-          />
-          <Button onClick={handleSubmitPassword}>Submit</Button>
-        </>
-      )}
-      <>
-        <label>Enter you backup phrase:</label>
-        <TextInput
-          value={mnemonic}
-          onChange={(val) =>
-            val ? setMnemonic(val.toString()) : setMnemonic("")
-          }
-        />
-        <Button onClick={handleSubmitMnemonicShare}>Submit</Button>
-      </>
-    </div>
+    <>
+      <div className={classes.content}>
+        <Typography
+          variant="h6"
+          component="h1"
+          className={classes.headerText}
+        >
+          <Trans>Sign in</Trans>
+        </Typography>
+        { !withMnemonic && !withPassword && (
+          <>
+            <Typography className={classes.text}>  
+              <Trans>
+                Looks like you’re signing in from a new browser.
+                Please choose one of the following to continue:
+              </Trans>
+            </Typography>
+            <div className={classes.buttonWrapper}>
+              {hasPasswordShare && (
+                <Button                   
+                  className={classes.button}
+                  variant="primary"
+                  size="large"
+                  onClick={() => setWithPassword(true)}
+                >
+                  <Trans>Enter a password</Trans>
+                </Button>
+              )}
+              <Button 
+                className={classes.button}
+                variant="primary"
+                size="large"
+                onClick={() => setWithMnemonic(true)}
+              >
+                <Trans>Restore with backup phrase</Trans>
+              </Button>
+            </div>
+            <Typography className={classes.text}>  
+              <Trans>
+                Or confirm by signing into your Files on any
+                browser you’ve used before.
+              </Trans>
+            </Typography>
+          </>
+        )}
+        {withPassword && (
+          <div>
+            <Typography className={clsx(classes.text, "label")}>
+              <Trans>Enter password:</Trans>
+            </Typography>
+            <TextInput
+              className={classes.textInput}
+              value={password}
+              onChange={onPasswordChange}
+              type={"password"}
+            />
+            <Button
+              onClick={handleSubmitPassword}
+              className={clsx(classes.button, classes.belowInput)}
+              size="large"
+              loading={isLoading}
+              disabled={!!error || isLoading}
+            >
+              <Trans>Continue</Trans>
+            </Button>
+            <Typography className={classes.error}>
+              {error}
+            </Typography>
+          </div>
+        )}
+        {withMnemonic && (
+          <div>
+            <Typography className={clsx(classes.text, "label")}>
+              <Trans>Enter backup phrase:</Trans>
+            </Typography>
+            <div className={classes.textAreaContainer}>
+              <textarea
+                value={mnemonic}
+                onChange={onMnemonicChange}
+              />
+            </div>
+            <Button
+              onClick={handleSubmitMnemonicShare}
+              className={clsx(classes.button, classes.belowInput)}
+              size="large"
+              loading={isLoading}
+              disabled={!!error || isLoading}
+            >
+              <Trans>Continue</Trans>
+            </Button>
+            <Typography className={classes.error}>
+              {error}
+            </Typography>
+          </div>
+        )}
+      </div>
+      <footer className={classes.footer}>
+        { !withMnemonic && !withPassword && !isLoading && (
+          <div
+            className={classes.buttonLink}
+            onClick={logout}
+          >
+            <Typography>
+              <Trans>
+                Sign in with a different account
+              </Trans>
+            </Typography>
+          </div>
+        )}
+        { (withMnemonic || withPassword) && !isLoading && (
+          <div
+            className={classes.buttonLink}
+            onClick={onResetMethod}
+          >
+            <Typography>
+              <Trans>
+                Try another method
+              </Trans>
+            </Typography>
+          </div>
+        )}
+      </footer>
+    </>
   )
 }
 
diff --git a/packages/files-ui/src/Components/Modules/LoginModule/SaveNewDevice.tsx b/packages/files-ui/src/Components/Modules/LoginModule/SaveNewDevice.tsx
index 4e613d6483..1ddc09f71c 100644
--- a/packages/files-ui/src/Components/Modules/LoginModule/SaveNewDevice.tsx
+++ b/packages/files-ui/src/Components/Modules/LoginModule/SaveNewDevice.tsx
@@ -1,24 +1,126 @@
-import React, { useState } from "react"
+import React, { useCallback, useState } from "react"
 import { useThresholdKey } from "../../../Contexts/ThresholdKeyContext"
-import { Button, CheckboxInput, Typography } from "@chainsafe/common-components"
+import { Button, Typography } from "@chainsafe/common-components"
+import { Trans } from "@lingui/macro"
+import { createStyles, makeStyles } from "@chainsafe/common-theme"
+import { CSFTheme } from "../../../Themes/types"
+
+const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) =>
+  createStyles({
+    root:{
+      width: "100%",
+      textAlign: "center"
+    },
+    buttonSection: {
+      [breakpoints.up("md")]: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      },
+      [breakpoints.down("md")]: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-evenly"
+      }
+    },
+    button: {
+      width: 240,
+      marginBottom: constants.generalUnit * 2,
+      [breakpoints.up("md")]: {
+        backgroundColor: palette.common.black.main,
+        color: palette.common.white.main
+      },
+      [breakpoints.down("md")]: {
+        backgroundColor: palette.common.black.main,
+        color: palette.common.white.main
+      }
+    },
+    buttonWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      marginTop: constants.generalUnit * 4,
+      marginBottom: constants.generalUnit * 4
+    },
+    headerText: {
+      textAlign: "center",
+      [breakpoints.up("md")]: {
+        paddingTop: constants.generalUnit * 4,
+        paddingBottom: constants.generalUnit * 8
+      },
+      [breakpoints.down("md")]: {
+        paddingTop: constants.generalUnit * 3,
+        paddingBottom: constants.generalUnit * 3,
+        textAlign: "center"
+      }
+    },
+    text: {
+      display: "inline-block",
+      paddingLeft: constants.generalUnit * 4,
+      paddingRight: constants.generalUnit * 4,
+      textAlign: "center",
+      [breakpoints.down("md")]: {
+        paddingLeft: 0,
+        paddingRight: 0
+      }
+    }
+  })
+)
 
 const SaveNewDevice: React.FC = () => {
   const { addNewDeviceShareAndSave, resetIsNewDevice } = useThresholdKey()
-  const [useFileStorage, setUseFileStorage] = useState<boolean>(false)
+  const [isAccepted, setIsAccepted] = useState(false)
+  const [isDenied, setIsDenied] = useState(false)
+  const classes = useStyles()
+
+
+  const onSave = useCallback(() => {
+    setIsAccepted(true)
+    addNewDeviceShareAndSave()
+      .catch(console.error)
+  }, [addNewDeviceShareAndSave])
+
+  const onDeny = useCallback(() => {
+    resetIsNewDevice()
+    setIsDenied(true)
+  }, [resetIsNewDevice])
 
   return (
-    <>
-      <Typography>Would you like to save this device?</Typography>
-      <CheckboxInput
-        value={useFileStorage}
-        onChange={(e) => setUseFileStorage(e.currentTarget.checked)}
-        label="Save to file storage"
-      />
-      <Button onClick={() => addNewDeviceShareAndSave(useFileStorage)}>
-        Yes
-      </Button>
-      <Button onClick={resetIsNewDevice}>No</Button>
-    </>
+    <div className={classes.root}>
+      <Typography
+        variant="h6"
+        component="h1"
+        className={classes.headerText}
+      >
+        <Trans>Nice to see you again!</Trans>
+      </Typography>
+      <Typography className={classes.text}>
+        <Trans>Save this browser for next time?</Trans>
+      </Typography>
+      <div className={classes.buttonWrapper}>
+        <Button
+          className={classes.button}
+          variant="primary"
+          size="large"
+          onClick={onSave}
+          loading={isAccepted}
+          disabled={isAccepted || isDenied}
+        >
+          <Trans>Yes, save it</Trans>
+        </Button>
+        <Button
+          className={classes.button}
+          variant="primary"
+          size="large"
+          onClick={onDeny}
+          loading={isDenied}
+          disabled={isAccepted || isDenied}
+        >
+          <Trans>No thanks</Trans>
+        </Button>
+      </div>
+    </div>
   )
 }
 
diff --git a/packages/files-ui/src/Components/Pages/LoginPage.tsx b/packages/files-ui/src/Components/Pages/LoginPage.tsx
index 2d32b9f733..3695ac5168 100644
--- a/packages/files-ui/src/Components/Pages/LoginPage.tsx
+++ b/packages/files-ui/src/Components/Pages/LoginPage.tsx
@@ -103,29 +103,65 @@ const useStyles = makeStyles(
         }
       },
       inner: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        flex: "1 1 0",
         position: "absolute",
         top: "50%",
         left: "50%",
         transform: "translate(-50%, -50%)",
-        zIndex: zIndex?.layer1
+        zIndex: zIndex?.layer1,
+        backgroundColor: constants.landing.background,
+        border: `1px solid ${constants.landing.border}`,
+        boxShadow: constants.landing.boxShadow,
+        borderRadius: 6,
+        [breakpoints.up("md")]:{
+          minHeight: "64vh",
+          justifyContent: "space-between",
+          width: 440
+        },
+        [breakpoints.down("md")]: {
+          padding: `${constants.generalUnit * 4}px ${constants.generalUnit * 2}px`,
+          justifyContent: "center",
+          width: `calc(100vw - ${constants.generalUnit * 2}px)`
+        }
       }
     })
 )
 
-const LoginPage = () => {
-  const classes = useStyles()
-  const { themeKey } = useThemeSwitcher()
+const Content = () => {
   const { isMasterPasswordSet } = useImployApi()
-  const {
-    keyDetails,
-    isNewDevice,
-    shouldInitializeAccount
-  } = useThresholdKey()
+  const { keyDetails, isNewDevice, shouldInitializeAccount } = useThresholdKey()
+  const shouldSaveNewDevice = !!keyDetails && isNewDevice && keyDetails.requiredShares <= 0
+  const areSharesMissing = !!keyDetails && keyDetails.requiredShares > 0
 
-  const shouldSaveNewDevice =
-    !!keyDetails && keyDetails.requiredShares <= 0 && isNewDevice
+  if (!keyDetails) {
+    return <InitialScreen />
+  }
 
-  const areSharesMissing = !!keyDetails && keyDetails.requiredShares > 0
+  if (areSharesMissing) {
+    return <MissingShares />
+  }
+
+  if (shouldInitializeAccount){
+    return (
+      isMasterPasswordSet
+        ? <MigrateAccount />
+        : <InitializeAccount />
+    )
+  }
+
+  if (shouldSaveNewDevice) {
+    return <SaveNewDevice />
+  }
+
+  return null
+}
+
+const LoginPage = () => {
+  const classes = useStyles()
+  const { themeKey } = useThemeSwitcher()
 
   return (
     <div className={classes.root}>
@@ -162,11 +198,7 @@ const LoginPage = () => {
         </Typography>
       </a>
       <div className={classes.inner}>
-        {!keyDetails && <InitialScreen />}
-        {!!keyDetails && areSharesMissing && <MissingShares />}
-        {!!keyDetails && !areSharesMissing && shouldInitializeAccount && !isMasterPasswordSet && <InitializeAccount />}
-        {!!keyDetails && !areSharesMissing && shouldInitializeAccount && isMasterPasswordSet && <MigrateAccount />}
-        {!!keyDetails && shouldSaveNewDevice && <SaveNewDevice />}
+        <Content />
       </div>
     </div>
   )
diff --git a/packages/files-ui/src/Contexts/ThresholdKeyContext.tsx b/packages/files-ui/src/Contexts/ThresholdKeyContext.tsx
index 10516ae122..4cbbf75f57 100644
--- a/packages/files-ui/src/Contexts/ThresholdKeyContext.tsx
+++ b/packages/files-ui/src/Contexts/ThresholdKeyContext.tsx
@@ -1,20 +1,11 @@
 import React, { useState, useEffect } from "react"
-import DirectAuthSdk, {
-  LOGIN_TYPE,
-  TorusLoginResponse
-} from "@toruslabs/torus-direct-web-sdk"
+import DirectAuthSdk, { LOGIN_TYPE, TorusLoginResponse } from "@toruslabs/torus-direct-web-sdk"
 import ThresholdKey from "@tkey/default"
 import WebStorageModule, { WEB_STORAGE_MODULE_NAME } from "@tkey/web-storage"
-import SecurityQuestionsModule, {
-  SECURITY_QUESTIONS_MODULE_NAME
-} from "@tkey/security-questions"
+import SecurityQuestionsModule, { SECURITY_QUESTIONS_MODULE_NAME } from "@tkey/security-questions"
 import { KeyDetails, ShareStore, getPubKeyEC } from "@tkey/common-types"
-import ShareTransferModule, {
-  SHARE_TRANSFER_MODULE_NAME
-} from "@tkey/share-transfer"
-import ShareSerializationModule, {
-  SHARE_SERIALIZATION_MODULE_NAME
-} from "@tkey/share-serialization"
+import ShareTransferModule, { SHARE_TRANSFER_MODULE_NAME } from "@tkey/share-transfer"
+import ShareSerializationModule, { SHARE_SERIALIZATION_MODULE_NAME } from "@tkey/share-serialization"
 import { ServiceProviderBase } from "@tkey/service-provider-base"
 import { TorusStorageLayer } from "@tkey/storage-layer-torus"
 import bowser from "bowser"
@@ -44,7 +35,7 @@ export type TThresholdKeyContext = {
   addPasswordShare(password: string): Promise<void>
   inputPasswordShare(password: string): Promise<void>
   inputMnemonicShare(mnemonic: string): Promise<void>
-  addNewDeviceShareAndSave(useFileStorage: boolean): Promise<void>
+  addNewDeviceShareAndSave(): Promise<void>
   approveShareTransferRequest(encPubKeyX: string): Promise<void>
   rejectShareTransferRequest(encPubKeyX: string): Promise<void>
   clearShareTransferRequests(): Promise<void>
@@ -70,16 +61,9 @@ export type ShareTransferRequest = {
   userAgent: string
 }
 
-const ThresholdKeyContext = React.createContext<
-  TThresholdKeyContext | undefined
->(undefined)
+const ThresholdKeyContext = React.createContext<TThresholdKeyContext | undefined>(undefined)
 
-const ThresholdKeyProvider = ({
-  children,
-  network = "mainnet",
-  enableLogging = false,
-  apiKey
-}: ThresholdKeyProviderProps) => {
+const ThresholdKeyProvider = ({ children, network = "mainnet", enableLogging = false, apiKey }: ThresholdKeyProviderProps) => {
   const { imployApiClient, thresholdKeyLogin, logout } = useImployApi()
   const { provider, isReady, checkIsReady, address } = useWeb3()
   const [userInfo, setUserInfo] = useState<TorusLoginResponse | undefined>()
@@ -88,15 +72,8 @@ const ThresholdKeyProvider = ({
   const [isNewDevice, setIsNewDevice] = useState<boolean>(false)
   const [isNewKey, setIsNewKey] = useState<boolean>(false)
   const [publicKey, setPublicKey] = useState<string | undefined>()
-  const [
-    shouldInitializeAccount,
-    setShouldInitializeAccount
-  ] = useState<boolean>(false)
-  const [
-    pendingShareTransferRequests,
-    setPendingShareTransferRequests
-  ] = useState<ShareTransferRequest[]>([])
-
+  const [shouldInitializeAccount,setShouldInitializeAccount] = useState<boolean>(false)
+  const [pendingShareTransferRequests, setPendingShareTransferRequests] = useState<ShareTransferRequest[]>([])
   const [privateKey, setPrivateKey] = useState<string | undefined>()
 
   // Initialize Threshold Key and DirectAuth
@@ -105,36 +82,24 @@ const ThresholdKeyProvider = ({
       const tkeySerialized = sessionStorage.getItem(TKEY_STORE_KEY)
       const postboxKey = sessionStorage.getItem(TORUS_POSTBOX_KEY)
       const cachedUserInfo = sessionStorage.getItem(TORUS_USERINFO_KEY)
+      const modules = {
+        [SECURITY_QUESTIONS_MODULE_NAME]: new SecurityQuestionsModule(),
+        [WEB_STORAGE_MODULE_NAME]: new WebStorageModule(),
+        [SHARE_TRANSFER_MODULE_NAME]: new ShareTransferModule(),
+        [SHARE_SERIALIZATION_MODULE_NAME]: new ShareSerializationModule()
+      }
       let tkey: ThresholdKey
 
       // If Session storage contains all the data necessary to recreate the TKey object
       if (postboxKey && tkeySerialized && cachedUserInfo) {
-        const modules = {
-          [SECURITY_QUESTIONS_MODULE_NAME]: new SecurityQuestionsModule(),
-          [WEB_STORAGE_MODULE_NAME]: new WebStorageModule(),
-          [SHARE_TRANSFER_MODULE_NAME]: new ShareTransferModule(),
-          [SHARE_SERIALIZATION_MODULE_NAME]: new ShareSerializationModule()
-        }
         const tKeyJson = JSON.parse(tkeySerialized)
-        const serviceProvider = new ServiceProviderBase({
-          enableLogging,
-          postboxKey
-        })
-        const storageLayer = new TorusStorageLayer({
-          serviceProvider,
-          enableLogging,
-          hostUrl: "https://metadata.tor.us"
-        })
-        tkey = await ThresholdKey.fromJSON(tKeyJson, {
-          modules,
-          serviceProvider,
-          storageLayer
-        })
+        const serviceProvider = new ServiceProviderBase({ enableLogging, postboxKey })
+        const storageLayer = new TorusStorageLayer({ serviceProvider, enableLogging,hostUrl: "https://metadata.tor.us" })
+        tkey = await ThresholdKey.fromJSON(tKeyJson, { modules, serviceProvider, storageLayer })
+        
         if (tKeyJson.modules) {
           if (tKeyJson.modules[WEB_STORAGE_MODULE_NAME])
-            (tkey.modules[
-              WEB_STORAGE_MODULE_NAME
-            ] as WebStorageModule).canUseFileStorage =
+            (tkey.modules[WEB_STORAGE_MODULE_NAME] as WebStorageModule).canUseFileStorage =
               tKeyJson.modules[WEB_STORAGE_MODULE_NAME].canUseFileStorage
 
           if (tkey.modules[SHARE_TRANSFER_MODULE_NAME])
@@ -149,12 +114,7 @@ const ThresholdKeyProvider = ({
         // If no session storage is available, instantiate a new Threshold key
         // The user will be required to log in to the respective service 
         tkey = new ThresholdKey({
-          modules: {
-            [SECURITY_QUESTIONS_MODULE_NAME]: new SecurityQuestionsModule(),
-            [WEB_STORAGE_MODULE_NAME]: new WebStorageModule(true),
-            [SHARE_TRANSFER_MODULE_NAME]: new ShareTransferModule(),
-            [SHARE_SERIALIZATION_MODULE_NAME]: new ShareSerializationModule()
-          },
+          modules,
           directParams: {
             baseUrl: `${window.location.origin}/serviceworker`,
             network: network,
@@ -212,9 +172,7 @@ const ThresholdKeyProvider = ({
           return
         }
       }
-      const shareTransferModule = TKeySdk?.modules[
-        SHARE_TRANSFER_MODULE_NAME
-      ] as ShareTransferModule
+      const shareTransferModule = TKeySdk?.modules[SHARE_TRANSFER_MODULE_NAME] as ShareTransferModule
       await shareTransferModule.cancelRequestStatusCheck()
       if (shareTransferModule.currentEncKey) {
         const pubKeyEC = getPubKeyEC(shareTransferModule.currentEncKey)
@@ -260,17 +218,13 @@ const ThresholdKeyProvider = ({
   useEffect(() => {
     const handler = async () => {
       if (TKeySdk) {
-        const shareTransferModule = TKeySdk.modules[
-          SHARE_TRANSFER_MODULE_NAME
-        ] as ShareTransferModule
-
+        const shareTransferModule = TKeySdk.modules[SHARE_TRANSFER_MODULE_NAME] as ShareTransferModule
         const latestShareTransferStore = await shareTransferModule.getShareTransferStore()
 
         const pendingRequests = Object.keys(latestShareTransferStore).reduce(
           (acc: Array<ShareTransferRequest>, x) => {
-            const browserDetail = bowser.parse(
-              latestShareTransferStore[x].userAgent
-            )
+            const browserDetail = bowser.parse(latestShareTransferStore[x].userAgent)
+
             if (!latestShareTransferStore[x].encShareInTransit)
               acc.push({
                 ...latestShareTransferStore[x],
@@ -300,21 +254,13 @@ const ThresholdKeyProvider = ({
     const handler = async () => {
       if (!TKeySdk) return
       // Generate share transfer request
-      const shareTransferModule = TKeySdk.modules[
-        SHARE_TRANSFER_MODULE_NAME
-      ] as ShareTransferModule
+      const shareTransferModule = TKeySdk.modules[SHARE_TRANSFER_MODULE_NAME] as ShareTransferModule
       console.log("Creating a Share Transfer request")
-      const currentEncPubKeyX = await shareTransferModule.requestNewShare(
-        window.navigator.userAgent,
-        TKeySdk.getCurrentShareIndexes()
-      )
-      console.log(
-        "Share transfer request created. Starting request status poller"
-      )
+      const currentEncPubKeyX = await shareTransferModule.requestNewShare(window.navigator.userAgent, TKeySdk.getCurrentShareIndexes())
+      console.log("Share transfer request created. Starting request status poller")
 
       await shareTransferModule.startRequestStatusCheck(currentEncPubKeyX, true)
       const resultKey = await TKeySdk.getKeyDetails()
-      console.log(resultKey)
       setKeyDetails(resultKey)
     }
 
@@ -366,9 +312,7 @@ const ThresholdKeyProvider = ({
           if (!connected || !address) break
         }
 
-        const { token } = await imployApiClient.getIdentityWeb3Token(
-          address
-        )
+        const { token } = await imployApiClient.getIdentityWeb3Token(address)
 
         if (token) {
           const signature = await signMessage(token, provider.getSigner())
@@ -416,46 +360,39 @@ const ThresholdKeyProvider = ({
       console.error(error)
       throw error
     }
-    sessionStorage.setItem(
-      TORUS_POSTBOX_KEY,
-      TKeySdk.serviceProvider.postboxKey.toString("hex")
-    )
+
+    sessionStorage.setItem(TORUS_POSTBOX_KEY, TKeySdk.serviceProvider.postboxKey.toString("hex"))
+    
     try {
       const metadata = await TKeySdk.storageLayer.getMetadata<ShareStore | {message: string}>({
         privKey: TKeySdk.serviceProvider.postboxKey
       })
-      console.log(metadata)
-      const isNewKey = (metadata as {message: string}).message === "KEY_NOT_FOUND"
-      if (isNewKey) {
+      console.log("metadata", metadata)
+      const keyNotFound = (metadata as {message: string}).message === "KEY_NOT_FOUND"
+      if (keyNotFound) {
         console.log("New key")
         setIsNewKey(true)
         setShouldInitializeAccount(true)
         await TKeySdk.initialize()
         const resultKey = await TKeySdk.getKeyDetails()
-        console.log(resultKey)
         setKeyDetails(resultKey)
         const { privKey } = await TKeySdk.reconstructKey(false)
-        console.log(privKey)
+        console.log("privKey", privKey)
       } else {
         console.log("Existing key")
         await TKeySdk.initialize({ input: metadata as ShareStore })
         try {
           console.log("Trying to load device share")
-          const storageModule = TKeySdk.modules[
-            WEB_STORAGE_MODULE_NAME
-          ] as WebStorageModule
+          const storageModule = TKeySdk.modules[WEB_STORAGE_MODULE_NAME] as WebStorageModule
           await storageModule.inputShareFromWebStorage()
         } catch (error) {
-          console.log(
-            "Error loading device share. If this is a new device please add it using one of your other recovery shares."
-          )
+          console.error("Error loading device share. If this is a new device please add it using one of your other recovery shares.")
           setIsNewDevice(true)
         }
         const resultKey = await TKeySdk.getKeyDetails()
         if (resultKey.threshold === resultKey.totalShares) {
           setShouldInitializeAccount(true)
         }
-        console.log(resultKey)
         setKeyDetails(resultKey)
       }
     } catch (error) {
@@ -466,43 +403,48 @@ const ThresholdKeyProvider = ({
 
   const addPasswordShare = async (password: string) => {
     if (!TKeySdk) return
-    const securityQuestionModule = TKeySdk.modules[
-      SECURITY_QUESTIONS_MODULE_NAME
-    ] as SecurityQuestionsModule
-    await securityQuestionModule.generateNewShareWithSecurityQuestions(
-      password,
-      "What is your password?"
-    )
-    const keyDetails = await TKeySdk.getKeyDetails()
-    setKeyDetails(keyDetails)
+
+    try {
+      const securityQuestionModule = TKeySdk.modules[SECURITY_QUESTIONS_MODULE_NAME] as SecurityQuestionsModule
+      await securityQuestionModule.generateNewShareWithSecurityQuestions(
+        password,
+        "What is your password?"
+      )
+      const keyDetails = await TKeySdk.getKeyDetails()
+      setKeyDetails(keyDetails)
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   const addMnemonicShare = async () => {
     if (!TKeySdk) return Promise.reject("No TKey SDK")
-    const shareCreated = await TKeySdk.generateNewShare()
-    const requiredShareStore =
-      shareCreated.newShareStores[shareCreated.newShareIndex.toString("hex")]
-    const shareSerializationModule = (await TKeySdk.modules[
-      SHARE_SERIALIZATION_MODULE_NAME
-    ]) as ShareSerializationModule
-    const result = (await shareSerializationModule.serialize(
-      requiredShareStore.share.share,
-      "mnemonic"
-    )) as string
-    const keyDetails = await TKeySdk.getKeyDetails()
-    setKeyDetails(keyDetails)
-    return result
+
+    try {
+      const shareCreated = await TKeySdk.generateNewShare()
+      const requiredShareStore = shareCreated.newShareStores[shareCreated.newShareIndex.toString("hex")]
+      const shareSerializationModule = (await TKeySdk.modules[SHARE_SERIALIZATION_MODULE_NAME]) as ShareSerializationModule
+      const result = (await shareSerializationModule.serialize(
+        requiredShareStore.share.share,
+        "mnemonic"
+      )) as string
+      const keyDetails = await TKeySdk.getKeyDetails()
+      setKeyDetails(keyDetails)
+      return result
+    } catch (e) {
+      console.error(e)
+      return ""
+    }
   }
 
   const inputPasswordShare = async (password: string) => {
     if (!TKeySdk) return
-    const securityQuestionModule = TKeySdk.modules[
-      SECURITY_QUESTIONS_MODULE_NAME
-    ] as SecurityQuestionsModule
+
+    const securityQuestionModule = TKeySdk.modules[SECURITY_QUESTIONS_MODULE_NAME] as SecurityQuestionsModule
     try {
       await securityQuestionModule.inputShareFromSecurityQuestions(password)
     } catch (error) {
-      console.log("Invalid share password entered")
+      throw new Error("Invalid share password entered")
     }
     const keyDetails = await TKeySdk.getKeyDetails()
     setKeyDetails(keyDetails)
@@ -517,61 +459,65 @@ const ThresholdKeyProvider = ({
       const keyDetails = await TKeySdk.getKeyDetails()
       setKeyDetails(keyDetails)
     } catch (error) {
-      console.log("Invalid mnemonic entered")
+      throw new Error("Invalid mnemonic entered")
     }
   }
 
   const addNewDeviceShareAndSave = async () => {
     if (!TKeySdk) return
-    const storageModule = TKeySdk.modules[
-      WEB_STORAGE_MODULE_NAME
-    ] as WebStorageModule
-    await TKeySdk.updateMetadata()
-    const newDeviceShare = await TKeySdk.generateNewShare()
-    const newDeviceShareStore =
-      newDeviceShare.newShareStores[
-        newDeviceShare.newShareIndex.toString("hex")
-      ]
-
-    storageModule.storeDeviceShare(newDeviceShareStore)
-    storageModule.canUseFileStorage &&
-      storageModule.storeDeviceShareOnFileStorage(newDeviceShare.newShareIndex)
-    console.log("New device share added")
-    setIsNewDevice(false)
-    const newKeyDetails = await TKeySdk.getKeyDetails()
-    setKeyDetails(newKeyDetails)
+
+    try {
+      const storageModule = TKeySdk.modules[WEB_STORAGE_MODULE_NAME] as WebStorageModule
+      await TKeySdk.updateMetadata()
+      const newDeviceShare = await TKeySdk.generateNewShare()
+      const newDeviceShareStore = newDeviceShare.newShareStores[newDeviceShare.newShareIndex.toString("hex")]
+  
+      storageModule.storeDeviceShare(newDeviceShareStore)
+      console.log("New device share added")
+      setIsNewDevice(false)
+      const newKeyDetails = await TKeySdk.getKeyDetails()
+      setKeyDetails(newKeyDetails)
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   const approveShareTransferRequest = async (encPubKeyX: string) => {
     if (!TKeySdk) return
-
-    const shareTransferModule = TKeySdk.modules[
-      SHARE_TRANSFER_MODULE_NAME
-    ] as ShareTransferModule
-    await shareTransferModule.approveRequest(encPubKeyX)
-    await TKeySdk.syncShareMetadata()
-    const newKeyDetails = await TKeySdk.getKeyDetails()
-    setKeyDetails(newKeyDetails)
+    
+    try {
+      const shareTransferModule = TKeySdk.modules[SHARE_TRANSFER_MODULE_NAME] as ShareTransferModule
+      await shareTransferModule.approveRequest(encPubKeyX)
+      await TKeySdk.syncShareMetadata()
+      const newKeyDetails = await TKeySdk.getKeyDetails()
+      setKeyDetails(newKeyDetails)
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   const rejectShareTransferRequest = async (encPubKey: string) => {
     if (!TKeySdk) return
 
-    const shareTransferModule = TKeySdk.modules[
-      SHARE_TRANSFER_MODULE_NAME
-    ] as ShareTransferModule
-    await shareTransferModule.deleteShareTransferStore(encPubKey)
-    await TKeySdk.syncShareMetadata()
+    try {
+      const shareTransferModule = TKeySdk.modules[SHARE_TRANSFER_MODULE_NAME] as ShareTransferModule
+      await shareTransferModule.deleteShareTransferStore(encPubKey)
+      await TKeySdk.syncShareMetadata()
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   const clearShareTransferRequests = async () => {
     if (!TKeySdk) return
 
-    const shareTransferModule = TKeySdk.modules[
-      SHARE_TRANSFER_MODULE_NAME
-    ] as ShareTransferModule
-    await shareTransferModule.resetShareTransferStore()
-    await TKeySdk.syncShareMetadata()
+    try {
+      const shareTransferModule = TKeySdk.modules[SHARE_TRANSFER_MODULE_NAME] as ShareTransferModule
+      await shareTransferModule.resetShareTransferStore()
+      await TKeySdk.syncShareMetadata()
+    } catch (e) {
+      console.error(e)
+    }
   }
 
   const encryptForPublicKey = async (publicKey: string, message: string) => {
@@ -584,6 +530,7 @@ const ThresholdKeyProvider = ({
 
   const decryptMessageWithThresholdKey = async (message: string) => {
     if (!privateKey) return
+
     try {
       const messageCipher = EthCrypto.cipher.parse(message)
       return EthCrypto.decryptWithPrivateKey(privateKey, messageCipher)
@@ -599,6 +546,7 @@ const ThresholdKeyProvider = ({
     setKeyDetails(undefined)
     setPublicKey(undefined)
     setUserInfo(undefined)
+    clearShareTransferRequests()
 
     const tkey = new ThresholdKey({
       modules: {