Show token balances in drop down token list

[divine-comedian]

We should update the token list drop down menu on the donate page for a project

• Users click the drop down menu and now it opens a full modal for them to choose from a list of eligible tokens

Feature checklist

• - We show them their token balances right inside the modal
• - we will need to query their balances for many tokens
• - the list should then be sorted to show the highest balances at the top of the list
• - users can click a toggle that hides tokens with zero balances
• - users see a small logo on top of the token icons that signifies that the given token is givbacks eligible
• - message at the bottom to inform users that GIVbacks logo means that the token is GIVbacks eligible
• show states for when token is unselected, highlighted & selected

Figma

https://www.figma.com/file/d3ciTS36toS9mra0RAPMe2/Giveth-Design-System-v0.1?type=design&node-id=5189-12966&mode=design&t=a8nAqx77zJyXDFLx-4

Current flow for handling custom tokens

Screencast.2024-07-03.09.03.50.mp4

[RamRamez]

@mosaeedi I think the Figma link is outdated. Can you please share the new link?

[mosaeedi]

Sorry, it was moved to another file.

New Figma link

[divine-comedian]

@MohammadPCh has already developed this in "superfluid-develop-branch". I think we can close this issue.
@RamRamez

Do we fetch all the balances in that branch or just the 5 tokens that are superfluid eligible?

Is there anything else we need to build to accommodate using this modal for single donations?

[jainkrati]

@MohammadPCh pls take this up and move to QA if already fixed

[MohammadPCh]

Hey @divine-comedian, do we still support using custom tokens?

[MohammadPCh]

@divine-comedian how about showing gemini modal for donating GIV to givingBlock projects? do we need it or we can remove them?

[maryjaf]

I see this changes are on staging env but the status of this issue is "inprogress"
Is it ready for testing or not ?
Since we have a release in upcoming days if this issue won't be ready it should be reverted

[divine-comedian]

@kkatusic - If you're able to jump in here I will clarify what we need for the release:

fix bug related to showing native token balance when no token is selected.

let's leave out the sorting token balance requirements and work on it after the new version release.

[kkatusic]

@divine-comedian, I fixed that, please check it here

[divine-comedian]

@maryjaf - can you please test this one

[lovelgeorge99]

@divine-comedian i fixed the sorting based on highest balance here #4416
can you please check

[maryjaf]

Since this issue needs to be tested before release and I'm working on the qf issue now, it would be great if @LatifatAbdullahi has a chance to look into this issue, wdyt? @divine-comedian

[LatifatAbdullahi]

Test Update

@divine-comedian

• We show them their token balances right inside the modal - Pass

• We will need to query their balances for many tokens - Pass

• The list should then be sorted to show the highest balances at the top of the list - Fail

• Users can click a toggle that hides tokens with zero balances - Pass

• Users see a small logo on top of the token icons that signifies that the given token is Givbacks eligible - Pass

• Message at the bottom to inform users that GIVbacks logo means that the token is GIVbacks eligible - Pass

• Show states for when token is unselected - Pass

• Show states for when token is highlighted - Pass

• Show states for when token is selected - Pass

• The list should then be sorted to show the highest balances at the top of the list - Fail

[kkatusic]

@LatifatAbdullahi, cc @divine-comedian, please check balance sorting on this PR: here

[LatifatAbdullahi]

@divine-comedian @kkatusic

Test Update

The list should then be sorted to show the highest balances at the top of the list - Pass

[kkatusic]

@LatifatAbdullahi please when you get time can you test this issue task:

• Users can click a toggle that hides tokens with zero balances

Link for vercel temp link is here

[LatifatAbdullahi]

@kkatusic @MohammadPCh
Test Update

Users can click a toggle that hides tokens with zero balances - Test Pass

Before Clicking the check box

After clicking the check box

[kkatusic]

@LatifatAbdullahi just to notice here, @MohammadPCh resolved this issue, me and @lovelgeorge99 just fix 2 twings.

But thanks @LatifatAbdullahi to testing all options ;)

[LatifatAbdullahi]

Alright, noted, thanks

[divine-comedian]

@kkatusic - we need to make sure we are testing this on staging and not on feature branches - can you please confirm when this is on staging so it can be tested properly.

[kkatusic]

@kkatusic - we need to make sure we are testing this on staging and not on feature branches - can you please confirm when this is on staging so it can be tested properly.

sorry @divine-comedian , I thought this is some fast fix for this to be published on Friday, that's why I ask @LatifatAbdullahi to test on feature branch. And also when I close or someone else close pull request this issue automatically, that's why we left it on feature branch.

[kkatusic]

@LatifatAbdullahi these two fix, about balance order and 0 balance have been merged to staging, when you get time please test, thx.

[LatifatAbdullahi]

@kkatusic @divine-comedian

Test Update on Staging - Pass

Sorting tokens from highest in quantity to lowest - Pass

Before checking the box to hide tokens with zero balance

After checking the box to hide tokens with zero balance