asastats-wallet-frontend / WalletComponent / WalletComponent

Class: WalletComponent

Manages a single Algorand wallet’s connection and the address-authorization flow for the ASA Stats authorize page.

Each supported wallet is rendered as its own card and driven by one WalletComponent. The component reflects connection/active state into the card’s controls and, on authorize, proves control of the active account by signing a 0-ALGO self-payment whose note carries a server nonce. The signed transaction is posted to the backend for off-chain verification and is never submitted to the network.

Authorize does not log the user in: the user is already authenticated, and a successful verify authorizes the address onto their profile, then redirects to the profile page.

Example

const component = new WalletComponent(wallet, manager);
component.bind(document.getElementById("wallet-pera")!);

Constructors

Constructor

new WalletComponent(wallet, manager, apiBase?): WalletComponent

Defined in: WalletComponent.ts:72

Parameters

wallet

BaseWallet

The wallet instance to manage.

manager

WalletManager

The wallet manager providing the algod client.

apiBase?

string = DEFAULT_API_BASE

Base path of the walletauth API (default /api/v2/wallet); pass a different value when the API is mounted elsewhere in a fork.

Returns

WalletComponent

Properties

apiBase

private apiBase: string

Defined in: WalletComponent.ts:59

Base path of the walletauth API endpoints.

element

private element: HTMLElement | null = null

Defined in: WalletComponent.ts:63

The bound DOM root of this wallet’s card, or null before bind.

manager

manager: WalletManager

Defined in: WalletComponent.ts:57

The wallet manager, used here for its configured algod client.

unsubscribe?

private optional unsubscribe?: () => void

Defined in: WalletComponent.ts:61

Unsubscribe handle returned by wallet.subscribe.

Returns

void

wallet

wallet: BaseWallet

Defined in: WalletComponent.ts:55

The wallet instance this component manages.

Methods

addEventListeners()

addEventListeners(): void

Defined in: WalletComponent.ts:345

Wires click and change delegation on the card root.

Clicks are routed by element id to connect/disconnect/set-active/authorize; a change on the account <select> updates the active account.

Returns

void

auth()

auth(): Promise<void>

Defined in: WalletComponent.ts:255

Authorizes the active account against the backend.

Flow: fetch a nonce for the active address, sign a 0-ALGO self-payment whose note is prefix + nonce, post the signed transaction to <apiBase>/verify/ with chain: "algorand", then redirect to the URL the server returns (the profile page). The chain field lets the deferred EVM branch slot in without a request reshape.

Returns

Promise<void>

bind()

bind(element): void

Defined in: WalletComponent.ts:90

Binds the component to its card element and wires event listeners.

Parameters

element

HTMLElement

The wallet card root (#wallet-<id>).

Returns

void

connect()

connect(): Promise<void>

Defined in: WalletComponent.ts:184

Connects the wallet.

Returns

Promise<void>

destroy()

destroy(): void

Defined in: WalletComponent.ts:376

Tears down the wallet state subscription.

Should be called when the component is discarded to avoid leaks.

Returns

void

disconnect()

disconnect(): Promise<void>

Defined in: WalletComponent.ts:189

Disconnects the wallet and clears its session.

Returns

Promise<void>

getCsrfToken()

private getCsrfToken(): string

Defined in: WalletComponent.ts:203

Reads the CSRF token from the cookie, falling back to a hidden input.

Returns

string

The CSRF token, or an empty string when none is present.

render()

private render(state): void

Defined in: WalletComponent.ts:110

Reflects the current wallet state into the card’s controls.

Toggles button visibility, maintains the “Active” badge on the card heading, and repopulates the account dropdown. All lookups are null-safe so a card may omit controls it does not need (e.g. there is no test-transaction button on the authorize page).

Parameters

state

Current wallet connection/active snapshot.

accounts

any[]

Connected accounts.

activeAccount

any

The currently active account, if any.

isActive

boolean

Whether this wallet is the active wallet.

isConnected

boolean

Whether the wallet is connected.

Returns

void

setActive()

setActive(): Promise<void>

Defined in: WalletComponent.ts:194

Makes this wallet the active wallet for signing.

Returns

Promise<void>

setActiveAccount()

setActiveAccount(event): Promise<void>

Defined in: WalletComponent.ts:333

Sets the active account from the dropdown selection.

Parameters

event

Event

The change event from the account <select>.

Returns

Promise<void>

showError()

private showError(message): void

Defined in: WalletComponent.ts:229

Surfaces an error to the user via a Materialize toast when available, otherwise appends a transient message node to the card.

The message can contain wallet-derived text (e.g. an active account address), so it is HTML-escaped before being handed to the toast, whose html option is inserted as markup. The DOM fallback uses textContent and is already safe.

Parameters

message

string

Human-readable error text (treated as untrusted).

Returns

void