Merge pull request #942 from polkadot-fellows/nik-add-login-functionality

Author: wirednkod

package.json

@@ -2,7 +2,7 @@
   "name": "fellowship-dashboard",
   "private": true,
   "version": "0.0.2",
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@10.26.1+sha512.664074abc367d2c9324fdc18037097ce0a8f126034160f709928e9e9f95d98714347044e5c3164d65bd5da6c59c6be362b107546292a8eecb7999196e5ce58fa",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -18,8 +18,8 @@
   },
   "dependencies": {
     "@polkadot-api/descriptors": "file:.papi/descriptors",
-    "@polkadot-ui/react": "0.0.1-alpha.27",
-    "@polkadot-ui/utils": "0.0.1-alpha.5",
+    "@polkadot-ui/react": "0.0.1-alpha.35",
+    "@polkadot-ui/utils": "0.0.4",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -32,11 +32,14 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@reactive-dot/core": "^0.67.3",
+    "@reactive-dot/react": "^0.67.3",
     "@tanstack/react-table": "^8.21.3",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
+    "dot-connect": "^0.28.1",
     "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "polkadot-api": "^1.23.1",
@@ -51,7 +54,7 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@types/node": "^24.10.2",
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/react-router-dom": "^5.3.3",

pnpm-lock.yaml

@@ -1,15 +1,9 @@
 /* eslint-disable react-refresh/only-export-components */
-import React, {
-  useState,
-  createContext,
-  useContext,
-  useEffect,
-  // useCallback,
-  // useEffect,
-} from 'react'
-import { InjectedPolkadotAccount } from 'polkadot-api/pjs-signer'
+import React, { useState, createContext, useContext, useEffect } from 'react'
 import { api } from '@/clients'
 import { SS58String } from 'polkadot-api'
+import { useAccounts } from '@reactive-dot/react'
+import type { WalletAccount } from '@reactive-dot/core/wallets.js'
 // const LOCALSTORAGE_SELECTED_ACCOUNT_KEY = 'polkadot-fellowship.selectedAccount'
 
 type AccountContextProps = {
@@ -23,45 +17,71 @@ type ExtraInfo = {
   lastProof?: number
 }
 
-type ExtraPolkadotAccount = InjectedPolkadotAccount & {
-  membership: ExtraInfo
+type ExtraPolkadotAccount = WalletAccount & {
+  membership?: ExtraInfo
 }
 
 export interface IAccountContext {
   enchancedAccount?: ExtraPolkadotAccount
-  selectedAccount?: InjectedPolkadotAccount
-  setSelectedAccount: (account: InjectedPolkadotAccount | undefined) => void
+  selectedAccount?: WalletAccount
+  accounts: WalletAccount[]
+  setSelectedAccount: (account: WalletAccount | undefined) => void
 }
 
 const AccountContext = createContext<IAccountContext | undefined>(undefined)
 
 const AccountContextProvider = ({ children }: AccountContextProps) => {
+  const accounts = useAccounts()
   const [enchancedAccount, setEnchancedAccount] = useState<
     ExtraPolkadotAccount | undefined
   >()
   const [selectedAccount, setSelectedAccount] = useState<
-    InjectedPolkadotAccount | undefined
+    WalletAccount | undefined
   >()
 
   useEffect(() => {
+    if (!accounts.length) {
+      setSelectedAccount(undefined)
+      setEnchancedAccount(undefined)
+      return
+    }
+
+    if (
+      selectedAccount &&
+      accounts.some(
+        (account) => account.address === selectedAccount.address,
+      )
+    ) {
+      return
+    }
+
+    setSelectedAccount(accounts[0])
+  }, [accounts, selectedAccount])
+
+  useEffect(() => {
+    if (!selectedAccount?.address) {
+      setEnchancedAccount(undefined)
+      return
+    }
+
     const getExtraInfo = async () => {
-      let updateAccount: ExtraPolkadotAccount = {} as ExtraPolkadotAccount
       const member = await api.query.FellowshipCore.Member.getValue(
-        selectedAccount?.address as SS58String,
+        selectedAccount.address as SS58String,
       )
-      updateAccount = {
+      const updateAccount: ExtraPolkadotAccount = {
         ...selectedAccount,
         membership: member
           ? {
-              isActive: member?.is_active,
-              lastPromotion: member?.last_promotion,
-              lastProof: member?.last_proof,
+              isActive: member.is_active,
+              lastPromotion: member.last_promotion,
+              lastProof: member.last_proof,
             }
           : undefined,
-      } as ExtraPolkadotAccount
+      }
       setEnchancedAccount(updateAccount)
     }
-    selectedAccount?.address && getExtraInfo()
+
+    getExtraInfo()
   }, [selectedAccount])
 
   // const selectAccount = useCallback(
@@ -94,6 +114,7 @@ const AccountContextProvider = ({ children }: AccountContextProps) => {
   return (
     <AccountContext.Provider
       value={{
+        accounts,
         enchancedAccount,
         selectedAccount,
         setSelectedAccount,

src/contexts/AccountContextProvider.tsx

@@ -1,14 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import {
-  // AccountProvider,
-  // ExtensionProvider,
-  SelectedAccountType,
-} from '@polkadot-ui/react'
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
 import { Button } from '@/components/ui/button'
-import { RouterType, openInNewTab, resources, routes } from '@/lib/utils'
+import { RouterType, openInNewTab, resources, routes, cn } from '@/lib/utils'
 
-import { PanelLeft, Moon, Sun, NotebookText, BookOpenText } from 'lucide-react'
+import {
+  PanelLeft,
+  Moon,
+  Sun,
+  NotebookText,
+  BookOpenText,
+  Wallet,
+  Check,
+} from 'lucide-react'
 import { getLinks } from './Resources'
 import {
   // FaCheckCircle,
@@ -17,7 +20,7 @@ import {
 // import { TbLoaderQuarter } from 'react-icons/tb'
 import { useTheme } from './components/theme-provider'
 import { useEffect, useState } from 'react'
-import { collectiveClient } from './clients'
+import { collectiveClient, polkadotClient } from './clients'
 import {
   Dialog,
   DialogContent,
@@ -35,6 +38,7 @@ import {
 } from '@radix-ui/react-accordion'
 import { SiElement } from 'react-icons/si'
 import { Link } from 'react-router-dom'
+import { Badge } from '@/components/ui/badge'
 
 // import { Polkicon } from '@polkadot-ui/react'
 // import {
@@ -45,6 +49,7 @@ import { Link } from 'react-router-dom'
 //   DropdownMenuTrigger,
 // } from '@/components/ui/dropdown-menu'
 
+import { ConnectionButton } from 'dot-connect/react.js'
 import { useAccount } from './contexts/AccountContextProvider'
 
 interface Props {
@@ -53,12 +58,11 @@ interface Props {
 }
 
 export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
-  const { setSelectedAccount } = useAccount()
-
-  const [
-    selAccount,
-    //  setSelAccount
-  ] = useState<SelectedAccountType>({} as SelectedAccountType)
+  const { accounts, selectedAccount, setSelectedAccount } = useAccount()
+  const [accountDialogOpen, setAccountDialogOpen] = useState(false)
+  const [latestBlockNumber, setLatestBlockNumber] = useState<number | null>(
+    null,
+  )
 
   useEffect(() => {
     collectiveClient.finalizedBlock$.subscribe((finalizedBlock) => {
@@ -67,12 +71,19 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
       }
     })
   }, [lightClientLoaded, setLightClientLoaded])
-  const { theme, setTheme } = useTheme()
 
-  // TODO Correctly map the account
   useEffect(() => {
-    selAccount?.address && setSelectedAccount(selAccount)
-  }, [selAccount])
+    const subscription = polkadotClient.finalizedBlock$.subscribe(
+      (finalizedBlock) => {
+        if (typeof finalizedBlock.number === 'number') {
+          setLatestBlockNumber(finalizedBlock.number)
+        }
+      },
+    )
+
+    return () => subscription.unsubscribe()
+  }, [])
+  const { theme, setTheme } = useTheme()
 
   return (
     <header className="sticky top-5 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">
@@ -228,7 +239,7 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
           </div>
         </SheetContent>
       </Sheet>
-      <div className="flex w-full justify-between">
+      <div className="flex w-full items-center justify-between">
         <div>
           {/* <Menubar>
             <MenubarMenu>
@@ -246,70 +257,78 @@ export const Header = ({ lightClientLoaded, setLightClientLoaded }: Props) => {
             </MenubarMenu>
           </Menubar> */}
         </div>
-        {/* TODO - ACTIVATE THIS FOR CONNECT BUTTON
-        <div>
-          {!enchancedAccount?.address ? (
-            <Dialog>
-              <DialogTrigger asChild>
-                <Button>Connect</Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-[425px]">
-                <DialogHeader>
-                  <DialogTitle className="text-primary font-bold">
-                    Connect Wallet
-                  </DialogTitle>
-                </DialogHeader>
-                <ExtensionProvider setSelected={setSelAccount}>
-                  <AccountProvider
-                    selected={selAccount}
-                    setSelected={setSelAccount}
-                  />
-                </ExtensionProvider>
-              </DialogContent>
-            </Dialog>
-          ) : (
-            <Dialog>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="overflow-hidden rounded-full"
-                  >
-                    <Polkicon size={36} address={enchancedAccount?.address} />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DialogTrigger asChild>
-                    <DropdownMenuItem className="cursor-pointer">
-                      Switch Account
-                    </DropdownMenuItem>
-                  </DialogTrigger>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    className="cursor-pointer"
-                    onClick={() => setSelectedAccount(undefined)}
-                  >
-                    Logout
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-              <DialogContent className="sm:max-w-[425px]">
-                <DialogHeader>
-                  <DialogTitle className="text-primary font-bold">
-                    Connect Wallet
-                  </DialogTitle>
-                </DialogHeader>
-                <ExtensionProvider setSelected={setSelAccount}>
-                  <AccountProvider
-                    selected={selAccount}
-                    setSelected={setSelAccount}
-                  />
-                </ExtensionProvider>
-              </DialogContent>
-            </Dialog>
-          )}
-        </div> */}
+        <div className="flex items-center gap-3">
+          <Dialog open={accountDialogOpen} onOpenChange={setAccountDialogOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="lg" className="rounded-3xl p-5">
+                Manage accounts
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[420px]">
+              <DialogHeader>
+                <DialogTitle className="font-bold text-primary">
+                  Connected accounts
+                </DialogTitle>
+                <DialogDescription>
+                  Choose which account the dashboard should use.
+                </DialogDescription>
+              </DialogHeader>
+              {accounts.length ? (
+                <div className="flex flex-col gap-2">
+                  {accounts.map((account) => {
+                    const isSelected =
+                      selectedAccount?.address === account.address
+                    const shortAddress =
+                      account.address.length > 12
+                        ? `${account.address.slice(0, 6)}...${account.address.slice(-4)}`
+                        : account.address
+
+                    return (
+                      <button
+                        type="button"
+                        key={account.address}
+                        onClick={() => {
+                          setSelectedAccount(account)
+                          setAccountDialogOpen(false)
+                        }}
+                        className={cn(
+                          'flex w-full items-center justify-between rounded-md border p-3 text-left transition-colors hover:bg-muted',
+                          isSelected
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border bg-background',
+                        )}
+                      >
+                        <div className="flex flex-col">
+                          <span className="text-sm font-medium">
+                            {account.name || 'Wallet account'}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {shortAddress}
+                          </span>
+                        </div>
+                        {isSelected ? (
+                          <Check className="h-4 w-4 text-primary" />
+                        ) : (
+                          <Wallet className="h-4 w-4 text-muted-foreground" />
+                        )}
+                      </button>
+                    )
+                  })}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  Connect a wallet to view available accounts.
+                </p>
+              )}
+            </DialogContent>
+          </Dialog>
+          <ConnectionButton />
+          <Badge variant="secondary" className="text-nowrap p-3">
+            {latestBlockNumber
+              ? `#${latestBlockNumber.toLocaleString()}`
+              : 'Syncing block...'}
+          </Badge>
+        </div>
       </div>
     </header>
   )