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 {