From b4f99e5c6bf8fe18f11876ae1e1a98af97b15f6c Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 8 May 2024 12:28:50 +0300 Subject: [PATCH 1/2] Fix leaderboard styles --- src/components/Tabs.tsx | 4 +++- .../leaderboard/MyStats/IncreaseStakeBanner.tsx | 4 ++-- .../leaderboard/MyStats/LeaderboardProfilePreview.tsx | 3 ++- .../leaderboard/MyStats/LeaderboardStatsData.tsx | 2 +- .../leaderboard/MyStats/LeaderboardTable.tsx | 8 ++++---- src/components/leaderboard/index.tsx | 2 +- src/constants/layout.ts | 10 +++++++++- 7 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index 275017817..496c4b282 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -3,6 +3,7 @@ import { replaceUrl } from '@/utils/window' import { Tab } from '@headlessui/react' import { ComponentProps, Fragment, ReactNode, useEffect, useState } from 'react' import Container from './Container' +import { mutedTextColorStyles } from './content-staking/utils/commonStyles' type Tab = { id: string @@ -116,7 +117,8 @@ export default function Tabs({ > { )} />
- + Increase your daily rewards by locking more SUB - + You can lock {balance}more SUB to increase your future rewards
diff --git a/src/components/leaderboard/MyStats/LeaderboardProfilePreview.tsx b/src/components/leaderboard/MyStats/LeaderboardProfilePreview.tsx index 7b492fa7a..e2cee7664 100644 --- a/src/components/leaderboard/MyStats/LeaderboardProfilePreview.tsx +++ b/src/components/leaderboard/MyStats/LeaderboardProfilePreview.tsx @@ -28,7 +28,7 @@ const LeaderboardProfilePreview = ({ return (
{ } panelSize='sm' + triggerClassName='min-w-fit' yOffset={4} placement='top' triggerOnHover diff --git a/src/components/leaderboard/MyStats/LeaderboardStatsData.tsx b/src/components/leaderboard/MyStats/LeaderboardStatsData.tsx index b13619f70..e58f7a20c 100644 --- a/src/components/leaderboard/MyStats/LeaderboardStatsData.tsx +++ b/src/components/leaderboard/MyStats/LeaderboardStatsData.tsx @@ -67,7 +67,7 @@ export const UserStatsCard = ({ value && decimal ? convertToBalanceWithDecimal(value, decimal) : ZERO const titleElement = ( - + {title} ) diff --git a/src/components/leaderboard/MyStats/LeaderboardTable.tsx b/src/components/leaderboard/MyStats/LeaderboardTable.tsx index a601d5950..7db1a7360 100644 --- a/src/components/leaderboard/MyStats/LeaderboardTable.tsx +++ b/src/components/leaderboard/MyStats/LeaderboardTable.tsx @@ -45,7 +45,7 @@ export const leaderboardColumns = ( name: 'Rewards', align: 'right', className: cx( - 'p-0 py-2 pr-4 md:w-[20%] w-[38%]', + 'p-0 py-2 pr-4 md:w-[20%] w-[38%] font-semibold', customColumnsClassNames?.[2] ), }, @@ -225,16 +225,16 @@ export const UserPreview = ({ address }: UserPreviewProps) => { return (
- +
{about && (
diff --git a/src/components/leaderboard/index.tsx b/src/components/leaderboard/index.tsx index e7171e0f0..4c7e79e8c 100644 --- a/src/components/leaderboard/index.tsx +++ b/src/components/leaderboard/index.tsx @@ -82,7 +82,7 @@ const LeaderboardContent = ({ address }: LeaderboardContentProps) => { return ( Date: Wed, 8 May 2024 12:35:35 +0300 Subject: [PATCH 2/2] Add view more button for rewards section --- .../leaderboard/MyStats/StakerRewards.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/leaderboard/MyStats/StakerRewards.tsx b/src/components/leaderboard/MyStats/StakerRewards.tsx index 6947b9659..5f5e32a48 100644 --- a/src/components/leaderboard/MyStats/StakerRewards.tsx +++ b/src/components/leaderboard/MyStats/StakerRewards.tsx @@ -1,4 +1,5 @@ import FormatBalance from '@/components/FormatBalance' +import LinkText from '@/components/LinkText' import { mutedTextColorStyles } from '@/components/content-staking/utils/commonStyles' import { ZERO } from '@/constants/config' import { useGetChainDataByNetwork } from '@/services/chainsInfo/query' @@ -8,7 +9,7 @@ import { cx } from '@/utils/class-names' import { BN } from '@polkadot/util' import { convertToBalanceWithDecimal, isEmptyArray } from '@subsocial/utils' import dayjs from 'dayjs' -import { useMemo } from 'react' +import { useMemo, useState } from 'react' type StakerRewardsProps = { address: string @@ -17,6 +18,7 @@ type StakerRewardsProps = { const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => { const { data, isLoading } = getRewardHistoryQuery.useQuery(address) + const [isViewMore, setIsViewMore] = useState(false) const { tokenSymbol, decimal } = useGetChainDataByNetwork('subsocial') || {} @@ -32,6 +34,11 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => { const sectionTitle = leaderboardRole === 'staker' ? 'Staker' : 'Creator' + const rewardsData = useMemo( + () => (isViewMore ? rewards : rewards.slice(0, 13)), + [rewards.length, isViewMore] + ) + return (
@@ -49,7 +56,7 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
{rewards && !isEmptyArray(rewards) ? (
- {rewards.map((reward) => { + {rewardsData.map((reward) => { const userRewardValue = leaderboardRole === 'staker' ? reward.reward @@ -80,6 +87,15 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => { /> ) })} + {!isViewMore && ( + setIsViewMore(true)} + variant={'primary'} + > + View more + + )}
) : ( No rewards yet