Rewards/MyRewards: add etherscan link

**TO DO before merging** - [ ] wait for PR #1640 to be merged - [ ] redirect this PR to `dev` Fixes #1631
AutarkLabs · Nov 15, 2019 · 59cd09a · 59cd09a
1 parent 605a589
commit 59cd09a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 31 deletions.
diff --git a/apps/rewards/app/components/App/App.js b/apps/rewards/app/components/App/App.js
@@ -40,6 +40,7 @@ class App extends React.Component {
     this.state = {
       selected: 0,
       tabs: [ 'Overview', 'My Rewards' ],
+      claimHashes: {},
     }
     this.updateRewards()
   }
@@ -196,8 +197,12 @@ class App extends React.Component {
   }
 
   claimReward = reward => {
-    // TODO
-    this.props.api.claimReward(reward.rewardId + reward.claims).toPromise()
+    this.props.api.claimReward(reward.rewardId + reward.claims)
+      .subscribe(claimHash => {
+        const { claimHashes } = this.state
+        claimHashes[reward.rewardId] = claimHash
+        this.setState({ claimHashes })
+      })
   }
 
   openDetailsView = reward => {
@@ -271,6 +276,7 @@ class App extends React.Component {
             myMetrics={this.props.myMetrics}
             viewReward={reward => this.viewReward(reward, true)}
             claimReward={this.claimReward}
+            claimHashes={this.state.claimHashes}
           />
         ) : (
           <Overview

diff --git a/apps/rewards/app/components/Content/MyRewards.js b/apps/rewards/app/components/Content/MyRewards.js
@@ -6,6 +6,7 @@ import {
   ContextMenuItem,
   DataView,
   IconCoin,
+  IconHash,
   IconView,
   Text,
   useTheme,
@@ -14,48 +15,73 @@ import {
   ONE_TIME_DIVIDEND,
   RECURRING_DIVIDEND,
   ONE_TIME_MERIT,
+  READY,
+  CLAIMED,
 } from '../../utils/constants'
 import { Empty } from '../Card'
 import Metrics from './Metrics'
-import { useAppState } from '@aragon/api-react'
+import { useAppState, useNetwork } from '@aragon/api-react'
 import BigNumber from 'bignumber.js'
-import { displayCurrency, getStatus } from '../../utils/helpers'
+import { displayCurrency, getStatus, getStatusId } from '../../utils/helpers'
+
 
 const MyRewards = ({
   myRewards,
   myMetrics,
   viewReward,
   claimReward,
+  claimHashes,
 }) => {
+  const network = useNetwork()
   const rewardsEmpty = myRewards.length === 0
 
+  const getEtherscanLink = reward => {
+    const networkName = network.id === 1 ? '' : `${network.type}.`
+    const claimHash = claimHashes[reward.rewardId]
+    const link = `https://${networkName}etherscan.io/tx/${claimHash}`
+    return link
+  }
+
   if (rewardsEmpty) {
     return <Empty noButton />
   }
 
-  const renderMenu = (reward) => (
-    <ContextMenu>
-      <StyledContextMenuItem
-        onClick={() => viewReward(reward)}
-      >
-        <IconView css={{
-          marginRight: '11px',
-          marginBottom: '2px',
-        }}/>
-        View
-      </StyledContextMenuItem>
-      {(reward.claims < reward.disbursements.length && (reward.disbursements[reward.claims] < Date.now())) && (
+  const renderMenu = (reward) => {
+    const statusId = getStatusId(reward)
+    return (
+      <ContextMenu>
         <StyledContextMenuItem
-          onClick={() => claimReward(reward)}
+          onClick={() => viewReward(reward)}
         >
-          <IconCoin css={{
+          <IconView css={{
             marginRight: '11px',
             marginBottom: '2px',
           }}/>
-        Claim
-        </StyledContextMenuItem>)}
-    </ContextMenu>
-  )
+          View reward
+        </StyledContextMenuItem>
+        {statusId === READY && (
+          <StyledContextMenuItem
+            onClick={() => claimReward(reward)}
+          >
+            <IconCoin css={{
+              marginRight: '11px',
+              marginBottom: '2px',
+            }}/>
+            Claim
+          </StyledContextMenuItem>)}
+        {statusId === CLAIMED && (
+          <StyledContextMenuItem
+            href={getEtherscanLink(reward)}
+          >
+            <IconHash css={{
+              marginRight: '11px',
+              marginBottom: '2px',
+            }}/>
+            View on Etherscan
+          </StyledContextMenuItem>)}
+      </ContextMenu>
+    )
+  }
 
   return (
     <OverviewMain>

diff --git a/apps/rewards/app/utils/constants.js b/apps/rewards/app/utils/constants.js
@@ -26,3 +26,6 @@ export const DISBURSEMENT_UNITS = [
   YEARS,
 ]
 export const OTHER = 'Other…'
+export const PENDING = Symbol('PENDING')
+export const READY = Symbol('READY')
+export const CLAIMED = Symbol('CLAIMED')
diff --git a/apps/rewards/app/utils/helpers.js b/apps/rewards/app/utils/helpers.js
@@ -2,6 +2,9 @@ import {
   ETH_DECIMALS,
   ETH_DECIMALS_NUMBER,
   RECURRING_DIVIDEND,
+  PENDING,
+  READY,
+  CLAIMED,
 } from './constants'
 import BigNumber from 'bignumber.js'
 import { IconCheck, IconCircleCheck, IconClock } from '@aragon/ui'
@@ -48,16 +51,30 @@ const ClaimedStatus = (theme) => (
   </div>
 )
 
-export const getStatus = (
-  { rewardType, timeClaimed, endDate, claims, disbursements },
-  theme
-) => {
+export const getStatusId = ({
+  rewardType,
+  timeClaimed,
+  endDate,
+  claims,
+  disbursements,
+}) => {
   if (rewardType === RECURRING_DIVIDEND)
-    return claims === disbursements.length ? ClaimedStatus(theme) : (
-      Date.now() > disbursements[claims].getTime() ? ReadyStatus(theme) :
-        PendingStatus(theme)
+    return claims === disbursements.length ? CLAIMED : (
+      Date.now() > disbursements[claims].getTime() ? READY : PENDING
     )
-  else return timeClaimed > 0 ? ClaimedStatus(theme) : (
-    Date.now() > endDate ? ReadyStatus(theme) : PendingStatus(theme)
+  else return timeClaimed > 0 ? CLAIMED : (
+    Date.now() > endDate ? READY : PENDING
   )
 }
+
+export const getStatus = (reward, theme) => {
+  const statusId = getStatusId(reward)
+  switch(statusId) {
+  case PENDING:
+    return PendingStatus(theme)
+  case READY:
+    return ReadyStatus(theme)
+  case CLAIMED:
+    return ClaimedStatus(theme)
+  }
+}