feat: create table for leaderboard

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
+

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 (
+    <div
+      {...props}
+      className={clsx(styles.LeaderboardTable, 'FontWeightMedium FontSmall', props.className)}
+    >
+      <div className={clsx(styles.LeaderboardTitles, 'ColorMuted')}>
+        <span>#</span>
+        <span>Staker</span>
+        <span>Rewards this week</span>
+      </div>
+      <InfiniteListByPage
+        totalCount={100}
+        getKey={(data: Data) => data.rank.toString()}
+        dataSource={allData}
+        loadMore={loadMore}
+        renderItem={data => <UserRow data={data} key={data.rank} />}
+      />
+    </div>
+  )
+}
+
+function UserRow({ data }: { data: Data }) {
+  const profile = useSelectProfile(data.address)
+  return (
+    <>
+      <MutedSpan>{data.rank}</MutedSpan>
+      <div className='d-flex align-items-center'>
+        <Avatar address={data.address} avatar={profile?.content?.image} size={32} />
+        <span>{profile?.content?.name ?? 'Unnamed'}</span>
+      </div>
+      <span style={{ textAlign: 'right' }}>{data.reward} SUB</span>
+    </>
+  )
+}

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.
             </MutedSpan>
           </div>
-          <div className='mt-3'>asdfasdfsdf</div>
+          <LeaderboardTable className='mt-3' />
         </DfCard>
       </div>
     </PageContent>

src/components/profiles/address-views/ProfilePreview.tsx

@@ -30,6 +30,7 @@ type ProfilePreviewProps = AddressProps & {
     right?: number
   }
   emailAddress?: string
+  withAddress?: boolean
 }
 
 export const ProfilePreview: FC<ProfilePreviewProps> = ({
@@ -44,6 +45,7 @@ export const ProfilePreview: FC<ProfilePreviewProps> = ({
   bottom,
   spans,
   emailAddress = '',
+  withAddress,
 }) => {
   return (
     <Row className={clsx('flex-nowrap', 'align-items-center', className)}>
@@ -58,6 +60,7 @@ export const ProfilePreview: FC<ProfilePreviewProps> = ({
           withLabel={withLabel}
           withDetails={withDetails}
           emailAddress={emailAddress}
+          withAddress={withAddress}
         />
         {bottom}
       </Col>

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 && <MyEntityLabel isMy={isMyAccount}>Me</MyEntityLabel>}
       </div>
       {/* {extensionName && <div className='DfPopup-handle'>{extensionName}</div>} */}
-      <CopyAddress address={address}>
-        <span className='DfGreyLink'>{shortAddress}</span>
-      </CopyAddress>
+      {withAddress && (
+        <CopyAddress address={address}>
+          <span className='DfGreyLink'>{shortAddress}</span>
+        </CopyAddress>
+      )}
       <InfoPanel layout='horizontal' column={1} items={[...getDetails()]} />
     </>
   )