From 677069546b6bcf4f2d45d410f2370889b2ca3be6 Mon Sep 17 00:00:00 2001 From: Adam Chambers Date: Sun, 3 Dec 2023 11:06:45 -0500 Subject: [PATCH] chore: move analytics hook to util for api usage --- .../Staking/StakingCard/StakingCard.tsx | 3 +- .../src/components/common/Wallet/Wallet.tsx | 3 +- apps/marginfi-v2-ui/src/hooks/useAnalytics.ts | 33 ------------------- apps/marginfi-v2-ui/src/pages/_app.tsx | 4 +-- .../src/pages/api/user/login.ts | 3 +- .../src/pages/api/user/signup.ts | 4 +-- apps/marginfi-v2-ui/src/utils/analytics.ts | 24 ++++++++++++++ apps/marginfi-v2-ui/src/utils/mrgnActions.ts | 15 +-------- 8 files changed, 30 insertions(+), 59 deletions(-) delete mode 100644 apps/marginfi-v2-ui/src/hooks/useAnalytics.ts create mode 100644 apps/marginfi-v2-ui/src/utils/analytics.ts diff --git a/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingCard.tsx b/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingCard.tsx index 60e5172c8f..475e0bf8cb 100644 --- a/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingCard.tsx +++ b/apps/marginfi-v2-ui/src/components/common/Staking/StakingCard/StakingCard.tsx @@ -33,7 +33,7 @@ import { VersionedTransaction, } from "@solana/web3.js"; import { useConnection } from "~/hooks/useConnection"; -import { useAnalytics } from "~/hooks/useAnalytics"; +import { capture } from "~/utils/analytics"; import { SwapMode, useJupiter } from "@jup-ag/react-hook"; import JSBI from "jsbi"; import { StakeData, usePrevious } from "~/utils"; @@ -73,7 +73,6 @@ export const StakingCard: FC = () => { const router = useRouter(); const { connection } = useConnection(); const { connected, wallet, walletAddress } = useWalletContext(); - const { capture } = useAnalytics(); const [setIsWalletAuthDialogOpen] = useUiStore((state) => [state.setIsWalletAuthDialogOpen]); const [ diff --git a/apps/marginfi-v2-ui/src/components/common/Wallet/Wallet.tsx b/apps/marginfi-v2-ui/src/components/common/Wallet/Wallet.tsx index 0abe19997f..7e3f1f5021 100644 --- a/apps/marginfi-v2-ui/src/components/common/Wallet/Wallet.tsx +++ b/apps/marginfi-v2-ui/src/components/common/Wallet/Wallet.tsx @@ -10,7 +10,7 @@ import { useMrgnlendStore, useUiStore } from "~/store"; import { useConnection } from "~/hooks/useConnection"; import { useWalletContext } from "~/hooks/useWalletContext"; import { useIsMobile } from "~/hooks/useIsMobile"; -import { useAnalytics } from "~/hooks/useAnalytics"; +import { setPersonProperties } from "~/utils/analytics"; import { MrgnTooltip } from "~/components/common/MrgnTooltip"; import { @@ -33,7 +33,6 @@ export const Wallet = () => { const { connection } = useConnection(); const { wallet, connected, logout, pfp, requestPrivateKey, web3AuthPk, web3AuthConncected } = useWalletContext(); const isMobile = useIsMobile(); - const { setPersonProperties } = useAnalytics(); const [isWalletAddressCopied, setIsWalletAddressCopied] = React.useState(false); const [isFundingAddressCopied, setIsFundingAddressCopied] = React.useState(false); diff --git a/apps/marginfi-v2-ui/src/hooks/useAnalytics.ts b/apps/marginfi-v2-ui/src/hooks/useAnalytics.ts deleted file mode 100644 index 8dbad40e66..0000000000 --- a/apps/marginfi-v2-ui/src/hooks/useAnalytics.ts +++ /dev/null @@ -1,33 +0,0 @@ -import posthog from "posthog-js"; - -export const useAnalytics = (): { - init: () => void; - capture: (event: string, properties?: Record) => void; - identify: (userId: string, properties?: Record) => void; - setPersonProperties: (properties: Record) => void; -} => { - const _checkEnv = () => - !process.env.NEXT_PUBLIC_POSTHOG_API_KEY || process.env.NEXT_PUBLIC_MARGINFI_ENVIRONMENT !== "production"; - - const init = () => { - if (_checkEnv()) return; - posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { api_host: "https://app.posthog.com" }); - }; - - const capture = (event: string, properties?: Record) => { - if (_checkEnv()) return; - posthog.capture(event, properties); - }; - - const identify = (userId: string, properties?: Record) => { - if (_checkEnv()) return; - posthog.identify(userId, properties); - }; - - const setPersonProperties = (properties: Record) => { - if (_checkEnv()) return; - posthog.setPersonProperties(properties); - }; - - return { init, capture, identify, setPersonProperties }; -}; diff --git a/apps/marginfi-v2-ui/src/pages/_app.tsx b/apps/marginfi-v2-ui/src/pages/_app.tsx index aba9781905..83411fbfd4 100644 --- a/apps/marginfi-v2-ui/src/pages/_app.tsx +++ b/apps/marginfi-v2-ui/src/pages/_app.tsx @@ -18,7 +18,7 @@ import { useLstStore } from "./stake"; import { Desktop, Mobile } from "~/mediaQueries"; import { WalletProvider as MrgnWalletProvider } from "~/hooks/useWalletContext"; import { ConnectionProvider } from "~/hooks/useConnection"; -import { useAnalytics } from "~/hooks/useAnalytics"; +import { init as initAnalytics } from "~/utils/analytics"; import { MobileNavbar } from "~/components/mobile/MobileNavbar"; import { Tutorial } from "~/components/common/Tutorial"; @@ -55,8 +55,6 @@ const MyApp = ({ Component, pageProps }: AppProps) => { state.isRefreshingStore, ]); - const { init: initAnalytics } = useAnalytics(); - // enable matomo heartbeat React.useEffect(() => { if (process.env.NEXT_PUBLIC_MARGINFI_ENVIRONMENT === "alpha") { diff --git a/apps/marginfi-v2-ui/src/pages/api/user/login.ts b/apps/marginfi-v2-ui/src/pages/api/user/login.ts index a29937b8b9..dc30ea3257 100644 --- a/apps/marginfi-v2-ui/src/pages/api/user/login.ts +++ b/apps/marginfi-v2-ui/src/pages/api/user/login.ts @@ -16,7 +16,7 @@ import { STATUS_OK, firebaseApi, } from "@mrgnlabs/marginfi-v2-ui-state"; -import { useAnalytics } from "~/hooks/useAnalytics"; +import { capture, identify } from "~/utils/analytics"; initFirebaseIfNeeded(); @@ -26,7 +26,6 @@ export interface LoginRequest { export default async function handler(req: NextApiRequest, res: any) { const { walletAddress } = req.body; - const { capture, identify } = useAnalytics(); /* signing logic let signer; diff --git a/apps/marginfi-v2-ui/src/pages/api/user/signup.ts b/apps/marginfi-v2-ui/src/pages/api/user/signup.ts index 72d3dc0ab4..157ed25111 100644 --- a/apps/marginfi-v2-ui/src/pages/api/user/signup.ts +++ b/apps/marginfi-v2-ui/src/pages/api/user/signup.ts @@ -15,7 +15,7 @@ import { STATUS_OK, firebaseApi, } from "@mrgnlabs/marginfi-v2-ui-state"; -import { useAnalytics } from "~/hooks/useAnalytics"; +import { capture, identify } from "~/utils/analytics"; initFirebaseIfNeeded(); @@ -27,8 +27,6 @@ export interface SignupRequest { export default async function handler(req: NextApiRequest, res: any) { const { walletAddress, payload } = req.body; - const { capture, identify } = useAnalytics(); - Sentry.setContext("signup_args", { walletAddress, }); diff --git a/apps/marginfi-v2-ui/src/utils/analytics.ts b/apps/marginfi-v2-ui/src/utils/analytics.ts new file mode 100644 index 0000000000..2e9e4803eb --- /dev/null +++ b/apps/marginfi-v2-ui/src/utils/analytics.ts @@ -0,0 +1,24 @@ +import posthog from "posthog-js"; + +const _checkEnv = () => + !process.env.NEXT_PUBLIC_POSTHOG_API_KEY || process.env.NEXT_PUBLIC_MARGINFI_ENVIRONMENT !== "production"; + +export const init = () => { + if (_checkEnv()) return; + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { api_host: "https://app.posthog.com" }); +}; + +export const capture = (event: string, properties?: Record) => { + if (_checkEnv()) return; + posthog.capture(event, properties); +}; + +export const identify = (userId: string, properties?: Record) => { + if (_checkEnv()) return; + posthog.identify(userId, properties); +}; + +export const setPersonProperties = (properties: Record) => { + if (_checkEnv()) return; + posthog.setPersonProperties(properties); +}; diff --git a/apps/marginfi-v2-ui/src/utils/mrgnActions.ts b/apps/marginfi-v2-ui/src/utils/mrgnActions.ts index c8a5851c16..ec3f2de5fe 100644 --- a/apps/marginfi-v2-ui/src/utils/mrgnActions.ts +++ b/apps/marginfi-v2-ui/src/utils/mrgnActions.ts @@ -5,7 +5,7 @@ import { Connection, PublicKey, Transaction } from "@solana/web3.js"; import { Wallet, processTransaction } from "@mrgnlabs/mrgn-common"; import { WalletContextState } from "@solana/wallet-adapter-react"; import { WalletContextStateOverride } from "~/hooks/useWalletContext"; -import { useAnalytics } from "~/hooks/useAnalytics"; +import { capture } from "~/utils/analytics"; import { MultiStepToastHandle, showErrorToast } from "./toastUtils"; export type MarginfiActionParams = { @@ -79,8 +79,6 @@ async function createAccountAndDeposit({ return; } - const { capture } = useAnalytics(); - const multiStepToast = new MultiStepToastHandle("Initial deposit", [ { label: "Creating account" }, { label: `Depositing ${amount} ${bank.meta.tokenSymbol}` }, @@ -126,8 +124,6 @@ export async function deposit({ bank: ExtendedBankInfo; amount: number; }) { - const { capture } = useAnalytics(); - const multiStepToast = new MultiStepToastHandle("Deposit", [ { label: `Depositing ${amount} ${bank.meta.tokenSymbol}` }, ]); @@ -159,8 +155,6 @@ export async function borrow({ bank: ExtendedBankInfo; amount: number; }) { - const { capture } = useAnalytics(); - const multiStepToast = new MultiStepToastHandle("Borrow", [ { label: `Borrowing ${amount} ${bank.meta.tokenSymbol}` }, ]); @@ -192,8 +186,6 @@ export async function withdraw({ bank: ExtendedBankInfo; amount: number; }) { - const { capture } = useAnalytics(); - const multiStepToast = new MultiStepToastHandle("Withdrawal", [ { label: `Withdrawing ${amount} ${bank.meta.tokenSymbol}` }, ]); @@ -225,8 +217,6 @@ export async function repay({ bank: ExtendedBankInfo; amount: number; }) { - const { capture } = useAnalytics(); - const multiStepToast = new MultiStepToastHandle("Repayment", [ { label: `Repaying ${amount} ${bank.meta.tokenSymbol}` }, ]); @@ -255,7 +245,6 @@ export async function collectRewardsBatch( marginfiAccount: MarginfiAccountWrapper, bankAddresses: PublicKey[] ) { - const { capture } = useAnalytics(); const multiStepToast = new MultiStepToastHandle("Collect rewards", [{ label: "Collecting rewards" }]); multiStepToast.start(); @@ -300,8 +289,6 @@ export const closeBalance = async ({ return; } - const { capture } = useAnalytics(); - const multiStepToast = new MultiStepToastHandle("Closing balance", [ { label: `Closing ${bank.position.isLending ? "lending" : "borrow"} balance for ${bank.meta.tokenSymbol}` }, ]);