Connect kit

The Morsel connect kit, @morsel-wallet/adapter, is the quickest way to add Morsel to a React dApp. It finds the Morsel extension and Morsel's in-app browser, lists other Wallet Standard wallets, and lets desktop users approve on their phone by scanning a QR code.

The full guide, live demo and API reference are at connect.morselwallet.app. Install from its Quick start, which always has the current command.

How it reaches Morsel

• Chrome extension or Morsel's in-app browser: it uses the injected provider directly. See Provider API.
• Desktop without the extension: the modal shows a QR code. The user scans it with the Morsel app and approves on their phone. The connection is end-to-end encrypted, and the code is valid for 5 minutes.
• Phone without Morsel: connecting sends the user to Morsel with a deep link, and your dApp opens inside Morsel's browser.

A minimal setup

import {
  WalletProvider,
  WalletModalProvider,
  WalletModal,
  ConnectButton,
  MorselCookieWalletAdapter,
  StandardWalletAdapter,
} from '@morsel-wallet/adapter';
import { getWallets } from '@wallet-standard/app';

const morsel = new MorselCookieWalletAdapter();
const others = getWallets()
  .get()
  .filter((w) => !/morsel/i.test(w.name))
  .map((w) => new StandardWalletAdapter(w));

export default function App() {
  return (
    <WalletProvider adapters={[morsel, ...others]} autoConnect>
      <WalletModalProvider>
        <ConnectButton useModal showAddress />
        <WalletModal theme="system" />
      </WalletModalProvider>
    </WalletProvider>
  );
}

Then use the hooks anywhere inside the provider:

import { useWallet, useWalletBalance } from '@morsel-wallet/adapter';
import { Connection } from '@solana/web3.js';

const connection = new Connection('https://rpc.cookiescan.io');

export function Balance() {
  const { publicKey, connected } = useWallet();
  const { balance, loading } = useWalletBalance(connection);
  if (!connected) return null;
  return <p>{loading ? 'Loading…' : `${balance} COOK`}</p>;
}

The balance follows the network of the Connection you pass: COOK for a Cookie Chain RPC, SOL for a Solana RPC.

What's in the kit

For props, options and the newest components, see the API reference.

Source and issues

The kit is open source under the MIT license: github.com/Morsel-Labs/wallet-adapter. Report bugs on its issue tracker.