Skip to content

Latest commit

 

History

History
167 lines (134 loc) · 11.9 KB

README.md

File metadata and controls

167 lines (134 loc) · 11.9 KB
Raw

@solana/wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.

Wallets

React, Material UI, and Ant Design components

Quick Links

Packages

package description npm version
wallets All wallets with icons @solana/wallet-adapter-wallets 0.7.3
react React hooks and context for dApps @solana/wallet-adapter-react 0.8.3
base Adapter interface, errors, and utilities @solana/wallet-adapter-base 0.5.1
phantom Adapter for Phantom @solana/wallet-adapter-phantom 0.5.1
solflare Adapter for Solflare @solana/wallet-adapter-solflare 0.2.1
torus Adapter for Torus @solana/wallet-adapter-torus 0.6.1
ledger Adapter for Ledger @solana/wallet-adapter-ledger 0.5.1
sollet Adapter for Sollet @solana/wallet-adapter-sollet 0.5.1
solong Adapter for Solong @solana/wallet-adapter-solong 0.5.1
mathwallet Adapter for MathWallet @solana/wallet-adapter-mathwallet 0.5.1
coin98 Adapter for Coin98 @solana/wallet-adapter-coin98 0.1.1
bitpie Adapter for Bitpie @solana/wallet-adapter-bitpie 0.1.1
slope Adapter for Slope @solana/wallet-adapter-slope 0.1.0
walletconnect * Adapter for WalletConnect @solana/wallet-adapter-walletconnect 0.1.0
material-ui Components for Material UI @solana/wallet-adapter-material-ui 0.8.3
ant-design Components for Ant Design @solana/wallet-adapter-ant-design 0.3.3
react-ui * Custom React components @solana/wallet-adapter-react-ui 0.1.0
material-ui-starter Create React App project using Material UI @solana/wallet-adapter-material-ui-starter 0.5.3
react-ui-starter * Create React App project using custom React components @solana/wallet-adapter-react-ui-starter 0.1.0
example Demo of components @solana/wallet-adapter-example 0.8.3

* Package has not been published to NPM yet.

Quick Setup (using React UI)

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

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

Install

Install these dependencies:

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

Setup

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

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

    // Set to 'devnet' | 'testnet' | 'mainnet-beta' or provide a custom RPC endpoint
    const endpoint = useMemo(() => clusterApiUrl('devnet'), []);

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

logo example

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>
    );
};