From ca4f5e2d1ce1558889601f97f74ab672eab83f05 Mon Sep 17 00:00:00 2001 From: Emilio Silva Schlenker Date: Mon, 25 Nov 2019 07:48:43 -0500 Subject: [PATCH 1/4] Rewards/MyRewards: add etherscan link Updated after merge of PR #1640 --- apps/rewards/app/components/App/App.js | 10 ++- .../app/components/Content/MyRewards.js | 70 ++++++++++++------- apps/rewards/app/utils/constants.js | 3 + apps/rewards/app/utils/helpers.js | 29 ++++++-- 4 files changed, 79 insertions(+), 33 deletions(-) diff --git a/apps/rewards/app/components/App/App.js b/apps/rewards/app/components/App/App.js index 97fd1d0dd..3b61948c4 100644 --- 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 => { @@ -274,6 +279,7 @@ class App extends React.Component { isMyReward: true })} claimReward={this.claimReward} + claimHashes={this.state.claimHashes} /> ) : ( { + const network = useNetwork() const rewardsEmpty = myRewards.length === 0 + const getEtherscanLink = reward => { + const networkChunk = network.id === 1 ? '' : `${network.type}.` + const claimHash = claimHashes[reward.rewardId] + const link = `https://${networkChunk}etherscan.io/tx/${claimHash}` + return link + } + if (rewardsEmpty) { return } - const renderMenu = (reward) => ( - - viewReward(reward)} - > - - View - - {(reward.claims < reward.disbursements.length && (reward.disbursements[reward.claims] < Date.now())) && ( - claimReward(reward)} - > - - Claim - )} - - ) + const renderMenu = (reward) => { + const statusId = getStatusId(reward) + return ( + + viewReward(reward)} > + + View reward + + {statusId === READY && ( + claimReward(reward)} > + + Claim + + )} + {statusId === CLAIMED && ( + + + View on Etherscan + + )} + + ) + } return ( @@ -143,6 +156,13 @@ MyRewards.propTypes = { myMetrics: PropTypes.arrayOf(PropTypes.object).isRequired, } +const StyledIcon = ({ Icon }) => ( + +) + const OverviewMain = styled.div` background-color: #f8fcfd; ` diff --git a/apps/rewards/app/utils/constants.js b/apps/rewards/app/utils/constants.js index 8570bfa70..adb504294 100644 --- 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 index 7e87f2322..63e026453 100644 --- a/apps/rewards/app/utils/helpers.js +++ b/apps/rewards/app/utils/helpers.js @@ -3,6 +3,9 @@ import { ETH_DECIMALS, ETH_DECIMALS_NUMBER, RECURRING_DIVIDEND, + PENDING, + READY, + CLAIMED, } from './constants' import BigNumber from 'bignumber.js' import { @@ -55,7 +58,7 @@ Status.propTypes = { time: PropTypes.string, } -export const getStatus = ({ +export const getStatusId = ({ rewardType, timeClaimed, endDate, @@ -64,16 +67,30 @@ export const getStatus = ({ }) => { if (rewardType === RECURRING_DIVIDEND) { if (claims === disbursements.length) - return + return CLAIMED if (Date.now() > disbursements[claims].getTime()) - return - return + return READY + return PENDING } else { if (timeClaimed > 0) - return + return CLAIMED if (Date.now() > endDate) - return + return READY + return PENDING + } +} + +export const getStatus = (reward) => { + const statusId = getStatusId(reward) + switch(statusId) { + case PENDING: return + case READY: + return + case CLAIMED: + return + default: + return '' } } From babfc387ad400e92b0be94ab1a84d44900ba7e29 Mon Sep 17 00:00:00 2001 From: Emilio Silva Schlenker Date: Tue, 26 Nov 2019 12:59:35 -0500 Subject: [PATCH 2/4] Rewards/MyRewards: add etherscan link: get tx hash from past events in store --- apps/rewards/app/components/App/App.js | 10 ++-------- apps/rewards/app/store/events.js | 13 +++++++++++-- apps/rewards/app/store/reward.js | 9 ++++++--- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/apps/rewards/app/components/App/App.js b/apps/rewards/app/components/App/App.js index 3b61948c4..eac91a1d9 100644 --- a/apps/rewards/app/components/App/App.js +++ b/apps/rewards/app/components/App/App.js @@ -40,7 +40,6 @@ class App extends React.Component { this.state = { selected: 0, tabs: [ 'Overview', 'My Rewards' ], - claimHashes: {}, } this.updateRewards() } @@ -197,12 +196,7 @@ class App extends React.Component { } claimReward = reward => { - this.props.api.claimReward(reward.rewardId + reward.claims) - .subscribe(claimHash => { - const { claimHashes } = this.state - claimHashes[reward.rewardId] = claimHash - this.setState({ claimHashes }) - }) + this.props.api.claimReward(reward.rewardId + reward.claims).toPromise() } openDetailsView = reward => { @@ -279,7 +273,7 @@ class App extends React.Component { isMyReward: true })} claimReward={this.claimReward} - claimHashes={this.state.claimHashes} + claimHashes={this.props.claims.claimHashes} /> ) : ( { - const { event: eventName, returnValues, address: eventAddress, } = event + const { + event: eventName, + returnValues, + address: eventAddress, + transactionHash, + } = event const { vault } = settings let nextState = { ...state, } @@ -25,7 +30,11 @@ export const handleEvent = async (state, event, settings) => { nextState.isSyncing = false break case 'RewardClaimed': - nextState = await onRewardClaimed(nextState, returnValues) + nextState = await onRewardClaimed( + nextState, + returnValues, + transactionHash + ) break case 'RewardAdded': nextState = await onRewardAdded(nextState, returnValues, settings) diff --git a/apps/rewards/app/store/reward.js b/apps/rewards/app/store/reward.js index 31075bf7b..9749cb32a 100644 --- a/apps/rewards/app/store/reward.js +++ b/apps/rewards/app/store/reward.js @@ -23,11 +23,14 @@ export async function onRewardAdded({ rewards = [], refTokens = [], balances = [ export async function onRewardClaimed( { rewards = [], claims = {} }, - { rewardId, claimant } + { rewardId, claimant }, + transactionHash ) { rewards[rewardId] = await getRewardById(rewardId, claimant) - let { claimsByToken = [], totalClaimsMade = 0 } = claims + let { claimsByToken = [], totalClaimsMade = 0, claimHashes = {}, } = claims + + claimHashes[rewardId] = transactionHash const tokenIndex = claimsByToken.findIndex(token => addressesEqual(token.address, rewards[rewardId].rewardToken)) @@ -43,7 +46,7 @@ export async function onRewardClaimed( totalClaimsMade = await getTotalClaims() - return { rewards, claims: { claimsByToken, totalClaimsMade } } + return { rewards, claims: { claimsByToken, totalClaimsMade, claimHashes } } } From 66d77c82b4000c131882eb75500d32f3f7ea80a7 Mon Sep 17 00:00:00 2001 From: Emilio Silva Schlenker Date: Wed, 27 Nov 2019 11:57:54 -0500 Subject: [PATCH 3/4] Rewards/MyRewards: add etherscan link - store link on per-user basis --- apps/rewards/app/components/App/App.js | 1 + apps/rewards/app/components/Content/MyRewards.js | 9 ++++++--- apps/rewards/app/store/reward.js | 5 ++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/apps/rewards/app/components/App/App.js b/apps/rewards/app/components/App/App.js index eac91a1d9..8fae84787 100644 --- a/apps/rewards/app/components/App/App.js +++ b/apps/rewards/app/components/App/App.js @@ -196,6 +196,7 @@ class App extends React.Component { } claimReward = reward => { + // TODO this.props.api.claimReward(reward.rewardId + reward.claims).toPromise() } diff --git a/apps/rewards/app/components/Content/MyRewards.js b/apps/rewards/app/components/Content/MyRewards.js index 3eb658559..cbf5020d6 100644 --- a/apps/rewards/app/components/Content/MyRewards.js +++ b/apps/rewards/app/components/Content/MyRewards.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types' -import React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { ContextMenu, @@ -21,7 +21,7 @@ import { } from '../../utils/constants' import { Empty } from '../Card' import Metrics from './Metrics' -import { useAppState, useNetwork } from '@aragon/api-react' +import { useAppState, useAragonApi, useNetwork } from '@aragon/api-react' import BigNumber from 'bignumber.js' import { displayCurrency, getStatus, getStatusId } from '../../utils/helpers' @@ -34,10 +34,13 @@ const MyRewards = ({ }) => { const network = useNetwork() const rewardsEmpty = myRewards.length === 0 + const { api } = useAragonApi() + const [ user, setUser ] = useState() + api.accounts().subscribe(accounts => setUser(accounts[0])) const getEtherscanLink = reward => { const networkChunk = network.id === 1 ? '' : `${network.type}.` - const claimHash = claimHashes[reward.rewardId] + const claimHash = claimHashes[reward.rewardId][user] const link = `https://${networkChunk}etherscan.io/tx/${claimHash}` return link } diff --git a/apps/rewards/app/store/reward.js b/apps/rewards/app/store/reward.js index 9749cb32a..ddd558898 100644 --- a/apps/rewards/app/store/reward.js +++ b/apps/rewards/app/store/reward.js @@ -30,7 +30,10 @@ export async function onRewardClaimed( let { claimsByToken = [], totalClaimsMade = 0, claimHashes = {}, } = claims - claimHashes[rewardId] = transactionHash + claimHashes[rewardId] = { + ...claimHashes[rewardId], + [claimant]: transactionHash + } const tokenIndex = claimsByToken.findIndex(token => addressesEqual(token.address, rewards[rewardId].rewardToken)) From 3ab3915b6d0bc7a0aade097aefe90f1801e2d255 Mon Sep 17 00:00:00 2001 From: Emilio Silva Schlenker Date: Wed, 27 Nov 2019 12:29:14 -0500 Subject: [PATCH 4/4] Rewards/MyRewards: add etherscan link - removed GU --- apps/rewards/app/components/Content/MyRewards.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/rewards/app/components/Content/MyRewards.js b/apps/rewards/app/components/Content/MyRewards.js index cbf5020d6..56e8418bd 100644 --- a/apps/rewards/app/components/Content/MyRewards.js +++ b/apps/rewards/app/components/Content/MyRewards.js @@ -5,7 +5,6 @@ import { ContextMenu, ContextMenuItem, DataView, - GU, IconCoin, IconHash, IconView, @@ -161,8 +160,8 @@ MyRewards.propTypes = { const StyledIcon = ({ Icon }) => ( )