Add cross-chain token breakdown for currency select

hetfly commented 3 months ago

close #1371

vercel[bot] commented 3 months ago

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

Name	Status	Preview	Comments	Updated (UTC)
balanced-network-interface	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 7:40am
balanced-network-stats	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 7:40am

parrot9design commented 3 months ago

Let’s only show the chain breakdown when you’re signed in and hold an asset on more than one chain. If we show all the chains all the time, the list becomes quite tedious to scan.
When you choose an asset from the Swap field, if it's a multi-chain asset held on a single chain, can we make it default to that chain when you click it? If your balance of that asset is zero or you hold it on multiple chains, it should still use the default chain.

hetfly commented 3 months ago

@parrot9design @FezBox In the new token section under the swap panel, Fez mentioned he would like to see the total pool liquidity per token, not the actual amount of the token in the pool. This however shows double the liquidity compared to the token section on the stats page in the same table. Do we keep it like this and handle the difference with tooltip in LIQUIDITY column header text?

parrot9design commented 3 months ago

@parrot9design @FezBox In the new token section under the swap panel, Fez mentioned he would like to see the total pool liquidity per token, not the actual amount of the token in the pool. This however shows double the liquidity compared to the token section on the stats page in the same table. Do we keep it like this and handle the difference with tooltip in LIQUIDITY column header text?

No, let’s keep the Tokens section focused on the tokens (so only show the liquidity for that specific token, like the Stats page). The Liquidity Pools section under the Supply tab already shows the pool-specific data, so it doesn’t make sense to confuse the Tokens section by displaying double the amount.

parrot9design commented 3 months ago

[x] Order the Tokens section either alphabetically or by liquidity.

[x] Let’s move the community token list somewhere else, as the tokens aren’t valuable enough to be front and centre at all times. Maybe to the end of the list in the asset selector, and it also appears if you search for something?

[x] Let’s add the specific token amount under the liquidity value.
[x] Let’s also move the tooltip showing the chain breakdowns for USDC, ETH, and BTC to the left of the token amount, since that's the value it's directly related to.

[x] Add the ICON chain logo to ICON-only assets in the asset dropdowns

[ ] USDT isn’t on the token list
[x] In the asset selectors, it has a price of $NaN

[x] What happened to the chain info for the first token in the Supply tab?

[x] In the All assets view in the dropdowns, zero-balance assets should use a – instead of a 0.

[x] Do we need to split the Supply and Bridge dropdown lists into Your assets and All assets? They don't have the same level of multi-chain complexity as the Swap tab does, so unless you have strong feelings about it, we could probably keep the list simple and just add the blockchain logo to the assets listed. If you think we should keep them, they should default to Your assets when you have a balance available.

[x] Clicking the active blockchain in the Bridge tab closes the blockchain dropdown, but it doesn't do anything here. https://github.com/user-attachments/assets/8081b927-6fa8-4ded-87f3-dcd2bed833d4

[x] Is it possible to hide the Wallet column for the blockchain selectors on the Swap & Transfer tabs when no wallet is connected (this would be nice for the blockchain selectors on the Home page, as well)? Although we definitely need to add a search bar, it'd be a shame to move completely away from the simple selector we have in place currently.

hetfly commented 3 months ago

USDT isn’t on the token list

Need to wait until USDT is included in the Balanced oracle contract to avoid unnecessary conditional logic. I'm expecting it to be done during the next vote.

we could probably keep the list simple and just add the blockchain logo to the assets listed.

Do you mean adding ICON logos to supply tab assets and currently selected From chain logos to bridge assets?

(this would be nice for the blockchain selectors on the Home page, as well)

There is a connect prompt in the loan selector, that could be useful. And the homepage sections have the selector quite wide, so hiding the content on the right side would make it look a bit weird. I might lean towards keeping the homepage as is, but it's not a strong opinion at all.

FezBox commented 3 months ago

I do think the tokens should be displayed like this, but only the key pairs. Right now, we are showing half the amount of what's in the lp As a user I would see what assets and how big their pool is not just one side of it

parrot9design commented 3 months ago

We already have pool-related info on the Trade page, so there’s no reason to repeat ourselves. Screenshot 2024-08-27 at 2 24 07 PM

The only reason to include the Tokens section at all is to make it easier for people to see which assets (and how much) are available to trade – and on which chains.

The one adjustment I'd make is to list all pools in the Liquidity Pools section, not just the ones with BALN incentives.

parrot9design commented 3 months ago

we could probably keep the list simple and just add the blockchain logo to the assets listed.

Do you mean adding ICON logos to supply tab assets and currently selected From chain logos to bridge assets?

Yes please!

(this would be nice for the blockchain selectors on the Home page, as well)

There is a connect prompt in the loan selector, that could be useful. And the homepage sections have the selector quite wide, so hiding the content on the right side would make it look a bit weird. I might lean towards keeping the homepage as is, but it's not a strong opinion at all.

Yeah, let's leave the Home page as it is. I was wondering if we should add the Connect prompt to the Bridge chain selector so there's a more direct option to connect from that tab, but I don't want to force people to connect a wallet just to see what their options are.

[ ] When you search for an asset/chain, can we make it so you only see relevant results (including which chains we reveal)?

E.g. searching for a chain ("base", "havah") currently returns all supported assets and the full list of chains they're available on. If you search for a chain while in the Your assets view, you'll see assets that don't appear to meet your search term because you hold them on another supported chain. This makes it quite difficult to filter and assess your options. Screenshot 2024-08-27 at 4 57 08 PM

[x] USDT, USDC, and hyTB don't trigger the blockchain selector to appear after you choose them to swap. Also, I'm not sure what the default should be, but I don't think ICON is the right choice for any of them?

We really need to do something about the Marketcap label, as well: while it's accurate for ICON-based tokens, it's totally off-base for cross-chain tokens (it says BTC's marketcap is $496,568 / 7.76 BTC). I'll need to sleep on it, but worst case we'll have to add a tooltip to explain the situation.

hetfly commented 3 months ago

I've set the default chains according to the highest liquidity. USDC - AVAX hyTB - AVAX USDT - Arbitrum

hetfly commented 3 months ago

We really need to do something about the Marketcap label

Definitely, I meant to bring that up as well.

I wouldn't probably change the MARKETCAP header, since it's important meta, so the tooltip might be it.

hetfly commented 3 months ago

can we make it so you only see relevant results (including which chains we reveal)?

The chain based search in the asset selector makes things very complex in the context of recently added tabs (which even more so are in the swap panel only). I also doubt a bit that people would use it frequently for filtering the assets. Additionally, we have the token overview below the swap panel which includes the compatible chains at a glance.

I would actually prefer to remove the chain based search from the asset selector if you're not against it @parrot9design

parrot9design commented 3 months ago

@hetfly would it be easier to add the ability to search by chain to the wallet dropdown? While you can filter the token section by chain, it would be nice to do the same somewhere for your wallet, as well.

This PR has been a while in the making, though, so I'm happy to add it to the list of related issues in https://github.com/balancednetwork/balanced-network-interface/issues/1403 to avoid delaying the release any further.

[x] Change Marketcap to Market cap and Liquidity to Available
[x] Add a tooltip next to Market cap:

Based on the amount of tokens that have interacted with Balanced and/or the ICON blockchain.
<br><br>
It does not reflect the total market cap for multi-chain assets.

(I'm happy to be corrected if this description is not quite accurate.)

parrot9design commented 3 months ago

I don't know if this needs to be addressed, but random observation: you can't disconnect an EVM wallet unless you have internet.

[x] Let's add No assets found. to the Your assets view when you don't hold any supported assets, similar to the message that appears for an unsuccessful search:

[x] Move the 2nd asset & blockchain selectors underneath the input fields. They look a bit strange floating above, and it makes it harder to interact with the search and toggle options.

[ ] USDT is missing some decimal precision:

hetfly commented 3 months ago

This PR has been a while in the making, though, so I'm happy to add it to the list of related issues

Let's do one final round, then we can move outstanding issues there, I'd like to merge this this week.

(I'm happy to be corrected if this description is not quite accurate.)

Thanks, looks good.

I don't know if this needs to be addressed, but random observation: you can't disconnect an EVM wallet unless you have internet.

I wouldn't spend time on this.

Move the 2nd asset & blockchain selectors underneath the input fields. They look a bit strange floating above, and it makes it harder to interact with the search and toggle options.

The asset and chain dropdown is now forced to be placed underneath the selector. Handles the issue mentioned here, as well https://github.com/balancednetwork/balanced-network-interface/issues/1402 - Prevent the Swap For asset selector from repositioning itself as you type.

USDT is missing some decimal precision

This is again related to USDT missing price. Let's avoid adding temporary conditional logic and wait for the backend. Should be done shortly after the next vote.

What do you think about sorting the tokens underneath the swap panel by price change by default? Shows nicely where the action is, as opposed to displaying AVAX or ICON on the first place every time. (default sort by name or by market cap respectively)

hetfly commented 3 months ago

would it be easier to add the ability to search by chain to the wallet dropdown?

That's already done

parrot9design commented 3 months ago

What do you think about sorting the tokens underneath the swap panel by price change by default? Shows nicely where the action is, as opposed to displaying AVAX or ICON on the first place every time. (default sort by name or by market cap respectively)

Yeah, you're right, what was I thinking? Price change would be the most useful and interesting sorting method. 👍

would it be easier to add the ability to search by chain to the wallet dropdown?

That's already done

While it does allow you to search by chain, I meant so that it only shows you results for that chain. e.g. if you hold ETH on multiple chains and search Base, it'll show you the ETH balance on all chains instead of just Base.

Screenshot 2024-08-29 at 8 37 01 AM

parrot9design commented 3 months ago

The asset and chain dropdown is now forced to be placed underneath the selector.

If the second asset is bnUSD or USDC, the chain dropdown appears above the selector until you scroll down the page a bit.

If clicking between the Swap / Supply / Bridge tabs at mobile, there's a noticeable delay between tapping and the page updating. There's a slight delay in the live app, but it feels at least twice as slow now.

hetfly commented 2 months ago

If clicking between the Swap / Supply / Bridge tabs at mobile, there's a noticeable delay between tapping and the page updating.

It feels fine to me, could you check again if it wasn't a local issue please?

parrot9design commented 2 months ago

@hetfly Looks like it’s fine within the Hana mobile app, but it’s pretty slow in Safari on both my iPhone and iPad, even after I cleared the cache & gave them a restart.

https://github.com/user-attachments/assets/17560d79-7c53-467c-90dd-40464f6502ff

hetfly commented 2 months ago

@parrot9design it feels absolutely fine on my iPhone 13 on Safari, could you also check on Firefox and Chrome on your device if it's the same please?

parrot9design commented 2 months ago

Looks like the issue is related to Safari’s content blockers. Zero delay after turning them off for this page.

hetfly commented 2 months ago

@parrot9design alright, so are you happy with merging this as is?

parrot9design commented 2 months ago

Yep, we can merge this PR as-is, but the slowness is substantial so let's see if there's anything we can do to address it post-launch (telling people to turn off their content blockers for the site isn’t an ideal long-term solution).

ChatGPT has some recommendations, including:

1. Review and Optimize Resource Loading

Reduce Third-Party Scripts: Content blockers often target third-party scripts. Minimize or eliminate non-essential third-party scripts to reduce the chances of blocking.
Optimize Assets: Make sure all images, scripts, and stylesheets are optimized for size and loading performance.
Use Async and Defer for Scripts: Load JavaScript files asynchronously or defer them until after the page has loaded to improve performance.

2. Use First-Party Domains

Host Scripts on Your Domain: Hosting scripts on your own domain can reduce the likelihood of them being blocked by content blockers that typically target third-party domains.

3. Implement Progressive Enhancement

Design your app so that essential functionality and content load even if some scripts are blocked. Use progressive enhancement techniques to ensure core functionality remains intact.

4. Check for Common Blocking Patterns

Content blockers may use pattern matching to block resources. Review the resources being blocked and identify common patterns (e.g., filenames containing "ad" or "tracker") that you can avoid.

5. Use Content Security Policy (CSP)

Implement CSP headers to explicitly allow your own resources and block unwanted ones. This can sometimes help mitigate issues caused by overly aggressive blockers.

6. Serve Critical CSS Inline

Inline critical CSS to reduce the number of external requests, which can be targeted by blockers.

7. Analyze Network Requests

Use Safari’s developer tools to analyze the network requests and see which ones are getting blocked. This will help you identify and address specific issues related to content blockers.

hetfly commented 2 months ago

@0xmilktea please review the PR

parrot9design commented 2 months ago

Apologies for not flagging this sooner, but the Tokens section should include assets held in the Stability Fund (not sure if we should include hyTB, though). The USDC listing currently reports only $1 available, and USDT doesn't show up at all.

Screenshot 2024-09-04 at 3 34 53 PM

balancednetwork / balanced-network-interface