chore: posthog integration

next.config.js

@@ -38,11 +38,20 @@ const baseConfig = nextTranslate({
       source: `${prefix}/native-staking`,
     })),
   ],
-  rewrites: async () =>
-    ["/rss", "/rss/"].map((path) => ({
+  rewrites: async () => [
+    ...["/rss", "/rss/"].map((path) => ({
       destination: "/rss.xml",
       source: path,
     })),
+    {
+      destination: "https://eu-assets.i.posthog.com/static/:path*",
+      source: "/ingest/static/:path*",
+    },
+    {
+      destination: "https://eu.i.posthog.com/:path*",
+      source: "/ingest/:path*",
+    },
+  ],
   typescript: {
     ignoreBuildErrors: process.env.QUICK_BUILD === "true",
   },

package.json

@@ -50,6 +50,7 @@
     "next-translate": "^2.6.2",
     "next-translate-plugin": "^2.6.2",
     "nodemailer": "^6.9.11",
+    "posthog-js": "^1.114.2",
     "ramda": "^0.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

public/locales/en/policy.json

@@ -3,5 +3,5 @@
   "description1": "<0>This policy describes the privacy practices of Forbole Technology Limited (“<1>Forbole</1>”, “we” or “us”) with respect to the Forbole website located at <2>https://forbole.com</2> and related content, applications, features, and functionality (collectively, the “<1>Platform</1>”) and the various services that we offer to you on or through the Platform (the “<1>Services</1>”). Users of our Services are referred to as “<1>users</1>” or “you”.</0>",
   "description2": "Please read this policy and the Forbole Terms of Use carefully before engaging with the Platform or using the Services.",
   "title": "Forbole Privacy Policy",
-  "updatedDate": "Last updated: 19 July 2023"
+  "updatedDate": "Last updated: 14 March 2024"
 }

public/locales/en/terms_and_conditions.json

@@ -1,5 +1,5 @@
 {
   "desc": " ",
   "title": "Forbole Terms of Use",
-  "updatedDate": "Last updated: 19 July 2023"
+  "updatedDate": "Last updated: 14 March 2024"
 }

public/locales/zh-CN/policy.json

@@ -3,5 +3,5 @@
   "description1": "<0>This policy describes the privacy practices of Forbole Technology Limited (“<1>Forbole</1>”, “we” or “us”) with respect to the Forbole website located at <2>https://forbole.com</2> and related content, applications, features, and functionality (collectively, the “<1>Platform</1>”) and the various services that we offer to you on or through the Platform (the “<1>Services</1>”). Users of our Services are referred to as “<1>users</1>” or “you”.</0>",
   "description2": "在参与平台或使用服务之前，请仔细阅读本政策和 Forbole 使用条款。",
   "title": "Forbole 私隐政策",
-  "updatedDate": "最后更新日期：2023 年 7 月 19 日"
+  "updatedDate": "最后更新日期：2024 年 3 月 14 日"
 }

public/locales/zh-CN/terms_and_conditions.json

@@ -1,5 +1,5 @@
 {
   "desc": "条款及细则，请以英文版本为准。",
   "title": "Forbole 条款及细则",
-  "updatedDate": "最后更新日期：2023 年 7 月 19 日"
+  "updatedDate": "最后更新日期：2024 年 3 月 14 日"
 }

public/locales/zh-HK/policy.json

@@ -3,5 +3,5 @@
   "description1": "<0>This policy describes the privacy practices of Forbole Technology Limited (“<1>Forbole</1>”, “we” or “us”) with respect to the Forbole website located at <2>https://forbole.com</2> and related content, applications, features, and functionality (collectively, the “<1>Platform</1>”) and the various services that we offer to you on or through the Platform (the “<1>Services</1>”). Users of our Services are referred to as “<1>users</1>” or “you”.</0>",
   "description2": "在參與平台或使用服務之前，請仔細閱讀本政策和 Forbole 使用條款。",
   "title": "Forbole 私隱政策",
-  "updatedDate": "最後更新日期：2023 年 7 月 19 日"
+  "updatedDate": "最後更新日期：2024 年 3 月 14 日"
 }

public/locales/zh-HK/terms_and_conditions.json

@@ -1,5 +1,5 @@
 {
   "desc": "條款及細則，請以英文版本為準。",
   "title": "Forbole 條款及細則",
-  "updatedDate": "最後更新日期：2023 年 7 月 19 日"
+  "updatedDate": "最後更新日期：2024 年 3 月 14 日"
 }

src/screens/app/index.tsx

@@ -3,6 +3,9 @@ import { CacheProvider } from "@emotion/react";
 import { init } from "@socialgouv/matomo-next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import { useRouter } from "next/router";
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
 import { useEffect } from "react";
 
 import createEmotionCache from "../../utils/createEmotionCache";
@@ -19,11 +22,29 @@ interface MyAppProps extends AppProps {
 const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL;
 const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID;
 
+// Check that PostHog is client-side (used to handle Next.js SSR)
+if (typeof window !== "undefined") {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY as string, {
+    api_host: `${window.location.origin}/ingest`,
+
+    // Enable debug mode in development
+    loaded: (_posthog) => {
+      if (process.env.NODE_ENV === "development") _posthog.debug();
+    },
+
+    // Used to capture events only for the staking page
+    opt_out_capturing_by_default: true,
+    ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+  });
+}
+
 export default function MyApp({
   Component,
   emotionCache = clientSideEmotionCache,
   pageProps,
 }: MyAppProps) {
+  const router = useRouter();
+
   useEffect(() => {
     if (!MATOMO_URL) return;
 
@@ -33,13 +54,27 @@ export default function MyApp({
     });
   }, []);
 
+  useEffect(() => {
+    // Track page views
+    const handleRouteChange = () => posthog?.capture("$pageview");
+
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <CacheProvider value={emotionCache}>
-      <Head>
-        <meta content="width=device-width,initial-scale=1" name="viewport" />
-        <meta content="no-referrer" name="referrer" />
-      </Head>
-      <InnerApp Component={Component} pageProps={pageProps} />
-    </CacheProvider>
+    <PostHogProvider client={posthog}>
+      <CacheProvider value={emotionCache}>
+        <Head>
+          <meta content="width=device-width,initial-scale=1" name="viewport" />
+          <meta content="no-referrer" name="referrer" />
+        </Head>
+        <InnerApp Component={Component} pageProps={pageProps} />
+      </CacheProvider>
+    </PostHogProvider>
   );
 }

src/screens/policy/index.tsx

@@ -528,6 +528,76 @@ const Policy = () => {
                     or similar technologies.
                   </span>
                 </p>
+                <div
+                  className="c6"
+                  style={{
+                    color: "#000",
+
+                    fontSize: "11pt",
+                    lineHeight: "1.15",
+                    margin: 0,
+                    marginLeft: "8em",
+                    marginTop: "1em",
+                    orphans: 2,
+                    paddingBottom: 0,
+                    paddingTop: 0,
+                    textAlign: "left",
+
+                    widows: 2,
+                  }}
+                >
+                  <span className={styles.c2}>
+                    <span className="t1">(iv)</span> anonymized identifiers. We
+                    also may use Posthog and Sentry to help us better understand
+                    the usage and error data in order to improve our user
+                    experience. Please refer to each service provider’s Terms of
+                    Use and Privacy Policy for more information:
+                  </span>
+                  <div
+                    style={{
+                      marginLeft: "4em",
+                      marginTop: "1rem",
+                    }}
+                  >
+                    (i) Posthog's Terms of Use:{" "}
+                    <a href="https://posthog.com/terms">
+                      https://posthog.com/terms
+                    </a>
+                  </div>
+                  <div
+                    style={{
+                      marginLeft: "4em",
+                      marginTop: "1rem",
+                    }}
+                  >
+                    (ii) Posthog’s Privacy Policy:{" "}
+                    <a href="https://posthog.com/privacy">
+                      https://posthog.com/privacy
+                    </a>
+                  </div>
+                  <div
+                    style={{
+                      marginLeft: "4em",
+                      marginTop: "1rem",
+                    }}
+                  >
+                    (iii) Sentry’s Terms of Use:{" "}
+                    <a href="https://sentry.io/terms">
+                      https://sentry.io/terms/
+                    </a>
+                  </div>
+                  <div
+                    style={{
+                      marginLeft: "4em",
+                      marginTop: "1rem",
+                    }}
+                  >
+                    (iv) Sentry’s Privacy Policy:{" "}
+                    <a href="https://sentry.io/privacy">
+                      https://sentry.io/privacy/
+                    </a>
+                  </div>
+                </div>
                 <p className={styles.c3}>
                   <span className={styles.c2} />
                 </p>

src/screens/staking/components/staking_section/claim_rewards_modal.tsx

@@ -13,7 +13,10 @@ import {
   setSelectedAccount,
   syncAccountData,
 } from "@src/screens/staking/lib/staking_sdk/context/actions";
-import { getSelectedAccount } from "@src/screens/staking/lib/staking_sdk/context/selectors";
+import {
+  getClaimableRewardsForNetwork,
+  getSelectedAccount,
+} from "@src/screens/staking/lib/staking_sdk/context/selectors";
 import type { Coin } from "@src/screens/staking/lib/staking_sdk/core/base";
 import { formatCoin } from "@src/screens/staking/lib/staking_sdk/formatters";
 import { accountHasRewards } from "@src/screens/staking/lib/staking_sdk/utils/accounts";
@@ -22,6 +25,7 @@ import {
   getClaimRewardsFee,
 } from "@src/screens/staking/lib/staking_sdk/wallet_operations";
 import { ClaimRewardsError } from "@src/screens/staking/lib/staking_sdk/wallet_operations/base";
+import { PostHogCustomEvent } from "@src/utils/posthog";
 
 import * as styles from "./claim_rewards_modal.module.scss";
 import Label from "./label";
@@ -109,6 +113,20 @@ const ClaimRewardsModal = () => {
 
                   setSelectedAccount(stakingRef.current, null, null);
 
+                  const claimableRewardsForNetwork =
+                    getClaimableRewardsForNetwork(
+                      stakingRef.current.state,
+                      selectedAccount.networkId,
+                    );
+
+                  stakingRef.current.postHog?.capture(
+                    PostHogCustomEvent.ClaimedRewards,
+                    {
+                      ...claimableRewardsForNetwork,
+                      walletAddress: selectedAccount.address,
+                    },
+                  );
+
                   toastSuccess({
                     subtitle: `${t("rewardsModal.success.sub")} 🎉`,
                     title: t("rewardsModal.success.title"),

src/screens/staking/components/staking_section/connect_wallet_modal.tsx

@@ -12,6 +12,7 @@ import {
   getWalletName,
   walletsIcons,
 } from "@src/screens/staking/lib/wallet_info";
+import { PostHogCustomEvent } from "@src/utils/posthog";
 
 import * as styles from "./connect_wallet_modal.module.scss";
 import ModalBase from "./modal_base";
@@ -65,6 +66,13 @@ const ConnectWalletModal = () => {
                     })
                       .then((connected) => {
                         if (connected) {
+                          stakingRef.current.postHog?.capture(
+                            PostHogCustomEvent.WalletConnected,
+                            {
+                              type: walletId,
+                            },
+                          );
+
                           toastSuccess({
                             subtitle: t("connectWallet.success.subtitle"),
                             title: t("connectWallet.success.title"),

src/screens/staking/components/staking_section/staking_modal.tsx

@@ -29,6 +29,7 @@ import {
   stakeAmount,
 } from "@src/screens/staking/lib/staking_sdk/wallet_operations";
 import { StakeError } from "@src/screens/staking/lib/staking_sdk/wallet_operations/base";
+import { PostHogCustomEvent } from "@src/utils/posthog";
 
 import Label from "./label";
 import ModalBase, { ModalError } from "./modal_base";
@@ -147,6 +148,12 @@ const StakingModal = () => {
 
           setSelectedAccount(stakingRef.current, null, null);
 
+          stakingRef.current.postHog?.capture(PostHogCustomEvent.StakedTokens, {
+            amount,
+            denom: mainNetworkDenom[selectedAccount.networkId],
+            walletAddress: selectedAccount.address,
+          });
+
           toastSuccess({
             subtitle: `${t("stakingModal.success.sub")} 🎉`,
             title: t("stakingModal.success.title"),

src/screens/staking/components/staking_section/unstaking_modal.tsx

@@ -21,6 +21,7 @@ import {
 } from "@src/screens/staking/lib/staking_sdk/context/actions";
 import { getSelectedAccount } from "@src/screens/staking/lib/staking_sdk/context/selectors";
 import type { StakingNetworkInfo } from "@src/screens/staking/lib/staking_sdk/core";
+import { mainNetworkDenom } from "@src/screens/staking/lib/staking_sdk/core/base";
 import { formatCoin } from "@src/screens/staking/lib/staking_sdk/formatters";
 import { getAccountNormalisedDelegation } from "@src/screens/staking/lib/staking_sdk/utils/accounts";
 import {
@@ -33,6 +34,7 @@ import {
   unstake,
 } from "@src/screens/staking/lib/staking_sdk/wallet_operations";
 import { UnstakeError } from "@src/screens/staking/lib/staking_sdk/wallet_operations/base";
+import { PostHogCustomEvent } from "@src/utils/posthog";
 
 import Label from "./label";
 import ModalBase, { ModalError } from "./modal_base";
@@ -148,6 +150,15 @@ const UnstakingModal = () => {
 
           setSelectedAccount(stakingRef.current, null, null);
 
+          stakingRef.current.postHog?.capture(
+            PostHogCustomEvent.UnstakedTokens,
+            {
+              amount,
+              denom: mainNetworkDenom[selectedAccount.networkId],
+              walletAddress: selectedAccount.address,
+            },
+          );
+
           toastSuccess({
             subtitle: t("unstakingModal.success.subtitle"),
             title: t("unstakingModal.success.title", {

src/screens/staking/index.tsx

@@ -1,5 +1,6 @@
 import useTranslation from "next-translate/useTranslation";
-import { useRef } from "react";
+import posthog from "posthog-js";
+import { useEffect, useRef } from "react";
 
 import LayoutVal from "@src/components/layout_val";
 import Tooltip from "@src/components/tooltip";
@@ -24,6 +25,12 @@ const Staking = () => {
 
   const hasConnectedWallets = getHasConnectedWallets(stakingRef.current.state);
 
+  useEffect(() => {
+    posthog.opt_in_capturing();
+
+    return () => posthog.opt_out_capturing();
+  }, []);
+
   const extraInfo = (
     <>
       <div className={styles.container}>