Converted example to using @dfuse/client

Author: Matthieu Vachon

Diff for: README.md

@@ -1,7 +1,7 @@
 ## dfuse Client Library - React Example
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and
-showcase how to use [dfuse Client Library](https://github.com/dfuse-io/eosws-js) to easily stream
+showcase how to use [dfuse Client Library](https://github.com/dfuse-io/client-js) to easily stream
 all transfers happening in Mainnet in a streaming fashion.
 
 First install all the dependencies:
@@ -10,14 +10,14 @@ First install all the dependencies:
 
 Then simply launch the development mode to see the end results:
 
-    REACT_APP_DFUSE_API_TOKEN=<your dfuse API token here> yarn start
+    REACT_APP_DFUSE_API_KEY=<dfuse API key here> yarn start
 
 When running this, a browser should automatically open pointing
 to the example. If it's not the case, simply open http://localhost:3000 in a browser.
 
 ### Requirements
 
-You will need to have a `REACT_APP_DFUSE_API_TOKEN` environment variable defined
+You will need to have a `REACT_APP_DFUSE_API_KEY` environment variable defined
 before starting the development server.
 
-Obtain a free API token by visiting https://dfuse.io.
+Obtain a free API key by visiting https://dfuse.io.

Diff for: package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@dfuse/eosws-js": "^0.11.11",
+    "@dfuse/client": "^0.2.0-rc.4",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-scripts": "2.1.8"

Diff for: src/App.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import { createEoswsSocket, EoswsClient, InboundMessageType } from '@dfuse/eosws-js';
+import { InboundMessageType, createDfuseClient } from '@dfuse/client';
 
 import './App.css';
 
-const apiToken = process.env.REACT_APP_DFUSE_API_TOKEN
-const wsUrl = `wss://mainnet.eos.dfuse.io/v1/stream?token=${apiToken}`
+const apiKey = process.env.REACT_APP_DFUSE_API_KEY
+const network = process.env.REACT_APP_DFUSE_NETWORK || "mainnet"
 
 class App extends Component {
   state = {
@@ -17,35 +17,36 @@ class App extends Component {
     super()
 
     this.stream = undefined
-    this.client = new EoswsClient(createEoswsSocket(() => new WebSocket(wsUrl), {
-      reconnectDelayInMs: 500,
-      onClose: this.onClose,
-      onError: this.onError,
-      onReconnect: this.onReconnect,
-    }))
+    this.client = createDfuseClient({
+      apiKey,
+      network,
+      streamClientOptions: {
+        socketOptions: {
+          onClose: this.onClose,
+          onError: this.onError,
+        }
+      }
+    })
   }
 
   componentWillUnmount() {
     if (this.stream !== undefined) {
-      this.stream.unlisten()
+      this.stream.close()
     }
-
-    // Try our best to disconnect gracefully
-    this.client.disconnect()
   }
 
   launch = async () => {
-    if (!apiToken) {
+    if (!apiKey) {
       const messages = [
         "To correctly run this sample, you need to defined an environment variable",
-        "named 'REACT_APP_DFUSE_API_TOKEN' with the value being your dfuse API token.",
+        "named 'REACT_APP_DFUSE_API_KEY' with the value being your dfuse API token.",
         "",
         "To make it into effect, define the variable before starting the development",
         "scripts, something like:",
         "",
-        "REACT_APP_DFUSE_API_TOKEN=ey....af yarn start",
+        "REACT_APP_DFUSE_API_KEY=web_....",
         "",
-        "You can obtain a free API token by visiting https://dfuse.io"
+        "You can obtain a free API key by visiting https://dfuse.io"
       ]
 
       this.setState({ connected: false, errorMessages: messages, transfers: [] })
@@ -55,20 +56,16 @@ class App extends Component {
     this.setState({ errorMessages: [], transfers: [] })
 
     try {
-      await this.client.connect()
-      this.setState({ connected: true })
+      this.stream = await this.client.streamActionTraces({
+        account: "eosio.token", action_name: "transfer"
+      }, this.onMessage)
 
-      this.streamTransfer()
+      this.setState({ connected: true })
     } catch (error) {
       this.setState({ errorMessages: ["Unable to connect to socket.", JSON.stringify(error)] })
     }
   }
 
-  streamTransfer = () => {
-    this.stream = this.client.getActionTraces({ account: "eosio.token", action_name: "transfer" })
-    this.stream.onMessage(this.onMessage)
-  }
-
   onMessage = async (message) => {
     if (message.type !== InboundMessageType.ACTION_TRACE) {
       return
@@ -87,11 +84,9 @@ class App extends Component {
       return
     }
 
-    this.stream.unlisten()
-    this.stream = undefined
-
     try {
-      await this.client.disconnect()
+      await this.stream.close()
+      this.stream = undefined
     } catch (error) {
       this.setState({ errorMessages: ["Unable to disconnect socket correctly.", JSON.stringify(error)]})
     }
@@ -105,11 +100,6 @@ class App extends Component {
     this.setState({ errorMessages: ["An error occurred with the socket.", JSON.stringify(error)]})
   }
 
-  onReconnect = () => {
-    this.setState({ connected: true })
-    this.streamTransfer()
-  }
-
   renderTransfer = (transfer, index) => {
     return <code key={index} className="App-transfer">{transfer}</code>
   }

Diff for: yarn.lock

@@ -1041,10 +1041,10 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
-"@dfuse/eosws-js@^0.11.11":
-  version "0.11.11"
-  resolved "https://registry.yarnpkg.com/@dfuse/eosws-js/-/eosws-js-0.11.11.tgz#9724bf21e4f1fe3932279f8e4eceec19a990285d"
-  integrity sha512-jRY4AruDTNOsvgqiG3QUYy6YyEr5YfFyYyeBMFRprkEA2cTcCev/R3OJ94lLhsnQWU/zl8UqBwaX/qWiyjSNQA==
+"@dfuse/client@^0.2.0-rc.4":
+  version "0.2.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@dfuse/client/-/client-0.2.0-rc.4.tgz#e62b509b71019bb02aa394af6f19d479703f2b5d"
+  integrity sha512-yI176XjH/1oiOfNqwloWdH/yC6QTFuCE5GQ3tW91j5goFTK0mYoC5JLASSF6oEXMJJNqUhReXwqX8Y6BL9dwZw==
   dependencies:
     debug "^4.1.0"