diff --git a/dongle/app/layout.tsx b/dongle/app/layout.tsx index 73fb573..6ce4e25 100644 --- a/dongle/app/layout.tsx +++ b/dongle/app/layout.tsx @@ -1,7 +1,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -import { WalletProvider } from "@/context/wallet.context"; +import { Providers } from "./providers"; + const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], @@ -27,9 +28,7 @@ export default function RootLayout({ - - {children} - + {children} ); diff --git a/dongle/app/providers.tsx b/dongle/app/providers.tsx new file mode 100644 index 0000000..459bcae --- /dev/null +++ b/dongle/app/providers.tsx @@ -0,0 +1,12 @@ +"use client"; + +import { AuthProvider } from "@/context/auth.context"; +import { WalletProvider } from "@/context/wallet.context"; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} diff --git a/dongle/context/auth.context.tsx b/dongle/context/auth.context.tsx new file mode 100644 index 0000000..35bfad0 --- /dev/null +++ b/dongle/context/auth.context.tsx @@ -0,0 +1,117 @@ +"use client"; + +import { + createContext, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from "react"; +import { sessionService } from "@/services/auth/session.service"; +import { walletService } from "@/services/wallet/wallet.service"; + +/* ------------------------------------------------------------------ */ +/* Types */ +/* ------------------------------------------------------------------ */ + +interface AuthState { + publicKey: string | null; + isAuthenticated: boolean; + isLoading: boolean; +} + +interface AuthContextValue extends AuthState { + login: (publicKey: string) => void; + logout: () => void; +} + +/* ------------------------------------------------------------------ */ +/* Context */ +/* ------------------------------------------------------------------ */ + +const AuthContext = createContext(undefined); + +/* ------------------------------------------------------------------ */ +/* Provider */ +/* ------------------------------------------------------------------ */ + +export function AuthProvider({ children }: { children: React.ReactNode }) { + const [state, setState] = useState({ + publicKey: null, + isAuthenticated: false, + isLoading: true, + }); + + /* ---- restore session on mount ---- */ + useEffect(() => { + async function restore() { + const session = sessionService.getSession(); + + if (session) { + // Verify the wallet is still connected + const connected = await walletService.isConnected(); + + if (connected) { + setState({ + publicKey: session.publicKey, + isAuthenticated: true, + isLoading: false, + }); + return; + } + + // Wallet disconnected externally — clear stale session + sessionService.clearSession(); + } + + setState({ + publicKey: null, + isAuthenticated: false, + isLoading: false, + }); + } + + restore(); + }, []); + + /* ---- actions ---- */ + const login = useCallback((publicKey: string) => { + sessionService.createSession(publicKey); + setState({ + publicKey, + isAuthenticated: true, + isLoading: false, + }); + }, []); + + const logout = useCallback(() => { + walletService.disconnectWallet(); + sessionService.clearSession(); + setState({ + publicKey: null, + isAuthenticated: false, + isLoading: false, + }); + }, []); + + /* ---- memoised value ---- */ + const value = useMemo( + () => ({ ...state, login, logout }), + [state, login, logout], + ); + + return {children}; +} + +/* ------------------------------------------------------------------ */ +/* Hook */ +/* ------------------------------------------------------------------ */ + +export function useAuth(): AuthContextValue { + const ctx = useContext(AuthContext); + if (!ctx) { + throw new Error("useAuth must be used within an "); + } + return ctx; +} diff --git a/dongle/context/wallet.context.tsx b/dongle/context/wallet.context.tsx index 498b297..dfdbbdb 100644 --- a/dongle/context/wallet.context.tsx +++ b/dongle/context/wallet.context.tsx @@ -1,94 +1,119 @@ "use client"; -import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from "react"; +import { + createContext, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from "react"; import { walletService } from "@/services/wallet/wallet.service"; +import { sessionService } from "@/services/auth/session.service"; -interface WalletContextType { - publicKey: string | null; +interface WalletState { + address: string | null; isConnected: boolean; isConnecting: boolean; - connectWallet: () => Promise; - disconnectWallet: () => void; + error: string | null; } -const WalletContext = createContext(undefined); +interface WalletContextValue extends WalletState { + connect: () => Promise; + disconnect: () => void; +} -const WALLET_STORAGE_KEY = "dongle_wallet_state"; +const WalletContext = createContext(undefined); -export function WalletProvider({ children }: { children: ReactNode }) { - const [publicKey, setPublicKey] = useState(null); - const [isConnected, setIsConnected] = useState(false); - const [isConnecting, setIsConnecting] = useState(false); +export function WalletProvider({ children }: { children: React.ReactNode }) { + const [state, setState] = useState({ + address: null, + isConnected: false, + isConnecting: true, + error: null, + }); useEffect(() => { - const restoreWalletState = async () => { + async function checkConnection() { try { - const storedState = localStorage.getItem(WALLET_STORAGE_KEY); - if (storedState) { - const { publicKey: storedKey, isConnected: storedConnected } = JSON.parse(storedState); - if (storedConnected && storedKey) { - const isStillConnected = await walletService.isConnected(); - if (isStillConnected) { - const currentKey = await walletService.getPublicKey(); - setPublicKey(currentKey); - setIsConnected(true); - } else { - localStorage.removeItem(WALLET_STORAGE_KEY); - } - } + const connected = await walletService.isConnected(); + if (connected) { + const address = await walletService.getPublicKey(); + setState({ + address, + isConnected: true, + isConnecting: false, + error: null, + }); + } else { + setState({ + address: null, + isConnected: false, + isConnecting: false, + error: null, + }); } - } catch (error) { - console.error("Failed to restore wallet state:", error); - localStorage.removeItem(WALLET_STORAGE_KEY); + } catch (err: any) { + setState({ + address: null, + isConnected: false, + isConnecting: false, + error: err.message, + }); } - }; - restoreWalletState(); + } + checkConnection(); }, []); - const connectWallet = useCallback(async () => { - if (isConnected) return; - - setIsConnecting(true); + const connect = useCallback(async (): Promise => { + setState((prev) => ({ ...prev, isConnecting: true, error: null })); try { const address = await walletService.connectWallet(); - setPublicKey(address); - setIsConnected(true); - - localStorage.setItem(WALLET_STORAGE_KEY, JSON.stringify({ - publicKey: address, - isConnected: true - })); - } catch (error) { - console.error("Wallet connection failed:", error); - } finally { - setIsConnecting(false); + sessionService.createSession(address); + setState({ + address, + isConnected: true, + isConnecting: false, + error: null, + }); + return address; + } catch (err: any) { + setState({ + address: null, + isConnected: false, + isConnecting: false, + error: err.message, + }); + throw err; } - }, [isConnected]); + }, []); - const disconnectWallet = useCallback(() => { - setPublicKey(null); - setIsConnected(false); - localStorage.removeItem(WALLET_STORAGE_KEY); + const disconnect = useCallback(() => { + walletService.disconnectWallet(); + sessionService.clearSession(); + setState({ + address: null, + isConnected: false, + isConnecting: false, + error: null, + }); }, []); + const value = useMemo( + () => ({ ...state, connect, disconnect }), + [state, connect, disconnect] + ); + return ( - + {children} ); } -export function useWallet(): WalletContextType { +export function useWallet() { const context = useContext(WalletContext); - if (context === undefined) { + if (!context) { throw new Error("useWallet must be used within a WalletProvider"); } return context; diff --git a/dongle/services/auth/session.service.ts b/dongle/services/auth/session.service.ts new file mode 100644 index 0000000..cd12b42 --- /dev/null +++ b/dongle/services/auth/session.service.ts @@ -0,0 +1,51 @@ +const SESSION_KEY = "dongle_session"; + +export interface Session { + publicKey: string; + connectedAt: string; +} + +export const sessionService = { + /** + * Persist a new session for the given wallet public key. + */ + createSession(publicKey: string): Session { + const session: Session = { + publicKey, + connectedAt: new Date().toISOString(), + }; + localStorage.setItem(SESSION_KEY, JSON.stringify(session)); + return session; + }, + + /** + * Retrieve the current session, or null if none exists / is corrupt. + */ + getSession(): Session | null { + try { + const raw = localStorage.getItem(SESSION_KEY); + if (!raw) return null; + + const parsed = JSON.parse(raw); + if (!parsed?.publicKey) return null; + + return parsed as Session; + } catch { + return null; + } + }, + + /** + * Remove the persisted session. + */ + clearSession(): void { + localStorage.removeItem(SESSION_KEY); + }, + + /** + * Quick check — true when a valid session record is present. + */ + isAuthenticated(): boolean { + return this.getSession() !== null; + }, +};