Add username/domain to url for each creator

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'
+  })
 )

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 }
 

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,19 @@ 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,
+                }
+              )
+
+              setOpenAboutModal(true)
+            }}
           >
             <div className='w-full flex justify-between gap-2'>
               <CreatorPreview

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,12 +81,16 @@ const CreatorsCards = ({
   )
 }
 
-type CreatorsSectionInnerProps = {
+type CreatorsSectionInnerProps = CreatorsSectionProps & {
   spaceIds?: string[]
   era?: string
 }
 
-const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
+const CreatorsSectionInner = ({
+  spaceIds,
+  era,
+  defaultSpaceId,
+}: CreatorsSectionInnerProps) => {
   const [ tab, setTab ] = useState(0)
   const myAddress = useMyAddress()
   const [ sortBy, changeSortBy ] = useState('default')
@@ -112,7 +122,11 @@ const CreatorsSectionInner = ({ spaceIds, era }: CreatorsSectionInnerProps) => {
       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>
   )
 }

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

@@ -5,13 +5,14 @@ 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
   closeModal: () => void
   spaceId: string
   isStake: boolean
-  amount: string
+  amount?: string
   setAmount: (amount: string) => void
 }
 
@@ -28,6 +29,7 @@ const AboutModal = ({
   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()
         }}
       >

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

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

@@ -0,0 +1,61 @@
+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'
+import { useCreatorsList } from '@/rtk/features/creatorStaking/creatorsList/creatorsListHooks'
+import { useRouter } from 'next/router'
+
+type DefaultAboutModalProps = {
+  defaultSpaceId?: string
+}
+
+const DefaultAboutModal = ({ defaultSpaceId }: DefaultAboutModalProps) => {
+  const myAddress = useMyAddress()
+  const { amount, setAmount } = useModalContext()
+  const [ openDefaultAboutModal, setOpenDefaultAboutModal ] = useState(false)
+  const creatorsList = useCreatorsList()
+  const router = useRouter()
+
+  const creatorsSpaceIds = creatorsList?.map(({ id }) => id)
+
+  const isCreator =
+    defaultSpaceId && creatorsSpaceIds?.includes(defaultSpaceId?.toString())
+
+  const backerInfo = useBackerInfo(defaultSpaceId, myAddress)
+
+  const { info } = backerInfo || {}
+
+  const { totalStaked } = info || {}
+
+  const isStake = totalStaked === '0'
+
+  useEffect(() => {
+    if (defaultSpaceId && isCreator) {
+      setOpenDefaultAboutModal(true)
+    }
+
+    if (defaultSpaceId && !isCreator) {
+      const query = router.query
+
+      if (query.creator) {
+        router.replace('/creators', '/creators', { scroll: false })
+      }
+    }
+  }, [ creatorsSpaceIds?.join(',') ])
+
+  if (!defaultSpaceId || !isCreator) return null
+
+  return (
+    <AboutModal
+      open={openDefaultAboutModal}
+      closeModal={() => setOpenDefaultAboutModal(false)}
+      spaceId={defaultSpaceId}
+      isStake={isStake}
+      amount={amount}
+      setAmount={setAmount}
+    />
+  )
+}
+
+export default DefaultAboutModal

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()
       }}
     >

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,15 +137,15 @@ const modalData = {
     modalButton: 'Increase',
     amountInput: StakeOrIncreaseStakeAmountInput,
     actionButton: StakeOrIncreaseTxButton,
-  }
+  },
 }
 
 type StakeModalProps = {
   closeModal: () => void
   open: boolean
   spaceId: string
   modalVariant: StakingModalVariant
-  amount: string
+  amount?: string
   setAmount: (amount: string) => void
 }
 
@@ -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()
       }}
     >

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
@@ -78,7 +78,7 @@ function StakingTxButton ({
   }
 
   const buildParams = () => {
-    const amountWithDecimals = getBalanceWithDecimal(amount, decimal)
+    const amountWithDecimals = getBalanceWithDecimal(amount || '0', decimal)
 
     return [ spaceId, amountWithDecimals.toString() ]
   }

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 (
@@ -78,7 +82,7 @@ const CreatorsStaking = () => {
           )}
 
           <StakingInfoBanner />
-          <CreatorsSection />
+          <CreatorsSection defaultSpaceId={defaultSpaceId} />
         </div>
       </StakingContextWrapper>
     </div>