Modular TypeScript wallet adapters and components for Solana applications.
React, Material UI, and Ant Design components
* Package has not been published to NPM yet.
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 these dependencies:
yarn add @solana/wallet-adapter-wallets \
@solana/wallet-adapter-react \
@solana/wallet-adapter-react-ui \
@solana/wallet-adapter-base
@solana/web3.js \
reactimport 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>
Modal logo example
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>
);
};