From f6cf6076d3c3ea9d2860b2f1610e3b6d2fb407fc Mon Sep 17 00:00:00 2001 From: teodorus-nathaniel Date: Tue, 26 Dec 2023 20:57:20 +0700 Subject: [PATCH] style: improve UI for stake card and refactor isZero implementation --- .../creators/CreatorDashboardSidebar.tsx | 8 ++----- .../creators/cards/CreatorInfoCard.tsx | 2 +- .../creators/cards/StakeSubCard.module.sass | 22 ++++++++++++------- .../creators/cards/StakeSubCard.tsx | 9 +++++++- src/components/spaces/ViewSpace.tsx | 21 +++++++++++++----- src/components/utils/OffchainUtils.ts | 4 ++-- src/rtk/features/stakes/stakesSlice.ts | 4 ++-- src/rtk/features/stakes/totalStakeSlice.ts | 4 ++-- 8 files changed, 46 insertions(+), 28 deletions(-) diff --git a/src/components/creators/CreatorDashboardSidebar.tsx b/src/components/creators/CreatorDashboardSidebar.tsx index 5cec10133..410300936 100644 --- a/src/components/creators/CreatorDashboardSidebar.tsx +++ b/src/components/creators/CreatorDashboardSidebar.tsx @@ -60,7 +60,7 @@ function SpacePageSidebar({ space }: Extract } - return data?.isZero === false ? ( + return data?.hasStaked ? ( <> @@ -88,11 +88,7 @@ function PostPageSidebar({ space }: Extract - {loading ? null : data?.isZero === false ? ( - - ) : ( - - )} + {loading ? null : data?.hasStaked ? : } ) } diff --git a/src/components/creators/cards/CreatorInfoCard.tsx b/src/components/creators/cards/CreatorInfoCard.tsx index 7283ebe46..2c089dfef 100644 --- a/src/components/creators/cards/CreatorInfoCard.tsx +++ b/src/components/creators/cards/CreatorInfoCard.tsx @@ -44,7 +44,7 @@ export default function CreatorInfoCard({ space }: CreatorInfoCardProps) {
- {data?.isZero === false && ( + {data?.hasStaked && ( diff --git a/src/components/creators/cards/StakeSubCard.module.sass b/src/components/creators/cards/StakeSubCard.module.sass index 0afd39f23..ecd6994f9 100644 --- a/src/components/creators/cards/StakeSubCard.module.sass +++ b/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 \ No newline at end of file + margin-top: -10px + margin-right: -10px \ No newline at end of file diff --git a/src/components/creators/cards/StakeSubCard.tsx b/src/components/creators/cards/StakeSubCard.tsx index a0d21680c..fa3286045 100644 --- a/src/components/creators/cards/StakeSubCard.tsx +++ b/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 (
@@ -22,7 +24,12 @@ export default function StakeSubCard({ space }: StakeSubCardProps) { src='/images/creators/subsocial-tokens.png' className={clsx(styles.Image, 'mb-3')} /> -
diff --git a/src/components/spaces/ViewSpace.tsx b/src/components/spaces/ViewSpace.tsx index 90ed9768a..04cee0b93 100644 --- a/src/components/spaces/ViewSpace.tsx +++ b/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) => {
{renderPreview()}
- {isCreatorSpace && isMobile && ( -
- -
- )} + {isCreatorSpace && isMobile && }
@@ -292,6 +290,17 @@ export const InnerViewSpace = (props: Props) => { ) } +function MobileCreatorCard({ spaceData }: { spaceData: SpaceData }) { + const myAddress = useMyAddress() + const { data } = useFetchStakeData(myAddress ?? '', spaceData.id) + + return ( +
+ {data?.hasStaked ? : } +
+ ) +} + export const ViewSpace = (props: Props) => { const { spaceData: initialSpaceData } = props diff --git a/src/components/utils/OffchainUtils.ts b/src/components/utils/OffchainUtils.ts index 65a0a16a1..f9b81da74 100644 --- a/src/components/utils/OffchainUtils.ts +++ b/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 = { diff --git a/src/rtk/features/stakes/stakesSlice.ts b/src/rtk/features/stakes/stakesSlice.ts index aafa394e7..f7315ed46 100644 --- a/src/rtk/features/stakes/stakesSlice.ts +++ b/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 } } diff --git a/src/rtk/features/stakes/totalStakeSlice.ts b/src/rtk/features/stakes/totalStakeSlice.ts index 5433e251c..667bde1e2 100644 --- a/src/rtk/features/stakes/totalStakeSlice.ts +++ b/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 } }