[DDW-500] Implement native tokens

[DeeJayElly]

This PR implements design for native tokens.

Design:
https://zpl.io/VDeA6BJ - multi-send
https://zpl.io/VxEwEPR - multi-send confirmation dialog
https://zpl.io/bAr9Roe - wallet with tokens
https://zpl.io/2vv8qWe - wallet with tokens - popover
https://zpl.io/VQlz9XP - tx details

Issues

Issue list is in this document

Scenarios

1. User opens up Send token page and sees receiver input field
2. User starts typing/pasting address in receiver input field.
3. If address is valid input field is rendered bellow which has ADA as currency.
4. User can select other tokens by clicking on + Add another token button
5. Input field with dropdown to choose tokens is presented
6. All the tokens in the dropdown are ordered alphabetically after default ADA.
7. When you click on + Add another token button new token input field will be added at the bottom
8. Every time user selects some token from the dropdown, that token is removed from the list for future selection on other assets.
9. When there is no more tokens available in the dropdown, + Add another token button will be disabled
10. ADA input field will be always render at the top of the list, first item and it cant be removed (ADA is mandatory as deposit when sending a transaction with tokens)
11. For ADA input field amount will always have format with 6 decimal places, while for tokens formatting will be with round numbers (without fractions).

Todos

• Old TODO list

New ones

• Add proper Confirmation dialog [@daniloprates ]
• Hide WalletSummaryAssets when syncing wallets [@nikolaglumac ]
• Reset validation when reseting Send form [@DeeJayElly ]
• On reset Send form, validation should reset errors [@DeeJayElly ]
• Fix vertical alignment of "No recent Tx" message [@nikolaglumac ]
• Estimate fee when there is token qty but not ADA qty [@DeeJayElly ]
• Fix minimum ADA required (Either min UTXO or fee calculation) [@DeeJayElly ]
• Fix "Add Token" isDisabled state handling (after adding and removing tokens) [@DeeJayElly ]
• If there's 0 decimal places, no dot should be allowed [@DeeJayElly ]
• Token input placeholder to follow the decimal figures [@DeeJayElly ]
• We should focus the token amount input field after clicking on the "+ add new token" button [@DeeJayElly ]
• Fix PopOver disappearing when hovering (also affects the stake pool tooltip on the Delegation center) [@daniloprates ]
• Improve copy button position (should be inline with the text regardless of the text length) [@daniloprates ]
• In the Tx filter, remove the word "Ada" in "Ada sent" and "Ada received" [@daniloprates ]
• Show AssetToken popOver in the Token input [@daniloprates ] (Not possible, for now. The hover element needs to be the hidden Dropdown input. If the PopOver hovering element gets on top, the PopOver won't work. We can improve this in the future, but for now it's too risky)
• Hide token when no fingerprint [@nikolaglumac ]
• Sort Tokens in the Summary by Fingerprint [@nikolaglumac ]
• Update copy of Wallet Receive screen [@nikolaglumac ]
• Check if the fingerprint is prefixed with 'token' or 'asset' [@nikolaglumac ]
• Investigate NaN error upon entering typing comma character in Numeric Input [@nikolaglumac ]

Tomorrow (Nice to have)

• Export CSV update

@DeeJayElly

• Summary screen - loading state for the asset section
• Summary screen - always show ADA as the first asset in the assets section
• Receive screen - keep left and right paddings aligned with the existing screens (should be reduced)
• Assets should be renamed to Tokens everywhere
• Finalize multi-send dialog
• Finalize multi-send confirmation dialog
• Add translations

@daniloprates

• Send Minimum ada required to Send form
• Remove Input from Tx (Still needs double check)
• Add AssetToken to Add to Transaction and change it to the correct layout
• Convert all AssetToken quantities into BigNumber
• Fix the Tx in the Wallets Summary screen
• Wallet Dropdown styling issues

@nikolaglumac

• Parse transaction total tokens moved
• Set listAssets polling (60 sec interval)
• Re-check Summary screen with repeated Asset data

Pending issues

• Paddings - left/right - reduce it to 20px on the form container
• Default token in the dropdown is always ADA - first token
• Fractions should be taken out from the metadata and default is 0 if using tokens, only show decimal places for ADA
• Tokens should be order alphabetically
• New receiver should never render token field before start typing in the field and passing validation
• We shouldn’t accept same address - show tooltip error when trying to add same address as receiver
• Ada field will be rendered always on bottom, you can’t change its currency but you can change its value. Every time you select a new token to add it, we will remove it from the dropdown list (reduce items in the list)
• When there are no more tokens in the dropdown, Add new token button will be disabled

UI issues document:

https://docs.google.com/document/d/1R5lhnDGMIT6JguzGc0fiYTPDv4QiNTm4hSjMFIyab8w/edit

Screenshots

---

Testing Checklist

• Slack QA thread
• Test

---

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

[nikolaglumac]

@DeeJayElly please merge latest develop...

[alan-mcnicholas]

Incredible work as always!

[miorsufianiohk]

LGTM 👍 . Tested on 16862.