Web Wallet UI and Features

The application is divided to 4 main sections:

  • LockScreen
  • AccountOverview
  • Staking, Governance, Public Goods Funding
  • Settings

These are further divided to individual screens or flows (comprising several screens) grouping activities that belong together. The user stories below are associated with visual representation of the views. They are either wireframes or placeholder designs. When the view is represented with a wireframe, there is likely a ready design for the view. When there is no ready designs the developers can develop the features using the placeholder designs.

Example: The wireframe for staking view would look like this:

And the placeholder design for the same feature looks like this:

Here is the example user stories for that view:

User can:

  • see an overview of own balances (staked, available, ...)
  • see own active staking positions
  • see listing and be able to search all validators
  • easily be able to filter validators by state (active, inactive, ...)

Views

LockScreen

When the user accesses the wallet for the first time there is a need to create a new account. This screen gives the user to possibility to do so or unlock the wallet by using an existing account.

LockScreen

Wireframe User can:

  • can to unlock the wallet by entering the master password
  • can to start a flow to create a new account

AccountOverview

This is the most important part of the application and the part where the user spends the most time. Here the user performs the most common tasks such as creating transactions. Only one account is selected as a time and the selected account is indicated here.

AccountOverview

Wireframe User can:

  • see the aggregated balance in fiat currency
  • can see the currently selected account address
  • can navigate to Settings/Accounts for changing the account
  • can see a listing of all hold tokens and their logos, balances, names

AccountOverview/TokenDetails

Wireframe User can:

  • can see the balance of token in native and fiat currency
  • can navigate to AccountOverview/TokenDetails/Receive for receiving tokens
  • can navigate to AccountOverview/TokenDetails/Send for sending tokens
  • can see a listing of past transaction of the current account and selected token

AccountOverview/TokenDetails/Receive

Wireframe User can:

  • see QR code of the address
  • see address as a string and copy it by clicking button

AccountOverview/TokenDetails/Send

Wireframe 1 Wireframe 2 Wireframe 3 User can: view 1:

  • see the balance of the token in current account
  • enter details: transfer amount, recipient address, memo
  • can select to perform the transaction as shielded

view 2:

  • see a summary of the transaction details
  • clear indication whether the transaction is transparent of shielded
  • select a gas fee
  • see an option in gas fees that is specific for shielded transactions
  • see a transaction summary including gas fee

view 3:

  • see a confirmation once the transaction is confirmed
  • be abel to navigate to see the new transaction in the block explorer
  • be able to navigate back to AccountOverview/TokenDetails

StakingGovernancePgf

Aside of AccountOverview this is a part that the user is likely visiting frequently. When user clicks the main menu Staking & Governance a sub menu with 3 options (Staking, Governance, Public Goods Funding) opens. Staking is selected as a default.

Staking/Overview

designs

User can:

  • see an overview of own balances (staked, available, ...)
  • see own active staking positions
  • see the state of all the staking position (pending, staked, unbonding with remaining time)
  • see listing and be able to search all validators
  • easily be able to filter validators by state (active, inactive, ...)

Staking/ValidatorDetails

designs

User can:

  • see all information in chain about the validator
  • see a logo of the validator
  • see a and click link to validators website
  • see all staking positions with the current validator
  • see the state of all the staking position (pending, staked, unbonding with remaining time)
  • see all unclaimed rewards with the current validator
  • open a modal to manage new staking, unstake, and claim rewards

Governance/Proposals

designs

User can:

  • see a listing of the latest proposals and their statuses
  • filter by proposal status
  • search by proposal title
  • navigate to the details of any proposal
  • navigate to a view to create new proposal

Governance/ProposalDetails

designs

User can:

  • see all the details of the proposal
  • can vote on proposal if vote is open and the user has not voted yet
  • can see all voting details of the proposal
  • can see full description

Governance/AddProposal

designs

User can:

  • enter the details (TBD) of the proposal
  • see a summary of the proposal
  • submit the proposal
  • be prompted for a payment by the wallet

PublicGoodsFunding/Overview

designs

User can:

  • see a list of current council members
  • see a list of the latest continuous funding
  • see a list of the latest retrospective funding
  • navigate to see current and past council members
  • navigate to see all continuous funding
  • navigate to see all retrospective funding

PublicGoodsFunding/Council

designs

User can:

  • see the details of the councils, including their funding, budget, members, ...
  • As a default see the current council is being displayed
  • select a tab "Past" and see all the past councils
  • Select any of the past council in the table and see it's details
  • navigate to governance vote for the council
  • navigate to see the details of continuous and retrospective funding of the funding of the council
  • navigate to the council member view to see details about the council members

PublicGoodsFunding/ContinuousFunding

designs

User can:

  • See all the funding
  • filter by: all, active, past
  • navigate to the council details that approved this funding
  • navigate to block explorer to see the transaction for the payments

PublicGoodsFunding/RetrospectiveFunding

designs

User can:

  • See all the funding
  • filter by: all, upcoming
  • navigate to the council details that approved this funding
  • navigate to block explorer to see the transaction for the payments

Settings

This is a part of the application that is visited less often. This is where the user can change settings of select the active account.

Settings

Wireframe User can:

  • Navigate to Settings/Accounts
  • Navigate to Settings/WalletSettings

Settings/WalletSettings

Wireframe User can:

  • see and change the fiat currency to display in various locations in the app where amounts are being displayed in fiat currency
  • Default fiat currency is USD

Settings/Accounts

Wireframe User can:

  • select an account by clicking it, when it becomes visibly selected
  • can navigate to Settings/AccountSettings for changing the settings of certain account
  • can navigate to Settings/Accounts/NewAccount/Start for adding a new account to the wallet

Settings/Accounts/NewAccount

Wireframe 1 Wireframe 2 Wireframe 3 Wireframe 4 Wireframe 5 User can:

view 1:

  • see a welcome screen that explain the flow

view 2:

  • enter an alias to the account
  • enter and confirm a password
  • select the length of the seed phrase (12 or 24 words)

view 3:

  • see a seed phrase that was generated
  • copy the seed phrase to clipboard

view 4:

  • enter a randomly requested word from the set of words. ("please enter word #5")

view 5:

  • see a confirmation that the account was created
  • navigate to AccountOverview and so that the newly created account becomes the selected account

Settings/AccountSettings

Wireframe User can:

  • Rename the selected account
  • display the seed phrase, user is being prompted for a password
  • delete account, user is prompted to input a security text to prevent an accidental deletion
  • select the network