Building Mobile DApps - Frequently Asked Questions (ETHBuenosAires 2018)

Building Mobile DApps Frequently Asked Questions Pete Kim - @petejkim
Head of Engineering, Toshi Coinbase

Wallet DApp Browser Messenger

How do I detect mobile?

JavaScript: CSS: Use Media Queries const { userAgent: ua }
= navigator const isIOS = ua.includes('iPhone') // “iPhone OS” const isAndroid = ua.includes('Android') @media (max-width: 767px) { ... }

Detecting DApp Browsers const { currentProvider: cp } = window.web3
const isToshi = !!cp.isToshi const isCipher = !!cp.isCipher const isMetaMask = !!cp.isMetaMask

Where is my web3 object?

window.web3 undefined

Start navigation/ HTTP request Initialize DOM Receive HTTP response Load
document Intercept req, look for injection point, inject <script> containing web3 and glue code Document ready (window.onload)

1. Service Worker Caching

create-react-app

// src/index.js import React from 'react' import ReactDOM from 'react-dom'
import './index.css' import App from './App' import registerServiceWorker from './registerServiceWorker' ReactDOM.render(<App />, document.getElementById('root')) registerServiceWorker()

2. Returning HTML in responses to non-GET requests

<form method=”post” action=”/login” > foo Login GET / POST /login
No web3 on Android! <!doctype html> <html lang=”en”> <head> <title>CryptoWeirdos</title>

<form method=”post” action=”/login” > foo Login GET / Make a
single page app that uses AJAX instead.

3. No injection point in HTML

Start navigation/ HTTP request Initialize DOM Receive HTTP response Load
document Intercept req, look for injection point, inject <script> containing web3 and glue code Document ready (window.onload)

Toshi Cipher Inserts before first <!--[if or <script Inserts after
first <head> or </title> Ensure injection point isn’t wrapped in comment tag! Injection Points

Wait for web3 to be injected instead of using it
immediately

function checkForWeb3 () { if (window.web3 && web3.currentProvider) { startDApp()
return } window.setTimeout(checkForWeb3, 100) } document.addEventListener('load', checkForWeb3, false) Do this for now, but DApp browsers in the future may dispatch an event on the document object like “web3load” after user approves web 3 injection.

My DApp works on desktop browsers, but not on mobile!

Opening popups or new tabs Hover / Mouse Over File
Downloads Horizontal Scrolling

Poll with setTimeout, not setInterval setInterval: App is blocked (e.g.
in the BG) (Enqueued) (Flushed) setTimeout: App is blocked (e.g. in the BG)

let timer function fn () { if (success) { window.clearInterval(timer)
} } timer = window.setInterval(fn, 4000) function fn () { if (success) { return } window.setTimeout(fn, 4000) } fn() Poll with setTimeout, not setInterval

My DApp works with MetaMask, but not on mobile!

For signing, use personal_sign Never use eth_sign and don’t use
eth_signTypedData (yet)

Never use eth_sign DANGEROUS! Can be used to trick people
into signing anything, including Ethereum transactions! Updated Ethereum JSON-RPC spec requires adding a prefix, but MetaMask is currently preserving old implementation to prevent breaking legacy DApps. In near future, MetaMask may remove support for eth_sign altogether. https://github.com/ethereum/wiki/wiki/JSON-RPC#eth_sign

Spec is still evolving and changing rapidly! MetaMask’s implements an
early version that isn’t compatible with newer implementations. Don’t use eth_signTypedData (yet)

Safe, and works consistently everywhere! window.web3.currentProvider.sendAsync({ jsonrpc: '2.0', id: 1,
method: 'personal_sign', params: [ '0x48656c6c6f20576f726c6421', // message '0x4c37E2533D4B1c9aAA5d1bc31dd7259A0852F0E4' // address ] }, (err, res) => { console.log(err, res) }) Use personal_sign

How do I debug my DApp?

Use Cipher on Android to debug today, Toshi is adding
support in the next version

1. Enable USB Debugging in Settings 2. Connect with USB
3. Open DApp in Cipher

4. Navigate to chrome://inspect/#devices on Chrome browser

Use Cipher to test your app on Testnets today, Toshi
is adding support for Testnets in the next version

We’re hiring! https://www.coinbase.com/careers iOS, Android, Web, Backend, Solidity and Design

One more thing...

Toshi for Chrome - New Web 3 Extension - Uses
Cipher Engine - Will be Fully Open Source

Thanks! Questions? Download Toshi today! Pete Kim - @petejkim

Building Mobile DApps - Frequently Asked Questi...

Building Mobile DApps - Frequently Asked Questions (ETHBuenosAires 2018)

More Decks by Peter Jihoon Kim

Other Decks in Programming

Featured

Transcript