PastDraw.tsx

PastDraw.tsx

// import React from 'react';
import { useEffect, useState } from 'react'
// import styled from 'styled-components'
import { MuiCardStyled } from '@/styles/mui.styled';
// import { CenteredText, TicketNumberBox } from '@/styles/lottery.styled';
import useTotalRewards from '@/hooks/useTotalRewards';
import { getBalanceNumber } from '@/utils/formatBalance';

import { BallWithNumber } from '../../svgs'
import { BallColor } from '../../svgs/Balls'

// import random from 'lodash/random'
import uniqueId from 'lodash/uniqueId'

import {
    Avatar,
    CardContent,
    CardHeader,
    Divider,
    Grid,
    Typography,
} from '@mui/material';
// import {
//   CardBody,
//   Heading,
//   Flex,
//   Skeleton,
//   Text,
//   Box,
//   Button,
//   useModal,
//   CardRibbon,
//   BunnyPlaceholderIcon,
//   useMatchBreakpoints,
// } from '@pancakeswap/uikit'


type Props = {
    pastDraw ? : boolean;
    ethersProvider: any;
    account: any;
};

const random = (min: number, max: number) => { // min and max included 
    return Math.floor(Math.random() * (max - min + 1) + min)
}

const PastDraw = ({ pastDraw = false, ethersProvider, account }: Props) => {
    const totalRewards: any = useTotalRewards(ethersProvider);
    const lotteryPrizeAmount = +getBalanceNumber(totalRewards.toString()).toFixed(
        0
    );
    const lotteryPrizeWithCommaSeparators = lotteryPrizeAmount.toLocaleString();
    if (pastDraw)
        console.log("PastDraw")

    const winNumbers = [1, 2, 3, 4, 5, 6];
    const colors: BallColor[] = ['pink', 'lilac', 'teal', 'aqua', 'green', 'yellow']

    const [rotationValues, setRotationValues] = useState([])
    const rotateText = true;
    const numAsArray: Number[] = winNumbers;

    useEffect(() => {
        if (rotateText && numAsArray && rotationValues.length === 0) {
            setRotationValues(numAsArray.map(() => random(-20, 20)))
        }
        console.log("rotationValues",rotationValues);
    }, [rotateText, numAsArray, rotationValues])

    return (
        <Grid container spacing={1}>
        <Grid item xs={12} md={12}>
		      <MuiCardStyled>
		      	<CardHeader
            avatar={<Avatar src="/images/acet-finance-logo.jpg" />}
            title={`Hello, World.`}
            subheader={
            	<Typography variant="subtitle2">
        				{`I am your subheader: ${lotteryPrizeWithCommaSeparators} ACET`}
        			</Typography>
            }
          />
          <Divider />
          <CardContent>
            <Grid container spacing={2} justifyContent="center">
		          {winNumbers.map((number, index) => (
		            <Grid item key={index}>
		            	<BallWithNumber
				            key={uniqueId()}
				            rotationTransform={rotateText && rotationValues[index]}
				            size={64}
				            fontSize={42}
				            color={colors[index]}
				            number={number}
				          />
{/*		              <TicketNumberBox>
		                <CenteredText>{number}</CenteredText>
		              </TicketNumberBox> */}
		            </Grid>
		          ))}
		        </Grid>
          </CardContent>
		        
		        
		      </MuiCardStyled>
		    </Grid>
      </Grid>
    );
};

export default PastDraw;