import React , { useEffect , useState } from 'react' ; import styled , { keyframes } from 'styled-components' ; import { CountdownRenderProps } from 'react-countdown' ; import { useWallet } from 'use-wallet' ; import Button from '../../../components/Button' ; import Card from '../../../components/Card' ; import CardContent from '../../../components/CardContent' ; import CardIcon from '../../../components/CardIcon' ; import Loader from '../../../components/Loader' ; import Spacer from '../../../components/Spacer' ; import useFarms from '../../../hooks/useFarms' ; import useYam from '../../../hooks/useYam' ; import BigNumber from 'bignumber.js' ; import { Farm } from '../../../contexts/Farms' ; import { bnToDec } from '../../../utils' ; import { getEarned , getFarmContract } from '../../../farm/utils' ; import useAllStakedValue , { StakedValue , } from '../../../hooks/useAllStakedValue' ; import { BASIC_TOKEN } from '../../../constants/config' ; import imageLTO from '../../../assets/img/logo.png' ; interface FarmWithStakedValue extends Farm , StakedValue { apy : BigNumber ; } const FarmCards = ( ) => { const [ farms ] = useFarms ( ) ; const { account } = useWallet ( ) ; const stakedValue = useAllStakedValue ( ) ; const farmIndex = farms . findIndex ( ( { tokenSymbol } ) => tokenSymbol === BASIC_TOKEN ) ; const farmPrice = farmIndex >= 0 && stakedValue [ farmIndex ] ? stakedValue [ farmIndex ] . tokenPriceInWeth : new BigNumber ( 0 ) ; const BLOCKS_PER_YEAR = new BigNumber ( 2336000 ) ; const FARM_PER_BLOCK = new BigNumber ( 1000 ) ; const rows = farms . reduce < FarmWithStakedValue [ ] [ ] > ( ( farmRows , farm , i ) => { const farmWithStakedValue = { ... farm , ... stakedValue [ i ] , apy : stakedValue [ i ] ? farmPrice . times ( FARM_PER_BLOCK ) . times ( BLOCKS_PER_YEAR ) . times ( stakedValue [ i ] . poolWeight ) . div ( stakedValue [ i ] . totalWethValue ) : null , } ; const newFarmRows = [ ... farmRows ] ; if ( newFarmRows [ newFarmRows . length - 1 ] . length === 3 ) { newFarmRows . push ( [ farmWithStakedValue ] ) ; } else { newFarmRows [ newFarmRows . length - 1 ] . push ( farmWithStakedValue ) ; } return newFarmRows ; } , [ [ ] ] ) ; return ( < StyledCards > { ! ! rows [ 0 ] . length ? ( rows . map ( ( farmRow , i ) => ( < StyledRow key = { i } > { farmRow . map ( ( farm , j ) => ( < React . Fragment key = { j } > < FarmCard farm = { farm } / > { ( j === 0 || j === 1 ) && < StyledSpacer />} < /React.Fragment>))} < /StyledRow>))) : (<StyledLoadingWrapper> < Loader text = "Cooking the rice ..." / > < /StyledLoadingWrapper>)} < /StyledCards>); } ; interface FarmCardProps { farm : FarmWithStakedValue ; } const FarmCard = ( { farm } ) => { const [ startTime , setStartTime ] = useState ( 0 ) ; const [ harvestable , setHarvestable ] = useState ( 0 ) ; const { account } = useWallet ( ) ; const { lpTokenAddress } = farm ; const yam = useYam ( ) ; const renderer = ( countdownProps ) => { const { hours , minutes , seconds } = countdownProps ; const paddedSeconds = seconds < 10 ? `0${ seconds }` : seconds ; const paddedMinutes = minutes < 10 ? `0${ minutes }` : minutes ; const paddedHours = hours < 10 ? `0${ hours }` : hours ; return ( < span style = { { width : '100%' } } > { paddedHours } : { paddedMinutes } : { paddedSeconds } < /span>); } ; useEffect ( ( ) => { async function fetchEarned ( ) { if ( yam ) return ; const earned = await getEarned ( getFarmContract ( yam ) , lpTokenAddress , account ) ; setHarvestable ( bnToDec ( earned , 8 ) ) ; } if ( yam && account ) { fetchEarned ( ) ; } } , [ yam , lpTokenAddress , account , setHarvestable ] ) ; let poolWeight ; if ( farm . poolWeight && farm . poolWeight . isNaN ( ) ) { poolWeight = '- %' ; } else { poolWeight = farm . poolWeight ? `${ farm . poolWeight . times ( new BigNumber ( 100 ) ) . toNumber ( ) }% pool rewards` : 'Loading ...' ; } return ( < StyledCardWrapper > { farm . tokenSymbol === 'SASHIMI' && < StyledCardAccent />} < Card > < CardContent > < StyledContent > < CardIcon > < img src = { imageLTO } height = "50" style = { farm . version === 'V1' ? { filter : 'grayscale(1)' , marginTop : - 4 } : { marginTop : - 4 } } / > < /CardIcon> < StyledTitle > { farm . name } < StyledVersion > { farm . version } < /StyledVersion> < /StyledTitle> < StyledDetails > < StyledDetail > { poolWeight } < /StyledDetail> < /StyledDetails> < Spacer / > < Button text = "Select" variant = { 'tertiary' } to = { `/farms/${ farm . id }` } > < /Button> { } < /StyledContent> < /CardContent> < /Card> < /StyledCardWrapper>); } ; const RainbowLight = keyframes `

	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
` ; const StyledCardAccent = styled . div `
  background: linear-gradient(
    45deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );
  background-size: 300% 300%;
  animation: ${ RainbowLight } 2s linear infinite;
  border-radius: 12px;
  filter: blur(6px);
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
` ; const StyledCards = styled . div `
  width: 900px;
  @media (max-width: 768px) {
    width: 100%;
  }
` ; const StyledLoadingWrapper = styled . div `
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
` ; const StyledRow = styled . div `
  display: flex;
  margin-bottom: ${ ( props ) => props . theme . spacing [ 4 ] }px;
  flex-flow: row wrap;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
` ; const StyledCardWrapper = styled . div `
  display: flex;
  width: calc((900px - ${ ( props ) => props . theme . spacing [ 4 ] }px * 2) / 3);
  position: relative;
` ; const StyledTitle = styled . h4 `
  color: ${ ( props ) => props . theme . color . grey [ 600 ] };
  font-size: 24px;
  font-weight: 700;
  margin: ${ ( props ) => props . theme . spacing [ 2 ] }px 0 0;
  padding: 0;
` ; const StyledVersion = styled . span `
  color: rgb(23, 5, 75);
  font-size: 24px;
  font-weight: 900;
  margin: ${ ( props ) => props . theme . spacing [ 2 ] }px 0 0;
  padding: 0;
` ; const StyledContent = styled . div `
  align-items: center;
  display: flex;
  flex-direction: column;
` ; const StyledSpacer = styled . div `
  height: ${ ( props ) => props . theme . spacing [ 4 ] }px;
  width: ${ ( props ) => props . theme . spacing [ 4 ] }px;
` ; const StyledDetails = styled . div `
  margin-top: ${ ( props ) => props . theme . spacing [ 2 ] }px;
  text-align: center;
` ; const StyledDetail = styled . div `
  color: ${ ( props ) => props . theme . color . grey [ 500 ] };
` ; const StyledInsight = styled . div `
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fffdfa;
  color: #aa9584;
  width: 100%;
  margin-top: 12px;
  line-height: 32px;
  font-size: 13px;
  border: 1px solid #e6dcd5;
  text-align: center;
  padding: 0 12px;
` ; export default FarmCards ;