feat: connects user wallet while creating profile

components/ProfileCreationForm/ProfileCreationForm.tsx

@@ -1,17 +1,15 @@
 "use client";
 
-
-   // TODO:
-    // 1) Only upload image to IPFS
-    // 2) Call to supabase (add trpc?)
-    // 3) Use react hook form
-    // Fix color schemes
-    // Add connect to wallet while creating profile and get address
-    // 
+// TODO:
+// 1) Only upload image to IPFS (DONE)
+// 2) Call to supabase (add trpc?)
+// 3) Use react hook form
+// Fix color schemes
+// Add connect to wallet while creating profile and get address (DONE)
+//
 
 import React, { useState } from "react";
 
-
 import SubmitLinksSection, { TLink } from "./SubmitLinksSection";
 import UserMetaDetailsSection, {
   TUserMetaDetails,
@@ -20,9 +18,13 @@ import { IconGhost } from "@tabler/icons-react";
 import { BottomGradient } from "./GradiantComponents";
 import { cn } from "@/lib/utils";
 import { useWeb3StorageUtilities } from "@/lib/hooks/useWeb3StorageUtilities";
+import { useConnectWallet } from "@/lib/hooks/useConnectWallet";
 
 const ProfileCreationForm = () => {
   const { uploadFileToWeb3Storage } = useWeb3StorageUtilities();
+  const { isConnected, handleConnectWallet, isSignedIn, handleSignIn } =
+    useConnectWallet();
+
   const [userMetaDetails, setUserMetaDetails] = useState<TUserMetaDetails>({
     username: "",
     bio: "",
@@ -40,19 +42,25 @@ const ProfileCreationForm = () => {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
-    const body = {
-      userName: userMetaDetails.username,
-      bio: userMetaDetails.bio,
+
+    if (!isConnected) {
+      handleConnectWallet();
+    }
+    if (!isSignedIn) {
+      await handleSignIn();
+    }
+
+    // Upload image to IPFS
+    const formImages = {
       profileImage: userMetaDetails.profileImage,
       backgroundImage: userMetaDetails.backgroundImage,
       links: linksData.map((link) => ({
         icon: link.icon,
-        name: link.name,
-        url: link.url,
       })),
     };
-    const cid = await uploadFileToWeb3Storage<typeof body>({ payload: body });
+    const cid = await uploadFileToWeb3Storage<typeof formImages>({
+      payload: formImages,
+    });
     const ipfsUrl = `ipfs://${cid}`;
     console.log("ipfsUrl:", ipfsUrl);
   };

lib/hooks/useConnectWallet.ts

@@ -0,0 +1,43 @@
+import { useSIWE, useModal, SIWESession } from "connectkit";
+import { useAccount } from "wagmi";
+
+export const useConnectWallet = () => {
+  const { setOpen } = useModal();
+  const { isConnected } = useAccount();
+
+  const { data, isReady, isRejected, isLoading, isSignedIn, signOut, signIn } =
+    useSIWE({
+      onSignIn: (session?: SIWESession) => {
+        // Do something with the data
+      },
+      onSignOut: () => {
+        // Do something when signed out
+      },
+    });
+
+  const handleSignIn = async () => {
+    await signIn()?.then((session?: SIWESession) => {
+      // Do something when signed in
+    });
+  };
+
+  const handleSignOut = async () => {
+    await signOut()?.then(() => {
+      // Do something when signed out
+    });
+  };
+
+  return {
+    isSignedIn,
+    isConnected,
+    handleSignIn,
+    handleSignOut,
+    isReady,
+    isRejected,
+    isLoading,
+    handleConnectWallet: function () {
+      setOpen(true);
+    },
+    data,
+  };
+};