GBBE-314 Add Top Accounts leaderboard rank on Address view

ui/address/details/AddressStats.pw.tsx

@@ -41,6 +41,9 @@ test('asserts correct links', async({ render, mockApiResponse }) => {
     <AddressStats addressHash={ ADDRESS_HASH }/>,
   );
 
+  const topAccountsLink = component.locator('a[href="/accounts"]');
+  await expect(topAccountsLink).toHaveAttribute('href', '/accounts');
+
   const biggestSpendersLink = component.locator('a[href*="/leaderboards/spenders"]');
   await expect(biggestSpendersLink).toHaveAttribute('href', '/leaderboards/spenders');
 

ui/address/details/AddressStats.tsx

@@ -16,7 +16,6 @@ import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp'
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 
 const PAGE_SIZE = 50;
-type LeaderboardRoute = Extract<Route, { pathname: `/leaderboards/${ string }` }>['pathname'];
 
 interface Props {
   addressHash: string;
@@ -67,18 +66,19 @@ const AddressStats = ({ addressHash, isLoading }: Props) => {
     </>
   );
 
-  const renderRankItem = (label: string, hint: string, rank: string | undefined, pathname: LeaderboardRoute) => {
+  const renderRankItem = <T extends Route['pathname']>(label: string, hint: string, rank: string | undefined, pathname: T) => {
     const rankInt = rank ? parseInt(rank, 10) : 0;
     if (rankInt === 0) {
       return null;
     }
 
     const pageNum = Math.ceil(rankInt / PAGE_SIZE);
+    const query = pageNum > 1 ? { page: String(pageNum) } : {};
 
     return renderItem(
       label,
       hint,
-      <Link href={ route({ pathname, query: (pageNum > 1 ? { page: String(pageNum) } : {}) }) }>
+      <Link href={ route({ pathname, query } as Route) }>
         #{ formatBigNum(rank) }
       </Link>,
     );
@@ -202,6 +202,13 @@ const AddressStats = ({ addressHash, isLoading }: Props) => {
 
       { hasRanksData && <ItemDivider/> }
 
+      { renderRankItem(
+        'Top Account Rank',
+        'Rank in the top accounts leaderboard based on largest balances',
+        ranksData?.top_accounts,
+        '/accounts',
+      ) }
+
       { renderRankItem(
         'Biggest Spenders Rank',
         'Rank in the biggest spenders leaderboard based on total transaction fees paid',