feat(frontend): Hide Send button for zero balance

[AntonioVentilii-DFINITY]

Motivation

We want to hide the Send button in the Hero when the user has no tokens, and display a different message. That is ONLY for the main page, and not the transactions page.

Note that we are talking about token balance and not USD balance, since for some tokens we don't have an exchange rate.

Changes

• Create util (and tests) to find any possible non-zero balance in the balancesStore.
• Create derived to find any non-zero balance, using the util created.
• Adjust Actions component to show Send button in the main page ONLY when there are at least some non-zero-balance tokens.
• Adjust ExchangeBalance to show a difference sentence if there are no tokens.

Tests

For the derived, I decided to create a specific util and test that one. I think I covered all possible scenarios, but any input welcome.

For the results, here it is (no changes for users with non-zero balances):

Transition

I tried to add a fade transition for the Send button when suddenly some token arrives, however, it messes up the layout, and since the Button layout is quite nested, I am not sure how to tackle this.

{#if sendAction}
	<div in:fade>
		<Send {isTransactionsPage} />
	</div>
{/if}

[AntonioVentilii-DFINITY]

OISY-64

[DenysKarmazynDFINITY]

The code LGTM, thanks!

Re. the transition - IMO, not event element should have it. In your particular case, having an animation for a middle button would probably look more like a layout shift. Therefore, I would proceed without it.

[peterpeterparker]

Here maybe a max width to avoid displaying solely "it" on a second line - i.e. displaying more words on the second line?

[AntonioVentilii-DFINITY]

@peterpeterparker

which one you think makes more sense? Or even less width?

[peterpeterparker]

I like this one because I firstly read "start using it!", that's a strong call to action.