superfluid.js

import logo from './logo.svg';
import './App.css';
import React, { useState, useEffect } from 'react';

const SuperfluidSdk = require('@superfluid-finance/js-sdk');
const {Web3Provider} = require('@ethersproject/providers');

function App() {
  const [subscribed, setSubscribed] = useState();
  const init = async () => {
    const provider = new Web3Provider(window.ethereum);
    const sf = new SuperfluidSdk.Framework({ ethers: provider});
    await sf.initialize();  
    const user = sf.user({
      address: await provider.getSigner().getAddress(),
      token: '0x6fC99F5591b51583ba15A8C2572408257A1D2797'
    });
    const details = await user.details();
    console.log(user)
    console.log("details.cfa", details.cfa);
    if(details.cfa && details.cfa.flows.outFlows){
      let subscriptionExists = false;
      for(let i = 0; i < details.cfa.flows.outFlows.length; i+= 1){
        const outFlow = details.cfa.flows.outFlows[i];
        if(outFlow.receiver === "0x89Ce0f71D7387a580c6C07032f74f393a65d77F4"){
          setSubscribed(true);
        }
      }

    }
    else{
      setSubscribed(false)
    }
  }

  useEffect(() => {
    init();
  });

  const subscribe = async () => {
    const provider = new Web3Provider(window.ethereum);
    const sf = new SuperfluidSdk.Framework({ ethers: provider});
    await sf.initialize();  
    const user = sf.user({
      address: await provider.getSigner().getAddress(),
      token: '0x6fC99F5591b51583ba15A8C2572408257A1D2797'
    });
    const flow = await user.flow({
      recipient: '0x89Ce0f71D7387a580c6C07032f74f393a65d77F4',
      flowRate: parseInt(0.01 * 1e18 / ( 60* 60* 24* 30)).toString() // 0.01 wei per month - paid every second
    });
    console.log("Flow", flow);
  }
  


  if(subscribed == false)
    return (
      <div className="App">
        <button onClick={() => subscribe()}>Subscribe</button>
      </div>
    )
  if(subscribed == true)
    return (
      <div className="App">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/EErY75MXYXI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    );
  return (<div>Loading...</div>)  
}

export default App;