ERC-20 Token balance

[adammake]

Background

The Casper Blockchain supports many cryptocurrencies, both fungible and nonfungible, in addition to its native CSPR token. Developers create tokens using popular standards such as ERC-20 (fungible), CEP-78 (non-fungible) and CEP-47 (non-fungible). Standards (basically a common framework for writing the token code) are popular because they make it easy for apps like Casper Wallet to identify and interact with those tokens on the network.

Casper Wallet users would benefit from being able to view balances for these different tokens within their Casper Wallet accounts.

Design
https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Wallet-%E2%80%93-Extension?node-id=4705%3A7274&t=VQw7Ky4fglydsnSV-1

Token list

As a Casper Wallet user, I can see the amount of CSPR and ERC-20 tokens owned by my account.

CSPR tokens are always listed at the top of the list.

The list is scrollable if it expands beyond the length of the screen.

The Home screen will be updated to include a list of token assets held within the account.

Each row represents a different currency and includes:

• The token logo (e.g. , )
• The token balance held by that account (e.g. 200 CSPR, 45 SWPR, etc )
• The fiat equivalent of that balance (e.g. $53.25)

The total value of all tokens in the account will be displayed above the token list, in fiat value.

Token detail page
Each token in the list is clickable (indicated by a chevron)
Clicking on a token in the token list directs the user to a token detail page which includes at the top of the screen:

• The token logo
• The token balance held by that account
• The fiat equivalent of that balance

Additionally, the token detail page will feature:

• a ‘View on CSPR.live’ CTA which directs to the Contract Package screen (eg for SWPR it would link to https://cspr.live/contract-package/5cf078b7768fd146630a0c74070e5a966504a8a87448a9865e5b9ca3d05d908f )

Out of scope
Eventually, the lower portion of the token detail page will feature a transaction history for that token, as well as the ability to swap and transfer.

Assumptions
Users do not need to manually add or import ERC-20 tokens they own in their wallet. All owned tokens will appear automatically.