fix: You won not disappear on lottery page, claim amount not updated …

…on lottery card (pancakeswap#939)
rogerli007 · Apr 20, 2021 · 8c5ee53 · 8c5ee53
1 parent 7ecc03f
commit 8c5ee53
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 38 deletions.
diff --git a/src/hooks/useTickets.ts b/src/hooks/useTickets.ts
@@ -10,6 +10,7 @@ import {
   getWinningNumbers,
   getTickets,
 } from '../utils/lotteryUtils'
+import useLastUpdated from './useLastUpdated'
 
 const useTickets = (lotteryNumber = null) => {
   const [tickets, setTickets] = useState([])
@@ -57,6 +58,7 @@ export const useTotalClaim = () => {
   const { account } = useWeb3React()
   const ticketsContract = useLotteryTicket()
   const lotteryContract = useLottery()
+  const { lastUpdated, setLastUpdated } = useLastUpdated()
 
   const fetchBalance = useCallback(async () => {
     setClaimLoading(true)
@@ -69,9 +71,9 @@ export const useTotalClaim = () => {
     if (account && lotteryContract && ticketsContract) {
       fetchBalance()
     }
-  }, [account, fetchBalance, lotteryContract, ticketsContract])
+  }, [account, fetchBalance, lotteryContract, ticketsContract, lastUpdated])
 
-  return { claimLoading, claimAmount }
+  return { claimLoading, claimAmount, setLastUpdated }
 }
 
 export const useWinningNumbers = () => {

diff --git a/src/views/Home/components/CakeWinnings.tsx b/src/views/Home/components/CakeWinnings.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { useTotalClaim } from 'hooks/useTickets'
 import { getBalanceNumber } from 'utils/formatBalance'
 import { usePriceCakeBusd } from 'state/hooks'
 import { Text } from '@pancakeswap-libs/uikit'
@@ -14,10 +13,13 @@ const Block = styled.div`
   margin-bottom: 24px;
 `
 
-const CakeWinnings = () => {
+interface CakeWinningsProps {
+  claimAmount: BigNumber
+}
+
+const CakeWinnings: React.FC<CakeWinningsProps> = ({ claimAmount }) => {
   const TranslateString = useI18n()
   const { account } = useWeb3React()
-  const { claimAmount } = useTotalClaim()
   const cakeAmount = getBalanceNumber(claimAmount)
   const cakePriceBusd = usePriceCakeBusd()
   const claimAmountBusd = new BigNumber(cakeAmount).multipliedBy(cakePriceBusd).toNumber()

diff --git a/src/views/Home/components/LotteryCard.tsx b/src/views/Home/components/LotteryCard.tsx
@@ -52,7 +52,7 @@ const LotteryCard = () => {
   const TranslateString = useI18n()
   const allowance = useLotteryAllowance()
   const [onPresentApprove] = useModal(<PurchaseWarningModal />)
-  const { claimAmount } = useTotalClaim()
+  const { claimAmount, setLastUpdated } = useTotalClaim()
   const { onMultiClaim } = useMultiClaimLottery()
   const cakeBalance = useTokenBalance(getCakeAddress())
   const { handleApprove, requestedApproval } = useApproval(onPresentApprove)
@@ -64,11 +64,12 @@ const LotteryCard = () => {
       // user rejected tx or didn't go thru
       if (txHash) {
         setRequestedClaim(false)
+        setLastUpdated()
       }
     } catch (e) {
       console.error(e)
     }
-  }, [onMultiClaim, setRequestedClaim])
+  }, [onMultiClaim, setRequestedClaim, setLastUpdated])
 
   const renderLotteryTicketButtonBuyOrApprove = () => {
     if (!allowance.toNumber()) {
@@ -96,7 +97,7 @@ const LotteryCard = () => {
         <CardImage src="/images/ticket.svg" alt="cake logo" width={64} height={64} />
         <Block>
           <Label>{TranslateString(552, 'CAKE to Collect')}:</Label>
-          <CakeWinnings />
+          <CakeWinnings claimAmount={claimAmount} />
         </Block>
         <Block>
           <Label>{TranslateString(554, 'Total jackpot this round')}:</Label>

diff --git a/src/views/Lottery/NextDrawPage.tsx b/src/views/Lottery/NextDrawPage.tsx
@@ -1,15 +1,15 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import styled from 'styled-components'
 import { useWeb3React } from '@web3-react/core'
 import { BaseLayout } from '@pancakeswap-libs/uikit'
-import { getBalanceNumber } from 'utils/formatBalance'
 import { useTotalClaim } from 'hooks/useTickets'
 import YourPrizesCard from './components/YourPrizesCard'
 import UnlockWalletCard from './components/UnlockWalletCard'
 import TicketCard from './components/TicketCard'
 import TotalPrizesCard from './components/TotalPrizesCard'
 import WinningNumbers from './components/WinningNumbers'
 import HowItWorks from './components/HowItWorks'
+import { getBalanceNumber } from '../../utils/formatBalance'
 
 const Cards = styled(BaseLayout)`
   align-items: start;
@@ -39,10 +39,14 @@ const SecondCardColumnWrapper = styled.div<{ isAWin?: boolean }>`
 
 const NextDrawPage: React.FC = () => {
   const { account } = useWeb3React()
-  const { claimAmount } = useTotalClaim()
+  const { claimAmount, setLastUpdated } = useTotalClaim()
   const winnings = getBalanceNumber(claimAmount)
   const isAWin = winnings > 0
 
+  const handleSuccess = useCallback(() => {
+    setLastUpdated()
+  }, [setLastUpdated])
+
   return (
     <>
       <Cards>
@@ -52,7 +56,7 @@ const NextDrawPage: React.FC = () => {
             <UnlockWalletCard />
           ) : (
             <>
-              <YourPrizesCard />
+              <YourPrizesCard isAWin={isAWin} onSuccess={handleSuccess} />
               <TicketCard isSecondCard={isAWin} />
             </>
           )}

diff --git a/src/views/Lottery/components/YourPrizesCard/index.tsx b/src/views/Lottery/components/YourPrizesCard/index.tsx
@@ -1,47 +1,38 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 import { Card, CardBody } from '@pancakeswap-libs/uikit'
-import { getBalanceNumber } from 'utils/formatBalance'
-import { useTotalClaim } from 'hooks/useTickets'
-import useLastUpdated from 'hooks/useLastUpdated'
 import PrizesWonContent from './PrizesWonContent'
 import NoPrizesContent from './NoPrizesContent'
 
 const StyledCard = styled(Card)`
-  margin-top: 16px;
-
-  ${({ theme }) => theme.mediaQueries.sm} {
-    margin-top: 24px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    margin-top: 32px;
-  }
-
   ${(props) =>
     props.isDisabled
-      ? `
+      ? `  
+        margin-top: 16px;
         background-color: unset;
         box-shadow: unset;
         border: 1px solid ${props.theme.colors.textDisabled};
+
+        ${props.theme.mediaQueries.sm} {
+          margin-top: 24px;
+        }
+
+        ${props.theme.mediaQueries.lg} {
+          margin-top: 32px;
+        }
         `
       : ``}
 `
 
-const YourPrizesCard: React.FC = () => {
-  const { claimAmount } = useTotalClaim()
-  const { setLastUpdated } = useLastUpdated()
-
-  const winnings = getBalanceNumber(claimAmount)
-  const isAWin = winnings > 0
-
-  const handleSuccess = useCallback(() => {
-    setLastUpdated()
-  }, [setLastUpdated])
+interface YourPrizesCardProps {
+  isAWin: boolean
+  onSuccess: () => void
+}
 
+const YourPrizesCard: React.FC<YourPrizesCardProps> = ({ isAWin, onSuccess }) => {
   return (
     <StyledCard isDisabled={!isAWin} isActive={isAWin}>
-      <CardBody>{isAWin ? <PrizesWonContent onSuccess={handleSuccess} /> : <NoPrizesContent />}</CardBody>
+      <CardBody>{isAWin ? <PrizesWonContent onSuccess={onSuccess} /> : <NoPrizesContent />}</CardBody>
     </StyledCard>
   )
 }