Chat widget

This chat library (opens in a new tab) 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 (opens in a new tab).

Installation

Install @nft/chat (opens in a new tab)

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 (opens in a new tab)

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

useMintDrop