Getting Started

This library aims to provide a component to be integrated into any DApp to let users chat with each other. The chat is fully themeable, thanks to ChakraUI.

You can find examples of integrations in the following:

• https://chat-liteflow.vercel.app/
• https://demo.liteflow.com/

Installation

Install @nft/chat

npm i @nft/chat

ChatProvider

Wrap your app with the ChatProvider component, passing your ethers signer to it.

import { ChatProvider } from '@nft/chat'

function App() {
  const signer = useSigner()
  return <ChatProvider signer={signer}>{children}</ChatProvider>
}

Props

| name | type | description | | --------------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | | signer | Signer (@ethersproject/abstract-signer) | An ethers signer representing the currently connected wallet | | lookupAddress | (address: string) => Promise<{ name?: string, avatar?: string }> | Optional: Function to resolve an Ethereum address (think about ENS, Lens protocol...) | | onUserClick | (address: string) => void | Optional: Function called every time an address/avatar is clicked within the chat | | theme | Dict (@chakra-ui/utils) | Optional: Theme to customize the look and feel of the chat https://chakra-ui.com/docs/styled-system/customize-theme |

Chat

Now that your application is set up with the provider, you can place the chat component anywhere. This component will have a dynamic size depending on the size of your container.

import { Chat } from '@nft/chat'

function Page() {
  return <Chat />
}

Props

| name | type | description | | ----------- | -------- | ------------------------------------------------- | | recipient | string | Optional: Address of the recipient to chat to |

You're good to go! Enjoy chatting in web3.