feat: added analytics for console

apps/console/src/analytics/events/claimSection/ens-by-api-key-called.ts

@@ -0,0 +1,3 @@
+export const ENS_BY_API_KEY_CALLED = 'ENS_BY_API_KEY_CALLED';
+
+export interface EnsByApiKeyCalledPayload {}

apps/console/src/analytics/events/claimSection/index.ts

@@ -0,0 +1,12 @@
+import {
+  ENS_BY_API_KEY_CALLED,
+  EnsByApiKeyCalledPayload,
+} from './ens-by-api-key-called';
+
+export const CLAIM_SECTION_EVENTS = {
+  ENS_BY_API_KEY_CALLED,
+} as const;
+
+export interface ClaimSectionEventPayload {
+  [ENS_BY_API_KEY_CALLED]: EnsByApiKeyCalledPayload;
+}

apps/console/src/analytics/events/index.ts

@@ -1,17 +1,26 @@
 import { AUTH_EVENTS, AuthEventPayload } from './auth';
+import { CLAIM_SECTION_EVENTS, ClaimSectionEventPayload } from './claimSection';
 import { CODE_EVENTS, CodeEventPayload } from './code';
 import { NAVIGATION_EVENTS, NavigationEventPayload } from './navigation';
+import { NETWORK_EVENTS, NetworkEventPayload } from './network';
 import { PLUGINS_EVENTS, PluginsEventPayload } from './plugins';
+import { SIGN_SECTION_EVENTS, SignSectionEventPayload } from './signSection';
 
 export const EVENTS = {
   ...AUTH_EVENTS,
+  ...CLAIM_SECTION_EVENTS,
   ...CODE_EVENTS,
   ...NAVIGATION_EVENTS,
+  ...NETWORK_EVENTS,
   ...PLUGINS_EVENTS,
+  ...SIGN_SECTION_EVENTS,
 } as const;
 
 export interface EventPayload
   extends CodeEventPayload,
     NavigationEventPayload,
     PluginsEventPayload,
-    AuthEventPayload {}
+    AuthEventPayload,
+    NetworkEventPayload,
+    ClaimSectionEventPayload,
+    SignSectionEventPayload {}

apps/console/src/analytics/events/navigation/dashboard-link-clicked.ts

@@ -0,0 +1,3 @@
+export const DASHBOARD_LINK_CLICKED = 'DASHBOARD_LINK_CLICKED';
+
+export interface DashboardLinkClickedPayload {}

apps/console/src/analytics/events/navigation/index.ts

@@ -1,12 +1,18 @@
+import {
+  DASHBOARD_LINK_CLICKED,
+  DashboardLinkClickedPayload,
+} from './dashboard-link-clicked';
 import { DOCS_LINK_CLICKED, DocsLinkClickedPayload } from './docs-link-clicked';
 import { PROFILE_VIEWED, ProfileViewedPayload } from './profile-viewed';
 
 export const NAVIGATION_EVENTS = {
   DOCS_LINK_CLICKED,
   PROFILE_VIEWED,
+  DASHBOARD_LINK_CLICKED,
 } as const;
 
 export interface NavigationEventPayload {
   [DOCS_LINK_CLICKED]: DocsLinkClickedPayload;
   [PROFILE_VIEWED]: ProfileViewedPayload;
+  [DASHBOARD_LINK_CLICKED]: DashboardLinkClickedPayload;
 }

apps/console/src/analytics/events/network/index.ts

@@ -0,0 +1,9 @@
+import { NETWORK_CHANGED, NetworkChangedPayload } from './network-changed';
+
+export const NETWORK_EVENTS = {
+  NETWORK_CHANGED,
+} as const;
+
+export interface NetworkEventPayload {
+  [NETWORK_CHANGED]: NetworkChangedPayload;
+}

apps/console/src/analytics/events/network/network-changed.ts

@@ -0,0 +1,5 @@
+export const NETWORK_CHANGED = 'NETWORK_CHANGED';
+
+export interface NetworkChangedPayload {
+  chainId: number;
+}

apps/console/src/analytics/events/plugins/efp-disabled.ts

@@ -0,0 +1,3 @@
+export const EFP_DISABLED = 'EFP_DISABLED';
+
+export interface EfpDisabledPayload {}

apps/console/src/analytics/events/plugins/index.ts

@@ -1,23 +1,53 @@
+import { EFP_DISABLED, EfpDisabledPayload } from './efp-disabled';
+import { EFP_ENABLED, EfpEnabledPayload } from './efp-enabled';
+import {
+  JUST_VERIFIED_DISABLED,
+  JustVerifiedDisabledPayload,
+} from './just-verified-disabled';
 import {
   JUST_VERIFIED_ENABLED,
   JustVerifiedEnabledPayload,
 } from './just-verified-enabled';
-import { EFP_ENABLED, EfpEnabledPayload } from './efp-enabled';
-import { POAP_ENABLED, PoapEnabledPayload } from './poap-enabled';
 import {
   JUST_VERIFIED_EVENTS,
   JustVerifiedEventsPayload,
 } from './justVerified';
+import { POAP_DISABLED, PoapDisabledPayload } from './poap-disabled';
+import { POAP_ENABLED, PoapEnabledPayload } from './poap-enabled';
+import {
+  TALENT_PROTOCOL_DISABLED,
+  TalentProtocolDisabledPayload,
+} from './talent-protocol-disabled';
+import {
+  TALENT_PROTOCOL_ENABLED,
+  TalentProtocolEnabledPayload,
+} from './talent-protocol-enabled';
+import { XMTP_DISABLED, XmtpDisabledPayload } from './xmtp-disabled';
+import { XMTP_ENABLED, XmtpEnabledPayload } from './xmtp-enabled';
 
 export const PLUGINS_EVENTS = {
+  JUST_VERIFIED_DISABLED,
   JUST_VERIFIED_ENABLED,
+  EFP_DISABLED,
   EFP_ENABLED,
+  POAP_DISABLED,
   POAP_ENABLED,
+  TALENT_PROTOCOL_DISABLED,
+  TALENT_PROTOCOL_ENABLED,
+  XMTP_DISABLED,
+  XMTP_ENABLED,
   ...JUST_VERIFIED_EVENTS,
 } as const;
 
 export interface PluginsEventPayload extends JustVerifiedEventsPayload {
+  [JUST_VERIFIED_DISABLED]: JustVerifiedDisabledPayload;
   [JUST_VERIFIED_ENABLED]: JustVerifiedEnabledPayload;
+  [EFP_DISABLED]: EfpDisabledPayload;
   [EFP_ENABLED]: EfpEnabledPayload;
+  [POAP_DISABLED]: PoapDisabledPayload;
   [POAP_ENABLED]: PoapEnabledPayload;
+  [TALENT_PROTOCOL_DISABLED]: TalentProtocolDisabledPayload;
+  [TALENT_PROTOCOL_ENABLED]: TalentProtocolEnabledPayload;
+  [XMTP_DISABLED]: XmtpDisabledPayload;
+  [XMTP_ENABLED]: XmtpEnabledPayload;
 }

apps/console/src/analytics/events/plugins/just-verified-disabled.ts

@@ -0,0 +1,3 @@
+export const JUST_VERIFIED_DISABLED = 'JUST_VERIFIED_DISABLED';
+
+export interface JustVerifiedDisabledPayload {}

apps/console/src/analytics/events/plugins/justVerified/discord-disabled.ts

@@ -0,0 +1,3 @@
+export const DISCORD_DISABLED = 'DISCORD_DISABLED';
+
+export interface DiscordDisabledPayload {}

apps/console/src/analytics/events/plugins/justVerified/email-disabled.ts

@@ -0,0 +1,3 @@
+export const EMAIL_DISABLED = 'EMAIL_DISABLED';
+
+export interface EmailDisabledPayload {}

apps/console/src/analytics/events/plugins/justVerified/github-disabled.ts

@@ -0,0 +1,3 @@
+export const GITHUB_DISABLED = 'GITHUB_DISABLED';
+
+export interface GithubDisabledPayload {}

apps/console/src/analytics/events/plugins/justVerified/index.ts

@@ -1,21 +1,39 @@
+import { DISCORD_DISABLED, DiscordDisabledPayload } from './discord-disabled';
 import { DISCORD_ENABLED, DiscordEnabledPayload } from './discord-enabled';
+import { EMAIL_DISABLED, EmailDisabledPayload } from './email-disabled';
 import { EMAIL_ENABLED, EmailEnabledPayload } from './email-enabled';
+import { GITHUB_DISABLED, GithubDisabledPayload } from './github-disabled';
 import { GITHUB_ENABLED, GithubEnabledPayload } from './github-enabled';
+import {
+  TELEGRAM_DISABLED,
+  TelegramDisabledPayload,
+} from './telegram-disabled';
 import { TELEGRAM_ENABLED, TelegramEnabledPayload } from './telegram-enabled';
+import { TWITTER_DISABLED, TwitterDisabledPayload } from './twitter-disabled';
 import { TWITTER_ENABLED, TwitterEnabledPayload } from './twitter-enabled';
 
 export const JUST_VERIFIED_EVENTS = {
+  DISCORD_DISABLED,
   DISCORD_ENABLED,
+  EMAIL_DISABLED,
   EMAIL_ENABLED,
+  GITHUB_DISABLED,
   GITHUB_ENABLED,
+  TELEGRAM_DISABLED,
   TELEGRAM_ENABLED,
+  TWITTER_DISABLED,
   TWITTER_ENABLED,
 } as const;
 
 export interface JustVerifiedEventsPayload {
+  [DISCORD_DISABLED]: DiscordDisabledPayload;
   [DISCORD_ENABLED]: DiscordEnabledPayload;
+  [EMAIL_DISABLED]: EmailDisabledPayload;
   [EMAIL_ENABLED]: EmailEnabledPayload;
+  [GITHUB_DISABLED]: GithubDisabledPayload;
   [GITHUB_ENABLED]: GithubEnabledPayload;
+  [TELEGRAM_DISABLED]: TelegramDisabledPayload;
   [TELEGRAM_ENABLED]: TelegramEnabledPayload;
+  [TWITTER_DISABLED]: TwitterDisabledPayload;
   [TWITTER_ENABLED]: TwitterEnabledPayload;
 }

apps/console/src/analytics/events/plugins/justVerified/telegram-disabled.ts

@@ -0,0 +1,3 @@
+export const TELEGRAM_DISABLED = 'TELEGRAM_DISABLED';
+
+export interface TelegramDisabledPayload {}

apps/console/src/analytics/events/plugins/justVerified/twitter-disabled.ts

@@ -0,0 +1,3 @@
+export const TWITTER_DISABLED = 'TWITTER_DISABLED';
+
+export interface TwitterDisabledPayload {}

apps/console/src/analytics/events/plugins/poap-disabled.ts

@@ -0,0 +1,3 @@
+export const POAP_DISABLED = 'POAP_DISABLED';
+
+export interface PoapDisabledPayload {}

apps/console/src/analytics/events/plugins/talent-protocol-disabled.ts

@@ -0,0 +1,3 @@
+export const TALENT_PROTOCOL_DISABLED = 'TALENT_PROTOCOL_DISABLED';
+
+export interface TalentProtocolDisabledPayload {}

apps/console/src/analytics/events/plugins/talent-protocol-enabled.ts

@@ -0,0 +1,3 @@
+export const TALENT_PROTOCOL_ENABLED = 'TALENT_PROTOCOL_ENABLED';
+
+export interface TalentProtocolEnabledPayload {}

apps/console/src/analytics/events/plugins/xmtp-disabled.ts

@@ -0,0 +1,3 @@
+export const XMTP_DISABLED = 'XMTP_DISABLED';
+
+export interface XmtpDisabledPayload {}

apps/console/src/analytics/events/plugins/xmtp-enabled.ts

@@ -0,0 +1,3 @@
+export const XMTP_ENABLED = 'XMTP_ENABLED';
+
+export interface XmtpEnabledPayload {}

apps/console/src/analytics/events/signSection/any-ens-selected.ts

@@ -0,0 +1,3 @@
+export const ANY_ENS_SELECTED = 'ANY_ENS_SELECTED';
+
+export interface AnyEnsSelectedPayload {}

apps/console/src/analytics/events/signSection/claimable-ens-selected.ts

@@ -0,0 +1,3 @@
+export const CLAIMABLE_ENS_SELECTED = 'CLAIMABLE_ENS_SELECTED';
+
+export interface ClaimableEnsSelectedPayload {}

apps/console/src/analytics/events/signSection/index.ts

@@ -0,0 +1,21 @@
+import { ANY_ENS_SELECTED, AnyEnsSelectedPayload } from './any-ens-selected';
+import {
+  CLAIMABLE_ENS_SELECTED,
+  ClaimableEnsSelectedPayload,
+} from './claimable-ens-selected';
+import {
+  SPECIFIC_ENS_SELECTED,
+  SpecificEnsSelectedPayload,
+} from './specific-ens-selected';
+
+export const SIGN_SECTION_EVENTS = {
+  ANY_ENS_SELECTED,
+  SPECIFIC_ENS_SELECTED,
+  CLAIMABLE_ENS_SELECTED,
+} as const;
+
+export interface SignSectionEventPayload {
+  [ANY_ENS_SELECTED]: AnyEnsSelectedPayload;
+  [SPECIFIC_ENS_SELECTED]: SpecificEnsSelectedPayload;
+  [CLAIMABLE_ENS_SELECTED]: ClaimableEnsSelectedPayload;
+}

apps/console/src/analytics/events/signSection/specific-ens-selected.ts

@@ -0,0 +1,5 @@
+export const SPECIFIC_ENS_SELECTED = 'SPECIFIC_ENS_SELECTED';
+
+export interface SpecificEnsSelectedPayload {
+  ens: string;
+}

apps/console/src/app/page.tsx

@@ -80,7 +80,7 @@ export default function Page() {
               <ConnectButton />
             </JustWeb3Button>
 
-            <h1 className={'text-xl font-black'}>Profile Examples:</h1>
+            <h1 className={'text-xl font-black mt-5'}>Profile Examples:</h1>
 
             <div onClick={() => handleEnsClick('justhadi.eth')}>
               <JustEnsCard addressOrEns={'justhadi.eth'} />

apps/console/src/components/sections/customizer/ClaimSection/index.tsx

@@ -5,6 +5,7 @@ import { JustWeb3Context, useDebounce, useJustWeb3 } from '@justweb3/widget';
 import { Input } from '../../../ui/input';
 import axios from 'axios';
 import { ChainId } from '@justaname.id/sdk';
+import { getAnalyticsClient } from '../../../../analytics';
 
 export const ClaimSection = () => {
   const { config, handleJustWeb3Config } = useContext(JustWeb3Context);
@@ -52,12 +53,12 @@ export const ClaimSection = () => {
           ...(ens === 'jaw.eth' || ens === 'justan.eth'
             ? []
             : [
-                {
-                  ensDomain: ens,
-                  apiKey: apiKey,
-                  chainId: 11155111 as ChainId,
-                },
-              ]),
+              {
+                ensDomain: ens,
+                apiKey: apiKey,
+                chainId: 11155111 as ChainId,
+              },
+            ]),
         ],
       });
     }
@@ -80,8 +81,7 @@ export const ClaimSection = () => {
         };
         statusCode: number;
       }>(
-        `https://${
-          dev ? 'api-staging' : 'api'
+        `https://${dev ? 'api-staging' : 'api'
         }.justaname.id/ens/v1/ens/api-key`,
         {
           headers: {
@@ -90,6 +90,7 @@ export const ClaimSection = () => {
         }
       )
       .then((res) => {
+        getAnalyticsClient().track('ENS_BY_API_KEY_CALLED', {});
         setEnsByApiKey(res.data.result.data.domains);
       })
       .catch((err) => {
@@ -174,6 +175,9 @@ export const ClaimSection = () => {
                 href={'https://dashboard.justaname.id'}
                 target={'_blank'}
                 className={'text-primary'}
+                onClick={() => {
+                  getAnalyticsClient().track('DASHBOARD_LINK_CLICKED', {});
+                }}
               >
                 Dashboard
               </a>{' '}
@@ -186,9 +190,9 @@ export const ClaimSection = () => {
                   {index ===
                     ensByApiKey.filter((ens) => ens.chainId === chainId)
                       .length -
-                      1 && (
-                    <div className="w-full h-[1px] min-h-[1px] bg-[#CBD5E180]" />
-                  )}
+                    1 && (
+                      <div className="w-full h-[1px] min-h-[1px] bg-[#CBD5E180]" />
+                    )}
                   <OptionSelect key={ens.ens} label={ens.ens} value={ens.ens} />
                 </>
               ))}

apps/console/src/components/sections/customizer/Customizer/index.tsx

@@ -9,6 +9,7 @@ import { Switch } from '../../../ui/switch';
 import { useSwitchChain } from 'wagmi';
 import { useMountedAccount } from '@justaname.id/react';
 import { PluginsSection } from '../PluginsSection';
+import { getAnalyticsClient } from '../../../../analytics';
 
 interface CustomizerProps {
   mobile?: boolean;
@@ -30,9 +31,8 @@ export const Customizer = ({ mobile }: CustomizerProps) => {
 
   return (
     <div
-      className={`flex flex-col gap-[5px] min-w-[350px] mobile:w-[350px] border-r-[1px] pointer-events-auto ${
-        mobile ? 'pb-5' : 'py-5'
-      } px-2.5 mobile:max-h-[calc(100vh-60px)] overflow-y-auto `}
+      className={`flex flex-col gap-[5px] min-w-[350px] mobile:w-[350px] border-r-[1px] pointer-events-auto ${mobile ? 'pb-5' : 'py-5'
+        } px-2.5 mobile:max-h-[calc(100vh-60px)] overflow-y-auto `}
     >
       <div className="flex flex-col gap-2.5">
         <div className="flex flex-row items-center justify-between w-full py-[5px]">
@@ -46,6 +46,9 @@ export const Customizer = ({ mobile }: CustomizerProps) => {
             <Switch
               checked={chainId === 1}
               onCheckedChange={() => {
+                getAnalyticsClient().track('NETWORK_CHANGED', {
+                  chainId: chainId === 1 ? 11155111 : 1,
+                });
                 switchChainAsync({
                   chainId: chainId === 1 ? 11155111 : 1,
                 });

apps/console/src/components/sections/customizer/PluginsSection/EFP/index.tsx

@@ -27,6 +27,7 @@ export const EFP = () => {
           (plugin) => plugin.name !== EFPPlugin.name
         ),
       });
+      getAnalyticsClient().track('EFP_DISABLED', {});
     }
   };