React Library

Installation & Setup

The React Library is built on,

Ethers (opens in a new tab): A complete and compact library for interacting with the Ethereum Blockchain and its ecosystem.
Degen (opens in a new tab): Design system for Mirror.xyz
Convo Space SDK: SDK for building on theconvo.space

Install Dependenices

npm i @theconvospace/react degen ethers

Setup

Wrap the root of your app in a ThemeProvider, import the external stylesheet. Reference (opens in a new tab)

import { ThemeProvider } from 'degen'
import 'degen/styles'
 
const App = () => {
  return <ThemeProvider>{children}</ThemeProvider>
}

All Done.

ℹ️

To theme the components acording to your website, refer to ThemeProvider (opens in a new tab)

Component Guide

`CommentSection`

query: Defines the Conversation the Comment Section gets anchored to,
- threadId: This uniquely anchors a conversation to an element. Could be the Unique Id of the Post, Image, NFT etc.
- url: This sets the source of the Conversations, like https://opensea.io. If setting up for your own website, it should be the hostname of your wesbite.
apikey: Defines the API Key the Comment Section uses to query Convo Space. Grab one on the Developer Dashboard (opens in a new tab) if you don't have one.
hostname: This sets the source of the Conversations, this should always be your website's hostname.
provider: An Ethers Web3Provider (opens in a new tab) is used to Connect to a user's wallet and Sign a Message to Authenticate the user.

Example,

import { CommentSection } from "@theconvospace/react";
 
<CommentSection
    query={{
        threadId: "KIGZUnR4RzXDFheXoOwo",
        url: "https://theconvo.space/",
    }}
    apikey="CSCpPwHnkB3niBJiUjy92YGP6xVkVZbWfK8xriDO"
    hostname="https://theconvo.space/"
    provider={web3}
/>

`Comment`

commentId: Unique Id of the Comment.
apikey: Defines the API Key the Comment Section uses to query Convo Space. Grab one on the Developer Dashboard (opens in a new tab) if you don't have one.

Example,

import { Comment } from "@theconvospace/react";
 
<Comment
    commentId="01g6w7sg6f5d9p5tcy95m75rr6"
    apikey="CSCpPwHnkB3niBJiUjy92YGP6xVkVZbWfK8xriDO"
/>

`CommentEmbed`

Sets up an Iframe.

Example,

import { CommentEmbed } from "@theconvospace/react";
 
<CommentEmbed
    config={{ commentId: "01g40c9sx52cp69hqa155wt2yd" }}
    width="500px"
    height="300px"
/>

`ConvoEmbed`

Sets up an Iframe.

Example,

import { ConvoEmbed } from "@theconvospace/react";
 
<ConvoEmbed embedConfig={{
    threadId: "KIGZUnR4RzXDFheXoOwo",
    url: "https://theconvo.space/",
    theme: "dark",
    width: "700px",
    height: "500px"
}} loading="eager" width="700px" height="550px" />

Utils @theconvospace/sdk