@morsel-wallet/adapter 0.2.0

Entry points

ESM only, with types. @solana/web3.js 1.x is a peer dependency. Nothing touches window during server rendering; the widget mounts on the client through a portal.

WalletProvider

Holds the wallet state for everything below it. Required, once, near the root.

Wrap the part of your app that opens the widget in WalletModalProvider (no props), and render <WalletModal /> once inside it.

WalletModal

The connect widget: a 360 px card on desktop and a bottom sheet you can drag down on phones. Which path it takes (QR, extension, phone deep link, Morsel's browser) is decided by the device; see how it connects.

ConnectButton

Without className or children, an accent pill that opens the widget, then an account chip (avatar, wallet badge, short address and, with a connection, the native balance) with a menu to copy the address, switch wallet or disconnect.

<ConnectButton connection={connection} balanceSymbol="COOK" theme="dark" />

useWalletModal

Open and close the widget from anywhere under WalletModalProvider.

const { open, close, visible } = useWalletModal();

open();                              // the wallet list
open({ view: 'get-morsel' });        // the Get Morsel card
open({ anchor: buttonRef.current }); // with placement="anchor"

Theming

Every class is prefixed mw- and scoped under .mw-scope, so nothing leaks into your page and your global button or image rules do not leak in. The stylesheet is injected once into <head>; pass nonce for a strict CSP, or ship getMorselConnectCss() yourself. Override any token:

.mw-scope {
  --mw-accent: #ff6b00;
  --mw-radius: 20px;
  --mw-font: 'DM Sans', system-ui, sans-serif;
}
.mw-scope[data-mw-theme='dark'] {
  --mw-bg: #0b0b0f;
}

• --mw-accent
• --mw-accent-fg
• --mw-bg
• --mw-bg-2
• --mw-bg-3
• --mw-fg
• --mw-fg-2
• --mw-fg-3
• --mw-line
• --mw-overlay
• --mw-success
• --mw-danger
• --mw-warn
• --mw-shadow
• --mw-radius
• --mw-font
• --mw-z

Hooks

All hooks read from the nearest WalletProvider and are fully typed.

Sending a transaction with the connected wallet:

const { publicKey, sendTransaction } = useWallet();

const tx = new Transaction().add(
  SystemProgram.transfer({ fromPubkey: publicKey, toPubkey: recipient, lamports: 1_000_000 }),
);
tx.feePayer = publicKey;
tx.recentBlockhash = (await connection.getLatestBlockhash()).blockhash;

const signature = await sendTransaction(tx, connection);

Events

React to connection changes without polling, with the event hooks or the adapter's own emitter.

useOnConnect((publicKey) => track('wallet_connected', publicKey.toBase58()));
useOnDisconnect(() => track('wallet_disconnected'));
useOnWalletError((error) => toast(error.message));

// Or any adapter event by name
useWalletEvent('readyStateChange', (state) => console.log(state));

MorselCookieWalletAdapter

The Morsel adapter, from either entry point. It looks for the injected provider (the extension or Morsel's browser) and keeps a QR pairing ready over the relay. WalletProvider creates one for you.

import { MorselCookieWalletAdapter } from '@morsel-wallet/adapter/core';

const morsel = new MorselCookieWalletAdapter();

morsel.on('connect', (publicKey) => console.log('connected', publicKey.toBase58()));
morsel.on('relayStatusChange', (status) => console.log(status)); // 'waiting', 'scanned', 'connected'...

if (morsel.readyState === 'Installed') {
  // The Morsel extension, or the page is open inside Morsel's browser
  await morsel.connect();
} else {
  // Desktop without the extension: draw this as a QR and the Morsel app scans it.
  // On a phone, morsel.connect() opens your page inside Morsel instead.
  showQr(morsel.wcUri);
  morsel.on('wcUriChange', showQr); // a fresh code after it expires
}

// Then sign like any Solana wallet adapter
const signed = await morsel.signTransaction(transaction);

Properties

Methods

Relay status

relayStatus tracks the QR pairing with the Morsel phone app. The relay is end-to-end encrypted (NaCl box) between the page and the app; the relay server only forwards ciphertext. A QR lives for five minutes; restartRelaySession() mints a fresh one.

StandardWalletAdapter

Wraps any Wallet Standard wallet that supports a Solana chain, with the same interface as the Morsel adapter. WalletProvider does this for every installed wallet; use it directly when you build your own list.

import { getWallets } from '@wallet-standard/app';
import { StandardWalletAdapter } from '@morsel-wallet/adapter/core';

const adapters = getWallets().get().map((wallet) => new StandardWalletAdapter(wallet));

Errors

Every error is an instance of WalletAdapterError, so one instanceof check catches them all.

Constants and helpers