Merge pull request #127 from dappforce/creator-staking-analytics

Add analytics for creator staking page
dappforce · Dec 19, 2023 · cbc16b1 · cbc16b1
2 parents f5fac56 + 3968a1c
commit cbc16b1
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 14 deletions.
diff --git a/src/components/creatorsStaking/Banner/index.tsx b/src/components/creatorsStaking/Banner/index.tsx
@@ -10,6 +10,7 @@ import { NextEraStartDate } from '../utils/NextEraStartDate'
 import { DashboardCard, TotalStakedBalance } from './utils'
 import { useCalculateApr } from './calculateApr'
 import { useMemo } from 'react'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
 
 const skeletonClassName = 'h-[20px] mb-1'
 
@@ -76,6 +77,7 @@ const StatsCards = () => {
 
 const Banner = () => {
   useFetchGeneralEraInfo()
+  const sendEvent = useSendEvent()
 
   return (
     <div className='md:!mx-4 mx-0'>
@@ -100,6 +102,7 @@ const Banner = () => {
             size='sm'
             target='_blank'
             href='https://docs.subsocial.network/docs/basics/creator-staking/'
+            onClick={() => sendEvent('cs_how_it_works_clicked')}
           >
             <span className='flex gap-2 items-center py-1'>
               <AiOutlineQuestionCircle size={20} /> How does it work?

diff --git a/src/components/creatorsStaking/Creators/AccountPreview.tsx b/src/components/creatorsStaking/Creators/AccountPreview.tsx
@@ -6,6 +6,7 @@ import { CreatorPreview } from '../utils/CreatorPreview'
 import { useResponsiveSize } from 'src/components/responsive'
 import { Tooltip } from 'antd'
 import { MdArrowOutward } from 'react-icons/md'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
 
 type AccountPreviewProps = {
   space?: CreatorSpace
@@ -14,6 +15,7 @@ type AccountPreviewProps = {
 
 const AccountPreview = ({ space, spaceId }: AccountPreviewProps) => {
   const { isMobile } = useResponsiveSize()
+  const sendEvent = useSendEvent()
 
   const { name, ownedByAccount, image, email, links, postsCount } = space || {}
 
@@ -25,7 +27,10 @@ const AccountPreview = ({ space, spaceId }: AccountPreviewProps) => {
     <Tooltip title={'See their posts on Polkaverse'}>
       <a
         href={`https://polkaverse.com/${spaceId}`}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation()
+          sendEvent('cs_polkaverse_link_clicked', { value: spaceId })
+        }}
         target='_blank'
         rel='noreferrer'
         className={clsx(

diff --git a/src/components/creatorsStaking/Creators/CreatorCard.tsx b/src/components/creatorsStaking/Creators/CreatorCard.tsx
@@ -22,6 +22,7 @@ import { MdArrowOutward } from 'react-icons/md'
 // import { useEraStakesById } from '@/rtk/features/creatorStaking/eraStake/eraStakeHooks'
 import MoveStakeModal from './modals/MoveStakeModal'
 import { useRouter } from 'next/router'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
 
 type CreatorNameProps = {
   name?: string
@@ -122,6 +123,7 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
   const { setOpen, setSpaceId, setMetadata } = useChatContext()
   const cardRef = useRef<HTMLDivElement>(null)
   const router = useRouter()
+  const sendEvent = useSendEvent()
 
   const { space, loading: spaceLoading } = creatorSpaceEntity || {}
   // const { info: eraStakeInfo, loading: eraStakeLoading } = eraStake || {}
@@ -196,14 +198,19 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
         body: about || '',
         image: image || '',
       })
+
+      sendEvent('cs_creator_chat_clicked', { value: spaceId })
     }
   }
 
   const postsLink = (
     <Tooltip title={'See their posts on Polkaverse'}>
       <a
         href={`https://polkaverse.com/${spaceId}`}
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation()
+          sendEvent('cs_polkaverse_link_clicked', { value: spaceId })
+        }}
         target='_blank'
         rel='noreferrer'
         className={clsx(
@@ -252,6 +259,7 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
               )
 
               setOpenAboutModal(true)
+              sendEvent('cs_about_modal_opened', { value: spaceId })
             }}
           >
             <div className='w-full flex justify-between gap-2'>
@@ -333,6 +341,7 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
         open={openStakeModal}
         closeModal={() => setOpenStakeModal(false)}
         spaceId={spaceId}
+        eventSource='creator-card'
         modalVariant={modalVariant}
         amount={amount}
         setAmount={setAmount}

diff --git a/src/components/creatorsStaking/Creators/index.tsx b/src/components/creatorsStaking/Creators/index.tsx
@@ -23,6 +23,7 @@ import { toGenericAccountId } from 'src/rtk/app/util'
 import { betaVersionAgreementStorageName } from './modals/StakeModal'
 import store from 'store'
 import DefaultAboutModal from './modals/DefaultAboutModal'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
 
 // const DEFAULT_PAGE_SIZE = 9
 
@@ -52,12 +53,7 @@ const CreatorsCards = ({
     )
 
   const creatorsCards = ids.map((spaceId, i) => (
-    <CreatorCard
-      key={i}
-      spaceId={spaceId}
-      era={era}
-      {...modalProps}
-    />
+    <CreatorCard key={i} spaceId={spaceId} era={era} {...modalProps} />
   ))
 
   // const start = (page - 1) * DEFAULT_PAGE_SIZE
@@ -98,6 +94,7 @@ const CreatorsSectionInner = ({
     useModalContext()
   const creatorsList = useCreatorsList()
   const isMulti = useIsMulti()
+  const sendEvent = useSendEvent()
 
   const isCreator = useMemo(
     () =>
@@ -122,11 +119,7 @@ const CreatorsSectionInner = ({
       id: 'all-creators',
       text: 'All Creators',
       content: () => (
-        <CreatorsCards
-          spaceIds={spaceIds}
-          era={era}
-          sortBy={sortBy}
-        />
+        <CreatorsCards spaceIds={spaceIds} era={era} sortBy={sortBy} />
       ),
     },
     {
@@ -151,6 +144,7 @@ const CreatorsSectionInner = ({
               href='https://forms.gle/t3YfTtGnbVdwm7kY8'
               target='_blank'
               size={'sm'}
+              onClick={() => sendEvent('cs_apply_as_creator_clicked')}
             >
               Apply to join
             </Button>
@@ -167,7 +161,10 @@ const CreatorsSectionInner = ({
           tabsRightElement={
             <SortByDropDown
               sortBy={sortBy}
-              changeSortBy={changeSortBy}
+              changeSortBy={(sortBy) => {
+                sendEvent('cs_filter_changed', { type: sortBy })
+                changeSortBy(sortBy)
+              }}
               panelSize='xs'
               panelClassName='!w-32'
               itemClassName='my-[2px]'

diff --git a/src/components/creatorsStaking/Creators/modals/AboutModal.tsx b/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
@@ -89,6 +89,7 @@ const AboutModal = ({
         closeModal={() => setOpenStakeModal(false)}
         spaceId={spaceId}
         modalVariant={modalVariant}
+        eventSource='about-modal'
         amount={amount}
         setAmount={setAmount}
       />

diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
@@ -4,6 +4,7 @@ import { useBackerInfo } from '@/rtk/features/creatorStaking/backerInfo/backerIn
 import { useMyAddress } from '@/components/providers/MyExtensionAccountsContext'
 import { useModalContext } from '../../contexts/ModalContext'
 import { useCreatorsList } from '@/rtk/features/creatorStaking/creatorsList/creatorsListHooks'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
 import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
 
 type DefaultAboutModalProps = {
@@ -15,6 +16,7 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const { amount, setAmount } = useModalContext()
   const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
   const creatorsList = useCreatorsList()
+  const sendEvent = useSendEvent() 
   const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
@@ -33,6 +35,7 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   useEffect(() => {
     if (defaultSpaceId && isCreator) {
       setOpenDefaultAboutModal(true)
+      sendEvent('cs_about_modal_opened', { value: defaultSpaceId })
     }
 
     if (defaultSpaceId && !isCreator) {

diff --git a/src/components/creatorsStaking/Creators/modals/StakeModal.tsx b/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
@@ -146,6 +146,7 @@ type StakeModalProps = {
   spaceId: string
   modalVariant: StakingModalVariant
   amount?: string
+  eventSource?: string
   setAmount: (amount: string) => void
 }
 
@@ -156,6 +157,7 @@ const StakingModal = ({
   modalVariant,
   setAmount,
   amount,
+  eventSource
 }: StakeModalProps) => {
   const creatorSpaceEntity = useCreatorSpaceById(spaceId)
   const [ inputError, setInputError ] = useState<string | undefined>(undefined)
@@ -235,6 +237,7 @@ const StakingModal = ({
           decimal={decimal}
           spaceId={spaceId}
           label={modalButton}
+          eventSource={eventSource}
           tokenSymbol={tokenSymbol}
           closeModal={closeModal}
           modalVariant={modalVariant}

diff --git a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
@@ -27,6 +27,9 @@ import {
 import { showParsedErrorMessage } from 'src/components/utils'
 import { useModalContext } from '../../contexts/ModalContext'
 import store from 'store'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
+import getAmountRange from '../../utils/getAmountRangeForAnalytics'
+import { useGetDecimalsAndSymbolByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
 
 export type CommonTxButtonProps = {
   amount?: string
@@ -38,6 +41,8 @@ export type CommonTxButtonProps = {
   modalVariant?: StakingModalVariant
   inputError?: string
   disabled?: boolean
+  eventSource?: string
+  onClick?: () => void
 }
 
 type StakingTxButtonProps = CommonTxButtonProps & {
@@ -52,6 +57,7 @@ function StakingTxButton ({
   disabled,
   tx,
   closeModal,
+  onClick,
   modalVariant,
   inputError,
 }: StakingTxButtonProps) {
@@ -110,6 +116,7 @@ function StakingTxButton ({
       tx={tx}
       disabled={disableButton}
       component={Component}
+      onClick={onClick}
       params={buildParams}
       onFailed={showParsedErrorMessage}
       onSuccess={onSuccess}
@@ -119,6 +126,8 @@ function StakingTxButton ({
 
 export function StakeOrIncreaseTxButton (props: CommonTxButtonProps) {
   const myAddress = useMyAddress()
+  const sendEvent = useSendEvent()
+  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
 
   const balancesByCurrency = useBalancesByNetwork({
     address: myAddress,
@@ -133,6 +142,12 @@ export function StakeOrIncreaseTxButton (props: CommonTxButtonProps) {
   return (
     <StakingTxButton
       {...props}
+      onClick={() =>
+        sendEvent('cs_stake_increase', {
+          amountRange: getAmountRange(decimal, props.amount),
+          eventSource: props.eventSource,
+        })
+      }
       disabled={availableBalance.isZero() || props.disabled}
       tx='creatorStaking.stake'
     />
@@ -143,6 +158,8 @@ export function UnstakeTxButton (props: CommonTxButtonProps) {
   const myAddress = useMyAddress()
   const backerInfo = useBackerInfo(props.spaceId, myAddress)
   const { info } = backerInfo || {}
+  const sendEvent = useSendEvent()
+  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
 
   const { totalStaked } = info || {}
 
@@ -151,6 +168,12 @@ export function UnstakeTxButton (props: CommonTxButtonProps) {
       {...props}
       disabled={!totalStaked || new BN(totalStaked).isZero() || props.disabled}
       tx='creatorStaking.unstake'
+      onClick={() => {
+        sendEvent('cs_stake_increase', {
+          amountRange: getAmountRange(decimal, props.amount),
+          eventSource: props.eventSource,
+        })
+      }}
     />
   )
 }
@@ -163,6 +186,7 @@ type MoveStakeTxButtonProps = {
   inputError?: string
   disabled?: boolean
   closeModal: () => void
+  eventSource?: string
 }
 
 export function MoveStakeTxButton ({
@@ -173,10 +197,12 @@ export function MoveStakeTxButton ({
   inputError,
   disabled,
   closeModal,
+  eventSource,
 }: MoveStakeTxButtonProps) {
   const myAddress = useMyAddress()
   const dispatch = useAppDispatch()
   const eraInfo = useGeneralEraInfo()
+  const sendEvent = useSendEvent()
 
   const onSuccess = () => {
     if (!spaceIdTo) return
@@ -225,6 +251,14 @@ export function MoveStakeTxButton ({
       disabled={disableButton}
       component={Component}
       params={buildParams}
+      onClick={() =>
+        sendEvent('cs_stake_increase', {
+          from: spaceIdFrom,
+          to: spaceIdTo,
+          amountRange: getAmountRange(decimal, amount),
+          eventSource: eventSource,
+        })
+      }
       onFailed={showParsedErrorMessage}
       onSuccess={onSuccess}
     />

diff --git a/src/components/creatorsStaking/MyStaking/ClaimRewardsTxButton.tsx b/src/components/creatorsStaking/MyStaking/ClaimRewardsTxButton.tsx
@@ -11,6 +11,7 @@ import { fetchBackerInfo } from 'src/rtk/features/creatorStaking/backerInfo/back
 import { fetchGeneralEraInfo, useGeneralEraInfo } from 'src/rtk/features/creatorStaking/generalEraInfo/generalEraInfoHooks'
 import { fetchEraStakes } from 'src/rtk/features/creatorStaking/eraStake/eraStakeHooks'
 import { fetchBackerLedger } from 'src/rtk/features/creatorStaking/backerLedger/backerLedgerHooks'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
 
 type ClaimRewardsTxButtonProps = {
   rewardsSpaceIds: string[]
@@ -29,6 +30,7 @@ const ClaimRewardsTxButton = ({
   const myAddress = useMyAddress()
   const eraInfo = useGeneralEraInfo()
   const backerRewards = useBackerRewards(myAddress)
+  const sendEvent = useSendEvent()
 
   const { loading } = backerRewards || {}
 
@@ -97,6 +99,7 @@ const ClaimRewardsTxButton = ({
       accountId={myAddress}
       tx={'utility.batch'}
       disabled={disableButton}
+      onClick={() => sendEvent('cs_claim', { restake })}
       component={Component}
       params={buildParams}
       onFailed={showParsedErrorMessage}

diff --git a/src/components/creatorsStaking/MyStaking/WithdrawTxButton.tsx b/src/components/creatorsStaking/MyStaking/WithdrawTxButton.tsx
@@ -12,6 +12,7 @@ import { useGeneralEraInfo } from 'src/rtk/features/creatorStaking/generalEraInf
 import { useMyAddress } from 'src/components/providers/MyExtensionAccountsContext'
 import BN from 'bignumber.js'
 import { showParsedErrorMessage } from 'src/components/utils'
+import { useSendEvent } from '@/components/providers/AnalyticContext'
 
 type WithdrawTxButtonProps = {
   switchToFirstTab: () => void
@@ -22,6 +23,7 @@ const WithdrawTxButton = ({ switchToFirstTab }: WithdrawTxButtonProps) => {
   const backerLedger = useBackerLedger(myAddress)
   const eraInfo = useGeneralEraInfo()
   const dispatch = useAppDispatch()
+  const sendEvent = useSendEvent()
 
   const { ledger, loading } = backerLedger || {}
   const { currentEra } = eraInfo?.info || {}
@@ -73,6 +75,7 @@ const WithdrawTxButton = ({ switchToFirstTab }: WithdrawTxButtonProps) => {
       tx={'creatorStaking.withdrawUnstaked'}
       disabled={!isSomeAvailable}
       component={Component}
+      onClick={() => sendEvent('cs_withdraw')}
       onFailed={showParsedErrorMessage}
       onSuccess={onSuccess}
     />