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

@@ -6,7 +6,7 @@ import {
 } from '../../utils'
 import { isNFTAddress } from '@utils'
 import { redirect } from '@sveltejs/kit'
-import { callApi } from '@api/_deprecated/gateway'
+import { callApi } from '@api/gateway'
 import { andThen, pipe } from 'ramda'
 import { handleGatewayResult } from '../../../../utils'
 import { getStringMetadata } from '@api/utils/metadata'
@@ -55,7 +55,13 @@ export const load: LayoutLoad = async ({ params }) => {
       ? getRedeemableTokens(transformedResource)
       : Promise.resolve(undefined)
 
+  const holders = pipe(
+    () => callApi('getResourceHolders', params.resource),
+    handleGatewayResult()
+  )()
+
   return {
+    holders,
     address: params.resource,
     resource: transformedResource,
     promises: {

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

@@ -0,0 +1,94 @@
+<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 type { ResourceHoldersCollectionItem } from '@common/gateway-sdk'
+  import { callApi } from '@api/gateway'
+  import InfiniteScroll from '@components/infinite-scroll/InfiniteScroll.svelte'
+
+  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))
+
+  const loadMore = async () => {
+    if (!cursor) return
+
+    const result = await callApi(
+      'getResourceHolders',
+      data.resource.address,
+      cursor ?? undefined
+    )
+
+    let items: ResourceHoldersCollectionItem[] = []
+
+    if (result.isOk()) {
+      cursor = result.value.next_cursor ?? undefined
+      items = result.value.items
+    }
+
+    holders = [...holders, ...items]
+  }
+</script>
+
+<div class="card info-card">
+  {#await data.holders}
+    <div class="loading-container">
+      <div class="loading">
+        <LoadingSpinner />
+      </div>
+    </div>
+  {:then _}
+    {#each holders 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}
+
+    <InfiniteScroll
+      on:thresholdReached={() => {
+        loadMore()
+      }}
+    />
+  {/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

@@ -49,6 +49,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

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",

packages/ui/src/api/gateway.ts

@@ -50,7 +50,8 @@ export const api = {
   ...extractMethods(gatewayApi.stream),
   ...extractMethods(gatewayApi.status),
   ...extractMethods(gatewayApi.transaction),
-  ...extractMethods(gatewayApi.statistics)
+  ...extractMethods(gatewayApi.statistics),
+  ...extractMethods(gatewayApi.extensions)
 }
 
 export const callApiWithCache = <T extends keyof typeof api>(

packages/ui/src/stores.ts

@@ -43,4 +43,3 @@ export const externalNavigationConfirmation = writable<
 >(undefined)
 
 export const dAppToolkit = writable<RadixDappToolkit | undefined>(undefined)
-export const gatewayApi = writable<GatewayApiClient | undefined>(undefined)