feat(analytics): add circulation page

apps/analytics/package.json

@@ -10,29 +10,30 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^3.1.0",
-    "@sveltejs/kit": "^1.30.3",
+    "@sveltejs/adapter-vercel": "^4.0.4",
+    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^4.5.1"
+    "vite": "^5.0.11"
   },
   "type": "module",
   "dependencies": {
     "@phala/utils": "workspace:*",
     "@rgossiaux/svelte-headlessui": "^2.0.0",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
-    "@tanstack/svelte-query": "^4.36.1",
+    "@tanstack/svelte-query": "^5.17.9",
     "autoprefixer": "^10.4.16",
     "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
-    "date-fns": "^3.0.6",
+    "date-fns": "^3.1.0",
     "decimal.js": "^10.4.3",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.33",
     "svelte-chartjs": "^3.1.2",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.1"
   }
 }

apps/analytics/src/lib/Computation.svelte

@@ -6,11 +6,13 @@
     RadioGroupOption,
   } from '@rgossiaux/svelte-headlessui'
   import type {ChartData} from 'chart.js'
+  import Decimal from 'decimal.js'
   import {Line} from 'svelte-chartjs'
   import {derived, writable} from 'svelte/store'
   import {getComputationData, getComputationSnapshot} from '~/stores'
   import {getCirculation} from '~/stores/circulation'
   import Tooltip from './Tooltip.svelte'
+  import {format, formatPercentage} from './utils'
 
   const display = derived(
     [getComputationData(), getComputationSnapshot(), getCirculation()],
@@ -24,14 +26,10 @@
       let delegator = 'ㅤ'
       let budgetPerShare = 'ㅤ'
 
-      const format = new Intl.NumberFormat('en-US').format
-      const formatPercentage = new Intl.NumberFormat('en-US', {
-        style: 'percent',
-        maximumFractionDigits: 2,
-      }).format
-
       if (circulation != null) {
-        circulatingSupply = `${compactFormat(circulation)} PHA`
+        circulatingSupply = `${compactFormat(
+          new Decimal(circulation.totalCirculation),
+        )} PHA`
       }
 
       if (snapshot != null) {
@@ -172,7 +170,7 @@
     {/each}
   </section>
   <section
-    class="card h-[22rem] flex-1 max-md:w-full overflow-hidden flex flex-col gap-3"
+    class="card h-[22rem] md:flex-1 max-md:w-full overflow-hidden flex flex-col gap-3"
   >
     <RadioGroup
       bind:value={$currentChart}

apps/analytics/src/lib/Nav.svelte

@@ -52,7 +52,12 @@
     {/if}
   </Menu>
 
-  <ul class="font-montserrat hidden md:block text-sm">
-    <li>Overview</li>
+  <ul class="font-montserrat hidden md:flex text-sm gap-8">
+    <li>
+      <a href="/">Overview</a>
+    </li>
+    <li>
+      <a href="/token">Token</a>
+    </li>
   </ul>
 </nav>

apps/analytics/src/lib/PhatContract.svelte

@@ -5,6 +5,7 @@
   import {derived} from 'svelte/store'
   import {getPhatContractData} from '~/stores/phat'
   import {getPhatOffchainData} from '~/stores/phatOffchain'
+  import {format} from './utils'
 
   const display = derived(
     [getPhatContractData(), getPhatOffchainData()],
@@ -17,8 +18,6 @@
 
       let chartData: ChartData<'bar', number[]> | null = null
 
-      const format = new Intl.NumberFormat('en-US').format
-
       if (data != null) {
         staking = `${format(data.stake.toDP(0).toNumber())} PHA`
         clusterWorkers = format(data.idleWorker)
@@ -53,7 +52,7 @@
           ['Users', users],
         ],
       }
-    }
+    },
   )
 </script>
 
@@ -73,7 +72,7 @@
       {/if}
     {/each}
   </section>
-  <section class="card h-80 flex-1 max-md:w-full overflow-hidden">
+  <section class="card h-80 md:flex-1 max-md:w-full overflow-hidden">
     {#if $display.chartData != null}
       <Bar data={$display.chartData} options={{scales: {x: {type: 'time'}}}} />
     {/if}

apps/analytics/src/lib/chart.ts

@@ -1,8 +1,10 @@
 import {
+  ArcElement,
   BarController,
   BarElement,
   CategoryScale,
   Chart,
+  DoughnutController,
   LineController,
   LineElement,
   LinearScale,
@@ -15,6 +17,7 @@ import 'chartjs-adapter-date-fns'
 export const initChartJS = () => {
   Chart.register(
     Tooltip,
+    DoughnutController,
     LineController,
     LineElement,
     PointElement,
@@ -23,6 +26,7 @@ export const initChartJS = () => {
     CategoryScale,
     BarController,
     BarElement,
+    ArcElement,
   )
 
   const defaults = Chart.defaults

apps/analytics/src/lib/utils.ts

@@ -0,0 +1,5 @@
+export const format = new Intl.NumberFormat('en-US').format
+export const formatPercentage = new Intl.NumberFormat('en-US', {
+  style: 'percent',
+  maximumFractionDigits: 2,
+}).format

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

@@ -2,21 +2,23 @@
   import {browser} from '$app/environment'
   import {QueryClient, QueryClientProvider} from '@tanstack/svelte-query'
   import Decimal from 'decimal.js'
+  import Nav from '~/lib/Nav.svelte'
   import {initChartJS} from '~/lib/chart'
   import '../app.css'
 
   initChartJS()
   Decimal.set({toExpNeg: -9e15, toExpPos: 9e15, precision: 50})
 
   const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        enabled: browser,
-      },
-    },
+    defaultOptions: {queries: {enabled: browser}},
   })
 </script>
 
 <QueryClientProvider client={queryClient}>
-  <slot />
+  <header class="mx-auto px-4 md:px-6 mt-4 md:mt-6 max-w-7xl">
+    <Nav />
+  </header>
+  <main class="max-w-5xl mx-auto mt-6 md:mt-14 px-4 md:px-6 mb-6">
+    <slot />
+  </main>
 </QueryClientProvider>

apps/analytics/src/routes/+page.svelte

@@ -1,19 +1,12 @@
 <script lang="ts">
   import Computation from '~/lib/Computation.svelte'
-  import Nav from '~/lib/Nav.svelte'
   import PhatContract from '~/lib/PhatContract.svelte'
 </script>
 
 <svelte:head>
   <title>Phala Analytics</title>
 </svelte:head>
 
-<header class="mx-auto px-4 md:px-6 mt-4 md:mt-6 max-w-7xl">
-  <Nav />
-</header>
-
-<main class="max-w-5xl mx-auto mt-6 md:mt-14 px-4 md:px-6 mb-6">
-  <Computation />
-  <div class="mt-4 overflow-hidden" />
-  <PhatContract />
-</main>
+<Computation />
+<div class="mt-4 overflow-hidden" />
+<PhatContract />

apps/analytics/src/routes/token/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {compactFormat} from '@phala/utils'
+  import Decimal from 'decimal.js'
+  import {Doughnut} from 'svelte-chartjs'
+  import {derived} from 'svelte/store'
+  import {getCirculation} from '~/stores/circulation'
+
+  const totalSupply = new Decimal(1e9)
+
+  const display = derived(getCirculation(), ({data: circulation}) => {
+    let circulatingSupply = 'ㅤ'
+
+    if (circulation != null) {
+      circulatingSupply = `${compactFormat(
+        new Decimal(circulation.totalCirculation),
+      )} PHA`
+    }
+
+    return [['Circulating Supply', circulatingSupply]]
+  })
+
+  const chartData = derived(getCirculation(), ({data: circulation}) => {
+    if (circulation == null) return null
+
+    return {
+      labels: ['Ethereum', 'Phala', 'Khala'],
+      datasets: [
+        {
+          label: 'Circulating Supply',
+          data: [
+            parseInt(circulation.ethereumCirculation),
+            parseInt(circulation.phalaCirculation),
+            parseInt(circulation.khalaCirculation),
+          ],
+          backgroundColor: ['#12100B', '#c5ff46', '#03ffff'],
+        },
+      ],
+    }
+  })
+</script>
+
+<svelte:head>
+  <title>Token | Phala Analytics</title>
+</svelte:head>
+
+<h1 class="font-montserrat text-4xl font-bold my-8">Circulation</h1>
+<div class="flex flex-wrap gap-4">
+  <div class="flex flex-col flex-1 gap-4">
+    <section class="card flex-1">
+      <span class="data-label">Circulating Supply</span>
+      <div class="data-value mt-1">{$display[0][1]}</div>
+    </section>
+    <section class="card flex-1">s</section>
+  </div>
+  <section class="card flex-1">
+    {#if $chartData != null}
+      <Doughnut data={$chartData} options={{borderWidth: 0, cutout: '95%'}} />
+    {/if}
+  </section>
+</div>

apps/analytics/src/stores/circulation.ts

@@ -1,15 +1,33 @@
 import {createQuery} from '@tanstack/svelte-query'
-import Decimal from 'decimal.js'
+
+interface CirculationData {
+  ethereumTotalSupply: string
+  ethereumMiningRewards: string
+  ethereumPhalaChainbridge: string
+  ethereumKhalaChainbridge: string
+  ethereumSygmaBridge: string
+  ethereumCirculation: string
+  phalaTotalIssuance: string
+  phalaMiningRewards: string
+  phalaCrowdloan: string
+  phalaChainbridge: string
+  phalaSygmaBridge: string
+  phalaCirculation: string
+  khalaTotalIssuance: string
+  khalaMiningRewards: string
+  khalaCrowdloan: string
+  khalaChainbridge: string
+  khalaSygmaBridge: string
+  khalaCirculation: string
+  totalCirculation: string
+  lastUpdate: number
+}
 
 const fetchCirculationData = async () => {
-  const res = await fetch(
-    'https://pha-circulation-server.vercel.app/api/circulation',
-  )
-  const amount = await res.text()
-  if (amount != null) {
-    return new Decimal(amount)
-  }
+  const res = await fetch('https://pha-circulation-server.vercel.app/api/all')
+  const data = (await res.json()) as CirculationData
+  return data
 }
 
 export const getCirculation = () =>
-  createQuery(['circulation'], fetchCirculationData)
+  createQuery({queryKey: ['circulation'], queryFn: fetchCirculationData})

apps/analytics/src/stores/computation.ts

@@ -108,4 +108,4 @@ const fetchComputationData = async (): Promise<ComputationData> => {
 }
 
 export const getComputationData = () =>
-  createQuery(['computation'], fetchComputationData)
+  createQuery({queryKey: ['computation'], queryFn: fetchComputationData})

apps/analytics/src/stores/computationSnapshot.ts

@@ -148,4 +148,7 @@ const fetchComputationSnapshot = async (): Promise<ComputationSnapshot> => {
 }
 
 export const getComputationSnapshot = () =>
-  createQuery(['computationSnapshot'], fetchComputationSnapshot)
+  createQuery({
+    queryKey: ['computationSnapshot'],
+    queryFn: fetchComputationSnapshot,
+  })

apps/analytics/src/stores/phat.ts

@@ -62,4 +62,4 @@ const fetchPhatData = async (): Promise<PhatData> => {
 }
 
 export const getPhatContractData = () =>
-  createQuery(['phatContract'], fetchPhatData)
+  createQuery({queryKey: ['phatContract'], queryFn: fetchPhatData})

apps/analytics/src/stores/phatOffchain.ts

@@ -36,4 +36,7 @@ const fetchPhatOffchainData = async () => {
 }
 
 export const getPhatOffchainData = () =>
-  createQuery(['phatContractOffchain'], fetchPhatOffchainData)
+  createQuery({
+    queryKey: ['phatContractOffchain'],
+    queryFn: fetchPhatOffchainData,
+  })

apps/analytics/svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-vercel'
-import {vitePreprocess} from '@sveltejs/kit/vite'
+import {vitePreprocess} from '@sveltejs/vite-plugin-svelte'
 import path from 'path'
 
 /** @type {import('@sveltejs/kit').Config} */

apps/analytics/vite.config.ts

@@ -1,6 +1,6 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import {sveltekit} from '@sveltejs/kit/vite'
+import {defineConfig} from 'vite'
 
 export default defineConfig({
-	plugins: [sveltekit()]
-});
+  plugins: [sveltekit()],
+})

apps/app/package.json

@@ -21,7 +21,7 @@
     "@mui/icons-material": "^5.15.3",
     "@mui/lab": "5.0.0-alpha.159",
     "@mui/material": "^5.15.3",
-    "@mui/x-data-grid": "^6.18.6",
+    "@mui/x-data-grid": "^6.18.7",
     "@phala/store": "workspace:*",
     "@phala/utils": "workspace:*",
     "@polkadot/api": "^10.11.2",
@@ -33,10 +33,10 @@
     "@talismn/connect-wallets": "^1.2.3",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "ajv": "^8.12.0",
-    "date-fns": "^3.0.6",
+    "date-fns": "^3.1.0",
     "decimal.js": "^10.4.3",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",

apps/index/package.json

@@ -50,8 +50,8 @@
     "@swc-jotai/react-refresh": "^0.1.0",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^18.19.4",
-    "@types/react": "^18.2.46",
+    "@types/node": "^18.19.5",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",