feat(app): addresses stats

app/src/lib/graphql/documents/stats.ts

@@ -0,0 +1,57 @@
+import { graphql } from "gql.tada"
+
+export const statsQueryDocument = graphql(/* GraphQL */ `
+  query StatsQuery @cached(ttl: 5) {
+    v0_stats {
+      total_packets
+      total_transfers
+    }
+  }
+`)
+
+export const transferCountQueryDocument = graphql(/* GraphQL */ `
+  query TransferCountQuery @cached(ttl: 5)  {
+    v0_transfers_aggregate {
+    	aggregate {
+      	count
+      }
+    }
+  }
+`)
+
+export const transferAddressesCountQueryDocument = graphql(/* GraphQL */ `
+  query TransferAddressesCountQuery($addresses: [String!]!) {
+    v0_transfers_aggregate(where: {normalized_sender: {_in: $addresses}}) {
+      aggregate {
+        count
+      }
+    }
+  }
+`)
+
+export const packetCountQueryDocument = graphql(/* GraphQL */ `
+  query PacketCountQuery @cached(ttl: 5)  {
+      v0_packets_aggregate {
+          aggregate {
+              count
+          }
+      }
+  }
+`)
+
+export const transfersPerDayQueryDocument = graphql(/* GraphQL */ `
+  query TransfersPerDay($limit: Int!) @cached(ttl: 60) {
+    v0_daily_transfers(limit: $limit, order_by: {day: desc}) {
+      count
+      day
+    }
+  }
+`)
+
+export const packetsPerDayQueryDocument = graphql(/* GraphQL */ `
+  query PacketsPerDay($limit: Int!) {
+    v0_daily_packets(limit: $limit, order_by: {day: desc}) {
+      count
+    }
+  }
+`)

app/src/lib/graphql/queries/stats.ts

@@ -25,3 +25,13 @@ export const packetsPerDayQueryDocument = graphql(/* GraphQL */ `
         }
     }
 `)
+
+export const transferAddressesCountQueryDocument = graphql(/* GraphQL */ `
+    query TransferAddressesCountQuery($addresses: [String!]!) {
+        v1_transfers_aggregate(where: {normalized_sender: {_in: $addresses}}) {
+            aggregate {
+                count
+            }
+        }
+    }
+`)

app/src/lib/queries/stats.ts

@@ -1,6 +1,5 @@
 import { createQuery } from "@tanstack/svelte-query"
-import { statsQueryDocument, transfersPerDayQueryDocument } from "$lib/graphql/queries/stats.ts"
-
+import { statsQueryDocument, transfersPerDayQueryDocument, transferAddressesCountQueryDocument } from "$lib/graphql/queries/stats.ts"
 import { request } from "graphql-request"
 import { URLS } from "$lib/constants"
 
@@ -22,3 +21,15 @@ export const transfersPerDayQuery = (limit: number) =>
     refetchInterval: 6_000,
     refetchOnWindowFocus: false
   })
+
+export const transfersAddressQuery = (addresses: Array<string>) =>
+  createQuery({
+    queryKey: ["transfer-addresses"],
+    queryFn: async () =>
+      (await request(URLS.GRAPHQL, transferAddressesCountQueryDocument, { addresses })).v1_transfers_aggregate,
+    enabled: true,
+    refetchInterval: 6_000,
+    refetchOnWindowFocus: false,
+  })
+
+

app/src/routes/explorer/(components)/stats-bar.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 import StatsBarStat from "$lib/components/stats-bar-stat.svelte"
-import { statsQuery, transfersPerDayQuery } from "$lib/queries/stats.ts"
+import { statsQuery, transfersAddressQuery, transfersPerDayQuery } from "$lib/queries/stats.ts"
 import PixelGraph from "../(components)/pixel-graph.svelte"
 import { userTime } from "$lib/utilities/user-time.ts"
 import SpinningOutlineLogoThree from "$lib/components/spinning-outline-logo-three.svelte"
 import { Separator } from "$lib/components/ui/separator"
-import { supportsWebGL } from "$lib/utilities/device.ts"
-import { deviceWidth } from "$lib/utilities/device.ts"
+import { deviceWidth, supportsWebGL } from "$lib/utilities/device.ts"
 import { onMount } from "svelte"
 
+export let addresses: Array<string> = []
+
 const statsData = statsQuery()
 const transfersPerDayData = transfersPerDayQuery(30)
+const transfersPerAddressData = transfersAddressQuery(addresses)
 
 let show = 0
 let interval: any
@@ -26,27 +28,33 @@ onMount(() => {
 </script>
 
 <div class="bg-muted dark:bg-background border-b flex">
-  <div class="w-full flex flex-1">
-    {#if $deviceWidth > 888 || show === 0}
-      <StatsBarStat blink={true} label={"Total Transfers"} value={$statsData?.data?.[1].value || 0}/>
-      <Separator orientation="vertical"/>
-      <StatsBarStat blink={true} label="Total Packets" value={$statsData?.data?.[0].value || 0}/>
-    {/if}
-    {#if $deviceWidth > 888}
-    <Separator orientation="vertical"/>
-    {/if}
-    {#if $deviceWidth > 888 || show === 1}
-      <StatsBarStat blink={false} label="Metrics" value={$userTime}>
-        {#if $transfersPerDayData.data}
-          <div class="ml-6 flex items-end">
-            <PixelGraph data={$transfersPerDayData.data}/>
-          </div>
+    <div class="w-full flex flex-1">
+        {#if addresses.length > 0}
+            <StatsBarStat blink={true} label={"Total Transfers"} value={$transfersPerAddressData?.data?.count || 0}/>
+        {:else}
+            {#if $deviceWidth > 888 || show === 0}
+                <StatsBarStat blink={true} label={"Total Transfers"} value={$statsData?.data?.total_transfers || 0}/>
+                <Separator orientation="vertical"/>
+                <StatsBarStat blink={true} label="Total Packets" value={$statsData?.data?.total_packets || 0}/>
+            {/if}
+            {#if $deviceWidth > 888}
+                <Separator orientation="vertical"/>
+            {/if}
+            {#if $deviceWidth > 888 || show === 1}
+                <StatsBarStat blink={false} label="Metrics" value={$userTime}>
+                    {#if $transfersPerDayData.data}
+                        <div class="ml-6 flex items-end">
+                            <PixelGraph data={$transfersPerDayData.data}/>
+                        </div>
+                    {/if}
+                </StatsBarStat>
+            {/if}
+        {/if}
+        {#if $deviceWidth > 888 && $supportsWebGL}
+            <Separator orientation="vertical"/>
+            <SpinningOutlineLogoThree/>
         {/if}
-      </StatsBarStat>
-    {/if}
-    {#if $deviceWidth > 888 && $supportsWebGL}
-      <Separator orientation="vertical"/>
-      <SpinningOutlineLogoThree/>
-    {/if}
-  </div>
+    </div>
 </div>
+
+

app/src/routes/explorer/address/[slug=address]/+layout.svelte

@@ -33,7 +33,7 @@ let addresses = derived(page, $page => {
 setContext<typeof addresses>("addresses", addresses)
 </script>
 
-<div class='pt-3'>
+<div>
   <ChainsGate let:chains>
     {#if $addresses.find( address => chains.find( chain => address.address.startsWith(chain.addr_prefix) ) )}
       <slot />

app/src/routes/explorer/address/[slug=address]/+page.svelte

@@ -6,6 +6,7 @@ import { derived, writable, type Readable } from "svelte/store"
 import { decodeTimestampSearchParam } from "$lib/timestamps.ts"
 import TableTransfers from "$lib/components/transfers-table/transfers-table.svelte"
 import AddressMultichain from "$lib/components/address-multichain.svelte"
+import StatsBar from "../../(components)/stats-bar.svelte"
 
 let addresses =
   getContext<Readable<Array<{ address: string; normalizedAddress: string }>>>("addresses")
@@ -17,7 +18,10 @@ let normalizedAddresses = derived(addresses, $addresses =>
 
 
 <ChainsGate let:chains>
-  <section class="flex gap-4 flex-col mb-8 items-center">
+  <div class="-m-6 mb-6">
+    <StatsBar addresses={$normalizedAddresses} />
+  </div>
+  <section class="flex gap-4 flex-col items-center pb-6">
     {#each $addresses as address }
       <AddressMultichain {address} {chains}/>
     {/each}