/wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.

Primary LanguageTypeScriptApache License 2.0Apache-2.0

@solana/wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.

Wallets

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:

npm install --save \
    @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 SendSOLToRandomAddress: FC = () => {
    const { connection } = useConnection();
    const { publicKey, sendTransaction } = useWallet();

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

        // 890880 lamports as of 2022-09-01
        const lamports = await connection.getMinimumBalanceForRentExemption(0);

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

        const {
            context: { slot: minContextSlot },
            value: { blockhash, lastValidBlockHeight }
        } = await connection.getLatestBlockhashAndContext();

        const signature = await sendTransaction(transaction, connection, { minContextSlot });

        await connection.confirmTransaction({ blockhash, lastValidBlockHeight, signature });
    }, [publicKey, sendTransaction, connection]);

    return (
        <button onClick={onClick} disabled={!publicKey}>
            Send SOL 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
onto Adapter for ONTO @solana/wallet-adapter-onto
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
walletconnect Adapter for WalletConnect @solana/wallet-adapter-walletconnect
xdefi Adapter for XDEFI @solana/wallet-adapter-xdefi

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

  1. Prerequisites
  • Node 16+
  • PNPM

If you have Node 16+, you can activate PNPM with Corepack:

corepack enable
corepack prepare pnpm@`npm info pnpm --json | jq -r .version` --activate

Corepack requires a version to enable, so if you don't have jq installed, you can install it, or just manually get the current version of pnpm with npm info pnpm and use it like this:

corepack prepare pnpm@7.8.0 --activate
  1. Clone the project:
git clone https://github.com/solana-labs/wallet-adapter.git
  1. Install dependencies:
cd wallet-adapter
pnpm install
  1. Build all packages:
pnpm run build:ts

Please be patient! This may take a while the first time you do it. Subsequent builds will be incremental and are quite fast.

You can also use pnpm watch to run incremental builds when source files change, enabling hot module reloading.

  1. Run locally:
cd packages/starter/react-ui-starter
pnpm start
open http://localhost:1234