Revert "chore: remove @datadog/browser-logs" (#778)

.env.example

@@ -2,7 +2,7 @@ NEXT_PUBLIC_LENS_NETWORK="testnet"
 NEXT_PUBLIC_RELAY_ON=false
 NEXT_PUBLIC_SENTRY_DSN=""
 NEXT_PUBLIC_ALCHEMY_KEY=""
-NEXT_PUBLIC_DATADOG_TOKEN=""
+NEXT_PUBLIC_MIXPANEL_TOKEN=""
 NEXT_PUBLIC_ESTUARY_KEY=""
 NEXT_PUBLIC_IMAGEKIT_ID="lensterdev"
 SENTRY_AUTH_TOKEN=""

package.json

@@ -36,6 +36,7 @@
     "interweave": "^13.0.0",
     "interweave-autolink": "^5.1.0",
     "jwt-decode": "^3.1.2",
+    "mixpanel-browser": "^2.45.0",
     "next": "^12.3.1",
     "next-themes": "^0.2.1",
     "next-transpile-modules": "^9.0.0",
@@ -61,6 +62,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "@types/mixpanel-browser": "^2.38.0",
     "@types/node": "^18.8.3",
     "@types/react": "^18.0.21",
     "@types/react-copy-to-clipboard": "^5.0.4",

src/components/Comment/Feed.tsx

@@ -9,7 +9,7 @@ import { Spinner } from '@components/UI/Spinner';
 import type { LensterPublication } from '@generated/lenstertypes';
 import { CommentFeedDocument, CustomFiltersTypes } from '@generated/types';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { PAGINATION_ROOT_MARGIN } from 'src/constants';
@@ -51,7 +51,7 @@ const Feed: FC<Props> = ({ publication }) => {
       await fetchMore({
         variables: { request: { ...request, cursor: pageInfo?.next }, reactionRequest, profileId }
       });
-      Dogstats.track(PAGINATION.COMMENT_FEED);
+      Mixpanel.track(PAGINATION.COMMENT_FEED);
     },
     rootMargin: PAGINATION_ROOT_MARGIN
   });

src/components/Composer/Comment/New.tsx

@@ -19,10 +19,10 @@ import {
 } from '@generated/types';
 import type { IGif } from '@giphy/js-types';
 import { ChatAlt2Icon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
 import getSignature from '@lib/getSignature';
 import getTags from '@lib/getTags';
 import getUserLocale from '@lib/getUserLocale';
+import { Mixpanel } from '@lib/mixpanel';
 import onError from '@lib/onError';
 import splitSignature from '@lib/splitSignature';
 import trimify from '@lib/trimify';
@@ -93,7 +93,7 @@ const NewComment: FC<Props> = ({ publication }) => {
     setPublicationContent('');
     setAttachments([]);
     resetCollectSettings();
-    Dogstats.track(COMMENT.NEW);
+    Mixpanel.track(COMMENT.NEW);
   };
 
   const generateOptimisticComment = (txHash: string) => {

src/components/Composer/Post/Update/index.tsx

@@ -17,10 +17,10 @@ import {
 } from '@generated/types';
 import type { IGif } from '@giphy/js-types';
 import { PencilAltIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
 import getSignature from '@lib/getSignature';
 import getTags from '@lib/getTags';
 import getUserLocale from '@lib/getUserLocale';
+import { Mixpanel } from '@lib/mixpanel';
 import onError from '@lib/onError';
 import splitSignature from '@lib/splitSignature';
 import trimify from '@lib/trimify';
@@ -93,7 +93,7 @@ const NewUpdate: FC = () => {
     setPublicationContent('');
     setAttachments([]);
     resetCollectSettings();
-    Dogstats.track(POST.NEW);
+    Mixpanel.track(POST.NEW);
   };
 
   const generateOptimisticPost = (txHash: string) => {

src/components/Explore/Feed.tsx

@@ -8,7 +8,7 @@ import { Spinner } from '@components/UI/Spinner';
 import type { LensterPublication } from '@generated/lenstertypes';
 import { CustomFiltersTypes, ExploreFeedDocument, PublicationSortCriteria } from '@generated/types';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { PAGINATION_ROOT_MARGIN } from 'src/constants';
@@ -48,7 +48,7 @@ const Feed: FC<Props> = ({ feedType = PublicationSortCriteria.CuratedProfiles })
       await fetchMore({
         variables: { request: { ...request, cursor: pageInfo?.next }, reactionRequest, profileId }
       });
-      Dogstats.track(PAGINATION.EXPLORE_FEED);
+      Mixpanel.track(PAGINATION.EXPLORE_FEED);
     },
     rootMargin: PAGINATION_ROOT_MARGIN
   });

src/components/Explore/FeedType.tsx

@@ -1,6 +1,6 @@
 import { PublicationSortCriteria } from '@generated/types';
 import { ChatAlt2Icon, CollectionIcon, SparklesIcon, SwitchHorizontalIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import type { Dispatch, FC, ReactNode } from 'react';
@@ -25,7 +25,7 @@ const FeedType: FC<Props> = ({ setFeedType, feedType }) => {
       onClick={() => {
         push({ query: { type: type.toLowerCase() } });
         setFeedType(type);
-        Dogstats.track(`Switch to ${type.toLowerCase()} type in explore`);
+        Mixpanel.track(`Switch to ${type.toLowerCase()} type in explore`);
       }}
       className={clsx(
         {

src/components/Explore/index.tsx

@@ -4,8 +4,8 @@ import Footer from '@components/Shared/Footer';
 import { GridItemEight, GridItemFour, GridLayout } from '@components/UI/GridLayout';
 import MetaTags from '@components/utils/MetaTags';
 import { PublicationSortCriteria } from '@generated/types';
-import { Dogstats } from '@lib/dogstats';
 import isFeatureEnabled from '@lib/isFeatureEnabled';
+import { Mixpanel } from '@lib/mixpanel';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -28,7 +28,7 @@ const Explore: NextPage = () => {
   );
 
   useEffect(() => {
-    Dogstats.track('Pageview', { path: PAGEVIEW.EXPLORE });
+    Mixpanel.track('Pageview', { path: PAGEVIEW.EXPLORE });
   }, []);
 
   return (

src/components/Home/Feed.tsx

@@ -9,7 +9,7 @@ import { Spinner } from '@components/UI/Spinner';
 import type { LensterPublication } from '@generated/lenstertypes';
 import { HomeFeedDocument } from '@generated/types';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { PAGINATION_ROOT_MARGIN } from 'src/constants';
@@ -42,7 +42,7 @@ const Feed: FC = () => {
       await fetchMore({
         variables: { request: { ...request, cursor: pageInfo?.next }, reactionRequest, profileId }
       });
-      Dogstats.track(PAGINATION.HOME_FEED);
+      Mixpanel.track(PAGINATION.HOME_FEED);
     },
     rootMargin: PAGINATION_ROOT_MARGIN
   });

src/components/Home/RecommendedProfiles.tsx

@@ -9,7 +9,7 @@ import type { Profile } from '@generated/types';
 import { RecommendedProfilesDocument } from '@generated/types';
 import { DotsCircleHorizontalIcon, UsersIcon } from '@heroicons/react/outline';
 import { SparklesIcon } from '@heroicons/react/solid';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useState } from 'react';
 import { MISCELLANEOUS } from 'src/tracking';
@@ -76,7 +76,7 @@ const RecommendedProfiles: FC = () => {
           className="bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 border-t dark:border-t-gray-700/80 text-sm w-full rounded-b-xl text-left px-5 py-3 flex items-center space-x-2 text-gray-600 dark:text-gray-300"
           onClick={() => {
             setShowSuggestedModal(true);
-            Dogstats.track(MISCELLANEOUS.OPEN_RECOMMENDED_PROFILES);
+            Mixpanel.track(MISCELLANEOUS.OPEN_RECOMMENDED_PROFILES);
           }}
         >
           <DotsCircleHorizontalIcon className="h-4 w-4" />

src/components/Home/SetProfile.tsx

@@ -1,7 +1,7 @@
 import { Card } from '@components/UI/Card';
 import { MinusCircleIcon, PencilAltIcon, PhotographIcon } from '@heroicons/react/outline';
 import { CheckCircleIcon } from '@heroicons/react/solid';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import clsx from 'clsx';
 import Link from 'next/link';
 import type { FC } from 'react';
@@ -51,7 +51,7 @@ const SetProfile: FC = () => {
       </div>
       <div className="flex items-center space-x-1.5 text-sm font-bold">
         <PencilAltIcon className="w-4 h-4" />
-        <Link href="/settings" onClick={() => Dogstats.track(MISCELLANEOUS.NAVIGATE_UPDATE_PROFILE)}>
+        <Link href="/settings" onClick={() => Mixpanel.track(MISCELLANEOUS.NAVIGATE_UPDATE_PROFILE)}>
           Update profile here
         </Link>
       </div>

src/components/Home/Trending.tsx

@@ -5,7 +5,7 @@ import { ErrorMessage } from '@components/UI/ErrorMessage';
 import type { TagResult } from '@generated/types';
 import { TagSortCriteria, TrendingDocument } from '@generated/types';
 import { TrendingUpIcon } from '@heroicons/react/solid';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import nFormatter from '@lib/nFormatter';
 import Link from 'next/link';
 import type { FC } from 'react';
@@ -54,7 +54,7 @@ const Trending: FC = () => {
             <div key={tag?.tag}>
               <Link
                 href={`/search?q=${tag?.tag}&type=pubs`}
-                onClick={() => Dogstats.track(MISCELLANEOUS.OPEN_TRENDING_TAG)}
+                onClick={() => Mixpanel.track(MISCELLANEOUS.OPEN_TRENDING_TAG)}
               >
                 <div className="font-bold">{tag?.tag}</div>
                 <div className="text-[12px] text-gray-500">{nFormatter(tag?.total)} Publications</div>

src/components/Home/index.tsx

@@ -4,8 +4,8 @@ import BetaWarning from '@components/Home/BetaWarning';
 import Footer from '@components/Shared/Footer';
 import { GridItemEight, GridItemFour, GridLayout } from '@components/UI/GridLayout';
 import MetaTags from '@components/utils/MetaTags';
-import { Dogstats } from '@lib/dogstats';
 import isFeatureEnabled from '@lib/isFeatureEnabled';
+import { Mixpanel } from '@lib/mixpanel';
 import type { NextPage } from 'next';
 import { useEffect } from 'react';
 import { useAppStore } from 'src/store/app';
@@ -21,7 +21,7 @@ import Trending from './Trending';
 
 const Home: NextPage = () => {
   useEffect(() => {
-    Dogstats.track('Pageview', { path: PAGEVIEW.HOME });
+    Mixpanel.track('Pageview', { path: PAGEVIEW.HOME });
   }, []);
 
   const currentProfile = useAppStore((state) => state.currentProfile);

src/components/Layout.tsx

@@ -4,12 +4,13 @@ import { ReferenceModules, UserProfilesDocument } from '@generated/types';
 import getIsAuthTokensAvailable from '@lib/getIsAuthTokensAvailable';
 import getToastOptions from '@lib/getToastOptions';
 import resetAuthData from '@lib/resetAuthData';
+import mixpanel from 'mixpanel-browser';
 import Head from 'next/head';
 import { useTheme } from 'next-themes';
 import type { FC, ReactNode } from 'react';
 import { useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
-import { CHAIN_ID } from 'src/constants';
+import { CHAIN_ID, MIXPANEL_API_HOST, MIXPANEL_TOKEN } from 'src/constants';
 import { useAppPersistStore, useAppStore } from 'src/store/app';
 import { useReferenceModuleStore } from 'src/store/referencemodule';
 import { useAccount, useDisconnect, useNetwork } from 'wagmi';
@@ -19,6 +20,14 @@ import GlobalModals from './Shared/GlobalModals';
 import Navbar from './Shared/Navbar';
 import useIsMounted from './utils/hooks/useIsMounted';
 
+if (MIXPANEL_TOKEN) {
+  mixpanel.init(MIXPANEL_TOKEN, {
+    ignore_dnt: true,
+    api_host: MIXPANEL_API_HOST,
+    batch_requests: false
+  });
+}
+
 interface Props {
   children: ReactNode;
 }

src/components/Mod/Feed.tsx

@@ -8,7 +8,7 @@ import { Spinner } from '@components/UI/Spinner';
 import type { LensterPublication } from '@generated/lenstertypes';
 import { ExploreFeedDocument, PublicationSortCriteria, PublicationTypes } from '@generated/types';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { PAGINATION_ROOT_MARGIN } from 'src/constants';
@@ -44,7 +44,7 @@ const Feed: FC = () => {
       await fetchMore({
         variables: { request: { ...request, cursor: pageInfo?.next }, reactionRequest, profileId }
       });
-      Dogstats.track(PAGINATION.MOD_FEED);
+      Mixpanel.track(PAGINATION.MOD_FEED);
     },
     rootMargin: PAGINATION_ROOT_MARGIN
   });

src/components/Mod/index.tsx

@@ -2,8 +2,8 @@ import Footer from '@components/Shared/Footer';
 import { Card } from '@components/UI/Card';
 import { GridItemEight, GridItemFour, GridLayout } from '@components/UI/GridLayout';
 import MetaTags from '@components/utils/MetaTags';
-import { Dogstats } from '@lib/dogstats';
 import isGardener from '@lib/isGardener';
+import { Mixpanel } from '@lib/mixpanel';
 import type { NextPage } from 'next';
 import { useEffect } from 'react';
 import { APP_NAME } from 'src/constants';
@@ -17,7 +17,7 @@ const Mod: NextPage = () => {
   const currentProfile = useAppStore((state) => state.currentProfile);
 
   useEffect(() => {
-    Dogstats.track('Pageview', { path: PAGEVIEW.MOD });
+    Mixpanel.track('Pageview', { path: PAGEVIEW.MOD });
   }, []);
 
   if (!isGardener(currentProfile?.id)) {

src/components/Notification/Icon.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/client';
 import { CustomFiltersTypes, NotificationCountDocument } from '@generated/types';
 import { LightningBoltIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import Link from 'next/link';
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
@@ -33,7 +33,7 @@ const NotificationIcon: FC = () => {
       onClick={() => {
         setNotificationCount(data?.notifications?.pageInfo?.totalCount || 0);
         setShowBadge(false);
-        Dogstats.track(NOTIFICATION.OPEN);
+        Mixpanel.track(NOTIFICATION.OPEN);
       }}
     >
       <LightningBoltIcon className="w-5 h-5 sm:w-6 sm:h-6" />

src/components/Notification/List.tsx

@@ -13,7 +13,7 @@ import type {
 } from '@generated/types';
 import { CustomFiltersTypes, NotificationsDocument } from '@generated/types';
 import { MailIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { PAGINATION_ROOT_MARGIN } from 'src/constants';
@@ -54,7 +54,7 @@ const List: FC = () => {
       await fetchMore({
         variables: { request: { ...request, cursor: pageInfo?.next } }
       });
-      Dogstats.track(PAGINATION.NOTIFICATION_FEED);
+      Mixpanel.track(PAGINATION.NOTIFICATION_FEED);
     },
     rootMargin: PAGINATION_ROOT_MARGIN
   });

src/components/Notification/index.tsx

@@ -1,6 +1,6 @@
 import MetaTags from '@components/utils/MetaTags';
 import { LightningBoltIcon } from '@heroicons/react/outline';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { APP_NAME } from 'src/constants';
@@ -14,7 +14,7 @@ const Notification: FC = () => {
   const currentProfile = useAppStore((state) => state.currentProfile);
 
   useEffect(() => {
-    Dogstats.track('Pageview', { path: PAGEVIEW.NOTIFICATION });
+    Mixpanel.track('Pageview', { path: PAGEVIEW.NOTIFICATION });
   }, []);
 
   if (!currentProfile) {

src/components/Pages/Contact.tsx

@@ -9,7 +9,7 @@ import { TextArea } from '@components/UI/TextArea';
 import MetaTags from '@components/utils/MetaTags';
 import { PencilAltIcon } from '@heroicons/react/outline';
 import { CheckCircleIcon } from '@heroicons/react/solid';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import { useRouter } from 'next/router';
 import type { FC } from 'react';
 import { useEffect } from 'react';
@@ -28,7 +28,7 @@ const newContactSchema = object({
 
 const Contact: FC = () => {
   useEffect(() => {
-    Dogstats.track('Pageview', { path: PAGEVIEW.CONTACT });
+    Mixpanel.track('Pageview', { path: PAGEVIEW.CONTACT });
   }, []);
 
   const { push } = useRouter();

src/components/Pages/Privacy.tsx

@@ -1,14 +1,14 @@
 import Footer from '@components/Shared/Footer';
 import MetaTags from '@components/utils/MetaTags';
-import { Dogstats } from '@lib/dogstats';
+import { Mixpanel } from '@lib/mixpanel';
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { APP_NAME } from 'src/constants';
 import { PAGEVIEW } from 'src/tracking';
 
 const Privacy: FC = () => {
   useEffect(() => {
-    Dogstats.track('Pageview', { path: PAGEVIEW.PRIVACY });
+    Mixpanel.track('Pageview', { path: PAGEVIEW.PRIVACY });
   }, []);
 
   return (