Description Refactor existing token balance component to match UX design: https://projects.invisionapp.com/share/KWU1X9IEB2U#/screens/396034060

Still need to do fine-tuning for mobile widths but will do that another time.

Also added a bunch of stuff to the service while I was at it. But only the getWallet() function is really being used.

Testing Not particularly feasible in it's current state of staging limitations. Theoretically, testing should be like this:

• Navigate to /v2wallet
• Token balances (total, offchain & onchain) should be accurate.
• The "buy tokens" button should be disabled if you haven't set up your wallet yet
• "buy tokens" and "learn more about tokens" should navigate to /tokens
• The "transfer to on-chain" link should not appear if you haven't set up your wallet yet
• Estimated token payout value and time of next payout should be accurate
• The estimated token payout element should not be visible on mobile
• Ensure accuracy of tokens/usd/eth subtotal values returned by walletService.getWallet()

Note: "transfer to on-chain" doesn't do anything

Closes #2282

Part of &80

added scoped labels

added 1 commit

• c45fd44f - (feat): wallet balance tokens and service updates

Compare with previous version

added 1 commit

• 5cca6a47 - (feat): wallet token balance and service adjustments

Compare with previous version

added 9 commits

• 5cca6a47...8615ed34 - 2 commits from branch epic/wallet-80
• 0ed904cc - (fix): show pro settings placeholder dragdrop when empty
• 44ca320e - Preferred hashtag remembered in local storage #1366 (closed)
• 2e8a9896 - Merge branch 'feat/default-disc-tags-1366' into 'master'
• f44bd1ff - Sprint/TrendyTurtle: Blogs E2E test fix
• 4a7c4f12 - Merge branch 'fix/blogs-e2e-2308' into 'master'
• 017195d1 - Merge branch 'show-hashtag-placeholder' into 'master'
• 3ac17882 - Merge branch 'master' of gitlab.com:minds/front into tokens-balance-2282

Compare with previous version

added 1 commit

• 8e67036f - (feat): don't get fake wallet data from service

Compare with previous version

changed the description

added 1 commit

• 37ce3522 - (feat): uncomment some template logic

Compare with previous version

added 1 commit

• 5a5db254 - (feat): add router link to 'learn more' button

Compare with previous version

changed the description

unmarked as a Work In Progress

changed title from oken balance component to oken balance component

changed milestone to %Wallet Upgrade

added scoped label

changed the description

assigned to @eiennohi

Tokens, USD, Ether, Bitcoin need a 24 px line height, they are 444444 on the review site, but are 4A4A4A

Your Wallet h3, needs to be 24 px font weight and 32 px line height

Too much space between token balance header and balance

Transfer to On-Chain link missing on the Token page

"Today's estimated payout" is different that the "Daily estimated payout" on the mocks

Overview graph filters don't match the mocks. 1W instead of 7D 1M instead of 30D No 3 M 1Y instead of 12M No Max button

Graph nodes are blue circles instead of white ones (minus the hover over range)

Precision of the hover card for the tokens is off, needs to be .00

Does the Y Axis support the "140K" format?

Please up the mocks in Invision inspect. You can access to all sorts of information and extract the css with a click. https://projects.invisionapp.com/d/main/#/console/18532170/396034060/inspect

@eiennohi can you please handle the code side of things. Easiest if one of us reviews the UI and the other does the code. It looks pretty clean to me