- {isConnected ? (
- /* --- CONNECTED STATE --- */
-
-
-
+ {/* Error display */}
+ {lastError && (
+
+ {lastError}
+
+ )}
- {walletType === 'web3auth' && userInfo && (
-
- {userInfo.profileImage && (
-
- )}
-
-
- Connected via {formatSocialProvider(userInfo.typeOfLogin)}
-
-
{userInfo.email || userInfo.name}
-
-
+ {/* Connected state */}
+ {connected ? (
+
+
+
+
Connected
+
+
+ Active
+
+
+
+ {/* Address with copy button */}
+
+
+ {ellipseAddress(activeAddress || '', 8)}
+
+
+
+
+ {/* Full address (collapsible) */}
+
+
+ Show full address
+
+
+ {activeAddress}
+
+
+
+ {/* Wallet type and Lora link */}
+
+
+ Wallet: {activeWallet?.metadata?.name ?? activeWallet?.id}
+
+ {activeAddress && (
+
+ View on Lora
+
+
)}
-
-
- ) : (
- /* --- DISCONNECTED STATE --- */
- <>
+
+
+
+ ) : (
+
+ {/* Google Sign In (Web3Auth) */}
+ {web3AuthWallet && (
-
Social Login
- {socialOptions.map((option) => (
+
+
+ )}
+
+ {/* Divider */}
+ {web3AuthWallet && traditionalWallets.length > 0 && (
+
+ )}
+
+ {/* Traditional Wallets */}
+ {traditionalWallets.length > 0 && (
+
+
Algorand Wallets
+ {traditionalWallets.map((w) => (
))}
+ )}
-
-
-
- Or use a wallet
-
+ {/* Warning if Web3Auth didn't register */}
+ {!web3AuthWallet && (
+
+
+ Google sign-in is not available. Check console for Web3Auth errors.
+
-
-
- {traditionalWallets?.map((wallet) => (
-
- ))}
-
-
- )}
-
+ )}
+
+ )}
-
+
)
}
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx b/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
index 3eeed64..310b38b 100644
--- a/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/components/TokenizeAsset.tsx
@@ -4,8 +4,8 @@ import { useSnackbar } from 'notistack'
import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { AiOutlineCloudUpload, AiOutlineInfoCircle, AiOutlineLoading3Quarters } from 'react-icons/ai'
import { BsCoin } from 'react-icons/bs'
-import { useUnifiedWallet } from '../hooks/useUnifiedWallet'
import { getAlgodConfigFromViteEnvironment } from '../utils/network/getAlgoClientConfigs'
+import { useWallet } from '@txnlab/use-wallet-react'
/**
* Type for created assets stored in browser localStorage
@@ -175,8 +175,12 @@ export default function TokenizeAsset() {
const [nftFreeze, setNftFreeze] = useState
('')
const [nftClawback, setNftClawback] = useState('')
- // ===== Unified wallet (Web3Auth OR WalletConnect) =====
- const { signer, activeAddress } = useUnifiedWallet()
+ // ===== use-wallet (Web3Auth OR WalletConnect) =====
+ // Use transactionSigner (not signer) - this is the correct property name from use-wallet
+ const { transactionSigner, activeAddress } = useWallet()
+
+ // Alias for backward compatibility in the code
+ const signer = transactionSigner
// ===== Notifications =====
const { enqueueSnackbar } = useSnackbar()
@@ -283,7 +287,6 @@ export default function TokenizeAsset() {
setHasCheckedUsdcOnChain(true)
hasCheckedUsdcOnChainRef.current = true
} catch (e) {
- console.error('Failed to check USDC opt-in', e)
// On error, set to not-opted-in but don't mark as checked
// This allows retry on next render cycle
setUsdcStatus('not-opted-in')
@@ -385,10 +388,17 @@ export default function TokenizeAsset() {
* Opt-in is an asset transfer of 0 USDC to self
*/
const handleOptInUsdc = async () => {
- if (!signer || !activeAddress) {
+ // Check for activeAddress first (primary indicator of connection)
+ // transactionSigner might be available even if not explicitly set
+ if (!activeAddress) {
enqueueSnackbar('Please connect a wallet or continue with Google first.', { variant: 'warning' })
return
}
+
+ if (!signer) {
+ enqueueSnackbar('Wallet signer not available. Please try reconnecting your wallet.', { variant: 'error' })
+ return
+ }
// Prevent duplicate transactions if already opted in
if (usdcOptedIn) {
@@ -438,7 +448,6 @@ export default function TokenizeAsset() {
checkUsdcOptInStatus()
}, 2000)
} catch (e) {
- console.error('USDC opt-in failed', e)
enqueueSnackbar('USDC opt-in failed.', { variant: 'error' })
} finally {
setUsdcOptInLoading(false)
@@ -515,10 +524,16 @@ export default function TokenizeAsset() {
* Adjusts total supply by decimals and saves asset to localStorage
*/
const handleTokenize = async () => {
- if (!signer || !activeAddress) {
+ // Check for activeAddress first (primary indicator of connection)
+ if (!activeAddress) {
enqueueSnackbar('Please connect a wallet or continue with Google first.', { variant: 'warning' })
return
}
+
+ if (!signer) {
+ enqueueSnackbar('Wallet signer not available. Please try reconnecting your wallet.', { variant: 'error' })
+ return
+ }
if (!assetName || !unitName) {
enqueueSnackbar('Please enter an asset name and symbol.', { variant: 'warning' })
@@ -596,7 +611,6 @@ export default function TokenizeAsset() {
resetDefaults()
} catch (error) {
- console.error(error)
enqueueSnackbar('Failed to tokenize asset (ASA creation failed).', { variant: 'error' })
} finally {
setLoading(false)
@@ -608,10 +622,16 @@ export default function TokenizeAsset() {
* Handles validation, amount conversion, and transaction submission
*/
const handleTransferAsset = async () => {
- if (!signer || !activeAddress) {
+ // Check for activeAddress first (primary indicator of connection)
+ if (!activeAddress) {
enqueueSnackbar('Please connect a wallet or continue with Google first.', { variant: 'warning' })
return
}
+
+ if (!signer) {
+ enqueueSnackbar('Wallet signer not available. Please try reconnecting your wallet.', { variant: 'error' })
+ return
+ }
if (!receiverAddress) {
enqueueSnackbar('Please enter a recipient address.', { variant: 'warning' })
@@ -762,7 +782,6 @@ export default function TokenizeAsset() {
setReceiverAddress('')
setTransferAmount('1')
} catch (error) {
- console.error('Transfer failed', error)
if (transferMode === 'algo') {
enqueueSnackbar('ALGO send failed.', { variant: 'error' })
} else {
@@ -787,10 +806,16 @@ export default function TokenizeAsset() {
const handleDivClick = () => fileInputRef.current?.click()
const handleMintNFT = async () => {
- if (!signer || !activeAddress) {
+ // Check for activeAddress first (primary indicator of connection)
+ if (!activeAddress) {
enqueueSnackbar('Please connect a wallet or continue with Google first.', { variant: 'warning' })
return
}
+
+ if (!signer) {
+ enqueueSnackbar('Wallet signer not available. Please try reconnecting your wallet.', { variant: 'error' })
+ return
+ }
if (!selectedFile) {
enqueueSnackbar('Please select an image file to mint.', { variant: 'warning' })
@@ -843,7 +868,6 @@ export default function TokenizeAsset() {
metadataUrl = data.metadataUrl
if (!metadataUrl) throw new Error('Backend did not return a valid metadata URL')
} catch (e: any) {
- console.error(e)
enqueueSnackbar('Error uploading to backend. If in Codespaces, make port 3001 Public.', { variant: 'error' })
setNftLoading(false)
return
@@ -917,7 +941,6 @@ export default function TokenizeAsset() {
setPreviewUrl('')
if (fileInputRef.current) fileInputRef.current.value = ''
} catch (e: any) {
- console.error(e)
enqueueSnackbar(`Failed to mint NFT: ${e?.message || 'Unknown error'}`, { variant: 'error' })
} finally {
setNftLoading(false)
diff --git a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx b/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx
deleted file mode 100644
index 997349f..0000000
--- a/projects/TokenizeRWATemplate-frontend/src/components/Web3AuthButton.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import { useEffect, useState } from 'react'
-import { AiOutlineLoading3Quarters } from 'react-icons/ai'
-import { FaCheck, FaCopy, FaGoogle } from 'react-icons/fa'
-import { useWeb3Auth } from './Web3AuthProvider'
-
-/**
- * Web3AuthButton Component
- *
- * Displays "Sign in with Google" button when disconnected.
- * Shows connected Algorand address with disconnect option when logged in.
- *
- * Features:
- * - Wallet connection/disconnection with Web3Auth (Google OAuth)
- * - Auto-generation of Algorand wallet from Google credentials
- * - Loading states and error handling
- *
- * Usage:
- * ```tsx
- *
- * ```
- */
-export function Web3AuthButton() {
- const { isConnected, isLoading, error, algorandAccount, userInfo, login, logout } = useWeb3Auth()
- 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) => {
- const target = e.target as HTMLElement
- if (!target.closest('[data-dropdown]')) {
- setIsDropdownOpen(false)
- }
- }
-
- document.addEventListener('click', handleClickOutside)
- return () => document.removeEventListener('click', handleClickOutside)
- }, [])
-
- // Get address as string safely
- const getAddressString = (): string => {
- if (!algorandAccount?.address) return ''
- return String(algorandAccount.address)
- }
-
- const getLoraAccountUrl = (address: string) => `${LORA_ACCOUNT_BASE}/${address}`
-
- // Handle login with error feedback
- const handleLogin = async () => {
- try {
- await login()
- } catch (err) {
- console.error('Login error:', err)
- }
- }
-
- // Handle logout with error feedback
- const handleLogout = async () => {
- try {
- await logout()
- setIsDropdownOpen(false)
- } catch (err) {
- console.error('Logout error:', err)
- }
- }
-
- // Handle copy address with feedback
- const handleCopyAddress = () => {
- const address = getAddressString()
- if (!address) return
-
- navigator.clipboard.writeText(address)
- setCopied(true)
- setTimeout(() => setCopied(false), 2000)
- }
-
- // Show error state
- if (error && !isConnected) {
- return (
-
-
-
{error}
-
-
-
- {isDropdownOpen && (
-
- {/* User Info Header */}
- {userInfo && (userInfo.name || userInfo.email) && (
- <>
- -
-
- {userInfo.profileImage ? (
-
- ) : (
-
- {firstLetter}
-
- )}
-
- {userInfo.name && {userInfo.name}}
- {userInfo.email && {userInfo.email}}
-
-
-
-
- )}
-
- {/* Address Section */}
- -
- Algorand Address
-
-
- {/* Clickable address -> Lora */}
- -
- setIsDropdownOpen(false)}
- >
- {address}
- ↗
-
-
-
- {/* Copy Address Button */}
- -
-
-
-
- {/* Explicit "View on Lora" CTA (extra clarity) */}
- -
- setIsDropdownOpen(false)}
- >
- View on Lora
- ↗
-
-
-
-
-
- {/* Disconnect Button */}
- -
-
-
-
- )}
-
Not connected
;
- *
- * const result = await algorand.send.assetCreate({...});
- * ```
- */
-export function useAlgorandClient() {
- const { isConnected } = useWeb3Auth()
- const [client, setClient] = useState(null)
-
- useEffect(() => {
- if (isConnected) {
- const algodConfig = getAlgodConfigFromViteEnvironment()
- const algorand = AlgorandClient.fromConfig({ algodConfig })
- setClient(algorand)
- } else {
- setClient(null)
- }
- }, [isConnected])
-
- return client
-}
-
-/**
- * Hook to get an algosdk Algodv2 client using Web3Auth configuration
- *
- * @returns Algodv2 client instance
- *
- * @example
- * ```typescript
- * const algod = useAlgod();
- * const accountInfo = await algod.accountInformation(address).do();
- * ```
- */
-export function useAlgod() {
- const algodConfig = getAlgodConfigFromViteEnvironment()
-
- return new algosdk.Algodv2(algodConfig.token, algodConfig.server, algodConfig.port)
-}
-
-/**
- * Hook to get account balance in Algos
- *
- * @returns { balance: string | null, loading: boolean, error: string | null, refetch: () => Promise }
- *
- * @example
- * ```typescript
- * const { balance, loading, error } = useAccountBalance();
- *
- * if (loading) return Loading...
;
- * if (error) return Error: {error}
;
- * return Balance: {balance} ALGO
;
- * ```
- */
-export function useAccountBalance() {
- const { algorandAccount } = useWeb3Auth()
- const algod = useAlgod()
-
- const [balance, setBalance] = useState(null)
- const [loading, setLoading] = useState(false)
- const [error, setError] = useState(null)
-
- const fetchBalance = useCallback(async () => {
- if (!algorandAccount?.address) {
- setBalance(null)
- return
- }
-
- try {
- setLoading(true)
- setError(null)
-
- const accountInfo = await algod.accountInformation(algorandAccount.address).do()
- const balanceInAlgos = formatAmount(BigInt(accountInfo.amount), 6)
-
- setBalance(balanceInAlgos)
- } catch (err) {
- const errorMessage = err instanceof Error ? err.message : 'Failed to fetch balance'
- setError(errorMessage)
- setBalance(null)
- } finally {
- setLoading(false)
- }
- }, [algorandAccount?.address, algod])
-
- // Fetch balance on mount and when account changes
- useEffect(() => {
- fetchBalance()
- }, [fetchBalance])
-
- return {
- balance,
- loading,
- error,
- refetch: fetchBalance,
- }
-}
-
-/**
- * Hook to check if account has sufficient balance
- *
- * @param amount - Amount needed in Algos (string like "1.5")
- * @param fee - Transaction fee in Algos (default "0.001")
- * @returns { hasSufficientBalance: boolean, balance: string | null, required: string }
- *
- * @example
- * ```typescript
- * const { hasSufficientBalance } = useHasSufficientBalance("10");
- *
- * if (!hasSufficientBalance) {
- * return Insufficient balance. Need at least 10 ALGO
;
- * }
- * ```
- */
-export function useHasSufficientBalance(amount: string, fee: string = '0.001') {
- const { balance } = useAccountBalance()
-
- const hasSufficientBalance = (() => {
- if (!balance) return false
-
- try {
- const balanceBigInt = parseAmount(balance, 6)
- const amountBigInt = parseAmount(amount, 6)
- const feeBigInt = parseAmount(fee, 6)
-
- return balanceBigInt >= amountBigInt + feeBigInt
- } catch {
- return false
- }
- })()
-
- return {
- hasSufficientBalance,
- balance,
- required: `${parseAmount(amount, 6)} (+ ${fee} fee)`,
- }
-}
-
-/**
- * Hook to sign and submit transactions
- *
- * @returns { sendTransaction: (txns: Uint8Array[]) => Promise, loading: boolean, error: string | null }
- *
- * @example
- * ```typescript
- * const { sendTransaction, loading, error } = useSendTransaction();
- *
- * const handleSend = async () => {
- * const txnId = await sendTransaction([signedTxn]);
- * console.log('Sent:', txnId);
- * };
- * ```
- */
-export function useSendTransaction() {
- const algod = useAlgod()
- const [loading, setLoading] = useState(false)
- const [error, setError] = useState(null)
-
- const sendTransaction = useCallback(
- async (transactions: Uint8Array[]): Promise => {
- try {
- setLoading(true)
- setError(null)
-
- if (transactions.length === 0) {
- throw new Error('No transactions to send')
- }
-
- // Send the first transaction (or could batch if group)
- const result = await algod.sendRawTransaction(transactions[0]).do()
-
- return result.txId
- } catch (err) {
- const errorMessage = err instanceof Error ? err.message : 'Failed to send transaction'
- setError(errorMessage)
- throw err
- } finally {
- setLoading(false)
- }
- },
- [algod],
- )
-
- return {
- sendTransaction,
- loading,
- error,
- }
-}
-
-/**
- * Hook to wait for transaction confirmation
- *
- * @param txnId - Transaction ID to wait for
- * @param timeout - Timeout in seconds (default: 30)
- * @returns { confirmed: boolean, confirmation: any | null, loading: boolean, error: string | null }
- *
- * @example
- * ```typescript
- * const { confirmed, confirmation } = useWaitForConfirmation(txnId);
- *
- * if (confirmed) {
- * console.log('Confirmed round:', confirmation['confirmed-round']);
- * }
- * ```
- */
-export function useWaitForConfirmation(txnId: string | null, timeout: number = 30) {
- const algod = useAlgod()
-
- const [confirmed, setConfirmed] = useState(false)
- const [confirmation, setConfirmation] = useState | null>(null)
- const [loading, setLoading] = useState(false)
- const [error, setError] = useState(null)
-
- useEffect(() => {
- if (!txnId) return
-
- const waitForConfirmation = async () => {
- try {
- setLoading(true)
- setError(null)
-
- const confirmation = await algosdk.waitForConfirmation(algod, txnId, timeout)
-
- setConfirmation(confirmation)
- setConfirmed(true)
- } catch (err) {
- const errorMessage = err instanceof Error ? err.message : 'Failed to confirm transaction'
- setError(errorMessage)
- setConfirmed(false)
- } finally {
- setLoading(false)
- }
- }
-
- waitForConfirmation()
- }, [txnId, algod, timeout])
-
- return {
- confirmed,
- confirmation,
- loading,
- error,
- }
-}
-
-/**
- * Hook for creating and signing assets (ASAs)
- *
- * @returns { createAsset: (params: AssetCreateParams) => Promise, loading: boolean, error: string | null }
- *
- * @example
- * ```typescript
- * const { createAsset, loading } = useCreateAsset();
- *
- * const assetId = await createAsset({
- * total: 1000000n,
- * decimals: 6,
- * assetName: 'My Token',
- * unitName: 'MYT',
- * });
- * ```
- */
-export function useCreateAsset() {
- const { algorandAccount } = useWeb3Auth()
- const algorand = useAlgorandClient()
-
- const [loading, setLoading] = useState(false)
- const [error, setError] = useState(null)
-
- const createAsset = useCallback(
- async (params: {
- total: bigint
- decimals: number
- assetName: string
- unitName: string
- url?: string
- manager?: string
- reserve?: string
- freeze?: string
- clawback?: string
- }): Promise => {
- if (!algorandAccount || !algorand) {
- throw new Error('Not connected to Web3Auth')
- }
-
- try {
- setLoading(true)
- setError(null)
-
- const signer = createWeb3AuthSigner(algorandAccount)
-
- const result = await algorand.send.assetCreate({
- sender: algorandAccount.address,
- signer: signer,
- ...params,
- })
-
- const assetId = result.confirmation?.assetIndex
-
- if (!assetId) {
- throw new Error('Failed to get asset ID from confirmation')
- }
-
- return assetId
- } catch (err) {
- const errorMessage = err instanceof Error ? err.message : 'Failed to create asset'
- setError(errorMessage)
- throw err
- } finally {
- setLoading(false)
- }
- },
- [algorandAccount, algorand],
- )
-
- return {
- createAsset,
- loading,
- error,
- }
-}
-
-/**
- * Hook for transferring assets (ASAs or Algo)
- *
- * @returns { sendAsset: (params: AssetTransferParams) => Promise, loading: boolean, error: string | null }
- *
- * @example
- * ```typescript
- * const { sendAsset, loading } = useSendAsset();
- *
- * const txnId = await sendAsset({
- * to: recipientAddress,
- * assetId: 123456,
- * amount: 100n,
- * });
- * ```
- */
-export function useSendAsset() {
- const { algorandAccount } = useWeb3Auth()
- const algorand = useAlgorandClient()
-
- const [loading, setLoading] = useState(false)
- const [error, setError] = useState(null)
-
- const sendAsset = useCallback(
- async (params: { to: string; assetId?: number; amount: bigint; closeRemainderTo?: string }): Promise => {
- if (!algorandAccount || !algorand) {
- throw new Error('Not connected to Web3Auth')
- }
-
- try {
- setLoading(true)
- setError(null)
-
- const signer = createWeb3AuthSigner(algorandAccount)
-
- const result = params.assetId
- ? await algorand.send.assetTransfer({
- sender: algorandAccount.address,
- signer: signer,
- ...params,
- })
- : await algorand.send.payment({
- sender: algorandAccount.address,
- signer: signer,
- receiver: params.to,
- amount: params.amount,
- })
-
- return result.txId
- } catch (err) {
- const errorMessage = err instanceof Error ? err.message : 'Failed to send asset'
- setError(errorMessage)
- throw err
- } finally {
- setLoading(false)
- }
- },
- [algorandAccount, algorand],
- )
-
- return {
- sendAsset,
- loading,
- error,
- }
-}
diff --git a/projects/TokenizeRWATemplate-frontend/src/main.tsx b/projects/TokenizeRWATemplate-frontend/src/main.tsx
index adf72ec..7023db3 100644
--- a/projects/TokenizeRWATemplate-frontend/src/main.tsx
+++ b/projects/TokenizeRWATemplate-frontend/src/main.tsx
@@ -1,8 +1,8 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
-import './styles/main.css'
import ErrorBoundary from './components/ErrorBoundary'
+import './styles/main.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
diff --git a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/algorandAdapter.ts b/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/algorandAdapter.ts
deleted file mode 100644
index 02edc3b..0000000
--- a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/algorandAdapter.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import { IProvider } from '@web3auth/base'
-import algosdk from 'algosdk'
-
-/**
- * Algorand Account derived from Web3Auth provider
- *
- * Contains the Algorand address, mnemonic, and secret key
- * Can be used directly with AlgorandClient for signing transactions
- */
-export interface AlgorandAccountFromWeb3Auth {
- address: string
- mnemonic: string
- secretKey: Uint8Array
-}
-
-/**
- * Convert Web3Auth provider's private key to Algorand account
- *
- * Web3Auth returns a private key in hex format from the OpenLogin adapter.
- * This function:
- * 1. Extracts the private key from the provider
- * 2. Converts it to an Algorand mnemonic using algosdk
- * 3. Derives the account details from the mnemonic
- * 4. Returns address, mnemonic, and secret key for Algorand use
- *
- * @param provider - Web3Auth IProvider instance
- * @returns AlgorandAccountFromWeb3Auth with address, mnemonic, and secretKey
- * @throws Error if provider is invalid or key conversion fails
- *
- * @example
- * ```typescript
- * const provider = web3authInstance.provider;
- * const account = await getAlgorandAccount(provider);
- * console.log('Algorand address:', account.address);
- * // Use account.secretKey with algosdk to sign transactions
- * ```
- */
-export async function getAlgorandAccount(provider: IProvider): Promise {
- if (!provider) {
- throw new Error('Provider is required to derive Algorand account')
- }
-
- try {
- // Get the private key from Web3Auth provider
- // The private key is stored as a hex string in the provider's private key storage
- const privKey = await provider.request({
- method: 'private_key',
- })
-
- if (!privKey || typeof privKey !== 'string') {
- throw new Error('Failed to retrieve private key from Web3Auth provider')
- }
-
- // Remove '0x' prefix if present
- const cleanHexKey = privKey.startsWith('0x') ? privKey.slice(2) : privKey
-
- // Convert hex string to Uint8Array
- const privateKeyBytes = new Uint8Array(Buffer.from(cleanHexKey, 'hex'))
-
- // Use only the first 32 bytes for Ed25519 key (Web3Auth may provide more)
- const ed25519SecretKey = privateKeyBytes.slice(0, 32)
-
- // Convert Ed25519 private key to Algorand mnemonic
- // This creates a standard BIP39/Algorand-compatible mnemonic
- const mnemonic = algosdk.secretKeyToMnemonic(ed25519SecretKey)
-
- // Derive Algorand account from mnemonic
- // This gives us the address that corresponds to this key
- const accountFromMnemonic = algosdk.mnemonicToSecretKey(mnemonic)
-
- return {
- address: accountFromMnemonic.addr,
- mnemonic: mnemonic,
- secretKey: accountFromMnemonic.sk, // This is the full 64-byte secret key (32-byte private + 32-byte public)
- }
- } catch (error) {
- if (error instanceof Error) {
- throw new Error(`Failed to derive Algorand account from Web3Auth: ${error.message}`)
- }
- throw error
- }
-}
-
-/**
- * Create a transaction signer function compatible with AlgorandClient
- *
- * This function creates a signer that can be used with @algorandfoundation/algokit-utils
- * for signing transactions with the Web3Auth-derived Algorand account.
- *
- * @param secretKey - The Algorand secret key from getAlgorandAccount()
- * @returns A signer function that accepts transactions and returns signed transactions
- *
- * @example
- * ```typescript
- * const account = await getAlgorandAccount(provider);
- * const signer = createAlgorandSigner(account.secretKey);
- *
- * const result = await algorand.send.assetCreate({
- * sender: account.address,
- * signer: signer,
- * total: BigInt(1000000),
- * decimals: 6,
- * assetName: 'My Token',
- * unitName: 'MYT',
- * });
- * ```
- */
-export function createAlgorandSigner(secretKey: Uint8Array) {
- return async (transactions: Uint8Array[]): Promise => {
- const signedTxns: Uint8Array[] = []
-
- for (const txn of transactions) {
- try {
- // Sign each transaction with the secret key
- const signedTxn = algosdk.signTransaction(txn, secretKey)
- signedTxns.push(signedTxn.blob)
- } catch (error) {
- throw new Error(`Failed to sign transaction: ${error instanceof Error ? error.message : 'Unknown error'}`)
- }
- }
-
- return signedTxns
- }
-}
-
-/**
- * Validate if an Algorand address is valid
- * Useful for checking if account derivation succeeded
- *
- * @param address - The address to validate
- * @returns boolean
- */
-export function isValidAlgorandAddress(address: string): boolean {
- if (!address || typeof address !== 'string') {
- return false
- }
-
- try {
- algosdk.decodeAddress(address)
- return true
- } catch {
- return false
- }
-}
-
-/**
- * Get the public key from an Algorand secret key
- *
- * @param secretKey - The secret key (64 bytes)
- * @returns Uint8Array The public key (32 bytes)
- */
-export function getPublicKeyFromSecretKey(secretKey: Uint8Array): Uint8Array {
- if (secretKey.length !== 64) {
- throw new Error(`Invalid secret key length: expected 64 bytes, got ${secretKey.length}`)
- }
-
- // The public key is the second 32 bytes of the secret key in Ed25519
- return secretKey.slice(32)
-}
diff --git a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authConfig.ts b/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authConfig.ts
deleted file mode 100644
index 38dc99b..0000000
--- a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authConfig.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { CHAIN_NAMESPACES, IProvider, WEB3AUTH_NETWORK } from '@web3auth/base'
-import { CommonPrivateKeyProvider } from '@web3auth/base-provider'
-import { Web3Auth } from '@web3auth/modal'
-
-let web3authInstance: Web3Auth | null = null
-
-export async function initWeb3Auth(): Promise {
-
- if (web3authInstance) {
- return web3authInstance
- }
-
- const clientId = import.meta.env.VITE_WEB3AUTH_CLIENT_ID
-
- if (!clientId) {
- const error = new Error('VITE_WEB3AUTH_CLIENT_ID is not configured')
- console.error('❌ ERROR:', error.message)
- throw error
- }
-
- try {
-
- // Create the private key provider for Algorand
- const privateKeyProvider = new CommonPrivateKeyProvider({
- config: {
- chainConfig: {
- chainNamespace: CHAIN_NAMESPACES.OTHER,
- chainId: '0x1',
- rpcTarget: 'https://testnet-api.algonode.cloud',
- displayName: 'Algorand TestNet',
- blockExplorerUrl: 'https://testnet.algoexplorer.io',
- ticker: 'ALGO',
- tickerName: 'Algorand',
- },
- },
- })
-
- const web3AuthConfig = {
- clientId,
- web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
- privateKeyProvider, // ← THIS IS REQUIRED!
- uiConfig: {
- appName: 'TokenizeRWA',
- theme: {
- primary: '#000000',
- },
- mode: 'light' as const,
- loginMethodsOrder: ['google', 'facebook', 'github', 'twitter'],
- defaultLanguage: 'en',
- },
- }
-
- web3authInstance = new Web3Auth(web3AuthConfig)
-
- await web3authInstance.initModal()
-
- return web3authInstance
- } catch (error) {
- throw error
- }
-}
-
-export function getWeb3AuthInstance(): Web3Auth | null {
- return web3authInstance
-}
-
-export function getWeb3AuthProvider(): IProvider | null {
- const provider = web3authInstance?.provider || null
- return provider
-}
-
-export function isWeb3AuthConnected(): boolean {
- const connected = web3authInstance?.status === 'connected'
- return connected
-}
-
-export interface Web3AuthUserInfo {
- email?: string
- name?: string
- profileImage?: string
- typeOfLogin?: string
- [key: string]: unknown
-}
-
-export async function getWeb3AuthUserInfo(): Promise {
- if (!web3authInstance || !isWeb3AuthConnected()) {
- return null
- }
-
- try {
- const userInfo = await web3authInstance.getUserInfo()
- return userInfo as Web3AuthUserInfo
- } catch (error) {
- return null
- }
-}
-
-export async function logoutFromWeb3Auth(): Promise {
-
- if (!web3authInstance) {
- return
- }
-
- try {
- await web3authInstance.logout()
- } catch (error) {
- throw error
- }
-}
diff --git a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authIntegration.ts b/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authIntegration.ts
deleted file mode 100644
index 5345b0a..0000000
--- a/projects/TokenizeRWATemplate-frontend/src/utils/web3auth/web3authIntegration.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-// web3authIntegration.ts
-import algosdk, { TransactionSigner } from 'algosdk'
-import { AlgorandAccountFromWeb3Auth } from './algorandAdapter'
-
-/**
- * Integration Utilities for Web3Auth with AlgorandClient
- *
- * IMPORTANT:
- * @algorandfoundation/algokit-utils AlgorandClient expects `signer` to be a *function*
- * (algosdk.TransactionSigner), NOT an object like { sign: fn }.
- *
- * If you pass an object, you’ll hit: TypeError: signer is not a function
- */
-
-/**
- * (Legacy) Your old shape (kept only for compatibility if other code uses it).
- * AlgorandClient does NOT accept this shape as `signer`.
- */
-export interface AlgorandTransactionSigner {
- sign: (transactions: Uint8Array[]) => Promise
- sender?: string
-}
-
-/**
- * ✅ Correct: Convert Web3Auth Algorand account to an AlgorandClient-compatible signer function.
- *
- * Returns algosdk.TransactionSigner which matches AlgoKit / AlgorandClient expectations:
- * (txnGroup, indexesToSign) => Promise
- *
- * Use like:
- * const signer = createWeb3AuthSigner(algorandAccount)
- * await algorand.send.assetCreate({ sender: algorandAccount.address, signer, ... })
- */
-export function createWeb3AuthSigner(account: AlgorandAccountFromWeb3Auth): TransactionSigner {
- // Web3Auth account should contain a Uint8Array secretKey (Algorand secret key).
- // We build an algosdk basic account signer (official helper).
- const sk = account.secretKey
- const addr = account.address
-
- // If your secretKey is not a Uint8Array for some reason, try to coerce it.
- // (This is defensive; ideally it is already Uint8Array.)
- const secretKey: Uint8Array =
- sk instanceof Uint8Array
- ? sk
- : // @ts-expect-error - allow Array fallback
- Array.isArray(sk)
- ? Uint8Array.from(sk)
- : (() => {
- throw new Error('Web3Auth secretKey is not a Uint8Array (or number[]). Cannot sign transactions.')
- })()
-
- return algosdk.makeBasicAccountTransactionSigner({
- addr,
- sk: secretKey,
- })
-}
-
-/**
- * (Optional helper) If you *still* want the old object shape for other code,
- * this returns { sign, sender } — but DO NOT pass this as AlgorandClient `signer`.
- */
-export function createWeb3AuthSignerObject(account: AlgorandAccountFromWeb3Auth): AlgorandTransactionSigner {
- const signerFn = createWeb3AuthSigner(account)
-
- // Wrap TransactionSigner into "sign(bytes[])" style ONLY if you need it elsewhere
- const sign = async (transactions: Uint8Array[]) => {
- // These are already bytes; we need Transaction objects for TransactionSigner.
- // This wrapper is best-effort and not recommended for AlgoKit usage.
- const txns = transactions.map((b) => algosdk.decodeUnsignedTransaction(b))
- const signed = await signerFn(txns, txns.map((_, i) => i))
- return signed
- }
-
- return {
- sign,
- sender: account.address,
- }
-}
-
-/**
- * Create a multi-signature compatible signer for Web3Auth accounts
- *
- * For AlgoKit, you still want the signer to be a TransactionSigner function.
- * This returns both the function and some metadata.
- */
-export function createWeb3AuthMultiSigSigner(account: AlgorandAccountFromWeb3Auth) {
- return {
- signer: createWeb3AuthSigner(account), // ✅ TransactionSigner function
- sender: account.address,
- account, // original account for context
- }
-}
-
-/**
- * Get account information needed for transaction construction
- *
- * Returns the public key and address in formats needed for
- * transaction construction and verification
- */
-export function getWeb3AuthAccountInfo(account: AlgorandAccountFromWeb3Auth) {
- const decodedAddress = algosdk.decodeAddress(account.address)
-
- return {
- address: account.address,
- publicKeyBytes: decodedAddress.publicKey,
- publicKeyBase64: Buffer.from(decodedAddress.publicKey).toString('base64'),
- secretKeyHex: Buffer.from(account.secretKey).toString('hex'),
- mnemonicPhrase: account.mnemonic,
- }
-}
-
-/**
- * Verify that a transaction was signed by the Web3Auth account
- *
- * Useful for verification and testing
- */
-export function verifyWeb3AuthSignature(signedTransaction: Uint8Array, account: AlgorandAccountFromWeb3Auth): boolean {
- try {
- const decodedTxn = algosdk.decodeSignedTransaction(signedTransaction)
-
- // In algosdk, signature can be represented differently depending on type.
- // We’ll attempt to compare signer public key where available.
- const txnSigner = decodedTxn.sig?.signers?.[0] ?? decodedTxn.sig?.signer
-
- if (!txnSigner) return false
-
- const decodedAddress = algosdk.decodeAddress(account.address)
- return Buffer.from(txnSigner).equals(decodedAddress.publicKey)
- } catch (error) {
- console.error('Error verifying signature:', error)
- return false
- }
-}
-
-/**
- * Get transaction group size details
- */
-export function analyzeTransactionGroup(transactions: Uint8Array[]) {
- return {
- count: transactions.length,
- totalSize: transactions.reduce((sum, txn) => sum + txn.length, 0),
- averageSize: transactions.reduce((sum, txn) => sum + txn.length, 0) / transactions.length,
- }
-}
-
-/**
- * Format a transaction amount with proper decimals for display
- */
-export function formatAmount(amount: bigint | number, decimals: number = 6): string {
- const amountStr = amount.toString()
- const decimalPoints = decimals
-
- if (amountStr.length <= decimalPoints) {
- return `0.${amountStr.padStart(decimalPoints, '0')}`
- }
-
- const integerPart = amountStr.slice(0, -decimalPoints)
- const decimalPart = amountStr.slice(-decimalPoints)
-
- return `${integerPart}.${decimalPart}`
-}
-
-/**
- * Parse a user-input amount string to base units (reverse of formatAmount)
- */
-export function parseAmount(amount: string, decimals: number = 6): bigint {
- const trimmed = amount.trim()
-
- if (!trimmed) {
- throw new Error('Amount is required')
- }
-
- if (!/^\d+(\.\d+)?$/.test(trimmed)) {
- throw new Error('Invalid amount format')
- }
-
- const [integerPart = '0', decimalPart = ''] = trimmed.split('.')
-
- if (decimalPart.length > decimals) {
- throw new Error(`Too many decimal places (maximum ${decimals})`)
- }
-
- const paddedDecimal = decimalPart.padEnd(decimals, '0')
- const combined = integerPart + paddedDecimal
- return BigInt(combined)
-}
-
-/**
- * Check if Web3Auth account has sufficient balance for a transaction
- */
-export function hasSufficientBalance(balance: bigint, requiredAmount: bigint, minFee: bigint = BigInt(1000)): boolean {
- const totalRequired = requiredAmount + minFee
- return balance >= totalRequired
-}
diff --git a/projects/TokenizeRWATemplate-frontend/vite.config.ts b/projects/TokenizeRWATemplate-frontend/vite.config.ts
index e42dc7c..93d8938 100644
--- a/projects/TokenizeRWATemplate-frontend/vite.config.ts
+++ b/projects/TokenizeRWATemplate-frontend/vite.config.ts
@@ -7,9 +7,19 @@ export default defineConfig({
plugins: [
react(),
nodePolyfills({
- globals: {
- Buffer: true,
- },
+ protocolImports: true,
}),
],
+ build: {
+ commonjsOptions: {
+ transformMixedEsModules: true,
+ },
+ },
+ optimizeDeps: {
+ esbuildOptions: {
+ define: {
+ global: 'globalThis',
+ },
+ },
+ },
})