style: improve UI for stake card and refactor isZero implementation

src/components/creators/CreatorDashboardSidebar.tsx

@@ -60,7 +60,7 @@ function SpacePageSidebar({ space }: Extract<CreatorDashboardSidebarType, { name
     return <SupportCreatorsCard />
   }
 
-  return data?.isZero === false ? (
+  return data?.hasStaked ? (
     <>
       <MyStakeCard space={space} />
       <GetMoreSubCard />
@@ -88,11 +88,7 @@ function PostPageSidebar({ space }: Extract<CreatorDashboardSidebarType, { name:
   return (
     <>
       <CreatorInfoCard space={space} />
-      {loading ? null : data?.isZero === false ? (
-        <GetMoreSubCard />
-      ) : (
-        <StakeSubCard space={space} />
-      )}
+      {loading ? null : data?.hasStaked ? <GetMoreSubCard /> : <StakeSubCard space={space} />}
     </>
   )
 }

src/components/creators/cards/CreatorInfoCard.tsx

@@ -44,7 +44,7 @@ export default function CreatorInfoCard({ space }: CreatorInfoCardProps) {
       </div>
       <CollapsibleParagraph className='FontSmall mb-3' text={space.content?.about ?? ''} />
       <div className='GapSmall d-flex flex-column'>
-        {data?.isZero === false && (
+        {data?.hasStaked && (
           <Button target='_blank' type='primary' href={getSubIdCreatorsLink(space)}>
             Stake
           </Button>

src/components/creators/cards/StakeSubCard.module.sass

@@ -37,9 +37,18 @@
 @media screen and (max-width: 767px)
   .StakeSubCard
     .Content
+      display: block
+
       .Image
-        width: 150px
-        align-self: center
+        display: none
+
+      .ImageMobile
+        display: block
+        float: right
+        width: 140px
+        position: relative
+        margin-top: -10px
+        margin-right: -10px
 
 @media screen and (max-width: 455px)
   .StakeSubCard
@@ -55,10 +64,7 @@
       .ImageMobile
         display: block
         float: right
-        width: 125px
+        width: 115px
         position: relative
-        margin-top: -20px
-        margin-right: -20px
-
-      .StakeButton
-        background: white !important
+        margin-top: -10px
+        margin-right: -10px

src/components/creators/cards/StakeSubCard.tsx

@@ -1,6 +1,7 @@
 import { SpaceData } from '@subsocial/api/types'
 import { Button } from 'antd'
 import clsx from 'clsx'
+import { useResponsiveSize } from 'src/components/responsive'
 import { DfImage } from 'src/components/utils/DfImage'
 import { getSubIdCreatorsLink } from 'src/utils/links'
 import styles from './StakeSubCard.module.sass'
@@ -10,6 +11,7 @@ export type StakeSubCardProps = {
 }
 
 export default function StakeSubCard({ space }: StakeSubCardProps) {
+  const { isSmallMobile } = useResponsiveSize()
   return (
     <div className={clsx(styles.StakeSubCard)}>
       <div className={styles.Content}>
@@ -22,7 +24,12 @@ export default function StakeSubCard({ space }: StakeSubCardProps) {
           src='/images/creators/subsocial-tokens.png'
           className={clsx(styles.Image, 'mb-3')}
         />
-        <Button href={getSubIdCreatorsLink(space)} target='_blank' type='primary' block>
+        <Button
+          href={getSubIdCreatorsLink(space)}
+          target='_blank'
+          type='primary'
+          block={isSmallMobile}
+        >
           Stake
         </Button>
       </div>

src/components/spaces/ViewSpace.tsx

@@ -6,11 +6,13 @@ import React, { MouseEvent, useCallback, useState } from 'react'
 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 { useFetchStakeData } from 'src/rtk/features/stakes/stakesHooks'
+import { SpaceContent, SpaceData, 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'
+import MyStakeCard from '../creators/cards/MyStakeCard'
 import StakeSubCard from '../creators/cards/StakeSubCard'
 import MakeAsProfileModal from '../profiles/address-views/utils/MakeAsProfileModal'
 import { useIsMobileWidthOrDevice } from '../responsive'
@@ -279,11 +281,7 @@ export const InnerViewSpace = (props: Props) => {
       <PendingSpaceOwnershipPanel space={space} />
       <HiddenSpaceAlert space={space} />
       <Section className='pt-2'>{renderPreview()}</Section>
-      {isCreatorSpace && isMobile && (
-        <div className='mt-4'>
-          <StakeSubCard space={spaceData} />
-        </div>
-      )}
+      {isCreatorSpace && isMobile && <MobileCreatorCard spaceData={spaceData} />}
       <Section className='DfContentPage mt-4'>
         <PostPreviewsOnSpace spaceData={spaceData} posts={posts} postIds={postIds} />
       </Section>
@@ -292,6 +290,17 @@ export const InnerViewSpace = (props: Props) => {
   )
 }
 
+function MobileCreatorCard({ spaceData }: { spaceData: SpaceData }) {
+  const myAddress = useMyAddress()
+  const { data } = useFetchStakeData(myAddress ?? '', spaceData.id)
+
+  return (
+    <div className='mt-4'>
+      {data?.hasStaked ? <MyStakeCard space={spaceData} /> : <StakeSubCard space={spaceData} />}
+    </div>
+  )
+}
+
 export const ViewSpace = (props: Props) => {
   const { spaceData: initialSpaceData } = props
 

src/components/utils/OffchainUtils.ts

@@ -69,7 +69,7 @@ export const getTotalStake = async ({ address }: { address: string }) => {
   const totalStake = (res?.data?.totalLocked as string) || ''
   const stakeAmount = BigInt(totalStake)
 
-  return { amount: stakeAmount.toString(), isZero: stakeAmount <= 0 }
+  return { amount: stakeAmount.toString(), hasStaked: stakeAmount > 0 }
 }
 
 export const getStakeAmount = async ({
@@ -88,7 +88,7 @@ export const getStakeAmount = async ({
   const newestStakeInfo = (res?.data?.[spaceId]?.[0] as { staked: string; era: number }) || {}
   const stakeAmount = BigInt(newestStakeInfo.staked)
 
-  return { stakeAmount: stakeAmount.toString(), isZero: stakeAmount <= 0 }
+  return { stakeAmount: stakeAmount.toString(), hasStaked: stakeAmount > 0 }
 }
 
 type BalanceByNetworkProps = {

src/rtk/features/stakes/stakesSlice.ts

@@ -7,7 +7,7 @@ export type StakeData = {
   address: string
   creatorSpaceId: string
   stakeAmount: string
-  isZero: boolean
+  hasStaked: boolean
 }
 
 const sliceName = 'stakes'
@@ -48,7 +48,7 @@ export const fetchStakeData = createAsyncThunk<
 
     async function fetchData() {
       const data = await getStakeAmount({ address, spaceId: creatorSpaceId })
-      let stakeAmount = { stakeAmount: '0', isZero: true }
+      let stakeAmount = { stakeAmount: '0', hasStaked: false }
       if (data) stakeAmount = data
       return { address, creatorSpaceId, ...stakeAmount }
     }

src/rtk/features/stakes/totalStakeSlice.ts

@@ -6,7 +6,7 @@ import { RootState } from 'src/rtk/app/rootReducer'
 export type TotalStake = {
   address: string
   amount: string
-  isZero?: boolean
+  hasStaked?: boolean
 }
 
 const sliceName = 'totalStakes'
@@ -37,7 +37,7 @@ export const fetchTotalStake = createAsyncThunk<
 
   async function fetchData() {
     const data = await getTotalStake({ address })
-    let stakeAmount = { amount: '0', isZero: true }
+    let stakeAmount = { amount: '0', hasStaked: false }
     if (data) stakeAmount = data
     return { address, ...stakeAmount }
   }