93 lines
3.9 KiB
Markdown
93 lines
3.9 KiB
Markdown
---
|
|
name: edit-profile
|
|
description: Add a form that lets users edit their Nostr profile metadata (NIP-01 kind 0). Provides EditProfileForm with fields for name, about, picture, banner, website, nip05, and a bot flag, plus Blossom image uploads wired up through useUploadFile.
|
|
---
|
|
|
|
# Edit Profile Form
|
|
|
|
This skill provides `EditProfileForm`, a drop-in React component that lets a logged-in user update their Nostr profile metadata (NIP-01 kind 0). The form covers the common metadata fields, handles image uploads through the project's existing `useUploadFile` hook, publishes a new kind 0 event on save, and invalidates the relevant TanStack Query caches so the rest of the app reflects the change.
|
|
|
|
**This component is not included in the project by default.** When the user wants profile editing, follow the setup instructions below to install the component.
|
|
|
|
## Files Provided by This Skill
|
|
|
|
| Skill file | Copy to |
|
|
|---|---|
|
|
| `files/components/EditProfileForm.tsx` | `src/components/EditProfileForm.tsx` |
|
|
|
|
## Setup Instructions
|
|
|
|
### 1. Dependencies
|
|
|
|
No extra npm packages are required. The component uses packages already present in the template:
|
|
|
|
- `react-hook-form` + `@hookform/resolvers` — form state and validation
|
|
- `zod` (via `NSchema` in `@nostrify/nostrify`) — metadata schema validation
|
|
- `@tanstack/react-query` — cache invalidation after publish
|
|
- `@nostrify/nostrify` — `NSchema.metadata()` Zod schema + `NostrMetadata` type
|
|
- `lucide-react` — icons
|
|
- shadcn/ui — `Button`, `Form`, `Input`, `Textarea`, `Switch`
|
|
|
|
### 2. Copy the Skill File Into `src/`
|
|
|
|
Copy `.agents/skills/edit-profile/files/components/EditProfileForm.tsx` into `src/components/EditProfileForm.tsx`. The component imports:
|
|
|
|
- `@/hooks/useCurrentUser` — current logged-in user and their existing metadata
|
|
- `@/hooks/useNostrPublish` — publishes the kind 0 event
|
|
- `@/hooks/useToast` — success/error feedback
|
|
- `@/hooks/useUploadFile` — Blossom uploads for picture/banner
|
|
|
|
All of these are standard in the template; no extra work is needed beyond copying the file.
|
|
|
|
## Usage
|
|
|
|
Place the component anywhere a logged-in user should be able to edit their profile. It renders the form itself, with no surrounding layout:
|
|
|
|
```tsx
|
|
import { EditProfileForm } from '@/components/EditProfileForm';
|
|
|
|
export default function EditProfilePage() {
|
|
return (
|
|
<div className="container mx-auto max-w-2xl py-8">
|
|
<h1 className="text-2xl font-semibold mb-6">Edit Profile</h1>
|
|
<EditProfileForm />
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
The component takes no props. It reads the current user's existing metadata via `useCurrentUser` and pre-populates every field, so the user can tweak values without losing anything else on their profile.
|
|
|
|
## Fields
|
|
|
|
| Field | NIP-01 key | Input | Notes |
|
|
|---|---|---|---|
|
|
| Name | `name` | text | Short handle |
|
|
| About | `about` | textarea | Bio / description |
|
|
| Picture | `picture` | URL + upload button | Profile avatar. Upload button calls `useUploadFile` and sets the resulting URL. |
|
|
| Banner | `banner` | URL + upload button | Profile banner. Same upload flow as picture. |
|
|
| Website | `website` | URL | Any related web URL |
|
|
| NIP-05 | `nip05` | text | Email-like Nostr identifier (e.g. `alice@example.com`) |
|
|
| Bot | `bot` | switch | Marks the account as automated (NIP-24) |
|
|
|
|
On submit, the component publishes a kind 0 event whose `content` is the JSON-stringified metadata, and invalidates any `useAuthor`/profile queries so the UI reflects the new values immediately.
|
|
|
|
## Routing
|
|
|
|
The form is just a component. If you want a dedicated route for it, wire it up in `AppRouter.tsx`:
|
|
|
|
```tsx
|
|
// AppRouter.tsx
|
|
import EditProfilePage from './pages/EditProfilePage';
|
|
|
|
<Route path="/settings/profile" element={<EditProfilePage />} />
|
|
```
|
|
|
|
## Related Hooks
|
|
|
|
If you're building a profile page that *displays* the user's metadata (as opposed to editing it), use:
|
|
|
|
- `useCurrentUser` — the logged-in user and their metadata
|
|
- `useAuthor(pubkey)` — any user's metadata by pubkey
|
|
|
|
Both are part of the core template.
|