fix: refine recovery phrase ux

SiaFoundation · Jul 3, 2024 · 1013fdd · 1013fdd
1 parent f75e2e7
commit 1013fdd
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 11 deletions.
diff --git a/.changeset/nine-clouds-change.md b/.changeset/nine-clouds-change.md
@@ -0,0 +1,7 @@
+---
+'renterd': minor
+'walletd': minor
+'hostd': minor
+---
+
+The user experience around recovery phrase generation and re-generation has been refined.
diff --git a/hostd/renderer/components/SeedField.tsx b/hostd/renderer/components/SeedField.tsx
@@ -7,6 +7,7 @@ import { SeedLayout } from './SeedLayout'
 
 export function SeedField() {
   const { form, fields, regenerateMnemonic, copySeed } = useConfig()
+  const mnemonic = form.watch('mnemonic')
   return (
     <SeedLayout
       icon={<SeedIcon />}
@@ -26,9 +27,9 @@ export function SeedField() {
         <div className="flex gap-2">
           <Button className="flex-1" onClick={regenerateMnemonic}>
             <Redo16 />
-            Regenerate
+            {mnemonic ? 'Regenerate' : 'Generate'}
           </Button>
-          <Button className="flex-1" onClick={copySeed}>
+          <Button disabled={!mnemonic} className="flex-1" onClick={copySeed}>
             <Copy16 />
             Copy to clipboard
           </Button>

diff --git a/hostd/renderer/contexts/config/fields.tsx b/hostd/renderer/contexts/config/fields.tsx
@@ -71,7 +71,7 @@ export function getFields({
         event.currentTarget.select()
       },
       placeholder:
-        'tent small dress shop wealth fantasy wave mobile hint faith skirt derive',
+        'Example: tent small dress shop wealth fantasy wave mobile hint faith skirt derive',
       validation: {
         required: 'required',
         validate: {

diff --git a/hostd/renderer/contexts/config/index.tsx b/hostd/renderer/contexts/config/index.tsx
@@ -9,7 +9,6 @@ import {
 } from 'react'
 import {
   triggerErrorToast,
-  useOnInvalid,
   useFormInit,
   useFormServerSynced,
   useFormChangeCount,

diff --git a/hostd/renderer/contexts/config/useForm.tsx b/hostd/renderer/contexts/config/useForm.tsx
@@ -46,7 +46,7 @@ export function useForm({ resources }: { resources?: Resources }) {
   }, [setShowHttpPassword])
 
   const copySeed = useCallback(() => {
-    copyToClipboard(mnemonic, 'seed')
+    copyToClipboard(mnemonic, 'recovery phrase')
     form.setValue('hasCopied', true, {
       shouldDirty: true,
       shouldTouch: true,

diff --git a/renterd/renderer/components/SeedField.tsx b/renterd/renderer/components/SeedField.tsx
@@ -7,6 +7,7 @@ import { SeedLayout } from './SeedLayout'
 
 export function SeedField() {
   const { form, fields, regenerateMnemonic, copySeed } = useConfig()
+  const mnemonic = form.watch('mnemonic')
   return (
     <SeedLayout
       icon={<SeedIcon />}
@@ -26,9 +27,9 @@ export function SeedField() {
         <div className="flex gap-2">
           <Button className="flex-1" onClick={regenerateMnemonic}>
             <Redo16 />
-            Regenerate
+            {mnemonic ? 'Regenerate' : 'Generate'}
           </Button>
-          <Button className="flex-1" onClick={copySeed}>
+          <Button disabled={!mnemonic} className="flex-1" onClick={copySeed}>
             <Copy16 />
             Copy to clipboard
           </Button>

diff --git a/renterd/renderer/contexts/config/fields.tsx b/renterd/renderer/contexts/config/fields.tsx
@@ -64,7 +64,7 @@ export function getFields({
         event.currentTarget.select()
       },
       placeholder:
-        'tent small dress shop wealth fantasy wave mobile hint faith skirt derive',
+        'Example: tent small dress shop wealth fantasy wave mobile hint faith skirt derive',
       validation: {
         required: 'required',
         validate: {

diff --git a/renterd/renderer/contexts/config/index.tsx b/renterd/renderer/contexts/config/index.tsx
@@ -9,7 +9,6 @@ import {
 } from 'react'
 import {
   triggerErrorToast,
-  useOnInvalid,
   useFormInit,
   useFormServerSynced,
   useFormChangeCount,

diff --git a/renterd/renderer/contexts/config/useForm.tsx b/renterd/renderer/contexts/config/useForm.tsx
@@ -46,7 +46,7 @@ export function useForm({ resources }: { resources?: Resources }) {
   }, [setShowHttpPassword])
 
   const copySeed = useCallback(() => {
-    copyToClipboard(mnemonic, 'seed')
+    copyToClipboard(mnemonic, 'recovery phrase')
     form.setValue('hasCopied', true, {
       shouldDirty: true,
       shouldTouch: true,

diff --git a/walletd/renderer/contexts/config/index.tsx b/walletd/renderer/contexts/config/index.tsx
@@ -3,7 +3,6 @@
 import { createContext, useCallback, useContext, useMemo } from 'react'
 import {
   triggerErrorToast,
-  useOnInvalid,
   useFormInit,
   useFormServerSynced,
   useFormChangeCount,