Skip to content

Commit aa61677

Browse files
rick23ptiltom
rick23p
and
tiltom
authored
SOV-4251: Spice Season 2 Leaderboard (#945)
* feat: season2 leaderboard * Create warm-buttons-camp.md * Fix review comments * Use live data * Copy adjustments * Make season 2 the default option --------- Co-authored-by: tiltom <[email protected]>
1 parent bcb8f74 commit aa61677

File tree

15 files changed

+302
-139
lines changed

15 files changed

+302
-139
lines changed

‎.changeset/warm-buttons-camp.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"frontend": patch
3+
---
4+
5+
SOV-4251: Spice Season 2 Leaderboard

‎apps/frontend/src/app/5_pages/ClaimLpPage/ClaimLpPage.tsx

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,7 @@ import { useNavigate } from 'react-router-dom';
88
import {
99
Button,
1010
ButtonStyle,
11-
Checkbox,
1211
Heading,
13-
Icon,
14-
IconNames,
1512
Link,
1613
Paragraph,
1714
ParagraphSize,
@@ -34,8 +31,6 @@ const ClaimLpPage: FC = () => {
3431
const navigate = useNavigate();
3532
const [loading, setLoading] = useState(false);
3633
const [claimable, setClaimable] = useState<Claim[]>([]);
37-
const [hasDisclaimerBeenChecked, setHasDisclaimerBeenChecked] =
38-
useState(false);
3934

4035
const { claim, getUnclaimed } = useClaimLp();
4136
const { checkMaintenance, States } = useMaintenance();
@@ -46,15 +41,8 @@ const ClaimLpPage: FC = () => {
4641
chainId === BOB_CHAIN_ID &&
4742
claimable.length > 0 &&
4843
!loading &&
49-
hasDisclaimerBeenChecked &&
5044
!isClaimLocked,
51-
[
52-
chainId,
53-
claimable.length,
54-
loading,
55-
hasDisclaimerBeenChecked,
56-
isClaimLocked,
57-
],
45+
[chainId, claimable.length, loading, isClaimLocked],
5846
);
5947

6048
const handleClaim = useCallback(() => {
@@ -161,30 +149,15 @@ const ClaimLpPage: FC = () => {
161149
<Trans
162150
i18nKey={t(translations.claimLpPage.eSovDescription)}
163151
components={[
164-
<strong>date</strong>,
165-
<Link text="Read more" href={CAMPAIGN_URL} />,
152+
<Button
153+
style={ButtonStyle.ghost}
154+
text={t(translations.claimLpPage.leaderboard)}
155+
onClick={() => navigate('/bob-lp-points')}
156+
/>,
166157
]}
167158
/>
168159
</Paragraph>
169160
</div>
170-
<div className="flex items-center rounded border border-warning p-4 pl-2 mt-2">
171-
<div className="px-2 text-warning">
172-
<Icon icon={IconNames.WARNING} size={24} />
173-
</div>
174-
<Paragraph>
175-
<Trans
176-
i18nKey={t(translations.claimLpPage.claimWarning)}
177-
components={[<strong>date</strong>, <strong>date</strong>]}
178-
/>
179-
</Paragraph>
180-
</div>
181-
<div className="mt-2">
182-
<Checkbox
183-
checked={hasDisclaimerBeenChecked}
184-
onChangeValue={setHasDisclaimerBeenChecked}
185-
label={t(translations.claimLpPage.disclaimer)}
186-
/>
187-
</div>
188161
<div className="mt-2 text-center">
189162
<Button
190163
text={t(translations.claimLpPage.cta)}

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.constants.tsx

Lines changed: 12 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,23 @@ import React from 'react';
22

33
import { t } from 'i18next';
44

5-
import { prettyTx } from '@sovryn/ui';
6-
7-
import { AmountRenderer } from '../../2_molecules/AmountRenderer/AmountRenderer';
85
import { translations } from '../../../locales/i18n';
9-
import { User } from './LeaderboardPointsPage.types';
10-
import { BalanceRenderer } from './components/BalanceRenderer/BalanceRenderer';
11-
12-
export const CAMPAIGN_URL = 'https://wiki.sovryn.com/en/spice-campaign';
6+
import { LeaderboardPointsSeason1 } from './components/LeaderboardPointsSeason1/LeaderboardPointsSeason1';
7+
import { LeaderboardPointsSeason2 } from './components/LeaderboardPointsSeason2/LeaderboardPointsSeason2';
138

14-
export const MAXIMUM_USERS_TO_SHOW = 50;
15-
export const EXTRA_SPICE_POINTS_MULTIPLIER = 0.5;
16-
export const RUNES_POINTS_MULTIPLIER = 3.14;
9+
const ACTIVE_CLASSNAME = 'border-t-primary-30';
1710

18-
export const COLUMNS_CONFIG = (isSingleUser: boolean = false) => [
19-
{
20-
id: isSingleUser ? 'position' : '',
21-
title: isSingleUser
22-
? t(translations.leaderboardPointsPage.table.yourPosition)
23-
: '',
24-
cellRenderer: (user: User) => user.id,
25-
},
26-
{
27-
id: isSingleUser ? '' : 'wallet',
28-
title: isSingleUser
29-
? ''
30-
: t(translations.leaderboardPointsPage.table.participant),
31-
cellRenderer: (user: User) => (
32-
<div className="text-right lg:text-left w-full">
33-
{prettyTx(user.wallet, 4)}
34-
</div>
35-
),
36-
},
37-
{
38-
id: 'balance',
39-
title: t(translations.leaderboardPointsPage.table.balance),
40-
cellRenderer: (user: User) => <BalanceRenderer user={user} />,
41-
},
42-
{
43-
id: 'spice',
44-
title: t(translations.leaderboardPointsPage.table.spice),
45-
cellRenderer: (user: User) => <AmountRenderer value={user.spice} />,
46-
},
47-
{
48-
id: 'extraSpice',
49-
title: t(translations.leaderboardPointsPage.table.extraSpice),
50-
cellRenderer: (user: User) => <AmountRenderer value={user.extraSpice} />,
51-
},
11+
export const TAB_ITEMS = [
5212
{
53-
id: 'extraSpiceShot',
54-
title: t(translations.leaderboardPointsPage.table.extraSpiceShot),
55-
cellRenderer: (user: User) => (
56-
<AmountRenderer value={user.extraSpiceShot} />
57-
),
13+
label: t(translations.leaderboardPointsPage.season1),
14+
content: <LeaderboardPointsSeason1 />,
15+
activeClassName: ACTIVE_CLASSNAME,
16+
dataAttribute: 'season-1',
5817
},
5918
{
60-
id: 'runes',
61-
title: t(translations.leaderboardPointsPage.table.runes),
62-
cellRenderer: (user: User) => <AmountRenderer value={user.runes} />,
19+
label: t(translations.leaderboardPointsPage.season2),
20+
content: <LeaderboardPointsSeason2 />,
21+
activeClassName: ACTIVE_CLASSNAME,
22+
dataAttribute: 'season-2',
6323
},
6424
];

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import React, { FC } from 'react';
1+
import React, { FC, useState } from 'react';
22

33
import { t } from 'i18next';
44
import { Helmet } from 'react-helmet-async';
5-
import { Trans } from 'react-i18next';
65
import { useNavigate } from 'react-router-dom';
76

8-
import { Button, ButtonSize, Heading, Link, Paragraph } from '@sovryn/ui';
7+
import { Button, ButtonSize, Heading, Tabs } from '@sovryn/ui';
98

109
import { translations } from '../../../locales/i18n';
11-
import { CAMPAIGN_URL } from './LeaderboardPointsPage.constants';
12-
import { LeaderboardPointsFrame } from './components/LeaderboardPointsFrame/LeaderboardPointsFrame';
10+
import { TAB_ITEMS } from './LeaderboardPointsPage.constants';
1311

1412
const LeaderboardPointsPage: FC = () => {
1513
const navigate = useNavigate();
14+
const [tabIndex, setTabIndex] = useState(1);
1615

1716
return (
1817
<>
@@ -25,12 +24,12 @@ const LeaderboardPointsPage: FC = () => {
2524
{t(translations.leaderboardPointsPage.title)}
2625
</Heading>
2726

28-
<Paragraph className="text-center mb-6 lg:mb-6 text-xs leading-5 max-w-md">
27+
{/* <Paragraph className="text-center mb-6 lg:mb-6 text-xs leading-5 max-w-md">
2928
<Trans
3029
i18nKey={t(translations.leaderboardPointsPage.claimWarning)}
3130
components={[<strong>date</strong>, <strong>date</strong>]}
3231
/>
33-
</Paragraph>
32+
</Paragraph> */}
3433

3534
<div className="flex lg:flex-row flex-col items-center justify-center max-w-md">
3635
<Button
@@ -39,14 +38,15 @@ const LeaderboardPointsPage: FC = () => {
3938
onClick={() => navigate('/claim-lp')}
4039
size={ButtonSize.large}
4140
/>
42-
<Link
43-
href={CAMPAIGN_URL}
44-
text={t(translations.leaderboardPointsPage.aboutCampaign)}
45-
/>
4641
</div>
4742

4843
<div className="w-full md:bg-gray-90 md:py-7 md:px-6 rounded lg:mt-14 mt-7">
49-
<LeaderboardPointsFrame />
44+
<Tabs
45+
index={tabIndex}
46+
items={TAB_ITEMS}
47+
onChange={setTabIndex}
48+
className="w-full mt-12"
49+
/>
5050
</div>
5151
</div>
5252
</>

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/LeaderboardPointsPage.utils.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
11
import React from 'react';
22

33
import { Paragraph, prettyTx } from '@sovryn/ui';
4-
4+
import { UserExtraPoints, UserPoints } from './LeaderboardPointsPage.types';
55
import { areAddressesEqual } from '../../../utils/helpers';
6-
import {
7-
User,
8-
UserExtraPoints,
9-
UserPoints,
10-
} from './LeaderboardPointsPage.types';
116

12-
export const generateRowTitle = (user: User) => (
7+
export const generateRowTitle = (id: number, wallet: string) => (
138
<Paragraph className="flex justify-between w-full">
14-
<span>{user.id}</span>
15-
<span>{prettyTx(user.wallet, 4)}</span>
9+
<span>{id}</span>
10+
<span>{prettyTx(wallet, 4)}</span>
1611
</Paragraph>
1712
);
1813

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/BalanceRenderer/BalanceRenderer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { FC, useMemo } from 'react';
33
import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
44
import { areAddressesEqual } from '../../../../../utils/helpers';
55
import { User, UserDeposit } from '../../LeaderboardPointsPage.types';
6-
import usersDeposits from '../../data/usersDeposits.json';
6+
import usersDeposits from './data/usersDeposits.json';
77

88
type BalanceRendererProps = {
99
user: User;

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/data/usersDeposits.json renamed to ‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/BalanceRenderer/data/usersDeposits.json

File renamed without changes.

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason1/LeaderboardPointsSeason1.constants.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
3+
import { t } from 'i18next';
4+
5+
import { prettyTx } from '@sovryn/ui';
6+
7+
import { AmountRenderer } from '../../../../2_molecules/AmountRenderer/AmountRenderer';
8+
import { translations } from '../../../../../locales/i18n';
9+
import { User } from '../../LeaderboardPointsPage.types';
10+
import { BalanceRenderer } from '../BalanceRenderer/BalanceRenderer';
11+
12+
export const PAGE_SIZE = 50;
13+
export const EXTRA_SPICE_POINTS_MULTIPLIER = 0.5;
14+
export const RUNES_POINTS_MULTIPLIER = 3.14;
15+
16+
export const COLUMNS_CONFIG = (isSingleUser: boolean = false) => [
17+
{
18+
id: isSingleUser ? 'position' : '',
19+
title: isSingleUser
20+
? t(translations.leaderboardPointsPage.table.yourPosition)
21+
: '',
22+
cellRenderer: (user: User) => user.id,
23+
},
24+
{
25+
id: isSingleUser ? '' : 'wallet',
26+
title: isSingleUser
27+
? ''
28+
: t(translations.leaderboardPointsPage.table.participant),
29+
cellRenderer: (user: User) => (
30+
<div className="text-right lg:text-left w-full">
31+
{prettyTx(user.wallet, 4)}
32+
</div>
33+
),
34+
},
35+
{
36+
id: 'balance',
37+
title: t(translations.leaderboardPointsPage.table.balance),
38+
cellRenderer: (user: User) => <BalanceRenderer user={user} />,
39+
},
40+
{
41+
id: 'spice',
42+
title: t(translations.leaderboardPointsPage.table.spice),
43+
cellRenderer: (user: User) => <AmountRenderer value={user.spice} />,
44+
},
45+
{
46+
id: 'extraSpice',
47+
title: t(translations.leaderboardPointsPage.table.extraSpice),
48+
cellRenderer: (user: User) => <AmountRenderer value={user.extraSpice} />,
49+
},
50+
{
51+
id: 'runes',
52+
title: t(translations.leaderboardPointsPage.table.runes),
53+
cellRenderer: (user: User) => <AmountRenderer value={user.runes} />,
54+
},
55+
];

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsFrame/LeaderboardPointsFrame.tsx renamed to ‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason1/LeaderboardPointsSeason1.tsx

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,34 @@ import React, { FC } from 'react';
22

33
import { t } from 'i18next';
44

5-
import { Pagination, Paragraph, Table } from '@sovryn/ui';
5+
import { Pagination, Table } from '@sovryn/ui';
66

77
import { ConnectWalletMessage } from '../../../../2_molecules/ConnectWalletMessage/ConnectWalletMessage';
88
import { useAccount } from '../../../../../hooks/useAccount';
99
import { useHandlePagination } from '../../../../../hooks/useHandlePagination';
1010
import { translations } from '../../../../../locales/i18n';
11+
import { generateRowTitle } from '../../LeaderboardPointsPage.utils';
1112
import {
1213
COLUMNS_CONFIG,
13-
MAXIMUM_USERS_TO_SHOW,
14-
} from '../../LeaderboardPointsPage.constants';
15-
import { generateRowTitle } from '../../LeaderboardPointsPage.utils';
16-
import { useGetPoints } from '../../hooks/useGetPoints';
17-
18-
const pageSize = MAXIMUM_USERS_TO_SHOW;
14+
PAGE_SIZE,
15+
} from './LeaderboardPointsSeason1.constants';
16+
import { useGetPoints } from './hooks/useGetPoints';
1917

20-
export const LeaderboardPointsFrame: FC = () => {
18+
export const LeaderboardPointsSeason1: FC = () => {
2119
const { account } = useAccount();
2220
const { connectedWalletPoints, points } = useGetPoints();
2321

2422
const { page, onPageChange, paginatedItems, isNextButtonDisabled } =
25-
useHandlePagination(points, pageSize);
23+
useHandlePagination(points, PAGE_SIZE);
2624

2725
return (
28-
<div className="flex flex-col">
29-
<div className="flex justify-between items-center mb-3 md:mb-6">
30-
<Paragraph className="text-2xl font-medium lg:pt-6 py-4 lg:px-8 lg:pb-8">
31-
{t(translations.leaderboardPointsPage.table.leaderboard)}
32-
</Paragraph>
33-
</div>
34-
26+
<div className="flex flex-col md:pt-0 pt-6">
3527
<div className="lg:border rounded lg:p-6">
3628
<div className="lg:p-4">
3729
<Table
3830
columns={COLUMNS_CONFIG(true)}
3931
rows={connectedWalletPoints}
40-
rowTitle={generateRowTitle}
32+
rowTitle={row => generateRowTitle(row.id, row.wallet)}
4133
className="text-gray-10 lg:px-6 lg:py-4 text-xs mb-5"
4234
dataAttribute="leaderboard-points-user-table"
4335
noData={
@@ -59,18 +51,18 @@ export const LeaderboardPointsFrame: FC = () => {
5951
<Table
6052
columns={COLUMNS_CONFIG()}
6153
rows={paginatedItems}
62-
rowTitle={generateRowTitle}
54+
rowTitle={row => generateRowTitle(row.id, row.wallet)}
6355
className="text-gray-10 lg:px-6 lg:py-4 text-xs"
64-
dataAttribute="leaderboard-points-users-table"
56+
dataAttribute="leaderboard-points-users-table-season-1"
6557
/>
6658
<Pagination
6759
page={page}
6860
totalItems={points.length}
6961
className="lg:pb-6 mt-3 lg:mt-6 lg:max-w-3xl flex flex-wrap lg:flex-nowrap"
7062
onChange={onPageChange}
71-
itemsPerPage={pageSize}
63+
itemsPerPage={PAGE_SIZE}
7264
isNextButtonDisabled={isNextButtonDisabled}
73-
dataAttribute="leaderboard-points-users-pagination"
65+
dataAttribute="leaderboard-points-users-pagination-season-1"
7466
/>
7567
</div>
7668
</div>

‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/data/usersPoints.json renamed to ‎apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason1/data/usersPoints.json

File renamed without changes.

0 commit comments

Comments
 (0)