feat(lottery-history): Add All History card past round selector and d…

…etails viewer (pancakeswap#1723)

* feat(lottery-history): All History round switcher and data fetch timeout set

* feat(lottery-history): History data populated and rudimentary loading behaviour implemented

* feat(lottery-history): Add ribbon and improve loading behaviour

* feat(lottery-history): Rotating balls and ball component changes

* chore(lottery): Translations

* chore(round-switcher): Amend svg sizing

Co-authored-by: Chef Chungus <[email protected]>

src/config/localization/translations.json

@@ -1181,5 +1181,6 @@
   "Recipient": "Recipient",
   "Waiting For Confirmation": "Waiting For Confirmation",
   "Confirm this transaction in your wallet": "Confirm this transaction in your wallet",
-  "Dismiss": "Dismiss"
+  "Dismiss": "Dismiss",
+  "Latest": "Latest"
 }

src/views/Lottery/components/AllHistoryCard/RoundSwitcher.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import styled from 'styled-components'
+import { IconButton, ArrowForwardIcon, ArrowBackIcon, ArrowLastIcon, Flex, Heading, Input } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const StyledInput = styled(Input)`
+  width: 60px;
+  height: 100%;
+  padding: 4px 16px;
+`
+
+const StyledIconButton = styled(IconButton)`
+  width: 32px;
+
+  :disabled {
+    background: none;
+
+    svg {
+      fill: ${({ theme }) => theme.colors.textDisabled};
+
+      path {
+        fill: ${({ theme }) => theme.colors.textDisabled};
+      }
+    }
+  }
+`
+
+interface RoundSwitcherProps {
+  isLoading: boolean
+  selectedRoundId: string
+  mostRecentRound: number
+  handleInputChange: (event: any) => void
+  handleArrowButonPress: (targetRound: number) => void
+}
+
+const RoundSwitcher: React.FC<RoundSwitcherProps> = ({
+  isLoading,
+  selectedRoundId,
+  mostRecentRound,
+  handleInputChange,
+  handleArrowButonPress,
+}) => {
+  const { t } = useTranslation()
+  const selectedRoundIdAsInt = parseInt(selectedRoundId, 10)
+
+  return (
+    <Flex alignItems="center" justifyContent="space-between">
+      <Flex alignItems="center">
+        <Heading mr="8px">{t('Round')}</Heading>
+        <StyledInput
+          disabled={isLoading}
+          id="round-id"
+          name="round-id"
+          type="number"
+          value={selectedRoundId}
+          scale="lg"
+          onChange={handleInputChange}
+        />
+      </Flex>
+      <Flex alignItems="center">
+        <StyledIconButton
+          disabled={!selectedRoundIdAsInt || selectedRoundIdAsInt <= 1}
+          onClick={() => handleArrowButonPress(selectedRoundIdAsInt - 1)}
+          variant="text"
+          scale="sm"
+          mr="4px"
+        >
+          <ArrowBackIcon />
+        </StyledIconButton>
+        <StyledIconButton
+          disabled={selectedRoundIdAsInt >= mostRecentRound}
+          onClick={() => handleArrowButonPress(selectedRoundIdAsInt + 1)}
+          variant="text"
+          scale="sm"
+          mr="4px"
+        >
+          <ArrowForwardIcon />
+        </StyledIconButton>
+        <StyledIconButton
+          disabled={selectedRoundIdAsInt >= mostRecentRound}
+          onClick={() => handleArrowButonPress(mostRecentRound)}
+          variant="text"
+          scale="sm"
+        >
+          <ArrowLastIcon />
+        </StyledIconButton>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default RoundSwitcher

src/views/Lottery/components/AllHistoryCard/index.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useRef, useEffect } from 'react'
+import styled from 'styled-components'
+import { Card, Text, Skeleton, CardHeader, Box } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+import { useLottery } from 'state/lottery/hooks'
+import { fetchLottery } from 'state/lottery/helpers'
+import { LotteryStatus } from 'config/constants/types'
+import RoundSwitcher from './RoundSwitcher'
+import { getDrawnDate, processLotteryResponse } from '../../helpers'
+import PreviousRoundCardBody from '../PreviousRoundCard/Body'
+import PreviousRoundCardFooter from '../PreviousRoundCard/Footer'
+
+const StyledCard = styled(Card)`
+  width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    width: 756px;
+  }
+`
+
+const StyledCardHeader = styled(CardHeader)`
+  z-index: 2;
+  background: none;
+  border-bottom: 1px ${({ theme }) => theme.colors.cardBorder} solid;
+`
+
+const YourHistoryCard = () => {
+  const { t } = useTranslation()
+  const {
+    currentLotteryId,
+    currentRound: { status, isLoading },
+  } = useLottery()
+  const currentLotteryIdAsInt = parseInt(currentLotteryId)
+  const mostRecentFinishedRoundId =
+    status === LotteryStatus.CLAIMABLE ? currentLotteryIdAsInt : currentLotteryIdAsInt - 1
+  const [selectedRoundId, setSelectedRoundId] = useState(mostRecentFinishedRoundId.toString())
+  const [selectedLotteryInfo, setSelectedLotteryInfo] = useState(null)
+  const timer = useRef(null)
+
+  useEffect(() => {
+    setSelectedLotteryInfo(null)
+
+    const fetchLotteryData = async () => {
+      const lotteryData = await fetchLottery(selectedRoundId)
+      const processedLotteryData = processLotteryResponse(lotteryData)
+      setSelectedLotteryInfo(processedLotteryData)
+    }
+
+    timer.current = setInterval(() => {
+      if (selectedRoundId) {
+        fetchLotteryData()
+      }
+      clearInterval(timer.current)
+    }, 1000)
+
+    return () => clearInterval(timer.current)
+  }, [selectedRoundId])
+
+  const handleInputChange = (event) => {
+    const {
+      target: { value },
+    } = event
+    if (value) {
+      setSelectedRoundId(value)
+      if (parseInt(value, 10) <= 0) {
+        setSelectedRoundId('')
+      }
+      if (parseInt(value, 10) >= mostRecentFinishedRoundId) {
+        setSelectedRoundId(mostRecentFinishedRoundId.toString())
+      }
+    } else {
+      setSelectedRoundId('')
+    }
+  }
+
+  const handleArrowButonPress = (targetRound) => {
+    if (targetRound) {
+      setSelectedRoundId(targetRound.toString())
+    } else {
+      // targetRound is NaN when the input is empty, the only button press that will trigger this func is 'forward one'
+      setSelectedRoundId('1')
+    }
+  }
+
+  return (
+    <StyledCard>
+      <StyledCardHeader>
+        <RoundSwitcher
+          isLoading={isLoading}
+          selectedRoundId={selectedRoundId}
+          mostRecentRound={mostRecentFinishedRoundId}
+          handleInputChange={handleInputChange}
+          handleArrowButonPress={handleArrowButonPress}
+        />
+        <Box mt="8px">
+          {selectedLotteryInfo?.endTime ? (
+            <Text fontSize="14px">
+              {t('Drawn')} {getDrawnDate(selectedLotteryInfo.endTime)}
+            </Text>
+          ) : (
+            <Skeleton width="185px" height="21px" />
+          )}
+        </Box>
+      </StyledCardHeader>
+      <PreviousRoundCardBody lotteryData={selectedLotteryInfo} lotteryId={selectedRoundId} />
+      <PreviousRoundCardFooter lotteryData={selectedLotteryInfo} lotteryId={selectedRoundId} />
+    </StyledCard>
+  )
+}
+
+export default YourHistoryCard