Proposal - Sigle - Open-source writing platform for Web3 content creators

Grants Origins Round
, , ,
1

Grant/Project Name

Stacks / Sigle integration

Proposer’s contact info

leo@sigle.io

Grant Category

Apps

ELI5 Project Summary:

Sigle is an open-source writing platform for Web3 content creators that gives them a powerful editor, a great UI, and the tools they need to build their community, grow their brand, and make their Web3 stories come to life.

Project Description

Sigle is the oldest app built on the Stacks blockchain, launched at the end of 2018. It is a platform for reading and writing about web3 technology, similar to Medium or Substack. Sigle combines features from both web2 (privacy-protecting analytics, newsletters …) and web3 (did, ownership, NFTs…).

The app also offers an NFT collection called the Explorer Guild that has 1000+ unique holders and is one of the biggest collections in the Stacks ecosystem. NFT holders get a free lifetime membership to Sigle premium services The Explorer Guild - Marketplace | Gamma.

This grant proposal project is divided into 2 sections:

  1. Stacks Ceramic integration - The first part of this grant will focus on integrating Ceramic with Stacks. This will involve creating a Stacks adapter that allows users to connect through the Hiro wallet and Xverse wallet. The integration will include updates and pull requests to the Ceramic js packages to follow the CAIP specifications for Stacks, as well as a tutorial and example repository demonstrating how Stacks developers can integrate Ceramic into their react apps. Once this is completed, the plan is to collaborate with the Stacks team to write an article on their blog and announce the Ceramic integration to all Stacks dapps developers (like this one How Sigle Built NFT-Gated Features in Their App).

  2. Ceramic integration in Sigle - The second part of this grant will focus on integrating Ceramic into Sigle and replacing the current storage solution, Gaia, with it. This will enable a seamless cross-chain experience for Sigle users. In the app, there is a mix of public and private data, such as blog posts, following system, profile info, drafts and more. As part of this integration, we will explore the possibility of sharing schemas with other apps to standardize certain features, such as the following system. After migrating the existing features to work with Ceramic, we will add a commenting system, posts reactions, a feed that can be sorted by latest, trending or follows.

Finally, some things we will explore during the integration:

  • Integrating Lit protocol for private data (drafts) and accessing NFT gated content
  • Multiplayer storage, allowing multiple authors to publish under the same blog
  • Integrate Arweave storage for the blog posts streams
  • Research into building a reward system on Ceramic that allows users from any chain to take part

Product:

Tech stack:

  • Frontend: Typescript, Next.js / react, Stacks.js / Ether.js, next-auth, radix-ui / stitches
  • Backend: Typescript, Nest.js / Rest API, next-auth, Prisma / PostgreSQL, Redis

Relevant links

Ceramic Ecosystem Value Proposition

  1. Ceramic and ComposeDB do not currently have many apps built on top of them, so the number of users is limited. Our app, which already has a user base on the Stacks blockchain, will migrate its existing users to Ceramic. All the current content stored on Gaia will be transferred when a user migrates their account, which will be an automatic and seamless process. By integrating with Ceramic, our application will be able to work across multiple blockchains, so we plan to start onboarding Polygon users into Sigle shortly after. Our integration will also include common social schemas that other dapps can reuse.

  2. The integration of the Stacks and Ceramic networks allows developers to create dApps with more advanced features. By allowing Stacks developers to create dApps on the Ceramic Network, Ceramic can expand its user base and developer community, increasing the overall adoption.

  3. Serve as a reference open-source codebase of a a real-world application. By providing a practical example of a working application, Sigle can help developers to understand how to use these technologies effectively and avoid common pitfalls. Additionally, by using technologies like Next.js and nest.js, our app is able to offer a smooth and efficient user experience, which can also be beneficial for developers looking to incorporate similar technologies into their own projects.

Funding requested (DAI/USDC): [$38,600]
How much are you applying for? Make sure to break the amount requested down by milestones

Milestones

  • Milestone #1: Stacks integration for Ceramic - [$8,400]

    • retroactive - Write the CAIP-122, Sign in with X for Stacks - [16 Hours @ 70 $/ Hr]
    • retroactive - Write the CAIP-2 and CAIP-10 Stacks specification - [16 Hours @ 70 $/ Hr]
    • Add Stacks support to the various Ceramic SDK - [40 Hours @ 70 $/ Hr]
      • Add Stacks test vector in the did-pkh repository
      • Add Stacks SIWX in the js-did repository
    • Documented Todo list app showing the integration with Stacks / ComposeDB - [40 Hours @ 70 $/ Hr]
    • Blog post announcing the new integration for the Stacks developer community with a working example (if we can we will get it published in the Hiro blog similar to How Sigle Built NFT-Gated Features in Their App) - [8 Hours @ 70 $/ Hr]

  • Milestone #2: Integrate Ceramic in Sigle - [$30,200]

    • ComposeDB schemas reusable by other apps (following/followers, public profile, posts, comments…) and documentation - [20 Hours @ 70 $/ Hr]
    • Integrate Ceramic SDK in Sigle for Stacks users (Identity, auth with backend, UI, ceramic node setup for staging/production, GraphQL queries, performance optimisations, feed, comments…) - [240 Hours @ 70 $/ Hr]
    • Migration system to allow existing users to migrate their content from Gaia to Ceramic - [80 Hours @ 70 $/ Hr]
    • Open signups for Polygon users via metamask + wallet connect - [80 Hours @ 70 $/ Hr]
    • Communication / pr for our community via discord, Twitter and blog post to explain why Sigle is now using Ceramic - [16 Hours @ 50 $/ Hr]

I accept the 3Box Labs Grants terms and conditions: Yes
I understand that I will be required to provide additional KYC information to the 3Box Labs to receive this grant: Yes

4 Likes
2

Hi @leo, thank you for your proposal! We will be in touch with an update once we have completed our initial review (1-2 weeks).

3

Congratulations @leo, I’m delighted to inform you that your grant proposal has been accepted! :tada:

We would like to award you a Ceramic Builders Grant.

We will follow up shortly with more details via email.

1 Like
4

Hello everyone,

We are super excited to join the Ceramic community and integrate Ceramic into Sigle!

As you may know, Sigle is currently built on top of the Stacks blockchain, a layer 1 chain that leverages Bitcoin security to enable smart contract functionality with Clarity. In order to migrate our current user base to Ceramic, we need to first build a Stacks adapter for it to let Stacks users authenticate using the Hiro or Xverse Wallet.

Let’s take it from the top, before starting the implementation we had to work on the technical specification for the Stacks adapter. For this, we first did the Sign in with X for Stacks specification of the CAIP-122 that describes the message that a user needs to sign in order to authenticate.
Then, we created the CAIP-2 and CAIP-10 Stacks specifications that define how to identify an account and the DID that will be used by Ceramic. For Stacks, it will look like this:

# Stacks mainnet, p2pkh input = a46ff88886c2ef9762d970b4d2c63678835bd39d
stacks:1:SP2J6ZY48GV1EZ5V2V5RB9MP66SW86PYKKNRV9EJ7

For the next update, we will be working on creating the pull requests implementing the specification in Javascript to the Ceramic repositories.

You can read our latest newsletter to learn more about what we are up to.
Happy new year all :champagne:

1 Like
5

Today’s update brings exciting progress towards the first milestone of this grant.
The team successfully implemented the ability to log in with Stacks and interact with Ceramic locally!

Updates

For the JS implementation, we needed the Stacks CAIP-122 specification, so we submitted a pull request in the namespace repository on GitHub for it. We made the necessary changes to various ceramic packages, including js-did and js-ceramic. Specifically, we updated the “cacao” package with the stacks message functions and created a new “@didtools/pkh-stacks” package containing the auth methods and verifier required.
During integration, we discovered that the “StacksProvider” does not have a way to get the network ID. As a temporary solution for testing, we hardcoded the mainnet URL. Communication is ongoing with the Stacks team to add this functionality to the wallet, as seen in this issue on GitHub. We also had a hard time making the local packages work together as js-did is using pnpm and js-ceramic npm and linking between both is not working.
For this task, I published a twitter thread to show the progress that got some engagement https://twitter.com/leopradel/status/1612106323755429888

The boilerplate for the next version of Sigle on Ceramic has been created. We are in discussion with the Orbis team to see if there are composites that we can share.

Demo

Here, you can see that the Hiro wallet ask for a message signature in order to authenticate with Ceramic and get a valid session.

FmIJLHWXkAY1YUE
FmIJLHWXkAY1YUE561×708 136 KB

Then the server is verifying the following payload to grant the user access.

FmM6CqWWAAA597w
FmM6CqWWAAA597w2034×1330 181 KB

You can try it out yourself using the demo application we created GitHub - pradel/stacks-ceramic-integration: Repo used for the demo application to test the integration. Instructions are on the README.

References

What’s next

Next, we will be following up with the Stacks team to unblock the Wallet issue and try to get the first milestone done. This will include, the Todo list demo app, and blog post that will be published in the Hiro blog.
Then Sigle migration to Ceramic will start next week!

1 Like
6

Update Milestone #1

The Stacks specification is now done as the last CAIP-122 pull request has been merged in the namespaces repository!
When reviewing the js-did pull request, @zfer mentioned that the fact that getAccountId was not mandatory, so while waiting for the Stacks wallet to have a way to get the current network ID, the pull request is ready for review. Hope it will get merged soon so we can continue with the demo.
I began discussions with the Hiro team this week for a blog post article and have decided it will be published at the end of February or beginning of March to align with EthDenver dates.

Update Milestone #2

Please note that all our code is open-source and can be viewed at GitHub - sigle/sigle: A beautiful decentralized and open source blog maker

Last week we began work on the next version of Sigle and set up all the necessary boilerplate. We have chosen the following tech stack: react/next.js, stitches, radix, connectkit, wagmi, ethers, composeDB, relay, zustand, react-hook-form. Our new design system components can be viewed at https://design.sigle.io/.

This week, we’ve been diving into the exciting world of Ceramic integration! We’ve begun crafting our app schemas and constructing the initial pages that communicate with ComposeDB. Our new app can be viewed at https://next.sigle.io/. Note that the staging ceramic node is not set up yet so you will get an error trying to use it. Will get the node deployed next week.

Settings page

We’ve now added a user profile page where individuals can input their information.

ComposeDB Schema:

type Profile
  @createModel(accountRelation: SINGLE, description: "Sigle profile") {
  # Custom display name of a profile.
  displayName: String @string(minLength: 3, maxLength: 80)
  # Bio of a profile.
  description: String @string(minLength: 3, maxLength: 300)
  # Website URL of a profile.
  websiteUrl: String @string(minLength: 3, maxLength: 2000)
  # Twitter username of a profile.
  twitterUsername: String @string(minLength: 3, maxLength: 1000)
}

Page:

screely-1674818750410
screely-16748187504101797×992 62.7 KB

Draft page

We’ve also started the work on the Draft page.

ComposeDB Schema:

type Post @createModel(accountRelation: LIST, description: "sigle post") {
  author: DID! @documentAccount
  version: CommitID! @documentVersion
  # The title of a publication.
  title: String! @string(minLength: 10, maxLength: 100)
  # The content of a publication.
  content: String! @string(minLength: 1, maxLength: 100000)
  # The cover image of a publication.
  featuredImage: String @string(minLength: 3, maxLength: 2000)
  # Meta description of a publication used for SEO.
  metaTitle: String @string(minLength: 3, maxLength: 150)
  # Meta description of a publication used for SEO.
  metaDescription: String @string(minLength: 3, maxLength: 300)
  # Meta image of a publication used for SEO.
  metaImage: String @string(minLength: 3, maxLength: 2000)
  # The canonical URL of a publication.
  canonicalUrl: String @string(minLength: 3, maxLength: 2000)
}

Page:

screely-1674819309979
screely-16748193099791797×992 117 KB

Improvements proposals

While integrating ComposeDB, I submitted the following ideas/improvements in the forum:

Challenges

The next challenge we will face will be the current limitations around GraphQL queries. As one can filter the queries based on some fields, we will have to download the full data in memory and filter it there.

What’s next

Next, we will focus on getting the essential features up and running, this includes: editor, draft / publish, public profile and app feed! :rocket:

You can see the updates on Twitter at any time in this thread:
https://twitter.com/leopradel/status/1615361101658738688

3 Likes
7

Update Milestone #1

The integration with Stacks is close to completion. The js-did pull request #137 has been successfully merged and version 0.0.1 of the @didtools/pkh-stacks package is now available on npm here. Additionally, the pull request for js-ceramic has been updated and is pending review to include Stacks as a verified source. The blog post announcement for Stacks x Ceramic x Sigle in progress.
This is the last step to get the Stacks integration working so can’t wait to see it merged so we can finish this milestone!

Update milestone #2

Please note that all our code is open-source and can be viewed at GitHub - sigle/sigle: A beautiful decentralized and open source blog maker

During these 2 weeks, we spent most of the time working on the new Sigle editor to bring the best writing experience to the users. Try it out and create a story here https://next.sigle.io/editor/new! I am really happy with this one :sunglasses:

Progress on the pages:

Editor page

The new editor page is live and you can write stories that get saved to ComposeDB.

screely-1676051197185
screely-16760511971853444×1583 174 KB

Profile page

Work on the profile page started.

screely-1676054289013
screely-16760542890133344×1657 493 KB

Deploying staging to fly.io

Our updated testing environment is now accessible at https://next.sigle.io/. We utilized fly.io to deploy the node and set up the configuration. The deployment is based on a docker image containing the Ceramic daemon.config.json, which enables us to deploy composites with our key.
I encountered some difficulties finding a suitable configuration, but if you want to create a staging service using fly.io to host a node simply, have a look at the integration pull request here.

What’s next

Next, we are continuing the work on other pages, public profile page, app feed and publish / draft logic.
I’ll be attending EthDenver, so if you’re also going, feel free to connect with me on Twitter at https://twitter.com/leopradel!

1 Like
8

Great update, we will see you there at ETH Denver then!

2 Likes
9

Milestone #1 completed :white_check_mark:

This week, the last js-ceramic pull request has been approved and the blog post that will be published around EthDenver in the Hiro blog is also done! The Todo list demo application, which demonstrates how to log in with Stacks and interact with ComposeDB using Relay, is available for viewing.

These last 3 tasks mark the end of milestone 1 and mean that the Stacks integration will be working as soon as ceramic releases the mentioned pull request!

1 Like
10

Update milestone #2

All our code is open-source and can be viewed at GitHub - sigle/sigle: Open-source writing platform for Web3 writers

The latest version is live at https://next.sigle.io/.

We’ve been hard at work this week, making significant changes to our codebase. Unfortunately, we encountered a roadblock when trying to implement other app views, as the current version of the GraphQL client filter capabilities was limited (only allowing for filters by id). So, we started looking into the option of doing GraphQL schema stitching and even created a forum post to discuss this possibility ComposeDB schema stitching. Unfortunately, it isn’t, so we decided to completely change our approach and remove GraphQL for all queries, only using it for mutations.

Trpc and Prisma to the rescue

To make our own queries with filter capabilities, we integrated trpc and Prisma to communicate with the server and Postgres database. And to make sure everything was working as it should on Staging, we deployed the current node on fly.io and used a Postgres database.
We’re getting there!

:bug: During the process, we found an issue in js-ceramic with the Postgres URL format and created a fix that was merged.

Publish logic

Our posts can have multiple state, draft, published or deleted. The GraphQL schema has been updated to reflect these changes with the following enum.

enum PostStatus {
  DRAFT
  PUBLISHED
  DELETED
}

Now you can create a draft, publish it and then delete it later (deleting is only hiding the post from the list, it’s still accessible on IPFS).

Feed page

A public feed with infinite loading is now available for viewing all published posts.

What’s next

Mobile version and single post view are the 2 missing parts to get a working app with basic functionalities!
Next week we will be at EthDenver and the app will be ready to be tested :eyes: :rocket:

2 Likes
11

Hey @leo, were you successfully able to integrate Lit Protocol? If so, what kind of integration is it? Do you interact with the Ceramic network from Lit Actions?

12

Hey, so far we didn’t manage to do what we wanted with Lit as there is no support for the Stacks blockchain.

13

@leo got it, thanks!