Construindo um dApp Mobile
Integração React Native e Expo com @solana/kit e MWA.
Receita
npx create-solana-dapp@latest my-mobile-dapp
cd my-mobile-dapp && npx expo start --dev-clientQuando usar isso:
- Lançar apps de consumidor Solana Android-first.
- Reutilizar lógica kit de projeto web em monorepo.
- Lançamentos no ecossistema Seeker.
Exemplo de Trabalho
import { useCallback, useState } from "react";
import { Button, Text, View } from "react-native";
import { createSolanaRpc, address } from "@solana/kit";
import { transact } from "@solana-mobile/mobile-wallet-adapter-protocol-web3js";
const rpc = createSolanaRpc("https://api.devnet.solana.com");
export function App() {
const [addr, setAddr] = useState<string | null>(null);
const connect = useCallback(async () => {
await transact(async (wallet) => {
const auth = await wallet.authorize({
cluster: "devnet",
identity: { name: "Demo", uri: "https://example.com", icon: "icon.png" },
});
setAddr(auth.accounts[0].address);
});
}, []);
return (
<View>
<Button title="Connect" onPress={connect} />
{addr && <Text>{addr}</Text>}
</View>
);
}O que isso demonstra:
- UI RN + RPC kit + authorize MWA em uma tela.
- Dev client obrigatório para módulo MWA nativo.
- Compartilhe tipos com app web via pacotes de monorepo.
Mergulho Profundo
Como Funciona
- Expo prebuild gera projeto Android com intent filters.
- kit roda no engine JS Hermes - use bigint consistentemente.
- Monorepo pode compartilhar clientes Codama entre web e mobile.
- Atualizações OTA via Expo não substituem upgrades de SDK de carteira nativo.
Armadilhas
- Expo Go sem dev client - módulo nativo MWA ausente. Correção: build de dev client customizado.
- Bloquear UI thread durante transact - ANR no Android. Correção: somente padrões async.
- Bundle enorme com todos os clientes de programa - startup lento. Correção: divida imports.
- Armazenamento seguro para tokens - use secure store da plataforma para auth tokens.
- Suposições iOS - verifique matriz de suporte de plataforma antes de marketing iOS.
Alternativas
| Alternativa | Use Quando | Não Use Quando |
|---|---|---|
| PWA mobile web | Zero instalação | UX nativa MWA |
| SDK SMS Flutter | Time Dart | Shop React |
FAQs
App Router?
Providers em client layout.tsx; páginas misturam componentes server + client.
Secrets?
Env server somente para keypairs; NEXT_PUBLIC_ para URLs RPC.
kit 7.0.0?
Todos os exemplos usam @solana/kit, não web3.js v1.
Carteira?
Assinatura somente em componentes client.
Cache?
Revalide leituras on-chain com cuidado - chain é fonte da verdade.
Actions?
Endpoints HTTPS retornando JSON Solana Actions.
Mobile?
App React Native separado com MWA.
Testes?
Surfpool para integração; mock RPC em testes unitários.
Mainnet?
Arquivos env separados e IDs de programa.
Erros?
Decodifique logs de simulação para mensagens voltadas ao usuário.
Relacionados
- Mobile Wallet Adapter - API connect
- Noções Básicas de Integração dApp - padrões web paralelos
- Noções Básicas do @solana/kit - núcleo kit
Versões da stack: Esta página foi escrita para Agave 4.1.1, Solana CLI 3.0.10, Anchor 0.32.1, anchor-lang 0.32.1, Rust 1.91.1, @solana/kit 7.0.0, Surfpool 0.12.0 e LiteSVM 0.6.x.