From e1d1060f6503e31fe49bc07dc2e6e0f3d1c4a7a8 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 14 Dec 2023 13:29:08 +0200
Subject: [PATCH 1/8] Resolve creator spaceId

- add about modal is spaceId exist in url
---
 src/api/domains.ts                            |  8 +++
 .../creatorsStaking/Creators/CreatorCard.tsx  | 12 ++---
 .../creatorsStaking/Creators/index.tsx        | 43 +++++++++++----
 .../Creators/modals/AboutModal.tsx            |  2 +-
 .../Creators/modals/AmountInput.tsx           |  2 +-
 .../Creators/modals/DefaultAboutModal.tsx     | 45 ++++++++++++++++
 .../Creators/modals/StakeModal.tsx            |  2 +-
 .../Creators/modals/TxButtons.tsx             |  2 +-
 src/components/creatorsStaking/index.tsx      |  6 ++-
 src/components/main/CreatorStakingPage.tsx    | 12 ++++-
 src/pages/creators/[creator].tsx              | 54 +++++++++++++++++++
 src/pages/creators/index.tsx                  |  3 ++
 src/rtk/app/util.ts                           |  1 +
 13 files changed, 169 insertions(+), 23 deletions(-)
 create mode 100644 src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
 create mode 100644 src/pages/creators/[creator].tsx

diff --git a/src/api/domains.ts b/src/api/domains.ts
index 04ee90ef..fa09b551 100644
--- a/src/api/domains.ts
+++ b/src/api/domains.ts
@@ -6,4 +6,12 @@ export const getOwnerByDomain = async (domain: string) => (
     onFailReturnedValue: undefined,
     onFailedText: 'Failed to get address by domain'
   })
+)
+
+export const getDomainBySpaceId = async (spaceId: string) => (
+  sendGetRequest({
+    params: { url: `domain/${spaceId}` },
+    onFailReturnedValue: undefined,
+    onFailedText: 'Failed to get domain by space id'
+  })
 )
\ No newline at end of file
diff --git a/src/components/creatorsStaking/Creators/CreatorCard.tsx b/src/components/creatorsStaking/Creators/CreatorCard.tsx
index 83e81303..eefb715c 100644
--- a/src/components/creatorsStaking/Creators/CreatorCard.tsx
+++ b/src/components/creatorsStaking/Creators/CreatorCard.tsx
@@ -6,7 +6,7 @@ import { FormatBalance } from 'src/components/common/balances'
 import { useBackerInfo } from 'src/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
 import { useMyAddress } from 'src/components/providers/MyExtensionAccountsContext'
 import AboutModal from './modals/AboutModal'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import StakingModal, { StakingModalVariant } from './modals/StakeModal'
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
 import { ContactInfo } from '../utils/socialLinks'
@@ -39,7 +39,7 @@ const CreatorName = ({ name, loading, cardRef }: CreatorNameProps) => {
 
   return (
     <FloatingWrapper
-      allowedPlacements={[ 'top' ]}
+      allowedPlacements={['top']}
       mainAxisOffset={4}
       panel={() => (
         <div className='rounded-md border border-background-lighter bg-white px-1.5 text-sm py-1'>
@@ -108,10 +108,10 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
   // const eraStake = useEraStakesById(spaceId, era)
   const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
   const backerInfo = useBackerInfo(spaceId, myAddress)
-  const [ openAboutModal, setOpenAboutModal ] = useState(false)
-  const [ openStakeModal, setOpenStakeModal ] = useState(false)
-  const [ openMoveStakeModal, setOpenMoveStakeModal ] = useState(false)
-  const [ modalVariant, setModalVariant ] = useState<StakingModalVariant>('stake')
+  const [openAboutModal, setOpenAboutModal] = useState(false)
+  const [openStakeModal, setOpenStakeModal] = useState(false)
+  const [openMoveStakeModal, setOpenMoveStakeModal] = useState(false)
+  const [modalVariant, setModalVariant] = useState<StakingModalVariant>('stake')
   const { setOpen, setSpaceId, setMetadata } = useChatContext()
   const cardRef = useRef<HTMLDivElement>(null)
 
diff --git a/src/components/creatorsStaking/Creators/index.tsx b/src/components/creatorsStaking/Creators/index.tsx
index f47fa81c..64188ed7 100644
--- a/src/components/creatorsStaking/Creators/index.tsx
+++ b/src/components/creatorsStaking/Creators/index.tsx
@@ -22,6 +22,7 @@ import SuccessModal from './modals/SuccessModal'
 import { toGenericAccountId } from 'src/rtk/app/util'
 import { betaVersionAgreementStorageName } from './modals/StakeModal'
 import store from 'store'
+import DefaultAboutModal from './modals/DefaultAboutModal';
 
 // const DEFAULT_PAGE_SIZE = 9
 
@@ -51,7 +52,12 @@ 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
@@ -75,15 +81,19 @@ const CreatorsCards = ({
   )
 }
 
-type CreatorsSectionInnerProps = {
+type CreatorsSectionInnerProps = CreatorsSectionProps & {
   spaceIds?: string[]
   era?: string
 }
 
-const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
-  const [ tab, setTab ] = useState(0)
+const CreatorsSectionInner = ({
+  spaceIds,
+  era,
+  defaultSpaceId,
+}: CreatorsSectionInnerProps) => {
+  const [tab, setTab] = useState(0)
   const myAddress = useMyAddress()
-  const [ sortBy, changeSortBy ] = useState('default')
+  const [sortBy, changeSortBy] = useState('default')
   const { showSuccessModal, setShowSuccessModal, amount, stakedSpaceId } =
     useModalContext()
   const creatorsList = useCreatorsList()
@@ -94,7 +104,7 @@ const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
       !!creatorsList?.find(
         (item) => toGenericAccountId(item.creator.stakeholder) === myAddress
       ),
-    [ creatorsList?.length ]
+    [creatorsList?.length]
   )
 
   const myCreatorsIds = useGetMyCreatorsIds(spaceIds)
@@ -105,14 +115,18 @@ const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
     } else {
       store.set(betaVersionAgreementStorageName, false)
     }
-  }, [ myCreatorsIds.length, myAddress ])
+  }, [myCreatorsIds.length, myAddress])
 
   const tabs: TabsProps['tabs'] = [
     {
       id: 'all-creators',
       text: 'All Creators',
       content: () => (
-        <CreatorsCards spaceIds={spaceIds} era={era} sortBy={sortBy} />
+        <CreatorsCards
+          spaceIds={spaceIds}
+          era={era}
+          sortBy={sortBy}
+        />
       ),
     },
     {
@@ -173,11 +187,16 @@ const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
         tokenSymbol={'SUB'}
         amount={amount}
       />
+      <DefaultAboutModal defaultSpaceId={defaultSpaceId} />
     </div>
   )
 }
 
-const CreatorsSection = () => {
+type CreatorsSectionProps = {
+  defaultSpaceId?: string
+}
+
+const CreatorsSection = ({ defaultSpaceId }: CreatorsSectionProps) => {
   const myAddress = useMyAddress()
   const creatorsList = useCreatorsList()
   const eraInfo = useGeneralEraInfo()
@@ -192,7 +211,11 @@ const CreatorsSection = () => {
 
   return (
     <ModalContextWrapper>
-      <CreatorsSectionInner spaceIds={creatorsSpaceIds} era={currentEra} />
+      <CreatorsSectionInner
+        defaultSpaceId={defaultSpaceId}
+        spaceIds={creatorsSpaceIds}
+        era={currentEra}
+      />
     </ModalContextWrapper>
   )
 }
diff --git a/src/components/creatorsStaking/Creators/modals/AboutModal.tsx b/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
index 9884d773..3ed636e9 100644
--- a/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
@@ -11,7 +11,7 @@ type AboutModalProps = {
   closeModal: () => void
   spaceId: string
   isStake: boolean
-  amount: string
+  amount?: string
   setAmount: (amount: string) => void
 }
 
diff --git a/src/components/creatorsStaking/Creators/modals/AmountInput.tsx b/src/components/creatorsStaking/Creators/modals/AmountInput.tsx
index 9e532731..880ba362 100644
--- a/src/components/creatorsStaking/Creators/modals/AmountInput.tsx
+++ b/src/components/creatorsStaking/Creators/modals/AmountInput.tsx
@@ -22,7 +22,7 @@ type CommonAmountInputProps = {
   setAmount: (amount: string) => void
   inputError?: string
   setInputError: (error?: string) => void
-  amount: string
+  amount?: string
   tokenSymbol?: string
   decimals?: number
   label: string
diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
new file mode 100644
index 00000000..71ff0b5e
--- /dev/null
+++ b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+import AboutModal from './AboutModal'
+import { useBackerInfo } from '@/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
+import { useMyAddress } from '@/components/providers/MyExtensionAccountsContext'
+import { useModalContext } from '../../contexts/ModalContext'
+
+type DefaultAboutModalProps = {
+  defaultSpaceId?: string
+}
+
+const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
+  const myAddress = useMyAddress()
+  const { amount, setAmount } = useModalContext()
+  const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
+
+  const backerInfo = useBackerInfo(defaultSpaceId, myAddress)
+  
+  const { info } = backerInfo || {}
+  
+  // const { backersCount, totalStaked: total } = eraStakeInfo || {}
+  const { totalStaked } = info || {}
+  
+  const isStake = totalStaked === '0'
+  
+  useEffect(() => {
+    if (defaultSpaceId) {
+      setOpenDefaultAboutModal(true)
+    }
+  }, [defaultSpaceId])
+
+  if(!defaultSpaceId) return null
+
+  return (
+    <AboutModal
+      open={openDefaultAboutModal}
+      closeModal={() => setOpenDefaultAboutModal(false)}
+      spaceId={defaultSpaceId}
+      isStake={isStake}
+      amount={amount}
+      setAmount={setAmount}
+    />
+  )
+}
+
+export default DefaultAboutModal
diff --git a/src/components/creatorsStaking/Creators/modals/StakeModal.tsx b/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
index f6a49f5c..3793b6c1 100644
--- a/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
@@ -144,7 +144,7 @@ type StakeModalProps = {
   open: boolean
   spaceId: string
   modalVariant: StakingModalVariant
-  amount: string
+  amount?: string
   setAmount: (amount: string) => void
 }
 
diff --git a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
index 67e6713b..9d97e428 100644
--- a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
+++ b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
@@ -29,7 +29,7 @@ import { useModalContext } from '../../contexts/ModalContext'
 import store from 'store'
 
 export type CommonTxButtonProps = {
-  amount: string
+  amount?: string
   spaceId: string
   decimal: number
   label: string
diff --git a/src/components/creatorsStaking/index.tsx b/src/components/creatorsStaking/index.tsx
index 037c7ab3..575343ca 100644
--- a/src/components/creatorsStaking/index.tsx
+++ b/src/components/creatorsStaking/index.tsx
@@ -58,7 +58,11 @@ const MultiAccountWarning = () => {
   )
 }
 
-const CreatorsStaking = () => {
+type CreatorsStakingProps = {
+  defaultSpaceId?: string
+}
+
+const CreatorsStaking = ({ defaultSpaceId }: CreatorsStakingProps) => {
   const isMulti = useIsMulti()
 
   return (
diff --git a/src/components/main/CreatorStakingPage.tsx b/src/components/main/CreatorStakingPage.tsx
index 49596fca..c38f8342 100644
--- a/src/components/main/CreatorStakingPage.tsx
+++ b/src/components/main/CreatorStakingPage.tsx
@@ -5,8 +5,16 @@ import Footer from '../footer/Footer'
 import styles from './Main.module.sass'
 import CreatorsStaking from '../creatorsStaking'
 import clsx from 'clsx'
+import { NextPage } from 'next'
+
+type CreatorStakingPageProp = {
+  spaceId?: string 
+  domain?: string
+}
+
+const CreatorStakingPage: NextPage<CreatorStakingPageProp> = (props) => {
+  console.log(props)
 
-const CreatorStakingPage = () => {
   return (
     <>
       <Head>
@@ -21,7 +29,7 @@ const CreatorStakingPage = () => {
 
       <div className={clsx('layout-wrapper', styles.CreatorStakingSection)}>
         <PageContent className='position-relative'>
-          <CreatorsStaking />
+          <CreatorsStaking defaultSpaceId={props.spaceId} />
         </PageContent>
       </div>
       <Footer />
diff --git a/src/pages/creators/[creator].tsx b/src/pages/creators/[creator].tsx
new file mode 100644
index 00000000..cef5ef9d
--- /dev/null
+++ b/src/pages/creators/[creator].tsx
@@ -0,0 +1,54 @@
+import CreatorsStakingPage from 'src/components/main/CreatorStakingPage'
+import { getInitialPropsWithRedux } from 'src/rtk/app/nextHelpers'
+import { fetchCreatorsList } from '../../rtk/features/creatorStaking/creatorsList/creatorsListHooks'
+import { FETCH_CHIAN_INFO_WITH_PRICES } from 'src/rtk/app/actions'
+import { fetchStakingConsts } from '../../rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
+import { getDomainBySpaceId, getOwnerByDomain } from '@/api'
+import { tryParseInt } from '@/components/utils'
+
+getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch, context }) => {
+  const { creator } = context.query
+
+  const domainOrSpaceId = creator as string
+
+  const isDomain = !tryParseInt(domainOrSpaceId as string, 0)
+
+  let domain = ''
+  let spaceId = ''
+
+  if (isDomain) {
+    domain =
+      domainOrSpaceId.split('.').length > 1
+        ? domainOrSpaceId
+        : domainOrSpaceId + '.sub'
+    const domainStructByDomainName = await getOwnerByDomain(domain)
+
+    console.log(domainStructByDomainName)
+
+    const { innerValue } = domainStructByDomainName || {}
+
+    const { space: domainSpaceId } = innerValue || {}
+
+    spaceId = domainSpaceId
+  } else {
+    domain = await getDomainBySpaceId(domainOrSpaceId)
+    spaceId = domainOrSpaceId
+  }
+
+  dispatch({ type: FETCH_CHIAN_INFO_WITH_PRICES })
+  fetchCreatorsList(dispatch)
+  fetchStakingConsts(dispatch)
+
+  return {
+    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.',
+      image: '/images/creator-staking/meta-bg.jpg',
+      forceTitle: true,
+    },
+    spaceId,
+    domain,
+  }
+})
+
+export default CreatorsStakingPage
diff --git a/src/pages/creators/index.tsx b/src/pages/creators/index.tsx
index d498f747..fc96d286 100644
--- a/src/pages/creators/index.tsx
+++ b/src/pages/creators/index.tsx
@@ -5,6 +5,7 @@ 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)
@@ -16,6 +17,8 @@ getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch }) => {
       image: '/images/creator-staking/meta-bg.jpg',
       forceTitle: true,
     },
+    spaceId: '',
+    domain: '',
   }
 })
 
diff --git a/src/rtk/app/util.ts b/src/rtk/app/util.ts
index 7130dc2a..fd7ea481 100644
--- a/src/rtk/app/util.ts
+++ b/src/rtk/app/util.ts
@@ -221,6 +221,7 @@ export const getAddressesByDomain = async (addressesOrDomains?: string[]) => {
       : addressOrDomain + '.sub'
       
       const owner = await getOwnerByDomain(domain)
+      console.log('owner', owner)
       return owner?.owner || addressOrDomain
     }
 

From 4e304022d58ce4d73bc622910059b93346619203 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Thu, 14 Dec 2023 15:20:49 +0200
Subject: [PATCH 2/8] Open about modal when domain or space exist in url

---
 public/tailwind.css                           | 12 +++-----
 .../creatorsStaking/Creators/CreatorCard.tsx  | 29 +++++++++++++++++--
 .../Creators/modals/AboutModal.tsx            | 23 +++++++++++++--
 .../Creators/modals/DefaultAboutModal.tsx     |  2 +-
 src/components/main/CreatorStakingPage.tsx    |  5 +---
 src/pages/creators/[creator].tsx              | 25 ++++++----------
 src/rtk/app/util.ts                           |  2 +-
 .../creatorsSpaces/creatorsSpacesSlice.ts     |  1 +
 8 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/public/tailwind.css b/public/tailwind.css
index 47c4cb39..2fafcc7e 100644
--- a/public/tailwind.css
+++ b/public/tailwind.css
@@ -909,6 +909,10 @@ video {
   width: 14rem;
 }
 
+.w-\[13rem\] {
+  width: 13rem;
+}
+
 .w-\[14rem\] {
   width: 14rem;
 }
@@ -1417,14 +1421,6 @@ video {
   --tw-bg-opacity: 0.25;
 }
 
-.bg-earn-sub-desktop-banner {
-  background-image: url(/images/banners/earn-sub-desktop-banner.png);
-}
-
-.bg-earn-sub-mobile-banner {
-  background-image: url(/images/banners/earn-sub-mobile-banner.png);
-}
-
 .bg-staking-bg-mobile {
   background-image: url(/images/banners/staking-bg-mobile.png);
 }
diff --git a/src/components/creatorsStaking/Creators/CreatorCard.tsx b/src/components/creatorsStaking/Creators/CreatorCard.tsx
index eefb715c..dc037115 100644
--- a/src/components/creatorsStaking/Creators/CreatorCard.tsx
+++ b/src/components/creatorsStaking/Creators/CreatorCard.tsx
@@ -21,6 +21,7 @@ import { pluralize } from '@subsocial/utils'
 import { MdArrowOutward } from 'react-icons/md'
 // import { useEraStakesById } from '@/rtk/features/creatorStaking/eraStake/eraStakeHooks'
 import MoveStakeModal from './modals/MoveStakeModal'
+import { useRouter } from 'next/router'
 
 type CreatorNameProps = {
   name?: string
@@ -114,6 +115,7 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
   const [modalVariant, setModalVariant] = useState<StakingModalVariant>('stake')
   const { setOpen, setSpaceId, setMetadata } = useChatContext()
   const cardRef = useRef<HTMLDivElement>(null)
+  const router = useRouter()
 
   const { space, loading: spaceLoading } = creatorSpaceEntity || {}
   // const { info: eraStakeInfo, loading: eraStakeLoading } = eraStake || {}
@@ -124,8 +126,16 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
 
   const isStake = totalStaked === '0'
 
-  const { name, about, postsCount, ownedByAccount, image, links, email } =
-    space || {}
+  const {
+    name,
+    about,
+    postsCount,
+    ownedByAccount,
+    image,
+    links,
+    email,
+    domain,
+  } = space || {}
 
   const owner = ownedByAccount?.id
 
@@ -226,7 +236,20 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
         <div className='flex flex-col gap-2'>
           <div
             className='cursor-pointer flex flex-col gap-3'
-            onClick={() => setOpenAboutModal(true)}
+            onClick={() => {
+              const domainName = domain?.replace('.sub', '')
+
+              router.replace(
+                '/creators/[creator]',
+                `/creators/${domainName ? '@' + domainName : spaceId}`,
+                {
+                  scroll: false,
+                  shallow: true,
+                }
+              )
+
+              setOpenAboutModal(true)
+            }}
           >
             <div className='w-full flex justify-between gap-2'>
               <CreatorPreview
diff --git a/src/components/creatorsStaking/Creators/modals/AboutModal.tsx b/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
index 3ed636e9..00978b13 100644
--- a/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
@@ -5,6 +5,7 @@ import StakingModal, { StakingModalVariant } from './StakeModal'
 import { useState } from 'react'
 import AccountPreview from '../AccountPreview'
 import MoveStakeModal from './MoveStakeModal'
+import { useRouter } from 'next/router'
 
 type AboutModalProps = {
   open: boolean
@@ -25,9 +26,10 @@ const AboutModal = ({
 }: AboutModalProps) => {
   const creatorSpaceEntity = useCreatorSpaceById(spaceId)
 
-  const [ openStakeModal, setOpenStakeModal ] = useState(false)
-  const [ modalVariant, setModalVariant ] = useState<StakingModalVariant>('stake')
-  const [ openMoveStakeModal, setOpenMoveStakeModal ] = useState(false)
+  const [openStakeModal, setOpenStakeModal] = useState(false)
+  const [modalVariant, setModalVariant] = useState<StakingModalVariant>('stake')
+  const [openMoveStakeModal, setOpenMoveStakeModal] = useState(false)
+  const router = useRouter()
 
   const { space } = creatorSpaceEntity || {}
 
@@ -42,6 +44,21 @@ const AboutModal = ({
         title={'ℹ️ About'}
         withCloseButton
         closeModal={() => {
+          const query = router.query
+
+          if (query.creator) {
+            delete query.creator
+          }
+
+          router.replace(
+            {
+              pathname: '/creators',
+              query,
+            },
+            undefined,
+            { scroll: false }
+          )
+
           closeModal()
         }}
       >
diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
index 71ff0b5e..763a6c3a 100644
--- a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
@@ -26,7 +26,7 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
     if (defaultSpaceId) {
       setOpenDefaultAboutModal(true)
     }
-  }, [defaultSpaceId])
+  }, [])
 
   if(!defaultSpaceId) return null
 
diff --git a/src/components/main/CreatorStakingPage.tsx b/src/components/main/CreatorStakingPage.tsx
index c38f8342..afb31d6b 100644
--- a/src/components/main/CreatorStakingPage.tsx
+++ b/src/components/main/CreatorStakingPage.tsx
@@ -8,13 +8,10 @@ import clsx from 'clsx'
 import { NextPage } from 'next'
 
 type CreatorStakingPageProp = {
-  spaceId?: string 
-  domain?: string
+  spaceId?: string
 }
 
 const CreatorStakingPage: NextPage<CreatorStakingPageProp> = (props) => {
-  console.log(props)
-
   return (
     <>
       <Head>
diff --git a/src/pages/creators/[creator].tsx b/src/pages/creators/[creator].tsx
index cef5ef9d..955a0cf7 100644
--- a/src/pages/creators/[creator].tsx
+++ b/src/pages/creators/[creator].tsx
@@ -3,36 +3,30 @@ import { getInitialPropsWithRedux } from 'src/rtk/app/nextHelpers'
 import { fetchCreatorsList } from '../../rtk/features/creatorStaking/creatorsList/creatorsListHooks'
 import { FETCH_CHIAN_INFO_WITH_PRICES } from 'src/rtk/app/actions'
 import { fetchStakingConsts } from '../../rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
-import { getDomainBySpaceId, getOwnerByDomain } from '@/api'
-import { tryParseInt } from '@/components/utils'
+import { getOwnerByDomain } from '@/api'
 
 getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch, context }) => {
   const { creator } = context.query
 
-  const domainOrSpaceId = creator as string
+  const domainOrSpaceIdFromUrl = creator as string
 
-  const isDomain = !tryParseInt(domainOrSpaceId as string, 0)
+  const isDomain = domainOrSpaceIdFromUrl?.startsWith('@')
 
-  let domain = ''
-  let spaceId = ''
+  let spaceId = domainOrSpaceIdFromUrl
 
   if (isDomain) {
-    domain =
-      domainOrSpaceId.split('.').length > 1
-        ? domainOrSpaceId
-        : domainOrSpaceId + '.sub'
-    const domainStructByDomainName = await getOwnerByDomain(domain)
+    const domain =
+      domainOrSpaceIdFromUrl?.split('.').length > 1
+        ? domainOrSpaceIdFromUrl
+        : domainOrSpaceIdFromUrl + '.sub'
 
-    console.log(domainStructByDomainName)
+    const domainStructByDomainName = await getOwnerByDomain(domain.replace('@', ''))
 
     const { innerValue } = domainStructByDomainName || {}
 
     const { space: domainSpaceId } = innerValue || {}
 
     spaceId = domainSpaceId
-  } else {
-    domain = await getDomainBySpaceId(domainOrSpaceId)
-    spaceId = domainOrSpaceId
   }
 
   dispatch({ type: FETCH_CHIAN_INFO_WITH_PRICES })
@@ -47,7 +41,6 @@ getInitialPropsWithRedux(CreatorsStakingPage, async ({ dispatch, context }) => {
       forceTitle: true,
     },
     spaceId,
-    domain,
   }
 })
 
diff --git a/src/rtk/app/util.ts b/src/rtk/app/util.ts
index fd7ea481..89dee986 100644
--- a/src/rtk/app/util.ts
+++ b/src/rtk/app/util.ts
@@ -221,7 +221,7 @@ export const getAddressesByDomain = async (addressesOrDomains?: string[]) => {
       : addressOrDomain + '.sub'
       
       const owner = await getOwnerByDomain(domain)
-      console.log('owner', owner)
+      
       return owner?.owner || addressOrDomain
     }
 
diff --git a/src/rtk/features/creatorStaking/creatorsSpaces/creatorsSpacesSlice.ts b/src/rtk/features/creatorStaking/creatorsSpaces/creatorsSpacesSlice.ts
index f5994279..6a5e9557 100644
--- a/src/rtk/features/creatorStaking/creatorsSpaces/creatorsSpacesSlice.ts
+++ b/src/rtk/features/creatorStaking/creatorsSpaces/creatorsSpacesSlice.ts
@@ -22,6 +22,7 @@ export type CreatorSpace = {
   name: string
   about: string
   links: string[]
+  domain: string
   email: string
   postsCount: string
   ownedByAccount: {

From de440555e9ef04c992b54be18319db8e5d1c9f52 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 15 Dec 2023 13:33:23 +0200
Subject: [PATCH 3/8] Check that default space id is creator

---
 .../Creators/modals/DefaultAboutModal.tsx              | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
index 763a6c3a..5151c5bc 100644
--- a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
@@ -3,6 +3,7 @@ import AboutModal from './AboutModal'
 import { useBackerInfo } from '@/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
 import { useMyAddress } from '@/components/providers/MyExtensionAccountsContext'
 import { useModalContext } from '../../contexts/ModalContext'
+import { useCreatorsList } from '@/rtk/features/creatorStaking/creatorsList/creatorsListHooks'
 
 type DefaultAboutModalProps = {
   defaultSpaceId?: string
@@ -12,6 +13,11 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const myAddress = useMyAddress()
   const { amount, setAmount } = useModalContext()
   const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
+  const creatorsList = useCreatorsList()
+
+  const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
+
+  const isCreator = defaultSpaceId && creatorsSpaceIds?.includes(defaultSpaceId)
 
   const backerInfo = useBackerInfo(defaultSpaceId, myAddress)
   
@@ -23,12 +29,12 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const isStake = totalStaked === '0'
   
   useEffect(() => {
-    if (defaultSpaceId) {
+    if (defaultSpaceId && isCreator) {
       setOpenDefaultAboutModal(true)
     }
   }, [])
 
-  if(!defaultSpaceId) return null
+  if(!defaultSpaceId || !isCreator) return null
 
   return (
     <AboutModal

From 512af8c1a4b5743cd0dfcd27dec0cc015312f451 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Fri, 15 Dec 2023 14:45:05 +0200
Subject: [PATCH 4/8] Fix modal openning

---
 .../Creators/modals/DefaultAboutModal.tsx      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
index 5151c5bc..bc694b26 100644
--- a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
@@ -12,29 +12,29 @@ type DefaultAboutModalProps = {
 const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const myAddress = useMyAddress()
   const { amount, setAmount } = useModalContext()
-  const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
+  const [openDefaultAboutModal, setOpenDefaultAboutModal] = useState(false)
   const creatorsList = useCreatorsList()
 
   const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
 
-  const isCreator = defaultSpaceId && creatorsSpaceIds?.includes(defaultSpaceId)
+  const isCreator =
+    defaultSpaceId && creatorsSpaceIds?.includes(defaultSpaceId?.toString())
 
   const backerInfo = useBackerInfo(defaultSpaceId, myAddress)
-  
+
   const { info } = backerInfo || {}
-  
-  // const { backersCount, totalStaked: total } = eraStakeInfo || {}
+
   const { totalStaked } = info || {}
-  
+
   const isStake = totalStaked === '0'
-  
+
   useEffect(() => {
     if (defaultSpaceId && isCreator) {
       setOpenDefaultAboutModal(true)
     }
-  }, [])
+  }, [creatorsSpaceIds?.join(',')])
 
-  if(!defaultSpaceId || !isCreator) return null
+  if (!defaultSpaceId || !isCreator) return null
 
   return (
     <AboutModal

From 9a0cbfdb415dfa155bee3ca4d015de0766532a37 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 18 Dec 2023 16:05:07 +0200
Subject: [PATCH 5/8] Change tailwind css file

---
 public/tailwind.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/tailwind.css b/public/tailwind.css
index 2fafcc7e..47c4cb39 100644
--- a/public/tailwind.css
+++ b/public/tailwind.css
@@ -909,10 +909,6 @@ video {
   width: 14rem;
 }
 
-.w-\[13rem\] {
-  width: 13rem;
-}
-
 .w-\[14rem\] {
   width: 14rem;
 }
@@ -1421,6 +1417,14 @@ video {
   --tw-bg-opacity: 0.25;
 }
 
+.bg-earn-sub-desktop-banner {
+  background-image: url(/images/banners/earn-sub-desktop-banner.png);
+}
+
+.bg-earn-sub-mobile-banner {
+  background-image: url(/images/banners/earn-sub-mobile-banner.png);
+}
+
 .bg-staking-bg-mobile {
   background-image: url(/images/banners/staking-bg-mobile.png);
 }

From 84678a4a84b40bb7aa3246b05f139720e0436bc0 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 18 Dec 2023 16:14:44 +0200
Subject: [PATCH 6/8] Remove space id if space is not a creator

---
 .../creatorsStaking/Creators/CreatorCard.tsx       | 13 ++++++-------
 src/components/creatorsStaking/Creators/index.tsx  | 10 +++++-----
 .../creatorsStaking/Creators/modals/AboutModal.tsx |  6 +++---
 .../Creators/modals/DefaultAboutModal.tsx          | 14 ++++++++++++--
 .../creatorsStaking/Creators/modals/TxButtons.tsx  |  2 +-
 src/components/creatorsStaking/index.tsx           |  2 +-
 6 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/CreatorCard.tsx b/src/components/creatorsStaking/Creators/CreatorCard.tsx
index dc037115..fc04068c 100644
--- a/src/components/creatorsStaking/Creators/CreatorCard.tsx
+++ b/src/components/creatorsStaking/Creators/CreatorCard.tsx
@@ -6,7 +6,7 @@ import { FormatBalance } from 'src/components/common/balances'
 import { useBackerInfo } from 'src/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
 import { useMyAddress } from 'src/components/providers/MyExtensionAccountsContext'
 import AboutModal from './modals/AboutModal'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import StakingModal, { StakingModalVariant } from './modals/StakeModal'
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
 import { ContactInfo } from '../utils/socialLinks'
@@ -40,7 +40,7 @@ const CreatorName = ({ name, loading, cardRef }: CreatorNameProps) => {
 
   return (
     <FloatingWrapper
-      allowedPlacements={['top']}
+      allowedPlacements={[ 'top' ]}
       mainAxisOffset={4}
       panel={() => (
         <div className='rounded-md border border-background-lighter bg-white px-1.5 text-sm py-1'>
@@ -109,10 +109,10 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
   // const eraStake = useEraStakesById(spaceId, era)
   const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
   const backerInfo = useBackerInfo(spaceId, myAddress)
-  const [openAboutModal, setOpenAboutModal] = useState(false)
-  const [openStakeModal, setOpenStakeModal] = useState(false)
-  const [openMoveStakeModal, setOpenMoveStakeModal] = useState(false)
-  const [modalVariant, setModalVariant] = useState<StakingModalVariant>('stake')
+  const [ openAboutModal, setOpenAboutModal ] = useState(false)
+  const [ openStakeModal, setOpenStakeModal ] = useState(false)
+  const [ openMoveStakeModal, setOpenMoveStakeModal ] = useState(false)
+  const [ modalVariant, setModalVariant ] = useState<StakingModalVariant>('stake')
   const { setOpen, setSpaceId, setMetadata } = useChatContext()
   const cardRef = useRef<HTMLDivElement>(null)
   const router = useRouter()
@@ -244,7 +244,6 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
                 `/creators/${domainName ? '@' + domainName : spaceId}`,
                 {
                   scroll: false,
-                  shallow: true,
                 }
               )
 
diff --git a/src/components/creatorsStaking/Creators/index.tsx b/src/components/creatorsStaking/Creators/index.tsx
index 64188ed7..e05c601a 100644
--- a/src/components/creatorsStaking/Creators/index.tsx
+++ b/src/components/creatorsStaking/Creators/index.tsx
@@ -22,7 +22,7 @@ import SuccessModal from './modals/SuccessModal'
 import { toGenericAccountId } from 'src/rtk/app/util'
 import { betaVersionAgreementStorageName } from './modals/StakeModal'
 import store from 'store'
-import DefaultAboutModal from './modals/DefaultAboutModal';
+import DefaultAboutModal from './modals/DefaultAboutModal'
 
 // const DEFAULT_PAGE_SIZE = 9
 
@@ -91,9 +91,9 @@ const CreatorsSectionInner = ({
   era,
   defaultSpaceId,
 }: CreatorsSectionInnerProps) => {
-  const [tab, setTab] = useState(0)
+  const [ tab, setTab ] = useState(0)
   const myAddress = useMyAddress()
-  const [sortBy, changeSortBy] = useState('default')
+  const [ sortBy, changeSortBy ] = useState('default')
   const { showSuccessModal, setShowSuccessModal, amount, stakedSpaceId } =
     useModalContext()
   const creatorsList = useCreatorsList()
@@ -104,7 +104,7 @@ const CreatorsSectionInner = ({
       !!creatorsList?.find(
         (item) => toGenericAccountId(item.creator.stakeholder) === myAddress
       ),
-    [creatorsList?.length]
+    [ creatorsList?.length ]
   )
 
   const myCreatorsIds = useGetMyCreatorsIds(spaceIds)
@@ -115,7 +115,7 @@ const CreatorsSectionInner = ({
     } else {
       store.set(betaVersionAgreementStorageName, false)
     }
-  }, [myCreatorsIds.length, myAddress])
+  }, [ myCreatorsIds.length, myAddress ])
 
   const tabs: TabsProps['tabs'] = [
     {
diff --git a/src/components/creatorsStaking/Creators/modals/AboutModal.tsx b/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
index 00978b13..e46ec4e3 100644
--- a/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/AboutModal.tsx
@@ -26,9 +26,9 @@ const AboutModal = ({
 }: AboutModalProps) => {
   const creatorSpaceEntity = useCreatorSpaceById(spaceId)
 
-  const [openStakeModal, setOpenStakeModal] = useState(false)
-  const [modalVariant, setModalVariant] = useState<StakingModalVariant>('stake')
-  const [openMoveStakeModal, setOpenMoveStakeModal] = useState(false)
+  const [ openStakeModal, setOpenStakeModal ] = useState(false)
+  const [ modalVariant, setModalVariant ] = useState<StakingModalVariant>('stake')
+  const [ openMoveStakeModal, setOpenMoveStakeModal ] = useState(false)
   const router = useRouter()
 
   const { space } = creatorSpaceEntity || {}
diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
index bc694b26..0003697a 100644
--- 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 { useRouter } from 'next/router'
 
 type DefaultAboutModalProps = {
   defaultSpaceId?: string
@@ -12,8 +13,9 @@ type DefaultAboutModalProps = {
 const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const myAddress = useMyAddress()
   const { amount, setAmount } = useModalContext()
-  const [openDefaultAboutModal, setOpenDefaultAboutModal] = useState(false)
+  const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
   const creatorsList = useCreatorsList()
+  const router = useRouter()  
 
   const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
 
@@ -32,7 +34,15 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
     if (defaultSpaceId && isCreator) {
       setOpenDefaultAboutModal(true)
     }
-  }, [creatorsSpaceIds?.join(',')])
+
+    if (defaultSpaceId && !isCreator) {
+      const query = router.query  
+
+      if(query.creator) {
+        router.replace('/creators')
+      }
+    }
+  }, [ creatorsSpaceIds?.join(',') ])
 
   if (!defaultSpaceId || !isCreator) return null
 
diff --git a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
index 9d97e428..480fdb87 100644
--- a/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
+++ b/src/components/creatorsStaking/Creators/modals/TxButtons.tsx
@@ -78,7 +78,7 @@ function StakingTxButton ({
   }
 
   const buildParams = () => {
-    const amountWithDecimals = getBalanceWithDecimal(amount, decimal)
+    const amountWithDecimals = getBalanceWithDecimal(amount || '0', decimal)
 
     return [ spaceId, amountWithDecimals.toString() ]
   }
diff --git a/src/components/creatorsStaking/index.tsx b/src/components/creatorsStaking/index.tsx
index 575343ca..e5c5597a 100644
--- a/src/components/creatorsStaking/index.tsx
+++ b/src/components/creatorsStaking/index.tsx
@@ -82,7 +82,7 @@ const CreatorsStaking = ({ defaultSpaceId }: CreatorsStakingProps) => {
           )}
 
           <StakingInfoBanner />
-          <CreatorsSection />
+          <CreatorsSection defaultSpaceId={defaultSpaceId} />
         </div>
       </StakingContextWrapper>
     </div>

From 807f7af531cd04d102acc7e1a0afc8e326ff74e7 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Mon, 18 Dec 2023 17:54:24 +0200
Subject: [PATCH 7/8] Remove username or space id when close modal

---
 src/components/chat/ChatIframe.tsx                     |  2 ++
 .../Creators/modals/DefaultAboutModal.tsx              |  8 ++++----
 .../creatorsStaking/Creators/modals/MoveStakeModal.tsx |  7 +++++++
 .../creatorsStaking/Creators/modals/StakeModal.tsx     | 10 +++++++++-
 src/components/utils/index.tsx                         |  2 +-
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/chat/ChatIframe.tsx b/src/components/chat/ChatIframe.tsx
index aa5609aa..a3a10b46 100644
--- a/src/components/chat/ChatIframe.tsx
+++ b/src/components/chat/ChatIframe.tsx
@@ -29,6 +29,8 @@ function generateGrillConfig ({
 
   const isCreatorStaking = isCreatorStakingPage()
 
+  console.log(isCreatorStaking, window.location.href)
+
   // TODO: remove this hack and improve the config for using hub instead of channel
   const hub = isCreatorStaking || spaceId ? { id: creatorsHubId } : { id: hubId }
 
diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
index 0003697a..6d1b33ac 100644
--- a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
@@ -15,7 +15,7 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const { amount, setAmount } = useModalContext()
   const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
   const creatorsList = useCreatorsList()
-  const router = useRouter()  
+  const router = useRouter()
 
   const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
 
@@ -36,10 +36,10 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
     }
 
     if (defaultSpaceId && !isCreator) {
-      const query = router.query  
+      const query = router.query
 
-      if(query.creator) {
-        router.replace('/creators')
+      if (query.creator) {
+        router.replace('/creators', '/creators', { scroll: false })
       }
     }
   }, [ creatorsSpaceIds?.join(',') ])
diff --git a/src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx b/src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx
index 5a37d44c..bcde53ff 100644
--- a/src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx
+++ b/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 { useRouter } from 'next/router'
 
 type MoveStakeModalProps = {
   open: boolean
@@ -35,6 +36,7 @@ const MoveStakeModal = ({
   const myAddress = useMyAddress()
   const creatorsList = useCreatorsList()
   const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const router = useRouter()
 
   const spaceIds = creatorsList?.map((item) => item.creator.spaceId)
   const myCreatorsIds = useGetMyCreatorsIds(spaceIds)
@@ -130,6 +132,11 @@ const MoveStakeModal = ({
       title={'🌟 Move Stake'}
       withCloseButton
       closeModal={() => {
+        const query = router.query
+
+        if (query.creator) {
+          router.replace('/creators', '/creators', { scroll: false })
+        }
         closeModal()
       }}
     >
diff --git a/src/components/creatorsStaking/Creators/modals/StakeModal.tsx b/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
index 3793b6c1..3838b717 100644
--- a/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
+++ b/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 { useRouter } from 'next/router'
 
 export const betaVersionAgreementStorageName = 'BetaVersionAgreement'
 
@@ -136,7 +137,7 @@ const modalData = {
     modalButton: 'Increase',
     amountInput: StakeOrIncreaseStakeAmountInput,
     actionButton: StakeOrIncreaseTxButton,
-  }
+  },
 }
 
 type StakeModalProps = {
@@ -162,6 +163,7 @@ const StakingModal = ({
   const betaversionAgreement = store.get(
     betaVersionAgreementStorageName
   ) as boolean
+  const router = useRouter()
 
   useEffect(() => {
     if (open) {
@@ -196,6 +198,12 @@ const StakingModal = ({
       title={title}
       withCloseButton
       closeModal={() => {
+        const query = router.query
+
+        if (query.creator) {
+          router.replace('/creators', '/creators', { scroll: false })
+        }
+
         closeModal()
       }}
     >
diff --git a/src/components/utils/index.tsx b/src/components/utils/index.tsx
index 277ebd26..7ea6b952 100644
--- a/src/components/utils/index.tsx
+++ b/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() &&

From 3c1a29a6c99f1a15286c6a79f3c65c6e03105de0 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 19 Dec 2023 14:26:59 +0200
Subject: [PATCH 8/8] Refactor after review

---
 src/components/chat/ChatIframe.tsx                |  2 --
 .../creatorsStaking/Creators/CreatorCard.tsx      | 10 +++++++---
 .../Creators/modals/DefaultAboutModal.tsx         | 10 +++-------
 .../Creators/modals/MoveStakeModal.tsx            | 10 +++-------
 .../Creators/modals/StakeModal.tsx                | 10 +++-------
 .../Creators/modals/SuccessModal.tsx              |  2 --
 .../hooks/useRedirectToCreatorsPage.tsx           | 15 +++++++++++++++
 src/pages/creators/[creator].tsx                  |  5 ++++-
 src/pages/creators/index.tsx                      |  4 +---
 9 files changed, 36 insertions(+), 32 deletions(-)
 create mode 100644 src/components/creatorsStaking/hooks/useRedirectToCreatorsPage.tsx

diff --git a/src/components/chat/ChatIframe.tsx b/src/components/chat/ChatIframe.tsx
index a3a10b46..aa5609aa 100644
--- a/src/components/chat/ChatIframe.tsx
+++ b/src/components/chat/ChatIframe.tsx
@@ -29,8 +29,6 @@ function generateGrillConfig ({
 
   const isCreatorStaking = isCreatorStakingPage()
 
-  console.log(isCreatorStaking, window.location.href)
-
   // TODO: remove this hack and improve the config for using hub instead of channel
   const hub = isCreatorStaking || spaceId ? { id: creatorsHubId } : { id: hubId }
 
diff --git a/src/components/creatorsStaking/Creators/CreatorCard.tsx b/src/components/creatorsStaking/Creators/CreatorCard.tsx
index fc04068c..3b38aebe 100644
--- a/src/components/creatorsStaking/Creators/CreatorCard.tsx
+++ b/src/components/creatorsStaking/Creators/CreatorCard.tsx
@@ -97,6 +97,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
@@ -237,11 +243,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,
                 }
diff --git a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
index 6d1b33ac..f4983c89 100644
--- a/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/DefaultAboutModal.tsx
@@ -4,7 +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 { useRouter } from 'next/router'
+import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
 
 type DefaultAboutModalProps = {
   defaultSpaceId?: string
@@ -15,7 +15,7 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
   const { amount, setAmount } = useModalContext()
   const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
   const creatorsList = useCreatorsList()
-  const router = useRouter()
+  const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
 
@@ -36,11 +36,7 @@ const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
     }
 
     if (defaultSpaceId && !isCreator) {
-      const query = router.query
-
-      if (query.creator) {
-        router.replace('/creators', '/creators', { scroll: false })
-      }
+      redirectToCreatorsPage()
     }
   }, [ creatorsSpaceIds?.join(',') ])
 
diff --git a/src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx b/src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx
index bcde53ff..9b6153a9 100644
--- a/src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx
@@ -20,7 +20,7 @@ import {
 import { BIGNUMBER_ZERO } from '@/config/app/consts'
 import BN from 'bignumber.js'
 import UserIcon from '@/assets/icons/user-icon.svg'
-import { useRouter } from 'next/router'
+import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
 
 type MoveStakeModalProps = {
   open: boolean
@@ -36,7 +36,7 @@ const MoveStakeModal = ({
   const myAddress = useMyAddress()
   const creatorsList = useCreatorsList()
   const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
-  const router = useRouter()
+  const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   const spaceIds = creatorsList?.map((item) => item.creator.spaceId)
   const myCreatorsIds = useGetMyCreatorsIds(spaceIds)
@@ -132,11 +132,7 @@ const MoveStakeModal = ({
       title={'🌟 Move Stake'}
       withCloseButton
       closeModal={() => {
-        const query = router.query
-
-        if (query.creator) {
-          router.replace('/creators', '/creators', { scroll: false })
-        }
+        redirectToCreatorsPage()
         closeModal()
       }}
     >
diff --git a/src/components/creatorsStaking/Creators/modals/StakeModal.tsx b/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
index 3838b717..951bda0f 100644
--- a/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/StakeModal.tsx
@@ -17,7 +17,7 @@ import clsx from 'clsx'
 import { DaysToWithdrawWarning } from '../../utils/DaysToWithdraw'
 import { useStakingConsts } from '../../../../rtk/features/creatorStaking/stakingConsts/stakingConstsHooks'
 import AccountPreview from '../AccountPreview'
-import { useRouter } from 'next/router'
+import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
 
 export const betaVersionAgreementStorageName = 'BetaVersionAgreement'
 
@@ -163,7 +163,7 @@ const StakingModal = ({
   const betaversionAgreement = store.get(
     betaVersionAgreementStorageName
   ) as boolean
-  const router = useRouter()
+  const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   useEffect(() => {
     if (open) {
@@ -198,11 +198,7 @@ const StakingModal = ({
       title={title}
       withCloseButton
       closeModal={() => {
-        const query = router.query
-
-        if (query.creator) {
-          router.replace('/creators', '/creators', { scroll: false })
-        }
+        redirectToCreatorsPage()
 
         closeModal()
       }}
diff --git a/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx b/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
index 7aeb5399..51df48fe 100644
--- a/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
+++ b/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}
diff --git a/src/components/creatorsStaking/hooks/useRedirectToCreatorsPage.tsx b/src/components/creatorsStaking/hooks/useRedirectToCreatorsPage.tsx
new file mode 100644
index 00000000..f5890256
--- /dev/null
+++ b/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
diff --git a/src/pages/creators/[creator].tsx b/src/pages/creators/[creator].tsx
index 955a0cf7..c2ff2e14 100644
--- a/src/pages/creators/[creator].tsx
+++ b/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,
     },
diff --git a/src/pages/creators/index.tsx b/src/pages/creators/index.tsx
index fc96d286..b2fb7600 100644
--- a/src/pages/creators/index.tsx
+++ b/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,
   }
 })