Solana Wallet Adapter Integration

Integrate Oko with Solana's @solana/wallet-adapter-react for React-based Solana dApps.

How it works

Oko registers itself via the Wallet Standard protocol. Once registered, Solana Wallet Adapter auto-discovers Oko — no manual wallet configuration needed.

Installation

npm install @oko-wallet/oko-sdk-svm @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-base @solana/web3.js @solana/wallet-standard-chains @solana/wallet-standard-features

Step 1: Register Oko as a Wallet Standard Wallet

Initialize OkoSvmWallet and register it with the wallet-standard protocol. This should run once at app startup, before rendering wallet UI.

import {
  OkoSvmWallet,
  registerWalletStandard,
  type WalletStandardConfig,
} from "@oko-wallet/oko-sdk-svm";
import { SOLANA_CHAINS } from "@solana/wallet-standard-chains";
import {
  SolanaSignIn,
  SolanaSignMessage,
  SolanaSignTransaction,
  SolanaSignAndSendTransaction,
} from "@solana/wallet-standard-features";

const SOLANA_CONFIG: WalletStandardConfig = {
  chains: SOLANA_CHAINS,
  features: {
    signIn: SolanaSignIn,
    signMessage: SolanaSignMessage,
    signTransaction: SolanaSignTransaction,
    signAndSendTransaction: SolanaSignAndSendTransaction,
  },
  rpcEndpoints: {
    "solana:mainnet": "https://api.mainnet-beta.solana.com",
    "solana:devnet": "https://api.devnet.solana.com",
    "solana:testnet": "https://api.testnet.solana.com",
  },
};

const result = OkoSvmWallet.init({
  api_key: "your-api-key",
  chain_id: "solana:devnet",
  theme: "dark",
});

if (!result.success) {
  throw new Error(`Failed to initialize: ${JSON.stringify(result.err)}`);
}

// Register with wallet-standard (call once globally)
registerWalletStandard(result.data, [SOLANA_CONFIG]);

// Wait for SDK initialization to complete
await result.data.waitUntilInitialized;

Step 2: Set Up Wallet Adapter Providers

Wrap your app with Solana Wallet Adapter providers. Pass an empty wallets array — wallet-standard wallets like Oko are discovered automatically.

import { useMemo } from "react";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { clusterApiUrl } from "@solana/web3.js";

import "@solana/wallet-adapter-react-ui/styles.css";

export function WalletAdapterProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const endpoint = useMemo(() => clusterApiUrl("devnet"), []);

  // No wallets array needed - wallet-standard wallets are auto-discovered
  const wallets = useMemo(() => [], []);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

Step 3: Use Wallet Adapter Hooks

With the providers set up, use the standard Wallet Adapter hooks and UI components. Oko will appear as a selectable wallet in the modal.

import { useWallet } from "@solana/wallet-adapter-react";
import {
  WalletMultiButton,
  WalletDisconnectButton,
} from "@solana/wallet-adapter-react-ui";

function WalletContent() {
  const { publicKey, connected, wallet, wallets } = useWallet();

  return (
    <div>
      {/* Wallet selection modal button */}
      <WalletMultiButton />
      {connected && <WalletDisconnectButton />}

      {/* Connection status */}
      <p>Connected: {connected ? "Yes" : "No"}</p>
      <p>Wallet: {wallet?.adapter.name ?? "None"}</p>
      <p>Public Key: {publicKey?.toBase58()}</p>

      {/* List all discovered wallets */}
      <ul>
        {wallets.map((w) => (
          <li key={w.adapter.name}>
            {w.adapter.name} ({w.readyState})
          </li>
        ))}
      </ul>
    </div>
  );
}

Supported Features

Feature	Description
`standard:connect`	Connect to wallet
`standard:disconnect`	Disconnect from wallet
`standard:events`	Subscribe to wallet events
`solana:signIn`	Sign In With Solana (SIWS)
`solana:signMessage`	Sign arbitrary messages
`solana:signTransaction`	Sign transactions
`solana:signAndSendTransaction`	Sign and broadcast transactions

Next Steps

Solana Integration - Direct SDK usage without Wallet Adapter
React Integration - General React patterns
Error Handling - Error handling best practices

Installation​

Step 1: Register Oko as a Wallet Standard Wallet​

Step 2: Set Up Wallet Adapter Providers​

Step 3: Use Wallet Adapter Hooks​

Supported Features​

Next Steps​