The official Verbwire wallet event stream client library for the Verbwire API and the Wagmi Library.
This library, combined with the Verbwire dashboard, allows an easy way to view your users as well as connection statistics. No back end required. Additionally, connection statistics work with ANY wallet compatible with wagmi, not just the Verbwire Wallet. It integrates seamlessly with existing applications utilizing wagmi and streams wallet and connection event information without the need for additional back-end infrastructure.
Install via npm in the console
$ npm install verbwire-wallet-streamThe Verbwire wallet streamer utilizes existing wagmi hooks to stream events to the Verbwire API.
Utilizing this library requires you to have wagmi installed and configured. Additionally you will need a Verbwire API public key that has the '/v1/wallet/event/save' endpoint or WALLET_EVENT category (available from the Verbwire Dashboard.
Private keys are NOT recommended as the key will be viewable by client applications.
Finally, you will need to create a Verbwire Wallet Application from the dashboard. You will include the Application ID in the VerbwireWalletStreamContextProvider.
Make sure wagmi is installed. Include the watchAccount hook
import {watchAccount} from "@wagmi/core";
Wrap your application in the VerbwireWalletStreamContextProvider.
<VerbwireWalletStreamContextProvider apiKey="YOUR_PUBLIC_API_KEY" applicationId="YOUR_APPLICATION_ID" watchAccount={watchAccount}>
<Component {...pageProps} />
</VerbwireWalletStreamContextProvider>
Include the library, as well as the 'watchAccount' hook from @wagmi/core in your main application. You'll need to wrap your application in the VerbwireWalletStreamContextProvider. Make sure this is a child of your wagmi wrapping.
Example _app.tsx for nextjs:
import { VerbwireWalletStreamContextProvider } from 'verbwire-wallet-stream'
import {watchAccount} from "@wagmi/core";
// ... Rest of your code...
function MyApp({ Component, pageProps }: AppProps) {
return (
<WagmiConfig config={wagmiConfig}>
<VerbwireWalletStreamContextProvider apiKey="YOUR_PUBLIC_API_KEY" applicationId="YOUR_APPLICATION_ID" watchAccount={watchAccount}>
<Component {...pageProps} />
</VerbwireWalletStreamContextProvider>
</WagmiConfig>
);
}Once configured, you will see page load, wallet connections and user address lists in the Verbwire Dashboard under your Verbwire Wallet Application. Streaming happens seamlessly without the need for additional back-end infrastructure.