From a2b6947b737449a230ba578327f5e26cc04aa6ff Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Thu, 12 Aug 2021 14:34:25 +1000
Subject: [PATCH] Add button to connect to wallet

---
 examples/eth-dm/src/App.tsx           | 22 ++++--------------
 examples/eth-dm/src/ConnectWallet.tsx | 33 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 17 deletions(-)
 create mode 100644 examples/eth-dm/src/ConnectWallet.tsx

diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx
index a43b1ac15d..04dd04a1b1 100644
--- a/examples/eth-dm/src/App.tsx
+++ b/examples/eth-dm/src/App.tsx
@@ -3,7 +3,6 @@ import '@ethersproject/shims';
 import React, { useEffect, useState } from 'react';
 import './App.css';
 import { Waku } from 'js-waku';
-import { ethers } from 'ethers';
 import { Signer } from '@ethersproject/abstract-signer';
 import { KeyPair } from './crypto';
 import { Message } from './messaging/Messages';
@@ -26,8 +25,7 @@ import {
   initWaku,
   PublicKeyContentTopic,
 } from './waku';
-
-declare let window: any;
+import ConnectWallet from './ConnectWallet';
 
 const theme = createMuiTheme({
   palette: {
@@ -77,20 +75,6 @@ function App() {
 
   const classes = useStyles();
 
-  useEffect(() => {
-    try {
-      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');
-    }
-  }, [address, signer]);
-
   // Waku initialization
   useEffect(() => {
     if (waku) return;
@@ -200,6 +184,10 @@ function App() {
 
         <div className={classes.container}>
           <main className={classes.main}>
+            <fieldset>
+              <legend>Wallet</legend>
+              <ConnectWallet setAddress={setAddress} setSigner={setSigner} />
+            </fieldset>
             <fieldset>
               <legend>Eth-DM Key Pair</legend>
               <KeyPairHandling
diff --git a/examples/eth-dm/src/ConnectWallet.tsx b/examples/eth-dm/src/ConnectWallet.tsx
new file mode 100644
index 0000000000..cd575e2da5
--- /dev/null
+++ b/examples/eth-dm/src/ConnectWallet.tsx
@@ -0,0 +1,33 @@
+import { Button } from '@material-ui/core';
+import React from 'react';
+import { Signer } from '@ethersproject/abstract-signer';
+import { ethers } from 'ethers';
+
+declare let window: any;
+
+interface Props {
+  setAddress: (address: string) => void;
+  setSigner: (signer: Signer) => void;
+}
+
+export default function ConnectWallet({ setAddress, setSigner }: Props) {
+  const connectWallet = () => {
+    try {
+      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');
+    }
+  };
+
+  return (
+    <Button variant="contained" color="primary" onClick={connectWallet}>
+      Connect Wallet
+    </Button>
+  );
+}