);
} else {
- cardHeader = (
+ return (
);
}
- } else if (user === null) {
- cardHeader = (
-
-
-
- {__(
- "This application is unable to earn rewards due to an authentication failure."
- )}
-
-
+ }
+ }
+
+ renderUnclaimedRewards() {
+ const { fetching, rewards, user } = this.props;
+
+ if (fetching) {
+ return (
+
+
);
- }
+ } else if (user === null) {
+ return (
+
+
+ {__(
+ "This application is unable to earn rewards due to an authentication failure."
+ )}
+
+
+ );
+ } else if (!rewards || rewards.length <= 0) {
+ return (
+
+ {__("Failed to load rewards.")}
+
+ );
+ } else {
+ return rewards.map(reward =>
+
+ );
+ }
+ }
+
+ render() {
return (
- {cardHeader && }
- {content}
+ {this.renderPageHeader()}
+ {this.renderUnclaimedRewards()}
+ {}
);
}
diff --git a/ui/js/page/transactionHistory/index.js b/ui/js/page/transactionHistory/index.js
new file mode 100644
index 000000000..01fdf2a64
--- /dev/null
+++ b/ui/js/page/transactionHistory/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import WalletPage from "./view";
+
+export default connect(null, null)(WalletPage);
diff --git a/ui/js/page/transactionHistory/view.jsx b/ui/js/page/transactionHistory/view.jsx
new file mode 100644
index 000000000..50efd014c
--- /dev/null
+++ b/ui/js/page/transactionHistory/view.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import SubHeader from "component/subHeader";
+import TransactionList from "component/transactionList";
+
+const TransactionHistoryPage = props => {
+ return (
+
+
+
+
+ );
+};
+
+export default TransactionHistoryPage;
diff --git a/ui/js/reducers/rewards.js b/ui/js/reducers/rewards.js
index 0994d730b..42279d01d 100644
--- a/ui/js/reducers/rewards.js
+++ b/ui/js/reducers/rewards.js
@@ -3,7 +3,8 @@ import * as types from "constants/action_types";
const reducers = {};
const defaultState = {
fetching: false,
- rewardsByType: {},
+ claimedRewardsById: {}, //id => reward
+ unclaimedRewardsByType: {},
claimPendingByType: {},
claimErrorsByType: {},
};
@@ -17,11 +18,19 @@ reducers[types.FETCH_REWARDS_STARTED] = function(state, action) {
reducers[types.FETCH_REWARDS_COMPLETED] = function(state, action) {
const { userRewards } = action.data;
- const rewardsByType = {};
- userRewards.forEach(reward => (rewardsByType[reward.reward_type] = reward));
+ let unclaimedRewards = {},
+ claimedRewards = {};
+ userRewards.forEach(reward => {
+ if (reward.transaction_id) {
+ claimedRewards[reward.id] = reward;
+ } else {
+ unclaimedRewards[reward.reward_type] = reward;
+ }
+ });
return Object.assign({}, state, {
- rewardsByType: rewardsByType,
+ claimedRewardsById: claimedRewards,
+ unclaimedRewardsByType: unclaimedRewards,
fetching: false,
});
};
@@ -55,16 +64,22 @@ reducers[types.CLAIM_REWARD_STARTED] = function(state, action) {
reducers[types.CLAIM_REWARD_SUCCESS] = function(state, action) {
const { reward } = action.data;
- const existingReward = state.rewardsByType[reward.reward_type];
+ let unclaimedRewardsByType = Object.assign({}, state.unclaimedRewardsByType);
+ const existingReward = unclaimedRewardsByType[reward.reward_type];
+ delete state.unclaimedRewardsByType[reward.reward_type];
+
const newReward = Object.assign({}, reward, {
reward_title: existingReward.reward_title,
reward_description: existingReward.reward_description,
});
- const rewardsByType = Object.assign({}, state.rewardsByType);
- rewardsByType[reward.reward_type] = newReward;
+ let claimedRewardsById = Object.assign({}, state.claimedRewardsById);
+ claimedRewardsById[reward.id] = newReward;
- const newState = Object.assign({}, state, { rewardsByType });
+ const newState = Object.assign({}, state, {
+ unclaimedRewardsByType,
+ claimedRewardsById,
+ });
return setClaimRewardState(newState, newReward, false, "");
};
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js
index 959c80c99..82403a5c8 100644
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@@ -136,6 +136,7 @@ export const selectHeaderLinks = createSelector(selectCurrentPage, page => {
// This contains intentional fall throughs
switch (page) {
case "wallet":
+ case "history":
case "send":
case "receive":
case "invite":
@@ -143,6 +144,7 @@ export const selectHeaderLinks = createSelector(selectCurrentPage, page => {
case "backup":
return {
wallet: __("Overview"),
+ history: __("History"),
send: __("Send"),
receive: __("Receive"),
invite: __("Invites"),
diff --git a/ui/js/selectors/rewards.js b/ui/js/selectors/rewards.js
index bddb7714e..88d4de730 100644
--- a/ui/js/selectors/rewards.js
+++ b/ui/js/selectors/rewards.js
@@ -3,13 +3,23 @@ import { selectUser } from "selectors/user";
const _selectState = state => state.rewards || {};
-export const selectRewardsByType = createSelector(
+export const selectUnclaimedRewardsByType = createSelector(
_selectState,
- state => state.rewardsByType || {}
+ state => state.unclaimedRewardsByType
);
-export const selectRewards = createSelector(
- selectRewardsByType,
+export const selectClaimedRewardsById = createSelector(
+ _selectState,
+ state => state.claimedRewardsById
+);
+
+export const selectClaimedRewards = createSelector(
+ selectClaimedRewardsById,
+ byId => Object.values(byId) || []
+);
+
+export const selectUnclaimedRewards = createSelector(
+ selectUnclaimedRewardsByType,
byType => Object.values(byType) || []
);
@@ -23,10 +33,12 @@ export const selectFetchingRewards = createSelector(
state => !!state.fetching
);
-export const selectTotalRewardValue = createSelector(selectRewards, rewards =>
- rewards.reduce((sum, reward) => {
- return sum + reward.reward_amount;
- }, 0)
+export const selectUnclaimedRewardValue = createSelector(
+ selectUnclaimedRewards,
+ rewards =>
+ rewards.reduce((sum, reward) => {
+ return sum + reward.reward_amount;
+ }, 0)
);
export const selectHasClaimedReward = (state, props) => {
@@ -65,7 +77,7 @@ export const makeSelectClaimRewardError = () => {
};
const selectRewardByType = (state, props) => {
- return selectRewardsByType(state)[props.reward_type];
+ return selectUnclaimedRewardsByType(state)[props.reward_type];
};
export const makeSelectRewardByType = () => {