Skip to content

Commit

Permalink
Merge pull request #68 from lum-network/feature/lum-908
Browse files Browse the repository at this point in the history 
[LUM-908] Millions WebApp -> Fix failed draws display
  • Loading branch information
@greedyboi
greedyboi authored Jun 3, 2024
2 parents 6d6df8b + ad6f0a4 commit c7fc155
Showing 1 changed file with 24 additions and 16 deletions.
40 changes: 24 additions & 16 deletions src/pages/PoolDetails/PoolDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { Error404 } from 'pages';
import { Dispatch, RootState } from 'redux/store';
import { LeaderboardItemModel } from 'models';
import { DenomsUtils, Firebase, I18n, WalletUtils, WalletProvidersUtils, NumbersUtils, PoolsUtils } from 'utils';
import { Draw } from '@lum-network/sdk-javascript/build/codegen/lum/network/millions/draw';
import { Draw, DrawState } from '@lum-network/sdk-javascript/build/codegen/lum/network/millions/draw';
import Skeleton from 'react-loading-skeleton';

import DrawDetailsModal from './components/DrawDetailsModal/DrawDetailsModal';
Expand All @@ -38,6 +38,7 @@ const PoolDetails = () => {
biggestPrizes: state.prizes.prizes,
prizesStats: state.prizes.stats,
}));

const loadingFetchPools = useSelector((state: RootState) => state.loading.effects.pools.fetchPools);
const loadingAdditionalInfo = useSelector((state: RootState) => state.loading.effects.pools.getPoolsAdditionalInfo);

Expand All @@ -47,13 +48,18 @@ const PoolDetails = () => {
const [smallDrawsHistoryVisibleItem, setSmallDrawsHistoryVisibleItem] = useState(0);
const [drawInProgress, setDrawInProgress] = useState(false);
const [selectedDraw, setSelectedDraw] = useState<Draw | null>(null);
const [poolDraws, setPoolDraws] = useState<Draw[]>([]);
const [userRankItems, setUserRankItems] = useState<LeaderboardItemModel[] | undefined>();

const modalRef = useRef<React.ElementRef<typeof Modal>>(null);

useEffect(() => {
dispatch.prizes.fetchPrizes({ page: 0, poolId: poolId });
dispatch.prizes.getStats(poolId || '');

if (pool && pool.draws && pool.draws.length > 0) {
setPoolDraws(pool.draws.filter((draw) => draw.errorState === DrawState.DRAW_STATE_UNSPECIFIED));
}
}, [poolId, denom]);

useEffect(() => {
Expand Down Expand Up @@ -473,7 +479,7 @@ const PoolDetails = () => {
</div>
</>
)}
{pool.draws && pool.draws.length > 0 && (
{poolDraws && poolDraws.length > 0 && (
<div className='row'>
<div className='col-12'>
<h2 className='mb-2 mb-lg-4 mt-4 mt-lg-5'>{I18n.t('poolDetails.drawsHistory.title')}</h2>
Expand All @@ -483,8 +489,8 @@ const PoolDetails = () => {
<div
className='d-flex flex-column'
onClick={() => {
if (pool.draws) {
setSelectedDraw(pool.draws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]);
if (poolDraws) {
setSelectedDraw(poolDraws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]);
modalRef.current?.show();
}
}}
Expand All @@ -493,29 +499,31 @@ const PoolDetails = () => {
<label>{drawHistoryHeaders[0]}</label>
<div className='stat-bg-white'>
<div className='d-flex align-items-center justify-content-center index-container'>
#{pool.draws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.drawId.toString()}
#{poolDraws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.drawId.toString()}
</div>
</div>
</div>
<div className='d-flex flex-column'>
<label>{drawHistoryHeaders[1]}</label>
<div className='stat-bg-white'>
<div className='draw-date'>
{dayjs(pool.draws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.createdAt).format('DD MMM YYYY - hh:mmA')}
{dayjs(poolDraws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.createdAt).format('DD MMM YYYY - hh:mmA')}
</div>
</div>
</div>
<div className='d-flex flex-column my-3'>
<label>{drawHistoryHeaders[2]}</label>
<div className='stat-bg-white'>{pool.draws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.totalWinCount.toString()}</div>
<div className='stat-bg-white'>{poolDraws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.totalWinCount.toString()}</div>
</div>
<div className='d-flex flex-column'>
<label>{drawHistoryHeaders[3]}</label>
<div className='stat-bg-white'>
<SmallerDecimal
nb={numeral(
NumbersUtils.convertUnitNumber(pool.draws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.totalWinAmount || '0') *
(prices[denom] || 1),
NumbersUtils.convertUnitNumber(
poolDraws[(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem]?.totalWinAmount || '0',
pool.nativeDenom,
) * (prices[denom] || 1),
).format('$0,0[.]00')}
/>
</div>
Expand All @@ -540,7 +548,7 @@ const PoolDetails = () => {
<button
type='button'
className='d-flex align-items-center justify-content-center py-1 w-100 selectable-btn ms-4'
disabled={(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem === pool.draws.length - 1}
disabled={(drawsHistoryPage - 1) * 5 + smallDrawsHistoryVisibleItem === poolDraws.length - 1}
onClick={() => {
if (smallDrawsHistoryVisibleItem === 4) {
setDrawsHistoryPage(drawsHistoryPage + 1);
Expand All @@ -558,8 +566,8 @@ const PoolDetails = () => {
pagination={{
page: drawsHistoryPage,
hasPreviousPage: drawsHistoryPage > 1,
hasNextPage: drawsHistoryPage < Math.ceil(pool.draws.length / 5),
pagesTotal: Math.ceil(pool.draws.length / 5),
hasNextPage: drawsHistoryPage < Math.ceil(poolDraws.length / 5),
pagesTotal: Math.ceil(poolDraws.length / 5),
}}
onPageChange={(page) => {
setSmallDrawsHistoryVisibleItem(0);
Expand All @@ -573,19 +581,19 @@ const PoolDetails = () => {
headers={drawHistoryHeaders}
responsive={winSizes.width <= Breakpoints.SM}
pagination={
pool.draws.length > 5
poolDraws.length > 5
? {
page: drawsHistoryPage,
pagesTotal: Math.ceil(pool.draws.length / 5),
hasNextPage: drawsHistoryPage < Math.ceil(pool.draws.length / 5),
pagesTotal: Math.ceil(poolDraws.length / 5),
hasNextPage: drawsHistoryPage < Math.ceil(poolDraws.length / 5),
hasPreviousPage: drawsHistoryPage > 1,
}
: undefined
}
customPagination='draws-history-pagination'
onPageChange={(page) => setDrawsHistoryPage(page)}
>
{pool.draws.slice((drawsHistoryPage - 1) * 5, (drawsHistoryPage - 1) * 5 + 5).map((draw, index) => {
{poolDraws.slice((drawsHistoryPage - 1) * 5, (drawsHistoryPage - 1) * 5 + 5).map((draw, index) => {
return (
<tr
key={`draw-${index}`}
Expand Down

0 comments on commit c7fc155

Please sign in to comment.