Documentation
Notification

Notification Modal

In order to show character's notification, you need to connect account first.

Install dependencies

💡

Please make sure @crossbell/connect-kit has been configured correctly. Read more.

pnpm i @crossbell/notification

Setup notification modal

import { WagmiConfig } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider, createWagmiConfig } from "@crossbell/connect-kit";
import { NotificationModal } from "@crossbell/notification";
 
import { Main } from "./main";
 
const queryClient = new QueryClient();
const wagmiConfig = createWagmiConfig({ appName: "Crossbell Dev" });
 
export default function App() {
	return (
		<QueryClientProvider client={queryClient}>
			<WagmiConfig config={wagmiConfig}>
				<ConnectKitProvider>
					<NotificationModal />
					<Main />
				</ConnectKitProvider>
			</WagmiConfig>
		</QueryClientProvider>
	);
}

Show notification modal

import { useIsConnected } from "@crossbell/connect-kit";
import { useShowNotificationModal } from "@crossbell/notification";
 
export function NotificationBtn() {
	const isConnected = useIsConnected();
	const show = useShowNotificationModal();
 
	if (!isConnected) return null;
 
	return <button onClick={show}>Show Notifications</button>;
}
ConnectButtonxSettings