--- # System prepended metadata title: 'Beginner''s Guide: Build & Publish Your First Solana Mobile dApp' --- # Beginner's Guide: Build & Publish Your First Solana Mobile dApp A practical, end-to-end walkthrough that takes you from zero to a minimal working dApp published on the **Solana dApp Store**. No prior Solana Mobile experience required — just basic JavaScript/React (or Android) knowledge. --- ## 1. Overview: Solana Mobile Stack & dApp Store The **Solana Mobile Stack (SMS)** is a set of SDKs, protocols, and on-chain tools that make it easy for mobile apps to interact with the Solana blockchain. The pieces you care about as a beginner: | Component | What it does | |-----------|--------------| | **Mobile Wallet Adapter (MWA)** | A protocol letting your dApp talk to any installed Solana wallet (Phantom, Solflare, Seed Vault). Handles connection + signing. | | **Seed Vault** | Hardware-backed key custody on Seeker devices. Apps use it transparently through MWA. | | **Solana dApp Store** | Crypto-native alternative to Google Play. Accepts APKs, no 30% fee, supports wallet/on-chain integrations Google blocks. | | **Publishing NFTs** | Each publisher, app, and release is represented by an NFT on Solana. This creates a permanent, verifiable publishing chain. | ### How the dApp Store differs from Google Play - **APKs, not AABs.** You submit raw APK files. - **Separate signing key.** You cannot reuse your Google Play upload key. - **NFT-based publishing.** Publisher → App → Release are each minted on-chain. - **No 30% fee** on in-app purchases or transactions. - **Crypto-native**: token-gated content, on-chain economies, and wallet-first UX are welcomed. --- ## 2. Prerequisites Install these before starting: - **Node.js 18+** and **npm** / **yarn** - **Android Studio** (for the emulator + SDK tools) - **Java JDK 17** (`keytool` for APK signing) - **Expo CLI** (`npm i -g eas-cli`) - **A Solana wallet** on your phone or emulator — install **Phantom** or **Solflare** from the Play Store / APK - **Solana CLI** (`sh -c "$(curl -sSfL https://release.anza.xyz/stable/install)"`) — for creating the publisher keypair - **A small amount of SOL** (~0.2 SOL on mainnet) — required to mint publisher/app/release NFTs when publishing - An **Android device** (Android 10+) or an **emulator with Google Play services** Optional but useful: a **Seeker device** for Seed Vault testing (not required for development). --- ## 3. Project Setup — The Simplest Possible dApp The fastest path is the **official Expo template**, which preconfigures MWA and polyfills. ```bash yarn create expo-app --template @solana-mobile/solana-mobile-expo-template my-first-dapp cd my-first-dapp ``` ### Folder structure (what matters) ``` my-first-dapp/ ├── App.tsx # Entry point, polyfills + UI ├── index.js # Crypto polyfills (Expo SDK 49+) ├── app.json # Expo config: name, icon, bundle id ├── eas.json # EAS build profiles (dev, preview, production) ├── package.json └── assets/ # Icon + splash ``` ### Manual setup (if you prefer a plain Expo app) ```bash npx create-expo-app my-first-dapp cd my-first-dapp yarn add \ @solana/web3.js \ @solana-mobile/mobile-wallet-adapter-protocol-web3js \ @solana-mobile/mobile-wallet-adapter-protocol \ react-native-get-random-values \ buffer npx expo install expo-crypto ``` Create `index.js` in the project root: ```js import { getRandomValues as expoCryptoGetRandomValues } from "expo-crypto"; import { Buffer } from "buffer"; global.Buffer = Buffer; class Crypto { getRandomValues = expoCryptoGetRandomValues; } const webCrypto = typeof crypto !== "undefined" ? crypto : new Crypto(); if (typeof crypto === "undefined") { Object.defineProperty(window, "crypto", { configurable: true, enumerable: true, get: () => webCrypto, }); } import "expo-router/entry"; ``` Update `package.json`: ```json "main": "index.js" ``` --- ## 4. Integrate Wallet Connection (Mobile Wallet Adapter) ### How MWA works (mental model) 1. Your dApp calls `transact(async (wallet) => { ... })`. 2. The OS pops up the installed wallet app (Phantom/Solflare/Seed Vault). 3. The wallet authorizes your dApp, returning a public key + auth token. 4. Your dApp asks the wallet to sign/send transactions — the wallet handles the private key. Your app **never sees the user's private key**. All signing happens inside the wallet. ### Minimal working example — connect + sign a transfer Replace `App.tsx` with: ```tsx import React, { useState } from "react"; import { Button, Text, View, Alert } from "react-native"; import { transact, Web3MobileWallet, } from "@solana-mobile/mobile-wallet-adapter-protocol-web3js"; import { Connection, PublicKey, SystemProgram, Transaction, clusterApiUrl, } from "@solana/web3.js"; const APP_IDENTITY = { name: "My First dApp", uri: "https://myfirstdapp.example", }; export default function App() { const [pubkey, setPubkey] = useState(null); const connect = async () => { await transact(async (wallet: Web3MobileWallet) => { const auth = await wallet.authorize({ cluster: "solana:devnet", identity: APP_IDENTITY, }); setPubkey(new PublicKey(auth.accounts[0].publicKey)); }); }; const signAndSend = async () => { if (!pubkey) return; const connection = new Connection(clusterApiUrl("devnet")); const { blockhash } = await connection.getLatestBlockhash(); const tx = new Transaction({ feePayer: pubkey, recentBlockhash: blockhash }) .add(SystemProgram.transfer({ fromPubkey: pubkey, toPubkey: pubkey, // self-transfer for demo lamports: 1000, })); const sig = await transact(async (wallet: Web3MobileWallet) => { await wallet.authorize({ cluster: "solana:devnet", identity: APP_IDENTITY, }); const [signature] = await wallet.signAndSendTransactions({ transactions: [tx], }); return signature; }); Alert.alert("Sent!", sig); }; return ( Wallet: {pubkey?.toBase58() ?? "not connected"}