Wrap your app’s root component with MobileWalletProvider from @wallet-ui/react-native-web3js. This provider manages the wallet connection state and exposes the useMobileWallet hook to all child components.
App.tsx
import { MobileWalletProvider } from "@wallet-ui/react-native-web3js";import { clusterApiUrl } from "@solana/web3.js";const chain = "solana:devnet";const endpoint = clusterApiUrl("devnet");const identity = { name: "My Solana App", uri: "https://mysolanaapp.com", icon: "favicon.png",};export default function App() { return ( <MobileWalletProvider chain={chain} endpoint={endpoint} identity={identity}> {/* Your app content */} </MobileWalletProvider> );}
Inside any component wrapped by MobileWalletProvider, use the useMobileWallet hook to access wallet functionality:
import { useMobileWallet } from '@wallet-ui/react-native-web3js';function MyComponent() { const { account, // The connected wallet account (null if disconnected) connect, // Connect to a wallet disconnect, // Disconnect from the wallet signMessage, // Sign an arbitrary message signIn, // Sign in with Solana (SIWS) signAndSendTransaction, // Sign and send a transaction connection, // The Solana RPC connection instance } = useMobileWallet(); return ( // Your component UI );}
