WalletSettingsAuth

src/renderer/components/header/HeaderComponent.tsx

@@ -237,7 +237,7 @@ export const HeaderComponent: React.FC<Props> = (props): JSX.Element => {
   )
 
   const renderHeaderLock = useMemo(
-    () => <HeaderLock isDesktopView={isDesktopView} keystore={keystore} onPress={clickLockHandler} />,
+    () => <HeaderLock isDesktopView={isDesktopView} keystoreState={keystore} onPress={clickLockHandler} />,
     [isDesktopView, clickLockHandler, keystore]
   )
 

src/renderer/components/header/lock/HeaderLock.stories.tsx

@@ -12,11 +12,11 @@ const meta: ComponentMeta<typeof Component> = {
   component: Component,
   title: 'Components/HeaderLock',
   argTypes: {
-    keystore: AT.keystore,
+    keystoreState: AT.keystore,
     onPress: { action: 'onPress' }
   },
   args: {
-    keystore: O.none,
+    keystoreState: O.none,
     isDesktopView: false
   }
 }

src/renderer/components/header/lock/HeaderLock.tsx

@@ -7,21 +7,22 @@ import { useIntl } from 'react-intl'
 import { truncateMiddle } from '../../../helpers/stringHelper'
 import { KeystoreState } from '../../../services/wallet/types'
 import * as WU from '../../../services/wallet/util'
+import { Tooltip } from '../../uielements/common/Common.styles'
 import { HeaderIconWrapper } from '../HeaderIcon.styles'
 import * as Styled from './HeaderLock.styles'
 
 export type Props = {
-  keystore: KeystoreState
+  keystoreState: KeystoreState
   onPress?: FP.Lazy<void>
   isDesktopView: boolean
 }
 
 export const HeaderLock: React.FC<Props> = (props): JSX.Element => {
-  const { keystore, onPress = FP.constVoid, isDesktopView } = props
+  const { keystoreState, onPress = FP.constVoid, isDesktopView } = props
 
   const intl = useIntl()
 
-  const isLocked = useMemo(() => WU.isLocked(keystore), [keystore])
+  const isLocked = useMemo(() => WU.isLocked(keystoreState), [keystoreState])
 
   const clickHandler = useCallback((_: React.MouseEvent) => onPress(), [onPress])
 
@@ -32,32 +33,34 @@ export const HeaderLock: React.FC<Props> = (props): JSX.Element => {
         onClick={clickHandler}>
         <div className="">{isLocked ? <Styled.LockIcon /> : <Styled.UnlockIcon />}</div>
         {FP.pipe(
-          keystore,
+          keystoreState,
           WU.getWalletName,
           O.fold(
             () => <></>,
             (name) => (
-              <p
-                className="dark:text2d absolute -bottom-[6px] whitespace-nowrap
+              <Tooltip title={name}>
+                <p
+                  className="dark:text2d absolute -bottom-[6px] whitespace-nowrap
                 rounded-full bg-gray0 px-[8px] py-[3px]
-                  font-main text-[9px] leading-none
-                  text-text2 dark:bg-gray0d
-                  dark:text-text2d
-                  ">
-                {truncateMiddle(name, { start: 3, end: 3, max: 11 })}
-              </p>
+                font-main text-[9px] leading-none
+                text-text2 dark:bg-gray0d
+                dark:text-text2d
+                ">
+                  {truncateMiddle(name, { start: 3, end: 3, max: 11 })}
+                </p>
+              </Tooltip>
             )
           )
         )}
       </div>
     ),
-    [clickHandler, isLocked, keystore]
+    [clickHandler, isLocked, keystoreState]
   )
 
   const mobileView = useMemo(() => {
-    const notImported = !WU.hasImportedKeystore(keystore)
+    const notImported = !WU.hasImportedKeystore(keystoreState)
     const label = intl.formatMessage({
-      id: notImported ? 'wallet.imports.label' : isLocked ? 'wallet.unlock.label' : 'wallet.lock.label'
+      id: notImported ? 'wallet.add.label' : isLocked ? 'wallet.unlock.label' : 'wallet.lock.label'
     })
 
     return (
@@ -66,7 +69,7 @@ export const HeaderLock: React.FC<Props> = (props): JSX.Element => {
         {isLocked ? <Styled.LockIcon /> : <Styled.UnlockIcon />}
       </HeaderIconWrapper>
     )
-  }, [clickHandler, intl, isLocked, keystore])
+  }, [clickHandler, intl, isLocked, keystoreState])
 
   return isDesktopView ? desktopView : mobileView
 }

src/renderer/components/settings/UnlockWalletSettings.tsx

@@ -4,17 +4,20 @@ import { Collapse } from 'antd'
 import * as FP from 'fp-ts/lib/function'
 import { useIntl } from 'react-intl'
 
+import { KeystoreState } from '../../services/wallet/types'
+import { hasImportedKeystore, isLocked } from '../../services/wallet/util'
 import { FlatButton } from '../uielements/button'
 import * as Styled from './Common.styles'
 
 type Props = {
+  keystoreState: KeystoreState
   unlockHandler: FP.Lazy<void>
   collapsed: boolean
   toggleCollapse: FP.Lazy<void>
 }
 
 export const UnlockWalletSettings: React.FC<Props> = (props): JSX.Element => {
-  const { unlockHandler, collapsed, toggleCollapse } = props
+  const { keystoreState, unlockHandler, collapsed, toggleCollapse } = props
   const intl = useIntl()
 
   return (
@@ -34,8 +37,10 @@ export const UnlockWalletSettings: React.FC<Props> = (props): JSX.Element => {
           mb-20px
           flex min-h-[300px] items-center
           justify-center border-solid border-gray0 bg-bg1 dark:border-gray0d dark:bg-bg1d">
-            <FlatButton className="min-w[200px] my-30px px-30px" onClick={unlockHandler}>
-              {intl.formatMessage({ id: 'wallet.unlock.label' })}
+            <FlatButton className="my-30px min-w-[200px] px-30px" onClick={unlockHandler}>
+              {!hasImportedKeystore(keystoreState)
+                ? intl.formatMessage({ id: 'wallet.add.label' })
+                : isLocked(keystoreState) && intl.formatMessage({ id: 'wallet.unlock.label' })}
             </FlatButton>
           </div>
         </Collapse.Panel>

src/renderer/components/settings/WalletSettings.tsx

@@ -86,7 +86,7 @@ type Props = {
   addLedgerAddress: (chain: Chain, walletIndex: number) => void
   verifyLedgerAddress: (chain: Chain, walletIndex: number) => Promise<boolean>
   removeLedgerAddress: (chain: Chain) => void
-  keystore: KeystoreUnlocked
+  keystoreUnlocked: KeystoreUnlocked
   wallets: KeystoreWalletsUI
   clickAddressLinkHandler: (chain: Chain, address: Address) => void
   validatePassword$: ValidatePasswordHandler
@@ -110,7 +110,7 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
     addLedgerAddress,
     verifyLedgerAddress,
     removeLedgerAddress,
-    keystore: { phrase, name: walletName, id: walletId },
+    keystoreUnlocked: { phrase, name: walletName, id: walletId },
     wallets,
     clickAddressLinkHandler,
     validatePassword$,

src/renderer/components/swap/Swap.tsx

@@ -1683,7 +1683,7 @@ export const Swap = ({
                     </Styled.NoteLabel>
                     <FlatButton className="my-30px min-w-[200px]" size="large" onClick={importWalletHandler}>
                       {!hasImportedKeystore(keystore)
-                        ? intl.formatMessage({ id: 'wallet.imports.label' })
+                        ? intl.formatMessage({ id: 'wallet.add.label' })
                         : isLocked(keystore) && intl.formatMessage({ id: 'wallet.unlock.label' })}
                     </FlatButton>
                   </>

src/renderer/components/wallet/unlock/UnlockForm.tsx

@@ -217,7 +217,7 @@ export const UnlockForm: React.FC<Props> = (props): JSX.Element => {
                 wallets={wallets}
                 onChange={changeWalletHandler}
                 disabled={RD.isPending(changeWalletState)}
-                className="min-w-[100px]"
+                className="min-w-[200px]"
               />
               {renderChangeWalletError}
             </div>

src/renderer/i18n/de/wallet.ts

@@ -30,7 +30,6 @@ const wallet: WalletMessages = {
   'wallet.unlock.instruction': 'Bitte entsperre Deine Wallet',
   'wallet.unlock.password': 'Bitte gebe Dein Passwort ein',
   'wallet.unlock.error': 'Die Wallet konnte nicht entsperrt werden. Bitte überprüfe Dein Passwort und versuche es .',
-  'wallet.imports.label': 'Wallet importieren',
   'wallet.imports.keystore.select': 'Keystore-Datei auswählen',
   'wallet.imports.keystore.title': 'Bitte wähle die Keystore-Datei Deiner Wallet',
   'wallet.imports.phrase.title':
@@ -48,7 +47,7 @@ const wallet: WalletMessages = {
   'wallet.create.copy.phrase': 'Phrase kopieren',
   'wallet.create.error.phrase.empty': 'Erstelle eine neue Wallet und füge ein Guthaben hinzu',
   'wallet.add.another': 'Weitere Wallet hinzufügen',
-  'wallet.add.label': 'Hinzufügen',
+  'wallet.add.label': 'Wallet hinzufügen',
   'wallet.change.title': 'Wallet wechseln',
   'wallet.change.error': 'Error beim Wechseln der Wallet',
   'wallet.selected.title': 'Ausgwählte Wallet',

src/renderer/i18n/en/wallet.ts

@@ -30,7 +30,6 @@ const wallet: WalletMessages = {
   'wallet.unlock.instruction': 'Please unlock your wallet',
   'wallet.unlock.password': 'Enter your password',
   'wallet.unlock.error': 'Could not unlock the wallet. Please check you password and try it again',
-  'wallet.imports.label': 'Import wallet',
   'wallet.imports.keystore.select': 'Select keystore file',
   'wallet.imports.keystore.title': 'Please choose the keystore file of your wallet',
   'wallet.imports.phrase.title': 'Please enter the phrase of your wallet with a single space between the words',
@@ -47,7 +46,7 @@ const wallet: WalletMessages = {
   'wallet.create.copy.phrase': 'Copy phrase',
   'wallet.create.error.phrase.empty': 'Create a new wallet, add funds to it',
   'wallet.add.another': 'Add another wallet',
-  'wallet.add.label': 'Add',
+  'wallet.add.label': 'Add wallet',
   'wallet.change.title': 'Change wallet',
   'wallet.change.error': 'Error while changing a wallet',
   'wallet.selected.title': 'Selected wallet',

src/renderer/i18n/fr/wallet.ts

@@ -31,7 +31,6 @@ const wallet: WalletMessages = {
   'wallet.unlock.password': 'Entrez votre phrase de récupération',
   'wallet.unlock.error':
     'Impossible de déverrouiller le portefeuille. Veuillez vérifier votre mot de passe et réessayez',
-  'wallet.imports.label': 'Importer le portefeuille',
   'wallet.imports.keystore.select': 'Sélectionner le fichier keystore',
   'wallet.imports.keystore.title': 'Choisir le fichier à uploader',
   'wallet.imports.phrase.title': 'Veuillez entrer la phrase de récupération avec un seul espace entre les mots',
@@ -48,7 +47,7 @@ const wallet: WalletMessages = {
   'wallet.create.copy.phrase': 'Copiez la phrase ci-dessous',
   'wallet.create.error.phrase.empty': "Créez un nouveau portefeuille, et l'alimenter en fonds",
   'wallet.add.another': 'Add another wallet - FR',
-  'wallet.add.label': 'Add - FR',
+  'wallet.add.label': 'Add wallet - FR',
   'wallet.change.title': 'Change wallet - FR',
   'wallet.change.error': 'Error while changing a wallet - FR',
   'wallet.selected.title': 'Selected wallet - FR',

src/renderer/i18n/ru/wallet.ts

@@ -30,7 +30,6 @@ const wallet: WalletMessages = {
   'wallet.unlock.instruction': 'Пожалуйста разблокируйте ваш кошелек',
   'wallet.unlock.password': 'Введите ваш пароль',
   'wallet.unlock.error': 'Не получилось разблокировать кошелек. Пожалуйста, проверьте пароль и попробуйте еще раз',
-  'wallet.imports.label': 'импортировать кошелёк',
   'wallet.imports.phrase.title': 'Пожалуйста, введите фразу вашего кошелька с одинарным пробелом между словами',
   'wallet.imports.wallet': 'Импортировать существующий кошелек',
   'wallet.imports.keystore.select': 'Выберите keystore файл',
@@ -47,7 +46,7 @@ const wallet: WalletMessages = {
   'wallet.create.copy.phrase': 'Скопируйте фразу ниже',
   'wallet.create.error.phrase.empty': 'Создать новый кошелек с балансом',
   'wallet.add.another': 'Add another wallet - RU',
-  'wallet.add.label': 'Add - RU',
+  'wallet.add.label': 'Add wallet - RU',
   'wallet.change.title': 'Change wallet - RU',
   'wallet.change.error': 'Error while changing a wallet - RU',
   'wallet.selected.title': 'Selected wallet - RU',

src/renderer/i18n/types.ts

@@ -177,7 +177,6 @@ type WalletMessageKey =
   | 'wallet.unlock.title'
   | 'wallet.unlock.password'
   | 'wallet.unlock.error'
-  | 'wallet.imports.label'
   | 'wallet.imports.keystore.select'
   | 'wallet.imports.keystore.title'
   | 'wallet.imports.phrase.title'

src/renderer/views/ViewRoutes.tsx

@@ -26,7 +26,7 @@ import { SendView } from './wallet/send'
 import { UnlockView } from './wallet/UnlockView'
 import { UpgradeView } from './wallet/upgrade'
 import { WalletAuth } from './wallet/WalletAuth'
-import { WalletSettingsView } from './wallet/WalletSettingsView'
+import { WalletSettingsAuth } from './wallet/WalletSettingsAuth'
 
 export const ViewRoutes: React.FC<{}> = (): JSX.Element => {
   const location = useLocation()
@@ -127,7 +127,7 @@ export const ViewRoutes: React.FC<{}> = (): JSX.Element => {
         element={
           <>
             <AppSettingsView />
-            <WalletSettingsView />
+            <WalletSettingsAuth />
           </>
         }
       />

src/renderer/views/wallet/WalletSettingsAuth.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react'
+
+import * as FP from 'fp-ts/function'
+import * as O from 'fp-ts/lib/Option'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { UnlockWalletSettings } from '../../components/settings'
+import { useCollapsedSetting } from '../../hooks/useCollapsedSetting'
+import { useKeystoreState } from '../../hooks/useKeystoreState'
+import * as walletRoutes from '../../routes/wallet'
+import { isKeystoreUnlocked } from '../../services/wallet/types'
+import { WalletSettingsView } from './WalletSettingsView'
+
+export const WalletSettingsAuth: React.FC = (): JSX.Element => {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const { state: keystoreState } = useKeystoreState()
+
+  const { collapsed, toggle: toggleCollapse } = useCollapsedSetting('wallet')
+
+  const unlockWalletHandler = useCallback(() => {
+    navigate(walletRoutes.base.path(location.pathname))
+  }, [location.pathname, navigate])
+
+  return FP.pipe(
+    keystoreState,
+    // Get unlocked state only
+    O.chain(FP.flow(O.fromPredicate(isKeystoreUnlocked))),
+    O.fold(
+      // keystore locked / not imported
+      () => (
+        <UnlockWalletSettings
+          keystoreState={keystoreState}
+          unlockHandler={unlockWalletHandler}
+          collapsed={collapsed}
+          toggleCollapse={toggleCollapse}
+        />
+      ),
+      // keystore unlocked
+      (keystoreUnlocked) => <WalletSettingsView keystoreUnlocked={keystoreUnlocked} />
+    )
+  )
+}