feat: New trading reward UI

apps/web/src/views/TradingReward/components/Leaderboard/DesktopResult.tsx

@@ -24,13 +24,11 @@ const DesktopResult: React.FC<React.PropsWithChildren<DesktopResultProps>> = ({
 
   return (
     <tr>
-      <Td>
-        <Text bold color="secondary">
-          {`#${rank.rank}`}
-        </Text>
-      </Td>
       <Td textAlign="left">
         <Flex>
+          <Text bold mr="4px" width="56px" color="secondary" style={{ alignSelf: 'center' }}>
+            {rank.rank === 0 ? '--' : `#${rank.rank}`}
+          </Text>
           <ProfileAvatar width={42} height={42} src={profile?.nft?.image?.thumbnail ?? avatar} />
           <Text style={{ alignSelf: 'center' }} color="primary" bold ml="8px">
             {profile?.username || domainName || truncateHash(rank.origin)}

apps/web/src/views/TradingReward/components/Leaderboard/DesktopView.tsx

@@ -19,30 +19,28 @@ const LeaderBoardDesktopView: React.FC<React.PropsWithChildren<LeaderBoardDeskto
   setCurrentPage,
 }) => {
   const { t } = useTranslation()
-
   return (
     <Card margin="0 24px">
       <Table>
         <thead>
           <tr>
-            <Th width="60px">&nbsp;</Th>
-            <Th textAlign="left">{t('User')}</Th>
+            <Th textAlign="left">{t('Rank (Top 50 users)')}</Th>
             <Th textAlign="left">{t('Trading Volume')}</Th>
             <Th textAlign="right">{t('Total Reward')}</Th>
           </tr>
         </thead>
         <tbody>
           {isLoading ? (
             <tr>
-              <Td colSpan={4} textAlign="center">
+              <Td colSpan={3} textAlign="center">
                 {t('Loading...')}
               </Td>
             </tr>
           ) : (
             <>
-              {data?.length === 0 ? (
+              {!data || data?.length === 0 ? (
                 <tr>
-                  <Td colSpan={4} textAlign="center">
+                  <Td colSpan={3} textAlign="center">
                     {t('No results')}
                   </Td>
                 </tr>
@@ -57,7 +55,9 @@ const LeaderBoardDesktopView: React.FC<React.PropsWithChildren<LeaderBoardDeskto
           )}
         </tbody>
       </Table>
-      <PaginationButton showMaxPageText currentPage={currentPage} maxPage={maxPage} setCurrentPage={setCurrentPage} />
+      {data?.length > 0 && (
+        <PaginationButton showMaxPageText currentPage={currentPage} maxPage={maxPage} setCurrentPage={setCurrentPage} />
+      )}
     </Card>
   )
 }

apps/web/src/views/TradingReward/components/Leaderboard/MobileResult.tsx

@@ -20,10 +20,11 @@ export const StyledMobileRow = styled(Box)`
 `
 
 interface MobileResultProps {
+  isMyRank?: boolean
   rank: RankListDetail
 }
 
-const MobileResult: React.FC<React.PropsWithChildren<MobileResultProps>> = ({ rank }) => {
+const MobileResult: React.FC<React.PropsWithChildren<MobileResultProps>> = ({ isMyRank, rank }) => {
   const { t } = useTranslation()
   const cakePriceBusd = usePriceCakeUSD()
   const { profile, isLoading: isProfileLoading } = useProfileForAddress(rank.origin)
@@ -37,10 +38,19 @@ const MobileResult: React.FC<React.PropsWithChildren<MobileResultProps>> = ({ ra
   return (
     <StyledMobileRow p="16px">
       <Flex justifyContent="space-between" mb="16px">
-        <Text fontWeight="bold" color="secondary" mr="auto">
-          {`#${rank.rank}`}
-        </Text>
-        <Flex width="100%" justifyContent="flex-end">
+        <Flex width="30%" alignSelf="center">
+          <Flex flexDirection="column" width="100%">
+            {isMyRank && (
+              <Text fontSize={20} fontWeight="bold" color="secondary">
+                {t('My Rank')}
+              </Text>
+            )}
+            <Text fontWeight="bold" color="secondary">
+              {rank.rank === 0 ? '--' : `#${rank.rank}`}
+            </Text>
+          </Flex>
+        </Flex>
+        <Flex width="70%" justifyContent="flex-end" alignSelf="center">
           <Text color="primary" fontWeight="bold" style={{ alignSelf: 'center' }} mr="8px">
             {profile?.username || domainName || truncateHash(rank.origin)}
           </Text>

apps/web/src/views/TradingReward/components/Leaderboard/MobileView.tsx

@@ -30,22 +30,24 @@ const LeaderBoardMobileView: React.FC<React.PropsWithChildren<LeaderBoardMobileV
         </StyledMobileRow>
       ) : (
         <>
-          {data?.length === 0 ? (
+          {!data || data?.length === 0 ? (
             <StyledMobileRow>
               <Text padding="48px 0px" textAlign="center">
                 {t('No results')}
               </Text>
             </StyledMobileRow>
           ) : (
             <>
-              {data.map((rank) => (
+              {data?.map((rank) => (
                 <MobileResult key={rank.rank} rank={rank} />
               ))}
             </>
           )}
         </>
       )}
-      <PaginationButton showMaxPageText currentPage={currentPage} maxPage={maxPage} setCurrentPage={setCurrentPage} />
+      {data?.length > 0 && (
+        <PaginationButton showMaxPageText currentPage={currentPage} maxPage={maxPage} setCurrentPage={setCurrentPage} />
+      )}
     </Box>
   )
 }

apps/web/src/views/TradingReward/components/Leaderboard/MyRank.tsx

@@ -0,0 +1,68 @@
+import { useMemo } from 'react'
+import { Card, Table, Th, Td, Box, useMatchBreakpoints } from '@pancakeswap/uikit'
+import { useWeb3React } from '@pancakeswap/wagmi'
+import { useTranslation } from '@pancakeswap/localization'
+import { useUserTradeRank } from 'views/TradingReward/hooks/useUserTradeRank'
+import DesktopResult from 'views/TradingReward/components/Leaderboard/DesktopResult'
+import MobileResult from 'views/TradingReward/components/Leaderboard/MobileResult'
+
+interface MyRankProps {
+  campaignId: string
+}
+
+const MyRank: React.FC<React.PropsWithChildren<MyRankProps>> = ({ campaignId }) => {
+  const { t } = useTranslation()
+  const { account } = useWeb3React()
+  const { isDesktop } = useMatchBreakpoints()
+  const { data: userRank, isFetching } = useUserTradeRank({ campaignId })
+
+  const rank = useMemo(
+    () => ({
+      origin: account,
+      rank: userRank.topTradersIndex,
+      tradingFee: userRank.tradingFee,
+      volume: userRank.volume,
+      estimateRewardUSD: userRank.estimateRewardUSD,
+    }),
+    [account, userRank],
+  )
+
+  if (!account) {
+    return null
+  }
+
+  return (
+    <Box mb="16px">
+      <Card isActive margin="0 24px">
+        {isDesktop ? (
+          <Table>
+            <thead>
+              <tr>
+                <Th textAlign="left" width="45%">
+                  {t('My Rank')}
+                </Th>
+                <Th textAlign="left">{t('Trading Volume')}</Th>
+                <Th textAlign="right">{t('Total Reward')}</Th>
+              </tr>
+            </thead>
+            <tbody>
+              {isFetching ? (
+                <tr>
+                  <Td colSpan={3} textAlign="center">
+                    {t('Loading...')}
+                  </Td>
+                </tr>
+              ) : (
+                <DesktopResult key={rank.rank} rank={rank} />
+              )}
+            </tbody>
+          </Table>
+        ) : (
+          <MobileResult rank={rank} isMyRank />
+        )}
+      </Card>
+    </Box>
+  )
+}
+
+export default MyRank

apps/web/src/views/TradingReward/components/Leaderboard/RankingCard.tsx

@@ -9,6 +9,7 @@ import {
   LaurelRightIcon,
   Text,
   SubMenu,
+  Skeleton,
 } from '@pancakeswap/uikit'
 import styled from 'styled-components'
 import { useTranslation } from '@pancakeswap/localization'
@@ -51,11 +52,11 @@ const RankingCard: React.FC<React.PropsWithChildren<RankingCardProps>> = ({ rank
   const { t } = useTranslation()
   const rankColor = getRankingColor(rank)
   const cakePriceBusd = usePriceCakeUSD()
-  const { profile, isLoading: isProfileLoading } = useProfileForAddress(user.origin)
-  const { domainName, avatar } = useDomainNameForAddress(user.origin, !profile && !isProfileLoading)
+  const { profile, isLoading: isProfileLoading } = useProfileForAddress(user?.origin)
+  const { domainName, avatar } = useDomainNameForAddress(user?.origin, !profile && !isProfileLoading)
 
   const cakeAmount = useMemo(
-    () => new BigNumber(user?.estimateRewardUSD).div(cakePriceBusd).toNumber(),
+    () => new BigNumber(user?.estimateRewardUSD).div(cakePriceBusd).toNumber() ?? 0,
     [cakePriceBusd, user?.estimateRewardUSD],
   )
 
@@ -87,9 +88,13 @@ const RankingCard: React.FC<React.PropsWithChildren<RankingCardProps>> = ({ rank
                     </Box>
                     <RotatedLaurelRightIcon color={rankColor} width="32px" />
                   </Flex>
-                  <Text color="primary" fontWeight="bold" textAlign="center">
-                    {profile?.username || domainName || truncateHash(user.origin)}
-                  </Text>
+                  {!user ? (
+                    <Skeleton width="60px" m="0 auto" />
+                  ) : (
+                    <Text color="primary" fontWeight="bold" textAlign="center">
+                      {profile?.username || domainName || truncateHash(user?.origin)}
+                    </Text>
+                  )}
                 </Flex>
               }
               options={{ placement: 'bottom' }}
@@ -100,21 +105,34 @@ const RankingCard: React.FC<React.PropsWithChildren<RankingCardProps>> = ({ rank
               {t('Total Reward')}
             </Text>
             <Box>
-              <Text textAlign="right" bold color="text" fontSize="20px" lineHeight="110%">
-                {`$${formatNumber(user.estimateRewardUSD)}`}
-              </Text>
-              <Text textAlign="right" color="textSubtle" fontSize="12px">
-                {`~${formatNumber(cakeAmount)} CAKE`}
-              </Text>
+              {!user ? (
+                <>
+                  <Skeleton width="60px" mb="2px" />
+                  <Skeleton width="60px" />
+                </>
+              ) : (
+                <>
+                  <Text textAlign="right" bold color="text" fontSize="20px" lineHeight="110%">
+                    {`$${formatNumber(user?.estimateRewardUSD)}`}
+                  </Text>
+                  <Text textAlign="right" color="textSubtle" fontSize="12px">
+                    {`~${formatNumber(cakeAmount)} CAKE`}
+                  </Text>
+                </>
+              )}
             </Box>
           </Flex>
           <Flex justifyContent="space-between">
             <Text bold color="textSubtle">
               {t('Trading Volume')}
             </Text>
-            <Text textAlign="right" bold color="text" fontSize="20px">
-              {`$${formatNumber(user.volume)}`}
-            </Text>
+            {!user ? (
+              <Skeleton width="100px" />
+            ) : (
+              <Text textAlign="right" bold color="text" fontSize="20px">
+                {`$${formatNumber(user?.volume)}`}
+              </Text>
+            )}
           </Flex>
         </CardBody>
       </Card>