From ccdda5b6010ddddd587ef94e5545fa2b62d6ade7 Mon Sep 17 00:00:00 2001 From: Julien Delaigues <0xju@pm.me> Date: Thu, 14 Mar 2024 17:45:42 +0800 Subject: [PATCH] feat: add custom events --- .../staking_section/claim_rewards_modal.tsx | 17 ++++++++++++++++- .../staking_section/connect_wallet_modal.tsx | 8 ++++++++ .../staking_section/staking_modal.tsx | 6 ++++++ .../staking_section/unstaking_modal.tsx | 7 +++++++ .../staking/lib/staking_sdk/context/index.tsx | 11 +++++++++-- .../lib/staking_sdk/wallet_operations/cosmos.ts | 2 +- src/utils/posthog.ts | 6 ++++++ 7 files changed, 53 insertions(+), 4 deletions(-) create mode 100644 src/utils/posthog.ts diff --git a/src/screens/staking/components/staking_section/claim_rewards_modal.tsx b/src/screens/staking/components/staking_section/claim_rewards_modal.tsx index 7a935f45..77255c80 100644 --- 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 index 7b20fa8c..36579d54 100644 --- 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 index 13268753..4aef207a 100644 --- 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 index da062024..6b6fd3b9 100644 --- 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 index b3abe542..d4162374 100644 --- 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( (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 index 3cd4e9bc..162c8ccc 100644 --- a/src/screens/staking/lib/staking_sdk/wallet_operations/cosmos.ts +++ b/src/screens/staking/lib/staking_sdk/wallet_operations/cosmos.ts @@ -1,5 +1,4 @@ import type { EncodeObject } from "@cosmjs/proto-signing"; -import { SigningStargateClient } from "@cosmjs/stargate"; import type { MsgDelegateEncodeObject, MsgUndelegateEncodeObject, @@ -7,6 +6,7 @@ import type { 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 new file mode 100644 index 00000000..a6005b5b --- /dev/null +++ b/src/utils/posthog.ts @@ -0,0 +1,6 @@ +export const enum PostHogCustomEvent { + ClaimedRewards = "ClaimedRewards", + StakedTokens = "StakedTokens", + UnstakedTokens = "UnstakedTokens", + WalletConnected = "WalletConnected", +}