Merge pull request #390 from protofire/performance/384-final

Author: leolower

.env.example

@@ -1,4 +1,6 @@
 REACT_APP_GRAPH_NETWORK='Mainnet'
 REACT_APP_GRAPH_HTTP='https://api.thegraph.com/subgraphs/name/protofire/makerdao-governance'
 REACT_APP_MKR_GRAPH_HTTP='https://api.thegraph.com/subgraphs/name/protofire/mkr-registry'
-REACT_APP_ETHERSCAN_API_KEY='XQ2QTEM7H4KX7AQTE9JWXD3HWTTZ46TTU9'
+REACT_APP_ETHERSCAN_API_KEY='XQ2QTEM7H4KX7AQTE9JWXD3HWTTZ46TTU9'
+REACT_APP_LAST_CACHE_UPDATE='1587733935'
+REACT_APP_HOME_DATA_TTL='5' # IN MINUTES

netlify.toml

@@ -12,15 +12,21 @@
   REACT_APP_GRAPH_WS = "wss://api.thegraph.com/subgraphs/name/protofire/makerdao-governance"
   REACT_APP_MKR_GRAPH_HTTP='https://api.thegraph.com/subgraphs/name/protofire/mkr-registry'
   REACT_APP_ETHERSCAN_API_KEY='XQ2QTEM7H4KX7AQTE9JWXD3HWTTZ46TTU9'
+  REACT_APP_LAST_CACHE_UPDATE='1587733935'
+  REACT_APP_HOME_DATA_TTL='5' # IN MINUTES
 
 [context.branch-deploy.environment]
   REACT_APP_GRAPH_HTTP = "https://api.thegraph.com/subgraphs/name/protofire/makerdao-governance"
   REACT_APP_GRAPH_WS = "wss://api.thegraph.com/subgraphs/name/protofire/makerdao-governance"
   REACT_APP_MKR_GRAPH_HTTP='https://api.thegraph.com/subgraphs/name/protofire/mkr-registry'
   REACT_APP_ETHERSCAN_API_KEY='XQ2QTEM7H4KX7AQTE9JWXD3HWTTZ46TTU9'
+  REACT_APP_LAST_CACHE_UPDATE='1587733935'
+  REACT_APP_HOME_DATA_TTL='5' # IN MINUTES
 
 [context.deploy-preview.environment]
-  REACT_APP_GRAPH_HTTP = "https://api.thegraph.com/subgraphs/name/lmcorbalan/makerdao-governance"
-  REACT_APP_GRAPH_WS = "wss://api.thegraph.com/subgraphs/name/lmcorbalan/makerdao-governance"
+  REACT_APP_GRAPH_HTTP = "https://api.thegraph.com/subgraphs/name/protofire/makerdao-governance"
+  REACT_APP_GRAPH_WS = "wss://api.thegraph.com/subgraphs/name/protofire/makerdao-governance"
   REACT_APP_MKR_GRAPH_HTTP='https://api.thegraph.com/subgraphs/name/protofire/mkr-registry'
   REACT_APP_ETHERSCAN_API_KEY='XQ2QTEM7H4KX7AQTE9JWXD3HWTTZ46TTU9'
+  REACT_APP_LAST_CACHE_UPDATE='1587733935'
+  REACT_APP_HOME_DATA_TTL='5' # IN MINUTES

package-lock.json

@@ -30,6 +30,7 @@
     "gray-matter": "^4.0.2",
     "install": "^0.13.0",
     "ipfs-only-hash": "^1.0.2",
+    "localforage": "^1.7.3",
     "lscache": "^1.3.0",
     "match-sorter": "^4.0.2",
     "npm": "^6.11.3",
@@ -46,6 +47,7 @@
     "react-tooltip": "^3.11.1",
     "recharts": "^1.7.1",
     "sanitize.css": "^11.0.0",
+    "save-as-file": "^0.2.0",
     "styled-components": "^4.3.2",
     "subscriptions-transport-ws": "^0.9.16",
     "typescript": "3.6.2"

package.json

@@ -27,7 +27,7 @@ import {
   PageTitle,
   PageSubTitle,
 } from '../common'
-import { getPollsData, getMKRSupply } from '../../utils/makerdao'
+import { getPollsMetaData } from '../../utils/makerdao'
 import { getModalContainer, getPollData, getPollsBalances } from '../../utils'
 import {
   getStakedMkrData,
@@ -50,6 +50,7 @@ import {
   //getActivenessBreakdown,
   getMostVotedPolls,
   getRecentPolls,
+  getMKRResponsiveness,
 } from './helpers'
 import styled from 'styled-components'
 import LinkableComponent from '../common/LinkableComponent'
@@ -72,6 +73,7 @@ const Loading = () => (
 
 const getParticipation = (data, mkrSupply) => {
   const totalMkr: BigNumber = data.reduce((acc, value) => acc.plus(new BigNumber(value.mkr)), new BigNumber('0'))
+
   return totalMkr
     .times(100)
     .div(mkrSupply)
@@ -89,71 +91,75 @@ type Props = {
 }
 
 function HomeDetail(props: Props) {
-  const { data, gData, history, executivesResponsiveness } = props
+  const { data, gData, history } = props
   const { governanceInfo } = gData
   const [isModalOpen, setModalOpen] = useState(false)
-  const cachedDataPoll = lscache.get('home-polls') || []
-  const cachedMkrSupply = lscache.get('mkr-supply') || undefined
-
-  const cachedDataTopVoters = lscache.get('home-topVoters') || []
-  const cachedDataPollsResponsiveness = lscache.get('polls-responsiveness') || []
 
   const [isModalChart, setModalChart] = useState(false)
   const [chartFilters, setChartFilters] = useState(defaultFilters)
-  const [mkrSupply, setMkrSupply] = useState<BigNumber | undefined>(cachedMkrSupply)
-  const [pollsBalances, setBalances] = useState<any>({})
 
   const [modalData, setModalData] = useState({ type: '', component: '' })
-  const [topVoters, setTopVoters] = useState<any[]>(cachedDataTopVoters)
-  const [pollsResponsiveness, setPollsResponsiveness] = useState<any[]>(cachedDataPollsResponsiveness)
-  //const [activenessBreakdown, setActivenessBreakdown] = useState<any>([])
-  // const [mkrActiveness, setMkrActiveness] = useState<any>([])
+
+  const [pollsResponsiveness, setPollsResponsiveness] = useState<any[]>([])
+  const [topVoters, setTopVoters] = useState<any[]>([])
+  const [polls, setPolls] = useState<any[]>([])
   const [mostVotedPolls, setMostVotedPolls] = useState<any>([])
-  const [stakedMkr, setStakedMkr] = useState<any>([])
   const [recentPolls, setRecentPolls] = useState<any>([])
 
-  const [polls, setPolls] = useState<any[]>(cachedDataPoll.length === 0 ? data.polls : cachedDataPoll)
-
   const pollcolumns = expanded => Pollcolumns(expanded)
-  const votedPollcolumns = () => VotedPollcolumns()
-
-  useEffect(() => {
-    if (cachedDataPoll.length === 0) getPollsBalances(polls).then(balances => setBalances(balances))
-    if (cachedDataPollsResponsiveness.length === 0)
-      getPollsMKRResponsiveness(polls).then(responsiveness => setPollsResponsiveness(responsiveness))
-  }, [polls, cachedDataPoll.length, cachedDataPollsResponsiveness.length])
-
-  useEffect(() => {
-    if (!mkrSupply) {
-      getMKRSupply().then(supply => setMkrSupply(supply))
-    }
-  }, [mkrSupply])
-
   const executiveColumns = expanded => Executivecolumns(expanded)
   const topVotersColumns = () => TopVotersColumns()
+  const votedPollcolumns = () => VotedPollcolumns()
   const uncastedExecutiveColumns = () => UncastedExecutivecolumns()
-  //const activenessBreakdownColumns = () => ActivenessBreakdownColumns()
 
-  const executives = data.executives
+  useEffect(() => {
+    if (data && data.polls.length && data.executives.length && data.mkrSupply) {
+      getPollsBalances(data.polls).then(votersSnapshots => {
+        // TODO - improve function naming (snapshots of acctual voting addresses)
+        getPollsMetaData(data.polls).then(polls => {
+          Promise.all(
+            polls.map(poll => {
+              return getPollData(poll, votersSnapshots).then(pollData => {
+                return { ...poll, participation: getParticipation(pollData, data.mkrSupply) }
+              })
+            }),
+          ).then(pollsWithPluralityAndParticipation => {
+            getPollsMKRResponsiveness(polls).then(responsiveness => {
+              // TODO - are all this state needed?
+              setPollsResponsiveness(responsiveness)
+              setPolls(pollsWithPluralityAndParticipation)
+              setTopVoters(getTopVoters(data.executives, pollsWithPluralityAndParticipation))
+              setMostVotedPolls(getMostVotedPolls(pollsWithPluralityAndParticipation))
+              setRecentPolls(getRecentPolls(pollsWithPluralityAndParticipation))
+            })
+          })
+        })
+      })
+    }
+  }, [data])
 
+  //////////////////
+  const [stakedMkr, setStakedMkr] = useState<any>([])
   useEffect(() => {
     setStakedMkr(getStakedMkrData(data, chartFilters.stakedMkr))
   }, [data, chartFilters.stakedMkr])
 
+  const giniData = useMemo(() => getGiniData([...data.free, ...data.lock], chartFilters.gini), [
+    data,
+    chartFilters.gini,
+  ])
+
+  const cachedDataExecutivesResponsiveness = lscache.get('executives-responsiveness') || []
+  const [executivesResponsiveness, setExecutivesResponsiveness] = useState<any>(cachedDataExecutivesResponsiveness)
   useEffect(() => {
-    if (cachedDataTopVoters.length === 0) {
-      setTopVoters(getTopVoters(executives, polls))
+    if (data && data.executives && cachedDataExecutivesResponsiveness.length === 0) {
+      const responsiveness = getMKRResponsiveness(data.executives)
+      lscache.set('executives-responsiveness', responsiveness, DEFAULT_CACHE_TTL)
+      setExecutivesResponsiveness(responsiveness)
     }
-  }, [executives, polls, cachedDataTopVoters.length])
+  }, [data, cachedDataExecutivesResponsiveness.length])
 
-  useEffect(() => {
-    setMostVotedPolls(getMostVotedPolls(polls))
-    setRecentPolls(getRecentPolls(polls))
-  }, [polls])
-  useEffect(() => {
-    //setActivenessBreakdown(getActivenessBreakdown(executives))
-    //setMkrActiveness(getMKRActiveness(executives))
-  }, [executives])
+  /////////////////
 
   const getPoll = row => {
     if (row.id) history.push(`/poll/${row.id}`)
@@ -163,8 +169,6 @@ function HomeDetail(props: Props) {
     if (row.id) history.push(`/executive/${row.id}`)
   }
 
-  // Data map for building this page
-  const giniData = getGiniData([...data.free, ...data.lock], chartFilters.gini)
   const homeMap = {
     table: {
       polls: {
@@ -315,7 +319,7 @@ function HomeDetail(props: Props) {
         ),
       },
       mkrDistributionPerExecutive: {
-        data: getMkrDistributionPerExecutive(executives, governanceInfo ? governanceInfo.hat : null),
+        data: getMkrDistributionPerExecutive(data.executives, governanceInfo ? governanceInfo.hat : null),
         component: props => (
           <MkrDistributionPerExecutive
             expanded
@@ -519,31 +523,6 @@ function HomeDetail(props: Props) {
     setModalData(data)
   }
 
-  useEffect(() => {
-    if (mkrSupply) {
-      getPollsData(data.polls).then(result => {
-        const polls = result.filter(Boolean)
-        setPolls([...polls])
-        Promise.all(
-          polls.map(poll => {
-            return getPollData(poll, pollsBalances).then(data => {
-              return { ...poll, participation: getParticipation(data, mkrSupply) }
-            })
-          }),
-        ).then(pollsWithPluralityAndParticipation => {
-          setPolls(pollsWithPluralityAndParticipation)
-        })
-      })
-    }
-  }, [data.polls, mkrSupply, pollsBalances])
-
-  useEffect(() => {
-    lscache.set('mkr-supply', mkrSupply, DEFAULT_CACHE_TTL)
-    lscache.set('home-polls', polls, DEFAULT_CACHE_TTL)
-    lscache.set('home-topVoters', topVoters, DEFAULT_CACHE_TTL)
-    lscache.set('polls-responsiveness', pollsResponsiveness, DEFAULT_CACHE_TTL)
-  }, [mkrSupply, polls, topVoters, pollsResponsiveness])
-
   return (
     <>
       <PageTitle>System Statistics</PageTitle>

src/components/Home/HomeDetail.tsx

@@ -15,6 +15,7 @@ import {
   timeLeft,
   getPollsBalances,
   getVotersBalance,
+  msToSeconds,
 } from '../../utils'
 import {
   LAST_YEAR,
@@ -91,7 +92,6 @@ export const getStakedMkrData = (data: any, time: string) => {
       mkrEvents.map(events => events.filter(({ timestamp }) => timestamp > period.from && timestamp <= period.to)),
       totalSupply,
     )
-    //console.log(period, totalSupply)
 
     // Calculate total MKR staked/voting in the period
     ;({ totalStaked, totalVoting, voters } = calculateVotingMkr(
@@ -513,8 +513,8 @@ export const getPollsMKRResponsiveness = async polls => {
   const voteEvents = {}
   const days = Math.max(
     ...polls.map(poll => {
-      const start = poll.startDate >= 1e12 ? (poll.startDate / 1e3).toFixed(0) : poll.startDate
-      const end = poll.endDate >= 1e12 ? (poll.endDate / 1e3).toFixed(0) : poll.endDate
+      const start = msToSeconds(poll.startDate)
+      const end = msToSeconds(poll.endDate)
       const diffDays = differenceInDays(fromUnixTime(end), fromUnixTime(start))
 
       return diffDays

src/components/Home/helpers.tsx

@@ -18,7 +18,7 @@ export const Pollcolumns = () => {
       Filter: SelectColumnFilter,
       filter: 'includes',
       accessor: row => (timeLeft(row.endDate) === 'Ended' ? 'Ended' : 'Active'),
-      Cell: ({ row }) => (row.original.fetched ? timeLeft(row.original.endDate) : <Loading />),
+      Cell: ({ row }) => timeLeft(row.original.endDate),
       width: 100,
     },
     {
@@ -80,8 +80,7 @@ export const Pollcolumns = () => {
       disableFilters: true,
       id: 'date',
       sortType: 'datetime',
-      Cell: ({ row }) =>
-        row.original.fetched ? format(fromUnixTime(row.original.startDate), 'dd MMM yy') : <Loading />,
+      Cell: ({ row }) => format(fromUnixTime(row.original.startDate), 'dd MMM yy'),
       width: 100,
     },
     {
@@ -90,7 +89,7 @@ export const Pollcolumns = () => {
       disableFilters: true,
       separator: true,
       sortType: 'datetime',
-      Cell: ({ row }) => (row.original.fetched ? format(fromUnixTime(row.original.endDate), 'dd MMM yy') : <Loading />),
+      Cell: ({ row }) => format(fromUnixTime(row.original.endDate), 'dd MMM yy'),
       width: 100,
     },
   ]