Merge pull request #12 from status-im/mainnet-poll-example

.github/workflows/CI.yml

@@ -17,4 +17,22 @@ jobs:
     - run: yarn lint
     - run: yarn build
     - run: yarn test
-    
+  examples:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        example: [ mainnet-poll ]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: yarn install --frozen-lockfile
+        working-directory: examples/${{ matrix.example }}
+      - run: yarn lint
+        working-directory: examples/${{ matrix.example }}
+      - run: yarn build
+        working-directory: examples/${{ matrix.example }}
+      - run: yarn test
+        working-directory: examples/${{ matrix.example }}

examples/mainnet-poll/.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "root": true,
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "browser": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "eslint:recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "no-redeclare": "off",
+    "no-unused-vars": "off",
+    "prefer-const": ["error", {"destructuring": "all"}],
+    "semi": ["error", "never"],
+    "no-extra-semi": "off",
+    "@typescript-eslint/no-extra-semi": "off"
+  }
+}

examples/mainnet-poll/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "semi": false
+}

examples/mainnet-poll/README.md

@@ -0,0 +1,19 @@
+# Mainnet WakuConnect Poll SDK Example
+
+```
+yarn
+yarn start
+```
+
+Then go to https://localhost:8181/
+
+To create or answer a poll, you need to hold SNT token by default on mainnet.
+
+To create or answer a poll, you will need to sign a message with your wallet.
+
+If you do not hold SNT tokens, you can use this demo app with any other mainnet ERC20 token,
+just pass the token contract address to the `token` query parameter.
+
+For example, for DAI:
+
+https://localhost:8181/?token=0x6B175474E89094C44Da98b954EedeAC495271d0F?a=0x93c0c3076f3a08e4671c84c31f1f80d2abd03dd5

examples/mainnet-poll/package.json

@@ -15,31 +15,45 @@
     "lint:prettier": "yarn prettier './{src,test}/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@usedapp/core": "0.5.5",
+    "@usedapp/core": "^0.4.7",
     "@waku/poll-sdk-react-components": "^0.2.0",
     "@waku/poll-sdk-react-hooks": "^0.2.0",
     "@waku/vote-poll-sdk-react-components": "^0.2.0",
-    "ethers": "5.4.6",
+    "crypto-browserify": "^3.12.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
+    "stream-browserify": "^3.0.0",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "@types/chai": "^4.2.21",
     "@types/mocha": "^9.0.0",
     "@types/react": "^17.0.16",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router": "^5.1.17",
+    "@types/react-router-dom": "^5.3.2",
     "@types/styled-components": "^5.1.12",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "^4.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.1",
+    "@typescript-eslint/parser": "^5.8.1",
+    "assert": "^2.0.0",
     "chai": "^4.3.4",
-    "eslint": "^7.32.0",
+    "esbuild-loader": "^2.18.0",
+    "eslint": "^8.6.0",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^6.5.0",
+    "html-webpack-plugin": "^5.5.0",
     "jsdom": "^16.7.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^9.0.3",
     "npm-watch": "^0.11.0",
+    "prettier": "^2.5.1",
+    "process": "^0.11.10",
     "rimraf": "^3.0.2",
     "ts-node": "^10.1.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.5.4",
+    "webpack": "5.48.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.1"
   }
 }

examples/mainnet-poll/src/components/WakuPolling.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useConfig, useEthers } from '@usedapp/core'
 
 import styled from 'styled-components'

examples/mainnet-poll/tsconfig.json

@@ -15,7 +15,7 @@
         "module": "commonjs",
         "forceConsistentCasingInFileNames": true,
         "target": "es6",
-        "typeRoots": [ "./types", "./node_modules/@types", "../../node_modules/@types"]
+        "typeRoots": [ "./types", "./node_modules/@types"]
     },
     "include": [
         "src",

examples/mainnet-poll/webpack.config.js

@@ -1,4 +1,3 @@
-const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const webpack = require('webpack')
@@ -14,7 +13,6 @@ module.exports = (env) => {
         entry: './src/index.tsx',
         output: {
             filename: 'index.[fullhash].js',
-            path: path.join(__dirname, 'dist'),
             publicPath: "/",
         },
         devtool: 'source-map',
@@ -35,7 +33,7 @@ module.exports = (env) => {
                     exclude: /node_modules/,
                     options: {
                         loader: 'tsx',
-                        target: 'es2018',
+                        target: 'es2020',
                     },
                 },
                 {
@@ -52,11 +50,11 @@ module.exports = (env) => {
         },
         optimization: {
             minimizer: [
-              new ESBuildMinifyPlugin({
-                target: 'es2018',
-              }),
+                new ESBuildMinifyPlugin({
+                    target: 'es2020',
+                }),
             ],
-          },
+        },
         plugins: [
             new ForkTsCheckerWebpackPlugin(),
             new HtmlWebpackPlugin({
@@ -73,9 +71,13 @@ module.exports = (env) => {
         devServer: {
             historyApiFallback: true,
             host: '0.0.0.0',
-            stats: 'errors-only',
-            overlay: true,
             hot: true,
+            client: {
+                overlay: true,
+            },
+            devMiddleware: {
+                stats: 'errors-only',
+            }
         },
         stats: 'minimal'
     }

packages/mainnet-poll-example/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "../../.eslintrc.json"
-  ]
-}

packages/mainnet-poll-example/README.md

@@ -1 +0,0 @@
-# Mainnet WakuConnect Poll SDK Example

packages/mainnet-poll-example/prettier.config.js

@@ -1 +0,0 @@
-module.exports = require('../../.prettierrc.json')