+ {timeFilters.map(({ label, period }, index) => (
setFilter(item)}
+ onClick={() => setFilter({ ...filter, period })}
key={index}
>
- {item}
+ {label}
))}
@@ -179,421 +157,159 @@ function DateFilter({
)
}
-function CalcActiveLocksCount(graphData: any[]) {
- const currentDay = Math.round(new Date().getTime() / 86400000)
- const unlockDailyDatas = graphData
- .map((item) => item.data.unlockDailyDatas)
- .flatMap((data) => data)
- const activeLockList = unlockDailyDatas
- .filter(
- (dailyData) =>
- dailyData.id > currentDay - 30 && dailyData.id <= currentDay
+function NetworkRadioPicker({
+ filter,
+ setFilter,
+}: {
+ filter: IFilter
+ setFilter: (value: IFilter) => void
+}) {
+ const handleOnChange = (selectedChain) => {
+ const updatedSelectedNetworks = filter.selectedNetworks.includes(
+ selectedChain
)
- .map((item) => item.activeLocks)
- .flatMap((data) => data)
- return [...new Set(activeLockList)].length
-}
+ ? filter.selectedNetworks.filter((chain) => chain !== selectedChain)
+ : [...filter.selectedNetworks, selectedChain]
+ setFilter({ ...filter, selectedNetworks: updatedSelectedNetworks })
+ }
-function CalcRenderData(
- graphData: INetworkSubgraph,
- timestampArray: number[],
- flag: 0 | 1 | 2,
- filter: string
-) {
- return timestampArray.map((dayId) => {
- const dayDatas = graphData.unlockDailyDatas.filter(
- (item) => item.id >= dayId - 1 && item.id < dayId
- )
- if (flag === 0)
- return dayDatas.reduce((x, y) => x + Number(y.totalKeysSold), 0)
- if (flag === 1) {
- const lastMonthActiveLocks = graphData.unlockDailyDatas
- .filter((item) => item.id > dayId - 30 && item.id <= dayId)
- .map((item) => item.activeLocks)
- .flatMap((lock) => lock)
- return [...new Set(lastMonthActiveLocks)].length
- }
- if (flag === 2)
- return dayDatas.reduce((x, y) => x + Number(y.totalLockDeployed), 0)
+ const color = Plot.scale({
+ color: {
+ scheme: 'Tableau10',
+ domain: supportedNetworks.map((_, i) => i),
+ },
})
+
+ return (
+
+ {supportedNetworks.map(({ name, chain }, index) => (
+
+ ))}
+
+ )
}
export function State() {
const currentDay = Math.round(new Date().getTime() / 86400000)
- const [subgraphData, setSubgraphData] = useState
([])
- const [filter, setFilter] = useState('7D')
- const [isLoading, setIsLoading] = useState(true)
- const [gnpValues, setGNPValues] = useState([])
- const [overViewData, setOverViewData] = useState([])
- const [selectedNetwork, setSelectedNetwork] = useState('ALL')
- const [selectedNetworkSubgraphData, setSelectedNetworkSubgraphData] =
- useState(undefined)
- const [series, setSeries] = useState([])
- const [xaxis, setXaxis] = useState(undefined)
- const [gnpTotalValueByNetwork, setGnpTotalValueByNetwork] = useState<
- IGNPSum[]
- >([])
- const [gnpPByNetworks, setGNPPByNetworks] = useState([])
-
- useEffect(() => {
- if (selectedNetworkSubgraphData) {
- let xAxisLabels
- let timestampArray
- switch (filter) {
- case '7D': {
- xAxisLabels = [...Array(7).keys()].reverse().map((key) => {
- const cur = new Date()
- return new Date(cur.setDate(cur.getDate() - key)).toLocaleString(
- 'default',
- { dateStyle: 'short' }
- )
- })
- timestampArray = [...Array(7).keys()].reverse().map((key) => {
- const cur = new Date()
- return Math.round(cur.setDate(cur.getDate() - key) / 86400000)
- })
- break
- }
- case '1M': {
- xAxisLabels = [...Array(30).keys()].reverse().map((key) => {
- const cur = new Date()
- return new Date(cur.setDate(cur.getDate() - key)).toLocaleString(
- 'default',
- { dateStyle: 'short' }
- )
- })
- timestampArray = [...Array(30).keys()].reverse().map((key) => {
- const cur = new Date()
- return Math.round(cur.setDate(cur.getDate() - key) / 86400000)
- })
- break
- }
- case '1Y': {
- xAxisLabels = [...Array(12).keys()].reverse().map((key) => {
- const cur = new Date()
- return new Date(cur.setMonth(cur.getMonth() - key)).toLocaleString(
- 'default',
- { dateStyle: 'short' }
- )
- })
- timestampArray = [...Array(12).keys()].reverse().map((key) => {
- const cur = new Date()
- return Math.round(cur.setMonth(cur.getMonth() - key) / 86400000)
- })
- break
- }
- case 'All': {
- xAxisLabels = [...Array(36).keys()].reverse().map((key) => {
- const cur = new Date()
- return new Date(cur.setMonth(cur.getMonth() - key)).toLocaleString(
- 'default',
- { dateStyle: 'short' }
- )
- })
- timestampArray = [...Array(36).keys()].reverse().map((key) => {
- const cur = new Date()
- return Math.round(cur.setMonth(cur.getMonth() - key) / 86400000)
- })
- break
- }
- }
-
- setXaxis({
- categories: xAxisLabels,
- })
- setSeries([
- {
- name: 'Keys (Memberships) Minted',
- data: CalcRenderData(
- selectedNetworkSubgraphData,
- timestampArray,
- 0,
- filter
- ),
- },
- {
- name: 'Active Locks',
- data: CalcRenderData(
- selectedNetworkSubgraphData,
- timestampArray,
- 1,
- filter
- ),
- },
- {
- name: 'Locks Deployed',
- data: CalcRenderData(
- selectedNetworkSubgraphData,
- timestampArray,
- 2,
- filter
- ),
- },
- ])
- }
- }, [selectedNetworkSubgraphData, filter])
+ const [dailyStats, setDailyStats] = useState([])
+ const [lockStats, setLockStats] = useState([])
+ const [filter, setFilter] = useState({
+ period: 1000,
+ selectedNetworks: supportedNetworks.map(({ chain }) => chain),
+ })
+ const [viewFilter, setViewFilter] = useState(views[1])
+ const [filteredData, setFilteredData] = useState([])
+ // get data from all subgraphs
useEffect(() => {
const run = async () => {
- const values = await getGNPs()
- values.sort((a, b) => {
- if (a.total < b.total) return 1
- if (a.total > b.total) return -1
- return 0
- })
- setGNPValues(values)
- setIsLoading(false)
- }
- run()
- }, [])
+ const allData = await Promise.all(
+ supportedNetworks.map(async ({ name, id, chain, subgraphURI }) => {
+ const data = await getSubgraph4GNP(subgraphURI, currentDay - 1000)
+ return {
+ name,
+ id,
+ data,
+ chain,
+ }
+ })
+ )
- useEffect(() => {
- const run = async () => {
- if (selectedNetwork === 'ALL') {
- const subgraphData = await Promise.all(
- Object.keys(networks).map(async (key) => {
- if (!networks[key].isTestNetwork) {
- const { data } = await getSubgraph4GNP(
- networks[key].subgraph.endpoint,
- currentDay - 1030 // why?
- )
- return data
- }
- })
- )
- setSelectedNetworkSubgraphData(
- subgraphData
- .filter((item) => item)
- .reduce(
- (a, b) => ({
- lockStats: {
- totalKeysSold:
- a.lockStats.totalKeysSold +
- parseInt(b.lockStats.totalKeysSold),
- totalLocksDeployed:
- a.lockStats.totalLocksDeployed +
- parseInt(b.lockStats.totalLocksDeployed),
- },
- unlockDailyDatas: [
- ...a.unlockDailyDatas,
- ...b.unlockDailyDatas,
- ],
- }),
+ const dailyStats = allData.reduce(
+ (obj, { data: { unlockDailyDatas }, name, id, chain }) => {
+ unlockDailyDatas.forEach(({ date, ...datum }, i) => {
+ obj = [
+ ...obj,
{
- lockStats: { totalKeysSold: 0, totalLocksDeployed: 0 },
- unlockDailyDatas: [],
- }
- )
- )
- } else {
- const { data } = await getSubgraph4GNP(
- networks[selectedNetwork].subgraph.endpoint,
- currentDay - 1030 // why?
- )
- setSelectedNetworkSubgraphData(data)
- }
- }
- run()
- }, [selectedNetwork, filter, subgraphData, currentDay])
-
- useEffect(() => {
- const gnpPercentageByNetworks = subgraphData.map((networkData) => {
- const sumOfGNP = parseFloat(
- utils.formatUnits(
- BigInt(
- networkData.data.unlockDailyDatas
- .filter(
- (item) =>
- item.id >=
- currentDay -
- (filter === '7D'
- ? 8
- : filter === '1M'
- ? 31
- : filter === '1Y'
- ? 200
- : 10000) && item.id <= currentDay
- )
- .reduce((pv, b) => pv + parseInt(b.grossNetworkProduct), 0)
- ),
- '18'
- )
+ date,
+ name,
+ chain,
+ id,
+ // compute locks per day
+ lockDeployed: i
+ ? datum.totalLockDeployed -
+ unlockDailyDatas[i - 1].totalLockDeployed
+ : 0,
+ // compute keys per day
+ keySold: i
+ ? datum.totalKeysSold - unlockDailyDatas[i - 1].totalKeysSold
+ : 0,
+ ...datum,
+ },
+ ]
+ })
+ return obj
+ },
+ []
)
- return {
- name: networkData.name,
- gnpPercentage:
- sumOfGNP /
- gnpTotalValueByNetwork.find((item) => item.name === networkData.name)
- ?.gnpSum,
- }
- })
- setGNPPByNetworks(gnpPercentageByNetworks)
- }, [filter, currentDay, subgraphData, gnpTotalValueByNetwork])
+ setDailyStats(dailyStats)
- useEffect(() => {
- const run = async () => {
- const subgraphData = await Promise.all(
- Object.keys(networks).map(async (key) => {
- if (!networks[key].isTestNetwork) {
- const { data } = await getSubgraph4GNP(
- networks[key].subgraph.endpoint,
- currentDay - 1030 // why?
- )
- return { name: networks[key].name, data }
- }
+ const lockStats = allData.map(
+ ({ data: { lockStats, unlockDailyDatas }, name, id }) => ({
+ name,
+ id,
+ ...lockStats,
+ activeLocks: unlockDailyDatas
+ .filter(({ date }) => isWithin(date, 30)) // last 30 days
+ .map(({ activeLocks }) => activeLocks)
+ .reduce((pv, a) => pv + a, 0),
})
)
- setSubgraphData(subgraphData.filter((item) => item && item.data))
+ setLockStats(lockStats)
}
run()
}, [currentDay])
+ // filter data properly
useEffect(() => {
- if (subgraphData !== undefined && subgraphData.length > 0) {
- const overview_contents: IOverView[] = [
- {
- value: subgraphData.reduce(
- (pv, b) => pv + parseInt(b?.data?.lockStats?.totalLocksDeployed),
- 0
- ),
- title: 'Total of Locks Deployed',
- description: 'All Time, production networks only',
- Icon: Lock,
- },
- {
- value: subgraphData.reduce(
- (pv, b) => pv + parseInt(b?.data?.lockStats?.totalKeysSold),
- 0
- ),
- title: 'Total of Keys Sold',
- description: 'All Time, production networks only',
- Icon: Key,
- },
- {
- value: CalcActiveLocksCount(subgraphData),
- title: 'Active Locks',
- description: 'Minted at least 1 membership in the last 30 days',
- Icon: ActiveLock,
- },
- ]
- const gnpDataByNetworks = subgraphData.map((networkData) => ({
- name: networkData.name,
- gnpSum: parseFloat(
- utils.formatUnits(
- BigInt(
- networkData.data.unlockDailyDatas.reduce(
- (pv, b) => pv + parseInt(b.grossNetworkProduct),
- 0
- )
- ),
- '18'
- )
- ),
- }))
- setOverViewData(overview_contents)
- setGnpTotalValueByNetwork(gnpDataByNetworks)
- }
- }, [subgraphData])
+ setFilteredData(filterData({ filter, dailyStats }))
+ }, [filter, dailyStats])
return (
State of Unlock
-
-
-
Overview
-
- {overViewData &&
- overViewData.map(
- ({ value, title, description, Icon }, index) => (
-
-
- {numeral(value).format('0,0')}
-
-
- {title}
-
-
- {description}
-
-
-
- )
- )}
-
-
-
-
Activity over time
-
-
-
-
-
-
-
-
- Gross Network Product
-
- {!isLoading && (
-
- {gnpValues
- .filter((item) => !item.network.isTestNetwork)
- .map(({ total, network }, index) => (
-
-
-
-
-
-
- {numeral(total).format('0,0.000')}{' '}
-
-
- {network.nativeCurrency.symbol}
-
-
-
- ))}
-
- )}
-
+
+
+
+
+
+
+ Activity over time
+
+
+
+
+ {filteredData.length && (
+
+ )}
+
+
+
+
+
+
+ Gross Network Product
+
+
diff --git a/unlock-protocol-com/src/components/pages/State/sections/chart.tsx b/unlock-protocol-com/src/components/pages/State/sections/chart.tsx
new file mode 100644
index 00000000000..66dd63d5bda
--- /dev/null
+++ b/unlock-protocol-com/src/components/pages/State/sections/chart.tsx
@@ -0,0 +1,60 @@
+import React, { useRef, useEffect } from 'react'
+import * as Plot from '@observablehq/plot'
+
+export function HistoricalChart({
+ dailyStats,
+ filter,
+ supportedNetworks,
+ viewFilter,
+}) {
+ const ref = useRef
()
+ useEffect(() => {
+ const barChart = Plot.plot({
+ width: 1200,
+ height: 500,
+ marginLeft: 50,
+ marginTop: 50,
+ marginBottom: 50,
+ y: {
+ grid: true,
+ axis: 'left',
+ label: `${viewFilter.label}`,
+ },
+ color: {
+ type: 'categorical',
+ scheme: 'Tableau10',
+ legend: false,
+ domain: supportedNetworks.map(({ name }) => name),
+ label: 'Networks',
+ },
+ marks: [
+ // locks deployed
+ Plot.rectY(
+ dailyStats,
+ Plot.binX(
+ {
+ y: 'sum',
+ },
+ {
+ x: 'date',
+ y: viewFilter.value,
+ fill: 'name',
+ interval: filter.period <= 365 ? 'day' : 'week',
+ tip: 'x',
+ cumulative: viewFilter.cumulative,
+ }
+ )
+ ),
+ ],
+ })
+
+ ref.current?.append(barChart)
+ return () => barChart.remove()
+ }, [dailyStats, viewFilter, filter.period, supportedNetworks])
+
+ return (
+
+ )
+}
diff --git a/unlock-protocol-com/src/components/pages/State/sections/gnp.tsx b/unlock-protocol-com/src/components/pages/State/sections/gnp.tsx
new file mode 100644
index 00000000000..abdbeb5c3eb
--- /dev/null
+++ b/unlock-protocol-com/src/components/pages/State/sections/gnp.tsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react'
+
+import numeral from 'numeral'
+import { CryptoIcon } from '@unlock-protocol/crypto-icon'
+import { getGNPs } from '../../../../utils/apiRequest'
+
+interface IGNP {
+ chain: string
+ isTestNetwork: boolean
+ total: number
+ name: string
+ nativeCurrencySymbol: string
+}
+
+export function GNP() {
+ const [gnpValues, setGNPValues] = useState([])
+
+ useEffect(() => {
+ const run = async () => {
+ const values = await getGNPs()
+ values.sort((a, b) => {
+ if (a.total < b.total) return 1
+ if (a.total > b.total) return -1
+ return 0
+ })
+ setGNPValues(values)
+ }
+ run()
+ }, [])
+
+ return (
+
+ {gnpValues
+ .filter(({ isTestNetwork }) => !isTestNetwork)
+ .map(({ total, name, nativeCurrencySymbol }, index) => (
+
+
+
+
+
+
+ {numeral(total).format('0,0.000')}{' '}
+
+
+ {nativeCurrencySymbol}
+
+
+
+ ))}
+
+ {overViewData &&
+ overViewData.map(({ value, title, description, Icon }, index) => (
+
+
+ {numeral(value).format('0,0')}
+
+
+ {title}
+
+
+ {description}
+
+
+
+ ))}
+