From 24db1bce1cb787f3255f138b67209ec7958718aa Mon Sep 17 00:00:00 2001
From: Sasha <oleksandr@status.im>
Date: Tue, 7 Nov 2023 01:26:09 +0100
Subject: [PATCH] add disabled state

---
 src/app/home/components/Keystore.tsx |  8 ++++++--
 src/app/home/components/Waku.tsx     | 11 ++++++++---
 src/components/Button.tsx            |  2 ++
 src/hooks/useStore.ts                |  6 ++++++
 src/hooks/useWallet.ts               |  3 ++-
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/home/components/Keystore.tsx b/src/app/home/components/Keystore.tsx
index 41bd76f..97d76ac 100644
--- a/src/app/home/components/Keystore.tsx
+++ b/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>
diff --git a/src/app/home/components/Waku.tsx b/src/app/home/components/Waku.tsx
index 1e17218..89023dc 100644
--- a/src/app/home/components/Waku.tsx
+++ b/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>
-        Waku
-      </Subtitle>
+      <Block>
+        <Subtitle>
+          Waku
+        </Subtitle>
+        <p className="text-sm">Content topic: {CONTENT_TOPIC}</p>
+      </Block>
 
       <Block className="mt-4">
         <label
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 78585ca..a68c7d2 100644
--- a/src/components/Button.tsx
+++ b/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 || ""
diff --git a/src/hooks/useStore.ts b/src/hooks/useStore.ts
index 9277eab..5308bf6 100644
--- a/src/hooks/useStore.ts
+++ b/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 = {
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
index 920b3fe..f1da451 100644
--- a/src/hooks/useWallet.ts
+++ b/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.");
     }