Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Mobile DApps - Frequently Asked Questi...

Building Mobile DApps - Frequently Asked Questions (ETHBuenosAires 2018)

Peter Jihoon Kim

May 25, 2018
Tweet

More Decks by Peter Jihoon Kim

Other Decks in Programming

Transcript

  1. 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) { ... }
  2. Detecting DApp Browsers const { currentProvider: cp } = window.web3

    const isToshi = !!cp.isToshi const isCipher = !!cp.isCipher const isMetaMask = !!cp.isMetaMask
  3. 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)
  4. // 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()
  5. <form method=”post” action=”/login” > foo Login GET / POST /login

    No web3 on Android! <!doctype html> <html lang=”en”> <head> <title>CryptoWeirdos</title>
  6. 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)
  7. 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
  8. 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.
  9. 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)
  10. 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
  11. 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
  12. 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)
  13. 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
  14. Use Cipher to test your app on Testnets today, Toshi

    is adding support for Testnets in the next version
  15. Toshi for Chrome - New Web 3 Extension - Uses

    Cipher Engine - Will be Fully Open Source