Add Nodesmith and its event cache

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-minimal

package.json

@@ -16,8 +16,11 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "truffle:compile": "truffle compile && node -e \"console.log(JSON.stringify(require('./build/contracts/NFT.json').abi, null, 2))\" > ./src/static/abis/NFT.json"
   },
+  "homepage": "http://nodesmith.github.io/erc721-benchmark/",
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -26,5 +29,8 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "gh-pages": "^2.0.1"
+  }
 }

src/Benchmark.js

@@ -11,7 +11,8 @@ export default class Benchmark extends Component {
     super(props);
     this.state = {
       contract: "0x6EbeAf8e8E946F0716E6533A6f2cefc83f60e8Ab",
-      owner: "0x4eb5c09f266a6681f3a7729cd4587cbb1ae3d41e"
+      owner: "0x4eb5c09f266a6681f3a7729cd4587cbb1ae3d41e",
+      useNodesmith: true
     };
   }
   async handleSubmit(event) {
@@ -34,8 +35,14 @@ export default class Benchmark extends Component {
     });
   }
 
+  toggleNodesmith = () => {
+    this.setState({
+      useNodesmith: !this.state.useNodesmith
+    })
+  }
+
   render() {
-    const { balance, name, fetching, contract, owner } = this.state || {};
+    const { balance, name, fetching, contract, owner, useNodesmith } = this.state || {};
     return (
       <div className="Benchmark">
         <h1>Step 1: Load a Smart Contract</h1>
@@ -115,6 +122,9 @@ export default class Benchmark extends Component {
               invalidate those results please tell me.
             </em>
           </p>
+          <h4>🔥🔥 Use Nodesmith? 🔥🔥</h4>
+          <input onClick={this.toggleNodesmith} type="checkbox" name="use-nodesmith" value="use-nodesmith" id="use-nodesmith" defaultChecked={useNodesmith}/> 
+          <label htmlFor="use-nodesmith">Run test using <a href="https://nodesmith.io">nodesmith.io</a></label>
           <p>
             Check the{" "}
             <a href="https://github.com/vrde/erc721-benchmark/blob/master/src/ERC721.js">
@@ -127,18 +137,21 @@ export default class Benchmark extends Component {
             contract={contract}
             owner={owner}
             disabled={!balance}
+            useNodesmith={useNodesmith}
           />
           <Query
             strategy={"tokensViaEnum"}
             contract={contract}
             owner={owner}
             disabled={!balance}
+            useNodesmith={useNodesmith}
           />
           <Query
             strategy={"tokensViaEnumBatch"}
             contract={contract}
             owner={owner}
             disabled={!balance}
+            useNodesmith={useNodesmith}
           />
         </div>
       </div>

src/ERC721.js

@@ -1,12 +1,19 @@
 import { sha3, padLeft } from "web3-utils";
+import Web3 from 'web3';
 
 import { hasMethod } from "./utils";
 import config from "./config";
 import NFT from "./static/abis/NFT.json";
 
 export default class ERC721 {
-  constructor(address) {
-    this.web3 = config.web3;
+  constructor(address, useNodesmith) {
+    this.useNodesmith = useNodesmith;
+
+    // If useNodesmith is true, create a new Web3 provider (will need to get your own API key for your site)
+    this.web3 = useNodesmith ?
+      new Web3(new Web3.providers.HttpProvider('https://ethereum.api.nodesmith.io/v1/mainnet/jsonrpc?apiKey=69bbfd65cae84e6bae3c62c2bde588c6')) :
+      config.web3;
+
     this.address = address;
     this.contract = new this.web3.eth.Contract(NFT, address);
   }

src/Query.js

@@ -34,9 +34,10 @@ export default class Query extends Component {
   }
 
   async fetchTokens() {
-    const { strategy, contract, owner, disabled } = this.props;
+    const { strategy, contract, owner, disabled, useNodesmith } = this.props;
 
-    const erc721 = new ERC721(contract);
+    console.log(`Fetching Using nodesmith = ${useNodesmith}`);
+    const erc721 = new ERC721(contract, useNodesmith);
 
     this.setState({
       fetching: true,