feat(analytics): new circulation api (#399)

* feat(analytics): new circulation api * refactor: remove Emotion cache provider and use AppCacheProvider
Phala-Network · Feb 29, 2024 · 91bb8a5 · 91bb8a5
1 parent ad6d69e
commit 91bb8a5
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 279 deletions.
diff --git 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
@@ -27,24 +27,19 @@ const display = derived(getCirculation(), ({data: circulation}) => {
     let sygmaBridgeLocked = ''
     let totalSupply = ''
     if (circulation != null) {
-      const {
-        ethereumTotalSupply,
-        ethereumSygmaBridge,
-        ethereumCirculation,
-        totalCirculation,
-      } = circulation
+      const {ethereum, totalCirculation} = circulation
       let percentage =
-        toPercentage(new Decimal(ethereumCirculation).div(totalCirculation)) ??
+        toPercentage(new Decimal(ethereum.circulation).div(totalCirculation)) ??
         ''
       circulatingSupply = `${percentage} / ${toCurrency(
-        new Decimal(ethereumCirculation),
+        new Decimal(ethereum.circulation),
         0,
       )} PHA`
       sygmaBridgeLocked = `${toCurrency(
-        new Decimal(ethereumSygmaBridge),
+        new Decimal(ethereum.sygmaBridge),
         0,
       )} PHA`
-      totalSupply = `${toCurrency(new Decimal(ethereumTotalSupply), 0)} PHA`
+      totalSupply = `${toCurrency(new Decimal(ethereum.totalSupply), 0)} PHA`
     }
     return [
       ['Circulating Supply', circulatingSupply],
@@ -62,27 +57,17 @@ const display = derived(getCirculation(), ({data: circulation}) => {
     let computationLocked = ''
     let totalIssuance = ''
     if (circulation != null) {
-      const {
-        phalaCrowdloan,
-        phalaMiningRewards,
-        phalaCirculation,
-        phalaSygmaBridge,
-        phalaTotalIssuance,
-        totalCirculation,
-      } = circulation
+      const {phala, totalCirculation} = circulation
       let percentage =
-        toPercentage(new Decimal(phalaCirculation).div(totalCirculation)) ?? ''
+        toPercentage(new Decimal(phala.circulation).div(totalCirculation)) ?? ''
       circulatingSupply = `${percentage} / ${toCurrency(
-        new Decimal(phalaCirculation),
+        new Decimal(phala.circulation),
         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`
+      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],
@@ -109,25 +94,16 @@ const display = derived(getCirculation(), ({data: circulation}) => {
     let computationLocked = ''
     let totalIssuance = ''
     if (circulation != null) {
-      const {
-        khalaMiningRewards,
-        khalaSygmaBridge,
-        khalaCirculation,
-        khalaTotalIssuance,
-        totalCirculation,
-      } = circulation
+      const {khala, totalCirculation} = circulation
       let percentage =
-        toPercentage(new Decimal(khalaCirculation).div(totalCirculation)) ?? ''
+        toPercentage(new Decimal(khala.circulation).div(totalCirculation)) ?? ''
       circulatingSupply = `${percentage} / ${toCurrency(
-        new Decimal(khalaCirculation),
-        0,
-      )} PHA`
-      sygmaBridgeLocked = `${toCurrency(new Decimal(khalaSygmaBridge), 0)} PHA`
-      computationLocked = `${toCurrency(
-        new Decimal(khalaMiningRewards),
+        new Decimal(khala.circulation),
         0,
       )} PHA`
-      totalIssuance = `${toCurrency(new Decimal(khalaTotalIssuance), 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],

diff --git a/apps/analytics/src/routes/token/+page.svelte b/apps/analytics/src/routes/token/+page.svelte
@@ -15,14 +15,7 @@ const display = derived(getCirculation(), ({data: circulation}) => {
   let computationRewards = ''
 
   if (circulation != null) {
-    const {
-      totalCirculation,
-      phalaCrowdloan,
-      khalaCrowdloan,
-      phalaMiningRewards,
-      khalaMiningRewards,
-      ethereumMiningRewards,
-    } = circulation
+    const {totalCirculation, phala, khala, ethereum} = circulation
     circulatingSupply = `${toCurrency(
       new Decimal(totalCirculation),
       0,
@@ -31,15 +24,11 @@ const display = derived(getCirculation(), ({data: circulation}) => {
       toPercentage(new Decimal(totalCirculation).div(totalSupply)) ?? ''
 
     crowdloanRewards = `${toCurrency(
-      Decimal.sum(phalaCrowdloan, khalaCrowdloan),
+      Decimal.sum(phala.crowdloan, khala.crowdloan),
       0,
     )} PHA`
     computationRewards = `${toCurrency(
-      Decimal.sum(
-        phalaMiningRewards,
-        khalaMiningRewards,
-        ethereumMiningRewards,
-      ),
+      Decimal.sum(phala.reward, khala.reward, ethereum.reward),
       0,
     )} PHA`
   }
@@ -61,9 +50,9 @@ const chartData = derived(getCirculation(), ({data: circulation}) => {
       {
         label: 'Circulating Supply',
         data: [
-          parseInt(circulation.ethereumCirculation),
-          parseInt(circulation.khalaCirculation),
-          parseInt(circulation.phalaCirculation),
+          parseInt(circulation.ethereum.circulation),
+          parseInt(circulation.khala.circulation),
+          parseInt(circulation.phala.circulation),
         ],
         backgroundColor: ['#99a2cf', '#03ffff', '#c5ff46'],
       },

diff --git 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 () => {

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
@@ -19,9 +20,10 @@
     "@mui/icons-material": "^5.15.11",
     "@mui/lab": "5.0.0-alpha.166",
     "@mui/material": "^5.15.11",
+    "@mui/material-nextjs": "^5.15.11",
     "@mui/x-data-grid": "^6.19.5",
-    "@phala/store": "workspace:*",
     "@phala/lib": "workspace:*",
+    "@phala/store": "workspace:*",
     "@polkadot/api": "^10.11.2",
     "@polkadot/extension-inject": "^0.46.6",
     "@polkadot/keyring": "^12.6.2",

diff --git a/apps/app/pages/_app.tsx b/apps/app/pages/_app.tsx
@@ -1,17 +1,16 @@
 import HydrateAtoms from '@/components/HydrateAtoms'
 import Layout from '@/components/Layout'
 import ZendeskWidget from '@/components/ZendeskWidget'
-import {createEmotionCache} from '@/lib/createEmotionCache'
 import {globalStyles} from '@/lib/styles'
 import {theme} from '@/lib/theme'
 import {chainAtom} from '@/store/common'
-import {CacheProvider, type EmotionCache} from '@emotion/react'
 import {
   Box,
   CssBaseline,
   GlobalStyles,
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material'
+import {AppCacheProvider} from '@mui/material-nextjs/v14-pagesRouter'
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools'
 import Decimal from 'decimal.js'
@@ -23,22 +22,10 @@ import {SWRConfig} from 'swr'
 
 Decimal.set({toExpNeg: -9e15, toExpPos: 9e15, precision: 50})
 
-// Client-side cache, shared for the whole session of the user in the browser.
-const clientSideEmotionCache = createEmotionCache()
-
 const queryClient = new QueryClient({})
 
-interface MyAppProps extends AppProps {
-  emotionCache?: EmotionCache
-}
-
-const App: FC<MyAppProps> = (props) => {
-  const {
-    Component,
-    emotionCache = clientSideEmotionCache,
-    pageProps,
-    router,
-  } = props
+const App: FC<AppProps> = (props) => {
+  const {Component, pageProps, router} = props
 
   return (
     <SWRConfig
@@ -61,7 +48,7 @@ const App: FC<MyAppProps> = (props) => {
               )
             }
           >
-            <CacheProvider value={emotionCache}>
+            <AppCacheProvider {...props}>
               <MuiThemeProvider theme={theme}>
                 <CssBaseline />
                 <GlobalStyles styles={[globalStyles]} />
@@ -76,7 +63,7 @@ const App: FC<MyAppProps> = (props) => {
                   <ReactQueryDevtools buttonPosition="bottom-left" />
                 </Layout>
               </MuiThemeProvider>
-            </CacheProvider>
+            </AppCacheProvider>
           </HydrateAtoms>
         </JotaiProvider>
       </QueryClientProvider>