feat: add basic analytics

leather-io · Dec 18, 2024 · a8d00ee · a8d00ee
1 parent 5069af9
commit a8d00ee
Show file tree

Hide file tree

Showing 12 changed files with 215 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -19,6 +19,14 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Leather - Earn</title>
+    <script>
+      if ("%VITE_SEGMENT_WRITE_KEY%") {
+        !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="hrHhOlyfCXQrfJEFBfy9U8j5KTRHFRFB";;analytics.SNIPPET_VERSION="5.2.0";
+        analytics.load("%VITE_SEGMENT_WRITE_KEY%");
+        analytics.page();
+        }}();
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -19,11 +19,13 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@leather.io/analytics": "^3.0.3",
     "@leather.io/tokens": "0.12.1",
     "@leather.io/ui": "1.37.0",
     "@noble/hashes": "1.3.2",
     "@reduxjs/toolkit": "1.9.7",
     "@scure/base": "1.1.3",
+    "@segment/analytics-next": "^1.76.0",
     "@stacks/auth": "7.0.2",
     "@stacks/blockchain-api-client": "7.3.2",
     "@stacks/common": "7.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.tsx b/src/app.tsx
@@ -37,6 +37,7 @@ import { StackIncrease } from './pages/stacking/stack-increase/stack-increase';
 import { StartDirectStacking } from './pages/stacking/start-direct-stacking/start-direct-stacking';
 import { StartLiquidStacking } from './pages/stacking/start-liquid-stacking/start-liquid-stacking';
 import { StartPooledStacking } from './pages/stacking/start-pooled-stacking/start-pooled-stacking';
+import { initAnalytics } from '@utils/analytics';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -49,6 +50,9 @@ const queryClient = new QueryClient({
 
 function Root() {
   useEffect(() => void loadFonts(), []);
+  useEffect(() => {
+    void initAnalytics();
+  }, []);
 
   const [searchParams] = useSearchParams();
   const chain = searchParams.get('chain');

diff --git a/src/components/auth-provider/auth-provider.tsx b/src/components/auth-provider/auth-provider.tsx
@@ -13,6 +13,7 @@ import { validateStacksAddress as isValidStacksAddress } from '@stacks/transacti
 import { APP_DETAILS } from 'src/constants';
 
 import { useStacksNetwork } from '@hooks/use-stacks-network';
+import { analytics } from '@utils/analytics';
 
 const appConfig = new AppConfig(['store_write']);
 const userSession = new UserSession({ appConfig });
@@ -68,6 +69,13 @@ export function AuthProvider({ children }: Props) {
       return;
     }
     setIsSigningIn(true);
+
+    const provider = window.StacksProvider?.getProductInfo?.()?.name ?? 'none';
+
+    analytics.untypedTrack('earn_sign_in_started', {
+      provider,
+    });
+
     showConnect({
       userSession,
       appDetails: APP_DETAILS,
@@ -76,10 +84,17 @@ export function AuthProvider({ children }: Props) {
         return provider.id === 'LeatherProvider';
       }),
       onFinish() {
+        const provider = window.StacksProvider?.getProductInfo?.()?.name ?? 'none';
+        analytics.untypedTrack('earn_sign_in_completed', {
+          provider,
+        });
         setIsSigningIn(false);
         setIsSignedIn(true);
       },
       onCancel() {
+        analytics.untypedTrack('earn_sign_in_cancelled', {
+          provider,
+        });
         setIsSigningIn(false);
       },
     } as AuthOptions);

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -11,9 +11,6 @@ interface ImportMetaEnv {
    */
   readonly VITE_COMMIT_SHA?: string;
 
-  /**
-   * TODO: document where to find the key
-   */
   readonly VITE_SEGMENT_WRITE_KEY?: string;
 
   /**

diff --git a/src/pages/choose-stacking-method/components/bridge-to-sbtc-card.tsx b/src/pages/choose-stacking-method/components/bridge-to-sbtc-card.tsx
@@ -36,7 +36,7 @@ export function BridgeToSBTCCard(props: ChooseStackingMethodLayoutProps) {
             <Flex flexDirection="column">
               <styled.p textStyle="body.01" mb="space.04" color="ink.text-primary">
                 The version of Leather installed does not support this feature. Please update
-                Leather (6.55+) to bridge sBTC.
+                Leather (6.56+) to bridge sBTC.
               </styled.p>
 
               <Flex flexDirection="column" gap="space.04" mt="space.06">

diff --git a/src/pages/choose-stacking-method/components/enroll-for-sbtc-rewards.tsx b/src/pages/choose-stacking-method/components/enroll-for-sbtc-rewards.tsx
@@ -10,6 +10,7 @@ import { BaseDrawer } from '@components/drawer/base-drawer';
 import { openExternalLink } from '@utils/external-links';
 
 import { ChooseStackingMethodLayoutProps } from '../types';
+import { analytics } from '@utils/analytics';
 
 export function EnrollForSBTCRewardsCard(props: ChooseStackingMethodLayoutProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -46,6 +47,7 @@ export function EnrollForSBTCRewardsCard(props: ChooseStackingMethodLayoutProps)
                   onClick={() => {
                     // TODO: Implement enrollment logic with contract call
                     setIsModalOpen(false);
+                    analytics.untypedTrack('sbtc_earn_enrollment_started');
                     openExternalLink('https://bitcoinismore.org');
                   }}
                 >

diff --git a/src/pages/choose-stacking-method/hooks/index.ts b/src/pages/choose-stacking-method/hooks/index.ts
@@ -3,6 +3,7 @@ import { useNavigate } from '@hooks/use-navigate';
 
 import { ChooseStackingMethodLayoutProps } from '../types';
 import { hasExistingCommitment } from '../utils';
+import { analytics } from '@utils/analytics';
 
 export const usePooledStackingButton = (props: ChooseStackingMethodLayoutProps) => {
   const navigate = useNavigate();
@@ -77,7 +78,9 @@ export function useLeatherSbtcBridgeButton(setUpdateModalOpen: (open: boolean) =
           base: 'BTC',
           quote: 'sBTC',
         });
+        analytics.untypedTrack('sbtc_bridge_requested');
       } catch (error) {
+        analytics.untypedTrack('sbtc_bridge_request_failed');
         console.error('Error requesting openSwap', error);
         setUpdateModalOpen(true);
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,9 +11,6 @@ interface ImportMetaEnv { @@
        */
       readonly VITE_COMMIT_SHA?: string;
-      /**
-       * TODO: document where to find the key
-       */
       readonly VITE_SEGMENT_WRITE_KEY?: string;
       /**
@@ Expand Down @@