Product UI Requirements Document for Pay page of Dapp-Agoric-Basics
1. Introduction
1.1 Purpose
The Dapps Agoric Basics Dashboard aims to provide users with a seamless experience for connecting their Kepler wallet, viewing owned assets, and Transferring Assets to Someone
1.2 Scope
This document outlines the functional and design specifications for the Dapps Agoric Basics Dashboard. It covers features such as wallet connection, asset display, transferring assets, and wallet updates.
1.3 Document Conventions
Agoric follows the [Agoric Company Style Guide] for UI elements and design principles.
2. Stakeholders
Key stakeholder for this UI is the 3rd party developer who is aiming to learn Agoric platform and contract creation.
3. Functional Requirements
3.1 Connect Wallet
2.1 "Connect Wallet" Button
2.2 Wallet Connection Status
2.3 Display Owned Assets
3.2 Transfer Modal
3.1 Pre-selected Wallet
3.2 Pre-selected Asset (IST)
3.3 Dialog box to enter the Recipients Address
3.4 Address validation check
3.5 Asset Quantity Selection
3.6 Fee Display
3.3 TRANSFER Button
4.1 Interaction with Smart Contract
4.2 Interaction with Kepler Wallet
4.3 UI Update
4.4 Error Handling
3.4 Wallet / Balance
5.1 Display Updated Balance
5.2 Click and Learn
4. Connect Wallet
4.1 "Connect Wallet" Button
A button that initiates the connection process with the Kepler wallet.
4.2 Wallet Connection Status
Display the current connection status of the Kepler wallet (Connected/Disconnected).
4.3 Display Owned Assets
Once connected, show a list of assets owned by the user that are available for swapping.
35 Transfer Modal
5.1 Pre-selected Asset
Provide an option to pre-select an asset for the Transfer.
5.2 Transfer Options
Allow the user to enter a valid address of the recipient
5.3 Transfer Button
Include a button to transfer the assets of the selected assets.
5.4 Asset Quantity Selection
Allow the user to indicate the number of assets they want to swap.
Implement limits: 1 Front row asset and 3 Back row assets.
5.5 Fee Display
Highlight any fees associated with the Tranfer. (If possible)
6. TRANSFER Button
6.1 Interaction with Smart Contract
On clicking "Transfer," interact with the smart contract to execute the sending of the asset to the recipient.
6.2 Interaction with Kepler Wallet
Deduct the total amount from the Kepler wallet.
6.3 UI Update
Update the UI to reflect the latest inventory of the user's purse.
6.4 Error Handling
If there is not enough IST, show an error message instructing the user to acquire more IST.
7. Wallet / Balance
7.1 Display Updated Balance
Show the wallet/balance updated after the asset has been successfully transferred.
8 Click and Learn
8.1 Sample Code
The UI should provide a section displaying sample code for interacting with the smart contract.
8.2 Reference Docs
Include links to reference documentation guiding users on wallet interactions
8.3 Edge Case
If the user jumps to Transfer page and don't have enough IST, guide them on how to mint more IST in to their wallets.
Product UI Requirements Document for Pay page of Dapp-Agoric-Basics
1. Introduction
1.1 Purpose
The Dapps Agoric Basics Dashboard aims to provide users with a seamless experience for connecting their Kepler wallet, viewing owned assets, and Transferring Assets to Someone
1.2 Scope
This document outlines the functional and design specifications for the Dapps Agoric Basics Dashboard. It covers features such as wallet connection, asset display, transferring assets, and wallet updates.
1.3 Document Conventions
2. Stakeholders
Key stakeholder for this UI is the 3rd party developer who is aiming to learn Agoric platform and contract creation.
3. Functional Requirements
3.1 Connect Wallet
3.2 Transfer Modal
3.3 TRANSFER Button
3.4 Wallet / Balance
4. Connect Wallet
4.1 "Connect Wallet" Button
4.2 Wallet Connection Status
4.3 Display Owned Assets
35 Transfer Modal
5.1 Pre-selected Asset
5.2 Transfer Options
5.3 Transfer Button
5.4 Asset Quantity Selection
5.5 Fee Display
6. TRANSFER Button
6.1 Interaction with Smart Contract
6.2 Interaction with Kepler Wallet
6.3 UI Update
6.4 Error Handling
7. Wallet / Balance
7.1 Display Updated Balance
8 Click and Learn
8.1 Sample Code
The UI should provide a section displaying sample code for interacting with the smart contract.
8.2 Reference Docs
Include links to reference documentation guiding users on wallet interactions
8.3 Edge Case
If the user jumps to Transfer page and don't have enough IST, guide them on how to mint more IST in to their wallets.