27 lines
914 B
JavaScript
27 lines
914 B
JavaScript
// @flow
|
|
import React from 'react';
|
|
import TotalBackground from './total-background.png';
|
|
import useTween from 'effects/use-tween';
|
|
import I18nMessage from 'component/i18nMessage';
|
|
import LbcSymbol from 'component/common/lbc-symbol';
|
|
|
|
type Props = {
|
|
rewards: Array<Reward>,
|
|
};
|
|
|
|
function RewardTotal(props: Props) {
|
|
const { rewards } = props;
|
|
const rewardTotal = rewards.reduce((acc, val) => acc + val.reward_amount, 0);
|
|
const modifier = rewardTotal > 500 ? 1 : 15; // used to tweak the reward count speed
|
|
const total = useTween(rewardTotal * modifier);
|
|
const integer = Math.round(total * rewardTotal);
|
|
|
|
return (
|
|
<section className="card card--section card--reward-total" style={{ backgroundImage: `url(${TotalBackground})` }}>
|
|
<I18nMessage tokens={{ amount: integer, lbc: <LbcSymbol /> }}>%amount% %lbc% earned from rewards</I18nMessage>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default RewardTotal;
|