Cross-chain loan enhancements

[parrot9design]

• [x] Add list sorting to the collateral & blockchain selectors.
• [x] When signed in, order both lists in the collateral section from highest to lowest collateral deposited, then by highest to lowest balance available. Sort the loan blockchain selector by wallet balance.

• [ ] Add the chain breakdown for each collateral type in the signed out & All collateral states:

• [x] Update the zero balance view in the Collateral section to prompt users to add the token to their wallet:

  

Add {token} to your {blockchain} wallet.

• [x] The above screenshot was taken in Firefox. Is there any way to fix the alignment of icons and chevrons on the Home page? Also noticed it on the Trade page, but to a lesser extent.

• [x] When you click to adjust your collateral/loan, the Confirm button should be inactive until there's a change in balance so that you can't complete empty transactions. https://github.com/user-attachments/assets/d0d1869f-688f-4774-9d83-35a80ce7900e

• [x] Hide the blockchain address in the borrow confirmation modal if you choose to receive bnUSD on the same chain.

• [x] Update the confirmation modals to use Transfer fee instead of Cross-chain fee:

• [x] This applies to the whole app, but when you first visit a page, it takes a while for the fonts etc to load in. Is there anything we can do to speed this up?

• [x] When you choose to withdraw ICX collateral, make Keep sICX the default and change recieve to receive:

• [x] Update the social image for the app (https://app.balanced.network/img-preview/home.png) to this one: home.png.zip

• [x] Update the sign in message in the Collateral section (... sign in with {chain}. -> ...sign in on {chain}.

• [x] Prevent the borrow fee in the modal from resetting to 0 bnUSD after you sign the transaction

• [x] After you click Connect for a chain in the Loan section, that blockchain should become the active one. https://github.com/user-attachments/assets/d8b812ef-4145-4cef-bb05-97c6612f9393

• [x] If a transaction has to roll back, let's change the modal message from Transfer rollbacked to Transaction reverted

[hetfly]

@parrot9design

Add the chain breakdown for each collateral type

Still waiting for the backend

This applies to the whole app, but when you first visit a page, it takes a while for the fonts etc to load in. Is there anything we can do to speed this up?

I've added a font-display: swap rule to the font face, that should specifically force loading the font as soon as the rule is read.

Usually this is handled by preloading the font, but it's kind of loosing the sense in our bundler, because the bundler hashes the asset names. Meaning the resulting font name has a gibberish in the end - font-name-D34Hhhd77.wofffor example. So we would have to import the files dynamically using javascript, then create the preloading tags using the dynamic names and then append the tags to the document. Doesn't sound like performance optimisation 😅

The css rule should help, if not and the font change issue is still annoying, I can look into the option above in more detail.

EDIT: Looks like the hashing is configurable, so I can look into it if the swap rule doesn't help.