-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* SOV-3830: Initial setup (#776) * Initial commit * Translations + responsive behaviour * Add padding to the CTA links section * Points section (#779) * SOV-3855: Social leaderboard (#781) * Initial configuration * Adjust social leaderboard styling * SOV-3856, SOV-3857: Trading and staking leaderboard (#785) * Initial configuration * Fix redash links * Trading leaderboard mobile styles * Scroll to social tab * Add single wallet table * Refactor trading leaderboard * Staking leaderboard initial configuration * Small adjustments * Parse staking badges * Unify staking and trading tables * Adjust badges position on desktop * Fix review remarks * Leaderboard adjustments (#790) * Adjust column titles * Leaderboard final adjustments (#792) * Fix the message for inactive wallets * Do not show +100 points badge * Update social leaderboard URLs * feat: copy updates * Text adjustments * Social leaderboard adjustments * Adjustments --------- Co-authored-by: soulBit <[email protected]> * Copy adjustment * chore: add changeset * chore: remove outdated comment * feat: add staking subtitle * chore: add bottom margin to subtitle --------- Co-authored-by: soulBit <[email protected]>
- Loading branch information
Showing
42 changed files
with
1,352 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "frontend": patch | ||
| --- | ||
|
|
||
| SOV-3935: Competition leaderboard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React, { FC } from 'react'; | ||
|
|
||
| import { Button, ButtonStyle, Paragraph } from '@sovryn/ui'; | ||
|
|
||
| type CTAProps = { | ||
| index: number; | ||
| backgroundImage: string; | ||
| title: string; | ||
| description: string; | ||
| action: string; | ||
| navigateTo: () => void; | ||
| }; | ||
|
|
||
| export const CTA: FC<CTAProps> = ({ | ||
| index, | ||
| backgroundImage, | ||
| title, | ||
| description, | ||
| action, | ||
| navigateTo, | ||
| }) => ( | ||
| <div | ||
| key={index} | ||
| className="relative p-4 md:p-6 bg-gray-70 rounded flex flex-col md:items-start justify-end md:min-h-60 min-h-40" | ||
| > | ||
| <img | ||
| src={backgroundImage} | ||
| alt={title} | ||
| className="absolute top-0 right-0 md:max-w-none max-w-14" | ||
| /> | ||
| <Paragraph | ||
| className="mb-6 font-medium text-sm xl:max-w-36 xl:pr-0 pr-12" | ||
| children={title} | ||
| /> | ||
| <Paragraph | ||
| className="mb-4 md:mb-6 font-medium xl:pr-0 pr-12 text-gray-30" | ||
| children={description} | ||
| /> | ||
| <Button | ||
| className="w-full sm:w-auto" | ||
| text={action} | ||
| onClick={navigateTo} | ||
| style={ButtonStyle.secondary} | ||
| /> | ||
| </div> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
apps/frontend/src/app/5_pages/LeaderboardPage/LeaderboardPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import React, { FC, useRef, useState } from 'react'; | ||
|
|
||
| import { CTALinks } from './components/CTALinks/CTALinks'; | ||
| import { Intro } from './components/Intro/Intro'; | ||
| import { Leaderboard } from './components/Leaderboard/Leaderboard'; | ||
| import { PointsSection } from './components/PointsSection/PointsSection'; | ||
|
|
||
| const LeaderboardPage: FC = () => { | ||
| const tableRef = useRef<HTMLDivElement>(null); | ||
| const pointsSectionRef = useRef<HTMLDivElement>(null); | ||
| const [tabIndex, setTabIndex] = useState(0); | ||
|
|
||
| return ( | ||
| <div className="w-full flex items-center flex-col px-0 md:px-20"> | ||
| <Intro pointsSectionRef={pointsSectionRef} /> | ||
| <CTALinks tableRef={tableRef} setTabIndex={setTabIndex} /> | ||
| <Leaderboard | ||
| index={tabIndex} | ||
| setIndex={setTabIndex} | ||
| tableRef={tableRef} | ||
| /> | ||
| <PointsSection pointsSectionRef={pointsSectionRef} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LeaderboardPage; |
81 changes: 81 additions & 0 deletions
81
apps/frontend/src/app/5_pages/LeaderboardPage/components/CTALinks/CTALinks.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React, { | ||
| Dispatch, | ||
| FC, | ||
| RefObject, | ||
| SetStateAction, | ||
| useCallback, | ||
| useMemo, | ||
| } from 'react'; | ||
|
|
||
| import { t } from 'i18next'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| import { CTA } from '../../../../2_molecules/CTA/CTA'; | ||
| import socialBg from '../../../../../assets/images/Leaderboard/social.svg'; | ||
| import stakeBg from '../../../../../assets/images/Leaderboard/stake.svg'; | ||
| import tradeBg from '../../../../../assets/images/Leaderboard/trade.svg'; | ||
| import { translations } from '../../../../../locales/i18n'; | ||
| import { scrollToElement } from '../../../../../utils/helpers'; | ||
|
|
||
| const baseTranslation = translations.leaderboardPage.ctaLinksSection; | ||
|
|
||
| type CTALinksProps = { | ||
| tableRef: RefObject<HTMLDivElement>; | ||
| setTabIndex: Dispatch<SetStateAction<number>>; | ||
| }; | ||
|
|
||
| export const CTALinks: FC<CTALinksProps> = ({ tableRef, setTabIndex }) => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const socialClickHandler = useCallback(() => { | ||
| if (tableRef.current) { | ||
| scrollToElement(tableRef); | ||
| setTabIndex(2); | ||
| } | ||
| }, [setTabIndex, tableRef]); | ||
|
|
||
| const options = useMemo( | ||
| () => [ | ||
| { | ||
| title: t(baseTranslation.stake.title), | ||
| description: t(baseTranslation.stake.description), | ||
| action: t(baseTranslation.stake.cta), | ||
| onClick: () => navigate('/earn/staking'), | ||
| backgroundImage: stakeBg, | ||
| }, | ||
| { | ||
| title: t(baseTranslation.trade.title), | ||
| description: t(baseTranslation.trade.description), | ||
| action: t(baseTranslation.trade.cta), | ||
| onClick: () => | ||
| window.open('https://app.babelfish.money/convert', '_blank'), | ||
| backgroundImage: tradeBg, | ||
| }, | ||
| { | ||
| title: t(baseTranslation.social.title), | ||
| description: t(baseTranslation.social.description), | ||
| action: t(baseTranslation.social.cta), | ||
| onClick: socialClickHandler, | ||
| backgroundImage: socialBg, | ||
| }, | ||
| ], | ||
| [navigate, socialClickHandler], | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="w-full sm:p-6 p-4 sm:w-3/4 mt-8 bg-gray-80 rounded min-h-64 grid md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 xl:gap-6 gap-4"> | ||
| {options.map( | ||
| ({ backgroundImage, title, description, action, onClick }, index) => ( | ||
| <CTA | ||
| index={index} | ||
| backgroundImage={backgroundImage} | ||
| title={title} | ||
| description={description} | ||
| action={action} | ||
| navigateTo={onClick} | ||
| /> | ||
| ), | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.