@solana/wallet-adapter
Modular TypeScript wallet adapters and components for Solana applications.
Quick Links
- Demo
- TypeScript Docs
- FAQ (Frequently Asked Questions)
- Quick Setup (using React UI)
- Packages
- Build from Source
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 \
reactSetup
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.
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
- 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` --activateCorepack 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- Clone the project:
git clone https://github.com/solana-labs/wallet-adapter.git- Install dependencies:
cd wallet-adapter
pnpm install- Build all packages:
pnpm run tscPlease 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.
- Run locally:
cd packages/starter/react-ui-starter
pnpm start
open http://localhost:1234