Skip to content

Commit

Permalink
Merge pull request #62 from lum-network/hotfix/lum-889
Browse files Browse the repository at this point in the history 
[LUM-889] Millions WebApp -> Chain switch on depositor ranking, my ATOM amount is persisted when changing to HUAHUA pool
  • Loading branch information
@greedyboi
greedyboi authored Feb 27, 2024
2 parents 5f27035 + b5c1af5 commit cbe4879
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 83 deletions.
167 changes: 91 additions & 76 deletions src/components/Leaderboard/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ import { gsap } from 'gsap';
import { Button, Card, Loading, SmallerDecimal } from 'components';
import { Breakpoints, NavigationConstants } from 'constant';
import { useColorScheme, useWindowSize } from 'hooks';
import { LeaderboardItemModel, LumWalletModel } from 'models';
import { LeaderboardItemModel, LumWalletModel, PoolModel } from 'models';
import { DenomsUtils, I18n, WalletProvidersUtils, NumbersUtils, StringsUtils } from 'utils';
import numeral from 'numeral';

import './Leaderboard.scss';
import { useTranslation } from 'react-i18next';

interface Props {
items: LeaderboardItemModel[];
pool: PoolModel;
price: number | undefined;
poolId: string;
hasMore?: boolean;
lumWallet?: LumWalletModel | null;
totalDeposited?: number | null;
Expand All @@ -32,10 +32,11 @@ interface Props {
}

const Leaderboard = (props: Props) => {
const { items, className, limit, lumWallet, price, poolId, totalDeposited, flat, userRank, hasMore, enableAnimation, withSeeMoreBtn, onBottomReached } = props;
const { className, limit, lumWallet, price, pool, totalDeposited, flat, userRank, hasMore, enableAnimation, withSeeMoreBtn, onBottomReached } = props;

const { width: windowWidth } = useWindowSize();
const { isDark } = useColorScheme();
const { t } = useTranslation();

const containerRef = useRef<HTMLDivElement>(null);
const tl = useRef<gsap.core.Timeline>();
Expand Down Expand Up @@ -122,7 +123,7 @@ const Leaderboard = (props: Props) => {

return () => ctx.revert();
}
}, [userRank, items]);
}, [userRank, pool]);

const LeaderboardContainer = ({ children, containerClassName }: { children: React.ReactNode; containerClassName: string }) => {
if (isMobile || windowWidth < Breakpoints.MD) {
Expand Down Expand Up @@ -168,7 +169,7 @@ const Leaderboard = (props: Props) => {
{!(lumWallet && item.address === lumWallet.address) && userRank && userRank.rank > item.rank && totalUserDeposits ? (
<Button
className='deposit-more-btn'
to={`${NavigationConstants.POOLS}/${DenomsUtils.getNormalDenom(item.nativeDenom)}/${poolId}`}
to={`${NavigationConstants.POOLS}/${DenomsUtils.getNormalDenom(item.nativeDenom)}/${pool.poolId.toString()}`}
locationState={{
amountToDeposit: Math.ceil(amount - totalUserDeposits),
}}
Expand All @@ -186,82 +187,96 @@ const Leaderboard = (props: Props) => {
);
};

return (
<LeaderboardContainer containerClassName={`leaderboard ${enableAnimation && 'position-relative with-anim'} ${className}`}>
{!enableAnimation && windowWidth < Breakpoints.MD && userRank && (
<div className={`user-rank leaderboard-rank me d-flex flex-row justify-content-between align-items-center`}>
<div className='d-flex flex-row align-items-center'>
<div className='me-3 rank'>#{userRank.rank}</div>
<div className='address'>{StringsUtils.trunc(userRank.address, windowWidth < Breakpoints.SM ? 3 : 6)}</div>
</div>
<div className='position-relative d-flex flex-row align-items-center justify-content-end'>
<div className='crypto-amount me-3'>
<SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), 3)} /> {DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
const renderLeaderboardContent = () => {
if (pool.leaderboard.items.length === 0) {
return (
<div className='d-flex flex-column align-items-center justify-content-center'>
<h3 className='mb-4'>{t('leaderboard.noDepositYet')}</h3>
<Button to={`${NavigationConstants.POOLS}/${DenomsUtils.getNormalDenom(pool.nativeDenom)}/${pool.poolId.toString()}`} forcePurple>
{I18n.t('mySavings.deposit')}
</Button>
</div>
);
}

return (
<>
{!enableAnimation && windowWidth < Breakpoints.MD && userRank && (
<div className={`user-rank leaderboard-rank me d-flex flex-row justify-content-between align-items-center`}>
<div className='d-flex flex-row align-items-center'>
<div className='me-3 rank'>#{userRank.rank}</div>
<div className='address'>{StringsUtils.trunc(userRank.address, windowWidth < Breakpoints.SM ? 3 : 6)}</div>
</div>
{price && (
<div className='usd-amount'>
$<SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount) * price).format('0,0.00')} />
<div className='position-relative d-flex flex-row align-items-center justify-content-end'>
<div className='crypto-amount me-3'>
<SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), 3)} /> {DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
</div>
)}
{price && (
<div className='usd-amount'>
$<SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount) * price).format('0,0.00')} />
</div>
)}
</div>
</div>
</div>
)}
{onBottomReached ? (
<InfiniteScroll hasMore={hasMore || false} loadMore={onBottomReached} loader={<Loading key={0} />} className='position-relative'>
{enableAnimation && userRank ? (
<div className={`user-rank leaderboard-rank animated me d-flex flex-row justify-content-between align-items-center`}>
<div className='d-flex flex-row align-items-center'>
<div className='me-3 rank'>#{userRank.rank}</div>
<div className='address'>{StringsUtils.trunc(userRank.address, windowWidth < Breakpoints.SM ? 3 : 6)}</div>
</div>
<div className='position-relative d-flex flex-row align-items-center justify-content-end'>
<div className='crypto-amount me-3'>
<SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), windowWidth < Breakpoints.MD ? 3 : 6)} />{' '}
{DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
)}
{onBottomReached ? (
<InfiniteScroll hasMore={hasMore || false} loadMore={onBottomReached} loader={<Loading key={0} />} className='position-relative'>
{enableAnimation && userRank ? (
<div className={`user-rank leaderboard-rank animated me d-flex flex-row justify-content-between align-items-center`}>
<div className='d-flex flex-row align-items-center'>
<div className='me-3 rank'>#{userRank.rank}</div>
<div className='address'>{StringsUtils.trunc(userRank.address, windowWidth < Breakpoints.SM ? 3 : 6)}</div>
</div>
{price ? (
<div className='usd-amount'>
$
<SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount) * price).format('0,0.00')} />
<div className='position-relative d-flex flex-row align-items-center justify-content-end'>
<div className='crypto-amount me-3'>
<SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), windowWidth < Breakpoints.MD ? 3 : 6)} />{' '}
{DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
</div>
) : null}
{price ? (
<div className='usd-amount'>
$
<SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount) * price).format('0,0.00')} />
</div>
) : null}
</div>
</div>
</div>
) : null}
{(limit ? items.slice(0, limit) : items).map(renderRow)}
</InfiniteScroll>
) : (
(limit ? items.slice(0, limit) : items).map(renderRow)
)}
{!enableAnimation && windowWidth > Breakpoints.MD && userRank && (
<>
<hr />
{userRankList.map(renderRow)}
</>
)}
{withSeeMoreBtn && (
<Button
className='mx-sm-auto my-4'
style={{
width: windowWidth < Breakpoints.MD ? '100%' : 'fit-content',
}}
{...(!lumWallet
? {
'data-bs-toggle': 'modal',
'data-bs-target': WalletProvidersUtils.isAnyWalletInstalled() ? '#choose-wallet-modal' : '#get-keplr-modal',
}
: {
to: NavigationConstants.MY_SAVINGS,
locationState: {
leaderboardPoolId: poolId,
},
})}
>
{I18n.t(lumWallet ? 'leaderboard.cta' : 'leaderboard.notConnectedCta')}
</Button>
)}
</LeaderboardContainer>
);
) : null}
{(limit ? pool.leaderboard.items.slice(0, limit) : pool.leaderboard.items).map(renderRow)}
</InfiniteScroll>
) : (
(limit ? pool.leaderboard.items.slice(0, limit) : pool.leaderboard.items).map(renderRow)
)}
{!enableAnimation && windowWidth > Breakpoints.MD && userRank && (
<>
<hr />
{userRankList.map(renderRow)}
</>
)}
{withSeeMoreBtn && (
<Button
className='mx-sm-auto my-4'
style={{
width: windowWidth < Breakpoints.MD ? '100%' : 'fit-content',
}}
{...(!lumWallet
? {
'data-bs-toggle': 'modal',
'data-bs-target': WalletProvidersUtils.isAnyWalletInstalled() ? '#choose-wallet-modal' : '#get-keplr-modal',
}
: {
to: NavigationConstants.MY_SAVINGS,
locationState: {
leaderboardPoolId: pool.poolId.toString(),
},
})}
>
{I18n.t(lumWallet ? 'leaderboard.cta' : 'leaderboard.notConnectedCta')}
</Button>
)}
</>
);
};
return <LeaderboardContainer containerClassName={`leaderboard ${enableAnimation && 'position-relative with-anim'} ${className}`}>{renderLeaderboardContent()}</LeaderboardContainer>;
};

export default Leaderboard;
1 change: 1 addition & 0 deletions src/locales/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -589,6 +589,7 @@ export default {
notConnectedCta: 'Log in to see more',
depositBtn: 'Deposit {{ amount }} {{ denom }} to take his place',
newRanking: 'You new ranking will be displayed in a few minutes',
noDepositYet: 'No deposit yet',
},
depositDrops: {
myDeposits: {
Expand Down
12 changes: 7 additions & 5 deletions src/pages/MySavings/MySavings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,12 @@ const MySavings = () => {
const totalDeposited = WalletUtils.getTotalBalanceFromDeposits(deposits, prices);
const totalDepositedCrypto = WalletUtils.getTotalBalanceFromDeposits(deposits);
const totalBalancePrice = balances ? numeral(totalDeposited).format('$0,0[.]00') : '';
const leaderboardPool = leaderboardSelectedPoolId ? PoolsUtils.getPoolByPoolId(pools, leaderboardSelectedPoolId) : undefined;
const prizesToClaim = prizes && prizes.filter((prize) => prize.state === PrizesConstants.PrizeState.PENDING);

const leaderboardPool = useMemo(() => {
return leaderboardSelectedPoolId ? PoolsUtils.getPoolByPoolId(pools, leaderboardSelectedPoolId) : undefined;
}, [leaderboardSelectedPoolId]);

useEffect(() => {
const getLeaderboardUserRank = async () => {
if (leaderboardPool && lumWallet) {
Expand Down Expand Up @@ -451,7 +454,7 @@ const MySavings = () => {
</Card>
</>
) : null}
{leaderboardPool && leaderboardPool.leaderboard?.items.length ? (
{leaderboardPool ? (
<div ref={leaderboardSectionRef} className='leaderboard-section'>
<div className='mt-5 mb-3 d-flex flex-row align-items-center justify-content-between'>
<div className='d-flex align-items-center'>
Expand All @@ -476,7 +479,7 @@ const MySavings = () => {
/>
</div>
<Leaderboard
items={leaderboardPool.leaderboard.items}
pool={leaderboardPool}
enableAnimation={!!userRankItems}
userRank={
userRankItems
Expand All @@ -487,10 +490,9 @@ const MySavings = () => {
}
: undefined
}
poolId={leaderboardPool.poolId.toString()}
price={prices[DenomsUtils.getNormalDenom(leaderboardPool.nativeDenom)]}
hasMore={!leaderboardPool.leaderboard.fullyLoaded}
onBottomReached={async () => {
onBottomReached={() => {
if (isLoadingNextLeaderboardPage) {
return;
}
Expand Down
3 changes: 1 addition & 2 deletions src/pages/PoolDetails/PoolDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,8 +373,7 @@ const PoolDetails = () => {
</div>
<Leaderboard
flat
items={pool.leaderboard.items}
poolId={pool.poolId.toString()}
pool={pool}
limit={5}
withSeeMoreBtn
lumWallet={lumWallet}
Expand Down

0 comments on commit cbe4879

Please sign in to comment.