diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx index 12590f370e..82ac3b7ff9 100644 --- a/examples/eth-dm/src/App.tsx +++ b/examples/eth-dm/src/App.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'; import './App.css'; import { Waku } from 'js-waku'; import { ethers } from 'ethers'; -import { Web3Provider } from '@ethersproject/providers'; +import { Signer } from '@ethersproject/abstract-signer'; import { KeyPair } from './crypto'; import { Message } from './messaging/Messages'; import 'fontsource-roboto'; @@ -57,7 +57,7 @@ const useStyles = makeStyles({ function App() { const [waku, setWaku] = useState(); - const [provider, setProvider] = useState(); + const [signer, setSigner] = useState(); const [ethDmKeyPair, setEthDmKeyPair] = useState(); const [publicKeys, setPublicKeys] = useState>(new Map()); const [messages, setMessages] = useState([]); @@ -66,22 +66,18 @@ function App() { const classes = useStyles(); useEffect(() => { - if (provider) return; try { - window.ethereum.request({ method: 'eth_requestAccounts' }); - const _provider = new ethers.providers.Web3Provider(window.ethereum); - setProvider(_provider); + window.ethereum + .request({ method: 'eth_requestAccounts' }) + .then((accounts: string[]) => { + const _provider = new ethers.providers.Web3Provider(window.ethereum); + setAddress(accounts[0]); + setSigner(_provider.getSigner()); + }); } catch (e) { console.error('No web3 provider available'); } - }, [provider]); - - useEffect(() => { - provider - ?.getSigner() - .getAddress() - .then((address) => setAddress(address)); - }); + }, [address, signer]); let peers; if (waku) { @@ -125,7 +121,7 @@ function App() { setEthDmKeyPair={(keyPair) => setEthDmKeyPair(keyPair)} />