feat: add custom events

forbole · Mar 14, 2024 · ccdda5b · ccdda5b
1 parent 97d1b25
commit ccdda5b
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 4 deletions.
diff --git a/src/screens/staking/components/staking_section/claim_rewards_modal.tsx b/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,17 @@ const ClaimRewardsModal = () => {
 
                   setSelectedAccount(stakingRef.current, null, null);
 
+                  const claimableRewardsForNetwork =
+                    getClaimableRewardsForNetwork(
+                      stakingRef.current.state,
+                      selectedAccount.networkId,
+                    );
+
+                  stakingRef.current.postHog?.capture(
+                    PostHogCustomEvent.ClaimedRewards,
+                    claimableRewardsForNetwork,
+                  );
+
                   toastSuccess({
                     subtitle: `${t("rewardsModal.success.sub")} 🎉`,
                     title: t("rewardsModal.success.title"),

diff --git a/src/screens/staking/components/staking_section/connect_wallet_modal.tsx b/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"),

diff --git a/src/screens/staking/components/staking_section/staking_modal.tsx b/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,11 @@ const StakingModal = () => {
 
           setSelectedAccount(stakingRef.current, null, null);
 
+          stakingRef.current.postHog?.capture(PostHogCustomEvent.StakedTokens, {
+            amount,
+            denom: mainNetworkDenom[selectedAccount.networkId],
+          });
+
           toastSuccess({
             subtitle: `${t("stakingModal.success.sub")} 🎉`,
             title: t("stakingModal.success.title"),

diff --git a/src/screens/staking/components/staking_section/unstaking_modal.tsx b/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,11 @@ const UnstakingModal = () => {
 
           setSelectedAccount(stakingRef.current, null, null);
 
+          stakingRef.current.postHog?.capture(
+            PostHogCustomEvent.UnstakedTokens,
+            { amount, denom: mainNetworkDenom[selectedAccount.networkId] },
+          );
+
           toastSuccess({
             subtitle: t("unstakingModal.success.subtitle"),
             title: t("unstakingModal.success.title", {

diff --git a/src/screens/staking/lib/staking_sdk/context/index.tsx b/src/screens/staking/lib/staking_sdk/context/index.tsx
@@ -1,3 +1,5 @@
+import type { PostHog } from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 import type { PropsWithChildren } from "react";
 import {
   createContext,
@@ -16,6 +18,7 @@ type SetState = (
 ) => void;
 
 export type TStakingContext = {
+  postHog?: PostHog;
   setState: SetState;
   state: StakingState;
 };
@@ -37,6 +40,8 @@ const baseContext: TStakingContext = {
 export const StakingContext = createContext(baseContext);
 
 export const StakingProvider = ({ children }: PropsWithChildren) => {
+  const postHog = usePostHog();
+
   const [state, setState] = useState<StakingState>(
     (typeof window !== "undefined" && window.stakingContext?.state) ||
       baseContext.state,
@@ -54,10 +59,11 @@ export const StakingProvider = ({ children }: PropsWithChildren) => {
     };
 
     return {
+      postHog,
       setState: wrappedSetState,
       state,
     };
-  }, [state, setState]);
+  }, [postHog, state]);
 
   useEffect(() => {
     window.stakingContext = contextValue;
@@ -73,12 +79,13 @@ export const StakingProvider = ({ children }: PropsWithChildren) => {
 };
 
 export const useStakingRef = () => {
-  const { setState, state } = useContext(StakingContext);
+  const { postHog, setState, state } = useContext(StakingContext);
 
   const stakingRef = useRef({} as TStakingContext);
 
   stakingRef.current.state = state;
   stakingRef.current.setState = setState;
+  stakingRef.current.postHog = postHog;
 
   return stakingRef;
 };
diff --git a/src/screens/staking/lib/staking_sdk/wallet_operations/cosmos.ts b/src/screens/staking/lib/staking_sdk/wallet_operations/cosmos.ts
@@ -1,12 +1,12 @@
 import type { EncodeObject } from "@cosmjs/proto-signing";
-import { SigningStargateClient } from "@cosmjs/stargate";
 import type {
   MsgDelegateEncodeObject,
   MsgUndelegateEncodeObject,
   MsgWithdrawDelegatorRewardEncodeObject,
   StdFee,
   Event as TxEvent,
 } from "@cosmjs/stargate";
+import { SigningStargateClient } from "@cosmjs/stargate";
 import type { AccountData } from "@keplr-wallet/types";
 import { MsgWithdrawDelegatorReward } from "cosmjs-types/cosmos/distribution/v1beta1/tx";
 import {

diff --git a/src/utils/posthog.ts b/src/utils/posthog.ts
@@ -0,0 +1,6 @@
+export const enum PostHogCustomEvent {
+  ClaimedRewards = "ClaimedRewards",
+  StakedTokens = "StakedTokens",
+  UnstakedTokens = "UnstakedTokens",
+  WalletConnected = "WalletConnected",
+}