From 5eb388bb3b6492f5f49e622bfd912f18a68fa52d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 19 Feb 2024 14:07:18 -0600
Subject: [PATCH] KeygenStep: simplify it, add a tooltip over "Next" button

---
 src/components/ui/tooltip/tooltip.tsx         |  8 ++++++-
 .../nostr-signin-modal/steps/keygen-step.tsx  | 24 +++++++++----------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/tooltip/tooltip.tsx b/src/components/ui/tooltip/tooltip.tsx
index 9c86b94be..08d270c5d 100644
--- a/src/components/ui/tooltip/tooltip.tsx
+++ b/src/components/ui/tooltip/tooltip.tsx
@@ -15,13 +15,15 @@ interface ITooltip {
   children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
   /** Text to display in the tooltip. */
   text: string;
+  /** If disabled, it will render the children without wrapping them. */
+  disabled?: boolean;
 }
 
 /**
  * Tooltip
  */
 const Tooltip: React.FC<ITooltip> = (props) => {
-  const { children, text } = props;
+  const { children, text, disabled = false } = props;
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -55,6 +57,10 @@ const Tooltip: React.FC<ITooltip> = (props) => {
     hover,
   ]);
 
+  if (disabled) {
+    return children;
+  }
+
   return (
     <>
       {React.cloneElement(children, {
diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/keygen-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/keygen-step.tsx
index 6e63f64e8..cb4fd34ac 100644
--- a/src/features/ui/components/modals/nostr-signin-modal/steps/keygen-step.tsx
+++ b/src/features/ui/components/modals/nostr-signin-modal/steps/keygen-step.tsx
@@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import CopyableInput from 'soapbox/components/copyable-input';
-import { Button, Stack, Modal, FormGroup } from 'soapbox/components/ui';
+import { Button, Stack, Modal, FormGroup, Text, Tooltip } from 'soapbox/components/ui';
 import { NKeys } from 'soapbox/features/nostr/keys';
 import { useInstance } from 'soapbox/hooks';
 import { download } from 'soapbox/utils/download';
@@ -44,7 +44,7 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
 
   return (
     <Modal title={<FormattedMessage id='nostr_signin.keygen.title' defaultMessage='Your new key' />} onClose={onClose}>
-      <Stack className='my-3' space={6}>
+      <Stack className='my-3' space={9}>
         <EmojiGraphic emoji='🔑' />
 
         <Stack alignItems='center'>
@@ -53,20 +53,20 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
           </Button>
         </Stack>
 
-        <Stack space={3}>
-          <FormGroup labelText='Public key'>
-            <CopyableInput value={npub} />
-          </FormGroup>
+        <FormGroup labelText='Secret key'>
+          <CopyableInput value={nsec} type='password' onCopy={handleCopy} />
+        </FormGroup>
 
-          <FormGroup labelText='Secret key'>
-            <CopyableInput value={nsec} type='password' onCopy={handleCopy} />
-          </FormGroup>
+        <Stack className='rounded-xl bg-gray-100 p-4 dark:bg-gray-800'>
+          <Text>Back up your secret key in a secure place. If lost, your account cannot be recovered. Never share your secret key with anyone.</Text>
         </Stack>
 
         <Stack alignItems='end'>
-          <Button className='mt-3' theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}>
-            Next
-          </Button>
+          <Tooltip text='Download your key to continue' disabled={downloaded}>
+            <Button theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}>
+              Next
+            </Button>
+          </Tooltip>
         </Stack>
       </Stack>
     </Modal>