diff --git a/apps/analytics/package.json b/apps/analytics/package.json index 04c86c25..adb45753 100644 --- a/apps/analytics/package.json +++ b/apps/analytics/package.json @@ -22,7 +22,12 @@ "type": "module", "dependencies": { "autoprefixer": "^10.4.14", + "chart.js": "^4.3.3", + "chartjs-adapter-date-fns": "^3.0.0", + "date-fns": "^2.30.0", + "graphql-request": "^6.1.0", "postcss": "^8.4.27", + "svelte-chartjs": "^3.1.2", "tailwindcss": "^3.3.3" } } diff --git a/apps/analytics/src/app.css b/apps/analytics/src/app.css index b5c61c95..cb6b405a 100644 --- a/apps/analytics/src/app.css +++ b/apps/analytics/src/app.css @@ -1,3 +1,18 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; + +@layer components { + .card { + @apply bg-slate-800 rounded-3xl px-6 py-4 shadow-xl; + } + + .card-head { + @apply font-montserrat font-bold text-4xl; + } + + .card-title { + @apply font-montserrat font-semibold text-sm text-slate-400; + } +} diff --git a/apps/analytics/src/app.html b/apps/analytics/src/app.html index 1c09d3a6..7c2578d0 100644 --- a/apps/analytics/src/app.html +++ b/apps/analytics/src/app.html @@ -6,7 +6,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/apps/analytics/src/components/Nav.svelte b/apps/analytics/src/components/Nav.svelte new file mode 100644 index 00000000..05fcd6cd --- /dev/null +++ b/apps/analytics/src/components/Nav.svelte @@ -0,0 +1,12 @@ + diff --git a/apps/analytics/src/components/PhatContractChart.svelte b/apps/analytics/src/components/PhatContractChart.svelte new file mode 100644 index 00000000..70b3233b --- /dev/null +++ b/apps/analytics/src/components/PhatContractChart.svelte @@ -0,0 +1,73 @@ + + +{#if executions != null} +
+
+

Phat Contract daily execution

+

{current}

+
+ +
+ +
+
+{/if} diff --git a/apps/analytics/src/lib/chart.ts b/apps/analytics/src/lib/chart.ts new file mode 100644 index 00000000..0c85840d --- /dev/null +++ b/apps/analytics/src/lib/chart.ts @@ -0,0 +1,35 @@ +import { + Chart, + LineController, + LineElement, + LinearScale, + PointElement, + TimeScale, + Tooltip, +} from 'chart.js' +import 'chartjs-adapter-date-fns' + +export const initChartJS = () => { + Chart.register( + Tooltip, + LineController, + LineElement, + PointElement, + TimeScale, + LinearScale, + ) + + Chart.defaults.elements.line.tension = 0.5 + Chart.defaults.elements.point.radius = 0 + Chart.defaults.maintainAspectRatio = false + Chart.defaults.font.family = 'Montserrat' + Chart.defaults.color = '#94a3b8' + Chart.defaults.interaction.mode = 'index' + Chart.defaults.interaction.intersect = false + Chart.defaults.plugins.tooltip.displayColors = false + Chart.defaults.scale.grid.display = false + Chart.defaults.scales.time.time.tooltipFormat = 'PP' + Chart.defaults.borderColor = 'transparent' + Chart.defaults.animation = false + Chart.defaults.datasets.line.borderColor = '#C5FF46' +} diff --git a/apps/analytics/src/routes/+page.svelte b/apps/analytics/src/routes/+page.svelte index b06a3197..1021f42f 100644 --- a/apps/analytics/src/routes/+page.svelte +++ b/apps/analytics/src/routes/+page.svelte @@ -1,15 +1,26 @@ - Phala Analytics -
-
- Phala logo -

Phala Analytics

-
+
+
-

Phat Contract execution count

+
+
+ +
diff --git a/apps/analytics/static/logo.svg b/apps/analytics/static/logo.svg new file mode 100644 index 00000000..1eac5c80 --- /dev/null +++ b/apps/analytics/static/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/analytics/svelte.config.js b/apps/analytics/svelte.config.js index 75873460..e3f12c21 100644 --- a/apps/analytics/svelte.config.js +++ b/apps/analytics/svelte.config.js @@ -1,13 +1,19 @@ -import adapter from '@sveltejs/adapter-static'; -import {vitePreprocess} from '@sveltejs/kit/vite'; +import adapter from '@sveltejs/adapter-static' +import {vitePreprocess} from '@sveltejs/kit/vite' +import path from 'path' /** @type {import('@sveltejs/kit').Config} */ const config = { - // Consult https://kit.svelte.dev/docs/integrations#preprocessors - // for more information about preprocessors - preprocess: vitePreprocess(), + // Consult https://kit.svelte.dev/docs/integrations#preprocessors + // for more information about preprocessors + preprocess: vitePreprocess(), - kit: {adapter: adapter()} -}; + kit: { + adapter: adapter(), + alias: { + '~': path.resolve('./src'), + }, + }, +} -export default config; +export default config diff --git a/apps/analytics/tailwind.config.js b/apps/analytics/tailwind.config.js index 13207ccb..856de947 100644 --- a/apps/analytics/tailwind.config.js +++ b/apps/analytics/tailwind.config.js @@ -3,7 +3,9 @@ export default { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: {}, + fontFamily: { + montserrat: ['Montserrat', 'sans-serif'], + }, }, plugins: [], } - diff --git a/apps/app/components/BasePool/Chart.tsx b/apps/app/components/BasePool/Chart.tsx index 972e3f13..11206b67 100644 --- a/apps/app/components/BasePool/Chart.tsx +++ b/apps/app/components/BasePool/Chart.tsx @@ -1,12 +1,12 @@ import useSWRValue from '@/hooks/useSWRValue' import {aprToApy} from '@/lib/apr' -import compactFormat from '@/lib/compactFormat' import { useBasePoolSnapshotsConnectionQuery, type BasePoolCommonFragment, } from '@/lib/subsquidQuery' import {colors} from '@/lib/theme' import {subsquidClientAtom} from '@/store/common' +import {compactFormat} from '@phala/lib' import {addDays, addHours} from 'date-fns' import Decimal from 'decimal.js' import {useAtom} from 'jotai' diff --git a/apps/app/components/BasePool/WithdrawQueue.tsx b/apps/app/components/BasePool/WithdrawQueue.tsx index b7cd819e..b950603e 100644 --- a/apps/app/components/BasePool/WithdrawQueue.tsx +++ b/apps/app/components/BasePool/WithdrawQueue.tsx @@ -1,7 +1,6 @@ import WithdrawalQueueIcon from '@/assets/withdraw_queue.svg' import Empty from '@/components/Empty' import SectionHeader from '@/components/SectionHeader' -import compactFormat from '@/lib/compactFormat' import { useDelegationsConnectionQuery, type BasePoolCommonFragment, @@ -12,6 +11,7 @@ import Check from '@mui/icons-material/Check' import WarningAmber from '@mui/icons-material/WarningAmber' import {Box, Paper, Stack, Tooltip, Typography, useTheme} from '@mui/material' import {DataGrid, type GridColDef, type GridSortModel} from '@mui/x-data-grid' +import {compactFormat} from '@phala/lib' import {toCurrency} from '@phala/util' import { addDays, diff --git a/apps/app/components/Delegation/Chart.tsx b/apps/app/components/Delegation/Chart.tsx index 3d57af0f..630cfac5 100644 --- a/apps/app/components/Delegation/Chart.tsx +++ b/apps/app/components/Delegation/Chart.tsx @@ -1,5 +1,4 @@ import useSWRValue from '@/hooks/useSWRValue' -import compactFormat from '@/lib/compactFormat' import getDelegationProfit from '@/lib/getDelegationProfit' import { useDelegationSnapshotsConnectionQuery, @@ -7,6 +6,7 @@ import { } from '@/lib/subsquidQuery' import {colors} from '@/lib/theme' import {subsquidClientAtom} from '@/store/common' +import {compactFormat} from '@phala/lib' import {addDays} from 'date-fns' import Decimal from 'decimal.js' import {useAtom} from 'jotai' diff --git a/apps/app/components/DelegationScatterChart.tsx b/apps/app/components/DelegationScatterChart.tsx index f49783af..6f1aede0 100644 --- a/apps/app/components/DelegationScatterChart.tsx +++ b/apps/app/components/DelegationScatterChart.tsx @@ -1,8 +1,8 @@ import useGetApr from '@/hooks/useGetApr' -import compactFormat from '@/lib/compactFormat' import {useDelegationsConnectionQuery} from '@/lib/subsquidQuery' import {colors} from '@/lib/theme' import {subsquidClientAtom} from '@/store/common' +import {compactFormat} from '@phala/lib' import Decimal from 'decimal.js' import {useAtom} from 'jotai' import {useMemo, type FC} from 'react' diff --git a/apps/app/components/DelegationValueChart.tsx b/apps/app/components/DelegationValueChart.tsx index 6a4fdc52..bc3a7fc2 100644 --- a/apps/app/components/DelegationValueChart.tsx +++ b/apps/app/components/DelegationValueChart.tsx @@ -1,7 +1,7 @@ import useSWRValue from '@/hooks/useSWRValue' -import compactFormat from '@/lib/compactFormat' import {useAccountSnapshotsConnectionQuery} from '@/lib/subsquidQuery' import {subsquidClientAtom} from '@/store/common' +import {compactFormat} from '@phala/lib' import {addDays} from 'date-fns' import Decimal from 'decimal.js' import {useAtom} from 'jotai' diff --git a/apps/app/components/FarmChart.tsx b/apps/app/components/FarmChart.tsx index ded4fbcb..7c9c92e9 100644 --- a/apps/app/components/FarmChart.tsx +++ b/apps/app/components/FarmChart.tsx @@ -1,11 +1,11 @@ import useSWRValue from '@/hooks/useSWRValue' -import compactFormat from '@/lib/compactFormat' import { useAccountSnapshotsConnectionQuery, type BasePoolKind, } from '@/lib/subsquidQuery' import {colors} from '@/lib/theme' import {subsquidClientAtom} from '@/store/common' +import {compactFormat} from '@phala/lib' import {addDays} from 'date-fns' import Decimal from 'decimal.js' import {useAtom} from 'jotai' diff --git a/apps/app/components/TopBar/NetworkStats.tsx b/apps/app/components/TopBar/NetworkStats.tsx index 35946b48..8df9af56 100644 --- a/apps/app/components/TopBar/NetworkStats.tsx +++ b/apps/app/components/TopBar/NetworkStats.tsx @@ -2,7 +2,6 @@ import {type WikiEntry} from '@/assets/wikiData' import {khalaSubsquidClient, phalaSubsquidClient} from '@/config' import useGetApr from '@/hooks/useGetApr' import useSWRValue from '@/hooks/useSWRValue' -import compactFormat from '@/lib/compactFormat' import { useGlobalRewardsSnapshotsConnectionQuery, useGlobalStateQuery, @@ -10,7 +9,7 @@ import { } from '@/lib/subsquidQuery' import {chainAtom} from '@/store/common' import {Skeleton, Stack, Tooltip, useMediaQuery, useTheme} from '@mui/material' -import {useInterval} from '@phala/lib' +import {compactFormat, useInterval} from '@phala/lib' import {toPercentage} from '@phala/util' import {useQuery} from '@tanstack/react-query' import {addDays} from 'date-fns' diff --git a/apps/app/lib/compactFormat.ts b/packages/lib/src/compactFormat.ts similarity index 100% rename from apps/app/lib/compactFormat.ts rename to packages/lib/src/compactFormat.ts diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 3fcdd3eb..1b553644 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -1,3 +1,4 @@ +export {default as compactFormat} from './compactFormat' export * from './signAndSend' export {useConnectPolkadotWallet} from './useConnectPolkadotWallet' export {useInterval} from './useInterval' diff --git a/packages/lib/src/useConnectPolkadotWallet.ts b/packages/lib/src/useConnectPolkadotWallet.ts index ba97fe38..d9c9f7dd 100644 --- a/packages/lib/src/useConnectPolkadotWallet.ts +++ b/packages/lib/src/useConnectPolkadotWallet.ts @@ -1,6 +1,6 @@ import {polkadotAccountsAtom, walletAtom, walletNameAtom} from '@phala/store' import {transformAddress} from '@phala/util' -import {type WalletAccount} from '@talismn/connect-wallets' +import type {WalletAccount} from '@talismn/connect-wallets' import {useAtom} from 'jotai' import {useEffect} from 'react' diff --git a/yarn.lock b/yarn.lock index e06a711c..78379b3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2815,6 +2815,15 @@ __metadata: languageName: node linkType: hard +"@graphql-typed-document-node/core@npm:^3.2.0": + version: 3.2.0 + resolution: "@graphql-typed-document-node/core@npm:3.2.0" + peerDependencies: + graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 + checksum: fa44443accd28c8cf4cb96aaaf39d144a22e8b091b13366843f4e97d19c7bfeaf609ce3c7603a4aeffe385081eaf8ea245d078633a7324c11c5ec4b2011bb76d + languageName: node + linkType: hard + "@humanwhocodes/config-array@npm:^0.11.10": version: 0.11.10 resolution: "@humanwhocodes/config-array@npm:0.11.10" @@ -2899,6 +2908,13 @@ __metadata: languageName: node linkType: hard +"@kurkle/color@npm:^0.3.0": + version: 0.3.2 + resolution: "@kurkle/color@npm:0.3.2" + checksum: 79e97b31f8f6efb28c69d373f94b0c7480226fe8ec95221f518ac998e156444a496727ce47de6d728eb5c3369288e794cba82cae34253deb0d472d3bfe080e49 + languageName: node + linkType: hard + "@mantine/core@npm:^6.0.13": version: 6.0.15 resolution: "@mantine/core@npm:6.0.15" @@ -3468,8 +3484,13 @@ __metadata: "@sveltejs/adapter-static": ^2.0.3 "@sveltejs/kit": ^1.20.4 autoprefixer: ^10.4.14 + chart.js: ^4.3.3 + chartjs-adapter-date-fns: ^3.0.0 + date-fns: ^2.30.0 + graphql-request: ^6.1.0 postcss: ^8.4.27 svelte: ^4.0.5 + svelte-chartjs: ^3.1.2 svelte-check: ^3.4.3 tailwindcss: ^3.3.3 tslib: ^2.4.1 @@ -6999,6 +7020,25 @@ __metadata: languageName: node linkType: hard +"chart.js@npm:^4.3.3": + version: 4.3.3 + resolution: "chart.js@npm:4.3.3" + dependencies: + "@kurkle/color": ^0.3.0 + checksum: 548605fc0a0a64fdc591a41159a2be86c1b408339d6e57b566c04dc157331b003db285a6139801d1700596acde8f0521bc6a156da29388025581619db6600073 + languageName: node + linkType: hard + +"chartjs-adapter-date-fns@npm:^3.0.0": + version: 3.0.0 + resolution: "chartjs-adapter-date-fns@npm:3.0.0" + peerDependencies: + chart.js: ">=2.8.0" + date-fns: ">=2.0.0" + checksum: c39bfdf490749faa589fba6e0dc0a2c5a467a5f06aaa52c5180e10fd9c83414807a064f6950538448bffee354c8064c0ce9d957bccbf2048e7ee2257aa95f138 + languageName: node + linkType: hard + "checkpoint-store@npm:^1.1.0": version: 1.1.0 resolution: "checkpoint-store@npm:1.1.0" @@ -10480,6 +10520,18 @@ __metadata: languageName: node linkType: hard +"graphql-request@npm:^6.1.0": + version: 6.1.0 + resolution: "graphql-request@npm:6.1.0" + dependencies: + "@graphql-typed-document-node/core": ^3.2.0 + cross-fetch: ^3.1.5 + peerDependencies: + graphql: 14 - 16 + checksum: 6d62630a0169574442320651c1f7626c0c602025c3c46b19e09417c9579bb209306ee63de9793a03be2e1701bb7f13971f8545d99bc6573e340f823af0ad35b2 + languageName: node + linkType: hard + "graphql-tag@npm:^2.12.6": version: 2.12.6 resolution: "graphql-tag@npm:2.12.6" @@ -16465,6 +16517,16 @@ __metadata: languageName: node linkType: hard +"svelte-chartjs@npm:^3.1.2": + version: 3.1.2 + resolution: "svelte-chartjs@npm:3.1.2" + peerDependencies: + chart.js: ^3.5.0 || ^4.0.0 + svelte: ^3.45.0 + checksum: a6cdec3c70d42db6ca37cddc40f61f07478a15ea22aee340b3d8696cf2dc84483021b98af6f392a5f63972aaa3af5fc9f09aafd22c846015f6ee1f578080256e + languageName: node + linkType: hard + "svelte-check@npm:^3.4.3": version: 3.4.6 resolution: "svelte-check@npm:3.4.6"