Merge branch 'main' into creator-staking-analytics

src/components/creatorsStaking/Creators/CreatorCard.tsx

@@ -98,6 +98,12 @@ const CreatorCardValue = ({
   )
 }
 
+const buildCreatorLinks = (spaceId: string, domain?: string) => {
+  const domainName = domain?.replace('.sub', '')
+
+  return `/creators/${domainName ? '@' + domainName : spaceId}`
+}
+
 type CreatorCardProps = {
   spaceId: string
   era?: string
@@ -244,11 +250,9 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
           <div
             className='cursor-pointer flex flex-col gap-3'
             onClick={() => {
-              const domainName = domain?.replace('.sub', '')
-
               router.replace(
                 '/creators/[creator]',
-                `/creators/${domainName ? '@' + domainName : spaceId}`,
+                buildCreatorLinks(spaceId, domain),
                 {
                   scroll: false,
                 }

src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx

@@ -4,8 +4,8 @@ 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 { useRouter } from 'next/router'
 import { useSendEvent } from '@/components/providers/AnalyticContext'
+import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
 
 type DefaultAboutModalProps = {
   defaultSpaceId?: string
@@ -16,8 +16,8 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const { amount, setAmount } = useModalContext()
   const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
   const creatorsList = useCreatorsList()
-  const router = useRouter() 
   const sendEvent = useSendEvent() 
+  const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
 
@@ -39,11 +39,7 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
     }
 
     if (defaultSpaceId && !isCreator) {
-      const query = router.query  
-
-      if(query.creator) {
-        router.replace('/creators')
-      }
+      redirectToCreatorsPage()
     }
   }, [ creatorsSpaceIds?.join(',') ])
 

src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx

@@ -20,6 +20,7 @@ import {
 import { BIGNUMBER_ZERO } from '@/config/app/consts'
 import BN from 'bignumber.js'
 import UserIcon from '@/assets/icons/user-icon.svg'
+import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
 
 type MoveStakeModalProps = {
   open: boolean
@@ -35,6 +36,7 @@ const MoveStakeModal = ({
   const myAddress = useMyAddress()
   const creatorsList = useCreatorsList()
   const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   const spaceIds = creatorsList?.map((item) => item.creator.spaceId)
   const myCreatorsIds = useGetMyCreatorsIds(spaceIds)
@@ -130,6 +132,7 @@ const MoveStakeModal = ({
       title={'🌟 Move Stake'}
       withCloseButton
       closeModal={() => {
+        redirectToCreatorsPage()
         closeModal()
       }}
     >

src/components/creatorsStaking/Creators/modals/StakeModal.tsx

@@ -17,6 +17,7 @@ import clsx from 'clsx'
 import { DaysToWithdrawWarning } from '../../utils/DaysToWithdraw'
 import { useStakingConsts } from '../../../../rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
 import AccountPreview from '../AccountPreview'
+import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
 
 export const betaVersionAgreementStorageName = 'BetaVersionAgreement'
 
@@ -136,7 +137,7 @@ const modalData = {
     modalButton: 'Increase',
     amountInput: StakeOrIncreaseStakeAmountInput,
     actionButton: StakeOrIncreaseTxButton,
-  }
+  },
 }
 
 type StakeModalProps = {
@@ -164,6 +165,7 @@ const StakingModal = ({
   const betaversionAgreement = store.get(
     betaVersionAgreementStorageName
   ) as boolean
+  const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   useEffect(() => {
     if (open) {
@@ -198,6 +200,8 @@ const StakingModal = ({
       title={title}
       withCloseButton
       closeModal={() => {
+        redirectToCreatorsPage()
+
         closeModal()
       }}
     >

src/components/creatorsStaking/Creators/modals/SuccessModal.tsx

@@ -38,8 +38,6 @@ const SuccessModal = ({
   const { name, ownedByAccount, image, links } = space || {}
   const owner = ownedByAccount?.id
 
-
-
   return (
     <Modal
       isOpen={open}

src/components/creatorsStaking/hooks/useRedirectToCreatorsPage.tsx

@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router'
+
+const useRedirectToCreatorsPage = () => {
+  const router = useRouter()
+
+  return () => {
+    const creator = router.query.creator
+
+    if (creator) {
+      router.replace('/creators', '/creators', { scroll: false })
+    }
+  }
+}
+
+export default useRedirectToCreatorsPage

src/components/utils/index.tsx

@@ -198,7 +198,7 @@ export const isHomePage = (): boolean =>
   isClientSide() && window.location.pathname === '/'
 
 export const isCreatorStakingPage = (): boolean =>
-  isClientSide() && window.location.pathname === '/creators'
+  isClientSide() && window.location.pathname.includes('/creators')
 
 export const isAccountsPage = (): boolean =>
   isClientSide() &&

src/pages/creators/[creator].tsx

@@ -20,7 +20,9 @@ getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch, context }) => {
         ? domainOrSpaceIdFromUrl
         : domainOrSpaceIdFromUrl + '.sub'
 
-    const domainStructByDomainName = await getOwnerByDomain(domain.replace('@', ''))
+    const domainStructByDomainName = await getOwnerByDomain(
+      domain.replace('@', '')
+    )
 
     const { innerValue } = domainStructByDomainName || {}
 
@@ -37,6 +39,7 @@ getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch, context }) => {
     head: {
       title: 'Support Favorite Creators And Receive Tokens!',
       desc: 'Stake SUB towards the best creators of content, applications, and communities. Both you and the creator will receive more tokens, and help grow the network.',
+      // TODO: create auto-generated image for particular creator, we can use this one: https://nextjs.org/docs/app/api-reference/functions/image-response
       image: '/images/creator-staking/meta-bg.jpg',
       forceTitle: true,
     },

src/pages/creators/index.tsx

@@ -5,7 +5,6 @@ import { FETCH_CHIAN_INFO_WITH_PRICES } from 'src/rtk/app/actions'
 import { fetchStakingConsts } from '../../rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
 
 getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch }) => {
-
   dispatch({ type: FETCH_CHIAN_INFO_WITH_PRICES })
   fetchCreatorsList(dispatch)
   fetchStakingConsts(dispatch)
@@ -17,8 +16,7 @@ getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch }) => {
       image: '/images/creator-staking/meta-bg.jpg',
       forceTitle: true,
     },
-    spaceId: '',
-    domain: '',
+    spaceId: undefined,
   }
 })