search

turbo-eth / template-web3-app

⚡️ Web3 App Template built using Next.js, RainbowKit, SIWE, Disco, and more!
https://www.turboeth.xyz
MIT License
334 stars 89 forks source link

Bounty: Add SuperFluid Integration - 200 OP Reward #69

Closed kamescg closed 1 year ago

kamescg commented 1 year ago

👨‍💻 User Story

As a Web3 developer I want to include "streaming" money features in my Web3 applications.

More specifically I want to use SuperFluid to easily send, delete and unwrap payments using the Super Token standard. The Super Token standard can wrap an existing ERC20 token or as a standalone ERC20 token with the Super Token enhancements.

📜 Disclaimer

To be eligible for the payout you must first get approval to work on the bounty.

It's recommended to share a link to your personal Github account.

🧱 Project

Create a SuperFluid SDK integration for TurboETH. The SuperFluid integration should allow developers to easily start, claim and stop money flows.

Required Functionality:

  1. Create a money flow
  2. Delete a money flow
  3. Unwrap Super Token

Developer Tasks:

The SuperFluid integration requires both adding the core integration files and updating the demo application to showcase the SuperFluid features.

Integration

The form-send-flow.tsx component should wrap the createFlow method.

https://docs.superfluid.finance/superfluid/developers/constant-flow-agreement-cfa/cfa-operations/write-methods/createflow

The form-delete-flow.tsx component should stop the flow using the deleteFlow method.

https://docs.superfluid.finance/superfluid/developers/constant-flow-agreement-cfa/cfa-operations/write-methods/deleteflow

The form-unwrap-super-token.tsx component should unwrap the Super Token for the underlying asset.

https://docs.superfluid.finance/superfluid/developers/super-tokens/using-super-tokens#unwrapping-downgrading-a-super-token-to-the-underlying-asset

Application

Developer Instructions

Form components should use react-hook-form and zod for form submission management and creating the component Typescript interfaces and types.

Reference of what the form should use: https://ui.shadcn.com/docs/forms/react-hook-form

SuperFluid documentation uses Web3Modal and ethers packages in the "Initialization" section.

https://docs.superfluid.finance/superfluid/developers/sdk-core/sdk-core-initialization#operations

When integrating SuperFluid in TurboETH use the primary wallet connection manager and utility library: wagmi and viem.

A hook should be created to integrate SuperFluid with wagmi.

The hook should look something like the code snippet below.

// use-superfluid-with-wagmi-provider.tsx
import { useEffect, useMemo, useState } from "react";
import { useChainId, useSigner } from "wagmi";
import { Framework } from "@superfluid-finance/sdk-core";

export function useSuperFluidWithWagmiProvider() {
    const { data } = useSigner();
    const chainId = useChainId();
    return useMemo(async () => {
        if (!data?.provider) return;
        const sf = await Framework.create({
            chainId: chainId,
            provider: data?.provider?.provider, // this is the injected provider
        });
    }, []);
}

Potential File Structure

Integration

The [SuperFluid]() integration should be added to the integrations/superfluid folder.

integrations/superfluid
├─ components/
│  ├─ form-send-flow.tsx
│  ├─ form-stop-flow.tsx
│  ├─ form-unwrap-super-token.tsx
├─ hooks/
│  ├─ use-superfluid-with-wagmi-provider.ts
│  ├─ **/*.ts
├─ utils/
│  ├─ **/*.ts
├─ README.md
Application

The application pages should be added to the app/(general)/integrations/superfluid folder.

app/(general)/integrations/superfluid
├─ start-flow
│  ├─ page.tsx
├─ stop-flow
│  ├─ page.tsx
├─ balance
│  ├─ page.tsx

💰 Bounty Reward

The bounty reward is 225 OP tokens and TurboETH DevPass digital collectible.

TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. OP tokens earned from RPGF are helping fund TurboETH bounties.

Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the template code in a meaningful way. Exported conversations must be made available to be eligible for the bonus reward.

Notice

The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.

During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.

The final bounty reward can be increased to match new bounty tasks.

Resources

sunnyjaycer commented 1 year ago

Typo: "The form-delete-flow.tsx component should wrap the createFlow method." Should say: "The form-delete-flow.tsx component should wrap the deleteFlow method."

kamescg commented 1 year ago

@sunnyjaycer great catch 🙏 thank you. fixed.

3scava1i3r commented 1 year ago

interested

cardof commented 1 year ago

interested

SouravInsights commented 1 year ago

Hey, there! I've started working on this. Can anyone please confirm it's not assigned to anyone else?

Seroxdesign commented 1 year ago

Hello,

I am interested in working on this, I have worked on many Superfluid related projects, and contributed to the Superfluid Console as well, from what I see in the specification you have done a good amount of research and everything makes sense.

@sunnyjaycer is a good reference, and you can check my Github.

Seroxdesign commented 1 year ago

@sunnyjaycer @kamescg

============

I was reading through the spec, and noticed that you guys are missing a few things that are necessary for this to be a smooth complete experience.

  1. Changing stream amount <- good to have
  2. Wrapping ERC20s to supertokens (you only have unwrap listed in scope) <- very important
  3. Querying the SF subgraph to get all the users streams so they can view/edit/cancel them <- very important
  4. Including a source for the tokens (the SF tokenList) <- very important
vmichalik commented 1 year ago

@marthendalnunes is there a PR for this? I don't see the feature live