fix: correctly clear local storage

when unloadAgent is called
storacha · Nov 14, 2023 · cdde2e2 · cdde2e2
1 parent 745aa82
commit cdde2e2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/examples/react/w3console/src/components/Layout.tsx b/examples/react/w3console/src/components/Layout.tsx
@@ -2,6 +2,8 @@ import { Logo } from '../brand'
 import { Fragment, useState } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { useKeyring } from '@w3ui/react-keyring'
+import { useNavigate } from 'react-router-dom'
 
 const navLinks = [
   { name: 'Terms', href: '/terms' },
@@ -14,6 +16,12 @@ interface SidebarComponentProps {
 }
 
 function Sidebar ({ sidebar = <div></div> }: SidebarComponentProps): JSX.Element {
+  const navigate = useNavigate()
+  const [, { unloadAgent }] = useKeyring()
+  async function logout () {
+    await unloadAgent()
+    navigate('/')
+  }
   return (
     <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800 h-screen'>
       <div className='flex flex-col justify-between h-full'>
@@ -25,6 +33,7 @@ function Sidebar ({ sidebar = <div></div> }: SidebarComponentProps): JSX.Element
               <a className='text-xs block text-center mt-2' href={link.href}>{link.name}</a>
             ))}
           </div>
+          <button onClick={() => unloadAgent()}>log out</button>
         </div>
       </div>
     </nav>

diff --git a/packages/react-keyring/src/providers/Keyring.tsx b/packages/react-keyring/src/providers/Keyring.tsx
@@ -82,7 +82,7 @@ export function KeyringProvider ({
   connection
 }: KeyringProviderProps): JSX.Element {
   const [agent, setAgent] = useState<Agent>()
-  const [account, setAccount] = useLocalStorageState<string>(W3UI_ACCOUNT_LOCALSTORAGE_KEY)
+  const [account, setAccount, { removeItem: unsetAccount }] = useLocalStorageState<string>(W3UI_ACCOUNT_LOCALSTORAGE_KEY)
   const [space, setSpace] = useState<Space>()
   const [spaces, setSpaces] = useState<Space[]>([])
   const [issuer, setIssuer] = useState<Signer>()
@@ -161,7 +161,7 @@ export function KeyringProvider ({
     setSpaces([])
     setIssuer(undefined)
     setAgent(undefined)
-    setAccount(undefined)
+    unsetAccount()
   }
 
   const resetAgent = async (): Promise<void> => {