🚀 [QA] Update release environment

src/redux-state/selectors/realm.ts

@@ -39,6 +39,8 @@ export const selectHasLoadedRealmData = createSelector(
   (realms) => Object.keys(realms).length !== 0
 )
 
+export const selectDisplayedRealmName = selectDisplayedRealmProperty("name")
+
 export const selectDisplayedRealmAddress = selectDisplayedRealmProperty(
   "realmContractAddress"
 )

src/ui/Island/RealmDetails/RealmBanners/BannerRewards.tsx

@@ -11,6 +11,7 @@ import ClaimCongratulations from "ui/Claim/modals/ClaimCongratulations"
 import Tooltip from "shared/components/Tooltip"
 import { bigIntToDisplayUserAmount } from "shared/utils"
 import { LINKS } from "shared/constants"
+import { usePostHog } from "posthog-js/react"
 import XpClaimModal from "../XpClaim/XpClaimModal"
 
 export default function BannerRewards({
@@ -20,6 +21,8 @@ export default function BannerRewards({
   amount: bigint
   setJustClaimed: (hasClaimed: boolean) => void
 }) {
+  const posthog = usePostHog()
+
   const realmId = useDappSelector(selectDisplayedRealmId)
   const realm = useDappSelector((state) => selectRealmById(state, realmId))
 
@@ -34,12 +37,22 @@ export default function BannerRewards({
   const onClaim = useCallback(() => {
     setJustClaimed(true) // to keep the banner + congratulation modal open
     setCongratulationsModalOpen(true)
-  }, [setJustClaimed])
+    posthog?.capture("Realm XP claim completed", {
+      realmName: realm?.name,
+    })
+  }, [setJustClaimed, realm?.name, posthog])
 
   const onClose = useCallback(() => {
     setIsClaimTransactionModalOpen(false)
   }, [])
 
+  const onOpen = useCallback(() => {
+    posthog?.capture("Realm XP claim started", {
+      realmName: realm?.name,
+    })
+    setIsClaimTransactionModalOpen(true)
+  }, [posthog, realm?.name])
+
   if (!realmId || !realm) return null
 
   return (
@@ -72,7 +85,7 @@ export default function BannerRewards({
           <Button
             size="medium"
             type="secondary"
-            onClick={() => setIsClaimTransactionModalOpen(true)}
+            onClick={onOpen}
             isDisabled={amount === 0n}
           >
             Claim XP

src/ui/Island/RealmDetails/StakingForms/StakeForm.tsx

@@ -10,17 +10,14 @@ import {
   stopTrackingTransactionStatus,
   selectStakingRealmAddress,
   selectStakingRealmId,
-  selectRealmNameById,
+  selectDisplayedRealmName,
 } from "redux-state"
 import { isValidInputAmount, userAmountToBigInt } from "shared/utils"
 import classNames from "classnames"
 import { TAHO_ADDRESS } from "shared/constants"
 import { TransactionProgressStatus } from "shared/types"
 import TransactionProgress from "shared/components/Transactions/TransactionProgress"
 import { useAssistant, useTransactionSuccessCallback } from "shared/hooks"
-// Unfortunately the PostHog React package structure does not play nice with
-// no-extraneous-dependencies.
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { usePostHog } from "posthog-js/react"
 import StakeCongratulationsModal from "./StakeCongratulationsModal"
 
@@ -30,11 +27,9 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
   const dispatch = useDappDispatch()
 
   const displayedRealmAddress = useDappSelector(selectDisplayedRealmAddress)
+  const displayedRealmName = useDappSelector(selectDisplayedRealmName)
   const stakingRealmAddress = useDappSelector(selectStakingRealmAddress)
   const stakingRealmId = useDappSelector(selectStakingRealmId)
-  const realmName = useDappSelector((state) =>
-    selectRealmNameById(state, stakingRealmId)
-  )
 
   const [stakeAmount, setStakeAmount] = useState("")
   const [isStakeAmountValid, setIsStakeAmountValid] = useState(false)
@@ -64,7 +59,7 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
         })
       )
       posthog?.capture("Realm stake started", {
-        realmName,
+        realmName: displayedRealmName,
       })
     }
   }
@@ -85,7 +80,7 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
 
   const stakeTransactionSuccessCallback = useCallback(() => {
     posthog?.capture("Realm stake completed", {
-      realmName,
+      realmName: displayedRealmName,
     })
 
     setIsStakeTransactionModalOpen(false)
@@ -94,7 +89,7 @@ export default function StakeForm({ isDisabled }: { isDisabled: boolean }) {
     if (!stakingRealmId) {
       updateAssistant({ visible: true, type: "quests" })
     }
-  }, [posthog, realmName, dispatch, stakingRealmId, updateAssistant])
+  }, [posthog, displayedRealmName, dispatch, stakingRealmId, updateAssistant])
 
   const onInputChange = (value: string) => {
     setStakeAmount(value)

src/ui/Island/RealmDetails/StakingForms/UnstakeForm.tsx

@@ -11,7 +11,7 @@ import {
   selectTransactionStatusById,
   stopTrackingTransactionStatus,
   selectTokenBalanceByAddress,
-  selectRealmNameById,
+  selectDisplayedRealmName,
 } from "redux-state"
 import { isValidInputAmount, userAmountToBigInt } from "shared/utils"
 import classNames from "classnames"
@@ -24,9 +24,6 @@ import {
   useStakeCooldownPeriod,
   useTransactionSuccessCallback,
 } from "shared/hooks"
-// Unfortunately the PostHog React package structure does not play nice with
-// no-extraneous-dependencies.
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { usePostHog } from "posthog-js/react"
 
 const UNSTAKE_TX_ID = "unstake"
@@ -39,9 +36,7 @@ export default function UnstakeForm({ isDisabled }: { isDisabled: boolean }) {
     selectDisplayedRealmVeTokenAddress
   )
   const displayedRealmId = useDappSelector(selectDisplayedRealmId)
-  const realmName = useDappSelector((state) =>
-    selectRealmNameById(state, displayedRealmId)
-  )
+  const displayedRealmName = useDappSelector(selectDisplayedRealmName)
 
   const veTahoBalance = useDappSelector((state) =>
     selectTokenBalanceByAddress(state, displayedRealmVeTokenAddress)
@@ -78,7 +73,7 @@ export default function UnstakeForm({ isDisabled }: { isDisabled: boolean }) {
       )
     }
     posthog?.capture("Realm unstake started", {
-      realmName,
+      realmName: displayedRealmName,
     })
   }
 
@@ -92,15 +87,15 @@ export default function UnstakeForm({ isDisabled }: { isDisabled: boolean }) {
 
   const unstakeTransactionSuccessCallback = useCallback(() => {
     posthog?.capture("Realm unstake completed", {
-      realmName,
+      realmName: displayedRealmName,
     })
 
     setIsUnstakeTransactionModalOpen(false)
     setIsLeavingRealmModalOpen(false)
     setUnstakeAmount("")
     dispatch(stopTrackingTransactionStatus(UNSTAKE_TX_ID))
     updateAssistant({ visible: false, type: "default" })
-  }, [dispatch, realmName, posthog, updateAssistant])
+  }, [dispatch, displayedRealmName, posthog, updateAssistant])
 
   useTransactionSuccessCallback(
     unstakeTransactionStatus,

src/ui/Island/index.tsx

@@ -15,9 +15,6 @@ import {
   useDappSelector,
 } from "redux-state"
 import FullPageLoader from "shared/components/FullPageLoader"
-// Unfortunately the PostHog React package structure does not play nice with
-// no-extraneous-dependencies.
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { usePostHog } from "posthog-js/react"
 import InteractiveIsland from "./InteractiveIsland"
 import RealmDetails from "./RealmDetails"