feat: tokens balances

[fernandomg]

Closes #156

Description:

A refactor around useTokens hooks was made.

In fact, useTokens was moved to useTokenLists, and useTokens has a new API and logic. It will load balances into the tokens lists (that list generated by useTokenLists) if it's possible and required.

Components to display the balance were updated, and TokenBalance was created to reflect the current loading state of the balances which takes time to resolve the whole list of balances and prices for the tokens provided.

To gather balances and prices a new dependency was added: @lifi/sdk and the useTokens hook is tied to its interfaces and types; so, in the case of needing a new source of prices/balances, we'll need to refactor it.

The architectural decision behind this:

• having a singleton working as a cache for the data that would never change across the app session. That's the list of tokens used across the whole app (useTokenLists)
• on top of that cache, we have an extended version of the tokens (useTokens), where we add information to each token using the extensions field and store balance and priceUSD data. After that, the lists are sorted by price value in descending order.
• The list is memoized (useMemo), and will react to any change in the dependant values, so it properly reflects in the UI.
• The latter won't affect the cache, the idea is to have a non-modified version of the tokens to be extended/transformed on demand, by need.

Steps:

(Required steps to reproduce or test the fix / feature)

Type of change:

• [x] New feature
• [x] Bug fix
• [ ] Breaking change
• [x] Enhancement
• [x] Refactoring
• [x] Chore

How Has This Been Tested?

• [x] Manual testing
• [ ] Automated tests
• [ ] Other (explain)

Remember to check that:

• Your code follows the style guidelines of this project
• You have performed a self-review of your code
• You have commented your code in hard-to-understand areas
• You have made corresponding changes to the documentation
• Your changes generate no new warnings

Screenshots

https://github.com/user-attachments/assets/7f2718a7-5e25-48da-afb2-90f0cfe86637

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
dappbooster	✅ Ready (Inspect)	Visit Preview	Jul 22, 2024 4:10pm

[fernandomg]

Holy f*ck, that spinner looks terrible there (I'll fix it later...).

haha, some skeleton would look better. But it is what it is by default 😁

I'm not getting my ETH balances, it's always 0.00 (I tried with a wallet with 0.05 ETH and another one with 0.0001 ETH, maybe it's a rounding problem?).

The same happens with MATIC, so maybe your code hates my native tokens IDK.

hmmm!!! So despite having support for 0xe and 0x0 as representation for native tokens, it only works with the ZeroAddress.

I'll update the code and env var values.

[fernandomg]

@gabitoesmiapodo, please check if the balance is properly displayed now.

To me, it's working on the 4 chains.