add one button for registering creds

src/app/home/components/Header.tsx

@@ -17,7 +17,6 @@ export const Header: React.FunctionComponent<{}> = () => {
         </Button>
       </Block>
       <Status text="Application status" mark={appStatus} />
-      
     </>
   );
 };

src/app/home/components/Keystore.tsx

@@ -2,12 +2,11 @@ import React from "react";
 import { Block, BlockTypes } from "@/components/Block";
 import { Button } from "@/components/Button";
 import { Subtitle } from "@/components/Subtitle";
-import { useRLN, useStore, useWallet } from "@/hooks";
+import { useRLN, useStore } from "@/hooks";
 import { useKeystore } from "@/hooks/useKeystore";
 
 export const Keystore: React.FunctionComponent<{}> = () => {
   const { keystoreCredentials } = useStore();
-  const { onGenerateCredentials } = useWallet();
   const { onReadCredentials, onRegisterCredentials } = useKeystore();
 
   const { password, onPasswordChanged } = usePassword();
@@ -64,15 +63,9 @@ export const Keystore: React.FunctionComponent<{}> = () => {
       </Block>
 
       <Block className="mt-4">
-        <p className="text-s mb-2">Generate new credentials from wallet</p>
-        <Button onClick={onGenerateCredentials}>
-          Generate new credentials
-        </Button>
-        <Button
-          className="ml-5"
-          onClick={() => onRegisterCredentials(password)}
-        >
-          Register credentials
+        <p className="text-s mb-2">Generate new credentials from wallet and register on chain</p>
+        <Button onClick={() => onRegisterCredentials(password)}>
+          Register new credentials
         </Button>
       </Block>
 

src/hooks/useKeystore.ts

@@ -3,6 +3,7 @@ import { useStore } from "./useStore";
 import { useRLN } from "./useRLN";
 import { SEPOLIA_CONTRACT } from "@waku/rln";
 import { StatusEventPayload } from "@/services/rln";
+import { SIGNATURE_MESSAGE } from "@/constants";
 
 type UseKeystoreResult = {
   onReadCredentials: (hash: string, password: string) => void;
@@ -12,20 +13,43 @@ type UseKeystoreResult = {
 export const useKeystore = (): UseKeystoreResult => {
   const { rln } = useRLN();
   const {
-    credentials,
     setActiveCredential,
     setActiveMembershipID,
     setAppStatus,
     setCredentials,
   } = useStore();
 
+  const generateCredentials = async () => {
+    if (!rln?.ethProvider) {
+      console.log("Cannot generate credentials, no provider found.");
+      return;
+    }
+
+    const signer = rln.ethProvider.getSigner();
+    const signature = await signer.signMessage(
+      `${SIGNATURE_MESSAGE}. Nonce: ${randomNumber()}`
+    );
+    const credentials = await rln.rlnInstance?.generateSeededIdentityCredential(
+      signature
+    );
+    return credentials;
+  };
+
   const onRegisterCredentials = React.useCallback(
     async (password: string) => {
-      if (!credentials || !rln?.rlnContract || !password) {
+      if (!rln?.rlnContract || !password) {
+        console.log(`Not registering - missing dependencies: contract-${!!rln?.rlnContract}, password-${!!password}`);
         return;
       }
 
       try {
+        const credentials = await generateCredentials();
+
+        if (!credentials) {
+          console.log("No credentials registered.");
+          return;
+        }
+
         setAppStatus(StatusEventPayload.CREDENTIALS_REGISTERING);
         const membershipInfo = await rln.rlnContract.registerWithKey(
           credentials
@@ -42,7 +66,9 @@ export const useKeystore = (): UseKeystoreResult => {
           },
           password
         );
+
         setActiveCredential(keystoreHash);
+        setCredentials(credentials);
         setActiveMembershipID(membershipID);
         rln.saveKeystore();
         setAppStatus(StatusEventPayload.CREDENTIALS_REGISTERED);
@@ -52,7 +78,7 @@ export const useKeystore = (): UseKeystoreResult => {
         return;
       }
     },
-    [credentials, rln, setActiveCredential, setActiveMembershipID, setAppStatus]
+    [rln, setActiveCredential, setActiveMembershipID, setAppStatus]
   );
 
   const onReadCredentials = React.useCallback(
@@ -81,3 +107,7 @@ export const useKeystore = (): UseKeystoreResult => {
     onReadCredentials,
   };
 };
+
+function randomNumber(): number {
+  return Math.ceil(Math.random() * 1000);
+}

src/hooks/useWallet.ts

@@ -2,16 +2,14 @@ import React from "react";
 import { useStore } from "./useStore";
 import { isEthereumEvenEmitterValid } from "@/utils/ethereum";
 import { useRLN } from "./useRLN";
-import { SIGNATURE_MESSAGE } from "@/constants";
 
 type UseWalletResult = {
   onWalletConnect: () => void;
-  onGenerateCredentials: () => void;
 };
 
 export const useWallet = (): UseWalletResult => {
   const { rln } = useRLN();
-  const { setEthAccount, setChainID, setCredentials } = useStore();
+  const { setEthAccount, setChainID } = useStore();
 
   React.useEffect(() => {
     const ethereum = window.ethereum;
@@ -58,28 +56,7 @@ export const useWallet = (): UseWalletResult => {
     }
   };
 
-  const onGenerateCredentials = React.useCallback(async () => {
-    if (!rln?.ethProvider) {
-      console.log("Cannot generate credentials, no provider found.");
-      return;
-    }
-
-    const signer = rln.ethProvider.getSigner();
-    const signature = await signer.signMessage(
-      `${SIGNATURE_MESSAGE}. Nonce: ${randomNumber()}`
-    );
-    const credentials = await rln.rlnInstance?.generateSeededIdentityCredential(
-      signature
-    );
-    setCredentials(credentials);
-  }, [rln, setCredentials]);
-
   return {
     onWalletConnect,
-    onGenerateCredentials,
   };
 };
-
-function randomNumber(): number {
-  return Math.ceil(Math.random() * 1000);
-}