Skip to main content

Setup & Configuration

Get the Dialect React SDK installed and configured for notification inbox integration. This guide covers installation, client setup, authentication, and environment configuration for frontend applications.

Prerequisites​

Before using the inbox components, ensure you have completed:

  • App Registration: Your app must be registered with Dialect (registration guide)
  • React Environment: React 16.8+ with hooks support
  • Wallet Integration: Solana wallet adapter or custom wallet implementation

Installation​

Install the React UI package and blockchain-specific SDK for your needs:

# React UI components (required)
npm install @dialectlabs/react-ui

# Blockchain SDK for Solana
npm install @dialectlabs/react-sdk-blockchain-solana

Basic SDK Setup​

Simple Integration​

For most applications, this basic setup is sufficient:

"use client";

import "@dialectlabs/react-ui/index.css";
import { DialectSolanaSdk } from "@dialectlabs/react-sdk-blockchain-solana";
import { NotificationsButton } from "@dialectlabs/react-ui";

const DAPP_ADDRESS = "your-dapp-address";

export function App() {
  return (
    <div className="app">
      {/* Your app content */}
      
      <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
        <NotificationsButton />
      </DialectSolanaSdk>
    </div>
  );
}

Custom Wallet Adapter​

If you need to use a custom wallet implementation:

import { useMemo } from "react";
import { DialectSolanaSdk } from "@dialectlabs/react-sdk-blockchain-solana";
import { NotificationsButton } from "@dialectlabs/react-ui";
import { useMyCustomWallet } from "./my-wallet";

export function CustomWalletNotifications() {
  const wallet = useMyCustomWallet(); // Your wallet implementation

  const walletAdapter = useMemo(
    () => ({
      publicKey: wallet.publicKey, // PublicKey | null
      signMessage: wallet.signMessage, // (msg: Uint8Array) => Promise<Uint8Array>
      signTransaction: wallet.signTransaction, // <T extends Transaction | VersionedTransaction>(tx: T) => Promise<T>
    }),
    [wallet]
  );

  return (
    <DialectSolanaSdk
      dappAddress="your-dapp-address"
      customWalletAdapter={walletAdapter}
    >
      <NotificationsButton />
    </DialectSolanaSdk>
  );
}

Environment Configuration​

Configure your Dialect SDK wrapper to switch between production and development environments:

import { DialectSolanaSdk } from "@dialectlabs/react-sdk-blockchain-solana";

export function MyApp() {
  return (
    <DialectSolanaSdk 
      dappAddress={APP_ADDRESS}
      config={{
        environment: "development",
      }}
    >
      {/* Your notification components */}
    </DialectSolanaSdk>
  );
}

Troubleshooting​

Styles not loading correctly:

// ❌ Wrong - styles imported after component
import { NotificationsButton } from "@dialectlabs/react-ui";
import "@dialectlabs/react-ui/index.css";

// ✅ Correct - styles imported first
import "@dialectlabs/react-ui/index.css";
import { NotificationsButton } from "@dialectlabs/react-ui";

dappAddress not found:

  • Ensure your app is registered with Dialect
  • Verify the dappAddress matches your registration
  • Check environment configuration (development vs production)

Wallet connection issues:

  • Ensure wallet adapter is properly configured
  • Check wallet adapter version compatibility
  • Verify wallet permissions and connection state