@tipchatteam/react-wagmi

Drop-in TipChat integration for wagmi + viem apps. Wires wallet auth automatically.

Installation

npm install @tipchatteam/react-wagmi @tipchatteam/react-ui @tipchatteam/react @tipchatteam/core

react, react-dom, wagmi, and viem are required as peer dependencies.

Quick Start

import { useAccount, useSignMessage } from 'wagmi';
import { TipChatWagmiProvider } from '@tipchatteam/react-wagmi';
import { TipChatWidget, TipChatThemeProvider, darkTheme } from '@tipchatteam/react-ui';
import '@tipchatteam/react-ui/styles.css';

function App() {
  const account = useAccount();
  const signMessage = useSignMessage();

  return (
    <TipChatWagmiProvider
      apiUrl="https://tipchat-api.onrender.com"
      tenantId="my-app"
      apiKey="tc_..."
      account={account}
      signMessage={signMessage}
    >
      <TipChatThemeProvider theme={darkTheme}>
        <TipChatWidget />
      </TipChatThemeProvider>
    </TipChatWagmiProvider>
  );
}

That's it. No manual client creation, no wallet adapter boilerplate.

API

TipChatWagmiProvider

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiUrl | string | Yes | TipChat API URL | | tenantId | string | Yes | Your tenant ID | | apiKey | string | No | API key | | account | UseAccountReturn | Yes | Return value of wagmi's useAccount() | | signMessage | UseSignMessageReturn | Yes | Return value of wagmi's useSignMessage() | | tipExecutor | TipExecutor | No | On-chain tip executor | | billingToken | BillingTokenResolver | No | Billing auth token |

useWagmiWalletAdapter(account, signMessage)

Low-level hook that creates a WalletProviderAdapter from wagmi hooks. Use this if you want to build the TipChatClient yourself.

import { useAccount, useSignMessage } from 'wagmi';
import { useWagmiWalletAdapter } from '@tipchatteam/react-wagmi';
import { TipChatProvider } from '@tipchatteam/react';

function App() {
  const account = useAccount();
  const signMessage = useSignMessage();
  const walletAdapter = useWagmiWalletAdapter(account, signMessage);

  return (
    <TipChatProvider
      apiUrl="https://tipchat-api.onrender.com"
      tenantId="my-app"
      walletProvider={walletAdapter}
    >
      <Chat />
    </TipChatProvider>
  );
}

License

MIT