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}
+
+ )}
>
)