Submit grants page

[technophile-04]

Description

Fixes #4

TLDR:

• API endpoint for getting builder data by address /api/builders/:builderAddress
• Form with signing message and basic validations
• Form submission using server action and creating grant in firestore

Demo video :

Screen.Recording.2024-02-04.at.12.58.35.PM.13-03-56-294.mov

DONE:

• Create basic form with inputs
• Check for bg builder
• Add basic validation
• Sign message functionality
• Creating mock api route Used Next server actions instead
• Clean up

[technophile-04]

From #4 (comment) instead of creating an API endpoint for submitting the grant form, I used Next Server action wanted to try it out 😅 and it surprisingly works really nice!

But please let me know if we should create API endpoint it should be pretty easy we just need to move the server action function body inside API route handler with little minor tweaks 🙌

[carletex]

This is amazing Shiv!! Thank you.

Left a comment to discuss, but approving it!

Also (could be another PR): could you attach a good seed for the database? So we can test locally easily (some builders, etc)

[carletex]

This is happening on the client side, right?

An alternative could be to fetch the builder on the server since we already have the findUserByAddress function (and we won't need an API endpoint), right?

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-libraries

What would be the pros/cons?

Not saying that we should change it! Just wondering and trying to understand. Client/Server is more confusing with the App router / server components / etc 😓

[technophile-04]

This is happening on the client side, right?

An alternative could be to fetch the builder on the server since we already have the findUserByAddress function (and we won't need an API endpoint), right?

Yes its happening on client, actually I think we shouldn't use findUserByAddress or any other direct talking with firebase on client components because I think this will expose firebase credentials / firebaseAdmin to client browser which we don't want right ?

Any component which uses "use client" directive, all its imported modules are shipped to clients browser ( ref 1 & ref 2 )

An alternative could be to fetch the builder on the server

Umm I think we can't do this right? Because we get to know builderAddress only after when code reaches client browser and then user connects the wallet.

So a request has to be made in useEffect* (after first render).

I think we could only fetch builder on server if we prior know the the builder address even before first render on client (i.e if it would have been embeded in url param builders/[id]/.page.tsx )

But yeah lol I am sure maybe missing something and might have taken your question in completely different direction 😅, please feel free to correct me 🙌

[carletex]

Oh, I forgot that we are going to use the "BG way" (signing every write action)! You are right!

Usually, you'd get that data (builderAddress in this case) in the backend from the JWT token. We could do SIWE + emit JWT, but let's keep it as in BG.

[technophile-04]

could you attach a good seed for the database? So we can test locally easily (some builders, etc)

Ohh yes yes, I have been thinking about this the plan I had in mind to seed data into local firebase emulator is :

Create a seed folder inside (packages/nextjs/) its needs to inside nextjs right ? because we want to access fireabseAdmin sdk ?

Create a file data.json and when script.ts this script.ts will create collections and documents according to seed/data.json

And we can add a script inside package.json eg. yarn seed which will run node script.ts what do you think?

Will create a PR for this 🙌

[carletex]

The seed stuff sounds great @technophile-04!

The seed + script could even be inside the service/database folder... but up to you!

Merging this! (left a comment here: #8 (comment))