import React from 'react'; import CountUp from 'react-countup'; import NumberUtil, { fromDecimalToBN, humanize } from '../../utils/NumberUtil'; import styles from './TopSection.module.scss'; import { CircularProgress } from '@material-ui/core'; import styled, { keyframes } from 'styled-components'; import { tokens } from '../../models/Tokens'; import { withTranslations } from '../../services/Translations/Translations'; const TokenWrappers = tokens.map((token, index, allTokens) => { const totalDuration = allTokens.length * 8; const delay = index * 8; const percentageSplit = 100 / allTokens.length const fadeAnimation = keyframes` 0% { opacity: 0; } 2% { opacity: 1; } ${percentageSplit}% { opacity: 1; } ${percentageSplit + 2}% { opacity: 0; } 100% { opacity: 0; } ` return styled.div` animation: ${fadeAnimation} ${totalDuration}s ${delay}s infinite; ` }) class TopSection extends React.Component { render() { return ( <div className={styles.TopBar}> <div className={styles.content}> <div className={styles.leftStats}> <div className={styles.totalStat}> <div className={styles.bigNum}> { this.props.totalTokensPurchased.eq(new NumberUtil.BN(0)) ? (<div className={styles.totalTokensPurchasedLoader}><CircularProgress/></div>) : (<span> ${humanize(this.props.totalTokensPurchased, 18, 0, true)} </span>) } </div> <div className={styles.statSubtitle}> { this.props.excerpt('header.totalmTokens', this.props.language) } </div> </div> </div> <div className={styles.rightStat}> {/* 0.0000001981862 per second */} <div className={styles.aprWrapper}> { this.props.excerpt('header.earning', this.props.language) } </div> <div> {this.props.tokens.map((token, index) => { const exchangeRate = this.props.symbolToExchangeRateMap ? this.props.symbolToExchangeRateMap[`m${token.symbol}`] : undefined; const TokenWrapper = TokenWrappers[index]; return ( <TokenWrapper className={styles.section} key={`header-${token.symbol}`}> <div className={styles.usdToDmm}> <div className={styles.interestRate}> <span className={styles.bold}>1</span> <span className={styles.light}> m{token.symbol} = </span> <CountUp start={exchangeRate ? Number.parseFloat(humanize(NumberUtil._1.mul(exchangeRate).div(NumberUtil._1), 18)) : 0} end={exchangeRate ? Number.parseFloat(humanize(NumberUtil._1.mul(exchangeRate).div(NumberUtil._1).add(fromDecimalToBN(0.0007134703196, 18)), 18)) : 0} duration={60 * 60 * 100} separator=" " decimals={8} decimal="." prefix="" suffix="" /> <span className={styles.light}> {token.symbol}</span> </div> </div> <div className={styles.usdToDmm}> <div className={styles.interestRate}> <span className={styles.bold}>1</span> <span className={styles.light}> {token.symbol} = </span> <CountUp start={exchangeRate ? Number.parseFloat(humanize(NumberUtil._1.mul(NumberUtil._1).div(exchangeRate), 18)) : 0} end={exchangeRate ? Number.parseFloat(humanize(NumberUtil._1.mul(NumberUtil._1).div(exchangeRate).sub(fromDecimalToBN(0.0006715014772, 18)), 18)) : 0} duration={60 * 60 * 100} separator=" " decimals={8} decimal="." prefix="" suffix="" /> <span className={styles.light}> m{token.symbol}</span> </div> </div> </TokenWrapper> ); })} </div> </div> </div> </div> ); } } export default withTranslations(TopSection);