account list and logout

src/App.tsx

@@ -10,6 +10,7 @@ import 'dot-connect/font.css'
 import { config } from './walletConfigs'
 import { ReDotProvider, ReDotChainProvider } from '@reactive-dot/react'
 import { Suspense } from 'react'
+import { AccountContextProvider } from './contexts/AccountsContext'
 
 const App = () => {
   const [settings] = useLocalStorage('fellowship-settings', {
@@ -22,15 +23,17 @@ const App = () => {
         <ReDotProvider config={config}>
           <ReDotChainProvider chainId="polkadot">
             <Suspense>
-              <TooltipProvider>
-                <div className="flex min-h-screen w-full flex-col bg-muted/40">
-                  <Navigation />
-                  <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-                    <Header />
-                    <Content />
+              <AccountContextProvider>
+                <TooltipProvider>
+                  <div className="flex min-h-screen w-full flex-col bg-muted/40">
+                    <Navigation />
+                    <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+                      <Header />
+                      <Content />
+                    </div>
                   </div>
-                </div>
-              </TooltipProvider>
+                </TooltipProvider>
+              </AccountContextProvider>
             </Suspense>
           </ReDotChainProvider>
         </ReDotProvider>

src/contexts/AccountsContext.tsx

@@ -0,0 +1,70 @@
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+} from 'react'
+import { InjectedAccount } from 'polkadot-api/pjs-signer'
+import { useAccounts as useRedotAccounts } from '@reactive-dot/react'
+
+const LOCALSTORAGE_SELECTED_ACCOUNT_KEY = 'delegit.selectedAccount'
+
+type AccountContextProps = {
+  children: React.ReactNode | React.ReactNode[]
+}
+
+export interface IAccountContext {
+  selectedAccount?: InjectedAccount
+  accounts: InjectedAccount[]
+  selectAccount: (account: InjectedAccount) => void
+}
+
+const AccountContext = createContext<IAccountContext | undefined>(undefined)
+
+const AccountContextProvider = ({ children }: AccountContextProps) => {
+  const accounts = useRedotAccounts()
+  const [selectedAccount, setSelected] = useState<InjectedAccount | undefined>()
+
+  const selectAccount = useCallback((account: InjectedAccount) => {
+    localStorage.setItem(LOCALSTORAGE_SELECTED_ACCOUNT_KEY, account.address)
+    setSelected(account)
+  }, [])
+
+  useEffect(() => {
+    const previousAccountAddress = localStorage.getItem(
+      LOCALSTORAGE_SELECTED_ACCOUNT_KEY,
+    )
+
+    if (previousAccountAddress) {
+      const account = accounts.find(
+        (account) => account.address === previousAccountAddress,
+      )
+      !!account && selectAccount(account)
+    } else {
+      selectAccount(accounts[0])
+    }
+  }, [accounts, selectAccount])
+
+  return (
+    <AccountContext.Provider
+      value={{
+        accounts,
+        selectedAccount,
+        selectAccount,
+      }}
+    >
+      {children}
+    </AccountContext.Provider>
+  )
+}
+
+const useAccounts = () => {
+  const context = useContext(AccountContext)
+  if (context === undefined) {
+    throw new Error('useAccounts must be used within a AccountContextProvider')
+  }
+  return context
+}
+
+export { AccountContextProvider, useAccounts }

src/header.tsx

@@ -1,16 +1,15 @@
-// import { Polkicon } from '@polkadot-ui/react'
-// import {
-//   DropdownMenu,
-//   DropdownMenuContent,
-//   DropdownMenuItem,
-//   DropdownMenuLabel,
-//   DropdownMenuSeparator,
-//   DropdownMenuTrigger,
-// } from '@/components/ui/dropdown-menu'
+import { Polkicon } from '@polkadot-ui/react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
 import { Button } from '@/components/ui/button'
 import { routes } from '@/lib/utils'
-
+import { useWalletDisconnector } from '@reactive-dot/react'
 import { Settings2, PanelLeft } from 'lucide-react'
 
 import {
@@ -22,8 +21,11 @@ import {
   MenubarShortcut,
   MenubarTrigger,
 } from '@/components/ui/menubar'
+import { useAccounts } from './contexts/AccountsContext'
 
 export const Header = () => {
+  const { accounts, selectAccount, selectedAccount } = useAccounts()
+  const [, disconnectAll] = useWalletDisconnector()
   return (
     <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:sticky sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
       <Sheet>
@@ -75,30 +77,53 @@ export const Header = () => {
           </Menubar>
         </div>
         <div className="">
-          <dc-connection-button>connect</dc-connection-button>
-          {/* <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="outline"
-                size="icon"
-                className="overflow-hidden rounded-full"
-              >
-                <Polkicon
-                  copy
-                  size={36}
-                  address={'5CoZdwD8KpAaax4oD5bKgHy23wkVKpwuaf9Gb2HTeZQaDijr'}
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu> */}
+          {!accounts.length && (
+            <dc-connection-button>Connect</dc-connection-button>
+          )}
+          {!!accounts.length && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="default"
+                  className="overflow-hidden"
+                >
+                  <Polkicon
+                    copy
+                    size={36}
+                    address={selectedAccount?.address || ''}
+                    className="mr-2"
+                  />
+                  {selectedAccount?.name}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                {accounts.map((account, index) => (
+                  <>
+                    <DropdownMenuItem
+                      key={account.address}
+                      onClick={() => selectAccount(account)}
+                    >
+                      <Polkicon
+                        copy
+                        size={28}
+                        address={account.address || ''}
+                        className="mr-2"
+                      />
+                      {account.name}
+                    </DropdownMenuItem>
+                    {index !== accounts.length - 1 && <DropdownMenuSeparator />}
+                  </>
+                ))}
+                <DropdownMenuItem
+                  key={'logout'}
+                  onClick={() => disconnectAll()}
+                >
+                  Logout
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
       </div>
     </header>