turbo-eth / template-web3-app

⚑️ Web3 App Template built using Next.js, RainbowKit, SIWE, Disco, and more!
https://www.turboeth.xyz
MIT License
334 stars 89 forks source link

Bounty: Ceramic Integration & Session Keys Stream Writes - 400 OP Reward #58

Closed kamescg closed 1 year ago

kamescg commented 1 year ago

πŸ‘¨β€πŸ’» User Story

As a user of Web3 social applications I want an elegant user experience. I don't want to regularly sign messages for low-stakes social posts with my root account.

More specifically I want to generate browser based Web3 session keys and write messages to the Ceramic network on behalf of my primary account i.e. kames.eth

πŸ“œ Disclaimer

To be eligible for the payout you must first get approval to work on the bounty.

It's recommended to share a link to your personal Github account.

🧱 Project

Integrate the Ceramic network and use session keys for temporary write access to a data streams.

Session Key Integration πŸ‘‡ https://github.com/turbo-eth/template-web3-app/tree/integrations/integrations/session-keys

A data stream is essentially a linked list using IPFS documents.

Streams are a core concept in Ceramic, they include a primary data structure called an event log, a URI scheme to identify unique streams in a network, a simple consensus model to agree on the same event log across the network, and a supporting lifecycle of creating, updating, querying, and syncing streams.

The core data structure of streams is a self-certifying event log. It combines IPLD for hash linked data and cryptographic proofs to create an authenticated and immutable log. This event log can be used to model mutable databases and other data structures on top.

https://developers.ceramic.network/protocol/streams/

A data stream can contain any type of data.

A great example of data streams is Orbis and Gitcoin Passport services. It's also recommend to review the Ceramic Scanner and view data streams as they're published.

ceramic-session-keys

Required Functionality:

  1. Read and write from the Ceramic network
  2. Delegate authority from a root account to a temporary leaf account.

Developer Tasks:

Components

<CreateSessionKeyButton /> The create-session-key-button.tsx component should use the session-keys integration.

The component should be for responsible creating new browser session keys and delegating authority from a root account i.e. MetaMask wallet. Session keys are Ethereum private keys generated in the browser and managed using the viem package. And are used for temporary write access to Web3 infrastructure and systems that enforce object capabilities.

Session Key Integration πŸ‘‡ https://github.com/turbo-eth/template-web3-app/tree/integrations/integrations/session-keys

<CreatePostForm /> The create-post-form.tsx component should use the ceramic integration.

The form should include two fields:

Use react-hook-form to handle form state and actions.

Required Functionality

Views

The primary <CreatePostAndSessionKeyView /> view should contain all the components necessary to create a temporary session key, write a basic post (title, body), start a new Ceramic stream using the root account and delegate write authority to the session key.

Potential File Structure

Integration

The core Ceramic integration should be added to the integrations/ceramic-sessions folder.

integrations/ceramic-sessions
β”œβ”€ components/
β”‚  β”œβ”€ create-session-key-button.tsx
β”‚  β”œβ”€ create-post-form.tsx
β”œβ”€ hooks/
β”‚  β”œβ”€ **/*.ts
β”œβ”€ utils/
β”‚  β”œβ”€ **/*.ts
β”œβ”€ views/
β”‚  β”œβ”€ create-post-and-session-key-view.tsx
β”œβ”€ ceramic-client.ts
β”œβ”€ README.md
Application

The application pages should be added to the app/ceramic/session-keys folder.

app/ceramic
β”œβ”€ session-keys
β”‚  β”œβ”€ page.tsx

The app/ceramic/session-keys/page.tsx page should import and export the views/create-post-and-session-key-view.tsx component.

πŸ’° Bounty Reward

The bounty reward is 400 OP tokens and TurboETH DevPass digital collectible.

TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.

Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the template code in a meaningful way. Exported conversations must be made available to be eligible for the bonus reward.

Notice

The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.

During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.

The final bounty reward can be increased to match new bounty tasks.

Resources