Update Donation Initiation Step

[decentralauren]

Business Description

We want to support people coming to donate to GoodCollective pools in a variety of ways. We want to support people who have GoodDollars as well as people who do not. We want to support people who want to make a one-time donation as well as an ongoing monthly donation. This ticket is to update the Donation screen UI to improve usability and clarity of the following scenarios of a user wanting to donate:

1. One-time Donation using G$
2. One-time donation using other Celo currencies (swap required)
3. Monthly donation using G$ (in perpetuity)
4. Monthly donation using other Celo currencies (swap & end date required)

This page as such needs to accommodate:

• A currency picker
• A field to enter a currency amount
• a liquidity / slippage check (from uniswap) when any currency besides G$ is selected
• showing / hiding of an end-date for monthly non-G$ donations) based on user selection.
• A summary of the donation transaction
• A CTA button that responds based on ability to execute transaction (e.g. whether or not the user has sufficient balance of the selected currency)

Warnings:

• Insufficient balance: When the user does not have sufficient balance to proceed
• Streaming alert: (For monthly donations in G$ only) that they will persist until balance is reduced to 0
• Insufficient liquidity: (for donations requiring a swap) when Uniswap does not have enough liquidity between chosen currency and G$ to perform the swap
• Price Impact Warning: (for donations requiring a swap)For price slippage exceeding a normal amount [ALREADY IMPLEMENTED]

Technical Implementation

*Outline the technical approach for building the feature. This section is typically filled out by the development team or can contain suggestions.
(dev team: @johnsmith-gooddollar @sirpy @L03TJ3)

• (What api's / sdk's could possibly be used)

Design Reference

Mobile

Desktop

[sirpy]

@decentralauren how is this different than what we already have?

[decentralauren]

@sirpy this is a ticket to describe all the requirements for this step to help Victoria improve the UX, as the requirements were all over the place before. There will be a few different updates included here but it's still in Design so please do not worry about it yet!

[SanaJamm]

@sirpy @decentralauren

Figma link:
https://www.figma.com/design/ihw1PxBvLxacTHnN2aj4lC/3.-Product?node-id=21263-33258&t=otFmk5CwWVdAUizn-1

also the "add indication to user when data is loading" github ticket is in the same design, link to github ticket:
#211

[L03TJ3]

@decentralauren kindly update here once design is fully done

[decentralauren]

@L03TJ3 @sirpy finalized and ready - have updated figma links in original ticket. please let me know any questions.

[L03TJ3]

@decentralauren my questions will be comments on figma