From 0bdd2ede0a2a6735875f7e6178a2b6e5ba41705d Mon Sep 17 00:00:00 2001
From: haad <haad@headbanggames.com>
Date: Mon, 16 Jan 2017 17:28:08 +0100
Subject: [PATCH 01/10] docs(example): create an example of cat'ing files added
 from ipfs CLI using only webrtc-star as a transport

---
 .../cat-a-file/.gitignore                     |   2 +
 .../access-go-ipfs-files/cat-a-file/README.md |  90 ++++++
 .../cat-a-file/package.json                   |  14 +
 .../cat-a-file/public/index.html              | 281 ++++++++++++++++++
 .../cat-a-file/public/start-ipfs.js           |  47 +++
 .../cat-a-file/public/styles.css              |  72 +++++
 package.json                                  |   1 +
 src/core/index.js                             |   7 +
 8 files changed, 514 insertions(+)
 create mode 100644 examples/access-go-ipfs-files/cat-a-file/.gitignore
 create mode 100644 examples/access-go-ipfs-files/cat-a-file/README.md
 create mode 100644 examples/access-go-ipfs-files/cat-a-file/package.json
 create mode 100644 examples/access-go-ipfs-files/cat-a-file/public/index.html
 create mode 100644 examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js
 create mode 100644 examples/access-go-ipfs-files/cat-a-file/public/styles.css

diff --git a/examples/access-go-ipfs-files/cat-a-file/.gitignore b/examples/access-go-ipfs-files/cat-a-file/.gitignore
new file mode 100644
index 0000000000..f96c726227
--- /dev/null
+++ b/examples/access-go-ipfs-files/cat-a-file/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+public/ipfs.js
diff --git a/examples/access-go-ipfs-files/cat-a-file/README.md b/examples/access-go-ipfs-files/cat-a-file/README.md
new file mode 100644
index 0000000000..3d6b61134d
--- /dev/null
+++ b/examples/access-go-ipfs-files/cat-a-file/README.md
@@ -0,0 +1,90 @@
+# access-go-ipfs-files - cat-a-file
+
+**WIP**
+
+## TODO
+
+- Add "connect to peer" input field and "connect" button under the "Peers" section in index.html
+- Add `connectToPeer` function which calls `ipfs.swarm.connect(multiaddr)`. See https://github.com/ipfs/js-ipfs/blob/b0a7cd83cbf146b0f147467dedc686f94a5f751f/examples/ipfm/src/DataStore.js#L82 and https://github.com/ipfs/js-ipfs/blob/b0a7cd83cbf146b0f147467dedc686f94a5f751f/examples/ipfm/README.md#start-an-interplanetary-file-exchange-daemon. The multiaddr to connect to looks like this: `/ip4/127.0.0.1/tcp/9999/ws/ipfs/QmZGH8GeASSkSZoNLPEBu1MqtzLTERNUEwh9yTHLEF5kcW`
+- Hook up "connect" button's click event to `connectToPeer` function
+- Add instructions to this README on how to add a file in go-ipfs
+- Add instructions to this README on how to cat it in the UI
+- Make sure the "Start a go-ipfs daemon" instructions are correct
+- Make sure go-ipfs daemon and the example connect to each other
+
+## Step-by-step Instructions
+
+### Start a go-ipfs daemon
+
+1. Install go-ipfs from master (TODO: link). 
+
+2. Run `ipfs init`
+
+3. Edit your IPFS config file, located at `~/.ipfs/config`
+
+4. Add a Websocket listener address to `Addresses.Swarm`. It should look like this after editing:
+```
+"Addresses": {
+  "API": "/ip4/127.0.0.1/tcp/5001",
+  "Gateway": "/ip4/0.0.0.0/tcp/8080",
+  "Swarm": [
+    "/ip4/0.0.0.0/tcp/4001",
+    "/ip4/0.0.0.0/tcp/9999/ws"
+  ]
+},
+```
+
+5. Start the go-ipfs daemon with:
+```
+ipfs daemon
+```
+
+6. You should see the Websocket address in the output:
+```
+Initializing daemon...
+Swarm listening on /ip4/127.0.0.1/tcp/4001
+Swarm listening on /ip4/127.0.0.1/tcp/9999/ws
+Swarm listening on /ip4/192.168.10.38/tcp/4001
+Swarm listening on /ip4/192.168.10.38/tcp/9999/ws
+API server listening on /ip4/127.0.0.1/tcp/5001
+Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
+Daemon is ready
+```
+
+If you see address like `Swarm listening on /ip4/127.0.0.1/tcp/9999/ws`, it means all good!
+
+## Start the example
+
+**NOTE!** Before running the examples, you need to build `js-ipfs`. You can do this by following the instructions in https://github.com/ipfs/js-ipfs#clone-and-install-dependnecies and then building it as per https://github.com/ipfs/js-ipfs#build-a-dist-version.
+
+```
+npm install
+npm start
+```
+
+Open http://127.0.0.1:8080 in a browser.
+
+**TODO: add instructions how to cat a hash in the UI.**
+
+## Tutorial
+
+Steps
+1. create IPFS instance
+
+TODO. See `./start-ipfs.js`
+
+3. add a file in go-ipfs
+4. copy file's hash
+5. ipfs.files.cat
+
+TODO. add ipfs.files.cat code examples from index.html
+
+6. output the buffer to <img>
+
+```
+...
+stream.on('end', () => {
+  const blob = new Blob(buf)
+  picture.src = URL.createObjectURL(blob)
+})
+```
diff --git a/examples/access-go-ipfs-files/cat-a-file/package.json b/examples/access-go-ipfs-files/cat-a-file/package.json
new file mode 100644
index 0000000000..8b03ca9591
--- /dev/null
+++ b/examples/access-go-ipfs-files/cat-a-file/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "cat-a-file",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "postinstall": "cp ../../../dist/index.js ./public/ipfs.js",
+    "start": "http-server -c-1"
+  },
+  "author": "Haad",
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^0.9.0"
+  }
+}
diff --git a/examples/access-go-ipfs-files/cat-a-file/public/index.html b/examples/access-go-ipfs-files/cat-a-file/public/index.html
new file mode 100644
index 0000000000..fa3b9d2bb1
--- /dev/null
+++ b/examples/access-go-ipfs-files/cat-a-file/public/index.html
@@ -0,0 +1,281 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="styles.css">
+    <!-- Include IPFS -->
+    <script src="ipfs.js"></script>
+    <!-- Include a helper script that starts IPFS -->
+    <script type="text/javascript" src="start-ipfs.js" charset="utf-8"></script>
+  </head>
+
+  <body>
+    <div class="center">
+      <div id="ipfs" class="ipfs" ondragover="event.preventDefault()">
+        <h1 id="state" class="center"></h1>
+        <div>
+          <div id="buttons" class="buttons center">
+            <button id="start" type="button">Start</button>
+            <button id="stop" type="button">Stop</button>
+          </div>
+          <div id="directory">
+            <h2>IPFS Settings</h2>
+            <label for="dir">Data Directory</label>
+            <input id="dir" type="text" placeholder="IPFS data directory"/>
+            <br><br>
+            <label for="signalServerInput">Signal Server</label>
+            <input id="signalServerInput" type="text" value="188.166.203.82:20000"/>
+          </div>
+        </div>
+        <div id="details"></div>
+        <div id="peers"></div>
+        <div id="files">
+          <h2>Files</h2>
+          <div id="filesStatus"></div>
+          <br>
+          <label for="multihash">Mutihash</label>
+          <input id="multihash" type="text" placeholder="Multihash"/>
+          <button id="cat" type="button">Cat</button>
+          <img id="picture"/>
+        </div>
+        <pre id="errors"></pre>
+      </div>
+    </div>
+
+    <script type="text/javascript">
+      const rootElement = document.getElementById("ipfs")
+      const startButton = document.getElementById("start")
+      const stopButton = document.getElementById("stop")
+      const output = document.getElementById("state")
+      const details = document.getElementById("details")
+      const peers = document.getElementById("peers")
+      const errors = document.getElementById("errors")
+      const directory = document.getElementById("directory")
+      const dirInput = document.getElementById("dir")
+      const signalServerInput = document.getElementById("signalServerInput")
+      const files = document.getElementById("files")
+      const filesStatus = document.getElementById("filesStatus")
+      const picture = document.getElementById("picture")
+      const multihashInput = document.getElementById("multihash")
+      const catButton = document.getElementById("cat")
+
+      let ipfs, peerInfo, pollPeersTimer
+
+      const ipfsOptions = {
+        // Directory to which save IPFS data to
+        IpfsDataDir: dirInput.value,
+        // IPFS dev server: webrtc-star-signalling.cloud.ipfs.team
+        SignalServer: signalServerInput.value,
+        // Local webrtc-star server, you can get it from:
+        // https://github.com/libp2p/js-libp2p-webrtc-star
+        // SignalServer: '127.0.0.1:9090',
+      }
+
+      // Start IPFS instance
+      const start = () => {
+        if (!ipfs) {
+          // Update the UI with initial settings
+          updateView('starting', ipfs)
+
+          // Create an IPFS instance
+          // window.startIpfs() is exposed in ./start-ipfs.js
+          window.startIpfs(ipfsOptions, (err, node) => {
+            if (err) {
+              onError(err)
+              return
+            }
+
+            ipfs = node
+
+            // Get our IPFS instance's info: ID and address
+            ipfs.id().then((id) => {
+              peerInfo = id
+              // Update the UI
+              updateView('ready', ipfs)
+
+              // Poll for peers from IPFS and display them
+              pollPeersTimer = setInterval(updatePeers, 1000)
+              peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
+            })
+          })
+        }
+      }
+
+      // Stop IPFS instance
+      const stop = () => {
+        if (ipfs) {
+          if (pollPeersTimer) 
+            clearInterval(pollPeersTimer)
+          
+          ipfs.goOffline()
+          ipfs = null
+          updateView('stopped', ipfs)
+        }
+      }
+
+      // Fetch file contents from IPFS and display it
+      const catFile = () => {
+        // Get the hash to cat from the input field
+        const multihash = multihashInput.value
+
+        // Update UI
+        picture.innerHTML = multihash ? '<i>Loading...</i>' : ''
+        picture.className = multihash ? 'picture visible' : 'hidden'
+        errors.className = 'hidden'
+
+        // Get the file from IPFS
+        if (multihash) {
+          // IPFS.files.cat()
+          // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfscatmultihash-callback
+          ipfs.files.cat(multihash)
+            .then((stream) => {
+              // Buffer all contents of the file as text
+              // and once buffered, create a blob for the picture
+              let buf = []
+              stream.on('data', (d) => buf.push(d))
+              stream.on('end', () => {
+                const blob = new Blob(buf)
+                picture.src = URL.createObjectURL(blob)
+              })
+            })
+            .catch(onError)
+        }
+      }
+
+      // Display an error
+      const onError = (e) => {
+        console.error(e)
+        errors.innerHTML = '<br/><span class="error">' + e.stack + '</span>'
+        errors.className = 'error visible'
+      }
+
+      // Handle file drop
+      const onDrop = (event) => {
+        picture.innerHTML = ''
+        picture.className = 'hidden'
+        errors.className = 'hidden'
+
+        event.preventDefault()
+        var dt = event.dataTransfer
+        var files = dt.files
+
+        const readFileContents = (file) => {
+          return new Promise((resolve) => {
+            const reader = new FileReader()
+            reader.onload = (event) => resolve(event.target.result)
+            reader.readAsArrayBuffer(file)
+          })
+        }
+
+        // TODO: Promise reduce?
+        for (var i = 0; i < files.length; i++) {
+          const file = files[i]
+          console.log("Add file", file.name, file.size)
+          readFileContents(file)
+            .then((buffer) => {
+              // IPFS.files.add()
+              // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfsfilesadddata-options-callback
+              return ipfs.files.add([{
+                path: file.name,
+                content: new ipfs.types.Buffer(buffer)
+              }])
+            })
+            .then((files) => {
+              console.log("Files added", files)
+              multihashInput.value = files[0].hash
+              filesStatus.innerHTML = files
+                .map((e) => `Added ${e.path} as ${e.hash}`)
+                .join('<br>')
+            })
+            .catch(onError)
+        }
+      }
+
+      // Get peers from IPFS and display them
+      const updatePeers = () => {
+        ipfs.swarm.peers((err, res) => {
+          // PeerId.toJSON()
+          // https://github.com/libp2p/js-peer-id/blob/3ef704ba32a97a9da26a1f821702cdd3f09c778f/src/index.js#L106
+          // Multiaddr.toString()
+          // https://multiformats.github.io/js-multiaddr/#multiaddrtostring
+          const peersAsHtml = res
+            .map((e, idx) => {
+              return (idx + 1) + '.'
+                + e.peer.id.toJSON().id
+                + '<br>'
+                + e.addr.toString()
+                + '<br>'
+            })
+            .join('')
+
+          peers.innerHTML =  res.length > 0 
+            ? '<h2>Peers</h2>' + peersAsHtml
+            : '<h2>Peers</h2><i>Waiting for peers...</i>'
+        })
+      }
+
+      /* UI functions */
+      function initView() {
+        const initElement = (e, className) => {
+          e.innerHTML = ''
+          e.className = className
+        }
+
+        // Initial view
+        const elements = [errors, details, peers]
+        elements.map((e) => initElement(e, 'hidden'))
+        errors.innerHTML = ''
+        output.innerHTML = '🔌 IPFS stopped'
+        dirInput.value = '/ipfs/' + new Date().getTime()
+        directory.className = 'visible'
+        files.className = 'hidden'
+        filesStatus.innerHTML = ''
+        picture.innerHTML = ''
+        startButton.disabled = false
+        stopButton.disabled = true
+        multihashInput.value = null
+        picture.className = 'hidden'
+        // Remove old event listeners
+        rootElement.removeEventListener('drop', onDrop)
+        startButton.removeEventListener('click', start)
+        stopButton.removeEventListener('click', stop)
+        catButton.removeEventListener('click', catFile)
+        // Setup event listeners for interaction
+        rootElement.addEventListener('drop', onDrop)
+        startButton.addEventListener('click', start)
+        stopButton.addEventListener('click', stop)
+        catButton.addEventListener('click', catFile)
+      }
+
+      function updateView(state, ipfs) {
+        if (state === 'ready') {
+          // Set the header to display the current state
+          output.innerHTML = '🚀 IPFS started'
+          // Display IPFS info
+          details.innerHTML = '<div>'
+            + '<h2>IPFS Node</h2>'
+            + '<b>ID</b><br>'
+            + peerInfo.id + '<br><br>'
+            + '<b>Address</b><br>' 
+            + peerInfo.addresses[0] + '<br><br>'
+            + '<b>IPFS Data Directory</b><br>' 
+            + dirInput.value
+          // Set the file status
+          filesStatus.innerHTML = '<i>Drop a picture here to add it to IPFS.</i>'
+          details.className = 'visible'
+          peers.className = 'visible'
+          files.className = 'visible'
+          stopButton.disabled = false
+        } else if (state === 'starting') {
+          output.innerHTML = '📡 IPFS starting'
+          startButton.disabled = true
+          directory.className = 'hidden'
+        } else if (state === 'stopped') {
+          initView()
+        }
+      }
+
+      // Start the app
+      initView()
+    </script>
+  </body>
+</html>
diff --git a/examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js b/examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js
new file mode 100644
index 0000000000..284c53a208
--- /dev/null
+++ b/examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js
@@ -0,0 +1,47 @@
+'use strict'
+
+// Start an IPFS instance
+window.startIpfs = (options, callback) => {
+  const repoPath = options.IpfsDataDir || '/tmp/ipfs'
+
+  const node = new window.Ipfs(repoPath)
+
+  node.init({ emptyRepo: true, bits: 2048 }, (err) => {
+    if (err && err.message !== 'repo already exists') {
+      return callback(err)
+    }
+
+    node.config.get((err, config) => {
+      if (err) {
+        return callback(err)
+      }
+
+      const host = options.SignalServer.split(':')[0] || '127.0.0.1'
+      const port = options.SignalServer.split(':')[1] || 9090
+      const signalServer = `/libp2p-webrtc-star/ip4/${host}/tcp/${port}/ws/ipfs/${config.Identity.PeerID}`
+      
+      config.Addresses = {
+        Swarm: [
+          signalServer
+        ],
+        API: '',
+        Gateway: ''
+      }
+
+      config.Discovery.MDNS.Enabled = false
+
+      node.config.replace(config, (err) => {
+        if (err) { return callback(err) }
+
+        node.load((err) => {
+          if (err) { return callback(err) }
+          node.goOnline((err) => {
+            if (err) { return callback(err) }
+            console.log('IPFS node is ready')
+            callback(null, node)
+          })
+        })
+      })
+    })
+  })
+}
diff --git a/examples/access-go-ipfs-files/cat-a-file/public/styles.css b/examples/access-go-ipfs-files/cat-a-file/public/styles.css
new file mode 100644
index 0000000000..6dd63add24
--- /dev/null
+++ b/examples/access-go-ipfs-files/cat-a-file/public/styles.css
@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.0em;
+  font-weight: 400;
+}
+
+h1 {
+  font-size: 2em;
+  font-weight: 300;
+  margin: 0em;
+}
+
+h2 {
+  font-size: 1.25em;
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 1.0em;
+  font-weight: 700;
+}
+
+label {
+  margin-right: 1em;
+}
+
+input {
+  margin-right: 1em;  
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: inherit;
+  font-size: 0.8em;
+}
+
+.error {
+  font-style: italic;
+  color: red;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+.ipfs {
+  min-width: 22em;
+  max-width: 44em;
+  flex-grow: 1;
+  flex-basis: 22em;
+  border: 1px dashed grey;
+  padding: 1em;
+  overflow: auto;
+}
+
+.buttons {
+  margin-top: 1em;  
+}
+
+.picture {
+  margin-top: 1em;
+  width: 100%;
+  background-color: rgba(196, 196, 196, 0.1);
+  /*padding: 0.25em;*/
+  /*font-size: 1.2em;*/
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 1684020bbf..60a92ffbc8 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,7 @@
     "async": "^2.1.4",
     "bl": "^1.2.0",
     "boom": "^4.2.0",
+    "buffer": "^5.0.2",
     "debug": "^2.6.0",
     "fs-pull-blob-store": "^0.3.0",
     "glob": "^7.1.1",
diff --git a/src/core/index.js b/src/core/index.js
index fa4c2e8ae2..6d0df427fd 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -25,6 +25,8 @@ const files = require('./components/files')
 const bitswap = require('./components/bitswap')
 const pubsub = require('./components/pubsub')
 
+const Buffer = require('buffer/').Buffer
+
 exports = module.exports = IPFS
 
 function IPFS (repoInstance) {
@@ -70,4 +72,9 @@ function IPFS (repoInstance) {
   this.bitswap = bitswap(this)
   this.ping = ping(this)
   this.pubsub = pubsub(this)
+
+  // Exposed data types
+  this.types = {
+    Buffer: Buffer
+  }
 }

From cbf7cf07f905e94bdf7e8acc68f3859daea0a854 Mon Sep 17 00:00:00 2001
From: David Dias <daviddias.p@gmail.com>
Date: Wed, 25 Jan 2017 17:03:10 +0000
Subject: [PATCH 02/10] docs(example: transfer-files) - refactor: reorg + fix
 lint - fix: build step, no longer fail on postinstall - docs: add diagram -
 docs: add the instructions steps - lint: fix all the things - note about
 signalling server

---
 .gitignore                                    |   2 +
 examples/README.md                            |   2 +
 .../access-go-ipfs-files/cat-a-file/README.md |  90 ------
 .../cat-a-file/package.json                   |  14 -
 .../cat-a-file/public/index.html              | 281 ------------------
 .../cat-a-file/public/start-ipfs.js           |  47 ---
 .../cat-a-file => transfer-files}/.gitignore  |   0
 examples/transfer-files/README.md             | 142 +++++++++
 examples/transfer-files/complete/package.json |  14 +
 .../complete/public/css/app.css}              |   0
 .../complete/public/favicon.ico               | Bin 0 -> 8076 bytes
 .../transfer-files/complete/public/index.html |  57 ++++
 .../transfer-files/complete/public/js/app.js  | 239 +++++++++++++++
 .../complete/public/js/create-node.js         |  54 ++++
 examples/transfer-files/img/diagram.monopic   | Bin 0 -> 1571 bytes
 examples/transfer-files/img/diagram.txt       |  19 ++
 16 files changed, 529 insertions(+), 432 deletions(-)
 delete mode 100644 examples/access-go-ipfs-files/cat-a-file/README.md
 delete mode 100644 examples/access-go-ipfs-files/cat-a-file/package.json
 delete mode 100644 examples/access-go-ipfs-files/cat-a-file/public/index.html
 delete mode 100644 examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js
 rename examples/{access-go-ipfs-files/cat-a-file => transfer-files}/.gitignore (100%)
 create mode 100644 examples/transfer-files/README.md
 create mode 100644 examples/transfer-files/complete/package.json
 rename examples/{access-go-ipfs-files/cat-a-file/public/styles.css => transfer-files/complete/public/css/app.css} (100%)
 create mode 100644 examples/transfer-files/complete/public/favicon.ico
 create mode 100644 examples/transfer-files/complete/public/index.html
 create mode 100644 examples/transfer-files/complete/public/js/app.js
 create mode 100644 examples/transfer-files/complete/public/js/create-node.js
 create mode 100644 examples/transfer-files/img/diagram.monopic
 create mode 100644 examples/transfer-files/img/diagram.txt

diff --git a/.gitignore b/.gitignore
index 254988dc81..d9cb651ee0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,5 @@ node_modules
 
 lib
 dist
+
+examples/transfer-files/complete/public/js/ipfs.js
diff --git a/examples/README.md b/examples/README.md
index 78b7c23347..f9a954b30e 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -11,3 +11,5 @@ Let us know if you find any issue or if you want to contribute and add a new tut
 - [How to bundle js-ipfs with WebPack](/bundle-webpack)
 
 ## Tutorials
+
+- [Transfer files between a Browser node and Desktop node](/transfer-files)
diff --git a/examples/access-go-ipfs-files/cat-a-file/README.md b/examples/access-go-ipfs-files/cat-a-file/README.md
deleted file mode 100644
index 3d6b61134d..0000000000
--- a/examples/access-go-ipfs-files/cat-a-file/README.md
+++ /dev/null
@@ -1,90 +0,0 @@
-# access-go-ipfs-files - cat-a-file
-
-**WIP**
-
-## TODO
-
-- Add "connect to peer" input field and "connect" button under the "Peers" section in index.html
-- Add `connectToPeer` function which calls `ipfs.swarm.connect(multiaddr)`. See https://github.com/ipfs/js-ipfs/blob/b0a7cd83cbf146b0f147467dedc686f94a5f751f/examples/ipfm/src/DataStore.js#L82 and https://github.com/ipfs/js-ipfs/blob/b0a7cd83cbf146b0f147467dedc686f94a5f751f/examples/ipfm/README.md#start-an-interplanetary-file-exchange-daemon. The multiaddr to connect to looks like this: `/ip4/127.0.0.1/tcp/9999/ws/ipfs/QmZGH8GeASSkSZoNLPEBu1MqtzLTERNUEwh9yTHLEF5kcW`
-- Hook up "connect" button's click event to `connectToPeer` function
-- Add instructions to this README on how to add a file in go-ipfs
-- Add instructions to this README on how to cat it in the UI
-- Make sure the "Start a go-ipfs daemon" instructions are correct
-- Make sure go-ipfs daemon and the example connect to each other
-
-## Step-by-step Instructions
-
-### Start a go-ipfs daemon
-
-1. Install go-ipfs from master (TODO: link). 
-
-2. Run `ipfs init`
-
-3. Edit your IPFS config file, located at `~/.ipfs/config`
-
-4. Add a Websocket listener address to `Addresses.Swarm`. It should look like this after editing:
-```
-"Addresses": {
-  "API": "/ip4/127.0.0.1/tcp/5001",
-  "Gateway": "/ip4/0.0.0.0/tcp/8080",
-  "Swarm": [
-    "/ip4/0.0.0.0/tcp/4001",
-    "/ip4/0.0.0.0/tcp/9999/ws"
-  ]
-},
-```
-
-5. Start the go-ipfs daemon with:
-```
-ipfs daemon
-```
-
-6. You should see the Websocket address in the output:
-```
-Initializing daemon...
-Swarm listening on /ip4/127.0.0.1/tcp/4001
-Swarm listening on /ip4/127.0.0.1/tcp/9999/ws
-Swarm listening on /ip4/192.168.10.38/tcp/4001
-Swarm listening on /ip4/192.168.10.38/tcp/9999/ws
-API server listening on /ip4/127.0.0.1/tcp/5001
-Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
-Daemon is ready
-```
-
-If you see address like `Swarm listening on /ip4/127.0.0.1/tcp/9999/ws`, it means all good!
-
-## Start the example
-
-**NOTE!** Before running the examples, you need to build `js-ipfs`. You can do this by following the instructions in https://github.com/ipfs/js-ipfs#clone-and-install-dependnecies and then building it as per https://github.com/ipfs/js-ipfs#build-a-dist-version.
-
-```
-npm install
-npm start
-```
-
-Open http://127.0.0.1:8080 in a browser.
-
-**TODO: add instructions how to cat a hash in the UI.**
-
-## Tutorial
-
-Steps
-1. create IPFS instance
-
-TODO. See `./start-ipfs.js`
-
-3. add a file in go-ipfs
-4. copy file's hash
-5. ipfs.files.cat
-
-TODO. add ipfs.files.cat code examples from index.html
-
-6. output the buffer to <img>
-
-```
-...
-stream.on('end', () => {
-  const blob = new Blob(buf)
-  picture.src = URL.createObjectURL(blob)
-})
-```
diff --git a/examples/access-go-ipfs-files/cat-a-file/package.json b/examples/access-go-ipfs-files/cat-a-file/package.json
deleted file mode 100644
index 8b03ca9591..0000000000
--- a/examples/access-go-ipfs-files/cat-a-file/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "name": "cat-a-file",
-  "version": "1.0.0",
-  "description": "",
-  "scripts": {
-    "postinstall": "cp ../../../dist/index.js ./public/ipfs.js",
-    "start": "http-server -c-1"
-  },
-  "author": "Haad",
-  "license": "MIT",
-  "devDependencies": {
-    "http-server": "^0.9.0"
-  }
-}
diff --git a/examples/access-go-ipfs-files/cat-a-file/public/index.html b/examples/access-go-ipfs-files/cat-a-file/public/index.html
deleted file mode 100644
index fa3b9d2bb1..0000000000
--- a/examples/access-go-ipfs-files/cat-a-file/public/index.html
+++ /dev/null
@@ -1,281 +0,0 @@
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="styles.css">
-    <!-- Include IPFS -->
-    <script src="ipfs.js"></script>
-    <!-- Include a helper script that starts IPFS -->
-    <script type="text/javascript" src="start-ipfs.js" charset="utf-8"></script>
-  </head>
-
-  <body>
-    <div class="center">
-      <div id="ipfs" class="ipfs" ondragover="event.preventDefault()">
-        <h1 id="state" class="center"></h1>
-        <div>
-          <div id="buttons" class="buttons center">
-            <button id="start" type="button">Start</button>
-            <button id="stop" type="button">Stop</button>
-          </div>
-          <div id="directory">
-            <h2>IPFS Settings</h2>
-            <label for="dir">Data Directory</label>
-            <input id="dir" type="text" placeholder="IPFS data directory"/>
-            <br><br>
-            <label for="signalServerInput">Signal Server</label>
-            <input id="signalServerInput" type="text" value="188.166.203.82:20000"/>
-          </div>
-        </div>
-        <div id="details"></div>
-        <div id="peers"></div>
-        <div id="files">
-          <h2>Files</h2>
-          <div id="filesStatus"></div>
-          <br>
-          <label for="multihash">Mutihash</label>
-          <input id="multihash" type="text" placeholder="Multihash"/>
-          <button id="cat" type="button">Cat</button>
-          <img id="picture"/>
-        </div>
-        <pre id="errors"></pre>
-      </div>
-    </div>
-
-    <script type="text/javascript">
-      const rootElement = document.getElementById("ipfs")
-      const startButton = document.getElementById("start")
-      const stopButton = document.getElementById("stop")
-      const output = document.getElementById("state")
-      const details = document.getElementById("details")
-      const peers = document.getElementById("peers")
-      const errors = document.getElementById("errors")
-      const directory = document.getElementById("directory")
-      const dirInput = document.getElementById("dir")
-      const signalServerInput = document.getElementById("signalServerInput")
-      const files = document.getElementById("files")
-      const filesStatus = document.getElementById("filesStatus")
-      const picture = document.getElementById("picture")
-      const multihashInput = document.getElementById("multihash")
-      const catButton = document.getElementById("cat")
-
-      let ipfs, peerInfo, pollPeersTimer
-
-      const ipfsOptions = {
-        // Directory to which save IPFS data to
-        IpfsDataDir: dirInput.value,
-        // IPFS dev server: webrtc-star-signalling.cloud.ipfs.team
-        SignalServer: signalServerInput.value,
-        // Local webrtc-star server, you can get it from:
-        // https://github.com/libp2p/js-libp2p-webrtc-star
-        // SignalServer: '127.0.0.1:9090',
-      }
-
-      // Start IPFS instance
-      const start = () => {
-        if (!ipfs) {
-          // Update the UI with initial settings
-          updateView('starting', ipfs)
-
-          // Create an IPFS instance
-          // window.startIpfs() is exposed in ./start-ipfs.js
-          window.startIpfs(ipfsOptions, (err, node) => {
-            if (err) {
-              onError(err)
-              return
-            }
-
-            ipfs = node
-
-            // Get our IPFS instance's info: ID and address
-            ipfs.id().then((id) => {
-              peerInfo = id
-              // Update the UI
-              updateView('ready', ipfs)
-
-              // Poll for peers from IPFS and display them
-              pollPeersTimer = setInterval(updatePeers, 1000)
-              peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
-            })
-          })
-        }
-      }
-
-      // Stop IPFS instance
-      const stop = () => {
-        if (ipfs) {
-          if (pollPeersTimer) 
-            clearInterval(pollPeersTimer)
-          
-          ipfs.goOffline()
-          ipfs = null
-          updateView('stopped', ipfs)
-        }
-      }
-
-      // Fetch file contents from IPFS and display it
-      const catFile = () => {
-        // Get the hash to cat from the input field
-        const multihash = multihashInput.value
-
-        // Update UI
-        picture.innerHTML = multihash ? '<i>Loading...</i>' : ''
-        picture.className = multihash ? 'picture visible' : 'hidden'
-        errors.className = 'hidden'
-
-        // Get the file from IPFS
-        if (multihash) {
-          // IPFS.files.cat()
-          // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfscatmultihash-callback
-          ipfs.files.cat(multihash)
-            .then((stream) => {
-              // Buffer all contents of the file as text
-              // and once buffered, create a blob for the picture
-              let buf = []
-              stream.on('data', (d) => buf.push(d))
-              stream.on('end', () => {
-                const blob = new Blob(buf)
-                picture.src = URL.createObjectURL(blob)
-              })
-            })
-            .catch(onError)
-        }
-      }
-
-      // Display an error
-      const onError = (e) => {
-        console.error(e)
-        errors.innerHTML = '<br/><span class="error">' + e.stack + '</span>'
-        errors.className = 'error visible'
-      }
-
-      // Handle file drop
-      const onDrop = (event) => {
-        picture.innerHTML = ''
-        picture.className = 'hidden'
-        errors.className = 'hidden'
-
-        event.preventDefault()
-        var dt = event.dataTransfer
-        var files = dt.files
-
-        const readFileContents = (file) => {
-          return new Promise((resolve) => {
-            const reader = new FileReader()
-            reader.onload = (event) => resolve(event.target.result)
-            reader.readAsArrayBuffer(file)
-          })
-        }
-
-        // TODO: Promise reduce?
-        for (var i = 0; i < files.length; i++) {
-          const file = files[i]
-          console.log("Add file", file.name, file.size)
-          readFileContents(file)
-            .then((buffer) => {
-              // IPFS.files.add()
-              // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfsfilesadddata-options-callback
-              return ipfs.files.add([{
-                path: file.name,
-                content: new ipfs.types.Buffer(buffer)
-              }])
-            })
-            .then((files) => {
-              console.log("Files added", files)
-              multihashInput.value = files[0].hash
-              filesStatus.innerHTML = files
-                .map((e) => `Added ${e.path} as ${e.hash}`)
-                .join('<br>')
-            })
-            .catch(onError)
-        }
-      }
-
-      // Get peers from IPFS and display them
-      const updatePeers = () => {
-        ipfs.swarm.peers((err, res) => {
-          // PeerId.toJSON()
-          // https://github.com/libp2p/js-peer-id/blob/3ef704ba32a97a9da26a1f821702cdd3f09c778f/src/index.js#L106
-          // Multiaddr.toString()
-          // https://multiformats.github.io/js-multiaddr/#multiaddrtostring
-          const peersAsHtml = res
-            .map((e, idx) => {
-              return (idx + 1) + '.'
-                + e.peer.id.toJSON().id
-                + '<br>'
-                + e.addr.toString()
-                + '<br>'
-            })
-            .join('')
-
-          peers.innerHTML =  res.length > 0 
-            ? '<h2>Peers</h2>' + peersAsHtml
-            : '<h2>Peers</h2><i>Waiting for peers...</i>'
-        })
-      }
-
-      /* UI functions */
-      function initView() {
-        const initElement = (e, className) => {
-          e.innerHTML = ''
-          e.className = className
-        }
-
-        // Initial view
-        const elements = [errors, details, peers]
-        elements.map((e) => initElement(e, 'hidden'))
-        errors.innerHTML = ''
-        output.innerHTML = '🔌 IPFS stopped'
-        dirInput.value = '/ipfs/' + new Date().getTime()
-        directory.className = 'visible'
-        files.className = 'hidden'
-        filesStatus.innerHTML = ''
-        picture.innerHTML = ''
-        startButton.disabled = false
-        stopButton.disabled = true
-        multihashInput.value = null
-        picture.className = 'hidden'
-        // Remove old event listeners
-        rootElement.removeEventListener('drop', onDrop)
-        startButton.removeEventListener('click', start)
-        stopButton.removeEventListener('click', stop)
-        catButton.removeEventListener('click', catFile)
-        // Setup event listeners for interaction
-        rootElement.addEventListener('drop', onDrop)
-        startButton.addEventListener('click', start)
-        stopButton.addEventListener('click', stop)
-        catButton.addEventListener('click', catFile)
-      }
-
-      function updateView(state, ipfs) {
-        if (state === 'ready') {
-          // Set the header to display the current state
-          output.innerHTML = '🚀 IPFS started'
-          // Display IPFS info
-          details.innerHTML = '<div>'
-            + '<h2>IPFS Node</h2>'
-            + '<b>ID</b><br>'
-            + peerInfo.id + '<br><br>'
-            + '<b>Address</b><br>' 
-            + peerInfo.addresses[0] + '<br><br>'
-            + '<b>IPFS Data Directory</b><br>' 
-            + dirInput.value
-          // Set the file status
-          filesStatus.innerHTML = '<i>Drop a picture here to add it to IPFS.</i>'
-          details.className = 'visible'
-          peers.className = 'visible'
-          files.className = 'visible'
-          stopButton.disabled = false
-        } else if (state === 'starting') {
-          output.innerHTML = '📡 IPFS starting'
-          startButton.disabled = true
-          directory.className = 'hidden'
-        } else if (state === 'stopped') {
-          initView()
-        }
-      }
-
-      // Start the app
-      initView()
-    </script>
-  </body>
-</html>
diff --git a/examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js b/examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js
deleted file mode 100644
index 284c53a208..0000000000
--- a/examples/access-go-ipfs-files/cat-a-file/public/start-ipfs.js
+++ /dev/null
@@ -1,47 +0,0 @@
-'use strict'
-
-// Start an IPFS instance
-window.startIpfs = (options, callback) => {
-  const repoPath = options.IpfsDataDir || '/tmp/ipfs'
-
-  const node = new window.Ipfs(repoPath)
-
-  node.init({ emptyRepo: true, bits: 2048 }, (err) => {
-    if (err && err.message !== 'repo already exists') {
-      return callback(err)
-    }
-
-    node.config.get((err, config) => {
-      if (err) {
-        return callback(err)
-      }
-
-      const host = options.SignalServer.split(':')[0] || '127.0.0.1'
-      const port = options.SignalServer.split(':')[1] || 9090
-      const signalServer = `/libp2p-webrtc-star/ip4/${host}/tcp/${port}/ws/ipfs/${config.Identity.PeerID}`
-      
-      config.Addresses = {
-        Swarm: [
-          signalServer
-        ],
-        API: '',
-        Gateway: ''
-      }
-
-      config.Discovery.MDNS.Enabled = false
-
-      node.config.replace(config, (err) => {
-        if (err) { return callback(err) }
-
-        node.load((err) => {
-          if (err) { return callback(err) }
-          node.goOnline((err) => {
-            if (err) { return callback(err) }
-            console.log('IPFS node is ready')
-            callback(null, node)
-          })
-        })
-      })
-    })
-  })
-}
diff --git a/examples/access-go-ipfs-files/cat-a-file/.gitignore b/examples/transfer-files/.gitignore
similarity index 100%
rename from examples/access-go-ipfs-files/cat-a-file/.gitignore
rename to examples/transfer-files/.gitignore
diff --git a/examples/transfer-files/README.md b/examples/transfer-files/README.md
new file mode 100644
index 0000000000..80c60715c4
--- /dev/null
+++ b/examples/transfer-files/README.md
@@ -0,0 +1,142 @@
+# Tutorial - Transfer files between the browser and other IPFS nodes
+
+> Welcome! This tutorial will help you a tiny web application where you can fetch and add files to IPFS and transfer these between a go-ipfs node and a js-ipfs node.
+
+There are a couple of caveats:
+
+- js-ipfs currently doesn't support DHT peer discovery, the peer from which you are fetching data should be within the reach (local or in public IP) of the browser node.
+- We need to use a signalling server to establish the WebRTC connections, this won't be necessary as soon as libp2p-relay gets developed
+- [full go-ipfs interop is not complete yet, blocked by an interop stream multiplexer](https://github.com/ipfs/js-ipfs/issues/721)
+
+That being said, we will explain throughout this tutorial to circunvent the caveats and once they are fixed, we will update the tutorial as well.
+
+## Application diagram
+
+The goal of this tutorial is to create a WebApplication with an IPFS node that dials to other instances of it using WebRTC, and at the same time dial and transfer files from a Desktop IPFS node using WebSockets as the transport.
+
+┌──────────────┐                   ┌──────────────┐
+│   Browser    │                   │   Browser    │
+│              │      WebRTC       │              │
+│              │◀─────────────────▶│              │
+│              │                   │              │
+└──────────────┘                   └──────────────┘
+        ▲                                  ▲
+        │                                  │
+        │                                  │
+        │                                  │
+        │WebSockets              WebSockets│
+        │                                  │
+        │                                  │
+        │        ┌──────────────┐          │
+        │        │   Desktop    │          │
+        │        │              │          │
+        └───────▶│              │◀─────────┘
+                 │              │
+                 └──────────────┘
+
+## Check out the final state
+
+If you just want to check out what is the final state of how this application will look like, go to the complete folder, install the dependencies and run it.
+
+```sh
+> cd complete
+> npm install
+> npm start
+# open your browser (Chrome or Firefox) in http://localhost:12345
+```
+
+You should get something like this:
+
+TODO: Insert final screenshot here
+
+## Step-by-step instructions
+
+**Instructions:**
+
+- 1. Set up, install a go-ipfs and/or js-ipfs in your machine
+- 2. Make your daemons listen on WebSockets
+- 3. Start the WebApp project
+- 4. Create the frame for your IPFS enabled app
+- 5. Add and cat a file
+- 6. Use WebRTC to dial between browser nodes
+- 7. Dial to a node using WebSockets (your Desktop ones)
+- 8. Transfer files between all of your nodes, have fun!
+
+
+-------------------------
+> Steps need to be updated once the final thing is finished
+
+### Start a go-ipfs daemon
+
+1. Install go-ipfs from master (TODO: link). 
+
+2. Run `ipfs init`
+
+3. Edit your IPFS config file, located at `~/.ipfs/config`
+
+4. Add a Websocket listener address to `Addresses.Swarm`. It should look like this after editing:
+```
+"Addresses": {
+  "API": "/ip4/127.0.0.1/tcp/5001",
+  "Gateway": "/ip4/0.0.0.0/tcp/8080",
+  "Swarm": [
+    "/ip4/0.0.0.0/tcp/4001",
+    "/ip4/0.0.0.0/tcp/9999/ws"
+  ]
+},
+```
+
+5. Start the go-ipfs daemon with:
+```
+ipfs daemon
+```
+
+6. You should see the Websocket address in the output:
+```
+Initializing daemon...
+Swarm listening on /ip4/127.0.0.1/tcp/4001
+Swarm listening on /ip4/127.0.0.1/tcp/9999/ws
+Swarm listening on /ip4/192.168.10.38/tcp/4001
+Swarm listening on /ip4/192.168.10.38/tcp/9999/ws
+API server listening on /ip4/127.0.0.1/tcp/5001
+Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
+Daemon is ready
+```
+
+If you see address like `Swarm listening on /ip4/127.0.0.1/tcp/9999/ws`, it means all good!
+
+## Start the example
+
+**NOTE!** Before running the examples, you need to build `js-ipfs`. You can do this by following the instructions in https://github.com/ipfs/js-ipfs#clone-and-install-dependnecies and then building it as per https://github.com/ipfs/js-ipfs#build-a-dist-version.
+
+```
+npm install
+npm start
+```
+
+Open http://127.0.0.1:8080 in a browser.
+
+**TODO: add instructions how to cat a hash in the UI.**
+
+## Tutorial
+
+Steps
+1. create IPFS instance
+
+TODO. See `./start-ipfs.js`
+
+3. add a file in go-ipfs
+4. copy file's hash
+5. ipfs.files.cat
+
+TODO. add ipfs.files.cat code examples from index.html
+
+6. output the buffer to <img>
+
+```
+...
+stream.on('end', () => {
+  const blob = new Blob(buf)
+  picture.src = URL.createObjectURL(blob)
+})
+```
diff --git a/examples/transfer-files/complete/package.json b/examples/transfer-files/complete/package.json
new file mode 100644
index 0000000000..959558ba92
--- /dev/null
+++ b/examples/transfer-files/complete/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "transfer-files",
+  "version": "1.0.0",
+  "scripts": {
+    "check-bundle": "test -f ../../../dist/index.js && npm run copy-bundle || echo \"js-ipfs dist file not found, go up two dirs and run 'npm run build' first\"",
+    "copy-bundle": "cp ../../../dist/index.js ./public/js/ipfs.js",
+    "serve": "http-server -c-1 -p 12345 public",
+    "start": "npm run check-bundle && npm run serve"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "http-server": "^0.9.0"
+  }
+}
diff --git a/examples/access-go-ipfs-files/cat-a-file/public/styles.css b/examples/transfer-files/complete/public/css/app.css
similarity index 100%
rename from examples/access-go-ipfs-files/cat-a-file/public/styles.css
rename to examples/transfer-files/complete/public/css/app.css
diff --git a/examples/transfer-files/complete/public/favicon.ico b/examples/transfer-files/complete/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..801f728c083d96c67b7b636050dda09507edeb3b
GIT binary patch
literal 8076
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
amPo(8m{4b%d3nD-F8Abx>=$Xn!2bbxRGsSp

literal 0
HcmV?d00001

diff --git a/examples/transfer-files/complete/public/index.html b/examples/transfer-files/complete/public/index.html
new file mode 100644
index 0000000000..3086e1a963
--- /dev/null
+++ b/examples/transfer-files/complete/public/index.html
@@ -0,0 +1,57 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/app.css">
+
+    <script src="js/ipfs.js"></script>
+    <script src="js/create-node.js"></script>
+  </head>
+
+  <body>
+    <div class="center">
+      <div id="ipfs" class="ipfs" ondragover="event.preventDefault()">
+        <h1 id="state" class="center"></h1>
+        <div>
+          <div id="buttons" class="buttons center">
+            <button id="start" type="button">Start</button>
+            <button id="stop" type="button">Stop</button>
+          </div>
+          <div id="directory">
+            <h2>IPFS Settings</h2>
+            <label for="dir">Data Directory</label>
+            <input id="dir" type="text" placeholder="IPFS data directory"/>
+            <br><br>
+            <label for="signalServerInput">Signal Server</label>
+            <input id="signalServerInput" type="text" value="188.166.203.82:20000"/>
+          </div>
+        </div>
+        <div id="details"></div>
+        <div id="peers"></div>
+        <div id="files">
+          <h2>Files</h2>
+          <div id="filesStatus"></div>
+          <br>
+          <label for="multihash">Mutihash</label>
+          <input id="multihash" type="text" placeholder="Multihash"/>
+          <button id="cat" type="button">Cat</button>
+          <img id="picture" alt=""/>
+        </div>
+        <pre id="errors"></pre>
+      </div>
+    </div>
+
+    <!-- The IPFS node module -->
+    <script src="js/ipfs.js"></script>
+    <!--
+      The latest js-ipfs published version is also available
+      through the unpkg CDN, you can use it directly 
+    <script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
+    -->
+
+    <!-- Helper script to spawn our IPFS node instance -->
+    <script src="js/create-node.js"></script>
+
+    <!-- Our application -->
+    <script src="js/app.js"></script>
+  </body>
+</html>
diff --git a/examples/transfer-files/complete/public/js/app.js b/examples/transfer-files/complete/public/js/app.js
new file mode 100644
index 0000000000..207a0f653b
--- /dev/null
+++ b/examples/transfer-files/complete/public/js/app.js
@@ -0,0 +1,239 @@
+/* global Blob, URL, FileReader */
+
+const rootElement = document.getElementById('ipfs')
+const startButton = document.getElementById('start')
+const stopButton = document.getElementById('stop')
+const output = document.getElementById('state')
+const details = document.getElementById('details')
+const peers = document.getElementById('peers')
+const errors = document.getElementById('errors')
+const directory = document.getElementById('directory')
+const dirInput = document.getElementById('dir')
+const signalServerInput = document.getElementById('signalServerInput')
+const files = document.getElementById('files')
+const filesStatus = document.getElementById('filesStatus')
+const picture = document.getElementById('picture')
+const multihashInput = document.getElementById('multihash')
+const catButton = document.getElementById('cat')
+
+let ipfs
+let peerInfo
+let pollPeersTimer
+
+// Start IPFS instance
+function start () {
+  if (!ipfs) {
+    // Update the UI with initial settings
+    updateView('starting', ipfs)
+
+    /*
+     * path - 'dirname' of where the IPFS repo is stored
+     * signallAddr - address of the signalling server
+     */
+    const options = {
+      path: dirInput.value,
+      signalAddr: signalServerInput.value
+    }
+
+    // Create an IPFS instance
+    window.createNode(options, (err, node) => {
+      if (err) {
+        return onError(err)
+      }
+
+      ipfs = node
+
+      // Get our IPFS instance's info: ID and address
+      ipfs.id().then((id) => {
+        peerInfo = id
+        // Update the UI
+        updateView('ready', ipfs)
+
+        // Poll for peers from IPFS and display them
+        pollPeersTimer = setInterval(updatePeers, 1000)
+        peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
+      })
+    })
+  }
+}
+
+// Stop IPFS instance
+const stop = () => {
+  if (ipfs) {
+    if (pollPeersTimer) {
+      clearInterval(pollPeersTimer)
+    }
+
+    ipfs.goOffline()
+    ipfs = null
+    updateView('stopped', ipfs)
+  }
+}
+
+// Fetch file contents from IPFS and display it
+const catFile = () => {
+  // Get the hash to cat from the input field
+  const multihash = multihashInput.value
+
+  // Update UI
+  picture.innerHTML = multihash ? '<i>Loading...</i>' : ''
+  picture.className = multihash ? 'picture visible' : 'hidden'
+  errors.className = 'hidden'
+
+  // Get the file from IPFS
+  if (multihash) {
+    // IPFS.files.cat()
+    // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfscatmultihash-callback
+    ipfs.files.cat(multihash)
+      .then((stream) => {
+        // Buffer all contents of the file as text
+        // and once buffered, create a blob for the picture
+        let buf = []
+        stream.on('data', (d) => buf.push(d))
+        stream.on('end', () => {
+          const blob = new Blob(buf)
+          picture.src = URL.createObjectURL(blob)
+        })
+      })
+      .catch(onError)
+  }
+}
+
+// Display an error
+const onError = (e) => {
+  console.error(e)
+  errors.innerHTML = "<br/><span class='error'>' + e.stack + '</span>"
+  errors.className = 'error visible'
+}
+
+// Handle file drop
+const onDrop = (event) => {
+  picture.innerHTML = ''
+  picture.className = 'hidden'
+  errors.className = 'hidden'
+
+  event.preventDefault()
+  var dt = event.dataTransfer
+  var files = dt.files
+
+  const readFileContents = (file) => {
+    return new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onload = (event) => resolve(event.target.result)
+      reader.readAsArrayBuffer(file)
+    })
+  }
+
+  // TODO: Promise reduce?
+  for (var i = 0; i < files.length; i++) {
+    const file = files[i]
+    console.log('Add file', file.name, file.size)
+    readFileContents(file)
+      .then((buffer) => {
+        // IPFS.files.add()
+        // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfsfilesadddata-options-callback
+        return ipfs.files.add([{
+          path: file.name,
+          content: new ipfs.types.Buffer(buffer)
+        }])
+      })
+      .then((files) => {
+        console.log('Files added', files)
+        multihashInput.value = files[0].hash
+        filesStatus.innerHTML = files
+          .map((e) => `Added ${e.path} as ${e.hash}`)
+          .join('<br>')
+      })
+      .catch(onError)
+  }
+}
+
+// Get peers from IPFS and display them
+const updatePeers = () => {
+  ipfs.swarm.peers((err, res) => {
+    if (err) {
+      // TODO ??
+    }
+    // PeerId.toJSON()
+    // https://github.com/libp2p/js-peer-id/blob/3ef704ba32a97a9da26a1f821702cdd3f09c778f/src/index.js#L106
+    // Multiaddr.toString()
+    // https://multiformats.github.io/js-multiaddr/#multiaddrtostring
+    const peersAsHtml = res
+      .map((e, idx) => {
+        return (idx + 1) + '.' +
+          e.peer.id.toJSON().id +
+          '<br>' +
+          e.addr.toString() +
+          '<br>'
+      })
+      .join('')
+
+    peers.innerHTML = res.length > 0
+      ? '<h2>Peers</h2>' + peersAsHtml
+      : '<h2>Peers</h2><i>Waiting for peers...</i>'
+  })
+}
+
+/* UI functions */
+function initView () {
+  const initElement = (e, className) => {
+    e.innerHTML = ''
+    e.className = className
+  }
+
+  // Initial view
+  const elements = [errors, details, peers]
+  elements.map((e) => initElement(e, 'hidden'))
+  errors.innerHTML = ''
+  output.innerHTML = '🔌 IPFS stopped'
+  dirInput.value = '/ipfs/' + new Date().getTime()
+  directory.className = 'visible'
+  files.className = 'hidden'
+  filesStatus.innerHTML = ''
+  picture.innerHTML = ''
+  startButton.disabled = false
+  stopButton.disabled = true
+  multihashInput.value = null
+  picture.className = 'hidden'
+  // Remove old event listeners
+  rootElement.removeEventListener('drop', onDrop)
+  startButton.removeEventListener('click', start)
+  stopButton.removeEventListener('click', stop)
+  catButton.removeEventListener('click', catFile)
+  // Setup event listeners for interaction
+  rootElement.addEventListener('drop', onDrop)
+  startButton.addEventListener('click', start)
+  stopButton.addEventListener('click', stop)
+  catButton.addEventListener('click', catFile)
+}
+
+function updateView (state, ipfs) {
+  if (state === 'ready') {
+    // Set the header to display the current state
+    output.innerHTML = '🚀 IPFS started'
+    // Display IPFS info
+    details.innerHTML = '<div>' +
+      '<h2>IPFS Node</h2>' +
+      '<b>ID</b><br>' +
+      peerInfo.id + '<br><br>' +
+      '<b>Address</b><br>' +
+      peerInfo.addresses[0] + '<br><br>' +
+      '<b>IPFS Data Directory</b><br>' +
+      dirInput.value
+    // Set the file status
+    filesStatus.innerHTML = '<i>Drop a picture here to add it to IPFS.</i>'
+    details.className = 'visible'
+    peers.className = 'visible'
+    files.className = 'visible'
+    stopButton.disabled = false
+  } else if (state === 'starting') {
+    output.innerHTML = '📡 IPFS starting'
+    startButton.disabled = true
+    directory.className = 'hidden'
+  } else if (state === 'stopped') {
+    initView()
+  }
+}
+
+// Start the app
+initView()
diff --git a/examples/transfer-files/complete/public/js/create-node.js b/examples/transfer-files/complete/public/js/create-node.js
new file mode 100644
index 0000000000..3051edb4b7
--- /dev/null
+++ b/examples/transfer-files/complete/public/js/create-node.js
@@ -0,0 +1,54 @@
+'use strict'
+
+/*
+ * Create an IPFS node helper
+ */
+window.createNode = (options, callback) => {
+  const repoPath = options.path || '/tmp/ipfs' + Math.random()
+  const node = new window.Ipfs(repoPath)
+
+  node.init({ emptyRepo: true, bits: 2048 }, updateConfig)
+
+  function updateConfig (err) {
+    if (err) {
+      return callback(err)
+    }
+
+    node.config.get((err, config) => {
+      if (err) {
+        return callback(err)
+      }
+
+      // TODO change to use wstar in DNS instead
+      const host = options.signalAddr.split(':')[0] || '127.0.0.1'
+      const port = options.signalAddr.split(':')[1] || 9090
+
+      const wstarMultiaddr = `/libp2p-webrtc-star/ip4/${host}/tcp/${port}/ws/ipfs/${config.Identity.PeerID}`
+
+      config.Addresses.Swarm = [ wstarMultiaddr ]
+
+      node.config.replace(config, bootNode)
+    })
+  }
+
+  function bootNode (err) {
+    if (err) {
+      return callback(err)
+    }
+
+    node.load((err) => {
+      if (err) {
+        return callback(err)
+      }
+
+      node.goOnline((err) => {
+        if (err) {
+          return callback(err)
+        }
+
+        // console.log('IPFS node is ready')
+        callback(null, node)
+      })
+    })
+  }
+}
diff --git a/examples/transfer-files/img/diagram.monopic b/examples/transfer-files/img/diagram.monopic
new file mode 100644
index 0000000000000000000000000000000000000000..35f88ab30f3b374694bfc9ee98cffe31dda8cd7a
GIT binary patch
literal 1571
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
VCm{Q5J&3|&|35^VFYs(S002k*0sH^}

literal 0
HcmV?d00001

diff --git a/examples/transfer-files/img/diagram.txt b/examples/transfer-files/img/diagram.txt
new file mode 100644
index 0000000000..05c9ff91cb
--- /dev/null
+++ b/examples/transfer-files/img/diagram.txt
@@ -0,0 +1,19 @@
+┌──────────────┐                   ┌──────────────┐
+│   Browser    │                   │   Browser    │
+│              │      WebRTC       │              │
+│              │◀─────────────────▶│              │
+│              │                   │              │
+└──────────────┘                   └──────────────┘
+        ▲                                  ▲
+        │                                  │
+        │                                  │
+        │                                  │
+        │WebSockets              WebSockets│
+        │                                  │
+        │                                  │
+        │        ┌──────────────┐          │
+        │        │   Desktop    │          │
+        │        │              │          │
+        └───────▶│              │◀─────────┘
+                 │              │
+                 └──────────────┘
\ No newline at end of file

From c15370e548e719e419979e7023a3a4c476d8e2ab Mon Sep 17 00:00:00 2001
From: Victor Bjelkholm <victorbjelkholm@gmail.com>
Date: Fri, 27 Jan 2017 01:21:14 +0100
Subject: [PATCH 03/10] Modifications to transfer-files readme

---
 examples/transfer-files/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/transfer-files/README.md b/examples/transfer-files/README.md
index 80c60715c4..2d966cb54c 100644
--- a/examples/transfer-files/README.md
+++ b/examples/transfer-files/README.md
@@ -1,6 +1,6 @@
 # Tutorial - Transfer files between the browser and other IPFS nodes
 
-> Welcome! This tutorial will help you a tiny web application where you can fetch and add files to IPFS and transfer these between a go-ipfs node and a js-ipfs node.
+> Welcome! This tutorial will help you build a tiny web application where you can fetch and add files to IPFS and transfer these between a go-ipfs node and a js-ipfs node.
 
 There are a couple of caveats:
 
@@ -12,7 +12,7 @@ That being said, we will explain throughout this tutorial to circunvent the cave
 
 ## Application diagram
 
-The goal of this tutorial is to create a WebApplication with an IPFS node that dials to other instances of it using WebRTC, and at the same time dial and transfer files from a Desktop IPFS node using WebSockets as the transport.
+The goal of this tutorial is to create a application with a IPFS node that dials to other instances of it using WebRTC, and at the same time dial and transfer files from a Desktop IPFS node using WebSockets as the transport.
 
 ┌──────────────┐                   ┌──────────────┐
 │   Browser    │                   │   Browser    │
@@ -53,9 +53,9 @@ TODO: Insert final screenshot here
 
 **Instructions:**
 
-- 1. Set up, install a go-ipfs and/or js-ipfs in your machine
+- 1. Set up, install a go-ipfs node in your machine
 - 2. Make your daemons listen on WebSockets
-- 3. Start the WebApp project
+- 3. Initialize the project
 - 4. Create the frame for your IPFS enabled app
 - 5. Add and cat a file
 - 6. Use WebRTC to dial between browser nodes

From f3dcfb555addbaeed915fbaf11269697a8216792 Mon Sep 17 00:00:00 2001
From: Victor Bjelkholm <victorbjelkholm@gmail.com>
Date: Fri, 27 Jan 2017 01:21:37 +0100
Subject: [PATCH 04/10] first pass of improving design and ux of example

- nicer colors
- include logo
- fancier buttons
- easier flow to start daemon
- less information after starting daemon
- use dns signal server
- larger font size
- removal of unused features
- removal of duplicated script references
- more explanation
- and probably something more I forgot
---
 .../complete/public/css/app.css               | 139 ++++++++++++++----
 .../transfer-files/complete/public/index.html |  81 ++++++----
 .../complete/public/ipfs-logo.svg             |   1 +
 .../transfer-files/complete/public/js/app.js  |  99 ++++++-------
 .../complete/public/js/create-node.js         |   8 +-
 5 files changed, 214 insertions(+), 114 deletions(-)
 create mode 100644 examples/transfer-files/complete/public/ipfs-logo.svg

diff --git a/examples/transfer-files/complete/public/css/app.css b/examples/transfer-files/complete/public/css/app.css
index 6dd63add24..8fedfc1f27 100644
--- a/examples/transfer-files/complete/public/css/app.css
+++ b/examples/transfer-files/complete/public/css/app.css
@@ -1,9 +1,23 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
-
 body {
-  font-family: 'Roboto', sans-serif;
-  font-size: 1.0em;
-  font-weight: 400;
+  height: 100vh;
+  font-family: sans-serif;
+  color: white;
+  background: linear-gradient(to bottom,#041727 0%,#062b3f 100%);
+}
+
+.id {
+  margin-top: 30px;
+  font-size: 14px;
+}
+
+.id strong {
+  font-size: 17px;
+}
+
+#restart {
+  position: absolute;
+  top: 20px;
+  right: 20px;
 }
 
 h1 {
@@ -13,7 +27,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.25em;
+  font-size: 25px;
   font-weight: 700;
 }
 
@@ -22,6 +36,14 @@ h3 {
   font-weight: 700;
 }
 
+p {
+  font-size: 17px;
+}
+
+.center {
+  text-align: center;
+}
+
 label {
   margin-right: 1em;
 }
@@ -44,29 +66,94 @@ input {
   color: red;
 }
 
-.center {
-  display: flex;
-  justify-content: center;
+.wrapper {
+  position: relative;
+  margin: 50px auto;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  width: 500px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 1px;
 }
 
-.ipfs {
-  min-width: 22em;
-  max-width: 44em;
-  flex-grow: 1;
-  flex-basis: 22em;
-  border: 1px dashed grey;
-  padding: 1em;
-  overflow: auto;
+.introduction {
+  width: 70%;
+  margin: 0px auto;
+  text-align: center;
 }
 
-.buttons {
-  margin-top: 1em;  
+.on-off-button {
+	position: absolute;
+	top: 10px;
+	right: 10px;
 }
 
-.picture {
-  margin-top: 1em;
-  width: 100%;
-  background-color: rgba(196, 196, 196, 0.1);
-  /*padding: 0.25em;*/
-  /*font-size: 1.2em;*/
-}
\ No newline at end of file
+#directory {
+	text-align: center;
+}
+
+#directory .group {
+	margin: 30px;
+}
+
+#directory label {
+  font-size: 18px;
+  display: block;
+}
+
+textarea, input, button {
+  outline: none;
+}
+
+button:focus, input:focus {
+  outline: 5px solid #6acad1;
+}
+
+#peers {
+  margin: 10px;
+  text-align: left;
+  font-size: 14px;
+  word-break: break-all;
+}
+
+.peer-item {
+  margin-bottom: 15px;
+}
+
+#logo-link {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 32px;
+  overflow: hidden;
+}
+
+.button {
+  background-color: rgba(0,0,0,0.2);
+  color: #6acad1;
+  border: 2px solid #6acad1;
+  font-size: 15px;
+  padding: 10px 25px 10px 25px;
+  border-radius: 2px;
+}
+
+button:hover {
+  color: white;
+  border: 2px solid white;
+  cursor: pointer;
+}
+
+#directory input {
+  width: 70%;
+  font-size: 16px;
+  border: 2px solid #444;
+  color: black;
+  padding: 10px;
+  border-radius: 2px;
+  font-family: monospace;
+}
+
+.group-item {
+  display: inline;
+  line-height: 30px;
+}
diff --git a/examples/transfer-files/complete/public/index.html b/examples/transfer-files/complete/public/index.html
index 3086e1a963..f302927138 100644
--- a/examples/transfer-files/complete/public/index.html
+++ b/examples/transfer-files/complete/public/index.html
@@ -1,42 +1,67 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
     <link rel="stylesheet" href="css/app.css">
-
-    <script src="js/ipfs.js"></script>
-    <script src="js/create-node.js"></script>
+		<title>IPFS - Transfer Files Example</title>
   </head>
-
   <body>
+    <a href="https://ipfs.io" target="_blank" id="logo-link">
+      <img src="ipfs-logo.svg" height="32" id="logo">
+    </a>
+    <button id="restart" class="button" type="button" onclick="window.location.href = window.location.href">Restart</button>
     <div class="center">
-      <div id="ipfs" class="ipfs" ondragover="event.preventDefault()">
-        <h1 id="state" class="center"></h1>
+      <div id="ipfs" class="wrapper" ondragover="event.preventDefault()">
+        <h1 id="state" class="center">IPFS not running yet</h1>
         <div>
-          <div id="buttons" class="buttons center">
-            <button id="start" type="button">Start</button>
-            <button id="stop" type="button">Stop</button>
+          <div id="buttons" class="on-off-button">
           </div>
           <div id="directory">
-            <h2>IPFS Settings</h2>
-            <label for="dir">Data Directory</label>
-            <input id="dir" type="text" placeholder="IPFS data directory"/>
-            <br><br>
-            <label for="signalServerInput">Signal Server</label>
-            <input id="signalServerInput" type="text" value="188.166.203.82:20000"/>
+						<h2>Setup</h2>
+						<div class="introduction">
+							<p>
+							  Here you can configure where to keep your IPFS configuration
+							  and which signaling server to use.
+							</p>
+              <p>
+                When you're ready, click "Go Online" to start the IPFS daemon
+                in the background
+              </p>
+						</div>
+						<div class="group">
+              <div class="group-item">
+                <label for="dir">Data Directory:</label>
+              </div>
+              <div class="group-item">
+                <input id="dir" type="text" placeholder="IPFS data directory"/>
+              </div>
+						</div>
+						<div class="group">
+              <div class="group-item">
+                <label for="signalServerInput">Signal Server:</label>
+              </div>
+              <div class="group-item">
+                <input id="signalServerInput" type="text" value="star-signal.cloud.ipfs.team"/>
+              </div>
+						</div>
+            <button id="start" class="button" type="button">Go Online</button>
           </div>
         </div>
-        <div id="details"></div>
-        <div id="peers"></div>
-        <div id="files">
-          <h2>Files</h2>
-          <div id="filesStatus"></div>
-          <br>
-          <label for="multihash">Mutihash</label>
-          <input id="multihash" type="text" placeholder="Multihash"/>
-          <button id="cat" type="button">Cat</button>
-          <img id="picture" alt=""/>
+        <div id="details" class="hidden"></div>
+        <div id="peers" class="hidden"></div>
+        <div id="files" class="hidden">
+          <div>
+            <label for="multihash">Mutihash</label>
+            <input id="multihash" type="text" placeholder="Multihash"/>
+            <button id="cat" type="button">Cat</button>
+          </div>
+          <div>
+            <label for="connect-peer">Connect peer</label>
+            <input class="connect-peer" type="text" placeholder="Multiaddr: ex /ip4/192.168.1.131/tcp/9999/ws "/>
+            <button class="connect-peer" type="button">Connect</button>
+          </div>
         </div>
-        <pre id="errors"></pre>
+        <pre id="errors" class="hidden"></pre>
       </div>
     </div>
 
diff --git a/examples/transfer-files/complete/public/ipfs-logo.svg b/examples/transfer-files/complete/public/ipfs-logo.svg
new file mode 100644
index 0000000000..5091cce61e
--- /dev/null
+++ b/examples/transfer-files/complete/public/ipfs-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 553 235.3"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#469ea2;}.cls-3{fill:#6acad1;}.cls-4,.cls-5{fill:#083b54;}.cls-4{fill-opacity:0.15;}.cls-5{fill-opacity:0.05;}</style></defs><title>IPFS logo (new)</title><path class="cls-1" d="M239,63h17.8V168H239V63Z"/><path class="cls-1" d="M274.6,63h36.3c7.9,0,14.5.9,19.6,2.6s9.2,4.1,12.1,7.1a24.45,24.45,0,0,1,6.2,10.2A40.75,40.75,0,0,1,350.6,95a45.69,45.69,0,0,1-1.8,12.9,26.58,26.58,0,0,1-6.2,10.8,30.59,30.59,0,0,1-12.1,7.3c-5.1,1.8-11.5,2.7-19.3,2.7H292.1V168H274.6V63Zm36.2,51a38.37,38.37,0,0,0,11.1-1.3,16.3,16.3,0,0,0,6.8-3.7,13.34,13.34,0,0,0,3.5-5.8,29.75,29.75,0,0,0,1-7.6,25.68,25.68,0,0,0-1-7.7,12,12,0,0,0-3.6-5.5,17.15,17.15,0,0,0-6.9-3.4,41.58,41.58,0,0,0-10.9-1.2H292.3V114h18.5Z"/><path class="cls-1" d="M430.7,63V78.3H381.5V108h46.3v15.4H381.5V168H363.7V63h67Z"/><path class="cls-1" d="M456.9,135.9c0.8,6.9,3.3,11.9,7.4,15s10.4,4.7,18.6,4.7a32.61,32.61,0,0,0,10.1-1.3,20.52,20.52,0,0,0,6.6-3.5,12,12,0,0,0,3.5-5.2,19.08,19.08,0,0,0,1-6.4,16.14,16.14,0,0,0-.7-4.9,12.87,12.87,0,0,0-2.6-4.5,16.59,16.59,0,0,0-5.1-3.6,35,35,0,0,0-8.2-2.4l-13.4-2.5a89.76,89.76,0,0,1-14.1-3.7,33.51,33.51,0,0,1-10.4-5.8,22.28,22.28,0,0,1-6.3-8.8,34.1,34.1,0,0,1-2.1-12.7,26,26,0,0,1,11.3-22.4,36.35,36.35,0,0,1,12.6-5.6,65.89,65.89,0,0,1,15.8-1.8c7.2,0,13.3.8,18.2,2.5A34.46,34.46,0,0,1,511,69.5a28.21,28.21,0,0,1,6.9,9.3,42.1,42.1,0,0,1,3.2,11l-16.8,2.6c-1.4-5.9-3.7-10.2-7.1-13.1S488.5,75,481.1,75a43.9,43.9,0,0,0-10.5,1.1,19.47,19.47,0,0,0-6.8,3.1,11.63,11.63,0,0,0-3.7,4.6,14.08,14.08,0,0,0-1.1,5.4c0,4.6,1.2,8,3.7,10.3s6.9,4,13.2,5.3l14.5,2.8c11.1,2.1,19.2,5.6,24.4,10.5s7.8,12.1,7.8,21.4a31.37,31.37,0,0,1-2.4,12.3,25.27,25.27,0,0,1-7.4,9.8,36.58,36.58,0,0,1-12.4,6.6,56,56,0,0,1-17.3,2.4c-13.4,0-24-2.8-31.6-8.5s-11.9-14.4-12.6-26.2h18Z"/><path class="cls-2" d="M30.3,164l84,48.5,84-48.5V67l-84-48.5L30.3,67v97Z"/><path class="cls-3" d="M105.7,30.1l-61,35.2a18.19,18.19,0,0,1,0,3.3l60.9,35.2a14.55,14.55,0,0,1,17.3,0l60.9-35.2a18.19,18.19,0,0,1,0-3.3L123,30.1a14.55,14.55,0,0,1-17.3,0h0Zm84,48.2-61,35.6a14.73,14.73,0,0,1-8.6,15l0.1,70a15.57,15.57,0,0,1,2.8,1.6l60.9-35.2a14.73,14.73,0,0,1,8.6-15V79.9a20,20,0,0,1-2.8-1.6h0Zm-150.8.4a15.57,15.57,0,0,1-2.8,1.6v70.4a14.38,14.38,0,0,1,8.6,15l60.9,35.2a15.57,15.57,0,0,1,2.8-1.6V128.9a14.38,14.38,0,0,1-8.6-15L38.9,78.7h0Z"/><path class="cls-2" d="M114.3,29l75.1,43.4v86.7l-75.1,43.4L39.2,159.1V72.3L114.3,29m0-10.3-84,48.5v97l84,48.5,84-48.5v-97l-84-48.5h0Z"/><path class="cls-2" d="M114.9,132h-1.2A15.66,15.66,0,0,1,98,116.3v-1.2a15.66,15.66,0,0,1,15.7-15.7h1.2a15.66,15.66,0,0,1,15.7,15.7v1.2A15.66,15.66,0,0,1,114.9,132Z"/><path class="cls-2" d="M114.9,196.5h-1.2a15.65,15.65,0,0,0-13.7,8l14.3,8.2,14.3-8.2a15.65,15.65,0,0,0-13.7-8h0Z"/><path class="cls-2" d="M198.4,148h-0.6a15.66,15.66,0,0,0-15.7,15.7v1.2a15.13,15.13,0,0,0,2,7.6l14.3-8.3V148h0Z"/><path class="cls-2" d="M184.1,59a15.4,15.4,0,0,0-2,7.6v1.2a15.66,15.66,0,0,0,15.7,15.7h0.6V67.2L184.1,59h0Z"/><path class="cls-2" d="M114.3,18.7L100,26.9A15.73,15.73,0,0,0,113.7,35h1.2a15.65,15.65,0,0,0,13.7-8l-14.3-8.3h0Z"/><path class="cls-2" d="M44.6,58.9L30.3,67.2V83.5h0.6A15.66,15.66,0,0,0,46.6,67.8V66.6a16.63,16.63,0,0,0-2-7.7h0Z"/><path class="cls-2" d="M30.9,148H30.3v16.2l14.3,8.3a15.4,15.4,0,0,0,2-7.6v-1.2A15.66,15.66,0,0,0,30.9,148h0Z"/><path class="cls-4" d="M114.3,213.2V116.1l-84-48.5v97.1Z"/><path class="cls-5" d="M198.4,163.8v-97l-84,48.5v97.1Z"/></svg>
\ No newline at end of file
diff --git a/examples/transfer-files/complete/public/js/app.js b/examples/transfer-files/complete/public/js/app.js
index 207a0f653b..20a53b57ea 100644
--- a/examples/transfer-files/complete/public/js/app.js
+++ b/examples/transfer-files/complete/public/js/app.js
@@ -1,8 +1,5 @@
-/* global Blob, URL, FileReader */
-
 const rootElement = document.getElementById('ipfs')
 const startButton = document.getElementById('start')
-const stopButton = document.getElementById('stop')
 const output = document.getElementById('state')
 const details = document.getElementById('details')
 const peers = document.getElementById('peers')
@@ -11,14 +8,27 @@ const directory = document.getElementById('directory')
 const dirInput = document.getElementById('dir')
 const signalServerInput = document.getElementById('signalServerInput')
 const files = document.getElementById('files')
-const filesStatus = document.getElementById('filesStatus')
-const picture = document.getElementById('picture')
 const multihashInput = document.getElementById('multihash')
 const catButton = document.getElementById('cat')
 
+const $connectPeer = document.querySelector('input.connect-peer')
+const $connectPeerButton = document.querySelector('button.connect-peer')
+
 let ipfs
 let peerInfo
-let pollPeersTimer
+
+// See signal and data-directory option
+// Click start ipfs daemon
+// Connect to go-ipfs daemon
+// Cat a file from go-ipfs daemon
+// Add text in browser and cat with go-ipfs
+
+$connectPeerButton.addEventListener('click', () => {
+  console.log('connecting', $connectPeer.value)
+  ipfs.swarm.connect($connectPeer.value, (err, res) => {
+    console.log(err, res)
+  })
+})
 
 // Start IPFS instance
 function start () {
@@ -49,8 +59,7 @@ function start () {
         // Update the UI
         updateView('ready', ipfs)
 
-        // Poll for peers from IPFS and display them
-        pollPeersTimer = setInterval(updatePeers, 1000)
+        setInterval(updatePeers, 1000)
         peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
       })
     })
@@ -58,17 +67,16 @@ function start () {
 }
 
 // Stop IPFS instance
-const stop = () => {
-  if (ipfs) {
-    if (pollPeersTimer) {
-      clearInterval(pollPeersTimer)
-    }
-
-    ipfs.goOffline()
-    ipfs = null
-    updateView('stopped', ipfs)
-  }
-}
+// const stop = () => {
+//   if (ipfs) {
+//     if (pollPeersTimer) {
+//       clearInterval(pollPeersTimer)
+//     }
+//     ipfs.goOffline()
+//     ipfs = null
+//     updateView('stopped', ipfs)
+//   }
+// }
 
 // Fetch file contents from IPFS and display it
 const catFile = () => {
@@ -76,8 +84,6 @@ const catFile = () => {
   const multihash = multihashInput.value
 
   // Update UI
-  picture.innerHTML = multihash ? '<i>Loading...</i>' : ''
-  picture.className = multihash ? 'picture visible' : 'hidden'
   errors.className = 'hidden'
 
   // Get the file from IPFS
@@ -91,8 +97,9 @@ const catFile = () => {
         let buf = []
         stream.on('data', (d) => buf.push(d))
         stream.on('end', () => {
-          const blob = new Blob(buf)
-          picture.src = URL.createObjectURL(blob)
+          console.log(buf.join(''))
+          // const blob = new window.Blob(buf)
+          // picture.src = window.URL.createObjectURL(blob)
         })
       })
       .catch(onError)
@@ -108,8 +115,6 @@ const onError = (e) => {
 
 // Handle file drop
 const onDrop = (event) => {
-  picture.innerHTML = ''
-  picture.className = 'hidden'
   errors.className = 'hidden'
 
   event.preventDefault()
@@ -118,7 +123,7 @@ const onDrop = (event) => {
 
   const readFileContents = (file) => {
     return new Promise((resolve) => {
-      const reader = new FileReader()
+      const reader = new window.FileReader()
       reader.onload = (event) => resolve(event.target.result)
       reader.readAsArrayBuffer(file)
     })
@@ -140,14 +145,12 @@ const onDrop = (event) => {
       .then((files) => {
         console.log('Files added', files)
         multihashInput.value = files[0].hash
-        filesStatus.innerHTML = files
-          .map((e) => `Added ${e.path} as ${e.hash}`)
-          .join('<br>')
       })
       .catch(onError)
   }
 }
 
+let numberOfPeersLastTime = 0
 // Get peers from IPFS and display them
 const updatePeers = () => {
   ipfs.swarm.peers((err, res) => {
@@ -158,19 +161,21 @@ const updatePeers = () => {
     // https://github.com/libp2p/js-peer-id/blob/3ef704ba32a97a9da26a1f821702cdd3f09c778f/src/index.js#L106
     // Multiaddr.toString()
     // https://multiformats.github.io/js-multiaddr/#multiaddrtostring
+    if (res.length === numberOfPeersLastTime) {
+      return
+    }
+    numberOfPeersLastTime = res.length
     const peersAsHtml = res
       .map((e, idx) => {
-        return (idx + 1) + '.' +
-          e.peer.id.toJSON().id +
-          '<br>' +
+        return '<div class="peer-item">' +
           e.addr.toString() +
-          '<br>'
+          '</div>'
       })
       .join('')
 
     peers.innerHTML = res.length > 0
-      ? '<h2>Peers</h2>' + peersAsHtml
-      : '<h2>Peers</h2><i>Waiting for peers...</i>'
+      ? '<h2>Connected Peers</h2>' + peersAsHtml
+      : '<h2>Connected Peers</h2><i>Waiting for peers...</i>'
   })
 }
 
@@ -185,49 +190,35 @@ function initView () {
   const elements = [errors, details, peers]
   elements.map((e) => initElement(e, 'hidden'))
   errors.innerHTML = ''
-  output.innerHTML = '🔌 IPFS stopped'
   dirInput.value = '/ipfs/' + new Date().getTime()
   directory.className = 'visible'
   files.className = 'hidden'
-  filesStatus.innerHTML = ''
-  picture.innerHTML = ''
   startButton.disabled = false
-  stopButton.disabled = true
   multihashInput.value = null
-  picture.className = 'hidden'
   // Remove old event listeners
   rootElement.removeEventListener('drop', onDrop)
   startButton.removeEventListener('click', start)
-  stopButton.removeEventListener('click', stop)
   catButton.removeEventListener('click', catFile)
   // Setup event listeners for interaction
   rootElement.addEventListener('drop', onDrop)
   startButton.addEventListener('click', start)
-  stopButton.addEventListener('click', stop)
   catButton.addEventListener('click', catFile)
 }
 
 function updateView (state, ipfs) {
   if (state === 'ready') {
     // Set the header to display the current state
-    output.innerHTML = '🚀 IPFS started'
+    output.innerHTML = 'IPFS running now'
     // Display IPFS info
-    details.innerHTML = '<div>' +
-      '<h2>IPFS Node</h2>' +
-      '<b>ID</b><br>' +
-      peerInfo.id + '<br><br>' +
-      '<b>Address</b><br>' +
-      peerInfo.addresses[0] + '<br><br>' +
-      '<b>IPFS Data Directory</b><br>' +
-      dirInput.value
+    details.innerHTML = '<div class="id">' +
+      '<strong>Your ID: </strong><br>' +
+      peerInfo.id + '<br><br>'
     // Set the file status
-    filesStatus.innerHTML = '<i>Drop a picture here to add it to IPFS.</i>'
     details.className = 'visible'
     peers.className = 'visible'
     files.className = 'visible'
-    stopButton.disabled = false
   } else if (state === 'starting') {
-    output.innerHTML = '📡 IPFS starting'
+    output.innerHTML = 'IPFS daemon is starting...'
     startButton.disabled = true
     directory.className = 'hidden'
   } else if (state === 'stopped') {
diff --git a/examples/transfer-files/complete/public/js/create-node.js b/examples/transfer-files/complete/public/js/create-node.js
index 3051edb4b7..aa8e3356b6 100644
--- a/examples/transfer-files/complete/public/js/create-node.js
+++ b/examples/transfer-files/complete/public/js/create-node.js
@@ -19,13 +19,9 @@ window.createNode = (options, callback) => {
         return callback(err)
       }
 
-      // TODO change to use wstar in DNS instead
-      const host = options.signalAddr.split(':')[0] || '127.0.0.1'
-      const port = options.signalAddr.split(':')[1] || 9090
+      const wstarMultiaddr = `/libp2p-webrtc-star/dns4/${options.signalAddr}/wss/ipfs/${config.Identity.PeerID}`
 
-      const wstarMultiaddr = `/libp2p-webrtc-star/ip4/${host}/tcp/${port}/ws/ipfs/${config.Identity.PeerID}`
-
-      config.Addresses.Swarm = [ wstarMultiaddr ]
+      config.Addresses.Swarm = config.Addresses.Swarm.concat([ wstarMultiaddr ])
 
       node.config.replace(config, bootNode)
     })

From 3cca07bfaa37e6a06d3e467defede9ada3231eb5 Mon Sep 17 00:00:00 2001
From: Victor Bjelkholm <victorbjelkholm@gmail.com>
Date: Fri, 27 Jan 2017 16:54:14 +0100
Subject: [PATCH 05/10] Latest changes

---
 .../complete/public/css/app.css               |  72 +++----
 .../transfer-files/complete/public/index.html | 133 ++++++++----
 .../transfer-files/complete/public/js/app.js  | 193 ++++++++++++------
 3 files changed, 263 insertions(+), 135 deletions(-)

diff --git a/examples/transfer-files/complete/public/css/app.css b/examples/transfer-files/complete/public/css/app.css
index 8fedfc1f27..8b31a469ab 100644
--- a/examples/transfer-files/complete/public/css/app.css
+++ b/examples/transfer-files/complete/public/css/app.css
@@ -20,34 +20,10 @@ body {
   right: 20px;
 }
 
-h1 {
-  font-size: 2em;
-  font-weight: 300;
-  margin: 0em;
-}
-
-h2 {
-  font-size: 25px;
-  font-weight: 700;
-}
-
-h3 {
-  font-size: 1.0em;
-  font-weight: 700;
-}
-
-p {
-  font-size: 17px;
-}
-
 .center {
   text-align: center;
 }
 
-label {
-  margin-right: 1em;
-}
-
 input {
   margin-right: 1em;  
 }
@@ -69,17 +45,23 @@ input {
 .wrapper {
   position: relative;
   margin: 50px auto;
-  padding-top: 50px;
-  padding-bottom: 50px;
+	width: 1020px;
+}
+
+.box {
   width: 500px;
+  padding: 50px;
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 1px;
+  text-align: center;
+	float: left;
+	margin: 5px;
+	box-sizing: border-box;
 }
 
 .introduction {
   width: 70%;
   margin: 0px auto;
-  text-align: center;
 }
 
 .on-off-button {
@@ -88,16 +70,12 @@ input {
 	right: 10px;
 }
 
-#directory {
-	text-align: center;
-}
-
 #directory .group {
 	margin: 30px;
 }
 
-#directory label {
-  font-size: 18px;
+label {
+  font-weight: bolder;
   display: block;
 }
 
@@ -143,9 +121,7 @@ button:hover {
   cursor: pointer;
 }
 
-#directory input {
-  width: 70%;
-  font-size: 16px;
+input {
   border: 2px solid #444;
   color: black;
   padding: 10px;
@@ -153,7 +129,27 @@ button:hover {
   font-family: monospace;
 }
 
+#directory input {
+  width: 70%;
+  font-size: 16px;
+}
+
+.group {
+  vertical-align: middle;
+  margin-top: 15px;
+  text-align: center;
+}
+
 .group-item {
-  display: inline;
-  line-height: 30px;
+  display: block;
+  text-align: center;
+  margin-top: 10px;
+}
+
+.state {
+  display: none;
+}
+
+.state.stopped {
+  display: block;
 }
diff --git a/examples/transfer-files/complete/public/index.html b/examples/transfer-files/complete/public/index.html
index f302927138..556b7b4bf2 100644
--- a/examples/transfer-files/complete/public/index.html
+++ b/examples/transfer-files/complete/public/index.html
@@ -6,11 +6,88 @@
 		<title>IPFS - Transfer Files Example</title>
   </head>
   <body>
-    <a href="https://ipfs.io" target="_blank" id="logo-link">
-      <img src="ipfs-logo.svg" height="32" id="logo">
-    </a>
-    <button id="restart" class="button" type="button" onclick="window.location.href = window.location.href">Restart</button>
-    <div class="center">
+    <div class="header">
+      <a href="https://ipfs.io" target="_blank" id="logo-link">
+        <img src="ipfs-logo.svg" height="32" id="logo">
+      </a>
+      <button id="restart" class="button" type="button" onclick="window.location.href = window.location.href">Start from the beginning</button>
+    </div>
+		<div class="wrapper">
+			<div class="box">
+				<div class="stopped state">
+					<div class="introduction">
+						<p>
+							Here you can configure where to keep your IPFS configuration
+							and which signaling server to use.
+						</p>
+						<p>
+							When you're ready, click "Go Online" to start the IPFS daemon
+							in the background
+						</p>
+					</div>
+					<div class="group">
+						<div class="group-item">
+							<label for="dir" title="Data directory decides where to store IPFS configuration and blocks inside your browser">Data Directory:</label>
+						</div>
+						<div class="group-item">
+							<input id="dir" title="Data directory decides where to store IPFS configuration and blocks inside your browser" type="text" placeholder="IPFS data directory"/>
+						</div>
+					</div>
+					<div class="group">
+						<div class="group-item">
+							<label for="signalServerInput" title="A signal server helps you connect to other peers">Signal Server:</label>
+						</div>
+						<div class="group-item">
+							<input id="signalServerInput" title="A signal server helps you connect to other peers"type="text" value="star-signal.cloud.ipfs.team"/>
+						</div>
+					</div>
+					<div class="center" style="margin-top: 20px;">
+						<button id="start" class="button" type="button" data-next-state="starting">Go Online</button>
+					</div>
+				</div>
+				<div class="starting state">
+					<p>IPFS daemon is starting</p>
+				</div>
+				<div class="running state">
+					<p>Now the daemon is running and you're connected!</p>
+					<p>Now let's connect to a go-ipfs daemon running on your desktop</p>
+					<div class="group">
+					<div class="group-item">
+						<label for="connect-peer" title="The multiaddr of the go-ipfs daemon will help you to connect to a go-ipfs daemon to resolve content">go-ipfs daemon multiaddr</label>
+					</div>
+					<div class="group-item">
+						<input id="connect-peer" class="connect-peer" type="text" value="/ip4/172.17.11.65/tcp/9999/ws/ipfs/QmbXqqMJufs2fKig7EVcwWQi9SfUMiJet6HUNdH5i1TYZ5">
+					</div>
+					<div class="group-item">
+						<button class="connect-peer button" data-next-state="connecting">Connect</button>
+					</div>
+					</div>
+				</div>
+				<div class="connecting state">
+					<p>Connecting to your go-ipfs daemon</p>
+				</div>
+				<div class="connected state">
+					<p>
+						Now you're connected! Let's look at some content that you've
+						added in go-ipfs
+					</p>
+					<input type="text" class="get-content" value="QmNv8HToVEGG4ZovHDztbhRwcpPQ1L3SjXJNYUGqPkqeEm">
+					<button class="get-content" data-next-state="loading">Get Content</button>
+				</div>
+				<div class="loading state">
+					<p>Loading content</p>
+				</div>
+				<div class="loaded state">
+					<p>And here is your content!</p>
+					<pre></pre>
+				</div>
+			</div>
+			<div class="box">
+				Information about your js-ipfs daemon
+			</div>
+		</div>
+
+    <div class="center hidden">
       <div id="ipfs" class="wrapper" ondragover="event.preventDefault()">
         <h1 id="state" class="center">IPFS not running yet</h1>
         <div>
@@ -18,47 +95,27 @@ <h1 id="state" class="center">IPFS not running yet</h1>
           </div>
           <div id="directory">
 						<h2>Setup</h2>
-						<div class="introduction">
-							<p>
-							  Here you can configure where to keep your IPFS configuration
-							  and which signaling server to use.
-							</p>
-              <p>
-                When you're ready, click "Go Online" to start the IPFS daemon
-                in the background
-              </p>
-						</div>
-						<div class="group">
-              <div class="group-item">
-                <label for="dir">Data Directory:</label>
-              </div>
-              <div class="group-item">
-                <input id="dir" type="text" placeholder="IPFS data directory"/>
-              </div>
-						</div>
-						<div class="group">
-              <div class="group-item">
-                <label for="signalServerInput">Signal Server:</label>
-              </div>
-              <div class="group-item">
-                <input id="signalServerInput" type="text" value="star-signal.cloud.ipfs.team"/>
-              </div>
-						</div>
-            <button id="start" class="button" type="button">Go Online</button>
           </div>
         </div>
         <div id="details" class="hidden"></div>
         <div id="peers" class="hidden"></div>
         <div id="files" class="hidden">
-          <div>
+          <div class="group">
             <label for="multihash">Mutihash</label>
             <input id="multihash" type="text" placeholder="Multihash"/>
-            <button id="cat" type="button">Cat</button>
+            <button id="cat" class="button" type="button">Cat</button>
           </div>
-          <div>
-            <label for="connect-peer">Connect peer</label>
-            <input class="connect-peer" type="text" placeholder="Multiaddr: ex /ip4/192.168.1.131/tcp/9999/ws "/>
-            <button class="connect-peer" type="button">Connect</button>
+          <div class="group">
+            <div class="group-item">
+              <label for="connect-peer">Connect peer</label>
+            </div>
+            <div class="group-item">
+              <input class="connect-peer" type="text" placeholder="Multiaddr: ex /ip4/192.168.1.131/tcp/9999/ws "/>
+            </div>
+            <br />
+            <div class="group-item">
+              <button class="connect-peer button" type="button">Connect</button>
+            </div>
           </div>
         </div>
         <pre id="errors" class="hidden"></pre>
diff --git a/examples/transfer-files/complete/public/js/app.js b/examples/transfer-files/complete/public/js/app.js
index 20a53b57ea..d390eb8d56 100644
--- a/examples/transfer-files/complete/public/js/app.js
+++ b/examples/transfer-files/complete/public/js/app.js
@@ -14,6 +14,9 @@ const catButton = document.getElementById('cat')
 const $connectPeer = document.querySelector('input.connect-peer')
 const $connectPeerButton = document.querySelector('button.connect-peer')
 
+const $getContent = document.querySelector('input.get-content')
+const $getContentButton = document.querySelector('button.get-content')
+
 let ipfs
 let peerInfo
 
@@ -23,13 +26,6 @@ let peerInfo
 // Cat a file from go-ipfs daemon
 // Add text in browser and cat with go-ipfs
 
-$connectPeerButton.addEventListener('click', () => {
-  console.log('connecting', $connectPeer.value)
-  ipfs.swarm.connect($connectPeer.value, (err, res) => {
-    console.log(err, res)
-  })
-})
-
 // Start IPFS instance
 function start () {
   if (!ipfs) {
@@ -40,29 +36,6 @@ function start () {
      * path - 'dirname' of where the IPFS repo is stored
      * signallAddr - address of the signalling server
      */
-    const options = {
-      path: dirInput.value,
-      signalAddr: signalServerInput.value
-    }
-
-    // Create an IPFS instance
-    window.createNode(options, (err, node) => {
-      if (err) {
-        return onError(err)
-      }
-
-      ipfs = node
-
-      // Get our IPFS instance's info: ID and address
-      ipfs.id().then((id) => {
-        peerInfo = id
-        // Update the UI
-        updateView('ready', ipfs)
-
-        setInterval(updatePeers, 1000)
-        peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
-      })
-    })
   }
 }
 
@@ -150,34 +123,33 @@ const onDrop = (event) => {
   }
 }
 
-let numberOfPeersLastTime = 0
+// let numberOfPeersLastTime = 0
 // Get peers from IPFS and display them
-const updatePeers = () => {
-  ipfs.swarm.peers((err, res) => {
-    if (err) {
-      // TODO ??
-    }
-    // PeerId.toJSON()
-    // https://github.com/libp2p/js-peer-id/blob/3ef704ba32a97a9da26a1f821702cdd3f09c778f/src/index.js#L106
-    // Multiaddr.toString()
-    // https://multiformats.github.io/js-multiaddr/#multiaddrtostring
-    if (res.length === numberOfPeersLastTime) {
-      return
-    }
-    numberOfPeersLastTime = res.length
-    const peersAsHtml = res
-      .map((e, idx) => {
-        return '<div class="peer-item">' +
-          e.addr.toString() +
-          '</div>'
-      })
-      .join('')
-
-    peers.innerHTML = res.length > 0
-      ? '<h2>Connected Peers</h2>' + peersAsHtml
-      : '<h2>Connected Peers</h2><i>Waiting for peers...</i>'
-  })
-}
+// const updatePeers = () => {
+//   ipfs.swarm.peers((err, res) => {
+//     if (err) {
+//       // TODO ??
+//     }
+//     // PeerId.toJSON()
+//     // https://github.com/libp2p/js-peer-id/blob/3ef704ba32a97a9da26a1f821702cdd3f09c778f/src/index.js#L106
+//     // Multiaddr.toString()
+//     // https://multiformats.github.io/js-multiaddr/#multiaddrtostring
+//     if (res.length === numberOfPeersLastTime) {
+//       return
+//     }
+//     numberOfPeersLastTime = res.length
+//     const peersAsHtml = res
+//       .map((e, idx) => {
+//         return '<div class="peer-item">' +
+//           e.addr.toString() +
+//           '</div>'
+//       })
+//       .join('')
+//     peers.innerHTML = res.length > 0
+//       ? '<h2>Connected Peers</h2>' + peersAsHtml
+//       : '<h2>Connected Peers</h2><i>Waiting for peers...</i>'
+//   })
+// }
 
 /* UI functions */
 function initView () {
@@ -190,7 +162,6 @@ function initView () {
   const elements = [errors, details, peers]
   elements.map((e) => initElement(e, 'hidden'))
   errors.innerHTML = ''
-  dirInput.value = '/ipfs/' + new Date().getTime()
   directory.className = 'visible'
   files.className = 'hidden'
   startButton.disabled = false
@@ -226,5 +197,109 @@ function updateView (state, ipfs) {
   }
 }
 
+let contentOfFile = ''
+
+const states = {
+  stopped: () => {
+    console.log('went to stopped state')
+    dirInput.value = '/ipfs/' + new Date().getTime()
+    // promt user to start daemon after looking at data and signal server config
+  },
+  starting: () => {
+    const options = {
+      path: dirInput.value,
+      signalAddr: signalServerInput.value
+    }
+    window.createNode(options, (err, node) => {
+      if (err) {
+        throw err
+      }
+      ipfs = node
+      goToState('running')
+      // Get our IPFS instance's info: ID and address
+      // ipfs.id().then((id) => {
+      //   peerInfo = id
+      //   // Update the UI
+      //   updateView('ready', ipfs)
+
+      //   setInterval(updatePeers, 1000)
+      //   peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
+      // })
+    })
+    console.log('went to starting state')
+  },
+  running: () => {
+    console.log('went to running state')
+    // now everything is running, but we have no peers, please connect to
+    // go-ipfs daemon
+    $connectPeerButton.addEventListener('click', () => {
+      goToState('connecting')
+      ipfs.swarm.connect($connectPeer.value, (err, res) => {
+        console.log(err, res)
+        goToState('connected')
+      })
+    })
+  },
+  connecting: () => {
+    // connecting to the daemon
+  },
+  connected: () => {
+    console.log('went to connected state')
+    // now we're connected! Try adding a hash in go-ipfs and put it here
+    $getContentButton.addEventListener('click', () => {
+      goToState('loading')
+      console.log($getContent.value)
+      // TODO does not work atm
+      // ipfs.files.cat($getContent.value, (err, res) => {
+      //   console.log()
+      //   console.log(err, res)
+      //   let data = []
+      //   window.res = res
+      //   res.on('data', (d) => {
+      //     data.push(d.toString())
+      //   })
+      //   res.on('end', () => {
+      //     console.log(data.join(''))
+      //     goToState('loaded')
+      //   })
+      // })
+      setTimeout(() => {
+        contentOfFile = 'Hello World!'
+        goToState('loaded')
+      }, 1000)
+    })
+  },
+  loading: () => {
+    console.log('went to loading state')
+  },
+  loaded: () => {
+    const $contentBox = document.querySelector('.loaded pre')
+    $contentBox.innerText = contentOfFile
+  }
+}
+
+const initialState = 'stopped'
+let currentState = initialState
+
+const goToState = (stateToGoTo) => {
+  currentState = stateToGoTo
+  // Hide previous states
+  const els = document.querySelectorAll('.state')
+  els.forEach((el) => { el.style.display = 'none' })
+  const el = document.querySelector('.' + currentState)
+  el.style.display = 'block'
+
+  states[currentState]()
+}
+
+document.querySelectorAll('button[data-next-state]').forEach((el) => {
+  el.addEventListener('click', (e) => {
+    const nextState = e.target.getAttribute('data-next-state')
+    goToState(nextState)
+  })
+})
+
+goToState(initialState)
+
 // Start the app
-initView()
+// initView()

From 387ff7ec48fadc6c09b1cdc0157570f63ea9d0c3 Mon Sep 17 00:00:00 2001
From: Richard Littauer <richard.littauer@gmail.com>
Date: Thu, 26 Jan 2017 19:27:36 -0300
Subject: [PATCH 06/10] First pass

---
 examples/transfer-files/README.md | 97 ++++++++++++++++++++++++-------
 1 file changed, 77 insertions(+), 20 deletions(-)

diff --git a/examples/transfer-files/README.md b/examples/transfer-files/README.md
index 2d966cb54c..4a189f9d0f 100644
--- a/examples/transfer-files/README.md
+++ b/examples/transfer-files/README.md
@@ -51,7 +51,7 @@ TODO: Insert final screenshot here
 
 ## Step-by-step instructions
 
-**Instructions:**
+Here's what we are going to be doing, today:
 
 - 1. Set up, install a go-ipfs node in your machine
 - 2. Make your daemons listen on WebSockets
@@ -62,37 +62,85 @@ TODO: Insert final screenshot here
 - 7. Dial to a node using WebSockets (your Desktop ones)
 - 8. Transfer files between all of your nodes, have fun!
 
+Let's go.
 
--------------------------
-> Steps need to be updated once the final thing is finished
+### 1. Set up
 
-### Start a go-ipfs daemon
+You'll need to have an implementation of IPFS running on your machine. Currently, this means either go-ipfs or js-ipfs.
 
-1. Install go-ipfs from master (TODO: link). 
+Installing go-ipfs can be done by installing the binary [here](https://ipfs.io/ipns/dist.ipfs.io/#go-ipfs). Alternatively, you could follow the instructions in the README at [ipfs/go-ipfs](https://github.com/ipfs/go-ipfs).
 
-2. Run `ipfs init`
+Installing js-ipfs requires you to have node and [npm](https://www.npmjs.com). Then, you simply run:
 
-3. Edit your IPFS config file, located at `~/.ipfs/config`
+```sh
+> npm install --global ipfs
+...
+> jsipfs --help
+Commands:
+...
+```
+
+This will alias `jsipfs` on your machine; this is to avoid issues with `go-ipfs` being called `ipfs`.
+
+At this point, you have either js-ipfs or go-ipfs running. Now, initialize it:
+
+```
+> ipfs init
+```
+
+or
 
-4. Add a Websocket listener address to `Addresses.Swarm`. It should look like this after editing:
 ```
-"Addresses": {
-  "API": "/ip4/127.0.0.1/tcp/5001",
-  "Gateway": "/ip4/0.0.0.0/tcp/8080",
-  "Swarm": [
-    "/ip4/0.0.0.0/tcp/4001",
-    "/ip4/0.0.0.0/tcp/9999/ws"
-  ]
-},
+> jsipfs init
 ```
 
-5. Start the go-ipfs daemon with:
+This will set up an `init` file in your home directory.
+
+### 2. Make your daemons listen on WebSockets
+
+At this point, you need to edit your `config` file, the one you just set up with `{js}ipfs init`. It should be in either `~/.jsipfs/config` or `~/.ipfs/config`, depending on whether you're using JS or Go. You can run `cat ~/.jsipfs/config` to see the contents of the JSON file.
+
+Since websockets are currently not stable and are experimental, you'll need to add the ability for your daemon to listen on Websocket addresses. Look into your init file (using `cat`) and find the `Addresses` block:
+
+```json
+  "Addresses": {
+    "Swarm": [
+      "/ip4/0.0.0.0/tcp/4002"
+    ],
+    "API": "/ip4/127.0.0.1/tcp/5002",
+    "Gateway": "/ip4/127.0.0.1/tcp/9090"
+  }
 ```
-ipfs daemon
+
+To make Websockets work, open up the `config` file and add the following entry to your `Swarm` array: `/ip4/0.0.0.0/tcp/9999/ws`. Now, it should look like this: 
+
+
+```json
+  "Addresses": {
+    "Swarm": [
+      "/ip4/0.0.0.0/tcp/4002",
+      "/ip4/0.0.0.0/tcp/9999/ws"
+    ],
+    "API": "/ip4/127.0.0.1/tcp/5002",
+    "Gateway": "/ip4/127.0.0.1/tcp/9090"
+  }
 ```
 
-6. You should see the Websocket address in the output:
+Now it should listen on Websockets. We're ready to...
+
+### 3. Start the WebApp project
+
+Ok. To do this, we'll need to start an IPFS daemon.
+
+```sh
+> ipfs daemon
 ```
+
+(Again, either `jsipfs` or `ipfs` works. I'll stop explaining that from here on out.)
+
+You should see the Websocket address in the output:
+
+```sh
 Initializing daemon...
 Swarm listening on /ip4/127.0.0.1/tcp/4001
 Swarm listening on /ip4/127.0.0.1/tcp/9999/ws
@@ -103,7 +151,16 @@ Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080
 Daemon is ready
 ```
 
-If you see address like `Swarm listening on /ip4/127.0.0.1/tcp/9999/ws`, it means all good!
+It's there in line 5 - see the `/ws`? Good. that means it is listening.
+
+
+### 4. Create the frame for your IPFS enabled app
+### 5. Add and cat a file
+### 6. Use WebRTC to dial between browser nodes
+### 7. Dial to a node using WebSockets (your Desktop ones)
+### 8. Transfer files between all of your nodes, have fun!
+
+--------
 
 ## Start the example
 

From 9d318d0370a345847083011ee3f31b8582075f15 Mon Sep 17 00:00:00 2001
From: Richard Littauer <richard.littauer@gmail.com>
Date: Fri, 27 Jan 2017 13:48:37 -0300
Subject: [PATCH 07/10] Added step 3

---
 examples/transfer-files/README.md | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/examples/transfer-files/README.md b/examples/transfer-files/README.md
index 4a189f9d0f..84ccd01ae9 100644
--- a/examples/transfer-files/README.md
+++ b/examples/transfer-files/README.md
@@ -126,11 +126,7 @@ To make Websockets work, open up the `config` file and add the following entry t
   }
 ```
 
-Now it should listen on Websockets. We're ready to...
-
-### 3. Start the WebApp project
-
-Ok. To do this, we'll need to start an IPFS daemon.
+Now it should listen on Websockets. We're ready to start the daemon.
 
 ```sh
 > ipfs daemon
@@ -153,9 +149,34 @@ Daemon is ready
 
 It's there in line 5 - see the `/ws`? Good. that means it is listening.
 
+### 3. Start the WebApp project
+
+
+Now, you'll need to make sure you are in `js-ipfs/examples/transfer-files/complete`. You'll see a `package.json`: this manifest holds the information for which packages you'll need to install to run the webapp. Let's install them, and then start the project:
+
+```sh
+> npm install
+> npm start
+```
+
+You should see this text:
+
+```sh
+Starting up http-server, serving public
+Available on:
+  http://127.0.0.1:12345
+  http://192.168.1.24:12345
+Hit CTRL-C to stop the server
+```
+
+Go to http://127.0.0.1:12345 in your browser; you're now in the webapp, if all went well.
 
 ### 4. Create the frame for your IPFS enabled app
+
+TODO: Not sure what this means.
+
 ### 5. Add and cat a file
+
 ### 6. Use WebRTC to dial between browser nodes
 ### 7. Dial to a node using WebSockets (your Desktop ones)
 ### 8. Transfer files between all of your nodes, have fun!

From e88a73ad991920fc827ab7a0e493275bd7320398 Mon Sep 17 00:00:00 2001
From: Victor Bjelkholm <victorbjelkholm@gmail.com>
Date: Fri, 27 Jan 2017 20:07:08 +0100
Subject: [PATCH 08/10] docs(example: transfer-files): Improve the UI

---
 .aegir.js                                     |   1 -
 README.md                                     |  24 +-
 examples/basics/index.js                      |   7 +-
 examples/bundle-browserify/README.md          |   2 +-
 examples/transfer-files/complete/.gitignore   |   1 +
 examples/transfer-files/complete/css/app.css  | 248 ++++++++++++++
 .../complete/{public => }/favicon.ico         | Bin
 examples/transfer-files/complete/index.html   |  72 +++++
 .../complete/{public => }/ipfs-logo.svg       |   0
 examples/transfer-files/complete/js/app.js    | 249 ++++++++++++++
 .../transfer-files/complete/js/create-node.js |  41 +++
 examples/transfer-files/complete/package.json |   6 +-
 .../complete/public/css/app.css               | 155 ---------
 .../transfer-files/complete/public/index.html | 139 --------
 .../transfer-files/complete/public/js/app.js  | 305 ------------------
 .../complete/public/js/create-node.js         |  50 ---
 package.json                                  |  15 +-
 src/core/components/bootstrap.js              |   6 +-
 src/core/components/id.js                     |  31 +-
 src/core/components/init.js                   |  15 +-
 src/init-files/default-config-browser.json    |   9 +
 ...t-config.json => default-config-node.json} |  14 +-
 test/browser.js                               |   3 -
 .../{both/test-bitswap.js => bitswap.spec.js} |  37 ++-
 .../test-bootstrap.js => bootstrap.spec.js}   |  20 +-
 test/core/both/index.js                       |  13 -
 test/core/both/test-init.js                   |  59 ----
 test/core/browser-only/index.js               |   6 -
 test/core/browser-only/test-swarm.js          |   1 -
 test/core/browser.js                          |  51 ---
 test/core/init.spec.js                        |  81 +++++
 .../test-block.js => interface/block.js}      |   0
 .../test-config.js => interface/config.js}    |   0
 .../test-files.js => interface/files.js}      |   0
 .../test-generic.js => interface/generic.js}  |   0
 test/core/interface/interface.spec.js         |  17 +
 .../test-object.js => interface/object.js}    |   0
 .../test-pubsub.js => interface/pubsub.js}    |   0
 .../test-swarm.js => interface/swarm.js}      |   0
 test/core/node-only/index.js                  |  36 ---
 test/core/node-only/test-init.js              |  50 ---
 test/core/node.js                             |  26 --
 test/http-api/index.js                        |  15 +-
 .../test-block.js                             |   0
 .../test-config.js                            |   0
 .../test-files.js                             |   0
 .../test-object.js                            |   0
 .../test-pubsub.js                            |   0
 .../test-swarm.js                             |   0
 .../test-bitswap.js                           |   0
 .../test-block.js                             |   0
 .../test-bootstrap.js                         |   0
 .../test-config.js                            |   0
 .../test-id.js                                |   0
 .../test-object.js                            |   0
 .../test-repo.js                              |   0
 .../test-swarm.js                             |   0
 .../test-version.js                           |   0
 .../http-api/{inject => spec}/test-bitswap.js |   0
 test/http-api/{inject => spec}/test-block.js  |   0
 .../{inject => spec}/test-bootstrap.js        |   2 +-
 test/http-api/{inject => spec}/test-config.js |   0
 test/http-api/{inject => spec}/test-files.js  |   0
 test/http-api/{inject => spec}/test-id.js     |   0
 test/http-api/{inject => spec}/test-object.js |   0
 test/http-api/{inject => spec}/test-pubsub.js |   0
 test/http-api/{inject => spec}/test-repo.js   |   0
 test/http-api/{inject => spec}/test-swarm.js  |   0
 .../http-api/{inject => spec}/test-version.js |   0
 test/node.js                                  |   2 +-
 ...repo-browser.js => create-repo-browser.js} |   0
 .../{temp-repo.js => create-repo-node.js}     |   2 +-
 test/utils/factory-core/index.js              |   2 +-
 test/utils/on-and-off.js                      |  19 +-
 test/utils/repo-path.js                       |  10 -
 test/utils/temp-node.js                       |   2 +-
 76 files changed, 833 insertions(+), 1011 deletions(-)
 create mode 100644 examples/transfer-files/complete/.gitignore
 create mode 100644 examples/transfer-files/complete/css/app.css
 rename examples/transfer-files/complete/{public => }/favicon.ico (100%)
 create mode 100644 examples/transfer-files/complete/index.html
 rename examples/transfer-files/complete/{public => }/ipfs-logo.svg (100%)
 create mode 100644 examples/transfer-files/complete/js/app.js
 create mode 100644 examples/transfer-files/complete/js/create-node.js
 delete mode 100644 examples/transfer-files/complete/public/css/app.css
 delete mode 100644 examples/transfer-files/complete/public/index.html
 delete mode 100644 examples/transfer-files/complete/public/js/app.js
 delete mode 100644 examples/transfer-files/complete/public/js/create-node.js
 create mode 100644 src/init-files/default-config-browser.json
 rename src/init-files/{default-config.json => default-config-node.json} (83%)
 delete mode 100644 test/browser.js
 rename test/core/{both/test-bitswap.js => bitswap.spec.js} (90%)
 rename test/core/{both/test-bootstrap.js => bootstrap.spec.js} (86%)
 delete mode 100644 test/core/both/index.js
 delete mode 100644 test/core/both/test-init.js
 delete mode 100644 test/core/browser-only/index.js
 delete mode 100644 test/core/browser-only/test-swarm.js
 delete mode 100644 test/core/browser.js
 create mode 100644 test/core/init.spec.js
 rename test/core/{both/test-block.js => interface/block.js} (100%)
 rename test/core/{both/test-config.js => interface/config.js} (100%)
 rename test/core/{both/test-files.js => interface/files.js} (100%)
 rename test/core/{both/test-generic.js => interface/generic.js} (100%)
 create mode 100644 test/core/interface/interface.spec.js
 rename test/core/{both/test-object.js => interface/object.js} (100%)
 rename test/core/{node-only/test-pubsub.js => interface/pubsub.js} (100%)
 rename test/core/{node-only/test-swarm.js => interface/swarm.js} (100%)
 delete mode 100644 test/core/node-only/index.js
 delete mode 100644 test/core/node-only/test-init.js
 delete mode 100644 test/core/node.js
 rename test/http-api/{interface-ipfs-core-over-ipfs-api => interface}/test-block.js (100%)
 rename test/http-api/{interface-ipfs-core-over-ipfs-api => interface}/test-config.js (100%)
 rename test/http-api/{interface-ipfs-core-over-ipfs-api => interface}/test-files.js (100%)
 rename test/http-api/{interface-ipfs-core-over-ipfs-api => interface}/test-object.js (100%)
 rename test/http-api/{interface-ipfs-core-over-ipfs-api => interface}/test-pubsub.js (100%)
 rename test/http-api/{interface-ipfs-core-over-ipfs-api => interface}/test-swarm.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-bitswap.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-block.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-bootstrap.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-config.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-id.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-object.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-repo.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-swarm.js (100%)
 rename test/http-api/{custom-ipfs-api => over-ipfs-api}/test-version.js (100%)
 rename test/http-api/{inject => spec}/test-bitswap.js (100%)
 rename test/http-api/{inject => spec}/test-block.js (100%)
 rename test/http-api/{inject => spec}/test-bootstrap.js (98%)
 rename test/http-api/{inject => spec}/test-config.js (100%)
 rename test/http-api/{inject => spec}/test-files.js (100%)
 rename test/http-api/{inject => spec}/test-id.js (100%)
 rename test/http-api/{inject => spec}/test-object.js (100%)
 rename test/http-api/{inject => spec}/test-pubsub.js (100%)
 rename test/http-api/{inject => spec}/test-repo.js (100%)
 rename test/http-api/{inject => spec}/test-swarm.js (100%)
 rename test/http-api/{inject => spec}/test-version.js (100%)
 rename test/utils/{temp-repo-browser.js => create-repo-browser.js} (100%)
 rename test/utils/{temp-repo.js => create-repo-node.js} (93%)
 delete mode 100644 test/utils/repo-path.js

diff --git a/.aegir.js b/.aegir.js
index 92764bc6c3..06490c5f1f 100644
--- a/.aegir.js
+++ b/.aegir.js
@@ -10,4 +10,3 @@ module.exports = {
     }]
   }
 }
-
diff --git a/README.md b/README.md
index bd916c09da..4fb81385bd 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@
   </a>
   <br>
   <a href="https://waffle.io/ipfs/js-ipfs">
-    <img src="https://img.shields.io/badge/pm-waffle-yellow.svg?style=flat-square" />
+    <img src="https://img.shields.io/badge/pm-waffle-blue.svg?style=flat-square" />
   </a>
   <a href="https://github.com/ipfs/interface-ipfs-core">
     <img src="https://img.shields.io/badge/interface--ipfs--core-API%20Docs-blue.svg">
@@ -137,7 +137,7 @@ The CLI is available by using the command `jsipfs` in your terminal. This is ali
 
 ### Use in the browser with browserify, webpack or any bundler
 
-Simply require it as you would do for Node.js, but when transpiling+minifying with your bundler, make sure to swap `zlib` with a full replacement for the browser: `zlib: 'browserify-zlib-next'`. We have submited PR's to browserify and WebPack to make this as part of the standard node libraries that are transpiled, you can follow this development in [browserify](https://github.com/substack/node-browserify/issues/1672), [webpack](https://github.com/webpack/node-libs-browser/issues/51).
+Simply require it as you would do for Node.js, but when transpiling+minifying with your bundler, make sure to swap `zlib` with a full replacement for the browser: `zlib: 'browserify-zlib-next'`. We have submitted PR's to browserify and WebPack to make this as part of the standard node libraries that are transpiled, you can follow this development in [browserify](https://github.com/substack/node-browserify/issues/1672), [webpack](https://github.com/webpack/node-libs-browser/issues/51).
 
 You can also find examples of how to do this bundling at: `https://github.com/ipfs/js-ipfs/tree/master/examples`
 
@@ -151,10 +151,10 @@ The last published version of the package become [available for download](https:
 
 
 ```html
-<!-- loading the minified version -->
+<!-- loading the minified version -->
 <script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
 
-<!-- loading the human-readable (not minified) version -->
+<!-- loading the human-readable (not minified) version -->
 <script src="https://unpkg.com/ipfs/dist/index.js"></script>
 ```
 
@@ -162,7 +162,7 @@ The last published version of the package become [available for download](https:
 
 ### CLI
 
-The `jsipfs` CLI, available when `js-ipfs` is installed globably, follows(should, it is a WIP) the same interface defined by `go-ipfs`, you can always use the `help` command for help menus.
+The `jsipfs` CLI, available when `js-ipfs` is installed globally, follows(should, it is a WIP) the same interface defined by `go-ipfs`, you can always use the `help` command for help menus.
 
 ```sh
 # Install js-ipfs globally
@@ -285,7 +285,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
 
 ## Development
 
-### Clone and install dependnecies
+### Clone and install dependencies
 
 ```sh
 > git clone https://github.com/ipfs/js-ipfs.git
@@ -297,7 +297,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
 
 ```sh
 # run all the unit tsts
-> npm test 
+> npm test
 
 # run just IPFS tests in Node.js
 > npm run test:unit:node:core
@@ -319,7 +319,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
 
 ```sh
 # run all the interop tsts
-> npm run test:interop 
+> npm run test:interop
 
 # run just IPFS interop tests in Node.js using one go-ipfs daemon and one js-ipfs daemon
 > npm run test:interop:node
@@ -332,7 +332,7 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
 
 ```sh
 # run all the interop tsts
-> npm run test:benchmark 
+> npm run test:benchmark
 
 # run just IPFS benchmarks in Node.js
 > npm run test:benchmark:node
@@ -373,11 +373,11 @@ Every IPFS instance also exposes the libp2p API at `ipfs.libp2p`. The formal int
 > tree src -L 2
 src                 # Main source code folder
 ├── cli             # Implementation of the IPFS CLI
-│   └── ...
+│   └── ...
 ├── http-api        # The HTTP-API implementation of IPFS as defined by http-api-spec
 ├── core            # IPFS implementation, the core (what gets loaded in browser)
-│   ├── components  # Each of IPFS subcomponent
-│   └── ...
+│   ├── components  # Each of IPFS subcomponent
+│   └── ...
 └── ...
 ```
 
diff --git a/examples/basics/index.js b/examples/basics/index.js
index cb127f3e33..a3c9c1c2ee 100644
--- a/examples/basics/index.js
+++ b/examples/basics/index.js
@@ -2,14 +2,17 @@
 
 const fs = require('fs')
 const os = require('os')
+const path = require('path')
 const series = require('async/series')
-const IPFS = require('../../src/core') // replace this by line below
+const IPFS = require('../../src/core')
+// replace this by line below if you are using ipfs as a dependency of your
+// project
 // const IPFS = require('ipfs')
 
 /*
  * Create a new IPFS instance, using default repo (fs) on default path (~/.ipfs)
  */
-const node = new IPFS(os.tmpDir() + '/' + new Date().toString())
+const node = new IPFS(path.join(os.tmpDir() + '/' + new Date().toString()))
 
 const fileToAdd = {
   path: 'hello.txt',
diff --git a/examples/bundle-browserify/README.md b/examples/bundle-browserify/README.md
index e3da1419d6..86d4cb92bf 100644
--- a/examples/bundle-browserify/README.md
+++ b/examples/bundle-browserify/README.md
@@ -19,4 +19,4 @@ You should see the following:
 ## Special note
 
 In order to use js-ipfs in the browser, you need to replace the default `zlib` library by `browserify-zlib-next`, a full implementation of the native `zlib` package, full in Node.js. 
-See the package.json to learn how to do this and avoid this pitfall. More context on: https://github.com/ipfs/js-ipfs#use-in-the-browser-with-browserify-webpack-or-any-bundler
+See the package.json to learn how to do this and avoid this pitfall (see the `browser` key). More context on: https://github.com/ipfs/js-ipfs#use-in-the-browser-with-browserify-webpack-or-any-bundler
diff --git a/examples/transfer-files/complete/.gitignore b/examples/transfer-files/complete/.gitignore
new file mode 100644
index 0000000000..257a410ec0
--- /dev/null
+++ b/examples/transfer-files/complete/.gitignore
@@ -0,0 +1 @@
+js/ipfs.js
diff --git a/examples/transfer-files/complete/css/app.css b/examples/transfer-files/complete/css/app.css
new file mode 100644
index 0000000000..c6deb4e2c8
--- /dev/null
+++ b/examples/transfer-files/complete/css/app.css
@@ -0,0 +1,248 @@
+body {
+  height: 100vh;
+  font-family: sans-serif;
+  color: white;
+  background: linear-gradient(to bottom,#041727 0%,#062b3f 100%);
+  pointer-events: auto;
+}
+
+.dragover-popup {
+  position: absolute;
+  top: 10px; right: 10px; bottom: 10px; left: 10px;
+  background-color: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  padding-top: 30%;
+  display: none;
+  pointer-events: none;
+}
+
+.wrapper {
+  width: 900px;
+  margin: 0 auto;
+  /* filter: blur(5px); */
+}
+
+.header {
+  text-align: center;
+  /* filter: blur(5px); */
+}
+
+#filesStatus {
+  padding: 10px;
+}
+
+h1, h2, h3 {
+  margin: 0px;
+}
+
+h1 {
+  font-size: 2em;
+  font-weight: 300;
+}
+
+h2 {
+  font-size: 1.25em;
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 1.0em;
+  font-weight: 700;
+}
+
+
+.header h1 {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.hidden {
+  display: none;
+}
+
+.visible {
+  display: inherit;
+  font-size: 0.8em;
+}
+
+.error {
+  font-style: italic;
+  color: red;
+}
+
+.ipfs {
+  padding-bottom: 50px;
+  border-radius: 1px;
+  box-sizing: border-box;
+}
+
+#details {
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+ul {
+  margin: 0px; padding: 0px;
+  list-style: none;
+  font-size: 11px;
+}
+
+ul li {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 9px;
+  word-wrap: break-word;
+}
+
+button {
+  background-color: rgba(0,0,0,0.2);
+  color: #6acad1;
+  border: 2px solid #6acad1;
+  font-size: 15px;
+  padding: 10px 25px 10px 25px;
+  border-radius: 2px;
+  margin: 5px;
+}
+
+.multihash-wrapper input {
+  width: 80%;
+  float: left;
+  height: 40px;
+  margin-left: 1%;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+.multihash-wrapper button {
+  width: 17%;
+  float: left;
+  height: 40px;
+  margin: 0px;
+  margin-left: 1%;
+}
+
+.file-list {
+  display: block;
+  margin: 10px;
+}
+
+.file-list a {
+  font-size: 16px;
+  color: white;
+  display: block;
+}
+
+button.connect-peer {
+  margin: 0px;
+  margin-top: 2px;
+  width: 100%;
+}
+
+button:hover {
+  color: white;
+  border: 2px solid white;
+  cursor: pointer;
+}
+
+.address {
+  font-family: monospace
+}
+
+button:disabled {
+  opacity: 0.2;
+}
+input:disabled {
+  opacity: 0.2;
+}
+.disabled {
+  opacity: 0.2;
+}
+
+input {
+  width: 100%;
+  border: 2px solid #444;
+  color: black;
+  padding: 7px;
+  border-radius: 2px;
+  font-size: 9px;
+}
+
+textarea, input, button {
+  outline: none;
+}
+
+button:focus, input:focus {
+  outline: 3px solid #6acad1;
+}
+
+.picture {
+  margin-top: 1em;
+  width: 100%;
+  background-color: rgba(196, 196, 196, 0.1);
+  /*padding: 0.25em;*/
+  /*font-size: 1.2em;*/
+}
+
+.settings {
+  padding: 15px;
+}
+
+.left {
+  box-sizing: border-box;
+  /* background-color: red; */
+}
+
+.right {
+  /* background-color: green; */
+}
+
+.setting-item {
+  margin-top: 20px;
+}
+
+.left, .right {
+  width: 48%;
+  float: left;
+  background-color: rgba(255, 255, 255, 0.05);
+  box-sizing: border-box;
+  margin: 1%;
+  padding: 10px;
+}
+
+
+
+#files {
+  padding-top: 10px;
+  background-color: rgba(255, 255, 255, 0.05);
+  margin: 1%;
+}
+
+.left.centered {
+  float: none;
+  margin: 0px auto;
+  text-align: center;
+}
+
+.clear {
+  clear: both;
+}
+
+.note {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 10px;
+  font-size: 10px;
+}
+
+#peers i {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 14px;
+}
+
+.error {
+  font-size: 18px;
+}
diff --git a/examples/transfer-files/complete/public/favicon.ico b/examples/transfer-files/complete/favicon.ico
similarity index 100%
rename from examples/transfer-files/complete/public/favicon.ico
rename to examples/transfer-files/complete/favicon.ico
diff --git a/examples/transfer-files/complete/index.html b/examples/transfer-files/complete/index.html
new file mode 100644
index 0000000000..1be2122b8c
--- /dev/null
+++ b/examples/transfer-files/complete/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="css/app.css">
+    <title>IPFS - Transfer Files</title>
+  </head>
+  <body ondragover="event.preventDefault()">
+    <div class="dragover-popup">
+      <h1>Drop file to upload</h1>
+    </div>
+    <div class="header">
+      <a href="https://ipfs.io" target="_blank">
+        <img src="ipfs-logo.svg" height="32" id="logo">
+      </a>
+      <h1>Transfer Files</h1>
+      <div class="note">
+        <i>P.S. drop files anywhere to upload them!</i>
+      </div>
+    </div>
+    <div class="wrapper">
+      <div id="ipfs" class="ipfs" >
+        <div class="left">
+          <div id="buttons" class="buttons">
+            <button id="start" type="button">Start IPFS</button>
+            <button id="stop" disabled type="button">Stop IPFS</button>
+          </div>
+          <div id="details" class="disabled">
+            <h2>Your daemon</h2>
+            <h3>ID</h3>
+            <pre class='id-container'>N/A</pre>
+            <h3>Addresses</h3>
+            <ul class='addresses-container'>
+              <li>Not yet online</li>
+            </ul>
+          </div>
+        </div>
+        <div class="right">
+          <div id="peers" class="disabled">
+            <h2>Peers</h2>
+          </div>
+          <div>
+            <input disabled type="text" class="connect-peer" placeholder="Multiaddr"/>
+            <button disabled class="connect-peer">Connect to peer</button>
+          </div>
+        </div>
+        <div class="clear"></div>
+        <div id="files">
+          <div class="multihash-wrapper">
+            <input disabled id="multihash" type="text" placeholder="Multihash"/>
+            <button disabled id="cat" type="button">Fetch File</button>
+            <div class="clear"></div>
+          </div>
+          <div class="file-list"></div>
+          <div id="filesStatus"></div>
+        </div>
+        <pre id="errors" class="hidden"></pre>
+      </div>
+    </div>
+    <!-- The IPFS node module -->
+    <script src="js/ipfs.js"></script>
+    <!--
+      The latest js-ipfs published version is also available
+      through the unpkg CDN, you can use it directly 
+    <script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
+    -->
+    <!-- Helper script to spawn our IPFS node instance -->
+    <script src="js/create-node.js"></script>
+    <!-- Our application -->
+    <script src="js/app.js"></script>
+  </body>
+</html>
diff --git a/examples/transfer-files/complete/public/ipfs-logo.svg b/examples/transfer-files/complete/ipfs-logo.svg
similarity index 100%
rename from examples/transfer-files/complete/public/ipfs-logo.svg
rename to examples/transfer-files/complete/ipfs-logo.svg
diff --git a/examples/transfer-files/complete/js/app.js b/examples/transfer-files/complete/js/app.js
new file mode 100644
index 0000000000..9dbe31b0dd
--- /dev/null
+++ b/examples/transfer-files/complete/js/app.js
@@ -0,0 +1,249 @@
+const $startButton = document.querySelector('#start')
+const $stopButton = document.querySelector('#stop')
+const $peers = document.querySelector('#peers')
+const $errors = document.querySelector('#errors')
+const $filesStatus = document.querySelector('#filesStatus')
+const $multihashInput = document.querySelector('#multihash')
+const $catButton = document.querySelector('#cat')
+const $connectPeer = document.querySelector('input.connect-peer')
+const $connectPeerButton = document.querySelector('button.connect-peer')
+const $dragoverPopup = document.querySelector('.dragover-popup')
+const $wrapper = document.querySelector('.wrapper')
+const $header = document.querySelector('.header')
+const $body = document.querySelector('body')
+const $idContainer = document.querySelector('.id-container')
+const $addressesContainer = document.querySelector('.addresses-container')
+const $details = document.querySelector('#details')
+const $allDisabledButtons = document.querySelectorAll('button:disabled')
+const $allDisabledInputs = document.querySelectorAll('input:disabled')
+
+let ipfs
+let peerInfo
+
+// TODO groups to refactor into
+// ipfs stuff
+//  start node
+//  get details
+//  get peers
+//  connect to peer
+//  get contents of hash
+//  add files to ipfs
+// creating html stuff
+//  list of peers / peers state
+//  add file to download list
+//  error handling
+//  show ipfs id
+//  show ipfs addressess
+// drag-and-drop
+// event listeners
+// states
+
+function start () {
+  if (!ipfs) {
+    updateView('starting', ipfs)
+    window.createNode((err, node) => {
+      if (err) {
+        return onError(err)
+      }
+      ipfs = node
+      ipfs.id().then((id) => {
+        peerInfo = id
+        updateView('ready', ipfs)
+        setInterval(updatePeers, 1000)
+        $peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
+      })
+    })
+  }
+}
+
+const stop = () => {
+  window.location.href = window.location.href
+}
+
+const connectPeer = (e) => {
+  e.target.disabled = true
+  // Connect directly to a peer via it's multiaddr
+  ipfs.swarm.connect($connectPeer.value, (err) => {
+    console.log(err)
+    if (err) return onError(err)
+    $connectPeer.value = ''
+    setTimeout(() => {
+      e.target.disabled = false
+    }, 500)
+  })
+}
+
+const catFile = () => {
+  const multihash = $multihashInput.value
+  $multihashInput.value = ''
+  $errors.className = 'hidden'
+  if (multihash) {
+    // Get a file or many files
+    ipfs.files.get(multihash, (err, stream) => {
+      if (err) onError(err)
+      console.log(stream)
+      // .get gives us a stream of files
+      stream.on('data', (file) => {
+        console.log(file)
+        const buf = []
+        if (file.content) {
+          // once we get a file, we also want to read the data for that file
+          file.content.on('data', (data) => {
+            console.log('file got data')
+            buf.push(data)
+          })
+          file.content.on('end', (data) => {
+            console.log('file got end')
+            console.log(buf)
+          })
+          // TODO currently, can't grab content from file either in get...
+          const downloadContent = window.btoa(window.unescape(window.encodeURIComponent('content of file')))
+          const downloadLink = 'data:application/octet-stream;charset=utf-8;base64,' + downloadContent
+          const listItem = document.createElement('div')
+          const link = document.createElement('a')
+          link.setAttribute('href', downloadLink)
+          link.setAttribute('download', multihash)
+          const date = (new Date()).toLocaleTimeString()
+
+          link.innerText = date + ' - ' + multihash + ' - Size: ' + file.size
+          const fileList = document.querySelector('.file-list')
+
+          listItem.appendChild(link)
+          fileList.insertBefore(listItem, fileList.firstChild)
+        }
+      })
+      stream.on('end', () => {
+        console.log('no more files')
+      })
+    })
+  }
+}
+
+const onError = (e) => {
+  console.error(e)
+  let msg = 'An error occured, check the dev console'
+  if (e.stack !== undefined) {
+    msg = e.stack
+  } else if (typeof e === 'string') {
+    msg = e
+  }
+  $errors.innerHTML = '<span class="error">' + msg + '</span>'
+  $errors.className = 'error visible'
+}
+window.onerror = onError
+
+const onDragEnter = () => {
+  $dragoverPopup.style.display = 'block'
+  $wrapper.style.filter = 'blur(5px)'
+  $header.style.filter = 'blur(5px)'
+}
+
+const onDragExit = () => {
+  console.log('drag left')
+  $dragoverPopup.style.display = 'none'
+  $wrapper.style.filter = ''
+  $header.style.filter = ''
+}
+
+// Handle file drop
+const onDrop = (event) => {
+  onDragExit()
+  $errors.className = 'hidden'
+  event.preventDefault()
+  var dt = event.dataTransfer
+  var files = dt.files
+  const readFileContents = (file) => {
+    return new Promise((resolve) => {
+      const reader = new window.FileReader()
+      reader.onload = (event) => resolve(event.target.result)
+      reader.readAsArrayBuffer(file)
+    })
+  }
+
+  // TODO: Promise reduce?
+  for (var i = 0; i < files.length; i++) {
+    const file = files[i]
+    console.log('Add file', file.name, file.size)
+    readFileContents(file)
+      .then((buffer) => {
+        return ipfs.files.add([{
+          path: file.name,
+          content: new ipfs.types.Buffer(buffer)
+        }])
+      })
+      .then((files) => {
+        console.log('Files added', files)
+        $multihashInput.value = files[0].hash
+        $filesStatus.innerHTML = files
+          .map((e) => `Added ${e.path} as ${e.hash}`)
+          .join('<br>')
+      })
+      .catch(onError)
+  }
+}
+
+// Get peers from IPFS and display them
+let numberOfPeersLastTime = 0
+const updatePeers = () => {
+  // Once in a while, we need to refresh our list of peers in the UI
+  // .swarm.peers returns an array with all our currently connected peer
+  ipfs.swarm.peers((err, res) => {
+    if (err) onError(err)
+    if (numberOfPeersLastTime !== res.length) {
+      const peersAsHtml = res.map((p) => p.addr.toString())
+        .map((p) => {
+          return '<li>' + p + '</li>'
+        }).join()
+
+      $peers.innerHTML = res.length > 0
+        ? '<h2>Remote Peers</h2><ul>' + peersAsHtml + '</ul>'
+        : '<h2>Remote Peers</h2><i>Waiting for peers...</i>'
+    }
+    numberOfPeersLastTime = res.length
+  })
+}
+
+function setupEventListeners () {
+  $body.addEventListener('dragenter', onDragEnter)
+  $body.addEventListener('drop', onDrop)
+  // TODO should work to hide the dragover-popup but doesn't...
+  $body.addEventListener('dragleave', onDragExit)
+
+  $startButton.addEventListener('click', start)
+  $stopButton.addEventListener('click', stop)
+  $catButton.addEventListener('click', catFile)
+  $connectPeerButton.addEventListener('click', connectPeer)
+}
+
+const states = {
+  ready: () => {
+    const addressesHtml = peerInfo.addresses.map((address) => {
+      return '<li><span class="address">' + address + '</span></li>'
+    }).join('')
+    $idContainer.innerText = peerInfo.id
+    $addressesContainer.innerHTML = addressesHtml
+    $allDisabledButtons.forEach(b => { b.disabled = false })
+    $allDisabledInputs.forEach(b => { b.disabled = false })
+    $peers.className = ''
+    $details.className = ''
+    $stopButton.disabled = false
+    $startButton.disabled = true
+  },
+  starting: () => {
+    $startButton.disabled = true
+  }
+}
+
+function updateView (state, ipfs) {
+  if (states[state] !== undefined) {
+    states[state]()
+  } else {
+    throw new Error('Could not find state "' + state + '"')
+  }
+}
+
+const startApplication = () => {
+  setupEventListeners()
+}
+
+startApplication()
diff --git a/examples/transfer-files/complete/js/create-node.js b/examples/transfer-files/complete/js/create-node.js
new file mode 100644
index 0000000000..899c801a8c
--- /dev/null
+++ b/examples/transfer-files/complete/js/create-node.js
@@ -0,0 +1,41 @@
+'use strict'
+
+window.createNode = (callback) => {
+  // Create a new repository for IPFS in a random path always
+  const repoPath = '/tmp/ipfs' + Math.random()
+  const node = new window.Ipfs(repoPath)
+
+  // Initialize our repository with no extra files
+  node.init({ emptyRepo: true }, updateConfig)
+
+  function updateConfig (err) {
+    if (err) return callback(err)
+
+    // Retrieve the initialized default configuration
+    node.config.get((err, config) => {
+      if (err) return callback(err)
+
+      // Add our webrtc-star address so we can find other peers easily
+      const signalDomain = 'star-signal.cloud.ipfs.team'
+      const wstarMultiaddr = `/libp2p-webrtc-star/dns/${signalDomain}/wss/ipfs/${config.Identity.PeerID}`
+      config.Addresses.Swarm = config.Addresses.Swarm.concat([ wstarMultiaddr ])
+
+      // Set the new configuration
+      node.config.replace(config, bootNode)
+    })
+  }
+
+  function bootNode (err) {
+    if (err) return callback(err)
+
+    node.load((err) => {
+      if (err) return callback(err)
+
+      // Actually start all the services and start ipfs
+      node.goOnline((err) => {
+        if (err) return callback(err)
+        callback(null, node)
+      })
+    })
+  }
+}
diff --git a/examples/transfer-files/complete/package.json b/examples/transfer-files/complete/package.json
index 959558ba92..828b227cc1 100644
--- a/examples/transfer-files/complete/package.json
+++ b/examples/transfer-files/complete/package.json
@@ -2,9 +2,9 @@
   "name": "transfer-files",
   "version": "1.0.0",
   "scripts": {
-    "check-bundle": "test -f ../../../dist/index.js && npm run copy-bundle || echo \"js-ipfs dist file not found, go up two dirs and run 'npm run build' first\"",
-    "copy-bundle": "cp ../../../dist/index.js ./public/js/ipfs.js",
-    "serve": "http-server -c-1 -p 12345 public",
+    "check-bundle": "test -f ../../../dist/index.js && npm run copy-bundle || (echo \"js-ipfs dist file not found, go up two dirs and run 'npm run build' first\" && exit 1)",
+    "copy-bundle": "cp ../../../dist/index.js ./js/ipfs.js",
+    "serve": "http-server -c-1 -p 12345",
     "start": "npm run check-bundle && npm run serve"
   },
   "license": "MIT",
diff --git a/examples/transfer-files/complete/public/css/app.css b/examples/transfer-files/complete/public/css/app.css
deleted file mode 100644
index 8b31a469ab..0000000000
--- a/examples/transfer-files/complete/public/css/app.css
+++ /dev/null
@@ -1,155 +0,0 @@
-body {
-  height: 100vh;
-  font-family: sans-serif;
-  color: white;
-  background: linear-gradient(to bottom,#041727 0%,#062b3f 100%);
-}
-
-.id {
-  margin-top: 30px;
-  font-size: 14px;
-}
-
-.id strong {
-  font-size: 17px;
-}
-
-#restart {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-}
-
-.center {
-  text-align: center;
-}
-
-input {
-  margin-right: 1em;  
-}
-
-.hidden {
-  display: none;
-}
-
-.visible {
-  display: inherit;
-  font-size: 0.8em;
-}
-
-.error {
-  font-style: italic;
-  color: red;
-}
-
-.wrapper {
-  position: relative;
-  margin: 50px auto;
-	width: 1020px;
-}
-
-.box {
-  width: 500px;
-  padding: 50px;
-  background-color: rgba(255, 255, 255, 0.05);
-  border-radius: 1px;
-  text-align: center;
-	float: left;
-	margin: 5px;
-	box-sizing: border-box;
-}
-
-.introduction {
-  width: 70%;
-  margin: 0px auto;
-}
-
-.on-off-button {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-}
-
-#directory .group {
-	margin: 30px;
-}
-
-label {
-  font-weight: bolder;
-  display: block;
-}
-
-textarea, input, button {
-  outline: none;
-}
-
-button:focus, input:focus {
-  outline: 5px solid #6acad1;
-}
-
-#peers {
-  margin: 10px;
-  text-align: left;
-  font-size: 14px;
-  word-break: break-all;
-}
-
-.peer-item {
-  margin-bottom: 15px;
-}
-
-#logo-link {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  width: 32px;
-  overflow: hidden;
-}
-
-.button {
-  background-color: rgba(0,0,0,0.2);
-  color: #6acad1;
-  border: 2px solid #6acad1;
-  font-size: 15px;
-  padding: 10px 25px 10px 25px;
-  border-radius: 2px;
-}
-
-button:hover {
-  color: white;
-  border: 2px solid white;
-  cursor: pointer;
-}
-
-input {
-  border: 2px solid #444;
-  color: black;
-  padding: 10px;
-  border-radius: 2px;
-  font-family: monospace;
-}
-
-#directory input {
-  width: 70%;
-  font-size: 16px;
-}
-
-.group {
-  vertical-align: middle;
-  margin-top: 15px;
-  text-align: center;
-}
-
-.group-item {
-  display: block;
-  text-align: center;
-  margin-top: 10px;
-}
-
-.state {
-  display: none;
-}
-
-.state.stopped {
-  display: block;
-}
diff --git a/examples/transfer-files/complete/public/index.html b/examples/transfer-files/complete/public/index.html
deleted file mode 100644
index 556b7b4bf2..0000000000
--- a/examples/transfer-files/complete/public/index.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="css/app.css">
-		<title>IPFS - Transfer Files Example</title>
-  </head>
-  <body>
-    <div class="header">
-      <a href="https://ipfs.io" target="_blank" id="logo-link">
-        <img src="ipfs-logo.svg" height="32" id="logo">
-      </a>
-      <button id="restart" class="button" type="button" onclick="window.location.href = window.location.href">Start from the beginning</button>
-    </div>
-		<div class="wrapper">
-			<div class="box">
-				<div class="stopped state">
-					<div class="introduction">
-						<p>
-							Here you can configure where to keep your IPFS configuration
-							and which signaling server to use.
-						</p>
-						<p>
-							When you're ready, click "Go Online" to start the IPFS daemon
-							in the background
-						</p>
-					</div>
-					<div class="group">
-						<div class="group-item">
-							<label for="dir" title="Data directory decides where to store IPFS configuration and blocks inside your browser">Data Directory:</label>
-						</div>
-						<div class="group-item">
-							<input id="dir" title="Data directory decides where to store IPFS configuration and blocks inside your browser" type="text" placeholder="IPFS data directory"/>
-						</div>
-					</div>
-					<div class="group">
-						<div class="group-item">
-							<label for="signalServerInput" title="A signal server helps you connect to other peers">Signal Server:</label>
-						</div>
-						<div class="group-item">
-							<input id="signalServerInput" title="A signal server helps you connect to other peers"type="text" value="star-signal.cloud.ipfs.team"/>
-						</div>
-					</div>
-					<div class="center" style="margin-top: 20px;">
-						<button id="start" class="button" type="button" data-next-state="starting">Go Online</button>
-					</div>
-				</div>
-				<div class="starting state">
-					<p>IPFS daemon is starting</p>
-				</div>
-				<div class="running state">
-					<p>Now the daemon is running and you're connected!</p>
-					<p>Now let's connect to a go-ipfs daemon running on your desktop</p>
-					<div class="group">
-					<div class="group-item">
-						<label for="connect-peer" title="The multiaddr of the go-ipfs daemon will help you to connect to a go-ipfs daemon to resolve content">go-ipfs daemon multiaddr</label>
-					</div>
-					<div class="group-item">
-						<input id="connect-peer" class="connect-peer" type="text" value="/ip4/172.17.11.65/tcp/9999/ws/ipfs/QmbXqqMJufs2fKig7EVcwWQi9SfUMiJet6HUNdH5i1TYZ5">
-					</div>
-					<div class="group-item">
-						<button class="connect-peer button" data-next-state="connecting">Connect</button>
-					</div>
-					</div>
-				</div>
-				<div class="connecting state">
-					<p>Connecting to your go-ipfs daemon</p>
-				</div>
-				<div class="connected state">
-					<p>
-						Now you're connected! Let's look at some content that you've
-						added in go-ipfs
-					</p>
-					<input type="text" class="get-content" value="QmNv8HToVEGG4ZovHDztbhRwcpPQ1L3SjXJNYUGqPkqeEm">
-					<button class="get-content" data-next-state="loading">Get Content</button>
-				</div>
-				<div class="loading state">
-					<p>Loading content</p>
-				</div>
-				<div class="loaded state">
-					<p>And here is your content!</p>
-					<pre></pre>
-				</div>
-			</div>
-			<div class="box">
-				Information about your js-ipfs daemon
-			</div>
-		</div>
-
-    <div class="center hidden">
-      <div id="ipfs" class="wrapper" ondragover="event.preventDefault()">
-        <h1 id="state" class="center">IPFS not running yet</h1>
-        <div>
-          <div id="buttons" class="on-off-button">
-          </div>
-          <div id="directory">
-						<h2>Setup</h2>
-          </div>
-        </div>
-        <div id="details" class="hidden"></div>
-        <div id="peers" class="hidden"></div>
-        <div id="files" class="hidden">
-          <div class="group">
-            <label for="multihash">Mutihash</label>
-            <input id="multihash" type="text" placeholder="Multihash"/>
-            <button id="cat" class="button" type="button">Cat</button>
-          </div>
-          <div class="group">
-            <div class="group-item">
-              <label for="connect-peer">Connect peer</label>
-            </div>
-            <div class="group-item">
-              <input class="connect-peer" type="text" placeholder="Multiaddr: ex /ip4/192.168.1.131/tcp/9999/ws "/>
-            </div>
-            <br />
-            <div class="group-item">
-              <button class="connect-peer button" type="button">Connect</button>
-            </div>
-          </div>
-        </div>
-        <pre id="errors" class="hidden"></pre>
-      </div>
-    </div>
-
-    <!-- The IPFS node module -->
-    <script src="js/ipfs.js"></script>
-    <!--
-      The latest js-ipfs published version is also available
-      through the unpkg CDN, you can use it directly 
-    <script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
-    -->
-
-    <!-- Helper script to spawn our IPFS node instance -->
-    <script src="js/create-node.js"></script>
-
-    <!-- Our application -->
-    <script src="js/app.js"></script>
-  </body>
-</html>
diff --git a/examples/transfer-files/complete/public/js/app.js b/examples/transfer-files/complete/public/js/app.js
deleted file mode 100644
index d390eb8d56..0000000000
--- a/examples/transfer-files/complete/public/js/app.js
+++ /dev/null
@@ -1,305 +0,0 @@
-const rootElement = document.getElementById('ipfs')
-const startButton = document.getElementById('start')
-const output = document.getElementById('state')
-const details = document.getElementById('details')
-const peers = document.getElementById('peers')
-const errors = document.getElementById('errors')
-const directory = document.getElementById('directory')
-const dirInput = document.getElementById('dir')
-const signalServerInput = document.getElementById('signalServerInput')
-const files = document.getElementById('files')
-const multihashInput = document.getElementById('multihash')
-const catButton = document.getElementById('cat')
-
-const $connectPeer = document.querySelector('input.connect-peer')
-const $connectPeerButton = document.querySelector('button.connect-peer')
-
-const $getContent = document.querySelector('input.get-content')
-const $getContentButton = document.querySelector('button.get-content')
-
-let ipfs
-let peerInfo
-
-// See signal and data-directory option
-// Click start ipfs daemon
-// Connect to go-ipfs daemon
-// Cat a file from go-ipfs daemon
-// Add text in browser and cat with go-ipfs
-
-// Start IPFS instance
-function start () {
-  if (!ipfs) {
-    // Update the UI with initial settings
-    updateView('starting', ipfs)
-
-    /*
-     * path - 'dirname' of where the IPFS repo is stored
-     * signallAddr - address of the signalling server
-     */
-  }
-}
-
-// Stop IPFS instance
-// const stop = () => {
-//   if (ipfs) {
-//     if (pollPeersTimer) {
-//       clearInterval(pollPeersTimer)
-//     }
-//     ipfs.goOffline()
-//     ipfs = null
-//     updateView('stopped', ipfs)
-//   }
-// }
-
-// Fetch file contents from IPFS and display it
-const catFile = () => {
-  // Get the hash to cat from the input field
-  const multihash = multihashInput.value
-
-  // Update UI
-  errors.className = 'hidden'
-
-  // Get the file from IPFS
-  if (multihash) {
-    // IPFS.files.cat()
-    // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfscatmultihash-callback
-    ipfs.files.cat(multihash)
-      .then((stream) => {
-        // Buffer all contents of the file as text
-        // and once buffered, create a blob for the picture
-        let buf = []
-        stream.on('data', (d) => buf.push(d))
-        stream.on('end', () => {
-          console.log(buf.join(''))
-          // const blob = new window.Blob(buf)
-          // picture.src = window.URL.createObjectURL(blob)
-        })
-      })
-      .catch(onError)
-  }
-}
-
-// Display an error
-const onError = (e) => {
-  console.error(e)
-  errors.innerHTML = "<br/><span class='error'>' + e.stack + '</span>"
-  errors.className = 'error visible'
-}
-
-// Handle file drop
-const onDrop = (event) => {
-  errors.className = 'hidden'
-
-  event.preventDefault()
-  var dt = event.dataTransfer
-  var files = dt.files
-
-  const readFileContents = (file) => {
-    return new Promise((resolve) => {
-      const reader = new window.FileReader()
-      reader.onload = (event) => resolve(event.target.result)
-      reader.readAsArrayBuffer(file)
-    })
-  }
-
-  // TODO: Promise reduce?
-  for (var i = 0; i < files.length; i++) {
-    const file = files[i]
-    console.log('Add file', file.name, file.size)
-    readFileContents(file)
-      .then((buffer) => {
-        // IPFS.files.add()
-        // https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#javascript---ipfsfilesadddata-options-callback
-        return ipfs.files.add([{
-          path: file.name,
-          content: new ipfs.types.Buffer(buffer)
-        }])
-      })
-      .then((files) => {
-        console.log('Files added', files)
-        multihashInput.value = files[0].hash
-      })
-      .catch(onError)
-  }
-}
-
-// let numberOfPeersLastTime = 0
-// Get peers from IPFS and display them
-// const updatePeers = () => {
-//   ipfs.swarm.peers((err, res) => {
-//     if (err) {
-//       // TODO ??
-//     }
-//     // PeerId.toJSON()
-//     // https://github.com/libp2p/js-peer-id/blob/3ef704ba32a97a9da26a1f821702cdd3f09c778f/src/index.js#L106
-//     // Multiaddr.toString()
-//     // https://multiformats.github.io/js-multiaddr/#multiaddrtostring
-//     if (res.length === numberOfPeersLastTime) {
-//       return
-//     }
-//     numberOfPeersLastTime = res.length
-//     const peersAsHtml = res
-//       .map((e, idx) => {
-//         return '<div class="peer-item">' +
-//           e.addr.toString() +
-//           '</div>'
-//       })
-//       .join('')
-//     peers.innerHTML = res.length > 0
-//       ? '<h2>Connected Peers</h2>' + peersAsHtml
-//       : '<h2>Connected Peers</h2><i>Waiting for peers...</i>'
-//   })
-// }
-
-/* UI functions */
-function initView () {
-  const initElement = (e, className) => {
-    e.innerHTML = ''
-    e.className = className
-  }
-
-  // Initial view
-  const elements = [errors, details, peers]
-  elements.map((e) => initElement(e, 'hidden'))
-  errors.innerHTML = ''
-  directory.className = 'visible'
-  files.className = 'hidden'
-  startButton.disabled = false
-  multihashInput.value = null
-  // Remove old event listeners
-  rootElement.removeEventListener('drop', onDrop)
-  startButton.removeEventListener('click', start)
-  catButton.removeEventListener('click', catFile)
-  // Setup event listeners for interaction
-  rootElement.addEventListener('drop', onDrop)
-  startButton.addEventListener('click', start)
-  catButton.addEventListener('click', catFile)
-}
-
-function updateView (state, ipfs) {
-  if (state === 'ready') {
-    // Set the header to display the current state
-    output.innerHTML = 'IPFS running now'
-    // Display IPFS info
-    details.innerHTML = '<div class="id">' +
-      '<strong>Your ID: </strong><br>' +
-      peerInfo.id + '<br><br>'
-    // Set the file status
-    details.className = 'visible'
-    peers.className = 'visible'
-    files.className = 'visible'
-  } else if (state === 'starting') {
-    output.innerHTML = 'IPFS daemon is starting...'
-    startButton.disabled = true
-    directory.className = 'hidden'
-  } else if (state === 'stopped') {
-    initView()
-  }
-}
-
-let contentOfFile = ''
-
-const states = {
-  stopped: () => {
-    console.log('went to stopped state')
-    dirInput.value = '/ipfs/' + new Date().getTime()
-    // promt user to start daemon after looking at data and signal server config
-  },
-  starting: () => {
-    const options = {
-      path: dirInput.value,
-      signalAddr: signalServerInput.value
-    }
-    window.createNode(options, (err, node) => {
-      if (err) {
-        throw err
-      }
-      ipfs = node
-      goToState('running')
-      // Get our IPFS instance's info: ID and address
-      // ipfs.id().then((id) => {
-      //   peerInfo = id
-      //   // Update the UI
-      //   updateView('ready', ipfs)
-
-      //   setInterval(updatePeers, 1000)
-      //   peers.innerHTML = '<h2>Peers</h2><i>Waiting for peers...</i>'
-      // })
-    })
-    console.log('went to starting state')
-  },
-  running: () => {
-    console.log('went to running state')
-    // now everything is running, but we have no peers, please connect to
-    // go-ipfs daemon
-    $connectPeerButton.addEventListener('click', () => {
-      goToState('connecting')
-      ipfs.swarm.connect($connectPeer.value, (err, res) => {
-        console.log(err, res)
-        goToState('connected')
-      })
-    })
-  },
-  connecting: () => {
-    // connecting to the daemon
-  },
-  connected: () => {
-    console.log('went to connected state')
-    // now we're connected! Try adding a hash in go-ipfs and put it here
-    $getContentButton.addEventListener('click', () => {
-      goToState('loading')
-      console.log($getContent.value)
-      // TODO does not work atm
-      // ipfs.files.cat($getContent.value, (err, res) => {
-      //   console.log()
-      //   console.log(err, res)
-      //   let data = []
-      //   window.res = res
-      //   res.on('data', (d) => {
-      //     data.push(d.toString())
-      //   })
-      //   res.on('end', () => {
-      //     console.log(data.join(''))
-      //     goToState('loaded')
-      //   })
-      // })
-      setTimeout(() => {
-        contentOfFile = 'Hello World!'
-        goToState('loaded')
-      }, 1000)
-    })
-  },
-  loading: () => {
-    console.log('went to loading state')
-  },
-  loaded: () => {
-    const $contentBox = document.querySelector('.loaded pre')
-    $contentBox.innerText = contentOfFile
-  }
-}
-
-const initialState = 'stopped'
-let currentState = initialState
-
-const goToState = (stateToGoTo) => {
-  currentState = stateToGoTo
-  // Hide previous states
-  const els = document.querySelectorAll('.state')
-  els.forEach((el) => { el.style.display = 'none' })
-  const el = document.querySelector('.' + currentState)
-  el.style.display = 'block'
-
-  states[currentState]()
-}
-
-document.querySelectorAll('button[data-next-state]').forEach((el) => {
-  el.addEventListener('click', (e) => {
-    const nextState = e.target.getAttribute('data-next-state')
-    goToState(nextState)
-  })
-})
-
-goToState(initialState)
-
-// Start the app
-// initView()
diff --git a/examples/transfer-files/complete/public/js/create-node.js b/examples/transfer-files/complete/public/js/create-node.js
deleted file mode 100644
index aa8e3356b6..0000000000
--- a/examples/transfer-files/complete/public/js/create-node.js
+++ /dev/null
@@ -1,50 +0,0 @@
-'use strict'
-
-/*
- * Create an IPFS node helper
- */
-window.createNode = (options, callback) => {
-  const repoPath = options.path || '/tmp/ipfs' + Math.random()
-  const node = new window.Ipfs(repoPath)
-
-  node.init({ emptyRepo: true, bits: 2048 }, updateConfig)
-
-  function updateConfig (err) {
-    if (err) {
-      return callback(err)
-    }
-
-    node.config.get((err, config) => {
-      if (err) {
-        return callback(err)
-      }
-
-      const wstarMultiaddr = `/libp2p-webrtc-star/dns4/${options.signalAddr}/wss/ipfs/${config.Identity.PeerID}`
-
-      config.Addresses.Swarm = config.Addresses.Swarm.concat([ wstarMultiaddr ])
-
-      node.config.replace(config, bootNode)
-    })
-  }
-
-  function bootNode (err) {
-    if (err) {
-      return callback(err)
-    }
-
-    node.load((err) => {
-      if (err) {
-        return callback(err)
-      }
-
-      node.goOnline((err) => {
-        if (err) {
-          return callback(err)
-        }
-
-        // console.log('IPFS node is ready')
-        callback(null, node)
-      })
-    })
-  }
-}
diff --git a/package.json b/package.json
index 60a92ffbc8..45bb469298 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ipfs",
-  "version": "0.21.2",
+  "version": "0.21.5",
   "description": "JavaScript implementation of the IPFS specification",
   "bin": {
     "jsipfs": "src/cli/bin.js"
@@ -10,7 +10,7 @@
     "libp2p-ipfs-nodejs": "libp2p-ipfs-browser",
     "./src/core/default-repo.js": "./src/core/default-repo-browser.js",
     "./src/core/components/init-assets.js": false,
-    "./test/utils/temp-repo.js": "./test/utils/temp-repo-browser.js",
+    "./test/utils/create-repo-node.js": "./test/utils/create-repo-browser.js",
     "stream": "readable-stream"
   },
   "go-ipfs": {
@@ -61,7 +61,7 @@
   },
   "homepage": "https://github.com/ipfs/js-ipfs#readme",
   "devDependencies": {
-    "aegir": "^9.3.3",
+    "aegir": "^9.4.0",
     "buffer-loader": "0.0.1",
     "chai": "^3.5.0",
     "delay": "^1.3.1",
@@ -109,8 +109,8 @@
     "isstream": "^0.1.2",
     "libp2p-floodsub": "0.7.1",
     "joi": "^10.2.0",
-    "libp2p-ipfs-nodejs": "^0.17.7",
-    "libp2p-ipfs-browser": "^0.17.6",
+    "libp2p-ipfs-nodejs": "^0.17.8",
+    "libp2p-ipfs-browser": "^0.17.7",
     "lodash.flatmap": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.has": "^4.5.2",
@@ -119,7 +119,7 @@
     "lodash.values": "^4.3.0",
     "mafmt": "^2.1.6",
     "multiaddr": "^2.2.0",
-    "multihashes": "^0.3.1",
+    "multihashes": "^0.3.2",
     "path-exists": "^3.0.0",
     "peer-book": "^0.3.0",
     "peer-id": "^0.8.1",
@@ -145,6 +145,7 @@
     "Andrew de Andrade <andrew@deandrade.com.br>",
     "Christian Couder <chriscool@tuxfamily.org>",
     "Daniel J. O'Quinn <danieljoquinn@gmail.com>",
+    "Daniela Borges Matos de Carvalho <alunassertiva@gmail.com>",
     "David Dias <daviddias.p@gmail.com>",
     "Felix Yan <felixonmars@archlinux.org>",
     "Francisco Baio Dias <xicombd@gmail.com>",
@@ -171,4 +172,4 @@
     "nginnever <ginneversource@gmail.com>",
     "npmcdn-to-unpkg-bot <npmcdn-to-unpkg-bot@users.noreply.github.com>"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/core/components/bootstrap.js b/src/core/components/bootstrap.js
index bfa5d14bdb..af2bd95818 100644
--- a/src/core/components/bootstrap.js
+++ b/src/core/components/bootstrap.js
@@ -1,6 +1,10 @@
 'use strict'
 
-const defaultNodes = require('../../init-files/default-config.json').Bootstrap
+const isNode = require('detect-node')
+
+const defaultNodes = isNode
+  ? require('../../init-files/default-config-node.json').Bootstrap
+  : require('../../init-files/default-config-browser.json').Bootstrap
 
 module.exports = function bootstrap (self) {
   return {
diff --git a/src/core/components/id.js b/src/core/components/id.js
index 8e8485eda0..9c113015b7 100644
--- a/src/core/components/id.js
+++ b/src/core/components/id.js
@@ -1,6 +1,7 @@
 'use strict'
 
 const promisify = require('promisify-es6')
+const mafmt = require('mafmt')
 
 module.exports = function id (self) {
   return promisify((opts, callback) => {
@@ -8,23 +9,19 @@ module.exports = function id (self) {
       callback = opts
       opts = {}
     }
-    if (!self._peerInfo) { // because of split second warmup
-      setTimeout(ready, 100)
-    } else {
-      ready()
-    }
 
-    function ready () {
-      callback(null, {
-        id: self._peerInfo.id.toB58String(),
-        publicKey: self._peerInfo.id.pubKey.bytes.toString('base64'),
-        addresses: self._peerInfo.multiaddrs.map((ma) => {
-          const addr = ma.toString() + '/ipfs/' + self._peerInfo.id.toB58String()
-          return addr
-        }).sort(),
-        agentVersion: 'js-ipfs',
-        protocolVersion: '9000'
-      })
-    }
+    setImmediate(() => callback(null, {
+      id: self._peerInfo.id.toB58String(),
+      publicKey: self._peerInfo.id.pubKey.bytes.toString('base64'),
+      addresses: self._peerInfo.multiaddrs.map((ma) => {
+        if (mafmt.IPFS.matches(ma)) {
+          return ma.toString()
+        } else {
+          return ma.toString() + '/ipfs/' + self._peerInfo.id.toB58String()
+        }
+      }).sort(),
+      agentVersion: 'js-ipfs',
+      protocolVersion: '9000'
+    }))
   })
 }
diff --git a/src/core/components/init.js b/src/core/components/init.js
index 0350563a0e..59d517544a 100644
--- a/src/core/components/init.js
+++ b/src/core/components/init.js
@@ -3,6 +3,7 @@
 const peerId = require('peer-id')
 const waterfall = require('async/waterfall')
 const parallel = require('async/parallel')
+const isNode = require('detect-node')
 
 const addDefaultAssets = require('./init-assets')
 
@@ -20,13 +21,9 @@ module.exports = function init (self) {
     opts.bits = Number(opts.bits) || 2048
     opts.log = opts.log || function () {}
 
-    let config
-    // Pre-set config values.
-    try {
-      config = require('../../init-files/default-config.json')
-    } catch (err) {
-      return callback(err)
-    }
+    const config = isNode
+      ? require('../../init-files/default-config-node.json')
+      : require('../../init-files/default-config-browser.json')
 
     waterfall([
       // Verify repo does not yet exist.
@@ -62,9 +59,7 @@ module.exports = function init (self) {
         ]
 
         if (typeof addDefaultAssets === 'function') {
-          tasks.push(
-            (cb) => addDefaultAssets(self, opts.log, cb)
-          )
+          tasks.push((cb) => addDefaultAssets(self, opts.log, cb))
         }
 
         parallel(tasks, (err) => {
diff --git a/src/init-files/default-config-browser.json b/src/init-files/default-config-browser.json
new file mode 100644
index 0000000000..93fbbbdd58
--- /dev/null
+++ b/src/init-files/default-config-browser.json
@@ -0,0 +1,9 @@
+{
+  "Addresses": {
+    "Swarm": [],
+    "API": "/ip4/127.0.0.1/tcp/5002",
+    "Gateway": "/ip4/127.0.0.1/tcp/9090"
+  },
+  "Discovery": {},
+  "Bootstrap": []
+}
diff --git a/src/init-files/default-config.json b/src/init-files/default-config-node.json
similarity index 83%
rename from src/init-files/default-config.json
rename to src/init-files/default-config-node.json
index 33046e3871..91736bf291 100644
--- a/src/init-files/default-config.json
+++ b/src/init-files/default-config-node.json
@@ -1,7 +1,8 @@
 {
   "Addresses": {
     "Swarm": [
-      "/ip4/0.0.0.0/tcp/4002"
+      "/ip4/0.0.0.0/tcp/4002",
+      "/ip4/127.0.0.1/tcp/4003/ws"
     ],
     "API": "/ip4/127.0.0.1/tcp/5002",
     "Gateway": "/ip4/127.0.0.1/tcp/9090"
@@ -12,17 +13,6 @@
       "Interval": 10
     }
   },
-  "Mounts": {
-    "IPFS": "/ipfs",
-    "IPNS": "/ipns"
-  },
-  "Ipns": {
-    "ResolveCacheSize": 128
-  },
-  "Gateway": {
-    "RootRedirect": "",
-    "Writable": false
-  },
   "Bootstrap": [
     "/ip4/104.131.131.82/tcp/4001/ipfs/QmaCpDMGvV2BGHeYERUEnRQAwe3N8SzbUtfsmvsqQLuvuJ",
     "/ip4/104.236.176.52/tcp/4001/ipfs/QmSoLnSGccFuZQJzRadHn95W2CrSFmZuTdDWP8HXaHca9z",
diff --git a/test/browser.js b/test/browser.js
deleted file mode 100644
index 9e2051e8ec..0000000000
--- a/test/browser.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict'
-
-require('./core/browser')
diff --git a/test/core/both/test-bitswap.js b/test/core/bitswap.spec.js
similarity index 90%
rename from test/core/both/test-bitswap.js
rename to test/core/bitswap.spec.js
index 576f93d8a3..83bb63f4e5 100644
--- a/test/core/both/test-bitswap.js
+++ b/test/core/bitswap.spec.js
@@ -16,7 +16,11 @@ const API = require('ipfs-api')
 const multiaddr = require('multiaddr')
 const isNode = require('detect-node')
 
-const IPFS = require('../../../src/core')
+// This gets replaced by require('../utils/create-repo-browser.js')
+// in the browser
+const createTempRepo = require('../utils/create-repo-node.js')
+
+const IPFS = require('../../src/core')
 
 function makeBlock (cb) {
   return cb(null, new Block(`IPFS is awesome ${Math.random()}`))
@@ -27,19 +31,24 @@ describe('bitswap', () => {
   let swarmAddrsBak
 
   beforeEach((done) => {
-    inProcNode = new IPFS(require('../../utils/repo-path'))
-    if (!isNode) {
-      inProcNode.config.get('Addresses.Swarm', (err, swarmAddrs) => {
-        expect(err).to.not.exist
-        swarmAddrsBak = swarmAddrs
-        inProcNode.config.set('Addresses.Swarm', [], (err) => {
-          expect(err).to.not.exist
-          inProcNode.load(done)
-        })
-      })
-    } else {
-      inProcNode.load(done)
-    }
+    const repo = createTempRepo()
+    inProcNode = new IPFS(repo)
+    series([
+      (cb) => inProcNode.init({ bits: 2048 }, cb),
+      (cb) => {
+        if (!isNode) {
+          inProcNode.config.get('Addresses.Swarm', (err, swarmAddrs) => {
+            expect(err).to.not.exist
+            swarmAddrsBak = swarmAddrs
+            inProcNode.config.set('Addresses.Swarm', [], cb)
+          })
+        } else {
+          cb()
+        }
+      },
+      (cb) => inProcNode.config.set('Discovery.MDNS.Enabled', false, cb),
+      (cb) => inProcNode.load(cb)
+    ], done)
   })
 
   afterEach((done) => {
diff --git a/test/core/both/test-bootstrap.js b/test/core/bootstrap.spec.js
similarity index 86%
rename from test/core/both/test-bootstrap.js
rename to test/core/bootstrap.spec.js
index 9e6a90d47e..729f2ec31e 100644
--- a/test/core/both/test-bootstrap.js
+++ b/test/core/bootstrap.spec.js
@@ -2,15 +2,27 @@
 'use strict'
 
 const expect = require('chai').expect
+const isNode = require('detect-node')
+const series = require('async/series')
 
-const IPFS = require('../../../src/core')
+// This gets replaced by require('../utils/create-repo-browser.js')
+// in the browser
+const createTempRepo = require('../utils/create-repo-node.js')
+
+const IPFS = require('../../src/core')
 
 describe('bootstrap', () => {
-  var ipfs
+  if (!isNode) { return }
+
+  let ipfs
 
   before((done) => {
-    ipfs = new IPFS(require('../../utils/repo-path'))
-    ipfs.load(done)
+    const repo = createTempRepo()
+    ipfs = new IPFS(repo)
+    series([
+      (cb) => ipfs.init({ bits: 1024 }, cb),
+      (cb) => ipfs.load(cb)
+    ], done)
   })
 
   const defaultList = [
diff --git a/test/core/both/index.js b/test/core/both/index.js
deleted file mode 100644
index a6dc8e5621..0000000000
--- a/test/core/both/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-env mocha */
-'use strict'
-
-describe('--both', () => {
-  require('./test-bitswap')
-  require('./test-block')
-  require('./test-bootstrap')
-  require('./test-config')
-  require('./test-files')
-  require('./test-generic')
-  require('./test-init')
-  require('./test-object')
-})
diff --git a/test/core/both/test-init.js b/test/core/both/test-init.js
deleted file mode 100644
index 80849ebf7d..0000000000
--- a/test/core/both/test-init.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* eslint max-nested-callbacks: ["error", 8] */
-/* eslint-env mocha */
-'use strict'
-
-const expect = require('chai').expect
-const IPFS = require('../../../src/core')
-const createTempRepo = require('../../utils/temp-repo')
-
-describe('init', function () {
-  this.timeout(50 * 1000)
-
-  it('basic', (done) => {
-    const repo = createTempRepo()
-    const ipfs = new IPFS(repo)
-
-    ipfs.init({ emptyRepo: true, bits: 1024 }, (err) => {
-      expect(err).to.not.exist
-
-      repo.exists((err, res) => {
-        expect(err).to.not.exist
-        expect(res).to.equal(true)
-
-        repo.config.get((err, config) => {
-          expect(err).to.not.exist
-          expect(config.Identity).to.exist
-
-          repo.teardown(done)
-        })
-      })
-    })
-  })
-
-  it('set # of bits in key', (done) => {
-    const repo1 = createTempRepo()
-    const repo2 = createTempRepo()
-    const ipfsShort = new IPFS(repo1)
-    const ipfsLong = new IPFS(repo2)
-    ipfsShort.init({ bits: 1024, emptyRepo: true }, (err) => {
-      expect(err).to.not.exist
-
-      ipfsLong.init({ bits: 2048, emptyRepo: true }, (err) => {
-        expect(err).to.not.exist
-
-        repo1.config.get((err, config1) => {
-          expect(err).to.not.exist
-
-          repo2.config.get((err, config2) => {
-            expect(err).to.not.exist
-            expect(config1.Identity.PrivKey.length).is.below(config2.Identity.PrivKey.length)
-
-            repo1.teardown(() => {
-              repo2.teardown(done)
-            })
-          })
-        })
-      })
-    })
-  })
-})
diff --git a/test/core/browser-only/index.js b/test/core/browser-only/index.js
deleted file mode 100644
index 97ab80c35d..0000000000
--- a/test/core/browser-only/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/* eslint-env mocha */
-'use strict'
-
-describe('--browser only', () => {
-  require('./test-swarm')
-})
diff --git a/test/core/browser-only/test-swarm.js b/test/core/browser-only/test-swarm.js
deleted file mode 100644
index ccacec309b..0000000000
--- a/test/core/browser-only/test-swarm.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict'
diff --git a/test/core/browser.js b/test/core/browser.js
deleted file mode 100644
index 54731912c9..0000000000
--- a/test/core/browser.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint-env mocha */
-'use strict'
-
-const series = require('async/series')
-const Store = require('idb-pull-blob-store')
-const _ = require('lodash')
-const pull = require('pull-stream')
-
-const repoContext = require.context('buffer!./../go-ipfs-repo', true)
-
-const idb = window.indexedDB ||
-  window.mozIndexedDB ||
-  window.webkitIndexedDB ||
-  window.msIndexedDB
-
-idb.deleteDatabase('ipfs')
-idb.deleteDatabase('ipfs/blocks')
-
-describe('core', function () {
-  this.timeout(10000)
-  before(function (done) {
-    var repoData = []
-    repoContext.keys().forEach(function (key) {
-      repoData.push({
-        key: key.replace('./', ''),
-        value: repoContext(key)
-      })
-    })
-
-    const mainBlob = new Store('ipfs')
-    const blocksBlob = new Store('ipfs/blocks')
-
-    series(repoData.map((file) => (cb) => {
-      if (_.startsWith(file.key, 'datastore/')) {
-        return cb()
-      }
-
-      const blocks = _.startsWith(file.key, 'blocks/')
-      const blob = blocks ? blocksBlob : mainBlob
-      const key = blocks ? file.key.replace(/^blocks\//, '') : file.key
-
-      pull(
-        pull.values([file.value]),
-        blob.write(key, cb)
-      )
-    }), done)
-  })
-
-  require('./both')
-  require('./browser-only')
-})
diff --git a/test/core/init.spec.js b/test/core/init.spec.js
new file mode 100644
index 0000000000..89176bbabe
--- /dev/null
+++ b/test/core/init.spec.js
@@ -0,0 +1,81 @@
+/* eslint max-nested-callbacks: ["error", 8] */
+/* eslint-env mocha */
+'use strict'
+
+const expect = require('chai').expect
+const isNode = require('detect-node')
+const IPFS = require('../../src/core')
+
+// This gets replaced by require('../utils/create-repo-browser.js')
+// in the browser
+const createTempRepo = require('../utils/create-repo-node.js')
+
+describe('init', () => {
+  if (!isNode) { return }
+
+  let ipfs
+  let repo
+
+  beforeEach(() => {
+    repo = createTempRepo()
+    ipfs = new IPFS(repo)
+  })
+
+  afterEach((done) => repo.teardown(done))
+
+  it('basic', (done) => {
+    ipfs.init({ bits: 1024 }, (err) => {
+      expect(err).to.not.exist
+
+      repo.exists((err, res) => {
+        expect(err).to.not.exist
+        expect(res).to.equal(true)
+
+        repo.config.get((err, config) => {
+          expect(err).to.not.exist
+          expect(config.Identity).to.exist
+          done()
+        })
+      })
+    })
+  })
+
+  it('set # of bits in key', (done) => {
+    ipfs.init({ bits: 2048 }, (err) => {
+      expect(err).to.not.exist
+
+      repo.config.get((err, config) => {
+        expect(err).to.not.exist
+        expect(config.Identity.PrivKey.length).is.above(256)
+        done()
+      })
+    })
+  })
+
+  it('init docs are written', (done) => {
+    ipfs.init({ bits: 1024 }, (err) => {
+      expect(err).to.not.exist
+      const multihash = new Buffer('12205e7c3ce237f936c76faf625e90f7751a9f5eeb048f59873303c215e9cce87599', 'hex')
+
+      ipfs.object.get(multihash, {}, (err, node) => {
+        expect(err).to.not.exist
+        expect(node.links).to.exist
+        done()
+      })
+    })
+  })
+
+  it('empty repo', (done) => {
+    ipfs.init({ bits: 1024, emptyRepo: true }, (err) => {
+      expect(err).to.not.exist
+
+      // Should not have default assets
+      const multihash = new Buffer('12205e7c3ce237f936c76faf625e90f7751a9f5eeb048f59873303c215e9cce87599', 'hex')
+
+      ipfs.object.get(multihash, {}, (err, node) => {
+        expect(err).to.exist
+        done()
+      })
+    })
+  })
+})
diff --git a/test/core/both/test-block.js b/test/core/interface/block.js
similarity index 100%
rename from test/core/both/test-block.js
rename to test/core/interface/block.js
diff --git a/test/core/both/test-config.js b/test/core/interface/config.js
similarity index 100%
rename from test/core/both/test-config.js
rename to test/core/interface/config.js
diff --git a/test/core/both/test-files.js b/test/core/interface/files.js
similarity index 100%
rename from test/core/both/test-files.js
rename to test/core/interface/files.js
diff --git a/test/core/both/test-generic.js b/test/core/interface/generic.js
similarity index 100%
rename from test/core/both/test-generic.js
rename to test/core/interface/generic.js
diff --git a/test/core/interface/interface.spec.js b/test/core/interface/interface.spec.js
new file mode 100644
index 0000000000..a3cfae8350
--- /dev/null
+++ b/test/core/interface/interface.spec.js
@@ -0,0 +1,17 @@
+/* eslint-env mocha */
+
+'use strict'
+
+const isNode = require('detect-node')
+
+describe('interface-ipfs-core tests', () => {
+  require('./block')
+  require('./config')
+  require('./files')
+  require('./generic')
+  require('./object')
+  if (isNode) {
+    require('./swarm')
+    require('./pubsub')
+  }
+})
diff --git a/test/core/both/test-object.js b/test/core/interface/object.js
similarity index 100%
rename from test/core/both/test-object.js
rename to test/core/interface/object.js
diff --git a/test/core/node-only/test-pubsub.js b/test/core/interface/pubsub.js
similarity index 100%
rename from test/core/node-only/test-pubsub.js
rename to test/core/interface/pubsub.js
diff --git a/test/core/node-only/test-swarm.js b/test/core/interface/swarm.js
similarity index 100%
rename from test/core/node-only/test-swarm.js
rename to test/core/interface/swarm.js
diff --git a/test/core/node-only/index.js b/test/core/node-only/index.js
deleted file mode 100644
index a11396620b..0000000000
--- a/test/core/node-only/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-env mocha */
-'use strict'
-
-const fs = require('fs')
-const ncp = require('ncp').ncp
-const expect = require('chai').expect
-const path = require('path')
-const clean = require('../../utils/clean')
-
-describe('--node only', () => {
-  const repoExample = path.join(__dirname, '../../go-ipfs-repo')
-  const repoTests = require('../../utils/repo-path')
-
-  before((done) => {
-    clean(repoTests)
-    ncp(repoExample, repoTests, (err) => {
-      expect(err).to.equal(null)
-      done()
-    })
-  })
-
-  after(() => {
-    clean(repoTests)
-  })
-
-  const tests = fs.readdirSync(__dirname)
-  tests.filter((file) => {
-    if (file === 'index.js') {
-      return false
-    } else {
-      return true
-    }
-  }).forEach((file) => {
-    require('./' + file)
-  })
-})
diff --git a/test/core/node-only/test-init.js b/test/core/node-only/test-init.js
deleted file mode 100644
index 918abf27ff..0000000000
--- a/test/core/node-only/test-init.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* eslint max-nested-callbacks: ["error", 8] */
-/* eslint-env mocha */
-'use strict'
-
-const expect = require('chai').expect
-const IPFS = require('../../../src/core')
-const createTempRepo = require('../../utils/temp-repo')
-
-describe('init (Node.js specific)', () => {
-  let ipfs
-  let repo
-
-  beforeEach((done) => {
-    repo = createTempRepo()
-    ipfs = new IPFS(repo)
-    done()
-  })
-
-  afterEach((done) => {
-    repo.teardown(done)
-  })
-
-  it('init docs are written', (done) => {
-    ipfs.init({ bits: 1024 }, (err) => {
-      expect(err).to.not.exist
-      const multihash = new Buffer('12205e7c3ce237f936c76faf625e90f7751a9f5eeb048f59873303c215e9cce87599', 'hex')
-
-      setTimeout(() => {
-        ipfs.object.get(multihash, {}, (err, node) => {
-          expect(err).to.not.exist
-          expect(node.links).to.exist
-          done()
-        })
-      }, 1000)
-    })
-  })
-
-  it('empty repo', (done) => {
-    ipfs.init({ bits: 1024, emptyRepo: true }, (err) => {
-      expect(err).to.not.exist
-
-      // Check for default assets
-      var multihash = new Buffer('12205e7c3ce237f936c76faf625e90f7751a9f5eeb048f59873303c215e9cce87599', 'hex')
-      ipfs.object.get(multihash, {}, (err, node) => {
-        expect(err).to.exist
-        done()
-      })
-    })
-  })
-})
diff --git a/test/core/node.js b/test/core/node.js
deleted file mode 100644
index ac5dbcbe55..0000000000
--- a/test/core/node.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-env mocha */
-'use strict'
-
-const ncp = require('ncp').ncp
-const expect = require('chai').expect
-const path = require('path')
-const clean = require('../utils/clean')
-
-describe('core', () => {
-  const repoExample = path.join(__dirname, '../go-ipfs-repo')
-  const repoTests = require('../utils/repo-path')
-
-  before((done) => {
-    clean(repoTests)
-    ncp(repoExample, repoTests, (err) => {
-      expect(err).to.equal(null)
-      done()
-    })
-  })
-
-  after(() => {
-    clean(repoTests)
-  })
-  require('./both')
-  require('./node-only')
-})
diff --git a/test/http-api/index.js b/test/http-api/index.js
index 243af44982..b28a805438 100644
--- a/test/http-api/index.js
+++ b/test/http-api/index.js
@@ -36,33 +36,32 @@ describe('HTTP API', () => {
     })
   })
 
-  describe('## direct tests (inject)', () => {
-    const tests = fs.readdirSync(path.join(__dirname, '/inject'))
+  describe('## http-api spec tests', () => {
+    const tests = fs.readdirSync(path.join(__dirname, '/spec'))
 
     tests.filter((file) => {
       return file.match(/test-.*\.js/)
     }).forEach((file) => {
-      require('./inject/' + file)(http)
+      require('./spec/' + file)(http)
     })
   })
 
   describe('## interface-ipfs-core tests over ipfs-api', () => {
-    const tests = fs.readdirSync(path.join(__dirname,
-          '/interface-ipfs-core-over-ipfs-api'))
+    const tests = fs.readdirSync(path.join(__dirname, '/interface'))
     tests.filter((file) => {
       return file.match(/test-.*\.js/)
     }).forEach((file) => {
-      require('./interface-ipfs-core-over-ipfs-api/' + file)
+      require('./interface/' + file)
     })
   })
 
   describe('## custom ipfs-api tests', () => {
-    const tests = fs.readdirSync(path.join(__dirname, '/custom-ipfs-api'))
+    const tests = fs.readdirSync(path.join(__dirname, '/over-ipfs-api'))
     const ctl = APIctl('/ip4/127.0.0.1/tcp/6001')
     tests.filter((file) => {
       return file.match(/test-.*\.js/)
     }).forEach((file) => {
-      require('./custom-ipfs-api/' + file)(ctl)
+      require('./over-ipfs-api/' + file)(ctl)
     })
   })
 })
diff --git a/test/http-api/interface-ipfs-core-over-ipfs-api/test-block.js b/test/http-api/interface/test-block.js
similarity index 100%
rename from test/http-api/interface-ipfs-core-over-ipfs-api/test-block.js
rename to test/http-api/interface/test-block.js
diff --git a/test/http-api/interface-ipfs-core-over-ipfs-api/test-config.js b/test/http-api/interface/test-config.js
similarity index 100%
rename from test/http-api/interface-ipfs-core-over-ipfs-api/test-config.js
rename to test/http-api/interface/test-config.js
diff --git a/test/http-api/interface-ipfs-core-over-ipfs-api/test-files.js b/test/http-api/interface/test-files.js
similarity index 100%
rename from test/http-api/interface-ipfs-core-over-ipfs-api/test-files.js
rename to test/http-api/interface/test-files.js
diff --git a/test/http-api/interface-ipfs-core-over-ipfs-api/test-object.js b/test/http-api/interface/test-object.js
similarity index 100%
rename from test/http-api/interface-ipfs-core-over-ipfs-api/test-object.js
rename to test/http-api/interface/test-object.js
diff --git a/test/http-api/interface-ipfs-core-over-ipfs-api/test-pubsub.js b/test/http-api/interface/test-pubsub.js
similarity index 100%
rename from test/http-api/interface-ipfs-core-over-ipfs-api/test-pubsub.js
rename to test/http-api/interface/test-pubsub.js
diff --git a/test/http-api/interface-ipfs-core-over-ipfs-api/test-swarm.js b/test/http-api/interface/test-swarm.js
similarity index 100%
rename from test/http-api/interface-ipfs-core-over-ipfs-api/test-swarm.js
rename to test/http-api/interface/test-swarm.js
diff --git a/test/http-api/custom-ipfs-api/test-bitswap.js b/test/http-api/over-ipfs-api/test-bitswap.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-bitswap.js
rename to test/http-api/over-ipfs-api/test-bitswap.js
diff --git a/test/http-api/custom-ipfs-api/test-block.js b/test/http-api/over-ipfs-api/test-block.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-block.js
rename to test/http-api/over-ipfs-api/test-block.js
diff --git a/test/http-api/custom-ipfs-api/test-bootstrap.js b/test/http-api/over-ipfs-api/test-bootstrap.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-bootstrap.js
rename to test/http-api/over-ipfs-api/test-bootstrap.js
diff --git a/test/http-api/custom-ipfs-api/test-config.js b/test/http-api/over-ipfs-api/test-config.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-config.js
rename to test/http-api/over-ipfs-api/test-config.js
diff --git a/test/http-api/custom-ipfs-api/test-id.js b/test/http-api/over-ipfs-api/test-id.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-id.js
rename to test/http-api/over-ipfs-api/test-id.js
diff --git a/test/http-api/custom-ipfs-api/test-object.js b/test/http-api/over-ipfs-api/test-object.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-object.js
rename to test/http-api/over-ipfs-api/test-object.js
diff --git a/test/http-api/custom-ipfs-api/test-repo.js b/test/http-api/over-ipfs-api/test-repo.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-repo.js
rename to test/http-api/over-ipfs-api/test-repo.js
diff --git a/test/http-api/custom-ipfs-api/test-swarm.js b/test/http-api/over-ipfs-api/test-swarm.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-swarm.js
rename to test/http-api/over-ipfs-api/test-swarm.js
diff --git a/test/http-api/custom-ipfs-api/test-version.js b/test/http-api/over-ipfs-api/test-version.js
similarity index 100%
rename from test/http-api/custom-ipfs-api/test-version.js
rename to test/http-api/over-ipfs-api/test-version.js
diff --git a/test/http-api/inject/test-bitswap.js b/test/http-api/spec/test-bitswap.js
similarity index 100%
rename from test/http-api/inject/test-bitswap.js
rename to test/http-api/spec/test-bitswap.js
diff --git a/test/http-api/inject/test-block.js b/test/http-api/spec/test-block.js
similarity index 100%
rename from test/http-api/inject/test-block.js
rename to test/http-api/spec/test-block.js
diff --git a/test/http-api/inject/test-bootstrap.js b/test/http-api/spec/test-bootstrap.js
similarity index 98%
rename from test/http-api/inject/test-bootstrap.js
rename to test/http-api/spec/test-bootstrap.js
index 6c25584393..0e830f04ea 100644
--- a/test/http-api/inject/test-bootstrap.js
+++ b/test/http-api/spec/test-bootstrap.js
@@ -3,7 +3,7 @@
 
 const expect = require('chai').expect
 const qs = require('qs')
-const defaultList = require('../../../src/init-files/default-config.json').Bootstrap
+const defaultList = require('../../../src/init-files/default-config-node.json').Bootstrap
 
 module.exports = (http) => {
   describe('/bootstrap', () => {
diff --git a/test/http-api/inject/test-config.js b/test/http-api/spec/test-config.js
similarity index 100%
rename from test/http-api/inject/test-config.js
rename to test/http-api/spec/test-config.js
diff --git a/test/http-api/inject/test-files.js b/test/http-api/spec/test-files.js
similarity index 100%
rename from test/http-api/inject/test-files.js
rename to test/http-api/spec/test-files.js
diff --git a/test/http-api/inject/test-id.js b/test/http-api/spec/test-id.js
similarity index 100%
rename from test/http-api/inject/test-id.js
rename to test/http-api/spec/test-id.js
diff --git a/test/http-api/inject/test-object.js b/test/http-api/spec/test-object.js
similarity index 100%
rename from test/http-api/inject/test-object.js
rename to test/http-api/spec/test-object.js
diff --git a/test/http-api/inject/test-pubsub.js b/test/http-api/spec/test-pubsub.js
similarity index 100%
rename from test/http-api/inject/test-pubsub.js
rename to test/http-api/spec/test-pubsub.js
diff --git a/test/http-api/inject/test-repo.js b/test/http-api/spec/test-repo.js
similarity index 100%
rename from test/http-api/inject/test-repo.js
rename to test/http-api/spec/test-repo.js
diff --git a/test/http-api/inject/test-swarm.js b/test/http-api/spec/test-swarm.js
similarity index 100%
rename from test/http-api/inject/test-swarm.js
rename to test/http-api/spec/test-swarm.js
diff --git a/test/http-api/inject/test-version.js b/test/http-api/spec/test-version.js
similarity index 100%
rename from test/http-api/inject/test-version.js
rename to test/http-api/spec/test-version.js
diff --git a/test/node.js b/test/node.js
index 839824a7e7..7c50c663cb 100644
--- a/test/node.js
+++ b/test/node.js
@@ -23,7 +23,7 @@ if (process.env.TEST) {
 }
 
 if (testCore) {
-  require('./core/node')
+  // require('./core/node')
 }
 
 if (testHTTP) {
diff --git a/test/utils/temp-repo-browser.js b/test/utils/create-repo-browser.js
similarity index 100%
rename from test/utils/temp-repo-browser.js
rename to test/utils/create-repo-browser.js
diff --git a/test/utils/temp-repo.js b/test/utils/create-repo-node.js
similarity index 93%
rename from test/utils/temp-repo.js
rename to test/utils/create-repo-node.js
index 0fb997bba2..b1a17512e1 100644
--- a/test/utils/temp-repo.js
+++ b/test/utils/create-repo-node.js
@@ -14,7 +14,7 @@ function createTempRepo (repoPath) {
 
   repo.teardown = (done) => {
     clean(repoPath)
-    done()
+    setImmediate(() => done())
   }
 
   return repo
diff --git a/test/utils/factory-core/index.js b/test/utils/factory-core/index.js
index 69cafdf5e8..56598e9060 100644
--- a/test/utils/factory-core/index.js
+++ b/test/utils/factory-core/index.js
@@ -5,7 +5,7 @@ const series = require('async/series')
 
 const defaultConfig = require('./default-config.json')
 const IPFS = require('../../../src/core')
-const createTempRepo = require('../temp-repo')
+const createTempRepo = require('../create-repo-node')
 
 module.exports = Factory
 
diff --git a/test/utils/on-and-off.js b/test/utils/on-and-off.js
index 531b109e44..da0bd2d7b5 100644
--- a/test/utils/on-and-off.js
+++ b/test/utils/on-and-off.js
@@ -1,24 +1,23 @@
 /* eslint-env mocha */
 'use strict'
 
-const HttpAPI = require('../../src/http-api')
+const HTTPAPI = require('../../src/http-api')
 
-module.exports = function onlineAndOffline (repoPath, tests) {
-  describe('api offline', () => {
-    tests()
-  })
+/*
+ * CLI Utility to run the tests offline (daemon off) and online (daemon on)
+ */
+module.exports = (repoPath, tests) => {
+  describe('with daemon off (requiring js-ipfs core directly)', () => tests())
 
-  describe('api running', () => {
+  describe('with daemon on (contacting js-ipfs through http-api)', () => {
     let httpAPI
 
     before((done) => {
-      httpAPI = new HttpAPI(repoPath)
+      httpAPI = new HTTPAPI(repoPath)
       httpAPI.start(done)
     })
 
-    after((done) => {
-      httpAPI.stop(done)
-    })
+    after((done) => httpAPI.stop(done))
 
     tests()
   })
diff --git a/test/utils/repo-path.js b/test/utils/repo-path.js
deleted file mode 100644
index a44e93d5d1..0000000000
--- a/test/utils/repo-path.js
+++ /dev/null
@@ -1,10 +0,0 @@
-'use strict'
-
-const path = require('path')
-const isNode = require('detect-node')
-
-if (isNode) {
-  module.exports = path.join(__dirname, '../repo-tests-run')
-} else {
-  module.exports = 'ipfs'
-}
diff --git a/test/utils/temp-node.js b/test/utils/temp-node.js
index a61fa2a201..85fdbb5ac9 100644
--- a/test/utils/temp-node.js
+++ b/test/utils/temp-node.js
@@ -5,7 +5,7 @@ const leftPad = require('left-pad')
 const series = require('async/series')
 
 const IPFS = require('../../src/core')
-const createTempRepo = require('./temp-repo')
+const createTempRepo = require('./create-repo-node.js')
 
 function setAddresses (repo, num, callback) {
   repo.config.get((err, config) => {

From 31c6383ce95236eaf6dda61fc8437023da41aa0b Mon Sep 17 00:00:00 2001
From: David Dias <daviddias.p@gmail.com>
Date: Mon, 30 Jan 2017 09:56:33 +0000
Subject: [PATCH 09/10] fix: default config fault, add MDNS.Enabled back

---
 src/init-files/default-config-browser.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/init-files/default-config-browser.json b/src/init-files/default-config-browser.json
index 93fbbbdd58..fb0220729c 100644
--- a/src/init-files/default-config-browser.json
+++ b/src/init-files/default-config-browser.json
@@ -4,6 +4,11 @@
     "API": "/ip4/127.0.0.1/tcp/5002",
     "Gateway": "/ip4/127.0.0.1/tcp/9090"
   },
-  "Discovery": {},
+  "Discovery": {
+    "MDNS": {
+      "Enabled": false,
+      "Interval": 10
+    }
+  },
   "Bootstrap": []
 }

From 843e227637c4d5783b33a33e96ad2efa5ad9fe77 Mon Sep 17 00:00:00 2001
From: David Dias <daviddias.p@gmail.com>
Date: Mon, 6 Feb 2017 23:52:35 -0800
Subject: [PATCH 10/10] fix: get files now works

---
 examples/transfer-files/complete/js/app.js | 56 ++++++++++++----------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/examples/transfer-files/complete/js/app.js b/examples/transfer-files/complete/js/app.js
index 9dbe31b0dd..4e9e60b94c 100644
--- a/examples/transfer-files/complete/js/app.js
+++ b/examples/transfer-files/complete/js/app.js
@@ -80,41 +80,45 @@ const catFile = () => {
   if (multihash) {
     // Get a file or many files
     ipfs.files.get(multihash, (err, stream) => {
-      if (err) onError(err)
+      if (err) {
+        onError(err)
+      }
       console.log(stream)
+
       // .get gives us a stream of files
       stream.on('data', (file) => {
-        console.log(file)
+        console.log('got file', file)
+
         const buf = []
+
         if (file.content) {
           // once we get a file, we also want to read the data for that file
-          file.content.on('data', (data) => {
-            console.log('file got data')
-            buf.push(data)
-          })
-          file.content.on('end', (data) => {
-            console.log('file got end')
-            console.log(buf)
+          file.content.on('data', (data) => buf.push(data))
+
+          file.content.on('end', () => {
+            console.log('The buf', buf)
+
+            const content = new window.Blob(buf, {type: 'application/octet-binary'})
+            const contentUrl = window.URL.createObjectURL(content)
+
+            const listItem = document.createElement('div')
+            const link = document.createElement('a')
+            link.setAttribute('href', contentUrl)
+            link.setAttribute('download', multihash)
+            const date = (new Date()).toLocaleTimeString()
+
+            link.innerText = date + ' - ' + multihash + ' - Size: ' + file.size
+            const fileList = document.querySelector('.file-list')
+
+            listItem.appendChild(link)
+            fileList.insertBefore(listItem, fileList.firstChild)
           })
-          // TODO currently, can't grab content from file either in get...
-          const downloadContent = window.btoa(window.unescape(window.encodeURIComponent('content of file')))
-          const downloadLink = 'data:application/octet-stream;charset=utf-8;base64,' + downloadContent
-          const listItem = document.createElement('div')
-          const link = document.createElement('a')
-          link.setAttribute('href', downloadLink)
-          link.setAttribute('download', multihash)
-          const date = (new Date()).toLocaleTimeString()
-
-          link.innerText = date + ' - ' + multihash + ' - Size: ' + file.size
-          const fileList = document.querySelector('.file-list')
-
-          listItem.appendChild(link)
-          fileList.insertBefore(listItem, fileList.firstChild)
+
+          file.content.resume()
         }
       })
-      stream.on('end', () => {
-        console.log('no more files')
-      })
+
+      stream.on('end', () => console.log('no more files'))
     })
   }
 }