Agoric/documentation

How to Swap Assets (Wireframe + UI)

Closed this issue · 0 comments

sufyaankhan commented

Product UI Requirements Document for SWAP page of Dapp-Agoric-Basics

Screenshot 2024-03-11 at 1 31 54 PM

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 Swapping 2 assets

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, swapping 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 Swap Modal

  • 3.1 Pre-selected Asset
  • 3.2 Swap Options
  • 3.3 Asset Swap Ratio
  • 3.4 Swap Positions Button
  • 3.5 Asset Quantity Selection
  • 3.6 Fee Display

3.3 SWAP 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 Swap Modal

5.1 Pre-selected Asset

  • Provide an option to pre-select an asset for the swap.

5.2 Swap Options

  • Allow the user to swap either 1 front row ticket for 3 back row tickets or 3 back row tickets for 1 front row ticket.

5.3 Asset Swap Ratio

  • Display the swap ratio (e.g., 1 Front row = 3 Back row).

5.4 Swap Positions Button

  • Include a button to swap the positions of the two selected assets.

5.5 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.6 Fee Display

  • Highlight any fees associated with the swap.

6. SWAP Button

6.1 Interaction with Smart Contract

  • On clicking "SWAP," interact with the smart contract to execute the asset swap based on user's selections.

6.2 Interaction with Kepler Wallet

  • Deduct the total amount from the Kepler wallet.
  • Place the swapped asset in the user's 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 swapped.

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, NFT minting, and related functionalities.

8.3 Edge Case

If the user jumps to SWAP page before buying minting any NFT tickets, tell them to mint one first.