The wallet components provide a complete Solana wallet integration using the mobile wallet adapter protocol with beautiful UI components.
Provider components
SolanaProvider
Provides Solana connection context to all child components.
Child components that need access to the Solana connection.
Connection configuration options. Defaults to { commitment: "confirmed" }.
import { SolanaProvider } from "@/components/solana/solana-provider";
export default function App() {
return (
<SolanaProvider config={{ commitment: "confirmed" }}>
<YourApp />
</SolanaProvider>
);
}
The connection automatically uses the cluster endpoint from useCluster() context.
UI components
Gradient button that triggers wallet connection flow.
Button text. Defaults to “Connect”.
import { WalletUiButtonConnect } from "@/components/solana/wallet-ui-button-connect";
export function WalletScreen() {
return <WalletUiButtonConnect label="Connect Wallet" />;
}
Button text. Defaults to “Disconnect”.
import { WalletUiButtonDisconnect } from "@/components/solana/wallet-ui-button-disconnect";
export function WalletSettings() {
return <WalletUiButtonDisconnect label="Sign Out" />;
}
WalletUiDropdown
Dropdown menu displaying connected wallet address with copy, view in explorer, and disconnect actions.
import { WalletUiDropdown } from "@/components/solana/wallet-ui-dropdown";
export function Header() {
return (
<View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
<WalletUiDropdown />
</View>
);
}
Automatically displays WalletUiButtonConnect when no wallet is connected.
Callback when button is pressed.
import { BaseButton } from "@/components/solana/base-button";
export function CustomAction() {
return (
<BaseButton
label="Sign Message"
onPress={() => console.log("Signing...")}
/>
);
}
BaseButton features a purple gradient (#6366f1 → #8b5cf6 → #a855f7) with shadow effects and glow border.
Hooks
useWalletUi
Main hook for wallet interactions.
Currently connected wallet account with publicKey property.
Opens wallet selection and connection flow.
Signs out and deauthorizes current wallet.
Signs and sends a transaction. Signature: (transaction: Transaction, minContextSlot?: number) => Promise<string>
Triggers Sign In With Solana (SIWS) flow.
Signs an arbitrary message. Signature: (message: Uint8Array) => Promise<Uint8Array>
import { useWalletUi } from "@/components/solana/use-wallet-ui";
export function WalletInfo() {
const { account, connect, disconnect } = useWalletUi();
if (!account) {
return <Button onPress={connect}>Connect</Button>;
}
return (
<View>
<Text>{account.publicKey.toString()}</Text>
<Button onPress={disconnect}>Disconnect</Button>
</View>
);
}
useSolana
Accesses the Solana connection context.
Active Solana RPC connection instance.
import { useSolana } from "@/components/solana/solana-provider";
export function useBalance() {
const { connection } = useSolana();
const { account } = useWalletUi();
const getBalance = async () => {
if (!account) return;
const balance = await connection.getBalance(account.publicKey);
return balance / LAMPORTS_PER_SOL;
};
return { getBalance };
}
useConnection
Direct access to the Solana connection (convenience hook).
import { useConnection } from "@/components/solana/solana-provider";
export function AccountData() {
const connection = useConnection();
const fetchAccountInfo = async (address: PublicKey) => {
const info = await connection.getAccountInfo(address);
return info;
};
return { fetchAccountInfo };
}
useMobileWallet
Low-level mobile wallet adapter integration.
Initiates wallet connection flow.
Signs and sends transactions through mobile wallet.
Signs messages through mobile wallet.
Performs Sign In With Solana authentication.
import { useMobileWallet } from "@/components/solana/use-mobile-wallet";
export function CustomWalletButton() {
const { connect } = useMobileWallet();
return (
<Button onPress={() => connect()}>Connect Mobile Wallet</Button>
);
}
Most apps should use useWalletUi() instead, which wraps useMobileWallet() with auth context.
useAuthorization
Manages wallet authorization state.
Currently authorized wallet account.
import { useAuthorization } from "@/components/solana/use-authorization";
export function AccountStatus() {
const { selectedAccount } = useAuthorization();
return (
<Text>
{selectedAccount
? `Connected: ${selectedAccount.publicKey}`
: "Not connected"}
</Text>
);
}
useWalletUiTheme
Provides theme colors for wallet UI components.
Background color for wallet UI elements.
Border color for wallet UI elements.
Text color for wallet UI elements.
import { useWalletUiTheme } from "@/components/solana/use-wallet-ui-theme";
export function ThemedButton() {
const { backgroundColor, textColor } = useWalletUiTheme();
return (
<View style={{ backgroundColor }}>
<Text style={{ color: textColor }}>Themed Content</Text>
</View>
);
}
Type definitions
SolanaProviderProps
AuthorizedWallet
interface SolanaProviderProps {
children: ReactNode;
config?: ConnectionConfig;
}
interface ConnectionConfig {
commitment?: Commitment;
wsEndpoint?: string;
httpHeaders?: Record<string, string>;
fetch?: FetchFn;
}
interface AuthorizedWallet {
publicKey: PublicKey;
// Additional properties from mobile wallet adapter
}
Complete example
import { SolanaProvider } from "@/components/solana/solana-provider";
import { WalletUiDropdown } from "@/components/solana/wallet-ui-dropdown";
import { useWalletUi } from "@/components/solana/use-wallet-ui";
import { View, Text } from "react-native";
function WalletContent() {
const { account, signMessage } = useWalletUi();
const handleSign = async () => {
const message = new TextEncoder().encode("Hello!");
const signature = await signMessage(message);
console.log("Signed:", signature);
};
return (
<View>
<WalletUiDropdown />
{account && (
<View>
<Text>Connected: {account.publicKey.toString()}</Text>
<Button onPress={handleSign}>Sign Message</Button>
</View>
)}
</View>
);
}
export default function App() {
return (
<SolanaProvider>
<WalletContent />
</SolanaProvider>
);
}
Account components
Balance, token accounts, and transaction components
Cluster provider
Network and RPC endpoint management