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

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

3 Likes

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).

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

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

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.

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

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

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:

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:

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

2 Likes