diff --git a/src/components/leaderboard/LeaderboardTable.module.sass b/src/components/leaderboard/LeaderboardTable.module.sass new file mode 100644 index 000000000..3b02a52d4 --- /dev/null +++ b/src/components/leaderboard/LeaderboardTable.module.sass @@ -0,0 +1,14 @@ +@import 'src/styles/subsocial-vars.scss' + +.LeaderboardTable + display: grid + grid-template-columns: max-content 1fr max-content + column-gap: $space_small + + .LeaderboardTitles, :global(.infinite-scroll-component__outerdiv), :global(.infinite-scroll-component), :global(.ant-list), :global(.ant-list-items), :global(.ant-list-items) > li + display: grid + grid-template-columns: subgrid + grid-column: 1/4 + gap: $space_small + align-items: center + diff --git a/src/components/leaderboard/LeaderboardTable.tsx b/src/components/leaderboard/LeaderboardTable.tsx new file mode 100644 index 000000000..dd027b30c --- /dev/null +++ b/src/components/leaderboard/LeaderboardTable.tsx @@ -0,0 +1,62 @@ +import clsx from 'clsx' +import { ComponentProps, useState } from 'react' +import { useSelectProfile } from 'src/rtk/app/hooks' +import { wait } from 'src/utils/promise' +import { InfiniteListByPage } from '../lists' +import Avatar from '../profiles/address-views/Avatar' +import { MutedSpan } from '../utils/MutedText' +import styles from './LeaderboardTable.module.sass' + +export type LeaderboardTableProps = ComponentProps<'div'> & {} + +type Data = { rank: number; address: string; reward: number } +const data: Data = { + rank: 1, + address: '3tJYxJN55FtVeZgX4WdwieZXDp4HF62TRVj11tY2aXHdrYus', + reward: 202, +} + +export default function LeaderboardTable({ ...props }: LeaderboardTableProps) { + const [allData] = useState(() => + Array.from({ length: 10 }).map((_, idx) => ({ ...data, rank: idx + 1 })), + ) + + const loadMore = async () => { + await wait(1000) + return Array.from({ length: 10 }).map((_, idx) => ({ ...data, rank: allData.length + idx + 1 })) + } + + return ( +
+
+ # + Staker + Rewards this week +
+ data.rank.toString()} + dataSource={allData} + loadMore={loadMore} + renderItem={data => } + /> +
+ ) +} + +function UserRow({ data }: { data: Data }) { + const profile = useSelectProfile(data.address) + return ( + <> + {data.rank} +
+ + {profile?.content?.name ?? 'Unnamed'} +
+ {data.reward} SUB + + ) +} diff --git a/src/components/leaderboard/UserLeaderboardPage.tsx b/src/components/leaderboard/UserLeaderboardPage.tsx index d5db91929..aceaf511f 100644 --- a/src/components/leaderboard/UserLeaderboardPage.tsx +++ b/src/components/leaderboard/UserLeaderboardPage.tsx @@ -13,6 +13,7 @@ import { PageContent } from '../main/PageWrapper' import AuthorSpaceAvatar from '../profiles/address-views/AuthorSpaceAvatar' import DfCard from '../utils/cards/DfCard' import { MutedSpan } from '../utils/MutedText' +import LeaderboardTable from './LeaderboardTable' const stats: Record< string, @@ -178,7 +179,7 @@ export default function UserLeaderboardPage({ address }: { address: string }) { Stakers ranked based on the amount of SUB earned with Active Staking. -
asdfasdfsdf
+ diff --git a/src/components/profiles/address-views/ProfilePreview.tsx b/src/components/profiles/address-views/ProfilePreview.tsx index eab94b9da..3402820c5 100644 --- a/src/components/profiles/address-views/ProfilePreview.tsx +++ b/src/components/profiles/address-views/ProfilePreview.tsx @@ -30,6 +30,7 @@ type ProfilePreviewProps = AddressProps & { right?: number } emailAddress?: string + withAddress?: boolean } export const ProfilePreview: FC = ({ @@ -44,6 +45,7 @@ export const ProfilePreview: FC = ({ bottom, spans, emailAddress = '', + withAddress, }) => { return ( @@ -58,6 +60,7 @@ export const ProfilePreview: FC = ({ withLabel={withLabel} withDetails={withDetails} emailAddress={emailAddress} + withAddress={withAddress} /> {bottom} diff --git a/src/components/profiles/address-views/utils/NameDetails.tsx b/src/components/profiles/address-views/utils/NameDetails.tsx index 9baf718a4..847ed82fe 100644 --- a/src/components/profiles/address-views/utils/NameDetails.tsx +++ b/src/components/profiles/address-views/utils/NameDetails.tsx @@ -14,6 +14,7 @@ type Props = AddressProps & { withDetails?: boolean network?: string emailAddress?: string + withAddress?: boolean } export const NameDetails = ({ @@ -22,6 +23,7 @@ export const NameDetails = ({ withLabel, withDetails, emailAddress = '', + withAddress = true, }: Props) => { // const { struct } = owner @@ -50,9 +52,11 @@ export const NameDetails = ({ {withLabel && Me} {/* {extensionName &&
{extensionName}
} */} - - {shortAddress} - + {withAddress && ( + + {shortAddress} + + )} )