diff --git a/404.html b/404.html index 2713d2f..bd2afa2 100644 --- a/404.html +++ b/404.html @@ -16,7 +16,7 @@ - + + + + + + +
+ + +
+
+ +
+ + + FAQ + + +
+ + + + + + +
+ + + +

+ FAQ + # +

+

Frequently Asked Questions for developers using js-waku:

+

+ 1. Why should I build a frontend only webapp (no NodeJS backend)? + # +

+

Waku enables dApp to add communication, e.g. interaction between users, in a fully decentralized manner. +A webapp that uses NodeJS as a backend implies that a party runs said NodeJS software in a centralized infrastructure.

+

Despite using Waku & Ethereum, such webapp cannot become decentralized.

+

By building a frontend only webapp, that entirely runs in the browser, one can distribute the frontend code in many manners: +host it, mirror it, have it on GitHub, deploy it on IPFS, etc. +Enabling anyone to download this code and run in the browser, +making the webapp a truly decentralized dApp.

+

+ 2. I am getting a Module parse failed: Unexpected token error + # +

+

When using an older version of babel (used by react-scripts), the following error may appear when running the webapp:

+
./node_modules/multistream-select/src/ls.js 55:2
+Module parse failed: Unexpected token (55:2)
+File was processed with these loaders:
+ * ./node_modules/babel-loader/lib/index.js
+You may need an additional loader to handle the result of these loaders.
+|   await pipe(protocolsReader, lp.decode(), async
+|   /** @type {AsyncIterable<BufferList>} */
+>   source => {
+|     for await (const protocol of source) {
+|       // Remove the newline
+
./node_modules/js-waku/build/module/lib/waku_relay/index.js 228:16
+Module parse failed: Unexpected token (228:16)
+File was processed with these loaders:
+ * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
+You may need an additional loader to handle the result of these loaders.
+|       }
+|
+>       meshPeers?.forEach(peer => {
+|         toSend.add(peer);
+|       });
+

As documented in issue #165, +this error comes from an older babel version. +You need babel version 7.13.2 or above.

+

You can check your version using npm ls:

+
▶ npm ls @babel/preset-env
+waku-pres@0.1.0
+└─┬ react-scripts@4.0.3
+  ├─┬ @svgr/webpack@5.5.0
+  │ └── @babel/preset-env@7.12.17
+  ├─┬ babel-preset-react-app@10.0.0
+  │ └── @babel/preset-env@7.12.1
+  └─┬ workbox-webpack-plugin@5.1.4
+    └─┬ workbox-build@5.1.4
+      └── @babel/preset-env@7.12.17 deduped
+

The best way to fix this is by using a more recent ReactJS stack. +This might not always possible, in this case force the installation of babel 7.14:

+
npm i --save-dev @babel/preset-env@7.14
+rm -rf node_modules package-lock.json
+npm install
+
+ + + +
+ +
+ + +
+ Calendar + Mar 21, 2022 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/docs/guides/01_choose_content_topic/index.html b/docs/guides/01_choose_content_topic/index.html index 5153ff9..5db858e 100644 --- a/docs/guides/01_choose_content_topic/index.html +++ b/docs/guides/01_choose_content_topic/index.html @@ -25,7 +25,7 @@ The format for content topics is as follows: - + + + + + + +
+ + +
+
+ +
+ + + Connect to the Ethereum Wallet useDapp + + +
+ + + + + + +
+ + + +

+ Connect to the Ethereum Wallet + # +

+
+ This section may be skipped if you are adding the poll feature to an existing dApp +that already connects to the user’s wallet. +This section can be used instead of previous step. +It demonstrates how to use @useDapp for wallet connection. +
+ +

In this guide, we use useDApp to access the blockchain.

+
yarn add @usedapp/core@0.4.7
+
+

@usedapp/core must be frozen to version 0.4.7 due to incompatibility between minor versions of ethers.

+

Waku Connect Vote & Poll SDK will be upgraded to the latest version of @usedapp/core and ethers once ethereum-waffle +is released with the latest version of ethers.

+ +
+ +

Delete the template App component:

+
rm -f App.tsx App.css App.test.tsx
+

+ Top bar + # +

+

Use TopBar component to display wallet information. +For that, create a PollPage component that includes the top bar and will include the poll elements. +The component uses ethers to connect to the user’s wallet:

+
export function PollPage() {
+  const { account, library, activateBrowserWallet, deactivate } = useEthers();
+  const [signer, setSigner] = useState<undefined | JsonRpcSigner>(undefined);
+
+  useEffect(() => {
+    if (account) {
+      setSigner(library?.getSigner());
+    } else {
+      // Deactivate signer if signed out
+      setSigner(undefined);
+    }
+  }, [account]);
+
+  return (
+    <div>
+      <TopBar
+        logo={""}
+        logoWidth={84}
+        title={"Poll dApp"}
+        theme={orangeTheme}
+        activate={activateBrowserWallet}
+        account={account}
+        deactivate={deactivate}
+      />
+    </div>
+  );
+}
+

+ Page + # +

+

+ UseDApp + # +

+

Create a config variable that contains the Ethereum network parameters:

+
import { ChainId, DAppProvider, useEthers } from "@usedapp/core";
+
+const config = {
+  readOnlyChainId: ChainId.Mainnet,
+  readOnlyUrls: {
+    [ChainId.Mainnet]: "https://mainnet.infura.io/v3/your-infura-token",
+  },
+  multicallAddresses: {
+    1: "0xeefba1e63905ef1d7acba5a8513c70307c1ce441",
+    3: "0x53c43764255c17bd724f74c4ef150724ac50a3ed",
+  },
+  notifications: {
+    checkInterval: 500,
+    expirationPeriod: 50000,
+  },
+};
+

Replace your-infura-token with your Infura API token.

+

+ Styled-components + # +

+

styled-components is used for easy styling. +Create a Wrapper variable to use in the page component:

+
import styled from "styled-components";
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+

+ Render + # +

+

Finally, create the App component:

+
function App() {
+  return (
+    <Wrapper>
+      <GlobalStyle />
+      <DAppProvider config={config}>
+        <PollPage />
+      </DAppProvider>
+    </Wrapper>
+  );
+}
+

Your index.tsx should now be:

+
import { ChainId, DAppProvider, useEthers } from "@usedapp/core";
+import { GlobalStyle, TopBar } from "@waku/vote-poll-sdk-react-components";
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import { JsonRpcSigner } from "@ethersproject/providers";
+import { orangeTheme } from "@waku/vote-poll-sdk-react-components/dist/cjs/src/style/themes";
+import styled from "styled-components";
+
+const config = {
+  readOnlyChainId: ChainId.Mainnet,
+  readOnlyUrls: {
+    [ChainId.Mainnet]: "https://mainnet.infura.io/v3/your-infura-token",
+  },
+  multicallAddresses: {
+    1: "0xeefba1e63905ef1d7acba5a8513c70307c1ce441",
+    3: "0x53c43764255c17bd724f74c4ef150724ac50a3ed",
+  },
+  notifications: {
+    checkInterval: 500,
+    expirationPeriod: 50000,
+  },
+};
+
+function PollPage() {
+  const { account, library, activateBrowserWallet, deactivate } = useEthers();
+  const [signer, setSigner] = useState<undefined | JsonRpcSigner>(undefined);
+
+  useEffect(() => {
+    if (account) {
+      setSigner(library?.getSigner());
+    } else {
+      // Deactivate signer if signed out
+      setSigner(undefined);
+    }
+  }, [account]);
+
+  return (
+    <div>
+      <TopBar
+        logo={""}
+        logoWidth={84}
+        title={"Poll dApp"}
+        theme={orangeTheme}
+        activate={activateBrowserWallet}
+        account={account}
+        deactivate={deactivate}
+      />
+      //Place for poll or vote component
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <Wrapper>
+      <GlobalStyle />
+      <DAppProvider config={config}>
+        <PollPage />
+      </DAppProvider>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+
+ + + + + + + Back + + +
+ + + +
+ +
+ + +
+ Calendar + Mar 17, 2022 + +
+ + + +
+ + Edit + Edit this page + +
+ + +
+ + + + + + + + +
+ + + +
+ +
+ + + + +
+ + + + +
+ + + + + + + + + + + + + + + + diff --git a/docs/guides/vote_poll_sdk/dapp_creation/index.html b/docs/guides/vote_poll_sdk/dapp_creation/index.html index 44fff82..e1a8d58 100644 --- a/docs/guides/vote_poll_sdk/dapp_creation/index.html +++ b/docs/guides/vote_poll_sdk/dapp_creation/index.html @@ -18,7 +18,7 @@ The Poll & Vote SDK features can only be used by token holders, you must pas - +