add last reward round to an orchestrator's campaign view (#720)

livepeer · May 28, 2020 · 552df86 · 552df86 · vercel · May 28, 2020
1 parent 43c72b2
commit 552df86
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 20 deletions.
diff --git a/packages/explorer-2.0/components/CampaignView/index.tsx b/packages/explorer-2.0/components/CampaignView/index.tsx
@@ -3,8 +3,11 @@ import * as Utils from 'web3-utils'
 import Card from '../Card'
 import { abbreviateNumber } from '../../lib/utils'
 import { Box } from 'theme-ui'
+import { MdCheck, MdClose } from 'react-icons/md'
+import ReactTooltip from 'react-tooltip'
+import Help from '../../public/img/help.svg'
 
-export default ({ transcoder }) => {
+export default ({ currentRound, transcoder }) => {
   const callsMade = transcoder.pools.filter(r => r.rewardTokens != null).length
   return (
     <Box sx={{ pt: 4 }}>
@@ -119,6 +122,59 @@ export default ({ transcoder }) => {
               </Box>
             }
           />
+          <Card
+            sx={{ flex: 1 }}
+            title={
+              <Flex sx={{ alignItems: 'center' }}>
+                <Box sx={{ color: 'muted' }}>Last Reward Round</Box>
+                <Flex>
+                  <ReactTooltip
+                    id="tooltip-last-reward-round"
+                    className="tooltip"
+                    place="top"
+                    type="dark"
+                    effect="solid"
+                  />
+                  <Help
+                    data-tip="The last round that an orchestrator received rewards while active. A checkmark indicates it called reward for the current round."
+                    data-for="tooltip-last-reward-round"
+                    sx={{
+                      color: 'muted',
+                      cursor: 'pointer',
+                      ml: 1,
+                    }}
+                  />
+                </Flex>
+              </Flex>
+            }
+            subtitle={
+              <Box
+                sx={{
+                  fontSize: [3, 3, 4, 4, 5],
+                  color: 'text',
+                  position: 'relative',
+                  fontWeight: 500,
+                  lineHeight: 'heading',
+                  fontFamily: 'monospace',
+                }}
+              >
+                <Flex sx={{ alignItems: 'center' }}>
+                  {transcoder.lastRewardRound.id}{' '}
+                  {transcoder.active && (
+                    <Flex>
+                      {transcoder.lastRewardRound.id === currentRound.id ? (
+                        <MdCheck
+                          sx={{ fontSize: 2, color: 'primary', ml: 1 }}
+                        />
+                      ) : (
+                        <MdClose sx={{ fontSize: 2, color: 'red', ml: 1 }} />
+                      )}
+                    </Flex>
+                  )}
+                </Flex>
+              </Box>
+            }
+          />
         </Box>
       </>
     </Box>

diff --git a/packages/explorer-2.0/components/HistoryView/index.tsx b/packages/explorer-2.0/components/HistoryView/index.tsx
@@ -61,26 +61,30 @@ export default () => {
       sx={{ overflow: 'hidden !important' }}
       scrollThreshold={0.5}
       dataLength={data && data.transactions.length}
-      next={() => {
+      next={async () => {
         stopPolling()
         if (!loading && data.transactions.length >= 10) {
-          fetchMore({
-            variables: {
-              skip: data.transactions.length,
-            },
-            updateQuery: (previousResult: any, { fetchMoreResult }: any) => {
-              if (!fetchMoreResult) {
-                return previousResult
-              }
-              return {
-                ...previousResult,
-                transactions: [
-                  ...previousResult.transactions,
-                  ...fetchMoreResult.transactions,
-                ],
-              }
-            },
-          })
+          try {
+            await fetchMore({
+              variables: {
+                skip: data.transactions.length,
+              },
+              updateQuery: (previousResult: any, { fetchMoreResult }: any) => {
+                if (!fetchMoreResult) {
+                  return previousResult
+                }
+                return {
+                  ...previousResult,
+                  transactions: [
+                    ...previousResult.transactions,
+                    ...fetchMoreResult.transactions,
+                  ],
+                }
+              },
+            })
+          } catch (e) {
+            return e
+          }
         }
       }}
       hasMore={true}

diff --git a/packages/explorer-2.0/pages/accounts/[account]/[slug].tsx b/packages/explorer-2.0/pages/accounts/[account]/[slug].tsx
@@ -155,7 +155,12 @@ const Account = () => {
           transcoder={data.transcoder}
         />
         <Tabs tabs={tabs} />
-        {slug == 'campaign' && <CampaignView transcoder={data.transcoder} />}
+        {slug == 'campaign' && (
+          <CampaignView
+            currentRound={data.currentRound[0]}
+            transcoder={data.transcoder}
+          />
+        )}
         {slug == 'fees' && (
           <FeesView
             delegator={data.delegator}

diff --git a/packages/explorer-2.0/queries/accountView.gql b/packages/explorer-2.0/queries/accountView.gql
@@ -53,6 +53,9 @@ query($account: ID!) {
     active
     totalStake
     totalGeneratedFees
+    lastRewardRound {
+      id
+    }
     pools(first: 30, orderBy: id, orderDirection: desc) {
       rewardTokens
     }