[DDW-694] Implement the Tokens screen

[thedanheller]

This PR implements the wallet Tokens dedicated screen.

Todos

• Implement the new Tokens tab
  • Remove the wallet tabs icons and decrease the space between the items
  • Create the new dedicated screen
• List only the last five tokens and add a "View all tokens" button on the Wallet Summary screen
• Implement Favorite tokens

Screenshots

---

Testing Checklist

• Slack QA thread
• Test

---

Test Scenarios

Scenario 1 - Validate native token list on the summary screen

Given that I am on the summary screen of a synced wallet
And native tokens were sent from this wallet before
When I validate the native tokens list
Then I can see a list with the first tokens on the list

Scenario 2 - Validate summary screen for a wallet without Native Tokens transactions

Given that I am on the summary screen of a synced wallet
And native tokens were not sent from this wallet before
Then I can see no native tokens list is displayed on the "Summary" tab
And an explanation text is displayed
And the "Tokens" tab is not visible

Scenario 3 - Access "Tokens" tab from "Summary"

Given that I am on the summary screen of a synced wallet
And native tokens were sent from this wallet before
When I click on "View all tokens"
Then the tab "Tokens" is displayed

Scenario 4 - Validate native token tab when wallet is synced

Given that I have synced a wallet
When I check the "Tokens" tab
Then I can see a list with all the tokens that this wallet has ever had
And a search field is visible at the top of the screen

Scenario 5 - Select a token as favorite on "Tokens"

Given that I am on the "Tokens" tabs
And I have a token that is not selected as favorite
When I click on the star icon next to this token
Then I can see the star is filled on this row
And a new section "Favourites" is displayed
And it shows the token
And this applies to all the wallets that contain this token

Scenario 6 - Select a token as favorite on "Summary"

Given that I am on the "Summary" tabs
And I have a token that is not selected as favorite
When I click on the star icon next to this token
Then I can see the star is filled on this row
And on the tab "Tokens" I can see the token is added to the "Favorites" list
And this applies to all the wallets that contain this token

Scenario 7 - Remove a token from favorites on "Tokens"

Given that I am on the "Tokens" tabs
And I have a token that is selected as my favorite
When I click on the star icon next to this token
Then I can see the star is greyed out on this row
And the token is removed from the "Favourite" sections
And this applies to all the wallets that contain this token

Scenario 8 - Remove a token from favorites on "Summary"

Given that I am on the "Summary" tabs
And I have a token that is selected as a favorite
When I click on the star icon next to this token
Then I can see the star is greyed out on this row
And on the tab "Tokens" I can see the token is removed from the "Favorites" list
And this applies to all the wallets that contain this token

Scenario 10 - Validate token view for a syncing wallet

Given that I am on the summary screen of a syncing wallet
And native tokens were sent from this wallet before
When I validate the native tokens list in the "Summary" tab
Then I can see a spinner is displayed instead of the list
And this is also the case on the "Tokens" tab

---

Review Checklist

Basics

• PR has been assigned and has appropriate labels (feature/bug/chore, release-x.x.x)
• PR is updated to the most recent version of the target branch (and there are no conflicts)
• PR has a good description that summarizes all changes
• PR has default-sized Daedalus window screenshots or animated GIFs of important UI changes:
  • In English
  • In Japanese
• CHANGELOG entry has been added to the top of the appropriate section (Features, Fixes, Chores) and is linked to the correct PR on GitHub
• Automated tests: All acceptance and unit tests are passing (yarn test)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in development build (yarn dev)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in production build (yarn package / CI builds)
• There are no flow errors or warnings (yarn flow:test)
• There are no lint errors or warnings (yarn lint)
• There are no prettier errors or warnings (yarn prettier:check)
• There are no missing translations (running yarn manage:translations produces no changes)
• Text changes are proofread and approved (Jane Wild / Amy Reeve)
• Japanese text changes are proofread and approved (Junko Oda)
• UI changes look good in all themes (Alexander Rukin)
• Storybook works and no stories are broken (yarn storybook)
• In case of dependency changes yarn.lock file is updated

Code Quality

• Important parts of the code are properly commented and documented
• Code is properly typed with flow
• React components are split-up enough to avoid unnecessary re-renderings
• Any code that only works in main process is neatly separated from components

Testing

• New feature/change is covered by acceptance tests
• New feature/change is manually tested and approved by QA team
• All existing acceptance tests are still up-to-date
• New feature/change is covered by Daedalus Testing scenario
• All existing Daedalus Testing scenarios are still up-to-date

After Review

• Merge the PR
• Delete the source branch
• Move the ticket to done column on the YouTrack board
• Update Slack QA thread by marking it with a green checkmark

[thedanheller]

Thanks, @gabriela-ponce. They are all done, except for the last one:

• No spinner on the "Tokens" tab when the wallet is syncing. Check screenshot.

✅

• The search feature is not working. I searched by asset and name and the list was the same.

✅

• The metadata is centered. It used to be on the left.

✅

• Send is enabled for tokens with zero balance. This breaks the send form, could this button be disabled/removed when the balance is zero?.

✅

• When the wallet has no transactions with tokens, the "tokens" tab is still displayed. Check this screenshot.

✅ Hiding a tab is not good, as it would jump from one wallet to the other, but I have added the same "no tokens" screen as the Wallet Summary

• Tokens on incoming transactions are not included on "recently used tokens". Check this screenshot.

We are not implementing the "recently used tokens" list, for now, so in this case you mentioned, the received token is in the complete list. However, I have found a strange behavior: when sending a token, the receiver receives all tokens the sender has, with zero amount. I'm not sure if this is expected, but it looks strange:

The tx lists only the token that was actually sent:

[gabriela-ponce]

@daniloprates The fixes look good. Will continue tomorrow with a few more tests in different platforms before approving 👍

[alexander-rukin]

We use unformatted amounts to sort this list and it looks quite illogical 😅
p.s. hover shows an unformatted amount, so I guess it's okay to keep it as it is. just showing a case

[alexander-rukin]

Loogs good)

[thedanheller]

We use unformatted amounts to sort this list and it looks quite illogical 😅 p.s. hover shows an unformatted amount, so I guess it's okay to keep it as it is. just showing a case

@alexander-rukin nice catch! Fixed it.

[danielmain]

All fine, just check my comments

[danielmain]

Great job Danilo!