add top holders tab for resources

apps/dashboard/src/routes/(search-pages)/resource/[resource]/+layout.svelte

@@ -27,6 +27,10 @@
       {
         id: 'configuration',
         label: 'Configuration'
+      },
+      {
+        id: 'holders',
+        label: 'Top Holders'
       }
     ]
   ]}

apps/dashboard/src/routes/(search-pages)/resource/[resource]/+layout.ts

@@ -14,6 +14,8 @@ import { isStakeUnit } from '@api/utils/entities/resource/fungible/stake-unit'
 import { isClaimNft } from '@api/utils/entities/resource/non-fungible/claim-nft-collection'
 import { transformUnknownResource } from '@api/utils/entities/resource'
 import type { PoolUnit } from '@api/utils/entities/resource/fungible/pool-unit'
+import { GatewayApiClient } from '@radixdlt/babylon-gateway-api-sdk'
+import { CURRENT_NETWORK } from '@networks'
 
 const getRedeemableTokens = async (poolUnit: PoolUnit) => {
   const pool = poolUnit.metadata.expected.pool!.typed.value
@@ -55,7 +57,16 @@ export const load: LayoutLoad = async ({ params }) => {
       ? getRedeemableTokens(transformedResource)
       : Promise.resolve(undefined)
 
+  const gateway = GatewayApiClient.initialize({
+    networkId: CURRENT_NETWORK.id,
+    applicationName: 'Radix Dashboard',
+    applicationDappDefinitionAddress: CURRENT_NETWORK.consoleDappAddress
+  })
+
+  const holders = gateway.extensions.getResourceHolders(params.resource)
+
   return {
+    holders,
     address: params.resource,
     resource: transformedResource,
     promises: {

apps/dashboard/src/routes/(search-pages)/resource/[resource]/holders/+page.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import Row from '@components/info-box/Row.svelte'
+  import Link from '@components/_base/link/Link.svelte'
+  import type { PageData } from './$types'
+  import LoadingSpinner from '@components/_base/button/loading-spinner/LoadingSpinner.svelte'
+  import { formatTokenValue } from '@utils'
+  import Pagination from '@components/_base/table/basic-table/Pagination.svelte'
+  import { gatewayApi } from '@stores'
+  import type { ResourceHoldersCollectionItem } from '@common/gateway-sdk'
+
+  export let data: PageData
+
+  let holders: ResourceHoldersCollectionItem[][] = []
+
+  data.holders.then(({ items }) => {
+    holders = [...holders, items]
+  })
+
+  let cursor: string | undefined
+
+  data.holders.then((holders) => (cursor = holders.next_cursor ?? undefined))
+
+  let currentPage = 0
+  let disabledNext = true
+
+  $: if (currentPage < holders.length - 1 || cursor) {
+    disabledNext = false
+  } else {
+    disabledNext = true
+  }
+
+  const loadNextPage = async () => {
+    if (currentPage < holders.length - 1) {
+      currentPage++
+      return
+    }
+
+    if (!cursor) return
+
+    if (currentPage === holders.length - 1) {
+      const items = await $gatewayApi!.extensions
+        .getResourceHolders(data.resource.address, cursor ?? undefined)
+        .then((holders) => {
+          cursor = holders.next_cursor ?? undefined
+          return holders.items
+        })
+      holders = [...holders, items]
+      currentPage++
+    } else {
+      currentPage++
+    }
+  }
+</script>
+
+<div class="card info-card">
+  {#await data.holders}
+    <div class="loading-container">
+      <div class="loading">
+        <LoadingSpinner />
+      </div>
+    </div>
+  {:then _}
+    {#each holders[currentPage] as holder}
+      <Row>
+        <div slot="left">
+          <Link
+            url="/account/{holder.holder_address}"
+            text={holder.holder_address}
+          />
+        </div>
+
+        <div slot="right">
+          {holder.type === 'FungibleResource'
+            ? formatTokenValue(holder.amount).displayValue
+            : holder.non_fungible_ids_count}
+        </div>
+      </Row>
+    {/each}
+
+    <div class="pagination">
+      <Pagination
+        disabledPrevious={currentPage === 0}
+        {disabledNext}
+        on:next={loadNextPage}
+        on:previous={() => currentPage--}
+      />
+    </div>
+  {/await}
+</div>
+
+<style>
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100%;
+    width: 100%;
+  }
+
+  .loading {
+    height: 5rem;
+    width: 5rem;
+  }
+
+  .pagination {
+    margin-top: var(--spacing-lg);
+  }
+</style>

apps/dashboard/src/routes/+layout.svelte

@@ -17,6 +17,7 @@
   import {
     accounts,
     externalNavigationConfirmation,
+    gatewayApi,
     selectedAccount,
     storage
   } from '@stores'
@@ -49,6 +50,7 @@
   import ExternalBlack from '@icons/external-black.svg'
   // @ts-ignore
   import * as amplitude from '@amplitude/analytics-browser'
+  import { GatewayApiClient } from '@common/gateway-sdk'
   let mounted = false
 
   const { createChallenge } = authApi
@@ -115,6 +117,12 @@
     })
 
     resolveRDT(rdt)
+
+    $gatewayApi = GatewayApiClient.initialize({
+      networkId: CURRENT_NETWORK.id,
+      applicationName: 'Radix Dashboard',
+      applicationDappDefinitionAddress: CURRENT_NETWORK.consoleDappAddress
+    })
   })
 
   const routes = [

packages/common/package.json

@@ -5,8 +5,8 @@
   "scripts": {},
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
-    "@radixdlt/babylon-gateway-api-sdk": "^1.7.2",
     "@radixdlt/babylon-core-api-sdk": "^1.2.3",
+    "@radixdlt/babylon-gateway-api-sdk": "^1.7.3",
     "@radixdlt/radix-dapp-toolkit": "^2.1.1",
     "@radixdlt/radix-engine-toolkit": "^1.0.5",
     "@radixdlt/rola": "^2.0.0",