Revert "revert: use mixpanel"

.env.example

@@ -2,7 +2,7 @@ NEXT_PUBLIC_API_URL="https://api-mumbai.lens.dev"
 NEXT_PUBLIC_RELAY_ON=false
 NEXT_PUBLIC_SENTRY_DSN=""
 NEXT_PUBLIC_ALCHEMY_KEY=""
-NEXT_PUBLIC_MIXPANEL_TOKEN=""
+NEXT_PUBLIC_POSTHOG_TOKEN=""
 NEXT_PUBLIC_ESTUARY_KEY=""
 SENTRY_AUTH_TOKEN=""
 SENTRY_IGNORE_API_RESOLUTION_ERROR=true

package.json

@@ -36,11 +36,11 @@
     "interweave": "^13.0.0",
     "interweave-autolink": "^5.1.0",
     "jwt-decode": "^3.1.2",
-    "mixpanel-browser": "^2.45.0",
     "next": "^12.2.6-canary.8",
     "next-themes": "^0.2.0",
     "next-transpile-modules": "^9.0.0",
     "plyr-react": "^5.1.0",
+    "posthog-js": "^1.29.3",
     "react": "^18.2.0",
     "react-cool-inview": "^3.0.1",
     "react-copy-to-clipboard": "^5.1.0",

src/components/Comment/Feed.tsx

@@ -8,7 +8,7 @@ import { Spinner } from '@components/UI/Spinner';
 import { LensterPublication } from '@generated/lenstertypes';
 import { CommentFields } from '@gql/CommentFields';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import React, { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { useAppStore } from 'src/store/app';
@@ -70,7 +70,7 @@ const Feed: FC<Props> = ({ publication, onlyFollowers = false, isFollowing = tru
           profileId: currentProfile?.id ?? null
         }
       });
-      Mixpanel.track(PAGINATION.COMMENT_FEED);
+      Hog.track(PAGINATION.COMMENT_FEED);
     }
   });
 

src/components/Comment/New.tsx

@@ -21,7 +21,7 @@ import { ChatAlt2Icon } from '@heroicons/react/outline';
 import { defaultFeeData, defaultModuleData, getModule } from '@lib/getModule';
 import getSignature from '@lib/getSignature';
 import getTags from '@lib/getTags';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import onError from '@lib/onError';
 import splitSignature from '@lib/splitSignature';
 import trimify from '@lib/trimify';
@@ -79,7 +79,7 @@ const NewComment: FC<Props> = ({ setShowModal, hideCard = false, publication })
     setAttachments([]);
     setSelectedModule(defaultModuleData);
     setFeeData(defaultFeeData);
-    Mixpanel.track(COMMENT.NEW);
+    Hog.track(COMMENT.NEW);
   };
 
   const { isLoading: signLoading, signTypedDataAsync } = useSignTypedData({ onError });

src/components/Crowdfund/New.tsx

@@ -22,8 +22,8 @@ import { PlusIcon } from '@heroicons/react/outline';
 import getIPFSLink from '@lib/getIPFSLink';
 import getSignature from '@lib/getSignature';
 import getTokenImage from '@lib/getTokenImage';
+import { Hog } from '@lib/hog';
 import imagekitURL from '@lib/imagekitURL';
-import { Mixpanel } from '@lib/mixpanel';
 import onError from '@lib/onError';
 import splitSignature from '@lib/splitSignature';
 import uploadMediaToIPFS from '@lib/uploadMediaToIPFS';
@@ -86,11 +86,11 @@ const NewCrowdfund: NextPage = () => {
   const [selectedCurrencySymobol, setSelectedCurrencySymobol] = useState('WMATIC');
 
   useEffect(() => {
-    Mixpanel.track('Pageview', { path: PAGEVIEW.CREATE_CROWDFUND });
+    Hog.track('Pageview', { path: PAGEVIEW.CREATE_CROWDFUND });
   }, []);
 
   const onCompleted = () => {
-    Mixpanel.track(CROWDFUND.NEW);
+    Hog.track(CROWDFUND.NEW);
   };
 
   const { isLoading: signLoading, signTypedDataAsync } = useSignTypedData({ onError });

src/components/Explore/Feed.tsx

@@ -11,7 +11,7 @@ import { CommentFields } from '@gql/CommentFields';
 import { MirrorFields } from '@gql/MirrorFields';
 import { PostFields } from '@gql/PostFields';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import React, { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { useAppStore } from 'src/store/app';
@@ -79,7 +79,7 @@ const Feed: FC<Props> = ({ feedType = PublicationSortCriteria.TopCommented }) =>
           profileId: currentProfile?.id ?? null
         }
       });
-      Mixpanel.track(PAGINATION.EXPLORE_FEED);
+      Hog.track(PAGINATION.EXPLORE_FEED);
     }
   });
 

src/components/Explore/FeedType.tsx

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

src/components/Explore/index.tsx

@@ -4,7 +4,7 @@ import Trending from '@components/Home/Trending';
 import Footer from '@components/Shared/Footer';
 import Seo from '@components/utils/Seo';
 import { PublicationSortCriteria } from '@generated/types';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
@@ -27,7 +27,7 @@ const Explore: NextPage = () => {
   );
 
   useEffect(() => {
-    Mixpanel.track('Pageview', { path: PAGEVIEW.EXPLORE });
+    Hog.track('Pageview', { path: PAGEVIEW.EXPLORE });
   }, []);
 
   return (

src/components/Home/Feed.tsx

@@ -10,7 +10,7 @@ import { CommentFields } from '@gql/CommentFields';
 import { MirrorFields } from '@gql/MirrorFields';
 import { PostFields } from '@gql/PostFields';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import React, { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { useAppStore } from 'src/store/app';
@@ -69,7 +69,7 @@ const Feed: FC = () => {
           profileId: currentProfile?.id ?? null
         }
       });
-      Mixpanel.track(PAGINATION.HOME_FEED);
+      Hog.track(PAGINATION.HOME_FEED);
     }
   });
 

src/components/Home/RecommendedProfiles.tsx

@@ -9,7 +9,7 @@ import { Profile } from '@generated/types';
 import { ProfileFields } from '@gql/ProfileFields';
 import { DotsCircleHorizontalIcon, UsersIcon } from '@heroicons/react/outline';
 import { SparklesIcon } from '@heroicons/react/solid';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import React, { FC, useState } from 'react';
 import { MISCELLANEOUS } from 'src/tracking';
 
@@ -87,7 +87,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);
-            Mixpanel.track(MISCELLANEOUS.OPEN_RECOMMENDED_PROFILES);
+            Hog.track(MISCELLANEOUS.OPEN_RECOMMENDED_PROFILES);
           }}
         >
           <DotsCircleHorizontalIcon className="h-4 w-4" />

src/components/Home/SetProfile.tsx

@@ -1,7 +1,7 @@
 import { Card, CardBody } from '@components/UI/Card';
 import { MinusCircleIcon, PencilAltIcon, PhotographIcon } from '@heroicons/react/outline';
 import { CheckCircleIcon } from '@heroicons/react/solid';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { FC } from 'react';
@@ -49,7 +49,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={() => Mixpanel.track(MISCELLANEOUS.NAVIGATE_UPDATE_PROFILE)}>
+          <Link href="/settings" onClick={() => Hog.track(MISCELLANEOUS.NAVIGATE_UPDATE_PROFILE)}>
             Update profile here
           </Link>
         </div>

src/components/Home/Trending.tsx

@@ -4,7 +4,7 @@ import { Card, CardBody } from '@components/UI/Card';
 import { ErrorMessage } from '@components/UI/ErrorMessage';
 import { TagResult, TagSortCriteria } from '@generated/types';
 import { TrendingUpIcon } from '@heroicons/react/solid';
-import { Mixpanel } from '@lib/mixpanel';
+import { featureEnabled, Hog } from '@lib/hog';
 import nFormatter from '@lib/nFormatter';
 import Link from 'next/link';
 import React, { FC } from 'react';
@@ -31,13 +31,19 @@ const Title = () => {
 };
 
 const Trending: FC = () => {
+  const isFeatureEnabled = featureEnabled('trending-widget');
   const { data, loading, error } = useQuery(TRENDING_QUERY, {
     variables: {
       request: { limit: 7, sort: TagSortCriteria.MostPopular }
     },
+    skip: !isFeatureEnabled,
     pollInterval: 10000
   });
 
+  if (!isFeatureEnabled) {
+    return null;
+  }
+
   if (loading) {
     return (
       <>
@@ -67,7 +73,7 @@ const Trending: FC = () => {
               <div key={tag?.tag}>
                 <Link
                   href={`/search?q=${tag?.tag}&type=pubs`}
-                  onClick={() => Mixpanel.track(MISCELLANEOUS.OPEN_TRENDING_TAG)}
+                  onClick={() => Hog.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,7 +4,7 @@ import Announcement from '@components/Home/Announcement';
 import NewPost from '@components/Publication/New';
 import Footer from '@components/Shared/Footer';
 import Seo from '@components/utils/Seo';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import { NextPage } from 'next';
 import React, { useEffect } from 'react';
 import { useAppStore } from 'src/store/app';
@@ -20,7 +20,7 @@ import Trending from './Trending';
 
 const Home: NextPage = () => {
   useEffect(() => {
-    Mixpanel.track('Pageview', { path: PAGEVIEW.HOME });
+    Hog.track('Pageview', { path: PAGEVIEW.HOME });
   }, []);
 
   const currentProfile = useAppStore((state) => state.currentProfile);

src/components/Layout.tsx

@@ -3,27 +3,21 @@ import { Profile } from '@generated/types';
 import { ProfileFields } from '@gql/ProfileFields';
 import getIsAuthTokensAvailable from '@lib/getIsAuthTokensAvailable';
 import getToastOptions from '@lib/getToastOptions';
+import { posthogInit } from '@lib/hog';
 import resetAuthData from '@lib/resetAuthData';
-import mixpanel from 'mixpanel-browser';
 import Head from 'next/head';
 import { useTheme } from 'next-themes';
 import { FC, ReactNode, useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
-import { CHAIN_ID, MIXPANEL_API_HOST, MIXPANEL_TOKEN } from 'src/constants';
+import { CHAIN_ID } from 'src/constants';
 import { useAppPersistStore, useAppStore } from 'src/store/app';
 import { useAccount, useDisconnect, useNetwork } from 'wagmi';
 
 import Loading from './Loading';
 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
-  });
-}
+posthogInit();
 
 export const USER_PROFILES_QUERY = gql`
   query UserProfiles($ownedBy: [EthereumAddress!]) {

src/components/Notification/Icon.tsx

@@ -1,6 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
 import { LightningBoltIcon } from '@heroicons/react/outline';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import Link from 'next/link';
 import { FC, useEffect, useState } from 'react';
 import { useAppPersistStore, useAppStore } from 'src/store/app';
@@ -41,7 +41,7 @@ const NotificationIcon: FC = () => {
       onClick={() => {
         setNotificationCount(data?.notifications?.pageInfo?.totalCount);
         setShowBadge(false);
-        Mixpanel.track(NOTIFICATION.OPEN);
+        Hog.track(NOTIFICATION.OPEN);
       }}
     >
       <LightningBoltIcon className="w-5 h-5 sm:w-6 sm:h-6" />

src/components/Notification/List.tsx

@@ -8,7 +8,7 @@ import { CollectModuleFields } from '@gql/CollectModuleFields';
 import { MetadataFields } from '@gql/MetadataFields';
 import { ProfileFields } from '@gql/ProfileFields';
 import { MailIcon } from '@heroicons/react/outline';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { useAppStore } from 'src/store/app';
@@ -173,7 +173,7 @@ const List: FC = () => {
           }
         }
       });
-      Mixpanel.track(PAGINATION.NOTIFICATION_FEED);
+      Hog.track(PAGINATION.NOTIFICATION_FEED);
     }
   });
 

src/components/Notification/index.tsx

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

src/components/Pages/Contact.tsx

@@ -9,7 +9,7 @@ import { TextArea } from '@components/UI/TextArea';
 import Seo from '@components/utils/Seo';
 import { PencilAltIcon } from '@heroicons/react/outline';
 import { CheckCircleIcon } from '@heroicons/react/solid';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import { useRouter } from 'next/router';
 import React, { FC, useEffect } from 'react';
 import { APP_NAME, CONTACT_EMAIL } from 'src/constants';
@@ -27,7 +27,7 @@ const newContactSchema = object({
 
 const Contact: FC = () => {
   useEffect(() => {
-    Mixpanel.track('Pageview', { path: PAGEVIEW.CONTACT });
+    Hog.track('Pageview', { path: PAGEVIEW.CONTACT });
   }, []);
 
   const { push } = useRouter();

src/components/Pages/Privacy.tsx

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

src/components/Pages/Thanks.tsx

@@ -1,7 +1,7 @@
 import Footer from '@components/Shared/Footer';
 import Seo from '@components/utils/Seo';
 import { HeartIcon } from '@heroicons/react/outline';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import { useTheme } from 'next-themes';
 import React, { FC, Fragment, ReactNode, useEffect } from 'react';
 import { APP_NAME, STATIC_ASSETS } from 'src/constants';
@@ -38,7 +38,7 @@ const Brand: FC<Props> = ({ name, logo, url, size, children }) => {
 
 const Thanks: FC = () => {
   useEffect(() => {
-    Mixpanel.track('Pageview', { path: PAGEVIEW.THANKS });
+    Hog.track('Pageview', { path: PAGEVIEW.THANKS });
   }, []);
 
   return (

src/components/Profile/Feed.tsx

@@ -11,7 +11,7 @@ import { CommentFields } from '@gql/CommentFields';
 import { MirrorFields } from '@gql/MirrorFields';
 import { PostFields } from '@gql/PostFields';
 import { CollectionIcon } from '@heroicons/react/outline';
-import { Mixpanel } from '@lib/mixpanel';
+import { Hog } from '@lib/hog';
 import React, { FC } from 'react';
 import { useInView } from 'react-cool-inview';
 import { useAppStore } from 'src/store/app';
@@ -98,7 +98,7 @@ const Feed: FC<Props> = ({ profile, type }) => {
           profileId: currentProfile?.id ?? null
         }
       });
-      Mixpanel.track(PAGINATION.PROFILE_FEED);
+      Hog.track(PAGINATION.PROFILE_FEED);
     }
   });