Modular TypeScript wallet adapters and components for Solana applications.
- Demo
- TypeScript Docs
- FAQ (Frequently Asked Questions)
- Quick Setup (using React UI)
- Packages
- Build from Source
There are also material-ui and ant-design packages if you use those component frameworks.
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 \
reactimport 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>
);
};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 {
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 1 lamport to a random address!
</button>
);
};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.
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 |
These packages provide adapters for each wallet. You can use the wallets package, or add the individual wallet packages you want.
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 |
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 |
Several packages are maintained by the community to support additional frontend frameworks.
- 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 [email protected] --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