Use url path to get ERC20 contract

packages/mainnet-poll-example/package.json

@@ -1,28 +1,13 @@
 {
   "name": "@dappconnect/mainnet-poll-sdk-example",
   "version": "0.1.0",
-  "main": "dist/cjs/src/index.js",
+  "main": "index.js",
-  "module": "dist/esm/src/index.js",
-  "types": "dist/esm/src/index.d.ts",
   "license": "MIT",
-  "watch": {
-    "build": {
-      "patterns": ["src"],
-      "extensions": "ts,tsx",
-      "runOnChangeOnly": false
-    }
-  },
   "scripts": {
-    "watch": "yarn npm-watch",
     "clean:all": "yarn clean && rimraf node_modules/",
     "clean": "rimraf dist/",
-    "copy-assets": "yarn copy-files:cjs && yarn copy-files:esm",
+    "build": "rm -rf dist && webpack --mode=production --env ENV=production",
-    "copy-files:cjs": "copyfiles -u 1 src/**/*.svg src/**/*.png dist/cjs/src",
+    "start": "webpack serve --mode=development --env ENV=development --https --port 8181",
-    "copy-files:esm": "copyfiles -u 1 src/**/*.svg src/**/*.png dist/esm/src",
-    "build": "yarn build:all && yarn copy-assets",
-    "build:all": "yarn run build:esm && yarn run build:cjs",
-    "build:esm": "tsc --module es2020 --target es2017 --outDir dist/esm",
-    "build:cjs": "tsc --outDir dist/cjs",
     "test": "mocha -r jsdom-global/register",
     "lint": "yarn lint:prettier --check && yarn lint:eslint",
     "lint:fix": "yarn lint:prettier --write && yarn lint:eslint --fix",

packages/mainnet-poll-example/src/components/WakuPolling.tsx

@@ -20,12 +20,7 @@ export function WakuPolling({ appName, signer, theme, tokenAddress }: WakuPollin
   const config = useConfig()
   const [showPollCreation, setShowPollCreation] = useState(false)
   const [selectConnect, setSelectConnect] = useState(false)
-  const wakuPolling = useWakuPolling(
+  const wakuPolling = useWakuPolling(appName, tokenAddress, library, config?.multicallAddresses?.[chainId ?? 1337])
-    appName,
-    tokenAddress,
-    library,
-    config?.multicallAddresses?.[chainId ?? 1337]
-  )
   return (
     <Wrapper>
       {showPollCreation && signer && (

packages/mainnet-poll-example/src/index.tsx

@@ -7,16 +7,14 @@ import { TopBar, GlobalStyle } from '@dappconnect/vote-poll-sdk-react-components
 import pollingIcon from './assets/images/pollingIcon.png'
 import { JsonRpcSigner } from '@ethersproject/providers'
 import { orangeTheme } from '@dappconnect/vote-poll-sdk-react-components/dist/esm/src/style/themes'
-import ReactDOM from "react-dom"
+import ReactDOM from 'react-dom'
-import {BrowserRouter} from "react-router-dom"
+import { BrowserRouter, useParams } from 'react-router-dom'
-import {Route, Switch} from "react-router"
+import { Route, Switch } from 'react-router'
-
-const daiTokenContract = "0x6B175474E89094C44Da98b954EedeAC495271d0F";
 
 const config = {
   readOnlyChainId: ChainId.Mainnet,
   readOnlyUrls: {
-    [ChainId.Mainnet]: 'https://infura.io/v3/b4451d780cc64a078ccf2181e872cfcf',
+    [ChainId.Mainnet]: 'https://mainnet.infura.io/v3/b4451d780cc64a078ccf2181e872cfcf',
   },
   multicallAddresses: {
     1: '0xeefba1e63905ef1d7acba5a8513c70307c1ce441',
@@ -30,7 +28,7 @@ const config = {
   },
 }
 
-export function Polling({tokenAddress}: {tokenAddress: string}) {
+export function Polling({ tokenAddress }: { tokenAddress: string }) {
   const { account, library, activateBrowserWallet, deactivate } = useEthers()
   const [signer, setSigner] = useState<undefined | JsonRpcSigner>(undefined)
 
@@ -43,7 +41,7 @@ export function Polling({tokenAddress}: {tokenAddress: string}) {
       <TopBar
         logo={pollingIcon}
         logoWidth={84}
-        title={'Polling Dapp for DAI users'}
+        title={'Polling Dapp for DAI holders'}
         theme={orangeTheme}
         activate={activateBrowserWallet}
         account={account}
@@ -54,12 +52,14 @@ export function Polling({tokenAddress}: {tokenAddress: string}) {
   )
 }
 
-export function DaiPollingPage() {
+export function PollingPage() {
+  const { tokenAddress } = useParams<{ tokenAddress: string }>()
+
   return (
     <Page>
       <GlobalStyle />
       <DAppProvider config={config}>
-        <Polling tokenAddress={daiTokenContract}/>
+        <Polling tokenAddress={tokenAddress} />
       </DAppProvider>
     </Page>
   )
@@ -79,7 +79,7 @@ ReactDOM.render(
   <div style={{ height: '100%' }}>
     <BrowserRouter>
       <Switch>
-          <Route exact path="/dai" component={DaiPollingPage} />
+        <Route exact path="/:tokenAddress" component={PollingPage} />
       </Switch>
     </BrowserRouter>
   </div>,

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

@@ -0,0 +1,82 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const webpack = require('webpack')
+const { ESBuildMinifyPlugin } = require('esbuild-loader')
+
+module.exports = (env) => {
+    let environment = 'development'
+    if (env.ENV) {
+        environment = env.ENV
+    }
+
+    return {
+        entry: './src/index.tsx',
+        output: {
+            filename: 'index.[fullhash].js',
+            path: path.join(__dirname, 'dist'),
+            publicPath: "/",
+        },
+        devtool: 'source-map',
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js', '.json'],
+            fallback: {
+                "buffer": require.resolve("buffer/"),
+                "crypto": require.resolve("crypto-browserify"),
+                "stream": require.resolve("stream-browserify"),
+                "assert": require.resolve("assert")
+            }
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    loader: 'esbuild-loader',
+                    exclude: /node_modules/,
+                    options: {
+                        loader: 'tsx',
+                        target: 'es2018',
+                    },
+                },
+                {
+                    enforce: 'pre',
+                    test: /\.js$/,
+                    exclude: /node_modules/,
+                    loader: 'source-map-loader'
+                },
+                {
+                    test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf|ico)$/,
+                    use: ['file-loader'],
+                },
+            ],
+        },
+        optimization: {
+            minimizer: [
+              new ESBuildMinifyPlugin({
+                target: 'es2018',
+              }),
+            ],
+          },
+        plugins: [
+            new ForkTsCheckerWebpackPlugin(),
+            new HtmlWebpackPlugin({
+                template: 'src/index.html',
+            }),
+            new webpack.DefinePlugin({
+                'process.env.ENV': JSON.stringify(environment),
+            }),
+            new webpack.ProvidePlugin({
+                process: 'process/browser.js',
+                Buffer: ['buffer', 'Buffer'],
+            }),
+        ],
+        devServer: {
+            historyApiFallback: true,
+            host: '0.0.0.0',
+            stats: 'errors-only',
+            overlay: true,
+            hot: true,
+        },
+        stats: 'minimal'
+    }
+}