add connect wallet button

src/app/home/components/Header.tsx

@@ -1,17 +1,23 @@
 import { Block, BlockTypes } from "@/components/Block";
 import { Title } from "@/components/Title";
 import { Status } from "@/components/Status";
-import { useStore } from "@/hooks";
+import { useStore, useWallet } from "@/hooks";
+import { Button } from "@/components/Button";
 
 export const Header: React.FunctionComponent<{}> = () => {
   const { appStatus } = useStore();
+  const { onWalletConnect } = useWallet();
 
   return (
     <>
       <Block className="mb-5" type={BlockTypes.FlexHorizontal}>
         <Title>Waku RLN</Title>
+        <Button onClick={onWalletConnect}>
+          Connect Wallet
+        </Button>
       </Block>
       <Status text="Application status" mark={appStatus} />
+      
     </>
   );
 };

src/hooks/useWallet.ts

@@ -5,6 +5,7 @@ import { useRLN } from "./useRLN";
 import { SIGNATURE_MESSAGE } from "@/constants";
 
 type UseWalletResult = {
+  onWalletConnect: () => void;
   onGenerateCredentials: () => void;
 };
 
@@ -36,6 +37,27 @@ export const useWallet = (): UseWalletResult => {
     };
   }, [setEthAccount, setChainID]);
 
+  const onWalletConnect = async () => {
+    const ethereum = window.ethereum;
+    
+    if (!ethereum) {
+      console.log("No ethereum instance found.");
+      return;
+    }
+
+    if (!rln?.rlnInstance) {
+      console.log("RLN instance is not initialized.");
+      return;
+    }
+    
+    try {
+      await window.ethereum.request({ method: 'eth_requestAccounts' });
+      await rln.initRLNContract(rln.rlnInstance);
+    } catch(error) {
+      console.error("Failed to conenct to wallet.");
+    }
+  };
+
   const onGenerateCredentials = React.useCallback(async () => {
     if (!rln?.ethProvider) {
       console.log("Cannot generate credentials, no provider found.");
@@ -53,6 +75,7 @@ export const useWallet = (): UseWalletResult => {
   }, [rln, setCredentials]);
 
   return {
+    onWalletConnect,
     onGenerateCredentials,
   };
 };

src/react-app-env.d.ts

@@ -4,7 +4,7 @@ type EthereumEvents = "accountsChanged" | "chainChanged";
 type EthereumEventListener = (v: any) => void;
 
 type Ethereum = {
-  request: () => void;
+  request: (v?: any) => Promise<void>;
   on: (name: EthereumEvents, fn: EthereumEventListener) => void;
   removeListener: (name: EthereumEvents, fn: EthereumEventListener) => void;
 };

src/services/rln.ts

@@ -15,6 +15,7 @@ export enum RLNEventsNames {
 
 export enum StatusEventPayload {
   WASM_LOADING = "WASM Blob download in progress...",
+  WASM_LOADED = "WASM Blob downloaded",
   WASM_FAILED = "Failed to download WASM, check console",
   CONTRACT_LOADING = "Connecting to RLN contract",
   CONTRACT_FAILED = "Failed to connect to RLN contract",
@@ -63,10 +64,7 @@ export class RLN implements IRLN {
     }
 
     this.initializing = true;
-    const rlnInstance = await this.initRLNWasm();
-    await this.initRLNContract(rlnInstance);
-
-    this.emitStatusEvent(StatusEventPayload.RLN_INITIALIZED);
+    await this.initRLNWasm();
 
     // emit keystore keys once app is ready
     this.emitKeystoreKeys();
@@ -75,11 +73,10 @@ export class RLN implements IRLN {
     this.initializing = false;
   }
 
-  private async initRLNWasm(): Promise<RLNInstance> {
+  private async initRLNWasm(): Promise<void> {
     this.emitStatusEvent(StatusEventPayload.WASM_LOADING);
     try {
       this.rlnInstance = await create();
-      return this.rlnInstance;
     } catch (error) {
       console.error(
         "Failed at fetching WASM and creating RLN instance: ",
@@ -88,9 +85,14 @@ export class RLN implements IRLN {
       this.emitStatusEvent(StatusEventPayload.WASM_FAILED);
       throw error;
     }
+    this.emitStatusEvent(StatusEventPayload.WASM_LOADED);
   }
 
-  private async initRLNContract(rlnInstance: RLNInstance): Promise<void> {
+  public async initRLNContract(rlnInstance: RLNInstance): Promise<void> {
+    if (this.rlnContract) {
+      return;
+    }
+
     this.emitStatusEvent(StatusEventPayload.CONTRACT_LOADING);
     try {
       this.rlnContract = await RLNContract.init(rlnInstance, {
@@ -102,6 +104,7 @@ export class RLN implements IRLN {
       this.emitStatusEvent(StatusEventPayload.CONTRACT_FAILED);
       throw error;
     }
+    this.emitStatusEvent(StatusEventPayload.RLN_INITIALIZED);
   }
 
   private initKeystore(): Keystore {