From 03cdbaf3d84753e3912df1d2df8a5f7c0db8d7ba Mon Sep 17 00:00:00 2001
From: kingsleydon <10992364+kingsleydon@users.noreply.github.com>
Date: Thu, 29 Feb 2024 21:24:20 +0800
Subject: [PATCH] feat(analytics): new circulation api

---
 .vscode/settings.json                         |   2 +
 .../analytics/src/lib/ChainCirculation.svelte | 262 ++++++++----------
 apps/analytics/src/lib/Computation.svelte     | 262 +++++++++---------
 apps/analytics/src/routes/token/+page.svelte  | 117 ++++----
 apps/analytics/src/stores/circulation.ts      |  41 +--
 5 files changed, 329 insertions(+), 355 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4471b8f0..d6ebc573 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -20,6 +20,7 @@
   "cSpell.words": [
     "biomejs",
     "bunx",
+    "crowdloan",
     "fontawesome",
     "fortawesome",
     "karura",
@@ -36,6 +37,7 @@
     "staker",
     "stakers",
     "subbridge",
+    "Subscan",
     "subsquid",
     "svgs",
     "sygma",
diff --git a/apps/analytics/src/lib/ChainCirculation.svelte b/apps/analytics/src/lib/ChainCirculation.svelte
index f81d6e8f..a7c93488 100644
--- a/apps/analytics/src/lib/ChainCirculation.svelte
+++ b/apps/analytics/src/lib/ChainCirculation.svelte
@@ -1,150 +1,130 @@
 <script lang="ts">
-import {toCurrency, toPercentage} from '@phala/lib'
-import Decimal from 'decimal.js'
-import {derived} from 'svelte/store'
-import {getCirculation} from '~/stores/circulation'
-import Tooltip from './Tooltip.svelte'
+  import {toCurrency, toPercentage} from '@phala/lib'
+  import Decimal from 'decimal.js'
+  import {derived} from 'svelte/store'
+  import {getCirculation} from '~/stores/circulation'
+  import Tooltip from './Tooltip.svelte'
 
-export let className = ''
-export let chain: 'Phala' | 'Khala' | 'Ethereum'
+  export let className = ''
+  export let chain: 'Phala' | 'Khala' | 'Ethereum'
 
-const ETHEREUM_SYGMA_BRIDGE_ADDRESS =
-  '0xC832588193cd5ED2185daDA4A531e0B26eC5B830'
-const PHALA_CROWDLOAN_ADDRESS =
-  '42fy3tTMPbgxbRqkQCyvLoSoPHwUPM3Dy5iqHYhF9RvD5XAP'
-const PHALA_REWARD_ADDRESS = '436H4jat7TobTbNYLdSJ3cmNy9K4frmE4Yuc4R2nNnaf56DL'
-const PHALA_SYGMA_BRIDGE_ADDRESS =
-  '436H4jatj6ntHTVm3wh9zs1Mqa8p1ykfcdkNH7txmjmohTu3'
+  const ETHEREUM_SYGMA_BRIDGE_ADDRESS =
+    '0xC832588193cd5ED2185daDA4A531e0B26eC5B830'
+  const PHALA_CROWDLOAN_ADDRESS =
+    '42fy3tTMPbgxbRqkQCyvLoSoPHwUPM3Dy5iqHYhF9RvD5XAP'
+  const PHALA_REWARD_ADDRESS =
+    '436H4jat7TobTbNYLdSJ3cmNy9K4frmE4Yuc4R2nNnaf56DL'
+  const PHALA_SYGMA_BRIDGE_ADDRESS =
+    '436H4jatj6ntHTVm3wh9zs1Mqa8p1ykfcdkNH7txmjmohTu3'
 
-const getEtherscanLink = (address: string) =>
-  `<a href="https://etherscan.io/address/${address}" target="_blank">${address}</a>`
-const getSubscanLink = (chain: 'Phala' | 'Khala', address: string) =>
-  `<a href="https://${chain.toLowerCase()}.subscan.io/account/${address}" target="_blank">${address}</a>`
+  const getEtherscanLink = (address: string) =>
+    `<a href="https://etherscan.io/address/${address}" target="_blank">${address}</a>`
+  const getSubscanLink = (chain: 'Phala' | 'Khala', address: string) =>
+    `<a href="https://${chain.toLowerCase()}.subscan.io/account/${address}" target="_blank">${address}</a>`
 
-const display = derived(getCirculation(), ({data: circulation}) => {
-  if (chain === 'Ethereum') {
-    let circulatingSupply = ''
-    let sygmaBridgeLocked = ''
-    let totalSupply = ''
-    if (circulation != null) {
-      const {
-        ethereumTotalSupply,
-        ethereumSygmaBridge,
-        ethereumCirculation,
-        totalCirculation,
-      } = circulation
-      let percentage =
-        toPercentage(new Decimal(ethereumCirculation).div(totalCirculation)) ??
-        ''
-      circulatingSupply = `${percentage} / ${toCurrency(
-        new Decimal(ethereumCirculation),
-        0,
-      )} PHA`
-      sygmaBridgeLocked = `${toCurrency(
-        new Decimal(ethereumSygmaBridge),
-        0,
-      )} PHA`
-      totalSupply = `${toCurrency(new Decimal(ethereumTotalSupply), 0)} PHA`
+  const display = derived(getCirculation(), ({data: circulation}) => {
+    if (chain === 'Ethereum') {
+      let circulatingSupply = ''
+      let sygmaBridgeLocked = ''
+      let totalSupply = ''
+      if (circulation != null) {
+        const {ethereum, totalCirculation} = circulation
+        let percentage =
+          toPercentage(
+            new Decimal(ethereum.circulation).div(totalCirculation)
+          ) ?? ''
+        circulatingSupply = `${percentage} / ${toCurrency(
+          new Decimal(ethereum.circulation),
+          0
+        )} PHA`
+        sygmaBridgeLocked = `${toCurrency(
+          new Decimal(ethereum.sygmaBridge),
+          0
+        )} PHA`
+        totalSupply = `${toCurrency(new Decimal(ethereum.totalSupply), 0)} PHA`
+      }
+      return [
+        ['Circulating Supply', circulatingSupply],
+        [
+          'Sygma bridge locked',
+          sygmaBridgeLocked,
+          getEtherscanLink(ETHEREUM_SYGMA_BRIDGE_ADDRESS),
+        ],
+        ['Total Supply', totalSupply],
+      ]
+    } else if (chain === 'Phala') {
+      let circulatingSupply = ''
+      let crowdloanLocked = ''
+      let sygmaBridgeLocked = ''
+      let computationLocked = ''
+      let totalIssuance = ''
+      if (circulation != null) {
+        const {phala, totalCirculation} = circulation
+        let percentage =
+          toPercentage(new Decimal(phala.circulation).div(totalCirculation)) ??
+          ''
+        circulatingSupply = `${percentage} / ${toCurrency(
+          new Decimal(phala.circulation),
+          0
+        )} PHA`
+        sygmaBridgeLocked = `${toCurrency(new Decimal(phala.sygmaBridge), 0)} PHA`
+        crowdloanLocked = `${toCurrency(new Decimal(phala.crowdloan), 0)} PHA`
+        computationLocked = `${toCurrency(new Decimal(phala.reward), 0)} PHA`
+        totalIssuance = `${toCurrency(new Decimal(phala.totalIssuance), 0)} PHA`
+      }
+      return [
+        ['Circulating Supply', circulatingSupply],
+        [
+          'Sygma bridge locked',
+          sygmaBridgeLocked,
+          getSubscanLink(chain, PHALA_SYGMA_BRIDGE_ADDRESS),
+        ],
+        [
+          'Crowdloan locked',
+          crowdloanLocked,
+          getSubscanLink(chain, PHALA_CROWDLOAN_ADDRESS),
+        ],
+        [
+          'Computation locked',
+          computationLocked,
+          getSubscanLink(chain, PHALA_REWARD_ADDRESS),
+        ],
+        ['Total Issuance', totalIssuance],
+      ]
+    } else {
+      let circulatingSupply = ''
+      let sygmaBridgeLocked = ''
+      let computationLocked = ''
+      let totalIssuance = ''
+      if (circulation != null) {
+        const {khala, totalCirculation} = circulation
+        let percentage =
+          toPercentage(new Decimal(khala.circulation).div(totalCirculation)) ??
+          ''
+        circulatingSupply = `${percentage} / ${toCurrency(
+          new Decimal(khala.circulation),
+          0
+        )} PHA`
+        sygmaBridgeLocked = `${toCurrency(new Decimal(khala.sygmaBridge), 0)} PHA`
+        computationLocked = `${toCurrency(new Decimal(khala.reward), 0)} PHA`
+        totalIssuance = `${toCurrency(new Decimal(khala.totalIssuance), 0)} PHA`
+      }
+      return [
+        ['Circulating Supply', circulatingSupply],
+        [
+          'Sygma bridge locked',
+          sygmaBridgeLocked,
+          getSubscanLink(chain, PHALA_SYGMA_BRIDGE_ADDRESS),
+        ],
+        [
+          'Computation locked',
+          computationLocked,
+          getSubscanLink(chain, PHALA_REWARD_ADDRESS),
+        ],
+        ['Total Issuance', totalIssuance],
+      ]
     }
-    return [
-      ['Circulating Supply', circulatingSupply],
-      [
-        'Sygma bridge locked',
-        sygmaBridgeLocked,
-        getEtherscanLink(ETHEREUM_SYGMA_BRIDGE_ADDRESS),
-      ],
-      ['Total Supply', totalSupply],
-    ]
-  } else if (chain === 'Phala') {
-    let circulatingSupply = ''
-    let crowdloanLocked = ''
-    let sygmaBridgeLocked = ''
-    let computationLocked = ''
-    let totalIssuance = ''
-    if (circulation != null) {
-      const {
-        phalaCrowdloan,
-        phalaMiningRewards,
-        phalaCirculation,
-        phalaSygmaBridge,
-        phalaTotalIssuance,
-        totalCirculation,
-      } = circulation
-      let percentage =
-        toPercentage(new Decimal(phalaCirculation).div(totalCirculation)) ?? ''
-      circulatingSupply = `${percentage} / ${toCurrency(
-        new Decimal(phalaCirculation),
-        0,
-      )} PHA`
-      sygmaBridgeLocked = `${toCurrency(new Decimal(phalaSygmaBridge), 0)} PHA`
-      crowdloanLocked = `${toCurrency(new Decimal(phalaCrowdloan), 0)} PHA`
-      computationLocked = `${toCurrency(
-        new Decimal(phalaMiningRewards),
-        0,
-      )} PHA`
-      totalIssuance = `${toCurrency(new Decimal(phalaTotalIssuance), 0)} PHA`
-    }
-    return [
-      ['Circulating Supply', circulatingSupply],
-      [
-        'Sygma bridge locked',
-        sygmaBridgeLocked,
-        getSubscanLink(chain, PHALA_SYGMA_BRIDGE_ADDRESS),
-      ],
-      [
-        'Crowdloan locked',
-        crowdloanLocked,
-        getSubscanLink(chain, PHALA_CROWDLOAN_ADDRESS),
-      ],
-      [
-        'Computation locked',
-        computationLocked,
-        getSubscanLink(chain, PHALA_REWARD_ADDRESS),
-      ],
-      ['Total Issuance', totalIssuance],
-    ]
-  } else {
-    let circulatingSupply = ''
-    let sygmaBridgeLocked = ''
-    let computationLocked = ''
-    let totalIssuance = ''
-    if (circulation != null) {
-      const {
-        khalaMiningRewards,
-        khalaSygmaBridge,
-        khalaCirculation,
-        khalaTotalIssuance,
-        totalCirculation,
-      } = circulation
-      let percentage =
-        toPercentage(new Decimal(khalaCirculation).div(totalCirculation)) ?? ''
-      circulatingSupply = `${percentage} / ${toCurrency(
-        new Decimal(khalaCirculation),
-        0,
-      )} PHA`
-      sygmaBridgeLocked = `${toCurrency(new Decimal(khalaSygmaBridge), 0)} PHA`
-      computationLocked = `${toCurrency(
-        new Decimal(khalaMiningRewards),
-        0,
-      )} PHA`
-      totalIssuance = `${toCurrency(new Decimal(khalaTotalIssuance), 0)} PHA`
-    }
-    return [
-      ['Circulating Supply', circulatingSupply],
-      [
-        'Sygma bridge locked',
-        sygmaBridgeLocked,
-        getSubscanLink(chain, PHALA_SYGMA_BRIDGE_ADDRESS),
-      ],
-      [
-        'Computation locked',
-        computationLocked,
-        getSubscanLink(chain, PHALA_REWARD_ADDRESS),
-      ],
-      ['Total Issuance', totalIssuance],
-    ]
-  }
-})
+  })
 </script>
 
 <section class="card {className}">
diff --git a/apps/analytics/src/lib/Computation.svelte b/apps/analytics/src/lib/Computation.svelte
index 5ba47a9a..836c9437 100644
--- a/apps/analytics/src/lib/Computation.svelte
+++ b/apps/analytics/src/lib/Computation.svelte
@@ -1,147 +1,147 @@
 <script lang="ts">
-import {compactFormat, toCurrency} from '@phala/lib'
-import {
-  RadioGroup,
-  RadioGroupLabel,
-  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'
+  import {compactFormat, toCurrency} from '@phala/lib'
+  import {
+    RadioGroup,
+    RadioGroupLabel,
+    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()],
-  ([{data}, {data: snapshot}, {data: circulation}]) => {
-    let circulatingSupply = ''
-    let delegationValue = 'ㅤ'
-    let dailyRewards = ''
-    let averageApr = ''
-    let stakeRatio = ''
-    let onlineWorkers = ''
-    let delegator = ''
-    let budgetPerShare = ''
+  const display = derived(
+    [getComputationData(), getComputationSnapshot(), getCirculation()],
+    ([{data}, {data: snapshot}, {data: circulation}]) => {
+      let circulatingSupply = ''
+      let delegationValue = 'ㅤ'
+      let dailyRewards = ''
+      let averageApr = ''
+      let stakeRatio = ''
+      let onlineWorkers = ''
+      let delegator = ''
+      let budgetPerShare = ''
 
-    if (circulation != null) {
-      circulatingSupply = `${compactFormat(
-        new Decimal(circulation.totalCirculation),
-      )} PHA`
-    }
+      if (circulation != null) {
+        circulatingSupply = `${compactFormat(
+          new Decimal(circulation.totalCirculation)
+        )} PHA`
+      }
 
-    if (snapshot != null) {
-      const {summary} = snapshot
-      const length = summary.length
-      dailyRewards = `${format(
-        summary[length - 1].cumulativeRewards
-          .minus(summary[length - 3].cumulativeRewards)
-          .toDP(0)
-          .toNumber(),
-      )} PHA`
-    }
+      if (snapshot != null) {
+        const {summary} = snapshot
+        const length = summary.length
+        dailyRewards = `${format(
+          summary[length - 1].cumulativeRewards
+            .minus(summary[length - 3].cumulativeRewards)
+            .toDP(0)
+            .toNumber()
+        )} PHA`
+      }
 
-    if (data != null) {
-      delegationValue = `${toCurrency(
-        data.summary.totalValue,
-        0,
-      )} <sub>PHA</sub>`
-      averageApr = formatPercentage(data.summary.averageApr.toNumber())
-      if (circulation != null) {
-        stakeRatio = formatPercentage(
-          data.summary.totalValue.div(circulation.totalCirculation).toNumber(),
-        )
+      if (data != null) {
+        delegationValue = `${toCurrency(
+          data.summary.totalValue,
+          0
+        )} <sub>PHA</sub>`
+        averageApr = formatPercentage(data.summary.averageApr.toNumber())
+        if (circulation != null) {
+          stakeRatio = formatPercentage(
+            data.summary.totalValue.div(circulation.totalCirculation).toNumber()
+          )
+        }
+        onlineWorkers = format(data.summary.idleWorkerCount)
+        delegator = format(data.summary.delegatorCount)
+        budgetPerShare = data.summary.budgetPerShare.toDP(2).toString()
       }
-      onlineWorkers = format(data.summary.idleWorkerCount)
-      delegator = format(data.summary.delegatorCount)
-      budgetPerShare = data.summary.budgetPerShare.toDP(2).toString()
-    }
 
-    return [
-      [
-        'Delegation value',
-        delegationValue,
-        'All delegated PHA across the Phala & Khala network',
-      ],
-      [
-        'Daily rewards',
-        dailyRewards,
-        'The total amount of computation rewards distributed across the Phala & Khala network in the last day.',
-      ],
-      [
-        'Average APR',
-        averageApr,
-        'The average annual percentage rate of return for all delegations across the Phala & Khala network. (no consideration of compound interest)',
-      ],
-      ['Circulating supply', circulatingSupply],
-      [
-        'Stake ratio',
-        stakeRatio,
-        'Stake Ratio = All delegated PHA across the Phala & Khala network / All circulating PHA.',
-      ],
-      [
-        'Online workers',
-        onlineWorkers,
-        'The total number of online workers across the Phala & Khala network.',
-      ],
-      [
-        'Delegator',
-        delegator,
-        'All delegator count across the Phala & Khala network',
-      ],
-      [
-        'Daily budget/share',
-        budgetPerShare,
-        `It's roughly equal to the daily income of a 10,000V worker before the 20% take away to the Treasury.`,
-      ],
-    ]
-  },
-)
+      return [
+        [
+          'Delegation value',
+          delegationValue,
+          'All delegated PHA across the Phala & Khala network',
+        ],
+        [
+          'Daily rewards',
+          dailyRewards,
+          'The total amount of computation rewards distributed across the Phala & Khala network in the last day.',
+        ],
+        [
+          'Average APR',
+          averageApr,
+          'The average annual percentage rate of return for all delegations across the Phala & Khala network. (no consideration of compound interest)',
+        ],
+        ['Circulating supply', circulatingSupply],
+        [
+          'Stake ratio',
+          stakeRatio,
+          'Stake Ratio = All delegated PHA across the Phala & Khala network / All circulating PHA.',
+        ],
+        [
+          'Online workers',
+          onlineWorkers,
+          'The total number of online workers across the Phala & Khala network.',
+        ],
+        [
+          'Delegator',
+          delegator,
+          'All delegator count across the Phala & Khala network',
+        ],
+        [
+          'Daily budget/share',
+          budgetPerShare,
+          `It's roughly equal to the daily income of a 10,000V worker before the 20% take away to the Treasury.`,
+        ],
+      ]
+    }
+  )
 
-const charts = [
-  'Delegation value',
-  'Average APR',
-  'Online workers',
-  'Delegator',
-  'Daily budge/share',
-] as const
+  const charts = [
+    'Delegation value',
+    'Average APR',
+    'Online workers',
+    'Delegator',
+    'Daily budge/share',
+  ] as const
 
-const currentChart = writable<(typeof charts)[number]>(charts[0])
+  const currentChart = writable<(typeof charts)[number]>(charts[0])
 
-$: isPercentage = $currentChart === 'Average APR'
+  $: isPercentage = $currentChart === 'Average APR'
 
-const data = derived(
-  [getComputationSnapshot(), currentChart],
-  ([{data}, $currentChart]): ChartData<'line', number[]> | undefined => {
-    if (data != null) {
-      const {summary} = data
-      return {
-        labels: summary.map((e) => e.updatedTime),
-        datasets: [
-          {
-            label: $currentChart,
-            data: summary.map((e) => {
-              switch ($currentChart) {
-                case 'Delegation value':
-                  return e.totalValue.toNumber()
-                case 'Average APR':
-                  return e.averageApr.toDP(4).toNumber()
-                case 'Online workers':
-                  return e.idleWorkerCount
-                case 'Delegator':
-                  return e.delegatorCount
-                case 'Daily budge/share':
-                  return e.budgetPerShare.toDP(2).toNumber()
-              }
-            }),
-          },
-        ],
+  const data = derived(
+    [getComputationSnapshot(), currentChart],
+    ([{data}, $currentChart]): ChartData<'line', number[]> | undefined => {
+      if (data != null) {
+        const {summary} = data
+        return {
+          labels: summary.map((e) => e.updatedTime),
+          datasets: [
+            {
+              label: $currentChart,
+              data: summary.map((e) => {
+                switch ($currentChart) {
+                  case 'Delegation value':
+                    return e.totalValue.toNumber()
+                  case 'Average APR':
+                    return e.averageApr.toDP(4).toNumber()
+                  case 'Online workers':
+                    return e.idleWorkerCount
+                  case 'Delegator':
+                    return e.delegatorCount
+                  case 'Daily budge/share':
+                    return e.budgetPerShare.toDP(2).toNumber()
+                }
+              }),
+            },
+          ],
+        }
       }
     }
-  },
-)
+  )
 </script>
 
 <h1 class="font-montserrat text-4xl font-bold my-8">Computation</h1>
diff --git a/apps/analytics/src/routes/token/+page.svelte b/apps/analytics/src/routes/token/+page.svelte
index b05411a9..5790d1d8 100644
--- a/apps/analytics/src/routes/token/+page.svelte
+++ b/apps/analytics/src/routes/token/+page.svelte
@@ -1,75 +1,64 @@
 <script lang="ts">
-import {toCurrency, toPercentage} from '@phala/lib'
-import Decimal from 'decimal.js'
-import {Bar} from 'svelte-chartjs'
-import {derived} from 'svelte/store'
-import ChainCirculation from '~/lib/ChainCirculation.svelte'
-import {getCirculation} from '~/stores/circulation'
+  import {toCurrency, toPercentage} from '@phala/lib'
+  import Decimal from 'decimal.js'
+  import {Bar} from 'svelte-chartjs'
+  import {derived} from 'svelte/store'
+  import ChainCirculation from '~/lib/ChainCirculation.svelte'
+  import {getCirculation} from '~/stores/circulation'
 
-const totalSupply = new Decimal(1e9)
+  const totalSupply = new Decimal(1e9)
 
-const display = derived(getCirculation(), ({data: circulation}) => {
-  let circulatingSupply = 'ㅤ'
-  let percentage = 'ㅤ'
-  let crowdloanRewards = ''
-  let computationRewards = ''
+  const display = derived(getCirculation(), ({data: circulation}) => {
+    let circulatingSupply = 'ㅤ'
+    let percentage = 'ㅤ'
+    let crowdloanRewards = ''
+    let computationRewards = ''
 
-  if (circulation != null) {
-    const {
-      totalCirculation,
-      phalaCrowdloan,
-      khalaCrowdloan,
-      phalaMiningRewards,
-      khalaMiningRewards,
-      ethereumMiningRewards,
-    } = circulation
-    circulatingSupply = `${toCurrency(
-      new Decimal(totalCirculation),
-      0,
-    )} <sub>PHA</sub>`
-    percentage =
-      toPercentage(new Decimal(totalCirculation).div(totalSupply)) ?? ''
+    if (circulation != null) {
+      const {totalCirculation, phala, khala, ethereum} = circulation
+      circulatingSupply = `${toCurrency(
+        new Decimal(totalCirculation),
+        0
+      )} <sub>PHA</sub>`
+      percentage =
+        toPercentage(new Decimal(totalCirculation).div(totalSupply)) ?? ''
 
-    crowdloanRewards = `${toCurrency(
-      Decimal.sum(phalaCrowdloan, khalaCrowdloan),
-      0,
-    )} PHA`
-    computationRewards = `${toCurrency(
-      Decimal.sum(
-        phalaMiningRewards,
-        khalaMiningRewards,
-        ethereumMiningRewards,
-      ),
-      0,
-    )} PHA`
-  }
+      crowdloanRewards = `${toCurrency(
+        Decimal.sum(phala.crowdloan, khala.crowdloan),
+        0
+      )} PHA`
+      computationRewards = `${toCurrency(
+        Decimal.sum(phala.reward, khala.reward, ethereum.reward),
+        0
+      )} PHA`
+    }
 
-  return [
-    ['Circulating Supply', circulatingSupply],
-    ['Percentage', percentage],
-    ['Crowdloan locked', crowdloanRewards],
-    ['Computation locked', computationRewards],
-  ]
-})
+    return [
+      ['Circulating Supply', circulatingSupply],
+      ['Percentage', percentage],
+      ['Crowdloan locked', crowdloanRewards],
+      ['Computation locked', computationRewards],
+    ]
+  })
 
-const chartData = derived(getCirculation(), ({data: circulation}) => {
-  if (circulation == null) return null
+  const chartData = derived(getCirculation(), ({data: circulation}) => {
+    if (circulation == null) return null
 
-  return {
-    labels: ['Ethereum', 'Khala', 'Phala'],
-    datasets: [
-      {
-        label: 'Circulating Supply',
-        data: [
-          parseInt(circulation.ethereumCirculation),
-          parseInt(circulation.khalaCirculation),
-          parseInt(circulation.phalaCirculation),
-        ],
-        backgroundColor: ['#99a2cf', '#03ffff', '#c5ff46'],
-      },
-    ],
-  }
-})
+    return {
+      labels: ['Ethereum', 'Khala', 'Phala'],
+      datasets: [
+        {
+          label: 'Circulating Supply',
+          data: [
+            parseInt(circulation.ethereum.circulation),
+            parseInt(circulation.khala.circulation),
+            parseInt(circulation.phala.circulation),
+          ],
+          backgroundColor: ['#99a2cf', '#03ffff', '#c5ff46'],
+        },
+      ],
+    }
+  })
 </script>
 
 <svelte:head>
diff --git a/apps/analytics/src/stores/circulation.ts b/apps/analytics/src/stores/circulation.ts
index 9af6331a..c6dbee35 100644
--- a/apps/analytics/src/stores/circulation.ts
+++ b/apps/analytics/src/stores/circulation.ts
@@ -1,26 +1,29 @@
 import {createQuery} from '@tanstack/svelte-query'
 
+interface PhalaCirculation {
+  circulation: string
+  crowdloan: string
+  reward: string
+  sygmaBridge: string
+  timestamp: string
+  totalIssuance: string
+}
+
+interface EthereumCirculation {
+  circulation: string
+  phalaChainBridge: string
+  khalaChainBridge: string
+  reward: string
+  sygmaBridge: string
+  timestamp: string
+  totalSupply: string
+}
+
 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
+  phala: PhalaCirculation
+  khala: PhalaCirculation
+  ethereum: EthereumCirculation
   totalCirculation: string
-  lastUpdate: number
 }
 
 const fetchCirculationData = async () => {