@solana/wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.

Quick Links

• Docs
• Example

Packages

package	description	npm	version
wallets	All wallets with icons	@solana/wallet-adapter-wallets	0.4.0
react	React hooks and context for dApps	@solana/wallet-adapter-react	0.4.0
base	Adapter interface, errors, and utilities	@solana/wallet-adapter-base	0.4.0
phantom	Adapter for Phantom	@solana/wallet-adapter-phantom	0.4.0
torus	Adapter for Torus	@solana/wallet-adapter-torus	0.4.0
ledger	Adapter for Ledger	@solana/wallet-adapter-ledger	0.4.0
solong	Adapter for Solong	@solana/wallet-adapter-solong	0.4.0
mathwallet	Adapter for MathWallet	@solana/wallet-adapter-mathwallet	0.4.0
sollet	Adapter for Sollet	@solana/wallet-adapter-sollet	0.4.0
walletconnect	Coming soon. Adapter for WalletConnect	@solana/wallet-adapter-walletconnect	0.0.0
material-ui	Components for Material UI	@solana/wallet-adapter-material-ui	0.4.0
material-ui-starter	Create React App project using Material UI	@solana/wallet-adapter-material-ui-starter	0.1.0
example	Demo of components	@solana/wallet-adapter-example	0.4.0

Quick Setup (using React with Material UI)

See the material-ui-starter package for a more complete example.

Install

Install these peer dependencies (or skip this if you have them already):

yarn add @material-ui/core \
         @material-ui/icons \
         @solana/web3.js \
         react

Install these dependencies:

yarn add @solana/wallet-adapter-wallets \
         @solana/wallet-adapter-react \
         @solana/wallet-adapter-material-ui \
         @solana/wallet-adapter-base

Code

import React, { FC, useMemo } from 'react';
import { WalletProvider } from '@solana/wallet-adapter-react';
import {
    getLedgerWallet,
    getMathWallet,
    getPhantomWallet,
    getSolletWallet,
    getSolongWallet,
    getTorusWallet,
} from '@solana/wallet-adapter-wallets';
import {
    WalletDialogProvider,
    WalletDisconnectButton,
    WalletMultiButton,
} from '@solana/wallet-adapter-material-ui';

export const Wallet: FC = () => {
    // @solana/wallet-adapter-wallets imports all the adapters but supports tree shaking --
    // Only the wallets you want to support will be compiled into your application
    const wallets = useMemo(() => [
        getPhantomWallet(),
        getTorusWallet({ clientId: 'Go to https://developer.tor.us and create a client ID' }),
        getLedgerWallet(),
        getSolongWallet(),
        getMathWallet(),
        getSolletWallet(),
    ], []);

    return (
        <WalletProvider wallets={wallets} autoConnect>
            <WalletDialogProvider>
                <WalletMultiButton/>
                <WalletDisconnectButton/>
            </WalletDialogProvider>
        </WalletProvider>
    );
};