[BOUNTY] Waku Meme Board (1000DAI)

fryorcraken commented 1 year ago

Context

Waku Is Uncompromising Web3 Communication at Scale. A family of robust, censorship-resistant communication protocols, designed to enable privacy-focused messaging for web3 apps.

The JavaScript implementation of Waku, js-waku, enables web apps to utilize the Waku network for off-chain message transmission.

Disclaimer: Waku is experimental, you may find blocking issues while developing your web app. We will prioritize their resolution to unblock you, which means you may have to pause development until done. Thank you for your patience and understanding.

Your participation in this bounty is subject to your acceptance of our terms and conditions. Please see https://github.com/waku-org/bounties#applying-for-a-bounty for details.

Reward

USD1000 in DAI.

Timeframe to Completion

Once the application is approved, the result must be submitted within 30 days.

Application Evaluation

To ensure you are selected for this bounty, provide the following information:

Describe the approach you will take to tackle the bounty.
A timeline within which you expect to deliver the bounty.
Any previous relevant work you have done.

Bounty

The Waku Meme board is a dApp that uses Waku and IPFS (or any other decentralized storage protocol) to display a timeline of memes. Post memes on the board is permission-less, so is viewing memes.

Impact

The aim of the bounty is to demonstrate how Waku can be used for ephemeral communication while offloading large files to another, more appropriate, system such as IPFS.

This will hopefully provide the inspiration to developers to combine Waku with other decentralized technology such as IPFS or Codex.

Deliverables

A Web dApp that enables the following:

Display previously posted memes (latest first)
Post memes (images only).

The dApp is expected to be designed as follows:

A unique content topic is used for the dApp, such as /meme-board/1/meme/proto
When posting a meme, the dApp upload the image to IPFS and then send a Waku message with Waku Light push that contains:
- IPFS hash to the image
- Protobuf must be used for payload encoding
When opening the dApp, and loading the timeline:
- Waku Messages are retrieved via store + filter on the unique content topic
- Images are retrieved from IPFS using the hash in the Waku message
- Memes are displayed, newest first and on top.

Please check with the Waku team if you decide to use a different design. Waku must be used for communication purposes.

Acceptance Criteria

The dApp works as described:
- meme are displayed latest first
- Waku Store is used to retrieved older memes
- Waku Filter is used for real-time reception of memes
- No image data is uploaded to Waku, only IPFS hashes.
- Some visual feedback is provided to the user when uploading the image.
- Users can send memes.
Must use the latest stable version of @waku/sdk
Must be a frontend only, browser web app (no backend, no NodeJS, no SSR, no lambda function otherwise it's not decentralized).
The web app must be deployed on IPFS or similar permission-less decentralized storage solution.
In addition to that, you are free to host the website on a web server of your choice such as GitHub pages (not mandatory)
All code must be licensed under MIT+Apache2.0.

Resources

Learn more about Waku at https://docs.waku.org/. Join our Discord to get support at https://discord.waku.org/. Various examples available at https://github.com/waku-org/js-waku-examples/.

hackyguru commented 1 year ago

looks like the bounty does not use the proposed bounty template 👀 should we modify the template to suit this issue or should i migrate it to the bounty template @fryorcraken

fryorcraken commented 1 year ago

looks like the bounty does not use the proposed bounty template eyes should we modify the template to suit this issue or should i migrate it to the bounty template @fryorcraken

Fair point, see my PR: https://github.com/waku-org/bounties/pull/6 if you're happy with new template, we can change the issue too.

b4s36t4 commented 1 year ago

@fryorcraken Do I need to submit the application to work on bounty?? I have completed most of the work though :).

b4s36t4 commented 1 year ago

https://github.com/waku-org/bounties/assets/59088937/73d5c8da-3cf1-4e8c-90c9-fc56c38a5f06

Hope this what you guys are looking for, if seems good I can raise PR/create a repo for review. Thanks.

b4s36t4 commented 1 year ago

https://github.com/b4s36t4/waku-meme

fryorcraken commented 1 year ago

@fryorcraken Do I need to submit the application to work on bounty?? I have completed most of the work though :).

Yes ideally please do submit the application before doing the work to ensure you do get the bounty.

Please see process here: https://github.com/waku-org/bounties#applying-for-a-bounty

fryorcraken commented 1 year ago

Kapture.2023-09-06.at.01.00.57.mp4 Hope this what you guys are looking for, if seems good I can raise PR/create a repo for review. Thanks.

yes looks dope but best to apply first!!!

b4s36t4 commented 1 year ago

Hey, @fryorcraken Sorry for trouble I caused. So I do need to the apply right?

I have filled the typeform application, I just need to send the application here right?

fryorcraken commented 1 year ago

Hey, @fryorcraken Sorry for trouble I caused. So I do need to the apply right?

I have filled the typeform application, I just need to send the application here right?

Please do step 1 too as described in the link above.

b4s36t4 commented 1 year ago

Bounty: Waku Meme Board (1000DAI)

Plan

As this is a simple frontend application my plan is to go stright forward.

Tech-Stack: React & Vite shadcn UI waku-sdk pinata waku-react-sdk

Approach, A simple UI with a button bottom-right side with a scrollable area to view the memes

Whenever we click on Upload button it will open a modal and ask user to upload a meme and with some description.

Once upload is done will be pushing the message to waku using light-node.

Waku Protocols going to use

Filters and Store.

As the specified encoding type is proto I need to define a proto type as well. Example prototype.


description - String - Description to meme
timestamp - integer - Timestamp
hash - string - IPFS CID

As waku's react SDK provides providers for LightNode and ContentPairProvider there are critical.

using useLightPush to push the message to wak
Using useFilterMessages to subscribe to filtered messages
Using useStoreMessages to load messages store in waku server on initial page load.

PageDirection.BACKWARD is needed for stored messages to retrive messages that are created newly.

Image loading is just using pinata's hosted gateway which only requires CID of the file that shows.

*Passing accept attribute with value `image/` to input will only allow user to upload images and nothing else.**

Track Record

Well I have never worked with waku before, but I have gone through the documentation of waku and it is so easy to kick-start also given the examples repo it made learning more easier about waku.

Although I have a good track-record of solving bounties in other open-source repos like Expensify and some freelacning too in upwork

Timeline

As I already have completed the basic version of bounty, which I did it in a single sitting on sunday (3rd Sept).

It might need some polishing & deployment to IPFS which I'm not aware on how to do it.

So I'd say overall timeline would be around a week (includes some buffer as well).

b4s36t4 commented 1 year ago

Sorry for the ping @fryorcraken and sorry for noob behaviour of doing everything in reverse order. I have shared my proposal above.

Thanks so much for making things clear to me.

fryorcraken commented 1 year ago

Sorry for the ping @fryorcraken and sorry for noob behaviour of doing everything in reverse order. I have shared my proposal above.

Thanks so much for making things clear to me.

Hey no worries, you are our first official applicant and we are looking into setting up a web portal to make things easier. Let me review on our side and will come back to you shortly.

b4s36t4 commented 1 year ago

we are looking into setting up a web portal to make things easier

I would love it so much to built it with you guys(collabration). It's s a pleasure to build for community :)

fryorcraken commented 1 year ago

Bounty assigned to @b4s36t4 . Happy hacking!

b4s36t4 commented 1 year ago

Thank you so much.!! Happy to be the first hacker on waku bounties!!!

fryorcraken commented 1 year ago

@b4s36t4 We'll review your deliverable and come back to you shortly.

fryorcraken commented 1 year ago

@b4s36t4 did you deploy your dApp on IPFS or other decentralized storage? https://docs.ipfs.tech/how-to/websites-on-ipfs/single-page-website/

b4s36t4 commented 1 year ago

@fryorcraken only that is just left. Need deployment will do soon.

fryorcraken commented 1 year ago

@b4s36t4 can you also update the README of your project to include instructions on how to run it locally so we can review it?

vpavlin commented 1 year ago

I also tried to run it

main branch is missing @radix-ui/react-icons dependency in package.json
missing documentation for env vars (Pinata JWT and Content Topic)
Pinata Gateway is hardcoded, which prevents me from pinning

I'd also add that hardcoding particular IPFS Gateway/Pinning service (Pinata in this case) goes against the decentralization Waku is trying to achieve, so it would be great to find a way to make the uploading general, so that someone running this is able to plug in any IPFS API endpoint.

b4s36t4 commented 1 year ago

@fryorcraken @vpavlin I have added the readme and add an example variation of environment variables.

Well I don't recommend to checking out the application at because I still need to do some tests, cause I have removed usage of pinta and added support for local IPFS node (which achieves the full decentralisation).

meanwhile, I look forward for the feedback on documentation.

Things remaining.

Deployment to IPFS (still new to IPFS deployment)
Remove pinata from entire application.

99% I will be updating things by tomorrow afternoon (IST).

b4s36t4 commented 1 year ago

If you guys know about helia which is latest version of JS-IPFS I need some assistance on it because I want to integrate that into the application as a feature improvement. Been having some issues configuring libp2p like gettings quic errors etc.

fryorcraken commented 1 year ago

@fryorcraken @vpavlin I have added the readme and add an example variation of environment variables.

Well I don't recommend to checking out the application at because I still need to do some tests, cause I have removed usage of pinta and added support for local IPFS node (which achieves the full decentralisation).

meanwhile, I look forward for the feedback on documentation.

Things remaining.

Deployment to IPFS (still new to IPFS deployment)

Remove pinata from entire application.

99% I will be updating things by tomorrow afternoon (IST).

Hi,

No rush. Just let us know once it's ready.

fryorcraken commented 1 year ago

If you guys know about helia which is latest version of JS-IPFS I need some assistance on it because I want to integrate that into the application as a feature improvement. Been having some issues configuring libp2p like gettings quic errors etc.

Not familiar with it but maybe we can help with some libp2p concepts. Feel free to jump in Discord discord.waku.org.

b4s36t4 commented 1 year ago

Development work is done. cc: @fryorcraken

fryorcraken commented 1 year ago

Review and approved by @vpavlin. Proceeding with reward.

waku-org / bounties