Docs / Morsel Wallet Connect
Integration

Morsel Wallet Connect

Integrate Morsel Wallet into your React dApp with the official adapter package.

Morsel Wallet Connect is the recommended way to integrate Morsel Wallet into your React dApp. It provides a fully-typed adapter with QR code connect, browser extension detection, Wallet Standard support, 13 composable hooks, and a drop-in ConnectButton — all in one package.

Supports both Cookie and Solana networks. The connect modal ships with light and dark mode built-in.

Installation

bash 
npm install @morsel-wallet/adapter @solana/web3.js @wallet-standard/app

Setup

Wrap your app with WalletProvider and WalletModalProvider. Create adapters for Morsel and any Wallet Standard wallets detected in the browser:

javascript App.tsx
import {
  WalletProvider,
  WalletModalProvider,
  ConnectButton,
  MorselCookieWalletAdapter,
  StandardWalletAdapter,
} from "@morsel-wallet/adapter";
import { getWallets } from "@wallet-standard/app";

const morsel   = new MorselCookieWalletAdapter();
const standard = getWallets().get().map(w => new StandardWalletAdapter(w));

export default function App() {
  return (
    <WalletProvider adapters={[morsel, ...standard]} autoConnect>
      <WalletModalProvider>
        <ConnectButton />
      </WalletModalProvider>
    </WalletProvider>
  );
}

ConnectButton

Drop-in UI component. Opens the connect modal when disconnected; shows address and balance when connected.

javascript 
import { ConnectButton } from "@morsel-wallet/adapter";

// Basic
<ConnectButton />

// With options
<ConnectButton
  showAddress
  useModal
  className="my-btn"
  onConnectError={(err) => console.error(err)}
/>

useWallet

The primary hook — gives you full access to wallet state and methods.

javascript 
import { useWallet } from "@morsel-wallet/adapter";

const { connected, connecting, publicKey, connect, disconnect } = useWallet();

if (!connected) return <button onClick={connect}>Connect</button>;
return <button onClick={disconnect}>{publicKey.toBase58()}</button>;

useWalletBalance

Fetches the SOL or COOK balance with loading state and a refetch function.

javascript 
import { useWalletBalance } from "@morsel-wallet/adapter";
import { Connection } from "@solana/web3.js";

const connection = new Connection("https://rpc.dumpsack.xyz");
const { balance, loading, refetch } = useWalletBalance(connection);

return <p>{loading ? "Loading..." : `${balance} COOK`}</p>;

useSignMessage

javascript 
import { useSignMessage } from "@morsel-wallet/adapter";

const { signMessage, signing } = useSignMessage();

const msg = new TextEncoder().encode("Hello from MyDapp");
const { signature } = await signMessage(msg);

useSignTransaction & useSendTransaction

javascript 
import { useSendTransaction } from "@morsel-wallet/adapter";
import { Transaction, SystemProgram, PublicKey } from "@solana/web3.js";

const { sendTransaction, sending } = useSendTransaction();

const tx = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: publicKey,
    toPubkey: new PublicKey("RECIPIENT"),
    lamports: 1_000_000,
  })
);

const sig = await sendTransaction(tx, connection);
console.log("Sent:", sig);

Network Switching

Switch between Cookie and Solana at runtime — balances, RPC endpoints, and transaction handling all update automatically.

javascript 
const { setNetwork, network } = useWallet();

setNetwork("gorbagana"); // or "solana"
console.log("Active network:", network);
Use "gorbagana" as the network identifier for Cookie network, and "solana" for Solana Mainnet.

Light & Dark Mode

The connect modal ships with both themes. Pass a theme prop to WalletModalProvider, or leave it unset to follow the system preference.

javascript 
// Follow system preference (default)
<WalletModalProvider>

// Force light
<WalletModalProvider theme="light">

// Force dark
<WalletModalProvider theme="dark">

All Hooks

HookDescription
useWallet()Full wallet context — state, methods, events
useWalletAddress()Public key as Base58 string or null
useWalletBalance()SOL / COOK balance with loading & refetch
useWalletStatus()Monitor connection state changes
useSignMessage()Sign arbitrary messages
useSignTransaction()Sign one or multiple transactions
useSendTransaction()Send transactions to the network
useWalletConnection()Connection lifecycle management
useWalletError()Access and clear current error state
useAutoConnect()Manage auto-connect behaviour
useWalletEvent()Subscribe to wallet events
useOnConnect()Callback fired on wallet connect
useOnDisconnect()Callback fired on wallet disconnect
← Back to Docs Developer page →