Move all logs to use shared function

src/pages/Account/Components/AccountAllTransactions.tsx

@@ -9,6 +9,7 @@ import {
 } from "../../../api/hooks/useGetAccountAllTransactions";
 import EmptyTabContent from "../../../components/IndividualPageContent/EmptyTabContent";
 import {Statsig} from "statsig-react";
+import {useLogEventWithBasic} from "../hooks/useLogEventWithBasic";
 
 function RenderPagination({
   currentPage,
@@ -18,6 +19,7 @@ function RenderPagination({
   numPages: number;
 }) {
   const [searchParams, setSearchParams] = useSearchParams();
+  const logEvent = useLogEventWithBasic();
 
   const handleChange = (
     event: React.ChangeEvent<unknown>,
@@ -27,7 +29,7 @@ function RenderPagination({
     setSearchParams(searchParams);
 
     // logging
-    Statsig.logEvent("go_to_new_page", newPageNum, {
+    logEvent("go_to_new_page", newPageNum, {
       current_page_num: currentPage.toString(),
       new_page_num: newPageNum.toString(),
     });

src/pages/Account/hooks/useLogEventWithBasic.ts

@@ -19,6 +19,9 @@ export const useLogEventWithBasic = () => {
       network_type: state.network_name,
       ...extraMetadata,
     };
-    Statsig.logEvent(eventName, value, metadata);
+
+    if (Statsig.initializeCalled()) {
+      Statsig.logEvent(eventName, value, metadata);
+    }
   };
 };

src/pages/DelegatoryValidator/MyDepositsSection.tsx

@@ -42,6 +42,7 @@ import {
 import WalletConnectionDialog from "./WalletConnectionDialog";
 import {ValidatorData} from "../../api/hooks/useGetValidators";
 import {useGetDelegatedStakeOperationActivities} from "../../api/hooks/useGetDelegatedStakeOperationActivities";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 const MyDepositsCells = Object.freeze({
   amount: AmountCell,
@@ -299,11 +300,12 @@ function MyDepositSectionContent({
 
   function MyDepositRow({stake, status}: MyDepositRowProps) {
     const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+    const logEvent = useLogEventWithBasic();
     const handleClose = () => {
       setDialogOpen(false);
     };
     const handleClickOpen = () => {
-      Statsig.logEvent(
+      logEvent(
         getStakeOperationFromStakingStatus(status, canWithdrawPendingInactive) +
           "_button_clicked",
         validator?.owner_address,

src/pages/DelegatoryValidator/StakeOperationDialog.tsx

@@ -38,6 +38,7 @@ import {useWallet} from "@aptos-labs/wallet-adapter-react";
 import {useGlobalState} from "../../global-config/GlobalConfig";
 import {MINIMUM_APT_IN_POOL} from "./constants";
 import {ValidatorData} from "../../api/hooks/useGetValidators";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 type StakeOperationDialogProps = {
   handleDialogClose: () => void;
@@ -130,6 +131,7 @@ function StakeOperationDialogContent({
 
   const [state, _] = useGlobalState();
   const [addStakeFee, setAddStakeFee] = useState<Types.MoveValue>(0);
+  const logEvent = useLogEventWithBasic();
 
   useEffect(() => {
     const client = new AptosClient(state.network_value);
@@ -147,7 +149,7 @@ function StakeOperationDialogContent({
   }, [state.network_value, amount, stakeOperation, validator]);
 
   const onSubmitClick = async () => {
-    Statsig.logEvent("submit_transaction_button_clicked", stakeOperation, {
+    logEvent("submit_transaction_button_clicked", stakeOperation, {
       validator_address: validator.owner_address,
       wallet_address: account?.address ?? "",
       wallet_name: wallet?.name ?? "",

src/pages/DelegatoryValidator/StakingBar.tsx

@@ -30,6 +30,7 @@ import {useGetDelegatorStakeInfo} from "../../api/hooks/useGetDelegatorStakeInfo
 import {Statsig} from "statsig-react";
 import {useGlobalState} from "../../global-config/GlobalConfig";
 import {ValidatorData} from "../../api/hooks/useGetValidators";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 type ValidatorStakingBarProps = {
   setIsStakingBarSkeletonLoading: (arg: boolean) => void;
@@ -63,6 +64,7 @@ function StakingBarContent({
   validator: ValidatorData;
 }) {
   const theme = useTheme();
+  const logEvent = useLogEventWithBasic();
   const isOnMobile = !useMediaQuery(theme.breakpoints.up("md"));
   const {connected, wallet, account} = useWallet();
   const {delegatedStakeAmount, networkPercentage, commission, isQueryLoading} =
@@ -73,7 +75,7 @@ function StakingBarContent({
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
   const handleClickOpen = () => {
-    Statsig.logEvent("stake_button_clicked", validator.owner_address, {
+    logEvent("stake_button_clicked", validator.owner_address, {
       commission: commission?.toString() ?? "",
       delegated_stake_amount: delegatedStakeAmount ?? "",
       network_percentage: networkPercentage ?? "",

src/pages/DelegatoryValidator/TransactionSucceededDialog.tsx

@@ -17,6 +17,7 @@ import {grey} from "../../themes/colors/aptosColorPalette";
 import {StakeOperation} from "../../api/hooks/useSubmitStakeOperation";
 import {Statsig} from "statsig-react";
 import {useWallet} from "@aptos-labs/wallet-adapter-react";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 type TransactionSucceededDialogProps = {
   handleDialogClose: () => void;
@@ -36,6 +37,7 @@ export default function TransactionSucceededDialog({
   const theme = useTheme();
   const {account, wallet} = useWallet();
   const [copyTooltipOpen, setCopyTooltipOpen] = useState<boolean>(false);
+  const logEvent = useLogEventWithBasic();
 
   const copyAddress = async (_: React.MouseEvent<HTMLButtonElement>) => {
     await navigator.clipboard.writeText(transactionHash);
@@ -45,7 +47,7 @@ export default function TransactionSucceededDialog({
     }, 2000);
   };
   const onViewTransactionClick = () => {
-    Statsig.logEvent("view_transaction_button_clicked", stakeOperation, {
+    logEvent("view_transaction_button_clicked", stakeOperation, {
       transactionHash: transactionHash,
       amount: amount,
       wallet_address: account?.address ?? "",

src/pages/Validators/DelegationValidatorsTable.tsx

@@ -41,6 +41,7 @@ import {
   ValidatorStatus,
   getValidatorStatus,
 } from "../DelegatoryValidator/utils";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 function getSortedValidators(
   validators: ValidatorData[],
@@ -368,6 +369,7 @@ function ValidatorRow({
 }: ValidatorRowProps) {
   const navigate = useNavigate();
   const {account, wallet} = useWallet();
+  const logEvent = useLogEventWithBasic();
 
   const {
     commission,
@@ -379,7 +381,7 @@ function ValidatorRow({
     validatorAddress: validator.owner_address,
   });
   const rowClick = (address: Types.Address) => {
-    Statsig.logEvent("delegation_validators_row_clicked", address, {
+    logEvent("delegation_validators_row_clicked", address, {
       commission: commission?.toString() ?? "",
       delegated_stake_amount: delegatedStakeAmount ?? "",
       network_percentage: networkPercentage ?? "",

src/pages/Validators/Index.tsx

@@ -9,12 +9,14 @@ import {StakingBanner} from "./StakingBanner";
 import ValidatorsPageTabs from "./Tabs";
 import ValidatorsMap from "./ValidatorsMap";
 import {getStableID} from "../../utils";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 export default function ValidatorsPage() {
   const [state, _] = useGlobalState();
   const {account, wallet} = useWallet();
   const {config} = useConfig(STAKING_BANNER_CONFIG_NAME);
   const viewCountCap = config.getValue("view_count");
+  const logEvent = useLogEventWithBasic();
   // Get the user's stable ID
   const stableID = getStableID();
 
@@ -44,15 +46,11 @@ export default function ValidatorsPage() {
         localStorage.setItem(lastVisitKey, String(currentTimestamp));
       }
 
-      Statsig.logEvent(
-        "staking_banner_viewed",
-        localStorage.getItem(viewCountKey),
-        {
-          wallet_address: account?.address ?? "",
-          wallet_name: wallet?.name ?? "",
-          timestamp: localStorage.getItem(lastVisitKey) ?? "",
-        },
-      );
+      logEvent("staking_banner_viewed", localStorage.getItem(viewCountKey), {
+        wallet_address: account?.address ?? "",
+        wallet_name: wallet?.name ?? "",
+        timestamp: localStorage.getItem(lastVisitKey) ?? "",
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

src/pages/Validators/StakingBanner.tsx

@@ -13,16 +13,18 @@ import {StakingDrawer} from "./StakingDrawer";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import {Statsig} from "statsig-react";
 import {useWallet} from "@aptos-labs/wallet-adapter-react";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 export function StakingBanner() {
   const [open, setOpen] = useState<boolean>(false);
   const {account, wallet} = useWallet();
+  const logEvent = useLogEventWithBasic();
   const theme = useTheme();
   const isOnMobile = !useMediaQuery(theme.breakpoints.up("md"));
 
   const handleClick = () => {
     setOpen(!open);
-    Statsig.logEvent("staking_banner_learn_more_clicked", null, {
+    logEvent("staking_banner_learn_more_clicked", null, {
       wallet_address: account?.address ?? "",
       wallet_name: wallet?.name ?? "",
     });

src/pages/Validators/Tabs.tsx

@@ -12,6 +12,7 @@ import {useGlobalState} from "../../global-config/GlobalConfig";
 import {Statsig} from "statsig-react";
 import {useWallet} from "@aptos-labs/wallet-adapter-react";
 import {useNavigate} from "../../routing";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 enum VALIDATORS_TAB_VALUE {
   ALL_NODES = "all",
@@ -61,6 +62,7 @@ export default function ValidatorsPageTabs(): JSX.Element {
   const {tab} = useParams();
   const navigate = useNavigate();
   const {account, wallet} = useWallet();
+  const logEvent = useLogEventWithBasic();
   const value =
     tab === undefined
       ? VALIDATORS_TAB_VALUE.ALL_NODES
@@ -71,7 +73,7 @@ export default function ValidatorsPageTabs(): JSX.Element {
     newValue: VALIDATORS_TAB_VALUE,
   ) => {
     navigate(`/validators/${newValue}`);
-    Statsig.logEvent("validators_tab_clicked", newValue, {
+    logEvent("validators_tab_clicked", newValue, {
       wallet_address: account?.address ?? "",
       wallet_name: wallet?.name ?? "",
     });

src/pages/layout/Header.tsx

@@ -21,6 +21,7 @@ import {useWallet} from "@aptos-labs/wallet-adapter-react";
 import {sendToGTM} from "../../api/hooks/useGoogleTagManager";
 import {Statsig} from "statsig-react";
 import {Link, useNavigate} from "../../routing";
+import {useLogEventWithBasic} from "../Account/hooks/useLogEventWithBasic";
 
 export default function Header() {
   const scrollTop = () => {
@@ -39,6 +40,7 @@ export default function Header() {
 
   const {toggleColorMode} = useColorMode();
   const theme = useTheme();
+  const logEvent = useLogEventWithBasic();
   const isDark = theme.palette.mode === "dark";
 
   const {ref, inView} = useInView({
@@ -53,7 +55,7 @@ export default function Header() {
   let walletAddressRef = useRef("");
 
   if (account && walletAddressRef.current !== account.address) {
-    Statsig.logEvent("wallet_connected", account.address, {
+    logEvent("wallet_connected", account.address, {
       wallet_name: wallet!.name,
       network_type: state.network_name,
     });