Setup & Configuration

"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>
  );
}

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>
  );
}

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

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

// ❌ 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";