Skip to content

Commit

Permalink
feat(analytics): add circulation page
Browse files Browse the repository at this point in the history
  • Loading branch information
kingsleydon committed Jan 29, 2024
1 parent bbd0803 commit 2ade8c6
Show file tree
Hide file tree
Showing 26 changed files with 2,346 additions and 1,017 deletions.
7 changes: 3 additions & 4 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@
"source.fixAll.eslint": "explicit",
"source.organizeImports": "explicit"
},
"editor.formatOnSave": true,
"eslint.workingDirectories": [{"mode": "auto"}],
"files.associations": {"*.css": "tailwindcss"},
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.tsdk": "./node_modules/typescript/lib",
"files.associations": {
"*.css": "tailwindcss"
}
"typescript.tsdk": "./node_modules/typescript/lib"
}
21 changes: 11 additions & 10 deletions apps/analytics/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
"svelte": "^4.2.8",
"svelte-check": "^3.6.2",
"@sveltejs/adapter-vercel": "^4.0.5",
"@sveltejs/kit": "^2.5.0",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"svelte": "^4.2.9",
"svelte-check": "^3.6.3",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^4.5.1"
"vite": "^5.0.12"
},
"type": "module",
"dependencies": {
"@phala/utils": "workspace:*",
"@rgossiaux/svelte-headlessui": "^2.0.0",
"@rgossiaux/svelte-heroicons": "^0.1.2",
"@tanstack/svelte-query": "^4.36.1",
"autoprefixer": "^10.4.16",
"@tanstack/svelte-query": "^5.17.19",
"autoprefixer": "^10.4.17",
"chart.js": "^4.4.1",
"chartjs-adapter-date-fns": "^3.0.0",
"date-fns": "^3.0.6",
"date-fns": "^3.3.1",
"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"
}
}
17 changes: 12 additions & 5 deletions apps/analytics/src/app.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Montserrat:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
* {
min-width: 0;
}
html {
min-height: 100vh;
background-color: #171923;
Expand All @@ -13,11 +16,15 @@
body {
overflow-x: hidden;
}

hr {
border-color: currentColor;
}
}

@layer components {
.numeric {
@apply font-mono font-bold;
@apply font-mono font-semibold text-sm;
}
}

Expand All @@ -26,19 +33,19 @@
}

.data-value {
@apply numeric font-bold text-3xl;
@apply numeric font-bold text-2xl;
}

.data-label {
@apply font-montserrat text-gray-300;
@apply font-montserrat text-gray-400 text-sm font-medium;
}

.help {
@apply cursor-help underline decoration-dotted decoration-gray-500 hover:decoration-inherit;
}

.tooltip {
@apply absolute top-0 left-0 md:ml-4 bg-gray-600 rounded-xl p-3 text-sm font-montserrat w-80;
@apply absolute top-0 left-0 md:ml-4 bg-gray-600 rounded-xl p-3 text-sm font-montserrat w-80 break-all;
}

sub {
Expand Down
171 changes: 171 additions & 0 deletions apps/analytics/src/lib/ChainCirculation.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<script lang="ts">
import {toCurrency, toPercentage} from '@phala/utils'
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'
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 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`
}
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}">
<h2 class="font-montserrat text-xl font-bold mb-3">{chain}</h2>
{#each $display as item, i}
{#if i === $display.length - 1}
<hr class="my-2 text-gray-600" />
{/if}
<div class="flex items-baseline justify-between mt-1">
{#if item[2] != null}
<Tooltip title={item[2]}>
<span class="data-label">{item[0]}</span>
</Tooltip>
{:else}
<span class="data-label">{item[0]}</span>
{/if}
<span class="numeric">{item[1]}</span>
</div>
{/each}
</section>
41 changes: 21 additions & 20 deletions apps/analytics/src/lib/Computation.svelte
Original file line number Diff line number Diff line change
@@ -1,37 +1,35 @@
<script lang="ts">
import {compactFormat} from '@phala/utils'
import {compactFormat, toCurrency} from '@phala/utils'
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 circulatingSupply = ''
let delegationValue = ''
let dailyRewards = ''
let averageApr = ''
let stakeRatio = ''
let onlineWorkers = ''
let delegator = ''
let budgetPerShare = ''
const format = new Intl.NumberFormat('en-US').format
const formatPercentage = new Intl.NumberFormat('en-US', {
style: 'percent',
maximumFractionDigits: 2,
}).format
let dailyRewards = ''
let averageApr = ''
let stakeRatio = ''
let onlineWorkers = ''
let delegator = ''
let budgetPerShare = ''
if (circulation != null) {
circulatingSupply = `${compactFormat(circulation)} PHA`
circulatingSupply = `${compactFormat(
new Decimal(circulation.totalCirculation),
)} PHA`
}
if (snapshot != null) {
Expand All @@ -46,13 +44,16 @@
}
if (data != null) {
delegationValue = `${compactFormat(
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).toNumber(),
data.summary.totalValue
.div(circulation.totalCirculation)
.toNumber(),
)
}
onlineWorkers = format(data.summary.idleWorkerCount)
Expand All @@ -76,7 +77,7 @@
averageApr,
'The average annual percentage rate of return for all delegations across the Phala & Khala network. (no consideration of compound interest)',
],
['Circulating Supply', circulatingSupply],
['Circulating supply', circulatingSupply],
[
'Stake ratio',
stakeRatio,
Expand Down Expand Up @@ -172,11 +173,11 @@
{/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}
class="flex font-montserrat flex-wrap gap-2"
class="flex font-montserrat flex-wrap gap-2 font-medium"
>
{#each charts as chart}
<RadioGroupOption
Expand Down
Loading

0 comments on commit 2ade8c6

Please sign in to comment.