feat: remove account button

src/components/AccountList/index.tsx

@@ -1,10 +1,11 @@
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import { isSameAccount } from '@/lib/account'
 import { formatPubkey } from '@/lib/pubkey'
 import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
 import { TAccountPointer, TSignerType } from '@/types'
-import { Loader } from 'lucide-react'
+import { Loader, Trash2 } from 'lucide-react'
 import { useState } from 'react'
 import { SimpleUserAvatar } from '../UserAvatar'
 import { SimpleUsername } from '../Username'
@@ -16,7 +17,7 @@ export default function AccountList({
   className?: string
   afterSwitch: () => void
 }) {
-  const { accounts, account, switchAccount } = useNostr()
+  const { accounts, account, switchAccount, removeAccount } = useNostr()
   const [switchingAccount, setSwitchingAccount] = useState<TAccountPointer | null>(null)
 
   return (
@@ -46,9 +47,22 @@ export default function AccountList({
                 </div>
               </div>
             </div>
+            <div className="flex items-center gap-2">
               <div className="flex gap-2 items-center">
                 <SignerTypeBadge signerType={act.signerType} />
               </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-muted-foreground hover:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  removeAccount(act)
+                }}
+              >
+                <Trash2 />
+              </Button>
+            </div>
           </div>
           {switchingAccount && isSameAccount(act, switchingAccount) && (
             <div className="absolute top-0 left-0 flex w-full h-full items-center justify-center rounded-lg bg-muted/60">

src/providers/NostrProvider/index.tsx

@@ -80,6 +80,9 @@ export const useNostr = () => {
 
 export function NostrProvider({ children }: { children: React.ReactNode }) {
   const { t } = useTranslation()
+  const [accounts, setAccounts] = useState<TAccountPointer[]>(
+    storage.getAccounts().map((act) => ({ pubkey: act.pubkey, signerType: act.signerType }))
+  )
   const [account, setAccount] = useState<TAccountPointer | null>(null)
   const [nsec, setNsec] = useState<string | null>(null)
   const [ncryptsec, setNcryptsec] = useState<string | null>(null)
@@ -300,7 +303,8 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
   }
 
   const login = (signer: ISigner, act: TAccount) => {
-    storage.addAccount(act)
+    const newAccounts = storage.addAccount(act)
+    setAccounts(newAccounts)
     storage.switchAccount(act)
     setAccount({ pubkey: act.pubkey, signerType: act.signerType })
     setSigner(signer)
@@ -308,7 +312,8 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
   }
 
   const removeAccount = (act: TAccountPointer) => {
-    storage.removeAccount(act)
+    const newAccounts = storage.removeAccount(act)
+    setAccounts(newAccounts)
     if (account?.pubkey === act.pubkey) {
       setAccount(null)
       setSigner(null)
@@ -652,9 +657,7 @@ export function NostrProvider({ children }: { children: React.ReactNode }) {
         favoriteRelaysEvent,
         notificationsSeenAt,
         account,
-        accounts: storage
+        accounts,
-          .getAccounts()
-          .map((act) => ({ pubkey: act.pubkey, signerType: act.signerType })),
         nsec,
         ncryptsec,
         switchAccount,

src/services/local-storage.service.ts

@@ -187,12 +187,13 @@ class LocalStorageService {
       this.accounts.push(account)
     }
     window.localStorage.setItem(StorageKey.ACCOUNTS, JSON.stringify(this.accounts))
-    return account
+    return this.accounts
   }
 
   removeAccount(account: TAccount) {
     this.accounts = this.accounts.filter((act) => !isSameAccount(act, account))
     window.localStorage.setItem(StorageKey.ACCOUNTS, JSON.stringify(this.accounts))
+    return this.accounts
   }
 
   switchAccount(account: TAccount | null) {