# Gitcoin Checkout

A standalone Checkout page for interacting with Allo protocol.

Similar to what Stripe Checkout is for fiat payments.

[Figma link](https://www.figma.com/file/jZXzrmtVLgf5PRcG6qcSRE/Gitcoin-Checkout?type=design&node-id=0%3A1&mode=design&t=tnk1uCJxLA3X9knG-1)

1. User visit Gitcoin Grants (or any 3rd-party website), explores their grants and build a cart.
2. User is redirected to Gitcoin Checkout with the encoded transaction data in the URL
3. User can see what their transaction will do (what function to call with what arguments) and any potential errors (simulates transaction)
4. If User lack funds they can either on-ramp from USD (via Stripe?) or bridge tokens
5. User is redirected back to a provided URL

### Why?

- One place to connect the most popular wallets + crypto onramp + bridge. Focused effort into creating a great experience for users. A Web2 sign-in + crypto could make it accessible to new users.
- Separating browsing grants & building cart with the checkout page allows for a more modular approach. Any website can redirect their users to Gitcoin Checkout where the actual wallet connect and transaction is sent.
- Show what the transactions do so the user feels safe to initiate the transaction
- Potential revenue from on-ramping, bridging, and swapping
- Trusted place to initiate transactions
- An SDK with components that allow for re-use

### How?

- A Checkout link is generated from an SDK and the user is redirected to Gitcoin Checkout.
- The checkout link contains the encoded transaction data
- Transaction data is decoded, shown in the UI, and simulated to reveal any errors (insufficient funds etc)

### Possible limitations

- Most likely will only support one chain at a time. (A smart contract could route to the correct chains with CrossChain comm.)
- Is it possible to change the function calls from Checkout? (ie alter amount for a specific grant)
- How to ensure same wallet is connected and used from shop website and checkout?

### Possible extentions
- Add wallet connect provider and tools to the SDK that can be used by apps (similar to RainbowKit and Wagmi but for Gitcoin Checkout and with a good preset so we don't need to configure for every app)
- ERC4337 Account instead of EOA to unlock more powerful features

### Resources
- Stripe fiat-to-crypto onramp
- https://docs.stripe.com/crypto/overview
- Wallet connectors (web2 + web3)
- https://www.privy.io
- https://web3auth.io

### Examples

There are three parts to this solution:
1. An SDK used to create a checkout link
2. An app/website to explore grants (grants stack or 3rd party)
3. A Checkout page where user connects wallet, transactions from URL are decoded, and the tx is sent

The code below is called from a 3rd-party website (where users can explore grants). It encodes the function data and redirects the user to checkout.gitcoin.co with URL params.

// First we encode the transaction data with Viem
// Allo SDK could wrap this function as `allo.allocate(recipients, amounts, metadata)`
const transactions = encodeFunctionData({
  abi: alloAbi,
  functionName: "allocate",
  args: [[projectA], [10n], metadata],
});

// Generate a link to redirect the user to
const checkout = await gitcoin.checkout.create(transactions, { chainId, redirectUrl });
// checkout.url = "https://checkout.gitcoin.co?transactions=0xbdad4dc30...&chainId=1&redirectUrl="

window.open(checkout.url);

Gitcoin Checkout website picks up the URL params and decodes the function data.

// Decode the transactions from the URL
const transactions = parseTransactionsFromURL();
/*
{
  functionName: 'allocate',
  args: [
    [ '0x58A57ed9d8d624cBD12e2C467D34787555bB1b25' ],
    [ 10n ],
    '0x6d65746164617461'
  ]
}
*/

// Display these transactions in the Gitcoin Checkout UI so the user know what they are signing

// Simulate the transaction (set the allo address and abi and populate with the data from the URL)
const { result, request } = await publicClient.simulateContract({
  address: alloAddress,
  abi: alloAbi,
  functionName: transaction.functionName,
  args: transaction.args
  account: connectedWallet,
});

// If the simulation returns an error we show that to the user and handle accordingly
// These errors could be not enough funds for example - offer to bridge tokens

// Send the transaction
await walletClient.writeContract(request)

### OpenGraph Metadata
Build a simple website that generates an OG Image. This is shared on socials and when clicked redirects the user to a simple page. This page can Fund Pools or donate to projects (or any imaginable Allo Protocol or Ethereum interaction).