Merge pull request #66 from gre/dapp

add create-dapp and web3-subprovider

packages/create-dapp/README.md

@@ -0,0 +1,53 @@
+# Ledger DApp Ethereum starter kit
+
+Welcome to the DApp starter kit that helps you writing web app backed by Ethereum start contract and interacting with the Ledger device.
+
+**This bootstrap a `create-react-app` project with a simple Ethereum contract:**
+
+```
+yarn create dapp new-project-name
+```
+
+OR
+
+```
+npm i -g create-dapp
+create-dapp new-project-name
+```
+
+![](https://user-images.githubusercontent.com/211411/35970466-b4985312-0cca-11e8-9baf-33e60ec9ac70.gif)
+
+## Pre-requisite documentation to read
+
+* React: https://reactjs.org
+* Solidity: https://solidity.readthedocs.io
+* web3.js: https://github.com/ethereum/web3.js
+* truffle-contract: https://github.com/trufflesuite/truffle-contract
+
+## Pre-requisite tools to install
+
+```
+npm install -g truffle ganache-cli
+```
+
+## Develop
+
+Run a development Ethereum network:
+
+```
+ganache-cli --networkId 1337
+```
+
+Run the truffle tool, to generate and compile the contracts. **NB: the truffle project lives under src/dapp**
+
+```
+cd src/dapp
+truffle compile
+truffle deploy --network development
+```
+
+Run the web app:
+
+```
+npm start
+```

packages/create-dapp/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "create-dapp",
+  "version": "0.3.0",
+  "description": "Create React Ethereum apps, ready to use with Ledger and MetaMask",
+  "keywords": [
+    "dapp",
+    "ethereum",
+    "web3",
+    "truffle",
+    "ledger",
+    "react",
+    "ganache"
+  ],
+  "homepage": "https://github.com/ledgerhq/ledgerjs",
+  "bugs": "https://github.com/ledgerhq/ledgerjs/issues",
+  "license": "Apache-2.0",
+  "bin": "scripts/create-dapp"
+}

packages/create-dapp/scripts/create-dapp

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+set -e
+
+if [ -z "$1" ]; then
+  echo "Usage: create-dapp <appname>"
+  exit 1
+fi
+APP_NAME=$1
+
+mkdir $APP_NAME
+
+TMP_FOLDER=`mktemp -d 2>/dev/null || mktemp -d -t 'mytmpdir'`
+cd $TMP_FOLDER
+npm v create-dapp dist.tarball | xargs curl -s | tar -xz
+cd - 1> /dev/null
+cd $APP_NAME
+cp -R $TMP_FOLDER/package/template/. .
+echo "Project $APP_NAME has been successfully bootstrapped."

packages/create-dapp/template/.flowconfig

@@ -0,0 +1,11 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

packages/create-dapp/template/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+src/dapp/build/
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/create-dapp/template/README.md

@@ -0,0 +1,40 @@
+# Ledger DApp Ethereum starter kit
+
+Welcome to the DApp starter kit that helps you writing web app backed by Ethereum start contract and interacting with the Ledger device.
+
+This is a normal `create-react-app` project bootstrapped with a `truffle` project under `src/dapp`.
+
+## Pre-requisite documentation to read
+
+* React: https://reactjs.org
+* Solidity: https://solidity.readthedocs.io
+* web3.js: https://github.com/ethereum/web3.js
+* truffle-contract: https://github.com/trufflesuite/truffle-contract
+
+## Pre-requisite tools to install
+
+```
+npm install -g truffle ganache-cli
+```
+
+## Develop
+
+Run a development Ethereum network:
+
+```
+ganache-cli --networkId 1337
+```
+
+Run the truffle tool, to generate and compile the contracts. **NB: the truffle project lives under src/dapp**
+
+```
+cd src/dapp
+truffle compile
+truffle deploy --network development
+```
+
+Run the web app:
+
+```
+npm start
+```

packages/create-dapp/template/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "dapp",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts": "1.1.0",
+    "truffle-contract": "^3.0.3",
+    "@ledgerhq/web3-subprovider": "^2.0.0",
+    "web3": "^1.0.0-beta.29"
+  },
+  "scripts": {
+    "start": "HTTPS=true react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

packages/create-dapp/template/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React DApp</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

packages/create-dapp/template/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React DApp",
+  "name": "Create React DApp Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/create-dapp/template/src/App.css

@@ -0,0 +1,13 @@
+.App {
+}
+.App header {
+  padding: 60px;
+  text-align: center;
+  background-color: #282c34;
+  color: white;
+}
+.App .App-body {
+  padding: 20px;
+  width: 800px;
+  margin: 0 auto;
+}

packages/create-dapp/template/src/App.js

@@ -0,0 +1,46 @@
+// @flow
+import React, { Component } from "react";
+import type Web3 from "web3";
+import DApp from "./DApp";
+import Onboarding from "./Onboarding";
+import availableWallets from "./wallets";
+import "./App.css";
+
+export default class App extends Component<
+  {},
+  { web3: ?Web3, account: ?string }
+> {
+  state = {
+    web3: null,
+    account: null
+  };
+
+  onLogout = () => {
+    this.setState({ web3: null, account: null });
+  };
+
+  onOnboardingDone = (web3: Web3, account: string) => {
+    this.setState({ web3, account });
+  };
+
+  render() {
+    const { account, web3 } = this.state;
+    return (
+      <div className="App">
+        <header>
+          <h1>React DApp Sample</h1>
+        </header>
+        <div className="App-body">
+          {account && web3 ? (
+            <DApp account={account} web3={web3} onLogout={this.onLogout} />
+          ) : (
+            <Onboarding
+              wallets={availableWallets}
+              onDone={this.onOnboardingDone}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}

packages/create-dapp/template/src/DApp.css

@@ -0,0 +1,7 @@
+.DApp {
+  font-size: 1.6em;
+}
+.DApp .error {
+  margin: 20px 0;
+  color: #f66;
+}