Implement "Buy G$"

[patpedrosa]

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)

• - go through the actual flow by buying G$'s (prod)
• - all of qa

[patpedrosa]

@drptiago We need to figure out how to track the usage of the Buy G$ page. We're limited on the interface as we can't pull info from Onramper. We could use the progress bar on an interface level, as it has different states for each of the stages.

@sirpy do you see a better way to track this?

[sirpy]

@patpedrosa
We can either track on the UI, or we can track via dapplooker.
UI event is the simpler approach.
But with dapplooker you could theoretically track also what was done with the G$s, but you can't track how many people visited the page, only successful purchaes.
Dapplooker recently offered to build some "funnels" see TG group. This could be an opportunity to test it.

[L03TJ3]

@sirpy added the last section for 'testing'. wdyt for enabling selfswap for dev envs?

[sirpy]

@sirpy dont see why, dev envs should simulate prod env.

[L03TJ3]

@sirpy just because we cannot ask @vldkhh to keep testing the flow by buying crypto through the onramper widget

[sirpy]

you just send a little cusd to the target contract address. The only reason to buy crypto is to test the iframe message we marked requires testing.

[L03TJ3]

you just send a little cusd to the target contract address.
sure, but for the flow to work, self-swap has to be enabled somewhere.
By default it is not set to enabled

[sirpy]

no its not, the UI detects there's a balance in the swap contract and triggers the backend request.
what needs to be made sure for this to work is which G$ token is used. if we use dev/qa tokens we need to make sure we also have a buygd contract for these tokens and some kind of a uniswap pool

[drptiago]

@L03TJ3 the "buy flow" events follow the same pattern as the other ones:

Are 3 events:

• When click in the menu "Buy G$"

	event: goto_page
	action: goto_buy

• When user clicked or tapped the Onramper widget

	event: buy
	action: buy_start

• When 3 Blue: Transaction success, G$ in user's wallet

	event: buy
	action: buy_success

I don't know if it's possible, but if we can send the amount (in G$) they are purchasing, it would be very good

[patpedrosa]

@vldkhh Can you please let @drptiago know when this is ready for a QA?

[patpedrosa]

@L03TJ3 @johnsmith-gooddollar
Let's push the deployment of this to next sprint to allow time for @vldkhh and the team to test it throughly.

[vldkhh]

The progress bar should show the cUSD, not Celo
Private Zenhub Image

[patpedrosa]

For this feature, we'll deploy it to production featured flagged on wed but hide it from the menu. The goal is for the team to be able to test it in production for the next couple of weeks, and then launch it to the general public at a later date. We'll use post hog.