feat: new contract views and charts

Author: epiqueras

.env

@@ -1,4 +1,4 @@
-REACT_APP_KLEROS_LIQUID_KOVAN_ADDRESS=0xa80116b49125f8a7466e995d46a4abdb0d98a199
-REACT_APP_PINAKION_KOVAN_ADDRESS=0x35c3F474d9d1B72D918b556F92ba934EA30E559D
+REACT_APP_KLEROS_LIQUID_KOVAN_ADDRESS=0x5f34bd5da181189f897f41ae1dae3ea108d85b91
+REACT_APP_PINAKION_KOVAN_ADDRESS=0x1ee318dbc19267dbce08f54a66ab198f73ede356
 REACT_APP_POLICY_REGISTRY_KOVAN_ADDRESS=0x55aa06760990a6418a89d2177de367fe1cb5c3cb
 REACT_APP_WEB3_FALLBACK_URL=wss://mainnet.infura.io/ws

src/components/eth-amount.js

@@ -22,7 +22,11 @@ const ETHAmount = ({ amount }) => {
 }
 
 ETHAmount.propTypes = {
-  amount: PropTypes.string
+  amount: PropTypes.oneOfType([
+    PropTypes.string.isRequired,
+    PropTypes.number.isRequired,
+    PropTypes.object.isRequired
+  ])
 }
 
 ETHAmount.defaultProps = {

src/components/pie-chart.js

@@ -4,8 +4,16 @@ import ReactMinimalPieChart from 'react-minimal-pie-chart'
 import styled from 'styled-components/macro'
 
 const StyledDiv = styled.div`
+  padding: 65px 45px 45px;
   position: relative;
 `
+const StyledTitleDiv = styled.div`
+  font-weight: medium;
+  left: 50%;
+  position: absolute;
+  top: 20px;
+  transform: translateX(-50%);
+`
 const StyledTooltipDiv = styled.div.attrs(({ x, y }) => ({
   style: { left: `${x}px`, top: `${y - 60}px` }
 }))`
@@ -15,8 +23,9 @@ const StyledTooltipDiv = styled.div.attrs(({ x, y }) => ({
   padding: 10px 8px;
   position: absolute;
   white-space: nowrap;
+  z-index: 1;
 `
-const PieChart = ({ data }) => {
+const PieChart = ({ data, title }) => {
   const [state, setState] = useState({ dataIndex: null, x: null, y: null })
   const onMouseMove = useCallback(event => {
     const bounds = event.currentTarget.getBoundingClientRect()
@@ -35,6 +44,7 @@ const PieChart = ({ data }) => {
   const inPie = state.dataIndex !== null
   return (
     <StyledDiv onMouseMove={inPie ? onMouseMove : undefined}>
+      <StyledTitleDiv>{title}</StyledTitleDiv>
       <ReactMinimalPieChart
         className="ReactMinimalPieChart"
         data={data}
@@ -61,7 +71,8 @@ PieChart.propTypes = {
       tooltip: PropTypes.node.isRequired,
       value: PropTypes.number.isRequired
     }).isRequired
-  ).isRequired
+  ).isRequired,
+  title: PropTypes.node.isRequired
 }
 
 export default PieChart

src/components/pnk-stats-list-card.js

@@ -7,14 +7,18 @@ import styled from 'styled-components/macro'
 import { useDataloader } from '../bootstrap/dataloader'
 import { useDrizzle } from '../temp/drizzle-react-hooks'
 
+const loadingPieChartData = [{ tooltip: 'Loading...', value: 1 }]
+const StyledDiv = styled.div`
+  display: flex;
+`
 const StyledAmountSpan = styled.span`
   font-weight: bold;
 `
 const StyledTitleSpan = styled.span`
   font-style: italic;
 `
 const PNKStatsListCard = () => {
-  const { cacheCall, drizzleState } = useDrizzle()
+  const { cacheCall, drizzle, drizzleState, useCacheEvents } = useDrizzle()
   const load = useDataloader()
   const subcourtIDs = cacheCall(
     'KlerosLiquid',
@@ -38,28 +42,104 @@ const PNKStatsListCard = () => {
       }
       return subcourt
     })
-  const loading = !subcourts || subcourts.some(s => s.stake === undefined)
+  const loadingSubcourts =
+    !subcourts || subcourts.some(s => s.stake === undefined)
+  const draws = useCacheEvents(
+    'KlerosLiquid',
+    'Draw',
+    useMemo(
+      () => ({
+        filter: { _address: drizzleState.accounts[0] },
+        fromBlock: 0
+      }),
+      [drizzleState.accounts[0]]
+    )
+  )
+  const disputes = draws
+    ? draws.reduce(
+        (acc, d) => {
+          if (acc.atStakePerVoteByID[d.returnValues._disputeID] === undefined) {
+            acc.atStakePerVoteByID[d.returnValues._disputeID] = null
+            const dispute = cacheCall(
+              'KlerosLiquid',
+              'disputes',
+              d.returnValues._disputeID
+            )
+            const dispute2 = cacheCall(
+              'KlerosLiquid',
+              'getDispute',
+              d.returnValues._disputeID
+            )
+            if (dispute && dispute2) {
+              if (!dispute.period !== '4') {
+                acc.atStakePerVoteByID[
+                  d.returnValues._disputeID
+                ] = drizzle.web3.utils.toBN(
+                  dispute2.jurorAtStake[dispute2.jurorAtStake.length - 1]
+                )
+                acc.atStakeByID[
+                  d.returnValues._disputeID
+                ] = drizzle.web3.utils.toBN(0)
+              }
+            } else acc.loading = true
+          }
+          if (acc.atStakePerVoteByID[d.returnValues._disputeID] !== null)
+            acc.atStakeByID[d.returnValues._disputeID] = acc.atStakeByID[
+              d.returnValues._disputeID
+            ].add(acc.atStakePerVoteByID[d.returnValues._disputeID])
+          return acc
+        },
+        {
+          atStakeByID: {},
+          atStakePerVoteByID: {},
+          loading: false
+        }
+      )
+    : { loading: true }
   return (
-    <TitledListCard loading={loading} prefix="PNK" title="Stats">
-      {!loading && (
-        <PieChart
-          data={useMemo(
-            () =>
-              subcourts.map(s => ({
-                tooltip: (
-                  <Spin spinning={s.name === undefined}>
-                    <StyledAmountSpan>
-                      <ETHAmount amount={s.stake} /> PNK
-                    </StyledAmountSpan>
-                    <StyledTitleSpan> - {s.name || '...'}</StyledTitleSpan>
-                  </Spin>
-                ),
-                value: Number(s.stake)
-              })),
-            [...subcourts.map(s => s.stake), ...subcourts.map(s => s.name)]
-          )}
-        />
-      )}
+    <TitledListCard prefix="PNK" title="Stats">
+      <StyledDiv>
+        <Spin spinning={loadingSubcourts}>
+          <PieChart
+            data={
+              loadingSubcourts
+                ? loadingPieChartData
+                : subcourts.map(s => ({
+                    tooltip: (
+                      <Spin spinning={s.name === undefined}>
+                        <StyledAmountSpan>
+                          <ETHAmount amount={s.stake} /> PNK
+                        </StyledAmountSpan>
+                        <StyledTitleSpan> - {s.name || '...'}</StyledTitleSpan>
+                      </Spin>
+                    ),
+                    value: Number(s.stake)
+                  }))
+            }
+            title="Staked Tokens"
+          />
+        </Spin>
+        <Spin spinning={disputes.loading}>
+          <PieChart
+            data={
+              disputes.loading
+                ? loadingPieChartData
+                : Object.entries(disputes.atStakeByID).map(s => ({
+                    tooltip: (
+                      <>
+                        <StyledAmountSpan>
+                          <ETHAmount amount={s[1]} /> PNK
+                        </StyledAmountSpan>
+                        <StyledTitleSpan> - Case {s[0]}</StyledTitleSpan>
+                      </>
+                    ),
+                    value: Number(s[1])
+                  }))
+            }
+            title="Locked Tokens"
+          />
+        </Spin>
+      </StyledDiv>
     </TitledListCard>
   )
 }