Documentation
Search…
⌃K

Render

Once you've configured your project with Dialect context providers as described in the previous section, you can simply drop in the Dialect Notifications react component.
import { NotificationsButton } from '@dialectlabs/react-ui';
// This is your dapp address registered in dialect service
const DAPP_EXAMPLE_ADDRESS = 'D1ALECTfeCZt9bAbPWtJk7ntv24vDYGPmyS7swp7DY5h';
const Notifications = () => {
return (
<NotificationsButton
dialectId="dialect-notifications"
{/*
Pass the dialect dapp address prop
*/}
dappAddress={DAPP_EXAMPLE_ADDRESS}
{/*
Strictly visual prop. Specifies types of notifications one would receive.
*/}
notifications={[
{ name: 'Welcome message', detail: 'On signup' },
]}
{/*
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}
{/*
`channels` prop specifies which types are supported for notification subscription.
Accepts an array, containing the following values:
*/}
channels={['web3', 'email', 'sms', 'telegram']}
/>
)
}
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>
<Notifications />
</DialectProviders>
</WalletProvider>
</ConnectionProvider>
);
}