scaffold-eth / buidlguidl-v3

BuidlGuidl v3

The 🏰 BuidlGuidl is a curated group of Ethereum builders creating products, prototypes, and tutorials with 🏗 scaffold-eth

Prerequisites

Node (v16 LTS) plus Yarn.

Every package in this monorepo (backend, hardhat, react-app) comes with a .sample.env file. The one inside packages/backend is the only one required to set up (copy it to packages/backend/.env). All the others work out of the box.

If you want to connect to a local firebase instance:

• Install the firebase CLI
• Set FIRESTORE_EMULATOR_HOST=localhost:8080 in packages/backend/.env
• Seed the local firebase: Copy packages/backend/local_database/seed.sample.json to packages/backend/local_database/seed.json and tweak it as you need. You can always clean up the data in the Firestore UI and re-import by stopping & running yarn backend again.

If you want to connect to your live firebase instance:

• Donwload the serviceAccountKey.json file from the Firebase UI
• Comment out the FIRESTORE_EMULATOR_HOST env var.
• Set GOOGLE_APPLICATION_CREDENTIALS to the correct path to your serviceAccountKey.json

Project setup

Install dependencies:

yarn install

(Optional) Start the firebase emulators (vs set up a live Firebase instance)

# You might need to add a real "--project <projectName>" (run firebase projects:list)
firebase emulators:start

Start the backend service:

yarn backend

In a new terminal, start the frontend:

yarn start

At this point, the APP should be available at http://localhost:3000.

buidlguidl-v3's Issues

Add country flag on builder profiles

Allow builders to optionally set their country. Let's see if there is a nice react component select component for it.

We can add it as part of "update socials":

---

For display: Visible to all users. Not sure the best place to put it:

Maybe below the address / above the cohort?

---

Implementation details:

• We'd need to update the signature + validation to include it in the "socials" signature
• We can save the field on the builder document root (instead of inside the social object)

Hero Text not visible on dark mode theme.

On dark mode theme, the "Buidlguidl V3....." text has a white text color in a white background, which makes it invisible.

search build based on framework (typescript, javascript, etc)

this is feature request. it'll be great to search build based on framework (typescript, javascript, etc). I need to go in and see the repo of each build right now.

Access to Admin Route when Admin url is pasted on Address bar

Anyone can access the admin route by typing the URL into their browser's address bar, even if they are not authorized as admins. Although Interaction to Page is restricted, I think it's best if this page doesn't show at all to non admin.

Steps to Reproduce

1. Pasting "https://app.buidlguidl.com/admin/add-builder" on address bar shows the admin page

Expected Behavior

Non-admin users should be redirected to the homepage when attempting to access the admin route through address bar

Sand Garden display shows for both the old and new sand garden cohorts.

After the creation of the new Sand Garden, this is what is displaying when a builder is viewed. This is also the case in the builder search.

The alpha of svg should be flipped in dark mode for socials svg

Stream Indexer

@mikery is working on the stream indexer here.

Writing down a few notes so we can get closer to the final version.

Indexer Code

Event payload

Inside the event payload, can we also get the timestamp of the event?

Mainnet Provider

• Connect to the provider outside the getStreamEvent function, since we'll be calling it for each user.
• Use dotenv to get the infura ID.
• Since you are using infura, maybe the variable name should be "mainnetProvider" :D

Prettier

We use prettier to (automatically) follow the same coding standards (spacing, semicolons, etc) in the project.

If you are familiar with it, check the config file and apply it to this file.

If not, don't worry, I'll prettify it once we integrate it in the project.

Infrastructure

I think it'd be best if we run this within this project.

We are using Firebase + Google App Engine (GAE) to run the BuidlGuidl v3 backend (check packages/backend)

Not sure if you are familiar with the Google Cloud, but I think we should go for it (Avoid different providers overhead and easier integration with Firebase). It seems the GAE allows having multiple web services (https://cloud.google.com/appengine/docs/standard/nodejs/configuration-files), so maybe we could have a folder inside packages/backend with the code and the needed .yml to deploy.

If we don't like this option, or we encounter some limitations, we could also use Google Cloud functions.

Add element to BuildCard component to signify scaffold-eth hackathon winners

Reason: Nifty way to celebrate and show off SE / BuidlGuidl hackathon winners. Database data will need to be implemented by database admin. A script to add "hackathon_winner" property to all build database items will ensure database entries have consistent structure.

Will need the following:

1. A script to add new boolean property "BG_hackathon" to db items to maintain consistency for all db "build" items.
2. Add prop to component.
3. Add icon emoji element to BuidlCard if BG_hackathon is true.

New property could also be of type string, for example "Buidl Guidl Hackathon Spring 2023 Winner". String value can be used as tool tip.

Can't see stage warning in dark mode

Description field formatting

Would be amazing to have the description field to

• respect page breaks.
• Markdown would be a plus too

Graduate builders

At some point, some builders with a stream might graduate (work for a company, start their own thing, etc). This builders keep showing on the all the list where we show streamed builders (homepage, admin fund page, etc).

One solution (already available) could be to edit these builders and remove their stream info. But we want a way to marked them as graduated (maybe we'll show this info at some point) + it's easier to bring their back (graduate / ungraduate).

So the spec would be something like this:

A good example, similar to this, could be packages/react-app/components/BuilderStatus.jsx and all that derives from there (backend routes, signatures, etc)

Front-end

• Create a GraduateBuilder component that shows the graduate/ungraduate button and handles all the logic, talks to the server, etc.
  • We want to be able to provide a reason for the graduation (non-mandatory). So maybe a modal (when clicking the "graduate" button) with a textarea could be nice.
• Display logic
  • We can show this button on their profile & admin funding page
  • We won't show graduated builders on:
    • The homepage
    • The admin fund page
  • In their profile, where the stream is showing rn, we could have a "Graduated" text in there.

Backend

• Handle new routes
• New signatures
• Database operations

Add cohorts

Get cohort data into Firebase + index events from contracts + expose API endpoint

ToDo

• Create OG cohorts from script (#74)
• Simple API to get DB cohort data (#74 )
• Indexer script to get all contract events (mainnet & op) (#76)
• Save events into database (#76)
• Add cron to google cloud to call the indexer script (#76)
• New event for withdraws (cohort.withdraw) to show in the /activity page (similar to stream.withdraw) (#76)
• Create a BG account for cohorts members that are not in BG already
• New admin page (as /admin/fund-builders) to show current balance of every cohort contract + latest withdraw / etc (extra: button to send ETH for each contract) (#79)
• Stats for BG landing (totalWithdrawn global + totalWithdrawn per cohort) /cohorts/stats (#80)

Display ENS Avatar if user has ENS

Display ENS Avatar if builder has an ENS. Continue using QRPunkBlockie if builder doesn't have ENS or if their ENS avatar isn't set.

Will affect the following components:

• Account component used to show logged in user in the Header
• Address component that is used in Activity page, Builders page and Vote Builds page
• BuilderProfileCard that is used in the dynamic route for builders / builders' portfolio dashboard

I pretty much have this working already.

Cohorts total streamed calculation

Comparing total withdrawn data from buidlguidl website with streamogator I found some Cohorts with different data.

Here are the details of the difference:

Cohort	Bg hackers	BG streamed	streamo hackers	streamo streamed	ETH difference	Builders difference
Main Hacker House	14	60.82	15	38.44	22.38	1
Play Full	13	13.58	13	8.21	5.37	0
Infrastructure	4	7.74	4	5.74	2	0
BG Outreach	3	14	3	10.63	3.37	0
Not Just Notfellows	7	6.98	7	5.95	1.03	0
Security & Optimizooors	2	2.5	2	1.5	1	0
Autonomous Worlds	7	9.49	7	5.99	3.5	0
ZK & Cryptography	15	23.65	14	18.75	4.9	1

Digging a bit into the withdrawal data, found the correct value was streamogator's.

I think the reason of the difference is there are duplicated builders (builders added a couple of times onchain) in these cohorts, and we are counting the withdrawn ETH twice for those builders.

Example:

• ZK Cohort duplicated 4 builders, adding them twice in 2 different tx:
  • https://etherscan.io/tx/0xe19edc444beb51ed53e12807bb42228ac7c710240290ec21d9b3209fada4b944#eventlog
  • https://etherscan.io/tx/0x505e5808d2b01da8af2df67414346207b6b4b1a0fbf1a7ef0b8cda094f3e2441#eventlog
• Security & Optimizooors Cohort duplicated 1 builder in these tx:
  • https://etherscan.io/tx/0x6109a36689227fa7d2aa35d490eeaf8d8c63535a368ec2c8c7f6f05fb3103123#eventlog
  • https://etherscan.io/tx/0xc4637a849132eff7900008f26c8e3e17c8339cbe4bd8299edd7e3543fc6fe724#eventlog

There is a couple of Cohorts with 1 builder difference, but haven't figured out yet the reason, but in that case the correct data is in BG website.

Please mention scaffold-eth-typescript and its link here as well

It ould be great if scaffold-eth-typescript was mentioned as well