`@solana/wallet-adapter`

Modular TypeScript wallet adapters and components for Solana applications.

Quick Links

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-base \
         @solana/wallet-adapter-react \
         @solana/wallet-adapter-react-ui \
         @solana/wallet-adapter-wallets \
         @solana/web3.js \
         @solana-mobile/wallet-adapter-mobile \
         react

Setup

import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { FakeWalletAdapter } 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 = () => {
    // The network 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]);

    const wallets = useMemo(
        () => [
            /**
             * Select the wallets you wish to support, by instantiating wallet adapters here.
             *
             * Common adapters can be found in the npm package `@solana/wallet-adapter-wallets`.
             * That package supports tree shaking and lazy loading -- only the wallets you import
             * will be compiled into your application, and only the dependencies of wallets that
             * your users connect to will be loaded.
             */
            new FakeWalletAdapter(),
        ],
        []
    );

    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>
                    <WalletMultiButton />
                    <WalletDisconnectButton />
                    { /* Your app's components go here, nested within the context providers. */ }
                </WalletModalProvider>
            </WalletProvider>
        </ConnectionProvider>
    );
};

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'll need core packages, some wallets, and UI components for your chosen framework.

Core

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

package	description	npm
base	Adapter interfaces, error types, and common utilities	`@solana/wallet-adapter-base`
react	Contexts and hooks for React dApps	`@solana/wallet-adapter-react`

Wallets

These packages provide adapters for each wallet. You can use the wallets package, or add the individual wallet packages you want.

package	description	npm
wallets	Includes all the wallets (with tree shaking)	`@solana/wallet-adapter-wallets`
avana	Adapter for Avana	`@solana/wallet-adapter-avana`
backpack	Adapter for Backpack	`@solana/wallet-adapter-backpack`
bitkeep	Adapter for BitKeep	`@solana/wallet-adapter-bitkeep`
bitpie	Adapter for Bitpie	`@solana/wallet-adapter-bitpie`
blocto	Adapter for Blocto	`@solana/wallet-adapter-blocto`
brave	Adapter for Brave	`@solana/wallet-adapter-brave`
clover	Adapter for Clover	`@solana/wallet-adapter-clover`
coin98	Adapter for Coin98	`@solana/wallet-adapter-coin98`
coinbase	Adapter for Coinbase	`@solana/wallet-adapter-coinbase`
coinhub	Adapter for Coinhub	`@solana/wallet-adapter-coinhub`
exodus	Adapter for Exodus	`@solana/wallet-adapter-exodus`
glow	Adapter for Glow	`@solana/wallet-adapter-glow`
huobi	Adapter for HuobiWallet	`@solana/wallet-adapter-huobi`
hyperpay	Adapter for HyperPay	`@solana/wallet-adapter-hyperpay`
keystone	Adapter for keystone	`@solana/wallet-adapter-keystone`
krystal	Adapter for krystal	`@solana/wallet-adapter-krystal`
ledger	Adapter for Ledger	`@solana/wallet-adapter-ledger`
mathwallet	Adapter for MathWallet	`@solana/wallet-adapter-mathwallet`
neko	Adapter for Neko	`@solana/wallet-adapter-neko`
nightly	Adapter for Nightly	`@solana/wallet-adapter-nightly`
nufi	Adapter for NuFi	`@solana/wallet-adapter-nufi`
particle	Adapter for Particle	`@solana/wallet-adapter-particle`
phantom	Adapter for Phantom	`@solana/wallet-adapter-phantom`
safepal	Adapter for SafePal	`@solana/wallet-adapter-safepal`
saifu	Adapter for Saifu	`@solana/wallet-adapter-saifu`
salmon	Adapter for Salmon	`@solana/wallet-adapter-salmon`
sky	Adapter for Sky	`@solana/wallet-adapter-sky`
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`
spot	Adapter for Spot	`@solana/wallet-adapter-spot`
strike	Adapter for Strike	`@solana/wallet-adapter-strike`
tokenary	Adapter for Tokenary	`@solana/wallet-adapter-tokenary`
tokenpocket	Adapter for TokenPocket	`@solana/wallet-adapter-tokenpocket`
torus	Adapter for Torus	`@solana/wallet-adapter-torus`
trust	Adapter for Trust Wallet	`@solana/wallet-adapter-trust`

UI Components

These packages provide components for common UI frameworks.

package	description	npm
react-ui	Components for React (no UI framework, just CSS)	`@solana/wallet-adapter-react-ui`
material-ui	Components for Material UI with React	`@solana/wallet-adapter-material-ui`
ant-design	Components for Ant Design with React	`@solana/wallet-adapter-ant-design`
angular-material-ui	Components for Angular Material UI	`@heavy-duty/wallet-adapter-material`

Starter Projects

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

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

Community

Several packages are maintained by the community to support additional frontend frameworks.

Build from Source

Clone the project:

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

Install dependencies:

cd wallet-adapter
yarn install

Build all packages:

yarn build

Run locally:

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

robbestad/wallet-adapter

@solana/wallet-adapter