### Install Dependencies Source: https://docs.solanamobile.com/get-started/react-native/mobile-wallet-adapter Install the necessary packages for the Mobile Wallet Adapter using yarn or npm. ```APIDOC ## Install dependencies * **`@solana-mobile/mobile-wallet-adapter-protocol`** * Base library that implements the MWA client. Include this, but only import `transact` from the wrapper library. * **`@solana-mobile/mobile-wallet-adapter-protocol-web3js`** * A convenience wrapper for the base library that enables with `web3.js` primitives like `Transaction`. ```shell yarn theme={null} yarn add \ @solana-mobile/mobile-wallet-adapter-protocol-web3js \ @solana-mobile/mobile-wallet-adapter-protocol \ ``` ```shell npm theme={null} npm install \ @solana-mobile/mobile-wallet-adapter-protocol-web3js \ @solana-mobile/mobile-wallet-adapter-protocol \ ``` ``` -------------------------------- ### Initialize and Install Solana Mobile Dapp Store CLI (Shell) Source: https://docs.solanamobile.com/dapp-store/publishing-cli/setup This sequence of commands initializes a new project directory for publishing, installs the Solana Mobile dapp-store CLI as a development dependency, and then initializes the CLI. ```shell mkdir publishing cd publishing pnpm init pnpm install --save-dev @solana-mobile/dapp-store-cli npx dapp-store init npx dapp-store --help ``` -------------------------------- ### Install Dependencies for React Native Web3JS Source: https://docs.solanamobile.com/get-started/react-native/installation Installs the necessary libraries for integrating the Mobile Wallet Adapter with React Native and Solana. This includes @wallet-ui/react-native-web3js, react-native-quick-crypto for polyfills, @solana/web3.js for blockchain interaction, and expo-dev-client for development builds. ```npm npm install @wallet-ui/react-native-web3js react-native-quick-crypto @solana/web3.js expo-dev-client ``` ```yarn yarn add @wallet-ui/react-native-web3js react-native-quick-crypto @solana/web3.js expo-dev-client ``` ```pnpm pnpm add @wallet-ui/react-native-web3js react-native-quick-crypto @solana/web3.js expo-dev-client ``` -------------------------------- ### Install Mobile Wallet Adapter Dependencies Source: https://docs.solanamobile.com/get-started/react-native/mobile-wallet-adapter Commands to install the required Mobile Wallet Adapter protocol packages using yarn or npm. These packages provide the necessary primitives for dApp-to-wallet communication. ```shell yarn add @solana-mobile/mobile-wallet-adapter-protocol-web3js @solana-mobile/mobile-wallet-adapter-protocol ``` ```shell npm install @solana-mobile/mobile-wallet-adapter-protocol-web3js @solana-mobile/mobile-wallet-adapter-protocol ``` -------------------------------- ### PWA Web Manifest Example Source: https://docs.solanamobile.com/dapp-store/build-and-sign-an-apk Provides a basic structure for a PWA web manifest file. This JSON file defines essential metadata for a Progressive Web App, including its name, icons, and start URL, which is a prerequisite for wrapping PWAs in a Trusted Web Activity for the dApp Store. ```json { "name": "APP_NAME", "short_name": "APP_NAME", "scope": "/", "start_url": "/", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { ``` -------------------------------- ### Install Solana Web3.js Dependencies (NPM) Source: https://docs.solanamobile.com/reference/typescript/web3js Installs the necessary Solana Web3.js and related packages using NPM. This includes the core web3 library, random value generation, URL polyfills, and buffer support for React Native. ```shell npm install \ @solana/web3.js \ react-native-get-random-values \ react-native-url-polyfill \ @craftzdog/react-native-buffer ``` -------------------------------- ### Install and Test Android APK Source: https://docs.solanamobile.com/dapp-store/build-and-sign-an-apk Installs the generated signed release APK onto a device or emulator for testing. This command is used to verify the app's functionality and Digital Asset Links configuration. ```bash bubblewrap install app-release-signed.apk ``` -------------------------------- ### Install Solana Mobile Wallet Standard Package Source: https://docs.solanamobile.com/get-started/web/installation Installs the Mobile Wallet Adapter package into your web application using npm. This is the first step to integrating Solana Pay functionality. ```shell npm install @solana-mobile/wallet-standard-mobile ``` -------------------------------- ### Prepare PNPM with Corepack (Shell) Source: https://docs.solanamobile.com/dapp-store/publishing-cli/setup This snippet demonstrates how to enable and prepare PNPM using Corepack, ensuring the correct version is activated. It includes a fallback for cases where jq is not installed. ```shell corepack enable corepack prepare pnpm@`npm info pnpm --json | jq -r .version` --activate ``` ```shell corepack prepare pnpm@7.13.4 --activate ``` -------------------------------- ### Install Bubblewrap CLI Source: https://docs.solanamobile.com/dapp-store/build-and-sign-an-apk Installs the Bubblewrap CLI globally using npm. This tool is used to convert PWAs into Android apps via Trusted Web Activities (TWA). ```bash npm i -g @bubblewrap/cli ``` -------------------------------- ### MobileWalletProvider Setup Source: https://docs.solanamobile.com/get-started/react-native/setup Wrap your app's root component with MobileWalletProvider to manage wallet connection state and provide access to the useMobileWallet hook. ```APIDOC ## MobileWalletProvider Setup ### Description 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. ### Method Component Setup ### Endpoint N/A (Component Integration) ### Parameters #### Props - **chain** (string) - Required - The Solana cluster to connect to (e.g. `'solana:devnet'`, `'solana:mainnet-beta'`). - **endpoint** (string) - Required - The RPC endpoint URL for the cluster. - **identity** (object) - Required - Your app's identity shown to the user during wallet authorization. ##### Identity object - **name** (string) - Required - Your app's display name. - **uri** (string) - Required - Your app's website URL. - **icon** (string) - Required - Path to your app icon, relative to `uri`. ### Request Example ```tsx 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 ( {/* Your app content */} ); } ``` ### Response N/A (Component Setup) ``` -------------------------------- ### Install expo-secure-store for Custom Cache Source: https://docs.solanamobile.com/recipes/mobile-wallet-adapter/caching-wallet-authorization Command to install the expo-secure-store package, which can be used to create an encrypted cache for authorization details. ```shell npx expo install expo-secure-store ``` -------------------------------- ### Sign In with Solana using Mobile Wallet Adapter Source: https://docs.solanamobile.com/get-started/web/ux-guidelines This example shows how to combine `connect` and `signMessage` into a single user action using the `signIn()` method, which is specifically supported by the Mobile Wallet Adapter. This approach avoids browser restrictions on programmatic navigation and ensures a secure sign-in flow on Android Web. ```typescript import { useWallet } from '@solana/wallet-adapter-react' import { useWalletModal } from '@solana/wallet-adapter-react-ui'; import { SolanaMobileWalletAdapterWalletName } from '@solana-mobile/wallet-standard-mobile' export default function SignInButton() { const { connected, signIn, wallet, wallets } = useWallet(); const { setVisible: showWalletSelectionModal } = useWalletModal(); const handleSignInButtonClick = () => { // MWA is only available if user is on Android Web environments (e.g Android Chrome). if (wallet?.adapter?.name === SolanaMobileWalletAdapterWalletName) { // If MWA is present, immediately sign in. const input: SolanaSignInInput = { domain: window.location.host, statement: "Sign in to My Web App", uri: window.location.origin, } const output = await signIn(input); } else { // Else, show modal as usual. showWalletSelectionModal(true) } } return ); }; ``` -------------------------------- ### Instantiate MobileWalletAdapter Client in Kotlin Source: https://docs.solanamobile.com/get-started/kotlin/setup Initializes the MobileWalletAdapter client with your dApp's identity metadata. This includes your dApp's URI, icon URI, and display name, which are shown to the user during wallet authorization. Ensure the URIs are correctly parsed. ```kotlin import android.net.Uri import com.solana.mobilewalletadapter.clientlib.* // Define dApp's identity metadata val solanaUri = Uri.parse("https://yourdapp.com") val iconUri = Uri.parse("favicon.ico") // resolves to https://yourdapp.com/favicon.ico val identityName = "Solana Kotlin dApp" // Construct the client val walletAdapter = MobileWalletAdapter(connectionIdentity = ConnectionIdentity( identityUri = solanaUri, iconUri = iconUri, identityName = identityName )) ``` -------------------------------- ### Submit dApp Update using CLI Source: https://docs.solanamobile.com/dapp-store/publishing_releases Command to submit an update for your dApp to the Solana dApp Publisher Portal. This command requires the path to your keypair and confirms compliance with store policies. ```bash npx dapp-store publish update -k --requestor-is-authorized --complies-with-solana-dapp-store-policies ``` -------------------------------- ### Sign and Send Solana Transactions Source: https://docs.solanamobile.com/get-started/react-native/quickstart Illustrates how to construct a transaction, request the wallet to sign it, and broadcast it to the network. It requires a connection object and the user's account address. ```typescript import { useMobileWallet } from '@wallet-ui/react-native-web3js'; import { PublicKey, SystemProgram, Transaction } from '@solana/web3.js'; function SendTransactionButton() { const { account, signAndSendTransaction, connection } = useMobileWallet(); const handleSendTransaction = async () => { if (!account) return; const { blockhash } = await connection.getLatestBlockhash(); const transaction = new Transaction({ recentBlockhash: blockhash, feePayer: new PublicKey(account.address), }).add( SystemProgram.transfer({ fromPubkey: new PublicKey(account.address), toPubkey: new PublicKey('11111111111111111111111111111111'), lamports: 1_000_000, }), ); const signature = await signAndSendTransaction(transaction); console.log('Transaction signature:', signature); }; return