🪛Integrating the Widget

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

Custom Integration Steps

1. Install NPM package "react-wallet-chat"

yarn add react-wallet-chat if using yarn instead of npm

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 />

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>