From 1013fdde33144c6d14ac28be77ae49e7cd0b3098 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Tue, 2 Jul 2024 11:02:15 -0400
Subject: [PATCH] fix: refine recovery phrase ux

---
 .changeset/nine-clouds-change.md             | 7 +++++++
 hostd/renderer/components/SeedField.tsx      | 5 +++--
 hostd/renderer/contexts/config/fields.tsx    | 2 +-
 hostd/renderer/contexts/config/index.tsx     | 1 -
 hostd/renderer/contexts/config/useForm.tsx   | 2 +-
 renterd/renderer/components/SeedField.tsx    | 5 +++--
 renterd/renderer/contexts/config/fields.tsx  | 2 +-
 renterd/renderer/contexts/config/index.tsx   | 1 -
 renterd/renderer/contexts/config/useForm.tsx | 2 +-
 walletd/renderer/contexts/config/index.tsx   | 1 -
 10 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/nine-clouds-change.md

diff --git a/.changeset/nine-clouds-change.md b/.changeset/nine-clouds-change.md
new file mode 100644
index 0000000..6295c26
--- /dev/null
+++ 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
index f21f7d5..a0eebdd 100644
--- 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
index 0b81802..90d16dd 100644
--- 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
index f14ed72..8c241d1 100644
--- 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
index 878b37f..59ac91c 100644
--- 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
index f21f7d5..a0eebdd 100644
--- 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
index 49a405d..5968e32 100644
--- 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
index f14ed72..8c241d1 100644
--- 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
index d6a7e30..7a7119b 100644
--- 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
index 182a2d7..bc0cf3f 100644
--- 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,