profile: display balance breakdown #534

I have the storage size (storageUsage) but I'm not sure how to get the price per byte. Any idea?

@Patrick1904 no idea either. @nearmax how do we get this?

@vgrichina I got info from @kcole16 that cost per byte currently is 909 * 100_000_000_000_000_000

I set this in wallet.js
const ACCOUNT_COST_PER_BYTE = process.env.REACT_APP_ACCOUNT_COST_PER_BYTE || '90900000000000000000'

const costPerByte = new BN(ACCOUNT_COST_PER_BYTE)
const stateStaked = new BN(account.storageUsage).mul(costPerByte)

Here's result for my account with 500 NEAR

render · 2020-04-25T00:23:03Z

Your Render PR Server at https://betanet-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl478jd5s04rr9ufg.

render · 2020-04-25T00:23:05Z

Your Render PR Server at https://near-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl4f8jd5s04rr9uk0.

render · 2020-04-25T00:50:41Z

Your Render PR Server at https://betanet-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl478jd5s04rr9ufg.

render · 2020-05-18T23:43:37Z

Your Render PR Server at https://near-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl4f8jd5s04rr9uk0.

marcinbodnar · 2020-05-19T00:07:07Z

@Patrick1904 I also changed so Available Balance info will stay while typing, I think it might be handy if someone will like to send the max amount. It will prevent content from additional jumping so double plus.

render · 2020-05-19T00:07:44Z

Your Render PR Server at https://near-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl4f8jd5s04rr9uk0.

render · 2020-05-19T00:08:06Z

Your Render PR Server at https://betanet-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl478jd5s04rr9ufg.

vgrichina · 2020-05-19T01:27:57Z

package.json

@@ -7,6 +7,7 @@
    "connected-react-router": "^6.6.0",
    "fetch-send-json": "0.0.2",
    "js-sha256": "^0.9.0",
+    "near-api-js": "^0.25.0",
    "near-ledger-js": "^0.0.4",
    "near-seed-phrase": "^0.0.2",
    "nearlib": "^0.22.0",


nearlib should be removed

vgrichina · 2020-05-19T01:34:07Z

src/components/profile/Recovery/RecoveryContainer.js


        this.setState({ deletingMethod: method.kind })
        deleteRecoveryMethod(method)
            .then(({ error }) => {
                if (error) return
-                loadRecoveryMethods(accountId);


did this get changed to load recovery methods for current account? not sure how will this play with #580

accountId param was unnecessary, loadRecoveryMethods was using current logged account always:
https://github.com/near/near-wallet/pull/534/files/21a8e48a3f8fac0ad033d5640c34a5e72bfe8c21#diff-b3e6d1b5726af892a08cb5d16f807a6cL17

vgrichina · 2020-05-19T01:43:38Z

Looks like balance gets shortened in unfortunate ways sometimes (significant digits not displayed):

Patrick1904 · 2020-05-19T02:00:51Z

Looks like balance gets shortened in unfortunate ways sometimes (significant digits not displayed):

@corwinharrell do you have any ideas on how to adjust nav layout so that we can fit long account names and balances on desktop? Omitting user icon doesn't do much. Could stack the two again but think we need to adjust the design a bit then.

marcinbodnar · 2020-05-19T14:59:03Z

Looks like balance gets shortened in unfortunate ways sometimes (significant digits not displayed):

@Patrick1904 actually, the design for this part was different, it should look exactly the same as a mobile version (that's why it was the same component earlier), because we resign of image icons on every page at some point. I think that while you ware changing this part, you used old designs, it was looking like this before your changes:

kcole16 · 2020-05-19T15:04:19Z

Looks like balance gets shortened in unfortunate ways sometimes (significant digits not displayed)

This is a good point, and also a bit orthogonal to this PR.

I also hope very few users with that much NEAR ever use this wallet 😅 (and then only with Ledger)

render · 2020-05-19T15:53:16Z

Your Render PR Server at https://betanet-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl478jd5s04rr9ufg.

render · 2020-05-19T15:53:27Z

Your Render PR Server at https://near-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl4f8jd5s04rr9uk0.

Patrick1904 · 2020-05-19T16:02:20Z

@marcinbodnar yes the desktop stacking layout looks suboptimal IMO* (as mentioned). I believe @corwinharrell has been tinkering with a new account/profile component design for the nav that solves these issues and looks great.

*Desktop: left aligned texts + right aligned component = bad
*Mobile: left aligned texts + left aligned component = good

heycorwin · 2020-05-19T16:26:11Z

One thing I want to question/challenge is the persistent display of a user's balance in the application header. I can understand that the idea behind this is to allow the user to have an idea of their balance at any given moment.

That being said, I don't think this makes sense from a security perspective. At any point that you have the application open, anyone can see your balance with a simple glance at your screen. In addition, when I want to receive funds using the QR code method, I need to show my screen to another individual and have them scan my QR code with their camera. This instance also exposes my balance when I share my screen. If I'm concerned about security, this renders the QR code function useless. In future iterations, I'd like to suggest that we keep the balance one level deeper, (user must open the navigation to see available balance) in order to account for this. Thoughts?

Patrick1904 · 2020-05-19T16:38:00Z

In future iterations, I'd like to suggest that we keep the balance one level deeper, (user must open the navigation to see available balance) in order to account for this. Thoughts?

100%

render · 2020-05-20T01:12:04Z

Your Render PR Server at https://betanet-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl478jd5s04rr9ufg.

render · 2020-05-20T01:14:26Z

Your Render PR Server at https://near-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl4f8jd5s04rr9uk0.

render · 2020-05-20T06:31:28Z

Your Render PR Server at https://betanet-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl478jd5s04rr9ufg.

render · 2020-05-20T23:53:16Z

Your Render PR Server at https://betanet-wallet-pr-534.onrender.com is now live!

View it on your dashboard at https://dashboard.render.com/static/srv-bqfpl478jd5s04rr9ufg.

kcole16 · 2020-05-26T23:19:50Z

@vgrichina @marcinbodnar Outside of navbar balance concerns (will make separate issue), is this ready to merge?

marcinbodnar · 2020-05-26T23:24:45Z

@kcole16 yes

vgrichina · 2020-05-27T01:04:10Z

src/utils/wallet.js

@@ -43,8 +42,8 @@ async function getKeyMeta(publicKey) {

 class Wallet {
    constructor() {
-        this.keyStore = new nearlib.keyStores.BrowserLocalStorageKeyStore(window.localStorage, 'nearlib:keystore:')
-        const inMemorySigner = new nearlib.InMemorySigner(this.keyStore)
+        this.keyStore = new nearApiJs.keyStores.BrowserLocalStorageKeyStore(window.localStorage, 'nearlib:keystore:')


nit: everything here is JS, just nearApi would be enough )

heycorwin · 2020-05-27T16:47:02Z

Looks like balance gets shortened in unfortunate ways sometimes (significant digits not displayed):

@corwinharrell do you have any ideas on how to adjust nav layout so that we can fit long account names and balances on desktop? Omitting user icon doesn't do much. Could stack the two again but think we need to adjust the design a bit then.

@Patrick1904 apologies, I think I missed this when you originally posted it. Will continue to think about this while designing for in-progress issue and perhaps there's a low-lift option that offers a better solution.

profile: show balance breakdown

1782d8d

prevent user from sending/signing above available balance amount

ff900b9

locked + amount = totalBalance

5c33ebf

profile: add info popup to 'available balance'

075f5f8

Add tooltip info to available and min balance

a0f68e4

update min. balance copy

462fa43

add state stake amount

b28d54f

fix env variable

c7e2ded

Send Money: Available Balance info stays while typing (#481)

21a8e48

kcole16 approved these changes May 19, 2020

View reviewed changes

vgrichina reviewed May 19, 2020

View reviewed changes

marcinbodnar added 2 commits May 19, 2020 17:49

remove nearlib dependency (#481)

39af2df

Change from nearlib to nearApiJs (#481)

3a83e07

kcole16 mentioned this pull request May 26, 2020

Wrong error message when trying to send all your tokens #583

Closed

vgrichina reviewed May 27, 2020

View reviewed changes

vgrichina merged commit 8bd97cf into master May 27, 2020

MaximusHaximus deleted the locked-balance branch July 24, 2021 02:14

profile: display balance breakdown #534

profile: display balance breakdown #534

Conversation

Patrick1904 commented Apr 22, 2020 • edited by gitpod-io bot Loading

render bot commented Apr 22, 2020

render bot commented Apr 22, 2020

render bot commented Apr 22, 2020

render bot commented Apr 22, 2020

render bot commented Apr 23, 2020

render bot commented Apr 23, 2020

render bot commented Apr 23, 2020

render bot commented Apr 23, 2020

render bot commented Apr 24, 2020

render bot commented Apr 24, 2020

render bot commented Apr 24, 2020

render bot commented Apr 24, 2020

render bot commented Apr 24, 2020

render bot commented Apr 24, 2020

render bot commented Apr 24, 2020

render bot commented Apr 24, 2020

Patrick1904 commented Apr 24, 2020

vgrichina commented Apr 24, 2020

Patrick1904 commented Apr 25, 2020

render bot commented Apr 25, 2020

render bot commented Apr 25, 2020

render bot commented Apr 25, 2020

render bot commented May 18, 2020

marcinbodnar commented May 19, 2020

render bot commented May 19, 2020

render bot commented May 19, 2020

vgrichina May 19, 2020

Choose a reason for hiding this comment

vgrichina May 19, 2020

Choose a reason for hiding this comment

marcinbodnar May 19, 2020

Choose a reason for hiding this comment

vgrichina commented May 19, 2020

Patrick1904 commented May 19, 2020

marcinbodnar commented May 19, 2020 • edited Loading

kcole16 commented May 19, 2020

render bot commented May 19, 2020

render bot commented May 19, 2020

Patrick1904 commented May 19, 2020 • edited Loading

heycorwin commented May 19, 2020

Patrick1904 commented May 19, 2020

render bot commented May 20, 2020

render bot commented May 20, 2020

render bot commented May 20, 2020

render bot commented May 20, 2020

kcole16 commented May 26, 2020

marcinbodnar commented May 26, 2020

vgrichina May 27, 2020

Choose a reason for hiding this comment

heycorwin commented May 27, 2020

Patrick1904 commented Apr 22, 2020 •

edited by gitpod-io bot

Loading

marcinbodnar commented May 19, 2020 •

edited

Loading

Patrick1904 commented May 19, 2020 •

edited

Loading