1. Feature Overview

Short Description
The goal is to allow users to Buy G$ easily by guiding them through a flow where they buy cUSD through the Onramper widget, then we swap it for G$ and send it back to their wallets.

Purpose
We want to create more demand drivers and to facilitate to users who might find it difficult to buy G$ directly from the reserve on Ethereum Mainnet or from the liquidity pools on Uniswap/Voltage.

2. Detailed Description:

User Story/Requirement
As a user, I want to buy g$ so that I can donate, use it in other dApps, or keep it for myself.

Acceptance Criteria

• User receives G$ in their wallet after purchasing cUSD through the Onramper widget.
• Progress bar shows at which stage of the purchase process they are.

Design

Animation States
1 Blue: User opens Buy G$
1 Blue with progress bar animation: User clicked or tapped the Onramper widget
1 Blue, static line between 1 and 2, 2 Blue: Funds have arrived the Smart Contract Wallet
1 Blue, static line between 1 and 2, 2 Blue with progress bar animation: Transaction sent to blockchain
1 Blue, static line between 1 and 2, 2 Blue with static line between 2 and 3, 3 Blue: Transaction success, G$ in user's wallet

Mobile/Desktop UI
https://www.figma.com/file/ihw1PxBvLxacTHnN2aj4lC/3.-Product-%F0%9F%92%B5?type=design&node-id=8462-5299&mode=design&t=m0chK13x87EHznwa-0

What needs to be tested before deployment
(qa)

• - The progress bar should start when clicking on the onramp widget
• - to test the flow after buying, send some (prod) G$'s to your unique sc-wallet address.
  ---- To find your sc wallet address, (connect to gooddapp, and stay on the gd-buy-page)

1. go to https://celoscan.io/address/0x00e533B7d6255D05b7f15034B1c989c21F51b91C#readContract
2. use the predict function with your wallet address (the one connected to gooddapp)
3. send funds to the address you got from predict
4. once funds arrive, the progress bar should switch over to step 2, and should consecutively also start to swap meaning the progress bar should load between step 2 and 3
5. if everything went well, your connected wallet should have received G$'s and progress bar should be fully blue (no animation)

• - the currency converter should calculate receive/input amount based on which input field a user fills in
  (prod)

Scoutgame task:

• the original implementation was done a while ago. make sure everything (still) works
• Test all the points mentioned above
• fix styling of G$ calculator. can be found in the good-design package of the web3mono-repo
  • Note: easiest way to work with local package from a different repository is using yalc. Ask if you don't know how to use this!
• Verify and make sure the animation steps are correctly working and resetting by following the manual steps