# UI User Tutorial

This tutorial walks through the current Agora Expansion frontend.

Live UI:

https://adaocommunity.github.io/AgoraExpansion/

Local development:

```powershell
cd agora-expansion-fe
npm install
Copy-Item .env.example .env
npm start
```

Before the UI can show wallet assets, the wallet network and Blockfrost network must match. For example, a wallet address beginning with `addr_test` should use the Preprod Blockfrost URL and testnet API key, while a wallet address beginning with `addr1` should use Mainnet values.

## Terms Used In This Tutorial

- **CIP-30 wallet:** a browser wallet that exposes a Cardano dApp connection API, such as Eternl, Lace, or Yoroi.
- **Policy ID:** the identifier for a Cardano native asset policy. Together with the asset name, it identifies the FT or NFT being configured.
- **FT:** fungible token. Multiple units under the same asset ID can be counted with the same voting-power rule.
- **NFT:** non-fungible token. A unique asset can be used as a governance participation input.
- **Receipt NFT:** the token minted during lock/generate so the user can later redeem the locked assets.
- **Mocked evidence:** screenshots generated from the Playwright flow. They prove the UI path, not live-chain submission.

## 1. Connect Wallet

Open the app and select a supported wallet.

Supported wallets:

- Eternl
- Lace
- Yoroi

Evidence screenshot:

![Connect wallet](../../screenshots/agora-ui-smoke/01-connect-wallet.png)

## 2. Configure Voting Power

After connection, the app opens the token configuration screen.

Choose:

- Operation: `Sum` or `Multiply`
- Weight per config row
- Asset type: `FT` or `NFT`
- Asset selected from the wallet-backed dropdown

The asset dropdown is populated from wallet UTxOs via Blockfrost-backed lookup. If the dropdown is empty, verify the wallet network, Blockfrost URL, API key, and whether the wallet has matching assets.

The UI encodes the configuration into the URL query string so the setup can be shared or restored.

Evidence screenshot:

![Configured GOB weight](../../screenshots/agora-ui-smoke/02-configured-gob-weight.png)

## 3. Choose Generate Or Redeem

After submitting the configuration, choose whether to:

- Generate voting power by locking assets.
- Redeem a receipt NFT to unlock previously locked assets.

Evidence screenshot:

![Actions](../../screenshots/agora-ui-smoke/03-actions.png)

## 4. Lock Selected Assets

On the Generate path, select an asset that matches the configuration and enter the amount to lock.

When submitted, the wallet signs a transaction that locks assets and mints governance voting power plus a receipt NFT. In the live app, the user should review and approve the transaction inside the connected wallet.

Evidence screenshots:

![Lock ready](../../screenshots/agora-ui-smoke/04-lock-ready.png)

![Lock submitted](../../screenshots/agora-ui-smoke/05-lock-submitted.png)

## 5. Redeem Receipt NFT

On the Redeem path, the app searches the connected wallet for receipt NFTs matching the configured minter policy.

Select the receipt NFT and submit the transaction to retrieve the locked assets.

If no receipt appears, first confirm that the connected wallet is the same wallet that generated the receipt and that the wallet network still matches the Blockfrost configuration.

Evidence screenshots:

![Receipt ready](../../screenshots/agora-ui-smoke/06-receipt-ready.png)

![Redeem ready](../../screenshots/agora-ui-smoke/07-redeem-ready.png)

![Redeem submitted](../../screenshots/agora-ui-smoke/08-redeem-submitted.png)

## Notes For Reviewers

The screenshots in this package were created with the Playwright mocked-wallet flow. They prove the UI screens and interaction path. They do not represent a live mainnet transaction.

For live evidence, include BlockFrost-backed transaction hashes from Preprod or Mainnet and link them to the relevant explorer.