secure privkey

src/app/auth/import/step-1.tsx

@@ -8,16 +8,18 @@ import { createAccount } from '@libs/storage';
 
 import { LoaderIcon } from '@shared/icons';
 
+import { useOnboarding } from '@stores/onboarding';
+
 type FormValues = {
-  key: string;
+  privkey: string;
 };
 
 const resolver: Resolver<FormValues> = async (values) => {
   return {
-    values: values.key ? values : {},
-    errors: !values.key
+    values: values.privkey ? values : {},
+    errors: !values.privkey
       ? {
-          key: {
+          privkey: {
             type: 'required',
             message: 'This is required.',
           },
@@ -27,16 +29,25 @@ const resolver: Resolver<FormValues> = async (values) => {
 };
 
 export function ImportStep1Screen() {
-  const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
+  const [setPubkey, setPrivkey] = useOnboarding((state) => [
+    state.setPubkey,
+    state.setPrivkey,
+  ]);
   const [loading, setLoading] = useState(false);
 
   const account = useMutation({
-    mutationFn: (data: any) => {
-      return createAccount(data.npub, data.pubkey, data.privkey, null, 1);
+    mutationFn: (data: {
+      npub: string;
+      pubkey: string;
+      follows: null | string[];
+      is_active: number | boolean;
+    }) => {
+      return createAccount(data.npub, data.pubkey, null, 1);
     },
-    onSuccess: (data: any) => {
+    onSuccess: (data) => {
       queryClient.setQueryData(['currentAccount'], data);
     },
   });
@@ -48,24 +59,27 @@ export function ImportStep1Screen() {
     formState: { errors, isDirty, isValid },
   } = useForm<FormValues>({ resolver });
 
-  const onSubmit = async (data: any) => {
+  const onSubmit = async (data: { [x: string]: string }) => {
     try {
       setLoading(true);
 
-      let privkey = data['key'];
+      let privkey = data['privkey'];
       if (privkey.substring(0, 4) === 'nsec') {
-        privkey = nip19.decode(privkey).data;
+        privkey = nip19.decode(privkey).data as string;
       }
 
       if (typeof getPublicKey(privkey) === 'string') {
         const pubkey = getPublicKey(privkey);
         const npub = nip19.npubEncode(pubkey);
 
-        // update
+        // use for onboarding process only
+        setPubkey(pubkey);
+        setPrivkey(privkey);
+
+        // add account to local database
         account.mutate({
           npub,
           pubkey,
-          privkey,
           follows: null,
           is_active: 1,
         });
@@ -74,7 +88,7 @@ export function ImportStep1Screen() {
         setTimeout(() => navigate('/auth/import/step-2', { replace: true }), 1200);
       }
     } catch (error) {
-      setError('key', {
+      setError('privkey', {
         type: 'custom',
         message: 'Private Key is invalid, please check again',
       });
@@ -88,15 +102,16 @@ export function ImportStep1Screen() {
       </div>
       <div className="flex flex-col gap-4">
         <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-3">
-          <div className="flex flex-col gap-0.5">
+          <div className="flex flex-col gap-1">
+            <span className="text-base font-semibold text-zinc-400">Private key</span>
             <input
-              {...register('key', { required: true, minLength: 32 })}
+              {...register('privkey', { required: true, minLength: 32 })}
               type={'password'}
-              placeholder="Paste private key here..."
+              placeholder="nsec or hexstring"
               className="relative w-full rounded-lg bg-zinc-800 px-3 py-3 text-zinc-100 !outline-none placeholder:text-zinc-500"
             />
-            <span className="text-base text-red-400">
-              {errors.key && <p>{errors.key.message}</p>}
+            <span className="text-sm text-red-400">
+              {errors.privkey && <p>{errors.privkey.message}</p>}
             </span>
           </div>
           <div className="flex items-center justify-center">