// @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;