Merge pull request #189 from scrtlabs/weekly-contract-usage

Add weekly contract usage
scrtlabs · Nov 13, 2024 · 6c9f365 · 6c9f365
2 parents dfd1c4a + 53eef2d
commit 6c9f365
Show file tree

Hide file tree

Showing 10 changed files with 271 additions and 85 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@keplr-wallet/types": "^0.12.43",
-    "@types/mixpanel-browser": "^2.38.1",
+    "@types/mixpanel-browser": "^2.50.2",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.3.1",
     "husky": "^9.1.6",

diff --git a/src/context/APIContext.tsx b/src/context/APIContext.tsx
@@ -4,7 +4,7 @@ import { SecretNetworkClient } from 'secretjs'
 import { useUserPreferencesStore } from 'store/UserPreferences'
 import { Currency } from 'types/Currency'
 import { Nullable } from 'types/Nullable'
-import { allTokens, coinGeckoCurrencyMap, sortDAppsArray } from 'utils/commons'
+import { allTokens, bech32PrefixToChainName, coinGeckoCurrencyMap, sortDAppsArray } from 'utils/commons'
 import { SECRET_LCD, SECRET_CHAIN_ID } from 'utils/config'
 
 const APIContext = createContext(null)
@@ -125,6 +125,7 @@ const APIContextProvider = ({ children }: any) => {
   const [analyticsData2, setAnalyticsData2] = useState()
   const [analyticsData3, setAnalyticsData3] = useState()
   const [analyticsData4, setAnalyticsData4] = useState()
+  const [analyticsData5, setAnalyticsData5] = useState()
   const [L5AnalyticsApiData, setL5AnalyticsApiData] = useState()
   const [volume, setVolume] = useState(Number)
   const [marketCap, setMarketCap] = useState(Number)
@@ -231,7 +232,25 @@ const APIContextProvider = ({ children }: any) => {
       .then((response) => (response as any).json())
       .catch((error: any) => console.error(error))
       .then((response) => {
-        setAnalyticsData4(response)
+        const filteredData = response
+          .filter((entry: any) => entry.IBC_Counterpart !== null && entry.IBC_Counterpart !== 'secret')
+          .map((entry: any) => {
+            const chainName = bech32PrefixToChainName.get(entry.IBC_Counterpart) || entry.IBC_Counterpart
+            return {
+              ...entry,
+              IBC_Counterpart: chainName
+            }
+          })
+        setAnalyticsData4(filteredData)
+      })
+
+    const API_DATA_SECRET_5 = `https://dashboardstats.secretsaturn.net/source/weekly_contract_usage_stats/data.json`
+    fetch(API_DATA_SECRET_5)
+      .catch((error: any) => console.error(error))
+      .then((response) => (response as any).json())
+      .catch((error: any) => console.error(error))
+      .then((response) => {
+        setAnalyticsData5(response)
       })
 
     const LAVENDERFIVE_API_URL_SECRET_STATUS = `https://api.lavenderfive.com/networks/secretnetwork`
@@ -396,6 +415,7 @@ const APIContextProvider = ({ children }: any) => {
     analyticsData2,
     analyticsData3,
     analyticsData4,
+    analyticsData5,
     L5AnalyticsApiData,
     bondedToken,
     notBondedToken,

diff --git a/src/pages/analytics/Analytics.tsx b/src/pages/analytics/Analytics.tsx
@@ -11,9 +11,11 @@ import RelayerChartWithDateSlider from './components/RelayerChartWithDateSlider'
 import RelayerChartWithChainSlider from './components/RelayerChartWithChainSlider'
 import RelayerChartWithProviderSlider from './components/RelayerChartWithProviderSlider'
 import RelayerChartTotal from './components/RelayerChartTotal'
+import WeeklyContractsChart from './components/WeeklyContractsChart'
 
 function Analytics() {
-  const { L5AnalyticsApiData, analyticsData1, analyticsData2, analyticsData3, analyticsData4 } = useContext(APIContext)
+  const { L5AnalyticsApiData, analyticsData1, analyticsData2, analyticsData3, analyticsData4, analyticsData5 } =
+    useContext(APIContext)
 
   useEffect(() => {
     trackMixPanelEvent('Open Analytics Tab')
@@ -65,6 +67,13 @@ function Analytics() {
               </div>
             </>
           ) : null}
+          {analyticsData5 ? (
+            <>
+              <div className="col-span-12 rounded-xl bg-white border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800 p-4">
+                <WeeklyContractsChart />
+              </div>
+            </>
+          ) : null}
           {analyticsData4 ? (
             <>
               <div className="col-span-12 rounded-xl bg-white border border-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">

diff --git a/src/pages/analytics/components/RelayerChartTotal.tsx b/src/pages/analytics/components/RelayerChartTotal.tsx
@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react'
-import { bech32PrefixToChainName, formatNumber } from 'utils/commons'
+import { formatNumber } from 'utils/commons'
 import Tooltip from '@mui/material/Tooltip'
 import {
   Chart as ChartJS,
@@ -18,13 +18,6 @@ import { APIContext } from 'context/APIContext'
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, ChartTooltip, Legend, BarController)
 
-type Entry = {
-  Date: string
-  IBC_Counterpart: string
-  Relayer: string
-  Transactions: number
-}
-
 export default function RelayerChartTotal() {
   const { theme } = useUserPreferencesStore()
   const { analyticsData4 } = useContext(APIContext)
@@ -35,12 +28,8 @@ export default function RelayerChartTotal() {
     const datesSet = new Set<string>()
     const dataMatrix: Record<string, number[]> = {}
 
-    const filteredData = analyticsData4.filter(
-      (entry: Entry) => entry.IBC_Counterpart !== null && entry.IBC_Counterpart !== 'secret'
-    )
-
     // Collect and sort dates
-    for (const entry of filteredData) {
+    for (const entry of analyticsData4) {
       const date = new Date(entry.Date).toISOString().split('T')[0]
       datesSet.add(date)
     }
@@ -56,13 +45,11 @@ export default function RelayerChartTotal() {
     )
 
     // Process entries and populate dataMatrix
-    for (const entry of filteredData) {
+    for (const entry of analyticsData4) {
       const date = new Date(entry.Date).toISOString().split('T')[0]
       const dateIndex = dateIndexMap[date]
 
-      const label = `${bech32PrefixToChainName.get(entry.IBC_Counterpart) || entry.IBC_Counterpart} - ${
-        entry.Relayer || 'Other'
-      }`
+      const label = `${entry.IBC_Counterpart} - ${entry.Relayer || 'Other'}`
 
       // Initialize dataMatrix[label] if it doesn't exist
       if (!dataMatrix[label]) {

diff --git a/src/pages/analytics/components/RelayerChartWithChainSlider.tsx b/src/pages/analytics/components/RelayerChartWithChainSlider.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from 'react'
-import { bech32PrefixToChainName, formatNumber } from 'utils/commons'
+import { formatNumber } from 'utils/commons'
 import Tooltip from '@mui/material/Tooltip'
 import Slider from '@mui/material/Slider'
 import {
@@ -57,10 +57,10 @@ export default function RelayerChartWithChainSlider() {
     }
 
     // Sort dates
-    const sortedDates = Array.from(datesSet).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
+    const sortedDates = Array.from(datesSet).sort()
 
     // Sort relayers
-    const sortedRelayers = Array.from(relayersSet).sort((a, b) => a.localeCompare(b))
+    const sortedRelayers = Array.from(relayersSet).sort()
 
     // Create datasets for each relayer
     const datasets = sortedRelayers.map((relayer) => {
@@ -84,16 +84,12 @@ export default function RelayerChartWithChainSlider() {
     // Process data grouped by chain
     const chainMap: Record<string, Entry[]> = {}
 
-    analyticsData4
-      .filter((entry: Entry) => entry.IBC_Counterpart !== null && entry.IBC_Counterpart !== 'secret')
-      .forEach((entry: Entry) => {
-        const chainBech32Prefix = entry.IBC_Counterpart
-        const chainName = bech32PrefixToChainName.get(chainBech32Prefix) || chainBech32Prefix
-        chainMap[chainName] ||= []
-        chainMap[chainName].push(entry)
-      })
+    analyticsData4.forEach((entry: Entry) => {
+      chainMap[entry.IBC_Counterpart] ||= []
+      chainMap[entry.IBC_Counterpart].push(entry)
+    })
 
-    const sortedChains = Object.keys(chainMap).sort((a, b) => a.localeCompare(b))
+    const sortedChains = Object.keys(chainMap).sort()
     setChainLabels(sortedChains)
     setChainMap(chainMap)
 

diff --git a/src/pages/analytics/components/RelayerChartWithDateSlider.tsx b/src/pages/analytics/components/RelayerChartWithDateSlider.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from 'react'
-import { bech32PrefixToChainName, formatNumber } from 'utils/commons'
+import { formatNumber } from 'utils/commons'
 import Tooltip from '@mui/material/Tooltip'
 import Slider from '@mui/material/Slider'
 import {
@@ -37,13 +37,11 @@ export default function RelayerChartWithDateSlider() {
     // Process data grouped by date
     const dateMap: Record<string, Entry[]> = {}
 
-    analyticsData4
-      .filter((entry: Entry) => entry.IBC_Counterpart !== null && entry.IBC_Counterpart !== 'secret')
-      .forEach((entry: Entry) => {
-        const date = new Date(entry.Date).toISOString().split('T')[0]
-        dateMap[date] ||= []
-        dateMap[date].push(entry)
-      })
+    analyticsData4.forEach((entry: Entry) => {
+      const date = new Date(entry.Date).toISOString().split('T')[0]
+      dateMap[date] ||= []
+      dateMap[date].push(entry)
+    })
 
     const sortedDates = Object.keys(dateMap).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
     setDates(sortedDates)
@@ -77,23 +75,13 @@ export default function RelayerChartWithDateSlider() {
       chainMap.set(chainBech32Prefix, (chainMap.get(chainBech32Prefix) || 0) + entry.Transactions)
     }
 
-    // Prepare an array of { prefix, label } pairs
-    const prefixLabelPairs = Array.from(chainsSet).map((prefix) => ({
-      prefix,
-      label: bech32PrefixToChainName.get(prefix) || prefix
-    }))
-
-    // Sort prefixLabelPairs by label alphabetically
-    prefixLabelPairs.sort((a, b) => a.label.localeCompare(b.label))
-
-    // Extract the sorted bech32Prefixes and labels
-    const sortedBech32Prefixes = prefixLabelPairs.map((pair) => pair.prefix)
-    const labels = prefixLabelPairs.map((pair) => pair.label)
+    // Sort the prefixes alphabetically and use them as labels
+    const labels = Array.from(chainsSet).sort()
 
     // Create datasets for each relayer
     const datasets = Array.from(relayersSet).map((relayer) => {
       const chainMap = dataMatrix.get(relayer)!
-      const data = sortedBech32Prefixes.map((prefix) => chainMap.get(prefix) || 0)
+      const data = labels.map((prefix) => chainMap.get(prefix) || 0)
       return {
         label: relayer,
         data,

diff --git a/src/pages/analytics/components/RelayerChartWithProviderSlider.tsx b/src/pages/analytics/components/RelayerChartWithProviderSlider.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from 'react'
-import { bech32PrefixToChainName, formatNumber } from 'utils/commons'
+import { formatNumber } from 'utils/commons'
 import Tooltip from '@mui/material/Tooltip'
 import Slider from '@mui/material/Slider'
 import {
@@ -38,15 +38,13 @@ export default function RelayerChartWithProviderSlider() {
     // Process data grouped by relayer
     const relayerMap: Record<string, Entry[]> = {}
 
-    analyticsData4
-      .filter((entry: Entry) => entry.IBC_Counterpart !== null && entry.IBC_Counterpart !== 'secret')
-      .forEach((entry: Entry) => {
-        const relayer = entry.Relayer || 'Other'
-        relayerMap[relayer] ||= []
-        relayerMap[relayer].push(entry)
-      })
+    analyticsData4.forEach((entry: Entry) => {
+      const relayer = entry.Relayer || 'Other'
+      relayerMap[relayer] ||= []
+      relayerMap[relayer].push(entry)
+    })
 
-    const sortedRelayers = Object.keys(relayerMap).sort((a, b) => a.localeCompare(b))
+    const sortedRelayers = Object.keys(relayerMap).sort()
     setRelayers(sortedRelayers)
 
     // Calculate total transactions per relayer
@@ -59,7 +57,7 @@ export default function RelayerChartWithProviderSlider() {
     const maxTotal = Math.max(...Object.values(relayerTotals))
     const topRelayers = Object.keys(relayerTotals).filter((relayer) => relayerTotals[relayer] === maxTotal)
     // If multiple relayers have the same max total, choose the first one alphabetically
-    const defaultRelayer = topRelayers.sort((a, b) => a.localeCompare(b))[0]
+    const defaultRelayer = topRelayers.sort()[0]
 
     // Find the index of the default relayer
     const defaultIndex = sortedRelayers.indexOf(defaultRelayer)
@@ -104,30 +102,18 @@ export default function RelayerChartWithProviderSlider() {
       dateMap.set(date, (dateMap.get(date) || 0) + entry.Transactions)
     }
 
-    // Sort dates
+    // Sort dates and chains
     const sortedDates = Array.from(datesSet).sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
-
-    // Prepare an array of { prefix, label } pairs for chains
-    const prefixLabelPairs = Array.from(chainsSet).map((prefix) => ({
-      prefix,
-      label: bech32PrefixToChainName.get(prefix) || prefix
-    }))
-
-    // Sort prefixLabelPairs by label alphabetically
-    prefixLabelPairs.sort((a, b) => a.label.localeCompare(b.label))
-
-    // Extract the sorted bech32Prefixes and labels
-    const sortedBech32Prefixes = prefixLabelPairs.map((pair) => pair.prefix)
-    const chainLabels = prefixLabelPairs.map((pair) => pair.label)
+    const sortedChains = Array.from(chainsSet).sort((a, b) => a.localeCompare(b))
 
     // Create datasets for each chain
-    const datasets = sortedBech32Prefixes.map((chainPrefix, index) => {
+    const datasets = sortedChains.map((chainPrefix) => {
       const dateMap = dataMatrix.get(chainPrefix)!
       const data = sortedDates.map((date) => dateMap.get(date) || 0)
       return {
-        label: chainLabels[index],
+        label: chainPrefix,
         data,
-        backgroundColor: getColorFromChain(chainLabels[index])
+        backgroundColor: getColorFromChain(chainPrefix)
       }
     })