🪛

Integrating the Widget

WalletChat widget integration steps for react-wallet-chat NPM package

Custom Integration Steps

  1. 1.
    Install NPM package "react-wallet-chat"
yarn add react-wallet-chat if using yarn instead of npm
  1. 2.
    On any page you wish to have the chat widget active, import:
import {WalletChatProvider, WalletChatWidget} from 'react-wallet-chat'
And include in your page source:
<WalletChatWidget />
  1. 3.
    Add the WalletChat Widget with connectedWallet parameter to include the address, activeConnector and chainId. PS: in this case the activeConnector is from the WAGMI package, and could be substituted as needed to get the wallet name/type.
<WalletChatProvider>
<FunctionalComponent {...pageProps} />
<WalletChatWidget
connectedWallet={
address && activeConnector && chainId
? {
walletName: activeConnector.name,
account: address,
chainId: chain.id,
}
: undefined
}
/>
<WalletChatProvider>