Add StakeButton for Space view

src/components/spaces/AboutSpace.tsx

@@ -5,12 +5,11 @@ import config from 'src/config'
 import { getInitialPropsWithRedux } from 'src/rtk/app'
 import { SpaceContent } from 'src/types'
 import { PageContent } from '../main/PageWrapper'
-import { ProfilePreviewByAccountId } from '../profiles/address-views'
+import AuthorCard from '../profiles/address-views/AuthorCard'
 import { InfoPanel } from '../profiles/address-views/InfoSection'
 import { aboutSpaceUrl } from '../urls'
 import { DfMd } from '../utils/DfMd'
 import Section from '../utils/Section'
-import Segment from '../utils/Segment'
 import ViewTags from '../utils/ViewTags'
 import { SpaceNotFountPage, useIsUnlistedSpace } from './helpers'
 import { loadSpaceOnNextReq } from './helpers/loadSpaceOnNextReq'
@@ -24,7 +23,6 @@ type Props = ViewSpaceProps
 
 export const InnerAboutSpacePage: NextPage<Props> = ({ spaceData }) => {
   const { struct: space } = spaceData!
-  const { ownerId: spaceOwnerAddress } = space
 
   const [content] = useState(spaceData?.content || ({} as SpaceContent))
   const { name, about, image, tags, links = [], email } = content
@@ -68,9 +66,7 @@ export const InnerAboutSpacePage: NextPage<Props> = ({ spaceData }) => {
         <ContactInfo />
 
         <Section title={`Owner of ${name} on ${appName}`} className='mb-4'>
-          <Segment>
-            <ProfilePreviewByAccountId address={spaceOwnerAddress} />
-          </Segment>
+          <AuthorCard address={space.ownerId} withTipButton />
         </Section>
 
         <Section title={`Follow ${name} on ${appName}`}>

src/components/spaces/SpaceCard.tsx

@@ -8,6 +8,7 @@ import { DfMd } from '../utils/DfMd'
 import FollowSpaceButton from '../utils/FollowSpaceButton'
 import MyEntityLabel from '../utils/MyEntityLabel'
 import { OfficialSpaceStatus, SpaceAvatar, useIsMySpace } from './helpers'
+import { StakeButton } from './ViewSpace'
 import ViewSpaceLink from './ViewSpaceLink'
 
 export interface SpaceCardProps
@@ -55,9 +56,10 @@ export default function SpaceCard({ spaceId, ...props }: SpaceCardProps) {
         )
       }
       subtitle={<DfMd className='ColorCurrentColor' source={spaceData?.content?.about} />}
-      buttons={[
-        spaceData &&
-          (isMySpace ? (
+      buttons={
+        spaceData && [
+          <StakeButton key={'stake'} spaceId={spaceData.id} />,
+          isMySpace ? (
             <ButtonLink
               href={'/[spaceId]/edit'}
               as={editSpaceUrl(spaceData.struct)}
@@ -67,8 +69,9 @@ export default function SpaceCard({ spaceId, ...props }: SpaceCardProps) {
             </ButtonLink>
           ) : (
             <FollowSpaceButton space={spaceData.struct} />
-          )),
-      ]}
+          ),
+        ]
+      }
     />
   )
 }

src/components/spaces/SpacePreview.tsx

@@ -10,7 +10,7 @@ type PreviewProps = {
 }
 
 export const SpacePreview = ({ space }: PreviewProps) => (
-  <ViewSpace spaceData={space} withFollowButton preview withTipButton={false} />
+  <ViewSpace spaceData={space} withFollowButton preview withStakeButton />
 )
 
 type PublicSpacePreviewByIdProps = {

src/components/spaces/ViewSpace.tsx

@@ -1,12 +1,13 @@
 import { EditOutlined } from '@ant-design/icons'
 import { isEmptyStr, newLogger, nonEmptyStr } from '@subsocial/utils'
+import clsx from 'clsx'
 import dynamic from 'next/dynamic'
 import React, { MouseEvent, useCallback, useState } from 'react'
-import { Donate } from 'src/components/donate'
 import { ButtonLink } from 'src/components/utils/CustomLinks'
 import { Segment } from 'src/components/utils/Segment'
 import { LARGE_AVATAR_SIZE } from 'src/config/Size.config'
 import { SpaceContent, SpaceId, SpaceWithSomeDetails } from 'src/types'
+import config from '../../config'
 import { useSelectProfileSpace } from '../../rtk/features/profiles/profilesHooks'
 import { useSelectSpace } from '../../rtk/features/spaces/spacesHooks'
 import { useMyAddress } from '../auth/MyAccountsContext'
@@ -58,6 +59,14 @@ export const SpaceNameAsLink = React.memo(({ space, ...props }: SpaceNameAsLinkP
   return <ViewSpaceLink space={space.struct} title={spaceName} {...props} />
 })
 
+export const StakeButton = ({ spaceId }: { spaceId: SpaceId }) => {
+  return config.creatorIds?.includes(spaceId) ? (
+    <ButtonLink type='primary' href={'https://sub.id/creators'} className={clsx('mr-2')}>
+      Stake
+    </ButtonLink>
+  ) : null
+}
+
 export const InnerViewSpace = (props: Props) => {
   const {
     spaceData: initialSpaceData,
@@ -69,7 +78,7 @@ export const InnerViewSpace = (props: Props) => {
     withFollowButton = true,
     withStats = true,
     withTags = true,
-    withTipButton = true,
+    withStakeButton = true,
     showFullAbout = false,
     dropdownPreview = false,
 
@@ -187,7 +196,7 @@ export const InnerViewSpace = (props: Props) => {
                     <EditOutlined /> Edit
                   </ButtonLink>
                 ) : (
-                  withTipButton && <Donate recipientAddress={space.ownerId} />
+                  withStakeButton && <StakeButton spaceId={space.id} />
                 ))}
 
               {withFollowButton && <FollowSpaceButton space={space} />}

src/components/spaces/ViewSpaceProps.ts

@@ -10,7 +10,7 @@ export type ViewSpaceOptsProps = {
   withFollowButton?: boolean
   withTags?: boolean
   withStats?: boolean
-  withTipButton?: boolean
+  withStakeButton?: boolean
   showFullAbout?: boolean
   imageSize?: number
 }

src/components/spaces/helpers/SpaceDropdownMenu.tsx

@@ -53,19 +53,18 @@ export const SpaceDropdownMenu = (props: SpaceDropDownProps) => {
             </Link>
           </Menu.Item>
         )}
-        {!isMySpace ||
-          (!isUsingEmail && (
-            <Menu.Item key={`donate-${spaceKey}`}>
-              <Donate
-                recipientAddress={spaceOwnerId}
-                renderButtonElement={onClick => (
-                  <span className='d-block' onClick={onClick}>
-                    Tip
-                  </span>
-                )}
-              />
-            </Menu.Item>
-          ))}
+        {!isMySpace && (
+          <Menu.Item key={`donate-${spaceKey}`}>
+            <Donate
+              recipientAddress={spaceOwnerId}
+              renderButtonElement={onClick => (
+                <span className='d-block' onClick={onClick}>
+                  Tip
+                </span>
+              )}
+            />
+          </Menu.Item>
+        )}
         {!canCreatePost || isHidden(struct) ? null : (
           <Menu.Item key={`create-post-${spaceKey}`}>
             <Link {...createNewPostLinkProps(struct)}>

src/config/app/polkaverse/index.ts

@@ -23,6 +23,7 @@ const index: AppConfig = {
   claimedSpaceIds: ['1', '2', '3', '4', '5'],
   recommendedSpaceIds: polkaverseSpaces,
   suggestedTlds: ['sub', 'polka'],
+  creatorIds: ['11414', '4809', '4777', '6953', '10132', '6283', '11581', '7366', '11157', '11566'],
 }
 
 export default index

src/config/types.ts

@@ -100,6 +100,7 @@ export type AppConfig = {
   claimedSpaceIds: SpaceId[]
   recommendedSpaceIds: SpaceId[]
   suggestedTlds?: string[]
+  creatorIds?: string[]
 }
 
 export type CommonSubsocialFeatures = {