Building Mobile DApps - Frequently Asked Questions (ETHBuenosAires 2018)

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Wallet DApp Browser Messenger

Slide 3

Slide 3 text

How do I detect mobile?

Slide 4

Slide 4 text

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) { ... }

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Where is my web3 object?

Slide 7

Slide 7 text

window.web3 undefined

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

1. Service Worker Caching

Slide 10

Slide 10 text

create-react-app

Slide 11

Slide 11 text

// 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(, document.getElementById('root')) registerServiceWorker()

Slide 12

Slide 12 text

2. Returning HTML in responses to non-GET requests

Slide 13

Slide 13 text

foo Login GET / POST /login No web3 on Android! CryptoWeirdos

Slide 14

Slide 14 text

foo Login GET / Make a single page app that uses AJAX instead.

Slide 15

Slide 15 text

3. No injection point in HTML

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Toshi Cipher Inserts before first

Slide 18

Slide 18 text

Wait for web3 to be injected instead of using it immediately

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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)

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

My DApp works with MetaMask, but not on mobile!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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)

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

How do I debug my DApp?

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

One more thing...

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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