Feature: Implement CreateProfileForm component and update onboarding page

app/onboarding/createProfile/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { UpdateProfileForm } from "@/components/UpdateProfileForm";
+import { CreateProfileForm } from "@/components/CreateProfileForm";
 import { useEffect } from "react";
 
 export default function OnboardingCreateProfile() {
@@ -12,7 +12,7 @@ export default function OnboardingCreateProfile() {
     <>
       <div className="flex flex-col items-center py-6 px-6">
         <h1>Step 2: Create Profile</h1>
-        <UpdateProfileForm />
+        <CreateProfileForm />
       </div>
     </>
   );

components/CreateProfileForm.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { nip19 } from "nostr-tools"
+import { Label } from "./ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { verifyEvent } from 'nostr-tools/pure'
+import { hexToBytes } from '@noble/hashes/utils'
+import { useNostr, useProfile } from 'nostr-react';
+import { signEvent } from '@/utils/utils';
+
+export function CreateProfileForm() {
+
+    const { publish } = useNostr();
+
+    let npub = '';
+    let pubkey = '';
+    let loginType = '';
+    let nsec: Uint8Array;
+
+    if (typeof window !== 'undefined') {
+        pubkey = window.localStorage.getItem("pubkey") ?? '';
+        const nsecHex = window.localStorage.getItem("nsec");
+        loginType = window.localStorage.getItem("loginType") ?? '';
+
+        if (pubkey && pubkey.length > 0) {
+            npub = nip19.npubEncode(pubkey);
+        }
+
+        if (nsecHex && nsecHex.length > 0) {
+            nsec = hexToBytes(nsecHex);
+        }
+    }
+
+    let { data: userData } = useProfile({
+        pubkey,
+    });
+
+    const [username, setUsername] = useState(userData?.name);
+    const [displayName, setDisplayName] = useState(userData?.display_name);
+    const [bio, setBio] = useState(userData?.about);
+
+    const handleUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setUsername(event.target.value);
+    };
+    const handleDisplayNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setDisplayName(event.target.value);
+    };
+    const handleBioChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setBio(event.target.value);
+    };
+
+    async function handleProfileUpdate() {
+        const username = (document.getElementById('username') as HTMLInputElement).value;
+        const bio = (document.getElementById('bio') as HTMLInputElement).value;
+        const displayname = (document.getElementById('displayname') as HTMLInputElement).value;
+
+        if (loginType) {
+            let event = {
+                kind: 0,
+                created_at: Math.floor(Date.now() / 1000),
+                tags: [],
+                content: `{"name": "${username}", "about": "${bio}"}`,
+                pubkey: pubkey,
+                id: "",
+                sig: "",
+            };
+
+            let signedEvent = await signEvent(loginType, event);
+
+            if (signedEvent === null) {
+                alert('Failed to sign the event. Please check your connection and try again.');
+                return;
+            }
+
+            let isGood = verifyEvent(signedEvent);
+
+            if (isGood) {
+                publish(signedEvent);
+                window.location.href = `/profile/${npub}`;
+            }
+        }
+    }
+
+    return (
+        <div className="w-full max-w-full">
+            <div className="py-4">
+                <div>
+                    <Label>Your npub (Public Key):</Label>
+                    <Input type="text" placeholder="npub1.." value={npub} readOnly />
+                </div>
+                <div className='py-4'>
+                    <Label>Your Username</Label>
+                    <Input type="text" id="username" placeholder="Satoshi" value={username} onChange={handleUsernameChange} />
+                </div>
+                <div className='py-4'>
+                    <Label>Your Displayed Name</Label>
+                    <Input type="text" id="displayname" placeholder="Satoshi" value={displayName} onChange={handleDisplayNameChange} />
+                </div>
+                <div className='py-4'>
+                    <Label>Your Bio</Label>
+                    {/* <Input type="text" id="bio" placeholder="Type something about you.." /> */}
+                    <Textarea id="bio" placeholder="Type something about you.." rows={10} value={bio} onChange={handleBioChange} />
+                </div>
+                <Button variant={'default'} type="submit" className='w-full' onClick={handleProfileUpdate}>Submit</Button>
+            </div>
+        </div>
+    )
+}