feat: automatically prompt users for wallet connection if not connected for actions

examples/buddybook/src/components/Chain/Create/CreationPreview.tsx

@@ -12,6 +12,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useWaku } from '@waku/react';
 import { LightNode } from '@waku/sdk';
 import { createMessage, encoder } from '@/lib/waku';
+import { useWalletPrompt } from '@/hooks/useWalletPrompt';
 
 interface FormData {
   title: string;
@@ -66,6 +67,8 @@ const ChainCreationForm: React.FC = () => {
    }
   });
 
+  const { ensureWalletConnected } = useWalletPrompt();
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData(prevData => ({
@@ -94,6 +97,9 @@ const ChainCreationForm: React.FC = () => {
 
   const handleCreateChain = (e: React.FormEvent) => {
     e.preventDefault();
+    if (!ensureWalletConnected()) {
+      return;
+    }
     if (validateForm()) {
       setShowModal(true);
     }

examples/buddybook/src/components/Chain/SignChain.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import QRCode from '@/components/QRCode';
 import { v4 as uuidv4 } from 'uuid';
+import { useWalletPrompt } from '@/hooks/useWalletPrompt';
 
 interface SignChainProps {
   block: BlockPayload;
@@ -23,6 +24,7 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
   const { address } = useAccount();
   const { data: ensName } = useEnsName({ address });
   const { node } = useWaku<LightNode>();
+  const { ensureWalletConnected } = useWalletPrompt();
 
   useEffect(() => {
     if (address) {
@@ -100,6 +102,9 @@ const SignChain: React.FC<SignChainProps> = ({ block, chainsData, onSuccess }) =
   });
 
   const handleSign = () => {
+    if (!ensureWalletConnected()) {
+      return;
+    }
     // Add an additional check here before signing
     if (alreadySigned) {
       setError('You have already signed this chain.');

examples/buddybook/src/hooks/useWalletPrompt.ts

@@ -0,0 +1,20 @@
+import { useAccount, useConnect } from 'wagmi'
+
+export function useWalletPrompt() {
+  const { isConnected } = useAccount()
+  const { connect, connectors } = useConnect()
+
+  const ensureWalletConnected = () => {
+    if (!isConnected) {
+      // Find the first available connector (usually injected/metamask)
+      const connector = connectors[0]
+      if (connector) {
+        connect({ connector })
+      }
+      return false
+    }
+    return true
+  }
+
+  return { ensureWalletConnected }
+} 

examples/buddybook/tasks.md

@@ -1,8 +1,11 @@
 - [ x ] waku connections on header should have green/yellow/red color indicator
-  - [ ] clicking on the indicator should show a list of peers 
 - [ x ] chains can't be signed twice by an address
 - [ ] generate waku peer id using the wallet address
 - [ ] telemetry
   - [ x ] disclaimer
   - [ ] functionality
-- [ ] landing page
+- [ ] landing page
+- [ ] look into high initial loading times
+- [ ] fix deployment/hosting
+- [ ] sign shared chain route should show spinner while waiting for the store query to resolve
+- [ ] create chain -> QR modal should have a sharable link instead of the object