/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:

yarn add @solana/wallet-adapter-base \
         @solana/wallet-adapter-react \
         @solana/wallet-adapter-react-ui \
         @solana/wallet-adapter-wallets \
         @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 {
    LedgerWalletAdapter,
    PhantomWalletAdapter,
    SlopeWalletAdapter,
    SolflareWalletAdapter,
    SolletExtensionWalletAdapter,
    SolletWalletAdapter,
    TorusWalletAdapter,
} 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]);

    // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking and lazy loading --
    // Only the wallets you configure here will be compiled into your application, and only the dependencies
    // of wallets that your users connect to will be loaded.
    const wallets = useMemo(
        () => [
            new PhantomWalletAdapter(),
            new SlopeWalletAdapter(),
            new SolflareWalletAdapter({ network }),
            new TorusWalletAdapter(),
            new LedgerWalletAdapter(),
            new SolletWalletAdapter({ network }),
            new SolletExtensionWalletAdapter({ network }),
        ],
        [network]
    );

    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
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
coinhub Adapter for Coinhub @solana/wallet-adapter-coinhub
glow Adapter for Glow @solana/wallet-adapter-glow
huobi Adapter for HuobiWallet @solana/wallet-adapter-huobi
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

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 @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

Community

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

Build from Source

  1. Clone the project:
git clone https://github.com/solana-labs/wallet-adapter.git
  1. Install dependencies:
cd wallet-adapter
yarn install
  1. Build all packages:
yarn build
  1. Run locally:
cd packages/starter/react-ui-starter
yarn start