Try to display balance in top bar. #38
Conversation
src/AccountSelector.jsx
Outdated
| setAccountAddress(initialAddress); | ||
| }, [setAccountAddress, initialAddress]) | ||
| // Unsubscribe previous account's balance if subscription exists | ||
| unsubBalance && unsubBalance(); |
There was a problem hiding this comment.
This it not needed. As soon useEffect is called again (because one of the dependency changes) the return from the useEffect is called (so you are unsubscribed).
Just add a console.log in the return of the useEffect to see that it's called as soon as you change the selection. Hence you do not need to keep track of the unsubsciptions, and generally do not need the unsubBalance state.
There was a problem hiding this comment.
Ahh, indeed. https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect Thank you.
|
Thanks to Thibaut's help, this is now working and ready for further review and merge. |
|
Functionality works as expected, but imo implementation is kind of ugly. I would suggest we use a On the right side of the account list. I also suggest we add an "extra" react plugin which handles account balances better. For example, something which can configure what the "unit" of the chain is (how many digits are decimals), and display big numbers using the This could go into a folder called "utilities" next to the other components. Users would be able to reuse this component whenever displaying a balance in their own component. |
|
Yeah, totally ugly. I agree. |
This is an attempt to display a user's balance in the top bar along with the account selector. I wanted this for my marketplace dApp, and figured it would be generally useful.
The top bar correctly displays a user's balance when you select an account, and hides the balance display when no account is selected.
I can't understand why the display never updates when the user's balance changes (eg they transfer some tokens). In particular, I can't understand why the subscription callback is not called. Would be happy to pair program with someone on this.