Feat/community onboarding

apps/discord-bot/src/handlers/onCommentCreateWeb.ts

@@ -38,14 +38,14 @@ export const onCommentCreateWeb = async (
 
   const user = await queryHandler.fetchUserDetailsFromPlatformId("discord",platformId )
 
-  if (user == null || !user.node ) {
+  if (user == null || !user?.node ) {
     return {
       result: false,
       value: "user not signed in from discord or did session has expired",
     };
   }
 
-  const {id} = user.node;
+  const {id} = user?.node;
 
   if (existhreaingThread) {
     const thread = client.channels.cache.get(

apps/discord-bot/src/handlers/onMessageCreate.ts

@@ -66,9 +66,9 @@ export const onMessageCreate = async (message: Message) => {
       .catch(() => {
         return null;
       });
-    const {id} = user.node;
+    const {id} = user?.node;
     //If the user does not have a devnode account, delete it and tell the user to create one
-    if (user == null || !user.node) {
+    if (user == null || !user?.node) {
       await new Promise((r) => setTimeout(r, 3000));
 
       if (existingMessage) {

apps/discord-bot/src/handlers/onThreadCreate.ts

@@ -39,7 +39,7 @@ export const onThreadCreate = async (thread: ThreadChannel) => {
 
   const user = await queryHandler.fetchUserDetailsFromPlatformId("discord", threadOwner.user.id);
 
-  if (user == null || !user.node) {
+  if (user == null || !user?.node) {
     //User account does not exist at all
     await new Promise((r) => setTimeout(r, 3000));
 
@@ -63,7 +63,7 @@ export const onThreadCreate = async (thread: ThreadChannel) => {
   const socialPlatform = await queryHandler.fetchSocialPlatform(thread.guildId as string);
   const {communityId } = socialPlatform.node;
 
-  const {id} = user.node;
+  const {id} = user?.node;
 
   const threadDetails = {
     communityId: communityId as string,

apps/discord-bot/src/handlers/onThreadCreateWeb.ts

@@ -46,14 +46,14 @@ export const onThreadCreateWeb = async (
   if (!channel) return { result: false, value: "channel missing" };
 
   const user = await queryHandler.fetchUserDetailsFromPlatformId("discord", platformId);
-  if (user == null || !user.node ) {
+  if (user == null || !user?.node ) {
     return {
       result: false,
       value: "user not signed in from discord or did session has expired",
     };
   }
 
-  const {id} = user.node;
+  const {id} = user?.node;
 
   const socialPlatform = await queryHandler.fetchSocialPlatform(community as string);
   const {communityId } = socialPlatform.node;

apps/discord-bot/src/index.ts

@@ -132,10 +132,10 @@ const updateCommunities = async () => {
 
 
     const socialPlatformInput = {
-      userId: userRespose.data.createUser.document.id as string,
+      userId: userRespose.data.createUser?.document?.id as string,
       platform: "discord",
       platformId: guild?.id as string,
-      communityId: communityRespose.data.createCommunity.document.id as string,
+      communityId: communityRespose.data.createCommunity?.document?.id as string,
       communityName: guild.name,
       communityAvatar: guild.iconURL() || "",
   };

apps/web/src/components/Button/ConnectWallet/ConnectWalletButton.tsx

@@ -1,20 +1,19 @@
-import {useWeb3Modal} from '@web3modal/react';
-import {useState} from 'react';
-import {useAccount, useDisconnect} from 'wagmi';
+import { useWeb3Modal } from "@web3modal/react";
+import { useState } from "react";
+import { useAccount, useDisconnect } from "wagmi";
 import * as utils from "../../../utils";
-import {EthereumWebAuth, getAccountId} from "@didtools/pkh-ethereum";
-import {DIDSession} from "did-session";
-import {config} from "../../../config";
-import {toast} from "react-toastify";
-import useLocalStorage from "../../../hooks/useLocalStorage";
-import {ConnectWalletProps} from "./types";
+import { EthereumWebAuth, getAccountId } from "@didtools/pkh-ethereum";
+import { DIDSession } from "did-session";
+import { config } from "../../../config";
+import { toast } from "react-toastify";
+import { ConnectWalletProps } from "./types";
+import { useAppDispatch, updateDidSession, updateDid } from "../../../store";
 
 export const ConnectWalletButton = (props: ConnectWalletProps) => {
-  const {open} = useWeb3Modal()
-  const {disconnect} = useDisconnect()
-  const [loading, setLoading] = useState(false)
-  const [, setDid, removeDid] = useLocalStorage("did", "");
-
+  const { open } = useWeb3Modal();
+  const { disconnect } = useDisconnect();
+  const [loading, setLoading] = useState(false);
+  const dispatch = useAppDispatch();
 
   const generateDidSession = async (address: string, connector: any) => {
     const provider = await connector.getProvider();
@@ -24,50 +23,54 @@ export const ConnectWalletButton = (props: ConnectWalletProps) => {
       resources: [`ceramic://*`],
       expiresInSecs: config.didSession.expiresInSecs,
     });
-    props.setDidSession(session.serialize());
-    setDid(session.did.id);
+
+    dispatch(updateDidSession(session.serialize()));
+    dispatch(updateDid(session.did.id));
   };
 
-  const {address, isConnected} = useAccount({
+  const { address, isConnected } = useAccount({
     onConnect(context) {
       if (!context.isReconnected) {
-        generateDidSession(context.address, context.connector).then(() => {
-          props.onSessionCreated(context.address);
-        }).catch(() => {
-          toast.error("Error initiating did session!")
-        });
+        generateDidSession(context.address, context.connector)
+          .then(() => {
+            props.onSessionCreated(context.address);
+          })
+          .catch(() => {
+            toast.error("Error initiating did session!");
+          });
       }
     },
     onDisconnect() {
-      removeDid();
-      props.removeDidSession();
-    }
+      dispatch(updateDid(null));
+      dispatch(updateDidSession(null));
+    },
   });
 
   const onOpen = async () => {
-    setLoading(true)
-    await open()
-    setLoading(false)
-  }
+    setLoading(true);
+    await open();
+    setLoading(false);
+  };
 
   const onClick = async () => {
-    isConnected ? disconnect() : await onOpen()
-  }
+    isConnected ? disconnect() : await onOpen();
+  };
 
   const getAddress = () => {
     return address ? utils.formatWalletAddress(address) : "";
-  }
+  };
 
   return (
     <button
       className={utils.classNames(
         "flex h-[48px] items-center justify-center",
         "rounded-[10px] border-[1px] border-[#DAD8E2] bg-white px-8 py-3 hover:border-[#08010D] focus:outline-none",
-        "font-medium text-[#97929B] hover:text-[#08010D]",
+        "font-medium text-[#97929B] hover:text-[#08010D]"
       )}
       onClick={onClick}
-      disabled={loading}>
+      disabled={loading}
+    >
       {isConnected ? getAddress() : "Connect Wallet"}
     </button>
-  )
-}
+  );
+};

apps/web/src/components/Button/ConnectWallet/types.ts

@@ -1,5 +1,3 @@
 export interface ConnectWalletProps {
   onSessionCreated(address: string): void;
-  setDidSession(session: string): void;
-  removeDidSession(): void;
 }

apps/web/src/components/CommunityAvatar/CommunityAvatar.tsx

@@ -1,29 +1,39 @@
-import {CommunityAvatarProps} from "./types";
+import { CommunityAvatarProps } from "./types";
 import Image from "next/image";
 import * as utils from "../../utils";
 
 export const CommunityAvatar = (props: CommunityAvatarProps) => {
   return (
     <div
-      id="community-avatar"
-      className={utils.classNames(
-        "group relative cursor-pointer",
-        props.classes
-      )}
-      onClick={props.onClick}
+    className={utils.classNames(
+      " inline-block px-5 ",
+      props.selected ? " border-r-[3px] rounded-r-sm border-black" : ""
+    )}
     >
-      <span
-        id="tooltip"
-        className="absolute hidden z-50 group-hover:flex top-1.5 left-20 w-max px-2 py-1 bg-black rounded-lg text-center text-white">
-        {props.name}
-      </span>
-      <Image
-        width={45}
-        height={45}
-        className={props.selected ? `rounded-xl` : `rounded-full hover:rounded-xl`}
-        src={props.image}
-        alt={`${props.name} community`}
-      />
+      <div
+        id="community-avatar"
+        className={utils.classNames(
+          "group relative flex h-12 w-12 cursor-pointer items-center justify-center ",
+          props.classes
+        )}
+        onClick={props.onClick}
+      >
+        <span
+          id="tooltip"
+          className="absolute top-1.5 left-20 z-50 hidden w-max rounded-lg bg-gray-300 px-2 py-1 text-center text-white group-hover:flex"
+        >
+          {props.name}
+        </span>
+        <Image
+          width={props.width ?? 45}
+          height={props.width ?? 45}
+          className={
+            props.selected ? `rounded-xl` : `rounded-full hover:rounded-xl`
+          }
+          src={props.image}
+          alt={`${props.name} community`}
+        />
+      </div>
     </div>
   );
-}
+};

apps/web/src/components/CommunityAvatar/types.ts

@@ -1,4 +1,6 @@
 export interface CommunityAvatarProps {
+  width?: number;
+  height?: number;
   name: string;
   image: string;
   onClick?(): void;