frontend: show/hide mnemonics in settings

seed-hypermedia · Jun 26, 2024 · 029fb6e · 029fb6e
1 parent 5a8cbd5
commit 029fb6e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 39 deletions.
diff --git a/frontend/apps/desktop/src/models/daemon.ts b/frontend/apps/desktop/src/models/daemon.ts
@@ -2,6 +2,7 @@ import {useGRPCClient} from '@/app-context'
 import {useQuery} from '@tanstack/react-query'
 import {queryKeys} from './query-keys'
 
+import {trpc} from '@/trpc'
 import {
   GenMnemonicResponse,
   GRPCClient,
@@ -116,3 +117,9 @@ export function useDeleteKey(
     ...opts,
   })
 }
+
+export function useSavedMnemonics(key?: string) {
+  return trpc.secureStorage.read.useQuery('main', {enabled: !!key}).data as
+    | Array<string>
+    | undefined
+}
diff --git a/frontend/apps/desktop/src/models/query-keys.ts b/frontend/apps/desktop/src/models/query-keys.ts
@@ -1,7 +1,7 @@
 // this file exists so you know what may need to be invalidated from the cache when you make changes.
 
-import {abbreviateCid} from '@shm/shared'
-import {QueryKey} from '@tanstack/react-query'
+import { abbreviateCid } from '@shm/shared'
+import { QueryKey } from '@tanstack/react-query'
 
 export const queryKeys = {
   // Organized by the model file that is responsible for querying + mutating the keys
@@ -19,6 +19,7 @@ export const queryKeys = {
   KEYS_LIST: 'KEYS_LIST',
   KEYS_GET: 'KEYS_GET',
   GENERATE_MNEMONIC: 'GENERATE_MNEMONIC',
+  SAVED_MNEMONICS: 'SAVED_MNEMONICS',
 
   // networking
   GET_PEERS: 'GET_PEERS', // , filterConnected: boolean

diff --git a/frontend/apps/desktop/src/pages/settings.tsx b/frontend/apps/desktop/src/pages/settings.tsx
@@ -4,7 +4,7 @@ import {useEditProfileDialog} from '@/components/edit-profile-dialog'
 import appError from '@/errors'
 import {useMyAccount} from '@/models/accounts'
 import {useAutoUpdatePreference} from '@/models/app-settings'
-import {useDaemonInfo, useDeleteKey} from '@/models/daemon'
+import {useDaemonInfo, useDeleteKey, useSavedMnemonics} from '@/models/daemon'
 import {useExperiments, useWriteExperiments} from '@/models/experiments'
 import {
   useGatewayUrl,
@@ -55,6 +55,7 @@ import {
   Tabs,
   TabsContentProps,
   TabsProps,
+  TextArea,
   Tooltip,
   View,
   XGroup,
@@ -67,6 +68,8 @@ import {
   Biohazard,
   Bitcoin,
   Code2,
+  Eye,
+  EyeOff,
   Info,
   Minus,
   Plus,
@@ -355,6 +358,9 @@ function AccountKeys() {
     return keys?.find((key) => key.name == selectedAccount)
   }, [selectedAccount])
 
+  const mnemonics = useSavedMnemonics(account?.name)
+  const [showWords, setShowWords] = useState<boolean>(false)
+
   return (
     <XStack style={{flex: 1, height: '100%'}} gap="$4">
       <YStack f={1} borderColor="$color7" borderWidth={1}>
@@ -433,46 +439,37 @@ function AccountKeys() {
         </XStack>
       </YStack>
       <YStack f={3} borderColor="$color7" borderWidth={1}>
+        {mnemonics ? (
+          <XStack gap="$3">
+            <TextArea
+              f={1}
+              disabled
+              value={
+                showWords
+                  ? mnemonics.join(', ')
+                  : '**** **** **** **** **** **** **** **** **** **** **** ****'
+              }
+            />
+            <Button
+              size="$2"
+              icon={showWords ? EyeOff : Eye}
+              onPress={() => setShowWords((v) => !v)}
+            />
+            <Button
+              size="$2"
+              icon={Copy}
+              onPress={() => {
+                copyTextToClipboard(mnemonics.join(', '))
+                toast.success('Copied to clipboard')
+              }}
+            />
+          </XStack>
+        ) : null}
+
         {/* <SizableText>{JSON.stringify(account, null, 4)}</SizableText> */}
       </YStack>
     </XStack>
   )
-  return (
-    <YStack gap="$3">
-      {!keys || keys.length === 0 ? (
-        <>
-          <Button onPress={() => dispatchWizardEvent(true)}>
-            Create a new account
-          </Button>
-        </>
-      ) : (
-        <XStack>
-          <YStack as="table" minWidth={200}>
-            <tbody>
-              {keys?.length
-                ? keys.map((k) => (
-                    <tr>
-                      <XStack
-                        as="td"
-                        bg={
-                          selectedAccount == k.name ? '$blue5' : 'transparent'
-                        }
-                        onClick={() => {
-                          setSelectedAccount(k.name)
-                        }}
-                      >
-                        {k.name}
-                      </XStack>
-                    </tr>
-                  ))
-                : null}
-            </tbody>
-          </YStack>
-          <YStack f={1}>{JSON.stringify(account, null, 4)}</YStack>
-        </XStack>
-      )}
-    </YStack>
-  )
 }
 
 function DevicesInfo() {