add disabled state

src/app/home/components/Keystore.tsx

@@ -6,7 +6,7 @@ import { useRLN, useStore } from "@/hooks";
 import { useKeystore } from "@/hooks/useKeystore";
 
 export const Keystore: React.FunctionComponent<{}> = () => {
-  const { keystoreCredentials } = useStore();
+  const { walletConnected, keystoreCredentials } = useStore();
   const { onReadCredentials, onRegisterCredentials } = useKeystore();
 
   const { password, onPasswordChanged } = usePassword();
@@ -64,7 +64,11 @@ export const Keystore: React.FunctionComponent<{}> = () => {
 
       <Block className="mt-4">
         <p className="text-s mb-2">Generate new credentials from wallet and register on chain</p>
-        <Button onClick={() => onRegisterCredentials(password)}>
+        <Button
+          disabled={!walletConnected}
+          onClick={() => onRegisterCredentials(password)}
+          className={walletConnected ? "" : "cursor-not-allowed"}
+        >
           Register new credentials
         </Button>
       </Block>

src/app/home/components/Waku.tsx

@@ -2,7 +2,9 @@ import React from "react";
 import { Block } from "@/components/Block";
 import { Subtitle } from "@/components/Subtitle";
 import { Button } from "@/components/Button";
+import { Status } from "@/components/Status";
 import { MessageContent, useWaku } from "@/hooks";
+import { CONTENT_TOPIC } from "@/constants";
 
 export const Waku: React.FunctionComponent<{}> = () => {
   const { onSend, messages } = useWaku();
@@ -20,9 +22,12 @@ export const Waku: React.FunctionComponent<{}> = () => {
 
   return (
     <Block className="mt-10">
-      <Subtitle>
+      <Block>
-        Waku
+        <Subtitle>
-      </Subtitle>
+          Waku
+        </Subtitle>
+        <p className="text-sm">Content topic: {CONTENT_TOPIC}</p>
+      </Block>
 
       <Block className="mt-4">
         <label

src/components/Button.tsx

@@ -1,12 +1,14 @@
 type ButtonProps = {
   children: any;
   className?: string;
+  disabled?: boolean;
   onClick?: (e?: any) => void;
 };
 
 export const Button: React.FunctionComponent<ButtonProps> = (props) => {
   return (
     <button
+      disabled={props.disabled}
       onClick={props.onClick}
       className={`${
         props.className || ""

src/hooks/useStore.ts

@@ -22,6 +22,9 @@ type StoreResult = {
 
   wakuStatus: string;
   setWakuStatus: (v: string) => void;
+
+  walletConnected: boolean;
+  setWalletConnected: () => void;
 };
 
 const DEFAULT_VALUE = "none";
@@ -41,6 +44,9 @@ export const useStore = create<StoreResult>((set) => {
     credentials: undefined,
     setCredentials: (v: undefined | IdentityCredential) =>
       set((state) => ({ ...state, credentials: v })),
+
+    walletConnected: false,
+    setWalletConnected: () => set((state) => ({ ...state, walletConnected: true })),
   };
 
   const wakuModule = {

src/hooks/useWallet.ts

@@ -9,7 +9,7 @@ type UseWalletResult = {
 
 export const useWallet = (): UseWalletResult => {
   const { rln } = useRLN();
-  const { setEthAccount, setChainID } = useStore();
+  const { setEthAccount, setChainID, setWalletConnected } = useStore();
 
   React.useEffect(() => {
     const ethereum = window.ethereum;
@@ -51,6 +51,7 @@ export const useWallet = (): UseWalletResult => {
     try {
       await window.ethereum.request({ method: 'eth_requestAccounts' });
       await rln.initRLNContract(rln.rlnInstance);
+      setWalletConnected();
     } catch(error) {
       console.error("Failed to conenct to wallet.");
     }