rewards-frontend-package

---

rewards-frontend-package / WalletComponent / WalletComponent

Class: WalletComponent

Defined in: src/WalletComponent.ts:22

Component for managing individual wallet connections and interactions.

Handles the UI and logic for connecting/disconnecting wallets, setting active accounts, sending transactions, and authentication. Each wallet instance gets its own WalletComponent.

Example

const walletComponent = new WalletComponent(wallet, walletManager)
walletComponent.bind(document.getElementById('wallet-pera'))

Constructors

Constructor

new WalletComponent(wallet, manager): WalletComponent

Defined in: src/WalletComponent.ts:36

Creates an instance of WalletComponent.

Parameters

wallet

BaseWallet

The wallet instance to manage

manager

WalletManager

The wallet manager for broader state management

Returns

WalletComponent

Properties

element

private element: HTMLElement | null = null

Defined in: src/WalletComponent.ts:28

---

manager

manager: WalletManager

Defined in: src/WalletComponent.ts:26

The wallet manager for broader wallet state management

---

unsubscribe()?

private optional unsubscribe: () => void

Defined in: src/WalletComponent.ts:27

Returns

void

---

wallet

wallet: BaseWallet

Defined in: src/WalletComponent.ts:24

The wallet instance this component manages

Methods

addEventListeners()

private addEventListeners(): void

Defined in: src/WalletComponent.ts:349

Adds event listeners for user interactions.

Handles clicks on connection buttons and changes to account selection.

Returns

void

---

auth()

auth(nextUrl?): Promise<void>

Defined in: src/WalletComponent.ts:215

Authenticates the user with the backend using wallet signing.

Performs a cryptographic authentication flow:

1. Fetches a nonce from the backend

2. Signs the nonce with the wallet

3. Verifies the signature with the backend

4. Redirects on successful authentication

Parameters

nextUrl?

string

Returns

Promise<void>

---

bind()

bind(element): void

Defined in: src/WalletComponent.ts:50

Binds the component to a DOM element and initializes event listeners.

Parameters

element

HTMLElement

The HTML element to bind the component to

Returns

void

---

connect()

connect(): Promise<void>

Defined in: src/WalletComponent.ts:128

Connects the wallet.

Initiates the wallet connection process.

Returns

Promise<void>

---

destroy()

destroy(): void

Defined in: src/WalletComponent.ts:383

Cleans up the component by removing event listeners and subscriptions.

Should be called when the component is no longer needed to prevent memory leaks and unwanted behavior.

Returns

void

---

disconnect()

disconnect(): Promise<void>

Defined in: src/WalletComponent.ts:137

Disconnects the wallet.

Terminates the wallet connection and clears session data.

Returns

Promise<void>

---

render()

private render(state): void

Defined in: src/WalletComponent.ts:65

Renders the current wallet state to the UI.

Updates button visibility, active status badges, and account dropdown based on the wallet’s connection and active state.

Parameters

state

The current wallet state

accounts

any[]

activeAccount

any

isActive

boolean

isConnected

boolean

Returns

void

---

sendTransaction()

sendTransaction(): Promise<void>

Defined in: src/WalletComponent.ts:156

Sends a test transaction using the wallet.

Creates and sends a zero-amount payment transaction to the active account as a test of transaction signing capabilities.

Returns

Promise<void>

---

setActive()

setActive(): Promise<void>

Defined in: src/WalletComponent.ts:146

Sets this wallet as the active wallet.

Makes this wallet the primary wallet for transactions and operations.

Returns

Promise<void>

---

setActiveAccount()

setActiveAccount(event): Promise<void>

Defined in: src/WalletComponent.ts:337

Sets the active account for the wallet.

Parameters

event

Event

The change event from the account selection dropdown

Returns

Promise<void>