Render Subscribe Button
Once you've configured your project with Dialect context providers as described in the previous section, you can simply drop in the
<SubscribeButton /> react component.import { SubscribeButton } from '@dialectlabs/react-ui';
const Subscribe = () => {
const { setVisible } = useWalletModal();
return (
<SubscribeButton
dialectId="dialect-subscribe"
{/*
Just a visual prop. Specifies types of notifications one would receive. Could be ommited if Dapp Notification Types are specified via sdk.
*/}
notifications={[
{ name: 'Welcome message', detail: 'On signup' },
]}
{/*
`channels` prop specifies which types are supported for notification subscription.
Accepts an array, containing the following values:
*/}
channels={['web3', 'email', 'sms', 'telegram']}
{/*
How often should polling happen. If not provided, fetch would happen once. SWR will handle refetch on focus or simple page refresh.
Best to set it, if you are using web3 notifications.
*/}
pollingInterval={15000}
{/* Provide a function to trigger wallet connection. E.g. setVisible from the useWalletModal() hook if you use '@solana/wallet-adapter-react-ui' */}
onWalletConnect={() => {
setVisible(true);
}}
{/*
Optional. Text to display above the subscribe button
*/}
label="Subscribe to dApp updates"
/>
)
}
Embed this component in the broader context providers as follows:
const App = () => {
return (
// In this example, using @solana/wallet-adapter-react package for wallet data.
// Assuming WalletProvider and ConnectionProvider are properly configured with necessary wallets and network.
<ConnectionProvider>
<WalletProvider>
<DialectProviders>
<Subscribe />
</DialectProviders>
</WalletProvider>
</ConnectionProvider>
);
}
Last modified 6mo ago