Connect to the Ethereum Wallet

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. If you want to use ethers as a package to connect to web3 wallet you can follow this guide and skip the next step. Next step demonstrates how to use @useDapp for this purpose.

In this we will use ethers to keep amount of dependencies to minimum but feel free to use other packages.

The SDK use ethers version 5.4.6 due to incompatibility between minor versions it is recommended to use this version.

Delete the template App component:

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

Hook for connecting to Wallet #

In this example we will use this hook to connect to a Wallet.

Keep in mind this hook is barebones and can’t handle multiple networks, in next chapter it will be shown how to use different web3 connector.

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:

MULTICALL_ADDRESS is an address to multicall smart contract that allows aggregating multiple contract calls into one, thus reducing number of calls to blockchain needed.

Example multicall addresses: - Mainnet: 0xeefba1e63905ef1d7acba5a8513c70307c1ce441, - Ropsten: 0x53c43764255c17bd724f74c4ef150724ac50a3ed

But if you want you can deploy your own multicall smart contract.

const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
const SUPPORTED_CHAIN_ID = 1;

export function MainPage() {
  const { activate, deactivate, account, provider } =
    useWeb3Connect(SUPPORTED_CHAIN_ID);

  return (
    <Wrapper>
      <TopBar
        logo={pollingIcon}
        logoWidth={84}
        title={"WakuConnect Poll Demo"}
        theme={orangeTheme}
        activate={activate}
        account={account}
        deactivate={deactivate}
      />
      //Place for poll or vote component
    </Wrapper>
  );
}

Page #

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:

export function App() {
  return (
    <Wrapper>
      <GlobalStyle />
      <MainPage />
    </Wrapper>
  );
}

Your index.tsx should now be:

import React from "react";
import styled from "styled-components";
import { Poll } from "./components/Poll";
import { GlobalStyle, TopBar } from "@waku/vote-poll-sdk-react-components";
import pollingIcon from "./assets/images/pollingIcon.png";
import { orangeTheme } from "@waku/vote-poll-sdk-react-components/dist/esm/src/style/themes";
import ReactDOM from "react-dom";
import { BrowserRouter, useLocation } from "react-router-dom";
import { Route, Switch } from "react-router";
import { useWeb3Connect } from "./hooks/useWeb3Connect";

const MULTICALL_ADDRESS = "0xeefba1e63905ef1d7acba5a8513c70307c1ce441";
const SUPPORTED_CHAIN_ID = 1;

export function MainPage({ tokenAddress }: { tokenAddress: string }) {
  const { activate, deactivate, account, provider } =
    useWeb3Connect(SUPPORTED_CHAIN_ID);

  return (
    <Wrapper>
      <TopBar
        logo={pollingIcon}
        logoWidth={84}
        title={"WakuConnect Poll Demo"}
        theme={orangeTheme}
        activate={activate}
        account={account}
        deactivate={deactivate}
      />
      //Place for poll or vote component
    </Wrapper>
  );
}

export function App() {
  const location = useLocation();
  const tokenAddress = new URLSearchParams(location.search).get("token");

  return (
    <Wrapper>
      <GlobalStyle />
      <MainPage tokenAddress={tokenAddress ?? TOKEN_ADDRESS} />
    </Wrapper>
  );
}

const Wrapper = styled.div`
  height: 100%;
  width: 100%;
`;

ReactDOM.render(
  <div style={{ height: "100%" }}>
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={App} />
      </Switch>
    </BrowserRouter>
  </div>,
  document.getElementById("root")
);

Back Next: Connect using useDapp