@solana/wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.

Quick Links

• Demo
• TypeScript Docs
• FAQ (Frequently Asked Questions)
  • How can I get support?
  • Can I use this with ___?
  • What does this error mean?
  • How can I sign and verify messages?
• Quick Setup (using React UI)
  • Install
  • Setup
  • Usage
• Packages
  • Core
  • UI Components
  • Starter Projects
  • Wallets
• Build from Source

Quick Setup (using React UI)

There are also material-ui and ant-design packages if you use those component frameworks.

Install

Install these dependencies:

yarn add @solana/wallet-adapter-wallets \
         @solana/wallet-adapter-base \
         @solana/wallet-adapter-react \
         @solana/wallet-adapter-react-ui \
         @solana/web3.js \
         react

Setup

import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import {
    getLedgerWallet,
    getPhantomWallet,
    getSlopeWallet,
    getSolflareWallet,
    getSolletExtensionWallet,
    getSolletWallet,
    getTorusWallet,
} from '@solana/wallet-adapter-wallets';
import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
    // Can be set to 'devnet', 'testnet', or 'mainnet-beta'
    const network = WalletAdapterNetwork.Devnet;

    // You can also provide a custom RPC endpoint
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);

    // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking --
    // Only the wallets you configure here will be compiled into your application
    const wallets = useMemo(() => [
        getPhantomWallet(),
        getSlopeWallet(),
        getSolflareWallet(),
        getTorusWallet({
            options: { clientId: 'Get a client ID @ https://developer.tor.us' }
        }),
        getLedgerWallet(),
        getSolletWallet({ network }),
        getSolletExtensionWallet({ network }),
    ], [network]);

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

You can pass in these optional display props to WalletModalProvider:

prop	type	default	description
className	string	""	additional modal class name
logo	ReactNode	undefined	your logo url or image element
featuredWallets	number	3	initial number of wallets to display in the modal
container	string	"body"	CSS selector for the container element to append the modal to

For example, to show your logo:

<WalletModalProvider logo="YOUR_LOGO_URL">...</WalletModalProvider>

Modal logo example

Usage

import { WalletNotConnectedError } from '@solana/wallet-adapter-base';
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { Keypair, SystemProgram, Transaction } from '@solana/web3.js';
import React, { FC, useCallback } from 'react';

export const SendOneLamportToRandomAddress: FC = () => {
    const { connection } = useConnection();
    const { publicKey, sendTransaction } = useWallet();

    const onClick = useCallback(async () => {
        if (!publicKey) throw new WalletNotConnectedError();

        const transaction = new Transaction().add(
            SystemProgram.transfer({
                fromPubkey: publicKey,
                toPubkey: Keypair.generate().publicKey,
                lamports: 1,
            })
        );

        const signature = await sendTransaction(transaction, connection);

        await connection.confirmTransaction(signature, 'processed');
    }, [publicKey, sendTransaction, connection]);

    return (
        <button onClick={onClick} disabled={!publicKey}>
            Send 1 lamport to a random address!
        </button>
    );
};

Packages

This library is organized into small packages with few dependencies. To add it to your dApp, you only need the core packages and UI components for your chosen framework.

Core

These packages are what most projects can use to support wallets on Solana.

package	description	npm
wallets	All wallets with icons	@solana/wallet-adapter-wallets
base	Adapter interfaces, error types, and common utilities	@solana/wallet-adapter-base
react	Contexts and hooks for React dApps	@solana/wallet-adapter-react
angular *	Stores and configuration for Angular dApps	@solana/wallet-adapter-angular
vue	Stores and composables for Vue 3 dApps	@solana/wallet-adapter-vue

* Package has not been published to NPM yet.

UI Components

These packages provide components for common UI frameworks.

package	description	npm
material-ui	Components for Material UI	@solana/wallet-adapter-material-ui
ant-design	Components for Ant Design	@solana/wallet-adapter-ant-design
react-ui	Components for React (no UI framework, just CSS)	@solana/wallet-adapter-react-ui
vue-ui	Components for Vue (no UI framework, just CSS)	@solana/wallet-adapter-vue-ui

Starter Projects

These packages provide projects that you can use to start building a dApp with built-in wallet support. Alternatively, check out dapp-scaffold for a more complete framework.

package	description	npm
example	Demo of UI components	@solana/wallet-adapter-example
material-ui-starter	Create React App project using Material UI	@solana/wallet-adapter-material-ui-starter
react-ui-starter	Create React App project using React UI	@solana/wallet-adapter-react-ui-starter
nextjs-starter	Next.js project using React	@solana/wallet-adapter-nextjs-starter

Wallets

These packages provide adapters for each wallet. The core wallets package already includes them, so you don't need to add these as dependencies.

package	description	npm
bitkeep	Adapter for BitKeep	@solana/wallet-adapter-bitkeep
bitpie	Adapter for Bitpie	@solana/wallet-adapter-bitpie
blocto	Adapter for Blocto	@solana/wallet-adapter-blocto
clover	Adapter for Clover	@solana/wallet-adapter-clover
coin98	Adapter for Coin98	@solana/wallet-adapter-coin98
ledger	Adapter for Ledger	@solana/wallet-adapter-ledger
mathwallet	Adapter for MathWallet	@solana/wallet-adapter-mathwallet
phantom	Adapter for Phantom	@solana/wallet-adapter-phantom
safepal	Adapter for SafePal	@solana/wallet-adapter-safepal
slope	Adapter for Slope	@solana/wallet-adapter-slope
solflare	Adapter for Solflare	@solana/wallet-adapter-solflare
sollet	Adapter for Sollet	@solana/wallet-adapter-sollet
solong	Adapter for Solong	@solana/wallet-adapter-solong
tokenpocket	Adapter for TokenPocket	@solana/wallet-adapter-tokenpocket
torus	Adapter for Torus	@solana/wallet-adapter-torus
walletconnect *	Adapter for WalletConnect	@solana/wallet-adapter-walletconnect

* Package has not been published to NPM yet.

Build from Source

1. Clone the project:

git clone https://github.com/solana-labs/wallet-adapter.git

2. Install dependencies:

cd wallet-adapter
yarn install

3. Build all packages:

yarn build

4. Run locally:

cd packages/starter/react-ui-starter
yarn start