Merge pull request #121 from indexnetwork/fix

Fix

web-app/package.json

@@ -45,6 +45,7 @@
     "next": "^14.0.3",
     "next-plausible": "^3.11.3",
     "pino-pretty": "^10.3.1",
+    "plausible-tracker": "^0.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",

web-app/src/components/sections/IndexConversation/IndexConversationHeader.tsx

@@ -3,6 +3,7 @@ import { useApi } from "@/context/APIContext";
 import { useApp } from "@/context/AppContext";
 import { useAuth } from "@/context/AuthContext";
 import { useRole } from "@/hooks/useRole";
+import { ITEM_STARRED, trackEvent } from "@/services/tracker";
 import Avatar from "components/base/Avatar";
 import Button from "components/base/Button";
 import IconStar from "components/base/Icon/IconStar";
@@ -83,6 +84,7 @@ export const IndexConversationHeader: FC = () => {
           toast.success(
             `Index ${value ? "added to" : "removed from"} starred indexes list`,
           );
+          trackEvent(ITEM_STARRED);
         } else {
           await api!.ownIndex(session!.did.parent, viewedIndex.id, value);
           if (value) {

web-app/src/components/sections/IndexConversation/TabContainer/IndexItemsTab.tsx

@@ -7,6 +7,7 @@ import LinkInput from "@/components/site/input/LinkInput";
 import { useApi } from "@/context/APIContext";
 import { useApp } from "@/context/AppContext";
 import { useRole } from "@/hooks/useRole";
+import { ITEM_ADDED, trackEvent } from "@/services/tracker";
 import { IndexItem } from "@/types/entity";
 import { filterValidUrls, isStreamID, removeDuplicates } from "@/utils/helper";
 import { useCallback, useEffect, useState } from "react";
@@ -111,8 +112,6 @@ export default function IndexItemsTabSection() {
 
       const items = [...urls, ...indexIds];
 
-      console.log("items", indexIds);
-
       setAddItemLoading(true);
       setProgress({ current: 0, total: items.length });
 
@@ -128,6 +127,7 @@ export default function IndexItemsTabSection() {
           const createdItem = await api!.createItem(viewedIndex.id, itemId);
 
           setAddedItem(createdItem);
+          trackEvent(ITEM_ADDED);
         } catch (error) {
           console.error("Error adding item", error);
           toast.error(`Error adding item: ${item}`);

web-app/src/components/sections/IndexConversation/TabContainer/index.tsx

@@ -80,7 +80,6 @@ export default function TabContainer() {
         flex: 1,
         display: "flex",
         height: "100%",
-        overflow: "hidden",
         flexDirection: "column",
       }}
     >

web-app/src/components/site/indexes/AskIndexes/index.tsx

@@ -2,6 +2,7 @@ import { useApi } from "@/context/APIContext";
 import { useApp } from "@/context/AppContext";
 import { useAuth } from "@/context/AuthContext";
 import { useRouteParams } from "@/hooks/useRouteParams";
+import { CHAT_STARTED, trackEvent } from "@/services/tracker";
 import { useChat, type Message } from "ai/react";
 import { ButtonScrollToBottom } from "components/ai/button-scroll-to-bottom";
 import { ChatList } from "components/ai/chat-list";
@@ -44,7 +45,7 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
 
   const { session } = useAuth();
   const { viewedIndex } = useApp();
-  const { isIndex, id } = useRouteParams();
+  const { isIndex, id, discoveryType } = useRouteParams();
   const { ready: apiReady, api } = useApi();
 
   const [editingMessage, setEditingMessage] = useState<Message | undefined>();
@@ -257,6 +258,9 @@ const AskIndexes: FC<AskIndexesProps> = ({ chatID, sources }) => {
                   content: value,
                   role: "user",
                 });
+                trackEvent(CHAT_STARTED, {
+                  type: discoveryType,
+                });
               }}
               isLoading={isLoading}
               input={input}

web-app/src/components/site/input/LinkInput/index.tsx

@@ -19,26 +19,28 @@ export interface LinkInputProps extends InputProps {
   };
 }
 
-const Popover = () => {
+const Popover = ({ onClose }: { onClose: () => void }) => {
   return (
     <div
       style={{
         position: "absolute",
-        top: "100%",
+        top: "calc(100% + 2px)",
         right: 0,
         zIndex: 3,
         background: "white",
         border: "1px solid #E2E8F0",
         borderRadius: "4px",
         padding: "20px",
+        boxShadow: "0px 4px 12px 0px rgba(0,0,0,0.2)",
       }}
     >
       <div
         style={{
           position: "absolute",
           top: "-16.5px",
-          right: "12px",
+          right: "10px",
         }}
+        onClick={onClose}
       >
         <Image
           src={"/images/ic_arrow_up.svg"}
@@ -56,6 +58,25 @@ const Popover = () => {
           lineHeight: "17px",
         }}
       >
+        <div
+          style={{
+            position: "absolute",
+            right: "12px",
+            top: "20px",
+            cursor: "pointer",
+          }}
+          onClick={() => {
+            onClose();
+          }}
+        >
+          <Image
+            src={"/images/ic_close.svg"}
+            alt="Image"
+            width={12}
+            height={12}
+            style={{ marginRight: "8px" }}
+          />
+        </div>
         <Header className={Freizeit.className} level={5}>
           What you can index?
         </Header>
@@ -113,7 +134,7 @@ const LinkInput: React.FC<LinkInputProps> = ({
 }) => {
   const [url, setUrl] = useState("");
   const [showMsg, setShowMsg] = useState(false);
-  const [showPopover, setShowPopover] = useState(false);
+  const [showPopover, setShowPopover] = useState(true);
 
   const handleAdd = () => {
     if (url) {
@@ -126,7 +147,6 @@ const LinkInput: React.FC<LinkInputProps> = ({
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = () => {
     handleAdd();
-    setShowPopover(false);
   };
 
   const handleEnter = (e: any) => {
@@ -150,7 +170,7 @@ const LinkInput: React.FC<LinkInputProps> = ({
         position: "relative",
       }}
     >
-      {showPopover && <Popover />}
+      {showPopover && <Popover onClose={() => setShowPopover(false)} />}
       <Input
         inputSize="xl"
         className={cc(["link-input__input", `link-input-${size}`])}
@@ -184,7 +204,6 @@ const LinkInput: React.FC<LinkInputProps> = ({
         }
         {...inputProps}
         value={url}
-        onFocus={() => setShowPopover(true)}
         onBlur={handleBlur}
         onChange={handleChange}
         onKeyDown={handleEnter}

web-app/src/context/AppContext.tsx

@@ -18,6 +18,7 @@ import { AccessControlCondition, Indexes, Users } from "types/entity";
 import { DEFAULT_CREATE_INDEX_TITLE } from "utils/constants";
 import { v4 as uuidv4 } from "uuid";
 import { CancelTokenSource } from "axios";
+import { INDEX_CREATED, trackEvent } from "@/services/tracker";
 
 type AppContextProviderProps = {
   children: ReactNode;
@@ -245,6 +246,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps) => {
         }
         setIndexes((prevIndexes) => [doc, ...prevIndexes]);
         toast.success("Index created successfully");
+        trackEvent(INDEX_CREATED);
         router.push(`/${doc.id}`);
       } catch (err: any) {
         let message = "";

web-app/src/context/AuthContext.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { WALLET_CONNECTED, trackEvent } from "@/services/tracker";
 import { normalizeAccountId } from "@ceramicnetwork/common";
 import { Cacao, SiweMessage } from "@didtools/cacao";
 import { getAccountId } from "@didtools/pkh-ethereum";
@@ -166,6 +167,7 @@ export const AuthProvider = ({ children }: any) => {
 
       setStatus(AuthStatus.CONNECTED);
       toast.success("Successfully connected to your wallet.");
+      trackEvent(WALLET_CONNECTED);
     } catch (err) {
       console.error("Error during authentication process:", err);
       setStatus(AuthStatus.FAILED);

web-app/src/services/tracker.ts

@@ -0,0 +1,28 @@
+import Plausible from "plausible-tracker";
+
+const plausible = Plausible({
+  domain: "index.network",
+});
+
+const events = {
+  WALLET_CONNECTED: "wallet_connected",
+  INDEX_CREATED: "index_created",
+  CHAT_STARTED: "chat_started",
+  ITEM_ADDED: "item_added",
+  ITEM_STARRED: "item_starred",
+};
+
+const trackEvent = (name: string, props?: Record<string, any>) => {
+  if (process.env.NEXT_PUBLIC_API_URL === "https://index.network/api") {
+    plausible.trackEvent(name, props);
+  }
+  plausible.trackEvent(name, props);
+};
+
+export const WALLET_CONNECTED = events.WALLET_CONNECTED;
+export const INDEX_CREATED = events.INDEX_CREATED;
+export const CHAT_STARTED = events.CHAT_STARTED;
+export const ITEM_ADDED = events.ITEM_ADDED;
+export const ITEM_STARRED = events.ITEM_STARRED;
+
+export { trackEvent };

web-app/yarn.lock

@@ -5096,6 +5096,11 @@ pirates@^4.0.1:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
+plausible-tracker@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/plausible-tracker/-/plausible-tracker-0.3.8.tgz#9b8b322cc41e0e1d6473869ef234deea365a5a40"
+  integrity sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -5800,7 +5805,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5871,7 +5885,14 @@ string_decoder@^1.3.0:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==