feat: graphql example

examples/react-graphql-example1/README.md

@@ -0,0 +1,54 @@
+subspace - react graphql example 
+===
+Simple application using graphql queries to receive a stream of events
+This app will deploy a test contract to **Ganache**.
+
+## Requirements
+- `ganache-cli`
+- `yarn` or `npm` installed.
+
+## Install
+In the parent folder, install, build and link the package with `yarn` or `npm`
+```
+yarn
+yarn build:dev
+yarn link
+```
+Then in the current folder link `@status-im/subspace`, and install the packages
+```
+yarn link "@status-im/subspace"
+yarn
+```
+
+## Usage
+In a terminal execute 
+```
+ganache-cli
+```
+
+In a different session, execute
+
+```
+yarn run deploy
+```
+
+And then:
+
+```
+yarn run start
+```
+
+Browse the DApp in [http://localhost:3000](http://localhost:3000)
+
+
+*Note*: this is a simple example application that does not include error handling for the web3 connection. Be sure `ganache-cli` is running in `localhost:8545` before browsing the dapp.
+
+
+### node-gyp problems
+node-gyp can cause problems, because it requires a C++ compiler.
+
+If you do have problems caused by it, first follow the installation steps for your OS [here](https://github.com/nodejs/node-gyp#installation).
+
+If you still have problems and are on Windows, try the following:
+- run `npm config set msvs_version 2015` before `npm install`
+- Repair Windows Build tools that the node-gyp doc made you install. If it tells you to remove a conflicting version do it. After the repair succeeded, reboot.

examples/react-graphql-example1/deploy.js

@@ -0,0 +1,151 @@
+const Web3 = require("web3");
+const web3 = new Web3("ws://localhost:8545");
+const fs = require("fs-extra");
+
+const abi = [
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "title",
+        "type": "string"
+      }
+    ],
+    "name": "createProduct",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "productId",
+        "type": "uint256"
+      },
+      {
+        "internalType": "string",
+        "name": "title",
+        "type": "string"
+      }
+    ],
+    "name": "editProduct",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "name": "products",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "title",
+        "type": "string"
+      },
+      {
+        "internalType": "uint256",
+        "name": "latestRating",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "productId",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "rating",
+        "type": "uint256"
+      }
+    ],
+    "name": "rateProduct",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "fallback"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "productId",
+        "type": "uint256"
+      }
+    ],
+    "name": "newProduct",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "uint256",
+        "name": "productId",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "rating",
+        "type": "uint256"
+      }
+    ],
+    "name": "Rating",
+    "type": "event"
+  }
+];
+
+const data = "0x608060405234801561001057600080fd5b506100556040518060400160405280600681526020017f6c6170746f70000000000000000000000000000000000000000000000000000081525061005a60201b60201c565b610244565b600080805480919060010161006f91906100ee565b9050600080828154811061007f57fe5b90600052602060002090600202019050828160000190805190602001906100a7929190610120565b50600281600101819055507f5dc23a654c93455cd36741580d5c1fafc8f35c429bb831bc768008bd655a1219826040518082815260200191505060405180910390a1505050565b81548183558181111561011b5760020281600202836000526020600020918201910161011a91906101a0565b5b505050565b828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f1061016157805160ff191683800117855561018f565b8280016001018555821561018f579182015b8281111561018e578251825591602001919060010190610173565b5b50905061019c91906101d7565b5090565b6101d491905b808211156101d057600080820160006101bf91906101fc565b6001820160009055506002016101a6565b5090565b90565b6101f991905b808211156101f55760008160009055506001016101dd565b5090565b90565b50805460018160011615610100020316600290046000825580601f106102225750610241565b601f01602090049060005260206000209081019061024091906101d7565b5b50565b610659806102536000396000f3fe60806040526004361061003f5760003560e01c806302ec06be1461004157806311eaa75a146101095780637acc0b20146101db578063f4ef9e3614610296575b005b34801561004d57600080fd5b506101076004803603602081101561006457600080fd5b810190808035906020019064010000000081111561008157600080fd5b82018360208201111561009357600080fd5b803590602001918460018302840111640100000000831117156100b557600080fd5b91908080601f016020809104026020016040519081016040528093929190818152602001838380828437600081840152601f19601f8201169050808301925050505050505091929192905050506102db565b005b34801561011557600080fd5b506101d96004803603604081101561012c57600080fd5b81019080803590602001909291908035906020019064010000000081111561015357600080fd5b82018360208201111561016557600080fd5b8035906020019184600183028401116401000000008311171561018757600080fd5b91908080601f016020809104026020016040519081016040528093929190818152602001838380828437600081840152601f19601f82011690508083019250505050505050919291929050505061036f565b005b3480156101e757600080fd5b50610214600480360360208110156101fe57600080fd5b81019080803590602001909291905050506103a6565b6040518080602001838152602001828103825284818151815260200191508051906020019080838360005b8381101561025a57808201518184015260208101905061023f565b50505050905090810190601f1680156102875780820380516001836020036101000a031916815260200191505b50935050505060405180910390f35b3480156102a257600080fd5b506102d9600480360360408110156102b957600080fd5b81019080803590602001909291908035906020019092919050505061046f565b005b60008080548091906001016102f091906104ce565b9050600080828154811061030057fe5b9060005260206000209060020201905082816000019080519060200190610328929190610500565b50600281600101819055507f5dc23a654c93455cd36741580d5c1fafc8f35c429bb831bc768008bd655a1219826040518082815260200191505060405180910390a1505050565b806000838154811061037d57fe5b906000526020600020906002020160000190805190602001906103a1929190610500565b505050565b600081815481106103b357fe5b9060005260206000209060020201600091509050806000018054600181600116156101000203166002900480601f01602080910402602001604051908101604052809291908181526020018280546001816001161561010002031660029004801561045f5780601f106104345761010080835404028352916020019161045f565b820191906000526020600020905b81548152906001019060200180831161044257829003601f168201915b5050505050908060010154905082565b817ffdefdf8d82459f7b1eb157e5c44cbe6ee73d8ddd387511fe3622a3ee663b4697826040518082815260200191505060405180910390a280600083815481106104b557fe5b9060005260206000209060020201600101819055505050565b8154818355818111156104fb576002028160020283600052602060002091820191016104fa9190610580565b5b505050565b828054600181600116156101000203166002900490600052602060002090601f016020900481019282601f1061054157805160ff191683800117855561056f565b8280016001018555821561056f579182015b8281111561056e578251825591602001919060010190610553565b5b50905061057c91906105b7565b5090565b6105b491905b808211156105b0576000808201600061059f91906105dc565b600182016000905550600201610586565b5090565b90565b6105d991905b808211156105d55760008160009055506001016105bd565b5090565b90565b50805460018160011615610100020316600290046000825580601f106106025750610621565b601f01602090049060005260206000209081019061062091906105b7565b5b5056fea265627a7a72315820283a23649d3076ca075a3d9190d7b69b6665e8b1d83e5240c8cfbe34dc9d9b3364736f6c634300050b0032";
+const MyContract = new web3.eth.Contract(abi, {data, gas: "800000"});
+
+(async () => {
+  if (!web3.eth.defaultAccount) {
+    const accounts = await web3.eth.getAccounts();
+    web3.eth.defaultAccount = accounts[0];
+  }
+  const instance = await MyContract.deploy().send({ from: web3.eth.defaultAccount });
+
+  let address = instance.options.address;
+
+  console.dir("deployment done!");
+
+  fs.writeJsonSync("./src/contract.json", { address, abi });
+
+  console.dir("artifact written to src/contract.json")
+
+  process.exit(0)
+})()

examples/react-graphql-example1/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "observables",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "fs-extra": "^8.1.0",
+    "graphql-tag": "^2.10.1",
+    "graphql-tools": "^4.0.6",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-scripts": "3.1.1",
+    "reactive-graphql": "^4.0.1",
+    "rxjs": "^6.5.2",
+    "web3": "^1.2.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "deploy": "node deploy.js",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/react-graphql-example1/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/react-graphql-example1/src/App.js

@@ -0,0 +1,113 @@
+import React from "react";
+import Subspace from "@status-im/subspace";
+import { $average, $latest } from "@status-im/subspace";
+import { makeExecutableSchema } from "graphql-tools";
+import { graphql } from "reactive-graphql";
+import { map, scan } from "rxjs/operators";
+import web3 from "./web3";
+import { abi, address } from "./contract.json";
+
+let Product;
+
+class App extends React.Component {
+  state = {
+    userRating: 0,
+    averageRating: 0,
+    last5Ratings: [],
+    filteredRatings: []
+  };
+
+  async componentDidMount() {
+    const subspace = new Subspace(web3.currentProvider);
+    await subspace.init();
+
+    Product = subspace.contract({ abi, address });
+
+    const typeDefs = `
+       type Query {
+        averageRating: Float!
+        last5Ratings: [Int!]
+        filteredRatings(gte: Int): [Int!]
+      }
+    `;
+
+    const rating$ = Product.events.Rating.track()
+      .map("rating")
+      .pipe(map(x => parseInt(x)));
+
+    const resolvers = {
+      Query: {
+        averageRating: () => rating$.pipe($average()),
+        last5Ratings: () => rating$.pipe($latest(5)),
+        filteredRatings: (a, conditions) => {
+          const gte = (conditions && conditions.gte) || 0;
+          return rating$.pipe(
+            scan((accum, val) => {
+              if (val >= gte) {
+                return [...accum, val];
+              } else {
+                return accum;
+              }
+            }, [])
+          );
+        }
+      }
+    };
+
+    const schema = makeExecutableSchema({ typeDefs, resolvers });
+
+    const summaryQuery = `
+    query {
+      averageRating
+      last5Ratings
+    }
+    `;
+
+    graphql(schema, summaryQuery).subscribe(
+      ({ data: { averageRating, last5Ratings } }) => {
+        this.setState({ averageRating, last5Ratings });
+      }
+    );
+
+    const filterRatingsQuery = `
+    query {
+      filteredRatings(gte: 3)
+    }
+    `;
+
+    graphql(schema, filterRatingsQuery).subscribe(
+      ({ data: { filteredRatings } }) => {
+        this.setState({ filteredRatings });
+      }
+    );
+  }
+
+  rateProduct = async () => {
+    let accounts = await web3.eth.getAccounts();
+    await Product.methods
+      .rateProduct(0, this.state.userRating)
+      .send({ from: accounts[0] });
+  };
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.rateProduct}>Rate Product</button>
+        <input
+          type="number"
+          value={this.state.userRating}
+          onChange={evt =>
+            this.setState({ userRating: parseInt(evt.target.value) })
+          }
+        />
+        <ul>
+          <li><b>average rating: </b> {this.state.averageRating}</li>
+          <li><b>last 5 ratings: </b> {(this.state.last5Ratings || []).join(', ')}</li>
+          <li><b>all ratings greater than 2:</b> {(this.state.filteredRatings || []).join(', ')}</li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default App;

examples/react-graphql-example1/src/MyContract.js

@@ -0,0 +1,16 @@
+import web3 from './web3';
+import {abi, address} from './contract.json'
+
+const MyContract = new web3.eth.Contract(abi, {from: web3.eth.default,  gas: "800000"});
+MyContract.options.address = address;
+
+MyContract.getInstance = async () => {
+  if (!web3.eth.defaultAccount) {
+    const accounts = await web3.eth.getAccounts();
+    web3.eth.defaultAccount = accounts[0];
+  }
+  MyContract.options.from = web3.eth.defaultAccount;
+  return MyContract;
+}
+
+export default MyContract;

examples/react-graphql-example1/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();

examples/react-graphql-example1/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

examples/react-graphql-example1/src/web3.js

@@ -0,0 +1,5 @@
+import Web3 from 'web3';
+
+const web3 = new Web3("ws://localhost:8545");
+
+export default web3;