superfluid-dashboard-lite

  • create / update / delete flow
  • Visualize flows
  • Visualize other balances

What will API side be for?

  • Populating some details about user?
  • writing a thank you note?

Hosting

Redwood is pretty easy (and free) to host using Vercel (FE) and Heroku (databse). Check out the hosting tutorial.

How I built this

For this app, I used this tutorial Using RedwoodJs to create an Ethereum app as a starting point.

yarn create redwood-app ./superfluid-dashboard-lite
cd superfluid-dashboard-lite/
yarn workspace web add @superfluid-finance/js-sdk
yarn workspace api add @superfluid-finance/js-sdk @ethersproject/providers


yarn rw setup auth ethereum

Complete auth seup by reading the @oneclickdapp/ethereum-auth docs

yarn rw setup tailwind 

# Only because Canary version has some bugs
yarn add -D @redwoodjs/core@0.23.1-pat-prisma --registry=https://npm.patrickgallagher.dev:443 -W

yarn workspace api add @redwoodjs/core@0.23.1-pat-prisma @redwoodjs/api@0.23.1-pat-prisma @redwoodjs/auth@0.23.0-pat --registry=https://npm.patrickgallagher.dev:443

Now we are cooking

# If you didn't add auth, you need to run this one now:
yarn rw scaffold user

yarn rw generate layout default
yarn rw generate page home /

Next add some to schema.prisma

model User
  ...
  flowsReceiving Flow[] @relation(name:"flowsReceiving")
  flowsOwned Flow[] @relation(name:"flowsOwned")
}

model Flow {
  id        String   @id @default(uuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  flowRate  String
  recipient User     @relation(name:"flowsReceiving", fields: [recipientAddress], references: [address])
  recipientAddress  String
  owner     User     @relation(name:"flowsOwned", fields: [ownerAddress], references: [address])
  ownerAddress  String
}

Before you run scaffold command, you may need to remove the relations value. Be sure to add them back after the scaffold!

yarn rw g scaffold flow

In flows.sdl.js we can remove most of the CRUD function and data, since we will only be reading blockchain data from the server.

Then in our services/flow.js we can start using the ``@superfluid-finance/js-sdk`.

# Ready to start the app!
yarn rw storybook
yarn rw dev

During development, it becomes clear we need the user's address. Let's add some <Private> routes to ensure we have the user's address before they navigate to a page.

<Private unauthenticated="login">
    <Route path="/flows/{to}/new" page={NewFlowPage} name="newFlow" />
</Private>

We'll also need a Login page to redirect to.

yarn rw g page Login
Select a repo