Introducing, 3Box Comments Plugin

Add commenting to your dapp with a few lines of code

Simple, Beautiful, Decentralized Comments

Today we’re thrilled to announce the launch of the 3Box Comments plugin, a simple drop-in react component for adding a beautiful decentralized comments section to your dapp. Built using the 3Box Messaging API for Open Threads under the hood, the plugin allows Ethereum developers to easily make their apps more social and interactive with rich discourse and only a few lines of code.

Getting Started with Comments 💬

• Try the Demo 👈
• Read the Docs 📚
• Explore the Code ⚙️

Why 3Box Comments?

A simple developer experience. At 3Box we believe in building simple, useful tools for developers and our new Comments plugin is no exception. Integration only requires a few lines of code, and you can even configure certain behaviors of the plugin. Learn how to use the plugin below.

An engaging user experience. As avid web3 users ourselves, we’re always looking for ways to improve the Ethereum experience for end users. Our vision of web3 is much more inclusive than buying/selling/transferring assets, so we aim to build products that enable more social, interactive apps to be built around user-centric data. This Comments plugin directly pushes us further in this social, interactive direction for web3.

A fair and open system. Unlike web2 commenting plugins such as Disqus that centralize user data and abuse it by selling it to advertisers without the users’ knowledge, consent, or benefit, 3Box Comments are built on the open, interoperable, user-controlled 3Box data network which relies on IPFS and OrbitDB. This open data storage architecture is far more fair for all parties involved and moves us beyond unfair business models of the past. Also, 3Box Comments is completely free and open-source.

3️⃣ #BuildBetter

Comments for every Ethereum dapp

The use cases for commenting in web3 apps are so broad and varied, but here are just a few ideas.

• DAOs: Members can comment on community walls and DAO proposals.
• Marketplaces: Users can comment on other users/businesses for reputation, and their listed assets, including NFTs or creative works.
• Social Media: Users can comment on other users’ profiles or walls for basic social interactivity and potentially, reputation.
• DeFi: Users can comment on specific markets or lender profiles, or they can review products and offerings.
• Media: Users can comment on content including articles, posts, videos, memes, and more.
• Explorers: Users can comment on smart contracts, transactions, or addresses.
• Stores: Users can review or ask questions about apps, games, products, services, or anything.

How it Works

Architecture

The Comments plugin is built using a standard implementation of Open Threads which are defined in the 3Box Threads API and made available via the 3Box.js SDK. The Comments plugin also includes UI for inputting and displaying user comments, logic for fetching user profiles, and pagination. The component is configurable to various authentication patterns, and can handle both Web3/3Box logged-in & logged-out states.

Authentication

Without authenticating, users can only read messages in the comment thread. However authentication is required to perform more interactive functionality. After the user is authenticated, a user can post a comment, delete their comment, and receive comments from other users in real-time.

Using the Comments Plugin 🛠️

Adding the 3Box comments plugin to your react application is simple. We took care to make the developer experience as easy as possible. 3Box comments plugin only takes a few lines of code to get going.

1. Install the component

npm i -S 3box-comments-react‌

2. Choose your authentication pattern

Depending on when and how your dApp handles authentication for web3 and 3Box, you will need to provide a different set of props to the component. Three acceptable authentication patterns and their respective props are outlined below:

A) Dapp handles web3 and 3Box logins, and they run before component is mounted. (recommended)

Dapp integrates with 3Box.js SDK and the 3box-comments-react component. In this case, the box instance returned from Box.openBox(ethAddr) via 3Box.js should be passed to the box prop in the comments component. The user's current Ethereum address should be passed to the currentUserAddr prop to determine deletePost access on each comment.

B) Dapp handles web3 and 3Box logins, but they haven’t run before component is mounted. (recommended)

Dapp integrates with 3Box.js SDK and the 3box-comments-react component. In this case, the login logic implemented in the dapp should be passed to the Comments component as the loginFunction prop, which is run when a user attempts to post a comment. The user's current Ethereum address should be passed to the currentUserAddr prop to determine deletePost access on each comment.

C) Dapp has no web3 and 3Box login logic.

Dapp only integrates with the 3box-comments-react component, but not 3Box.js SDK. All web3 and 3Box login logic will be handled within the Comments component, though it's required for the ethereum object from your dapp's preferred web3 provider be passed to the ethereum prop in the component.

Best practice

For the best UX, we recommend implementing one of the following authentication patterns: A; B; or B with A.

Each of these patterns allow your application to make the box object available in global application state where it can be used by all instances of the Comments component regardless of which page the user is on. This global pattern removes the need for users to authenticate on each individual page they wish to comment on, which would be the case in C.

3. Configure application settings

First, choose a name for your application’s 3Box space.

Although you are free to choose whichever name you’d like for your app’s space, we recommend using the name of your app. If your application already has a 3Box space, you are welcome to use that same one for comments.

Next, choose a naming convention for your application’s threads.

Comment threads need a name, and we recommend that your application creates threadNames according to a simple rule. We generally like using a natural identifier, such as community name, page URL, token ID, or other similar means.

Then, create an admin 3Box account for your application.

Each thread is required to have an admin (adminEthAddr), which possesses the rights to moderate the thread. We recommend you create an admin Ethereum account for your application so you can perform these actions. While technically you can use any Ethereum address as an admin account, we recommend creating a 3Box profile for that address so if you need to take action in the thread, others will know and trust you as the admin.

Lastly, initialize your application’s space.

Before threads can be deployed in your dapp, your application’s admin account (adminEthAddr created in the previous step) must first open the space (spaceName) that will be used to store your application's threads. This step must be completed before your comment threads can be used by others. This process would likely be done outside the context of your dapp, probably in a test environment.

Simply open a space by running (via 3Box.js SDK):

const box = await Box.openBox(adminEthAddr, ethereum);
const space = await box.openSpace(spaceName, spaceOpts);‌

Sign the web3 prompts to complete the space initialization process.

4. Usage

Example

import ThreeBoxComments from '3box-comments-react';
const MyComponent = ({ handleLogin, box, ethereum, myAddress, currentUser3BoxProfile, adminEthAddr }) => (
     <ThreeBoxComments
          // required
          spaceName="mySpaceName"
          threadName="myThreadName"
          adminEthAddr={adminEthAddr}

          // Required props for auth A. & B.
          box={box}
          currentUserAddr={myAddress}
          // Required prop for auth B.
          loginFunction={handleLogin}
          // Required prop for auth C.
          ethereum={ethereum}
          // optional
          members={false}
          showCommentCount={10}
          threadOpts={{}}
          useHovers={false}
          currentUser3BoxProfile={currentUser3BoxProfile}
          userProfileURL={address => `https://mywebsite.com/user/${address}`}
     />
);

‌Prop Types

Here’s a list of all the props used in the 3Box Comments component: spaceName, threadName, adminEthAddr, box, currentUserAddr, loginFunction, ethereum, members, showCommentCount, spaceOpts, threadOpts, useHovers, currentUser3BoxProfile, userProfileURL.

For more information on any of the prop types, view our docs.

Explore our other plugins

We’re working towards creating an ecosystem of 3Box and third-party plugins that make using 3Box capabilities (identity, profiles, storage, messaging) as simple and easy as possible.

Explore the Profile Hover plugin

Questions? Reach out on Discord!

We’re always online and available to chat in Discord if you have any questions about using our plugins or anything else. See you there!