|
| 1 | +--- |
| 2 | +weight: 1 |
| 3 | +menuTitle: Stream the latest ether transfers |
| 4 | +title: Stream the latest ether transfers |
| 5 | +release: beta |
| 6 | +--- |
| 7 | + |
| 8 | +In this guide we will create a simple React application that will use dfuse's javascript client library and the stream API to easily stream all transfers happening on the Ethereum Mainnet. To do that, we will be using {{< external-link href="https://reactjs.org/docs/hooks-intro.html" title="react hooks">}}. |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | +## 0. Completed Example |
| 13 | + |
| 14 | +If you prefer to skip forward and run the completed project, run: |
| 15 | + |
| 16 | +{{< tabs "clone-completed-example">}} |
| 17 | +{{< tab title="Shell" lang="shell" >}} |
| 18 | +# clone and install the example project |
| 19 | +git clone github.com/dfuse-io/docs |
| 20 | +cd docs/tutorials/stream |
| 21 | +yarn install |
| 22 | +yarn start |
| 23 | +{{< /tab >}} |
| 24 | +{{< /tabs >}} |
| 25 | + |
| 26 | +{{< alert type="note" >}} |
| 27 | +Installing the {{< external-link href="https://reactjs.org/tutorial/tutorial.html#developer-tools" title="React Dev Tools">}} plugin for your browser is optional, but is very useful for seeing what goes on in the application. |
| 28 | +{{< /alert >}} |
| 29 | + |
| 30 | +## 1. Create React App |
| 31 | + |
| 32 | +Use the {{< external-link href="https://github.com/facebook/create-react-app">}} to set up your development environment so that you can use the latest JavaScript features. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run: |
| 33 | + |
| 34 | +{{< tabs "create-react-app">}} |
| 35 | +{{< tab title="Shell" lang="shell" >}} |
| 36 | +# get create-react-app: https://github.com/facebook/create-react-app |
| 37 | +npx create-react-app stream |
| 38 | +cd stream |
| 39 | +npm start |
| 40 | +{{< /tab >}} |
| 41 | +{{< /tabs >}} |
| 42 | + |
| 43 | +then open ({{< external-link href="http://localhost:3000/">}}) |
| 44 | + |
| 45 | +## 2. Get your API key |
| 46 | + |
| 47 | +{{< dfuse-account-creation >}} |
| 48 | + |
| 49 | +## 3. Add the dfuse Client Library |
| 50 | + |
| 51 | +The simplest way to get started with dfuse and JavaScript/TypeScript development is to use the dfuse JS client library. |
| 52 | + |
| 53 | +{{< tabs "adding-dfuse-client-lib">}} |
| 54 | +{{< tab title="NPM" lang="shell" >}} |
| 55 | +# https://www.npmjs.com/package/@dfuse/client |
| 56 | +npm install --save @dfuse/client |
| 57 | +{{< /tab >}} |
| 58 | +{{< /tabs >}} |
| 59 | + |
| 60 | +## 4. Setup dfuse Client |
| 61 | + |
| 62 | +Import the necessary functions from `dfuse/client` at the top of `src/App.js`. |
| 63 | + |
| 64 | +{{< tabs "setting-up-dfuse-client1-import">}} |
| 65 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 66 | +{{< code-section "tutorials_eth_stream_section1">}} |
| 67 | +{{< /tab >}} |
| 68 | +{{< /tabs >}} |
| 69 | + |
| 70 | +Initialize the dfuse client using the API key you created in the second step. Let's create the `dfuseClient` right after the `function App()` declaration. |
| 71 | + |
| 72 | +{{< tabs "setting-up-dfuse-client1-initialize">}} |
| 73 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 74 | +{{< code-section "tutorials_eth_stream_section2">}} |
| 75 | +{{< /tab >}} |
| 76 | +{{< /tabs >}} |
| 77 | + |
| 78 | +## 5. Craft the GraphQL query |
| 79 | +A GraphQL subscription will continuously stream responses from the API. We will use a GraphQL subscription to return the the latest transfers for up to 100 results. |
| 80 | + |
| 81 | +{{< alert type="note" >}} |
| 82 | +With GraphQL, you can choose to request as little or as much data as needed. Therefore you can shrink down the query to only 6 lines and only request the `transactionHash` if you prefer. |
| 83 | + |
| 84 | +See [Getting Started with GraphQL](/guides/core-concepts/graphql/) for more information. |
| 85 | +{{< /alert >}} |
| 86 | + |
| 87 | +We use the following parameters for the GraphQL query: |
| 88 | + |
| 89 | +- `query`: query string to tell the API what you want to search for |
| 90 | +- `indexName`: (CALLS | LOGS) type of data to search for |
| 91 | +- `limit`: limit of results to return |
| 92 | +- `sort`: (ASC | DESC) ascending or desending direction to search in |
| 93 | +- `cursor`: chain-wide pointer to an exact location that allows you to resume your search at |
| 94 | + |
| 95 | +The query string `-value:0` indicates that the results must have non-zero ether values within the transactions. |
| 96 | + |
| 97 | +{{< alert type="tip" >}} |
| 98 | +See [Query Langauge](/guides/core-concepts/search-query-language/) to learn more about what you can search. |
| 99 | +{{< /alert >}} |
| 100 | + |
| 101 | +{{< tabs "stream-query">}} |
| 102 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 103 | +{{< code-section "tutorials_eth_stream_section3">}} |
| 104 | +{{< /tab >}} |
| 105 | +{{< /tabs >}} |
| 106 | + |
| 107 | +## 6. Setup our Hooks |
| 108 | + |
| 109 | +Lets setup a few hooks that will help us keep track of our transaction states and render our component. We use {{< external-link title="react state hook" href="https://reactjs.org/docs/hooks-state.html">}} to accomplish this. |
| 110 | + |
| 111 | +- `transfers`: array that stores all the received transactions |
| 112 | +- `state`: stores the current state of the GraphQL subscription |
| 113 | +- `error`: stores our errors |
| 114 | +- `stream`: object to listen for events on |
| 115 | + |
| 116 | +{{< tabs "setup-hooks">}} |
| 117 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 118 | +{{< code-section "tutorials_eth_stream_section4">}} |
| 119 | +{{< /tab >}} |
| 120 | +{{< /tabs >}} |
| 121 | + |
| 122 | +## 7. Stream Transfers Function |
| 123 | + |
| 124 | +Create an `async` function `streamTransfers` that will use the dfuse JS client to execute the GraphQL subscription we crafted above and initialize a few state variables. |
| 125 | + |
| 126 | +The message returned can have types of `error`, `data`, and `complete`. |
| 127 | +We handle each case by setting the `errors`, `transfers`, or `state` hooks to tell our app what to display. |
| 128 | + |
| 129 | +{{< tabs "fetch-transaction-init">}} |
| 130 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 131 | +{{< code-section "tutorials_eth_stream_section5">}} |
| 132 | +{{< /tab >}} |
| 133 | +{{< /tabs >}} |
| 134 | + |
| 135 | +## 8. Stopping Stream and Disconnects |
| 136 | + |
| 137 | +Define functions to stop the stream, handle streaming client closing and error catching. |
| 138 | + |
| 139 | +{{< tabs "fetch-transaction-func-setup">}} |
| 140 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 141 | +{{< code-section "tutorials_eth_stream_section6">}} |
| 142 | +{{< /tab >}} |
| 143 | +{{< /tabs >}} |
| 144 | + |
| 145 | +## 9. Render Function |
| 146 | + |
| 147 | +Build the `render` method for this component. It includes a launch and stop button to trigger the functions we defined. It also renders the list of transfers stored in our react hook. |
| 148 | + |
| 149 | +{{< tabs "fetch-transaction-render">}} |
| 150 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 151 | +{{< code-section "tutorials_eth_stream_section7">}} |
| 152 | +{{< /tab >}} |
| 153 | +{{< /tabs >}} |
| 154 | + |
| 155 | +## 10. Prettifying it with CSS |
| 156 | + |
| 157 | +Add some CSS to style this HTML a bit. Replace the contents of `src/App.css` with the following: |
| 158 | + |
| 159 | +{{< tabs "fetch-transaction-css">}} |
| 160 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 161 | +{{< code-section "tutorials_eth_stream_css_section1">}} |
| 162 | +{{< /tab >}} |
| 163 | +{{< /tabs >}} |
| 164 | + |
| 165 | +## 11. Full Working Example |
| 166 | + |
| 167 | +The source code for this tutorial is available on {{< external-link href="https://github.com/dfuse-io/docs/tree/master/tutorials/eth/stream" title="GitHub" >}}. Below are the code files discussed on this page. |
| 168 | + |
| 169 | +{{< tabs "fetch-transaction-full-app">}} |
| 170 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 171 | +{{< code-section "tutorials_eth_stream_section8">}} |
| 172 | +{{< /tab >}} |
| 173 | +{{< tab title="src/App.js" lang="javascript" >}} |
| 174 | +{{< code-section "tutorials_eth_stream_css_section1">}} |
| 175 | +{{< /tab >}} |
| 176 | +{{< /tabs >}} |
0 commit comments