Improved insight charts and consensus details

lib/connect-wallet/config/chains.js

@@ -190,7 +190,7 @@ export const ChainLogos = {
 
 export const ChainAnalyticsColors = {
   DEFAULT: '4E7DD9',
-  43113: '21AD8C',
+  43113: 'E84142',
   84531: '4E7DD9',
   42161: '21AD8C',
   1: '4E7DD9',
@@ -206,6 +206,10 @@ export const ChainColorsRGB = {
   56: '202, 133, 4'
 }
 
+export const getHexColorByChain = (chainId) => {
+  return `#${ChainAnalyticsColors[chainId] || ChainAnalyticsColors.DEFAULT}`
+}
+
 export const explorer = {
   address: {
     56: 'https://bscscan.com/address/%s',

lib/dates.js

@@ -23,7 +23,7 @@ function getMonthsBetweenDates (locale, startDate, endDate) {
   return months
 }
 
-function formatDateByLocale (locale, date, overrides = {}) {
+function formatDateByLocale (locale = 'en', date, overrides = {}) {
   return new Date(date).toLocaleString(locale, { month: 'short', year: '2-digit', ...overrides })
 }
 

src/common/LiquidityForms/ProvideLiquidityForm.jsx

@@ -28,7 +28,6 @@ import { Routes } from '@/src/config/routes'
 import { useAppConstants } from '@/src/context/AppConstants'
 import { useNetwork } from '@/src/context/Network'
 import { useCalculatePods } from '@/src/hooks/useCalculatePods'
-import { useCoverActiveReportings } from '@/src/hooks/useCoverActiveReportings'
 import { useProvideLiquidity } from '@/src/hooks/useProvideLiquidity'
 import {
   convertFromUnits,
@@ -44,6 +43,7 @@ import {
   Trans
 } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
+import { useActiveReportings } from '@/src/hooks/useActiveReportings'
 
 export const ProvideLiquidityForm = ({ coverKey, info, isDiversified, underwrittenProducts }) => {
   const [lqValue, setLqValue] = useState('')
@@ -107,7 +107,7 @@ export const ProvideLiquidityForm = ({ coverKey, info, isDiversified, underwritt
     podAddress: vaultTokenAddress
   })
 
-  const { data: activeReportings } = useCoverActiveReportings({ coverKey })
+  const { data: activeReportings } = useActiveReportings()
 
   const requiredStake = toBN(minStakeToAddLiquidity).minus(myStake).toString()
 
@@ -184,10 +184,12 @@ export const ProvideLiquidityForm = ({ coverKey, info, isDiversified, underwritt
 
   const hasBothAllowances = hasLqTokenAllowance && hasNPMTokenAllowance
 
-  if (activeReportings.length > 0) {
-    const status = activeReportings[0].status
-    const incidentDate = activeReportings[0].incidentDate
-    const productKey = activeReportings[0].productKey
+  // @todo: Instead we could expose `isCoverNormalInternal` from smart contracts
+  const currentCoverActiveIncidents = activeReportings.incidentReports.filter(x => { return x.coverKey === coverKey })
+  if (currentCoverActiveIncidents.length > 0) {
+    const status = 'Reporting' // @todo: Update status to be dynamic from API or smart contracts
+    const incidentDate = currentCoverActiveIncidents[0].incidentDate
+    const productKey = currentCoverActiveIncidents[0].productKey
 
     const statusLink = (
       <Link

src/hooks/useActiveReportings.jsx

@@ -1,61 +1,44 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useNetwork } from '@/src/context/Network'
 import { CARDS_PER_PAGE } from '@/src/config/constants'
-import { useSubgraphFetch } from '@/src/hooks/useSubgraphFetch'
-
-const getQuery = (itemsToSkip) => {
-  return `
-  {
-    incidentReports(
-      skip: ${itemsToSkip}
-      first: ${CARDS_PER_PAGE}
-      orderBy: incidentDate
-      orderDirection: desc
-      where:{
-        finalized: false
-      }
-    ) {
-      id
-      coverKey
-      productKey
-      incidentDate
-      resolutionDeadline
-      resolved
-      finalized
-      status
-      resolutionTimestamp
-    }
-  }
-  `
-}
+import { getActiveIncidents } from '@/src/services/api/consensus/active'
 
 export const useActiveReportings = () => {
   const [data, setData] = useState({ incidentReports: [] })
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [itemsToSkip, setItemsToSkip] = useState(0)
   const [hasMore, setHasMore] = useState(true)
 
   const { networkId } = useNetwork()
-  const fetchActiveReportings = useSubgraphFetch('useActiveReportings')
 
   useEffect(() => {
+    setData({ incidentReports: [] })
+    setItemsToSkip(0)
+    setHasMore(true)
+    setLoading(true)
+  }, [networkId])
+
+  useEffect(() => {
+    let ignore = false
+
     setLoading(true)
 
-    fetchActiveReportings(networkId, getQuery(itemsToSkip))
+    // @ts-ignore
+    getActiveIncidents(networkId, itemsToSkip)
       .then((_data) => {
-        if (!_data) { return }
+        if (ignore || !_data) { return }
 
         const isLastPage =
-          _data.incidentReports.length === 0 ||
-          _data.incidentReports.length < CARDS_PER_PAGE
+          _data.length === 0 ||
+          _data.length < CARDS_PER_PAGE
 
         if (isLastPage) {
           setHasMore(false)
         }
 
         setData((prev) => {
           return {
-            incidentReports: [...prev.incidentReports, ..._data.incidentReports]
+            incidentReports: [...prev.incidentReports, ..._data]
           }
         })
       })
@@ -65,7 +48,11 @@ export const useActiveReportings = () => {
       .finally(() => {
         setLoading(false)
       })
-  }, [fetchActiveReportings, itemsToSkip, networkId])
+
+    return () => {
+      ignore = true
+    }
+  }, [itemsToSkip, networkId])
 
   const handleShowMore = useCallback(() => {
     setItemsToSkip((prev) => { return prev + CARDS_PER_PAGE })

src/hooks/useConsensusInsights.jsx

@@ -5,33 +5,7 @@ import {
 } from 'react'
 
 import { useNetwork } from '@/src/context/Network'
-import { getSubgraphData } from '@/src/services/subgraph'
-
-const getQuery = () => {
-  return `
-  {
-    incidentReports(
-      orderBy: incidentDate
-      orderDirection: desc
-      where:{
-        finalized: false
-      }
-    ) {
-      id
-      coverKey
-      productKey
-      incidentDate
-      resolutionDeadline
-      resolved
-      finalized
-      status
-      resolutionTimestamp
-      totalRefutedStake
-      totalAttestedStake
-    }
-  }
-`
-}
+import { getActiveIncidents } from '@/src/services/api/consensus/active'
 
 export const useConsensusInsights = () => {
   const [data, setData] = useState({
@@ -49,13 +23,13 @@ export const useConsensusInsights = () => {
 
     setLoading(true)
 
-    getSubgraphData(networkId, getQuery())
+    getActiveIncidents(networkId)
       .then((_data) => {
         if (!_data) { return }
 
         setData(() => {
           return {
-            incidentReports: _data.incidentReports
+            incidentReports: _data
           }
         })