feat(courts): populate with real data and build loading logic

src/components/court-card.js

@@ -1,9 +1,12 @@
 import { Button, Card } from 'antd'
 import React, { useMemo } from 'react'
+import { useDrizzle, useDrizzleState } from '../temp/drizzle-react-hooks'
 import { ReactComponent as Close } from '../assets/images/close.svg'
+import ETHAmount from './eth-amount'
 import { ReactComponent as Hexagon } from '../assets/images/hexagon.svg'
 import PropTypes from 'prop-types'
 import styled from 'styled-components/macro'
+import { useDataloader } from '../bootstrap/dataloader'
 
 const StyledCard = styled(Card)`
   margin: 20px 0;
@@ -38,7 +41,24 @@ const StyledAmountDiv = styled.div`
   font-weight: bold;
 `
 const CourtCard = ({ ID }) => {
-  console.log(ID)
+  const { cacheCall } = useDrizzle()
+  const drizzleState = useDrizzleState(drizzleState => ({
+    accounts: drizzleState.accounts
+  }))
+  const load = useDataloader()
+  let name
+  const policy = cacheCall('PolicyRegistry', 'policies', ID)
+  if (policy) {
+    const policyJSON = load(policy.fileURI)
+    if (policyJSON) name = policyJSON.name
+  }
+  const stake = cacheCall(
+    'KlerosLiquid',
+    'stakeOf',
+    drizzleState.accounts[0],
+    ID
+  )
+  const subcourt = cacheCall('KlerosLiquid', 'courts', ID)
   return (
     <StyledCard
       actions={useMemo(
@@ -52,30 +72,46 @@ const CourtCard = ({ ID }) => {
       )}
       extra={<Close />}
       hoverable
-      loading={false}
-      title="Air Transport"
+      loading={name === undefined}
+      title={name}
     >
       <StyledCardGrid>
         <Hexagon className="ternary-fill" />
         <StyledDiv>
-          <StyledAmountDiv>0</StyledAmountDiv>PNK
+          <StyledAmountDiv>
+            <ETHAmount amount={stake} />
+          </StyledAmountDiv>
+          PNK
         </StyledDiv>
       </StyledCardGrid>
       <StyledCardGrid>
-        Min Stake<StyledAmountDiv>350 PNK</StyledAmountDiv>
+        Min Stake
+        <StyledAmountDiv>
+          <ETHAmount amount={subcourt && subcourt.minStake} /> PNK
+        </StyledAmountDiv>
       </StyledCardGrid>
       <StyledCardGrid>
-        Coherence Reward<StyledAmountDiv>0.01 ETH +</StyledAmountDiv>
+        Coherence Reward
+        <StyledAmountDiv>
+          <ETHAmount amount={subcourt && subcourt.jurorFee} decimals={2} /> ETH
+          +
+        </StyledAmountDiv>
       </StyledCardGrid>
       <StyledCardGrid>
-        Stake Locked Per Vote<StyledAmountDiv>200 PNK</StyledAmountDiv>
+        Stake Locked/Vote
+        <StyledAmountDiv>
+          <ETHAmount
+            amount={subcourt && (subcourt.minStake * subcourt.alpha) / 10000}
+          />{' '}
+          PNK
+        </StyledAmountDiv>
       </StyledCardGrid>
     </StyledCard>
   )
 }
 
 CourtCard.propTypes = {
-  ID: PropTypes.number.isRequired
+  ID: PropTypes.string.isRequired
 }
 
 export default CourtCard

src/components/courts-list-card.js

@@ -30,7 +30,7 @@ const CourtsListCard = () => {
       }
       return undefined
     })
-  const loading = !names || names.some(n => !n)
+  const loading = !names || names.some(n => n === undefined)
   return (
     <TitledListCard
       loading={loading}

src/components/eth-amount.js

@@ -4,7 +4,7 @@ import { Skeleton } from 'antd'
 import styled from 'styled-components/macro'
 import { useDrizzle } from '../temp/drizzle-react-hooks'
 
-const SkeletonTitleProps = { width: 45 }
+const SkeletonTitleProps = { width: 30 }
 const StyledSkeleton = styled(Skeleton)`
   display: inline;
 
@@ -17,7 +17,11 @@ const ETHAmount = ({ amount, decimals }) => {
   return amount === null ? (
     <StyledSkeleton active paragraph={false} title={SkeletonTitleProps} />
   ) : (
-    Number(drizzle.web3.utils.fromWei(amount)).toFixed(decimals)
+    Number(
+      drizzle.web3.utils.fromWei(
+        typeof amount === 'number' ? String(amount) : amount
+      )
+    ).toFixed(decimals)
   )
 }
 

src/containers/courts.js

@@ -1,33 +1,41 @@
-import { Button, Col, Row } from 'antd'
+import { Button, Col, Row, Spin } from 'antd'
+import { useDrizzle, useDrizzleState } from '../temp/drizzle-react-hooks'
 import CourtCard from '../components/court-card'
 import React from 'react'
 import TopBanner from '../components/top-banner'
 
-export default () => (
-  <>
-    <TopBanner
-      description="Select courts and stake PNK."
-      extra={
-        <Button size="large" type="primary">
-          Select Court
-        </Button>
-      }
-      title="Courts"
-    />
-    My Courts
-    <Row gutter={40}>
-      <Col span={8}>
-        <CourtCard ID={0} />
-      </Col>
-      <Col span={8}>
-        <CourtCard ID={0} />
-      </Col>
-      <Col span={8}>
-        <CourtCard ID={0} />
-      </Col>
-      <Col span={8}>
-        <CourtCard ID={0} />
-      </Col>
-    </Row>
-  </>
-)
+export default () => {
+  const { cacheCall } = useDrizzle()
+  const drizzleState = useDrizzleState(drizzleState => ({
+    accounts: drizzleState.accounts
+  }))
+  const subcourtIDs = cacheCall(
+    'KlerosLiquid',
+    'getJuror',
+    drizzleState.accounts[0]
+  )
+  return (
+    <>
+      <TopBanner
+        description="Select courts and stake PNK."
+        extra={
+          <Button size="large" type="primary">
+            Select Court
+          </Button>
+        }
+        title="Courts"
+      />
+      My Courts
+      <Spin spinning={!subcourtIDs}>
+        <Row gutter={40}>
+          {subcourtIDs &&
+            subcourtIDs.map(ID => (
+              <Col key={ID} span={8}>
+                <CourtCard ID={ID} />
+              </Col>
+            ))}
+        </Row>
+      </Spin>
+    </>
+  )
+}

src/temp/drizzle-react-hooks.js

@@ -80,11 +80,11 @@ export const DrizzleProvider = ({ children, drizzle }) => {
           contract
             .getPastEvents(eventName, eventOptions)
             .then(pastEvents => setEvents(pastEvents))
-          return drizzle.contracts[contractName].events[eventName]({
+          const listener = drizzle.contracts[contractName].events[eventName]({
             ...eventOptions,
             fromBlock: 'latest'
           }).on('data', event => setEvents(events => [...events, event]))
-            .unsubscribe
+          return listener.unsubscribe.bind(listener)
         },
         [contractName, eventName, eventOptions]
       )