Skip to content

pi0neerpat/dao-preview

Repository files navigation

Welcome to dao-preview 👋

License: MIT Twitter: pi0neerpat Twitter: enj4yy

An easy way for everyone to "get the scoop" on your DAO

Examples

The snippet can be pasted directly into Markdown files like this:

As a Button

MetaCartel xDai
<a href="https://app.daohaus.club/dao/0x64/0xb152b115c94275b54a3f0b08c1aa1d21f32a659a">
  <img src="https://daopreview.com/api/canvas?chainId=0x64&address=0xb152b115c94275b54a3f0b08c1aa1d21f32a659a" alt="MetaCartel xDai" />
</a>

Image only

![](https://daopreview.com/api/canvas?chainId=0x64&address=0xfe1084bc16427e5eb7f13fc19bcd4e641f7d571f)

Install

yarn install

Usage

yarn rw dev

Your browser should open automatically to http://localhost:8910 to see the web app. Lambda functions run on http://localhost:8911 and are also proxied to http://localhost:8910/.redwood/functions/*.

After running this dev server, access the Graphql playground at: http://localhost:8910/api/graphql

Check out the components in Storybook

yarn rw storybook

Lessons Learned

Canvas has system dependencies (see here and here) which makes it difficult to host in vercel. Playwright has similar issues as well. We switched to @napi-rs/canvas, but ran into an issue with missing import for loadImage. This can probably be solved with a bit more time.

We ended up just hosting it via a Digital Ocean Droplet, using yarn rw serve. This way, if it works locally, we know it will work in the Droplet, since its essentially the same environment.

Improvements to be made:

  • @napi-rs/canvas could be used if we find a replacement for loadImage. This is probably the simplest and best way this could be improved. It would allow easy deployment on Vercel.
  • Docker deployments would be nice, but 20 minutes for building the image is preventing me from trying. If you try this, don't forget you'll need the system deps for playwright or canvas (depending on which you choose).

In the process of learning these tools, I built a headless screenshot API pi0neerpat/headless-screenshot, which lets you take pictures of websites just by creating a url. For example, the image below is just pointing to this url https://headless-screenshot.vercel.app/api?url=https://oneclickdapp.com. Pretty neat right?!

Run tests

yarn rw test api

Ngrok it to the web

Demo the app.

ngrok http --host-header=rewrite 10.61.141.234:8910

Docker

NOTE: We could not get the docker hosting to work with playwright, due to system dependencies.

Images are built via Github Action. To build the images locally:

docker build . -t pi0neerpat/dao-preview

Explore image contents:

docker run --rm -it --entrypoint=/bin/bash <image>

Run an image locally:

Create a GITHUB_PAT in your Github "Developer Settings" with permissions read:packages

# Authenticate
docker login https://ghcr.io -u USERNAME -p GITHUB_PAT

# Pull the images (web and api)
docker pull ghcr.io/pi0neerpat/dao-preview:latest

# Start the image
docker-compose up

# Or run the image manually
docker run -it --rm \
       -p 8910:8910 \
       -e .env
        pi0neerpat/dao-preview:latest

Author

👤 Patrick Gallagher

👤 Kris Coulson

Show your support

Give a ⭐️ if this project helped you!


This README was generated with ❤️ by readme-md-generator