Skip to content

Commit

Permalink
chore: update code
Browse files Browse the repository at this point in the history
  • Loading branch information
@camewell071
camewell071 committed Jan 26, 2024
1 parent 48b233c commit f406c1a
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 88 deletions.
169 changes: 99 additions & 70 deletions src/modules/Whitelist/leaderBoard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Avatar from '@/components/Avatar';
import ListTable, { ColumnProp } from './ListTable';
import { ILeaderBoardPoint } from '@/interfaces/leader-board-point';
import { getTopLeaderBoards } from '@/services/whitelist';
import { formatCurrency, formatName } from '@/utils/format';
import { formatCurrency } from '@/utils/format';
import orderBy from 'lodash/orderBy';
import uniqBy from 'lodash/uniqBy';
import { Box, Flex, Text, Tooltip } from '@chakra-ui/react';
Expand Down Expand Up @@ -149,6 +149,11 @@ const LeaderBoard = (props: IProps) => {
fontWeight: 500
};

const _formatPoint = (point: string | number) => {
const _point = formatCurrency(point, 0, 0)
return (!!_point && _point !== '0') ? _point : '-';
}

const columns: ColumnProp[] = useMemo(() => {
return [
{
Expand Down Expand Up @@ -304,10 +309,8 @@ const LeaderBoard = (props: IProps) => {
>
<Flex alignItems={'center'} gap={2}>
<Text className={styles.title}>
{formatCurrency(
{_formatPoint(
new BigNumber(data?.point || '0').toNumber(),
0,
0,
)}
</Text>
</Flex>
Expand Down Expand Up @@ -361,6 +364,10 @@ const LeaderBoard = (props: IProps) => {
letterSpacing: '-0.5px',
},
render(data: ILeaderBoardPoint) {
const point = new BigNumber(data?.celestia_point || 0)
.plus(data?.eigenlayer_point || 0)
.plus(data?.polygon_point || 0)
.toNumber();
return (
<Flex
gap={3}
Expand All @@ -370,12 +377,12 @@ const LeaderBoard = (props: IProps) => {
>
<Flex alignItems={'center'} gap={'4px'}>
<Text className={styles.title}>
{formatCurrency(new BigNumber(data?.celestia_point || 0)
{_formatPoint(new BigNumber(data?.celestia_point || 0)
.plus(data?.eigenlayer_point || 0)
.plus(data?.polygon_point || 0)
.toNumber(), 0, 0)}
.toNumber())}
</Text>
{data.need_active ? (
{(data.need_active && !!point) ? (
<Tooltip
minW="160px"
bg="white"
Expand All @@ -384,10 +391,10 @@ const LeaderBoard = (props: IProps) => {
padding="8px"
label={
<Flex direction="column" color="black" opacity={0.7}>
<p>Eigenlayer: {formatCurrency(data.eigenlayer_point || '0', 0, 0)}</p>
<p>Celestia: {formatCurrency(data.celestia_point || '0', 0, 0)}</p>
<p>Polygon: {formatCurrency(data.polygon_point || '0', 0, 0)}</p>
<p>Manta: {formatCurrency(data.manta_point || '0', 0, 0)}</p>
<p>Eigenlayer: {_formatPoint(data.eigenlayer_point || '0')}</p>
<p>Celestia: {_formatPoint(data.celestia_point || '0')}</p>
<p>Polygon: {_formatPoint(data.polygon_point || '0')}</p>
<p>Manta: {_formatPoint(data.manta_point || '0')}</p>
</Flex>
}
>
Expand Down Expand Up @@ -463,7 +470,7 @@ const LeaderBoard = (props: IProps) => {
>
<Flex alignItems={'center'} gap={2}>
<Text className={styles.title}>
{formatCurrency(data?.gas_point, 0, 0)}
{_formatPoint(data?.gas_point || '0')}
</Text>
</Flex>
</Flex>
Expand Down Expand Up @@ -513,6 +520,11 @@ const LeaderBoard = (props: IProps) => {
letterSpacing: '-0.5px',
},
render(data: ILeaderBoardPoint) {
const point = new BigNumber(data?.optimism_point || 0)
.plus(data?.blast_point || 0)
.plus(data?.base_point || 0)
.plus(data?.arb_point || 0)
.toNumber();
return (
<Flex
style={{
Expand All @@ -524,13 +536,9 @@ const LeaderBoard = (props: IProps) => {
}}
>
<Text className={styles.title}>
{formatCurrency(new BigNumber(data?.optimism_point || 0)
.plus(data?.blast_point || 0)
.plus(data?.base_point || 0)
.plus(data?.arb_point || 0)
.toString(), 0, 0)}
{_formatPoint(point)}
</Text>
{data.need_active ? (
{data.need_active && !!point ? (
<Tooltip
minW="160px"
bg="white"
Expand All @@ -539,10 +547,10 @@ const LeaderBoard = (props: IProps) => {
padding="8px"
label={
<Flex direction="column" color="black" opacity={0.7}>
<p>Optimism: {formatCurrency(data.optimism_point || '0', 0, 0)}</p>
<p>Blast: {formatCurrency(data.blast_point || '0', 0, 0)}</p>
<p>Base: {formatCurrency(data.base_point || '0', 0, 0)}</p>
<p>Arbitrum: {formatCurrency(data.arb_point || '0', 0, 0)}</p>
<p>Optimism: {_formatPoint(data.optimism_point || '0')}</p>
<p>Blast: {_formatPoint(data.blast_point || '0')}</p>
<p>Base: {_formatPoint(data.base_point || '0')}</p>
<p>Arbitrum: {_formatPoint(data.arb_point || '0')}</p>
</Flex>
}
>
Expand Down Expand Up @@ -590,6 +598,7 @@ const LeaderBoard = (props: IProps) => {
letterSpacing: '-0.5px',
},
render(data: ILeaderBoardPoint) {
const point = new BigNumber(data?.game_point || 0).toNumber();
return (
<Flex
gap={'4px'}
Expand All @@ -599,9 +608,9 @@ const LeaderBoard = (props: IProps) => {
>
<Flex alignItems={'center'} gap={'4px'}>
<Text className={styles.title}>
{formatCurrency(data?.game_point, 0, 0)}
{data.need_active ? point ? _formatPoint(point) : '' : _formatPoint(point)}
</Text>
{data.need_active && !Number(data?.game_point || '0') && (
{data.need_active && !point && (
<button onClick={() => props.setIndex(1)} className={styles.button}>GET</button>
)}
</Flex>
Expand All @@ -610,18 +619,38 @@ const LeaderBoard = (props: IProps) => {
},
},
{
id: 'eco',
id: 'refer',
label: (
<Flex
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
width: '100%',
gap: '4px',
textTransform: 'uppercase',
}}
gap="3px"
>
<p style={{ textTransform: 'uppercase' }}>ECO PTS</p>
<p style={{ textTransform: 'uppercase' }}>INVITE PTS</p>
<Tooltip
minW="220px"
bg="white"
boxShadow="rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;"
borderRadius="4px"
padding="8px"
label={
<Flex direction="column" color="black" opacity={0.7}>
<p>
Referral points are calculated based on the total number of
friends you refer to the allowlist.
</p>
</Flex>
}
>
<img
className={styles.tooltipIcon}
src={`${CDN_URL_ICONS}/info-circle.svg`}
/>
</Tooltip>
</Flex>
),
labelConfig,
Expand All @@ -633,63 +662,39 @@ const LeaderBoard = (props: IProps) => {
letterSpacing: '-0.5px',
},
render(data: ILeaderBoardPoint) {
const point = new BigNumber(data?.alpha_point || 0).plus(data?.bvm_point || 0).plus(data?.naka_point || 0)
const point = new BigNumber(data?.refer_point || 0).toNumber()
return (
<Flex
gap={'4px'}
gap={3}
alignItems={'center'}
width={'100%'}
justifyContent={'center'}
>
<Flex alignItems={'center'} gap={'4px'}>
<Flex alignItems={'center'} gap={2}>
<Text className={styles.title}>
{formatCurrency(point.toFixed(), 0, 0)}
{data.need_active ? point ? _formatPoint(point) : '' : _formatPoint(point)}
</Text>
{data.need_active && !point.toNumber() && (
<button onClick={() => props.setIndex(1)} className={styles.button}>GET</button>
)}
{data.need_active && (
<Tooltip
minW="180px"
bg="white"
boxShadow="rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;"
borderRadius="4px"
padding="8px"
label={
<Flex direction="column" color="black" opacity={0.7}>
<p>Naka: {formatCurrency(data.naka_point || '0', 0, 0)}</p>
<p>BVM: {formatCurrency(data.bvm_point || '0', 0, 0)}</p>
<p>SocialFi: {formatCurrency(data.alpha_point || '0', 0, 0)}</p>
</Flex>
}
>
<div>
<SvgInset
size={18}
className={styles.tooltipIconActive}
svgUrl={`${CDN_URL_ICONS}/info-circle.svg`}
/>
</div>
</Tooltip>
{data.need_active && !point && (
<button id="copy-button" onClick={handleShareRefferal} className={styles.button}>GET</button>
)}
</Flex>
</Flex>
);
},
},
{
id: 'refer',
id: 'eco',
label: (
<Flex
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
width: '100%',
textTransform: 'uppercase',
gap: '4px',
}}
gap="3px"
>
<p style={{ textTransform: 'uppercase' }}>INVITE PTS</p>
<p style={{ textTransform: 'uppercase' }}>ECO PTS</p>
<Tooltip
minW="220px"
bg="white"
Expand All @@ -699,8 +704,7 @@ const LeaderBoard = (props: IProps) => {
label={
<Flex direction="column" color="black" opacity={0.7}>
<p>
Referral points are calculated based on the total number of
friends you refer to the allowlist.
The Eco points are calculated based on all the tasks you have completed in the Experience BVM section.
</p>
</Flex>
}
Expand All @@ -721,19 +725,44 @@ const LeaderBoard = (props: IProps) => {
letterSpacing: '-0.5px',
},
render(data: ILeaderBoardPoint) {
const point = new BigNumber(data?.alpha_point || 0).plus(data?.bvm_point || 0).plus(data?.naka_point || 0).toNumber()
return (
<Flex
gap={3}
gap={'4px'}
alignItems={'center'}
width={'100%'}
justifyContent={'center'}
>
<Flex alignItems={'center'} gap={2}>
<Flex alignItems={'center'} gap={'4px'}>
<Text className={styles.title}>
{formatCurrency(data?.refer_point, 0, 0)}
{data.need_active ? point ? _formatPoint(point) : '' : _formatPoint(point)}
</Text>
{data.need_active && !Number(data?.refer_point || '0') && (
<button id="copy-button" onClick={handleShareRefferal} className={styles.button}>GET</button>
{data.need_active && !point && (
<button onClick={() => props.setIndex(1)} className={styles.button}>GET</button>
)}
{data.need_active && !!point && (
<Tooltip
minW="180px"
bg="white"
boxShadow="rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;"
borderRadius="4px"
padding="8px"
label={
<Flex direction="column" color="black" opacity={0.7}>
<p>Naka: {_formatPoint(data.naka_point || '0')}</p>
<p>BVM: {_formatPoint(data.bvm_point || '0')}</p>
<p>SocialFi: {_formatPoint(data.alpha_point || '0')}</p>
</Flex>
}
>
<div>
<SvgInset
size={18}
className={styles.tooltipIconActive}
svgUrl={`${CDN_URL_ICONS}/info-circle.svg`}
/>
</div>
</Tooltip>
)}
</Flex>
</Flex>
Expand Down Expand Up @@ -795,7 +824,7 @@ const LeaderBoard = (props: IProps) => {
>
<Flex alignItems={'center'} gap={'4px'}>
<Text className={styles.title}>
{formatCurrency(data?.content_point, 0, 0)}
{_formatPoint(data?.content_point)}
</Text>
{data.need_active ? (
<Tooltip
Expand Down
36 changes: 18 additions & 18 deletions src/modules/Whitelist/stepsEco/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,24 +54,6 @@ const StepsEco = ({ setTabIndex }: IProps) => {
desc: 'per match',
},
},
{
project: 'Bitcoin L2s',
title: 'Module store',
desc: `Developers? Create your own Bitcoin L2 blockchain. ${LearnMore("https://docs.bvm.network/bvm/quickstart/create-a-bitcoin-virtual-machine", "Read the whitepaper")}<br/>It’s easy to customize and launch your own Bitcoin L2 blockchain — just a few clicks.`,
actionText: 'Launch now',
image: 'ic-create-bvm.svg',
actionHandle: () => {
setTimeout(() => {
window.open('https://bvm.network/blockchains/customize', '_blank')
}, 200)
},
isActive: true,
right: {
title: '+10,000 PTS',
desc: '',
},
// tag: StepTagType.NEW
},
{
project: 'Bitcoin L2 for DeFi',
title: 'NakaChain Perpetual',
Expand All @@ -93,6 +75,24 @@ const StepsEco = ({ setTabIndex }: IProps) => {
},
tag: StepTagType.NEW
},
{
project: 'Bitcoin L2s',
title: 'Module store',
desc: `Developers? Create your own Bitcoin L2 blockchain. ${LearnMore("https://docs.bvm.network/bvm/quickstart/create-a-bitcoin-virtual-machine", "Read the whitepaper")}<br/>It’s easy to customize and launch your own Bitcoin L2 blockchain — just a few clicks.`,
actionText: 'Launch now',
image: 'ic-create-bvm.svg',
actionHandle: () => {
setTimeout(() => {
window.open('https://bvm.network/blockchains/customize', '_blank')
}, 200)
},
isActive: true,
right: {
title: '+10,000 PTS',
desc: '',
},
// tag: StepTagType.NEW
},
{
project: 'Bitcoin L2 for DeFi',
title: 'NakaChain Swap',
Expand Down

0 comments on commit f406c1a

Please sign in to comment.