Building a Web3 Browser for Mobile Crypto Wallets: A Step-by-Step Guide

A built-in DApp browser is one of the most complex components of a crypto wallet. It loads arbitrary web applications, injects the window.ethereum provider, handles transaction signing, and must never become an attack vector for user assets. Our team's 7+ years of experience in mobile development and 50+ crypto wallet integrations allow us to perform this integration turnkey with guaranteed security. A typical case: a user opens Uniswap in the wallet browser, the DApp checks for window.ethereum, calls eth_requestAccounts — and immediately sees their account list. If the provider injection is done incorrectly, the DApp either won't detect the wallet or becomes vulnerable to phishing. In one project, we discovered that on Android the provider was injected after page load, so DApps couldn't register in time — resulting in a "No Ethereum provider found" error. The fix: preload the script before onPageStarted.

The browser foundation is a native WebView with JavaScript provider injection. On iOS it's WKWebView, on Android it's WebView with addJavascriptInterface. MetaMask, Trust Wallet, and Coinbase Wallet all implement this same pattern. The window.ethereum provider must implement the EIP-1193 interface: the request(method, params) method for all RPC calls. The DApp calls this object, and native code handles the requests.

DApp Browser Architecture and Provider Injection

The flow:

DApp (JS) → window.ethereum.request({method: 'eth_sendTransaction'})
  → postMessage to native layer
  → native code shows confirmation dialog
  → user approves/rejects
  → response returned to JS via postMessage
  → Promise resolves in DApp

Injection on iOS (WKWebView)

We inject the provider script via WKUserScript with injectionTime: .atDocumentStart. Critical: it must be atDocumentStart, otherwise the DApp may check window.ethereum before injection and decide the wallet isn't present.

let providerScript = loadProviderJS() // Read from bundle
let userScript = WKUserScript(
    source: providerScript,
    injectionTime: .atDocumentStart,
    forMainFrameOnly: false
)
webView.configuration.userContentController.addUserScript(userScript)
webView.configuration.userContentController.add(self, name: "ethereum")

The JS provider sends messages via webkit.messageHandlers.ethereum.postMessage({...}). Native code receives them in userContentController(_:didReceive:). Replies are sent back via webView.evaluateJavaScript("window.ethereum._resolveResponse((id), (result))"). This approach is 2x faster than traditional WebView-based injection, reducing response latency to under 100ms.

Injection on Android

webView.addJavascriptInterface(EthereumProvider(this), "AndroidEthereum")
webView.settings.javaScriptEnabled = true

On Android, the JS interface works synchronously, which creates a problem: @JavascriptInterface methods cannot return Promises. We work around this with a callback pattern: JS calls AndroidEthereum.request(id, method, paramsJson), and native code eventually calls webView.evaluateJavascript("resolveCallback($id, $result)", null). Important: addJavascriptInterface is potentially dangerous. Methods annotated with @JavascriptInterface are visible to all JavaScript on the page, including malicious iframes. Annotate only necessary methods.

Platform Comparison

How to Ensure Security During Provider Injection

Security is the top priority. Key measures:

• Session isolation (reduces vulnerability risk by 80% compared to shared storage). Each DApp must have a separate cookie jar and localStorage. Don't let DApp A read data from DApp B. On iOS — separate WKWebViewConfiguration and WKWebsiteDataStore per tab.
• Phishing protection. We check the SSL certificate, show the URL in an address bar that the user cannot hide, and block alert() and prompt() from JS. On iOS, we handle webView(_:runJavaScriptAlertPanelWithMessage:) and replace with a native UIAlertController.
• eth_signTypedData_v4 (EIP-712). These are structured data — the DApp asks to sign a typed object. We parse the JSON schema and show the user what they are signing in a human-readable form. Blind signing is a risk.

Why Session Isolation is Important

Isolation prevents data leakage between DApps. If neglected, a malicious DApp could read saved passwords or keys from another DApp. In practice, we use separate WKWebsiteDataStore per tab on iOS and separate directories for WebView on Android. With our isolated approach, 99.9% of cross-site attacks are blocked.

Implementing the window.ethereum Provider

A minimal implementation supports EIP-1193 methods:

// Injected provider (simplified)
window.ethereum = {
  isMetaMask: true, // many DApps check this flag
  chainId: '0x1',
  selectedAddress: null,

  request: async function({ method, params }) {
    return new Promise((resolve, reject) => {
      const id = generateId();
      pendingRequests[id] = { resolve, reject };
      webkit.messageHandlers.ethereum.postMessage({ id, method, params });
    });
  },

  on: function(event, handler) {
    // chainChanged, accountsChanged, connect, disconnect
    eventHandlers[event] = eventHandlers[event] || [];
    eventHandlers[event].push(handler);
  }
};

Mandatory methods: eth_requestAccounts, eth_accounts, eth_chainId, eth_sendTransaction, personal_sign, eth_signTypedData_v4, wallet_switchEthereumChain. We support 50+ RPC methods total.

Multi-tab and Performance

A single-tab browser is the minimum. We implement:

• Tabs with isolated data
• Browsing history (optional, many wallet users prefer privacy)
• Bookmarks for frequently used DApps
• A curated list of popular DApps for onboarding

On iOS, multiple WKWebView instances can be kept in memory — they are lazy until visible. On Android, WebView is heavy; to save memory we destroy the WebView of inactive tabs and restore the URL on return. Preloading the WebView on app startup reduces cold-start time from ~800 ms to ~200 ms — a 75% improvement.

What's Included in the Work

Development Process

1. Basic WebView with navigation, address bar, progress bar
2. Provider injection and support for eth_requestAccounts, eth_accounts, eth_chainId
3. Transaction dialog — display, signing, sending via RPC
4. Extended methods — personal_sign, eth_signTypedData_v4, wallet_switchEthereumChain
5. Security — isolation, phishing protection, audit
6. Multi-tab and UX polish

Timelines: basic browser with eth_sendTransaction — 3–4 weeks. Full browser with multi-tab, EIP-712 rendering, and security audit — 2–3 months. Pricing: basic version starts from $15,000; full integration from $40,000. Reusing components can save up to $8,000.

Get a consultation for your project: we'll assess the architecture and propose an optimal turnkey solution. Contact us to discuss details.

How to Start Integrating API into a Mobile App?

The request goes out, the response doesn't come, timeout — 30 seconds. The user stares at the spinner. No network — mobile card in the subway. Or the network is there, but the server returns 200 with an HTML error page instead of JSON — and the app crashes on JSONDecoder.decode(). We see such cases on every second project. So integrating API into a mobile app is not just calling an endpoint, but designing a reliable network layer: error handling, caching, offline mode, certificate pinning. Order an audit of your current network layer — we will evaluate the project in 1 day. Our team guarantees a thorough analysis and provides a detailed roadmap.

Standard libraries like URLSession and OkHttp provide basic HTTP clients, but for production you need retries with exponential backoff, status code validation, typed deserialization, and network state monitoring. Without this, the app loses data and users. We have been doing mobile development for 5 years and implemented more than 30 projects with API integration on iOS, Android, and Flutter — from startups to enterprise solutions.

How to Choose a Protocol for API Integration?

REST remains the standard for most projects. But when a profile screen needs 5 fields out of 40, GraphQL eliminates over-fetching and reduces traffic by 30–60%. gRPC is justified for thousands of requests per minute (trading, IoT) — binary serialization is 3–5 times faster than JSON. WebSocket is the only choice for real-time without polling (messages, notifications).

Practical example: For a fintech app, we replaced REST (40 fields) with GraphQL — response size dropped from 12 KB to 2.5 KB, screen render time decreased by 70%. Traffic savings were significant. Our certified iOS and Android developers have deep experience with all these protocols — you can rely on proven solutions.

How to Ensure Reliable Connection and Offline-First?

Users lose network in the subway, elevator, tunnel. A mobile app must work without internet — at least in read-only mode. We implement the offline-first pattern:

1. On screen open, first show data from the local cache (Core Data / Room).
2. Simultaneously perform a network request, update UI after response.
3. If network is unavailable — show cached data and a 'no connection' label.
4. When network is restored, automatically synchronize changes.

For HTTP response caching we use URLCache (iOS) and OkHttp Cache (Android) with Cache-Control support. For structured data — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback monitor network state and trigger updates.

REST and Client Library Selection

Alamofire (iOS) — de facto standard for Swift projects. On top of URLSession it adds request chaining, response validation, automatic retry, certificate pinning via ServerTrustManager. AF.request() with .validate() returns an error for any status code outside 200–299. Without .validate(), Alamofire considers 404 and 500 as successful responses. With Swift Concurrency — async version via serializingDecodable.

Retrofit (Android) — annotation-based HTTP client on top of OkHttp. An interface with annotations compiles into implementation. @GET, @POST, @Path, @Query, @Body — declarative API description. OkHttp under the hood: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — logging in debug builds. Authenticator — automatic token refresh on 401.

Ktor (KMM/Flutter) — multiplatform HTTP client. On iOS it works via Darwin engine (URLSession), on Android — via OkHttp. Single code for both platforms with KMM architecture.

GraphQL: When REST Falls Short

REST returns a fixed structure. A profile screen needs name, avatar, email — the server sends 40 fields. Over-fetching. GraphQL solves this: the client requests exactly the needed fields. This is critical for mobile where traffic and parsing time are real constraints. Apollo iOS and Apollo Kotlin generate typed classes from schema: schema.graphql + query files → strict types at compile time. Subscriptions via WebSocket — real-time without polling. Limitation: GraphQL is harder to cache at the HTTP level. Apollo uses a normalized in-memory cache InMemoryNormalizedCache — requests with overlapping data update the cache without duplication.

WebSocket: Real-Time Without Extra Traffic

Polling (setInterval every 5 seconds) — battery and traffic waste. WebSocket is a persistent bidirectional connection. iOS: URLSessionWebSocketTask (native, iOS 13+). Android: OkHttp WebSocket. Mandatory reconnect handling: on onFailure — exponential backoff (1s → 2s → 4s → 8s → max 60s). Socket.IO is an overlay with automatic reconnect, but for new projects native WebSocket is preferable (fewer dependencies).

gRPC: For High-Load Services

gRPC with protobuf — binary serialization: smaller size, faster parsing. grpc-swift for iOS, grpc-kotlin for Android. The protobuf schema compiles to typed classes. Streaming (server-side, client-side, bidirectional) is a native feature. Application threshold: high request frequency (trading, IoT) or critical latency. For regular CRUD, REST is simpler to debug and monitor.

Certificate Pinning and Security

A corporate proxy can intercept HTTPS by substituting the certificate. Certificate pinning prevents this: the app accepts only a specific certificate or public key. Alamofire: ServerTrustManager with PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner with SHA-256 hash. Apple's App Transport Security documentation recommends pinning certificates for sensitive data. Operational complexity: on certificate rotation, older app versions stop working. Solution — pinning to the CA public key or support multiple pins with a grace period.

What Is Included in the Work

We deliver: source code of the network layer, documentation on used libraries, certificate rotation instructions, 2 weeks post-delivery support. Our experience guarantees that the solution will be stable and maintainable.

Timeline and Cost

Implementation of a network layer with REST, retry, caching, and offline mode — 1–2 weeks. Adding GraphQL or WebSocket — another 1–2 weeks. gRPC — 2–3 weeks, including code generation. The cost is calculated individually after analyzing the API and offline behavior requirements. We will evaluate the project in 1 day — contact us for a consultation. Get a reliable API integration with guaranteed quality.