Merge pull request #206 from josephpdf/feat/vote-bottom-clean

[feat] Disable vote btn when not logged in

frontend/gostarkme-web/components/modules/Fund/FundVote.tsx

@@ -44,7 +44,21 @@ export const FundVote = ({ upVotes, upVotesNeeded, addr, setLoading, getDetails
         <p className="text-center mx-2">{upVotes.toString()} / {upVotesNeeded.toString()} </p>
         <p>&#127775;</p>
       </div>
-      <Button label="Vote" onClick={vote}></Button>
+      {wallet ? ( // Check if a wallet is connected by evaluating 'wallet' condition
+        <Button label="Vote" onClick={vote} /> // If the wallet is connected, render a button that allows voting
+      ) : ( // If the wallet is not connected, render a disabled vote button with instructions
+        <div className="text-center"> 
+          <Button 
+            label="Vote" 
+            onClick={() => {}} 
+            className="opacity-50 cursor-not-allowed"
+            disabled={true}
+          />
+          <p className="text-sm text-gray-500 mt-2">
+          Connect your wallet to vote
+          </p>
+        </div>
+      )}
     </div>
   );
 };

frontend/gostarkme-web/components/ui/Button.tsx

@@ -7,12 +7,14 @@ interface ButtonProps {
   onClick: () => void;
   Icon?: React.ComponentType<any>;
   className?: string;
+  disabled?: boolean; // Determines if the button is disabled (unclickable).
 }
 
-export const Button = ({ label, onClick, Icon, className }: ButtonProps) => {
+export const Button = ({ label, onClick, Icon, className, disabled }: ButtonProps) => { // Button component that displays either an icon or a label.
   return (
     <button
       onClick={onClick}
+      disabled={disabled} // Makes the button unclickable if 'disabled' is true.
       className={`self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out duration-500 active:duration-0 shadow-gray-400 
                     text-left text-1xl font-light leading-tight ${className}`}
     >