diff --git a/src/app/home/components/Header.tsx b/src/app/home/components/Header.tsx index de6fca8..44338a9 100644 --- a/src/app/home/components/Header.tsx +++ b/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 ( <> Waku RLN + + ); }; diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts index 8eae0b4..8539a84 100644 --- a/src/hooks/useWallet.ts +++ b/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, }; }; diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index abda36f..9edbda6 100644 --- a/src/react-app-env.d.ts +++ b/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; on: (name: EthereumEvents, fn: EthereumEventListener) => void; removeListener: (name: EthereumEvents, fn: EthereumEventListener) => void; }; diff --git a/src/services/rln.ts b/src/services/rln.ts index 5cc9904..be2a1b9 100644 --- a/src/services/rln.ts +++ b/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 { + private async initRLNWasm(): Promise { 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 { + public async initRLNContract(rlnInstance: RLNInstance): Promise { + 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 {