From c11daa5aff460863635f2b2f24b22b2bbc968451 Mon Sep 17 00:00:00 2001 From: SaraJane Date: Thu, 15 Jan 2026 12:43:19 +0000 Subject: [PATCH] Fix: show w3a addr, unifiedWallet across UI, refresh when disconnect w3a --- .../TokenizeRWATemplate-frontend/src/Home.tsx | 4 +- .../src/components/Account.tsx | 35 ++++++++--- .../src/components/Web3AuthButton.tsx | 62 +++++++++++++------ .../src/components/Web3AuthProvider.tsx | 10 +++ 4 files changed, 82 insertions(+), 29 deletions(-) diff --git a/projects/TokenizeRWATemplate-frontend/src/Home.tsx b/projects/TokenizeRWATemplate-frontend/src/Home.tsx index 177d2e7..40fa91a 100644 --- a/projects/TokenizeRWATemplate-frontend/src/Home.tsx +++ b/projects/TokenizeRWATemplate-frontend/src/Home.tsx @@ -1,4 +1,4 @@ -import { useWallet } from '@txnlab/use-wallet-react' +import { useUnifiedWallet } from './hooks/useUnifiedWallet' import { Link } from 'react-router-dom' /** @@ -7,7 +7,7 @@ import { Link } from 'react-router-dom' * Displays features, how it works, and CTAs to connect wallet and create assets */ export default function Home() { - const { activeAddress } = useWallet() +const { activeAddress } = useUnifiedWallet() return (
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx b/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx index 865de04..0e81154 100644 --- a/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx +++ b/projects/TokenizeRWATemplate-frontend/src/components/Account.tsx @@ -1,30 +1,49 @@ -import { useWallet } from '@txnlab/use-wallet-react' import { useMemo } from 'react' +import { useUnifiedWallet } from '../hooks/useUnifiedWallet' import { ellipseAddress } from '../utils/ellipseAddress' import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs' /** * Account Component - * Displays the connected wallet address (shortened) and current network - * Address links to Lora explorer for easy account tracking + * + * Displays the connected Algorand address (shortened) + * and current network. + * + * Works for BOTH: + * - Web3Auth (Google login) + * - Traditional wallets (Pera / Defly / etc) + * + * Address links to Lora explorer. */ const Account = () => { - const { activeAddress } = useWallet() + const { activeAddress } = useUnifiedWallet() const algoConfig = getAlgodConfigFromViteEnvironment() + // Normalize network name for Lora const networkName = useMemo(() => { - return algoConfig.network === '' ? 'localnet' : algoConfig.network.toLocaleLowerCase() + return algoConfig.network === '' ? 'localnet' : algoConfig.network.toLowerCase() }, [algoConfig.network]) + // Normalize address to string (VERY IMPORTANT) + const address = typeof activeAddress === 'string' ? activeAddress : activeAddress ? String(activeAddress) : null + + if (!address) { + return null + } + + const loraUrl = `https://lora.algokit.io/${networkName}/account/${address}/` + return (
- Address: {ellipseAddress(activeAddress)} + Address: {ellipseAddress(address)} +
Network: {networkName}
) diff --git a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx index 0d8a0e4..997349f 100644 --- a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx +++ b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx @@ -12,9 +12,7 @@ import { useWeb3Auth } from './Web3AuthProvider' * Features: * - Wallet connection/disconnection with Web3Auth (Google OAuth) * - Auto-generation of Algorand wallet from Google credentials - * - Ellipsized address display for better UX * - Loading states and error handling - * - Beautiful Google-style sign-in button * * Usage: * ```tsx @@ -26,6 +24,9 @@ export function Web3AuthButton() { const [isDropdownOpen, setIsDropdownOpen] = useState(false) const [copied, setCopied] = useState(false) + // Lora explorer base (TestNet) + const LORA_ACCOUNT_BASE = 'https://lora.algokit.io/testnet/account' + // Close dropdown when clicking outside useEffect(() => { const handleClickOutside = (e: MouseEvent) => { @@ -42,23 +43,11 @@ export function Web3AuthButton() { // Get address as string safely const getAddressString = (): string => { if (!algorandAccount?.address) return '' - - // Handle if address is an object (like from algosdk with publicKey property) - if (typeof algorandAccount.address === 'object' && algorandAccount.address !== null) { - // If it has a toString method, use it - if ('toString' in algorandAccount.address && typeof algorandAccount.address === 'function') { - return algorandAccount.address - } - // If it has an addr property (algosdk Account object) - if ('addr' in algorandAccount.address) { - return String(algorandAccount.address) - } - return '' - } - return String(algorandAccount.address) } + const getLoraAccountUrl = (address: string) => `${LORA_ACCOUNT_BASE}/${address}` + // Handle login with error feedback const handleLogin = async () => { try { @@ -135,13 +124,14 @@ export function Web3AuthButton() { if (algorandAccount && isConnected) { const address = getAddressString() const firstLetter = address ? address[0].toUpperCase() : 'A' + const loraUrl = address ? getLoraAccountUrl(address) : '#' return (
+ {/* Explicit "View on Lora" CTA (extra clarity) */} +
  • + setIsDropdownOpen(false)} + > + View on Lora + ↗ + +
    • +
    {/* Disconnect Button */} diff --git a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx index 3339510..9919b76 100644 --- a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx +++ b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthProvider.tsx @@ -64,6 +64,7 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) { console.error('🎯 Failed to fetch user info:', err) } } + setIsInitialized(true) } catch (err) { const errorMessage = err instanceof Error ? err.message : 'Failed to initialize Web3Auth' @@ -125,6 +126,7 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) { setIsConnected(false) setProvider(null) setAlgorandAccount(null) + setUserInfo(null) } finally { setIsLoading(false) } @@ -137,10 +139,18 @@ export function Web3AuthProvider({ children }: { children: ReactNode }) { await logoutFromWeb3Auth() + // Clear React state setProvider(null) setIsConnected(false) setAlgorandAccount(null) setUserInfo(null) + + /** + * ✅ Fix A (most reliable for templates): + * Force a full refresh after logout so Web3Auth doesn't get stuck + * in an in-between cached state (e.g. button stuck on "Connecting..."). + */ + window.location.reload() } catch (err) { console.error('🎯 LOGOUT: Error:', err) setError(err instanceof Error ? err.message : 'Logout failed')