From 875bb795b5881f6fcdbefcff782f179867775af3 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Mon, 17 Jun 2024 13:33:02 +0530 Subject: [PATCH 01/60] added rewards module --- src/modules/rewards/Rewards.tsx | 19 +++++++++++++++++++ src/modules/rewards/index.ts | 4 ++++ 2 files changed, 23 insertions(+) create mode 100644 src/modules/rewards/Rewards.tsx create mode 100644 src/modules/rewards/index.ts diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx new file mode 100644 index 0000000000..ac67ef738f --- /dev/null +++ b/src/modules/rewards/Rewards.tsx @@ -0,0 +1,19 @@ +import { FC } from 'react'; +import { Box } from 'blocks'; + +export type RewardsProps = {}; + +const Rewards: FC = () => { + return ( + + Hello World + + ); +}; + +export { Rewards }; diff --git a/src/modules/rewards/index.ts b/src/modules/rewards/index.ts new file mode 100644 index 0000000000..d2dc3c9d18 --- /dev/null +++ b/src/modules/rewards/index.ts @@ -0,0 +1,4 @@ +import { Rewards } from './Rewards'; + +export default Rewards; +export type { RewardsProps } from './Rewards'; From 47654c1ec670a0319f13ba0f1bca3d2b91540f62 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Mon, 17 Jun 2024 15:59:57 +0530 Subject: [PATCH 02/60] added /rewards route and changed the snap section in dashboard (#1647) * added route and layout * added route and layout * added header tag * added review comments --- .../components/RewardsCircle.tsx | 31 ++++ src/blocks/illustrations/index.ts | 2 + src/config/AppPaths.ts | 3 +- .../components/ChannelVariantsSection.tsx | 4 +- .../{SnapSection.tsx => RewardsSection.tsx} | 16 +- src/modules/rewards/Rewards.tsx | 12 +- src/structure/Header.tsx | 168 +++--------------- src/structure/MasterInterfacePage.tsx | 7 +- 8 files changed, 85 insertions(+), 158 deletions(-) create mode 100644 src/blocks/illustrations/components/RewardsCircle.tsx rename src/modules/dashboard/components/{SnapSection.tsx => RewardsSection.tsx} (74%) diff --git a/src/blocks/illustrations/components/RewardsCircle.tsx b/src/blocks/illustrations/components/RewardsCircle.tsx new file mode 100644 index 0000000000..a5b0d3bffd --- /dev/null +++ b/src/blocks/illustrations/components/RewardsCircle.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react'; +import { IllustrationWrapper } from '../IllustrationWrapper'; +import { IllustrationProps } from '../Illustrations.types'; + +const RewardsCircle: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + } + {...restProps} + /> + ); +}; + +export default RewardsCircle; diff --git a/src/blocks/illustrations/index.ts b/src/blocks/illustrations/index.ts index cb322c2adc..6aa3ebc92d 100644 --- a/src/blocks/illustrations/index.ts +++ b/src/blocks/illustrations/index.ts @@ -15,3 +15,5 @@ export { default as PushBot } from './components/PushBot'; export { default as PushDev } from './components/PushDev'; export { default as Metamask } from './components/Metamask'; export { default as Ethereum } from './components/Ethereum'; + +export { default as RewardsCircle } from './components/RewardsCircle'; diff --git a/src/config/AppPaths.ts b/src/config/AppPaths.ts index 98f74704f6..e5355ba4a1 100644 --- a/src/config/AppPaths.ts +++ b/src/config/AppPaths.ts @@ -7,6 +7,7 @@ enum APP_PATHS { Spaces = '/spaces', Channels = '/channels', Dashboard = '/dashboard', + Rewards = '/rewards', Send = '/send', Receive = '/receive', Govern = '/govern', @@ -22,7 +23,7 @@ enum APP_PATHS { Support = '/support', UserSettings = '/user/settings', ChannelSettings = '/channel/settings', - ClaimGalxe = 'claim/galxe' + ClaimGalxe = 'claim/galxe', } export default APP_PATHS; diff --git a/src/modules/dashboard/components/ChannelVariantsSection.tsx b/src/modules/dashboard/components/ChannelVariantsSection.tsx index 333d6dfc4c..7b3dde8b2f 100644 --- a/src/modules/dashboard/components/ChannelVariantsSection.tsx +++ b/src/modules/dashboard/components/ChannelVariantsSection.tsx @@ -4,7 +4,7 @@ import { FC } from 'react'; // Components import { Box, Text } from 'blocks'; import { ChannelTabsSection } from './ChannelTabsSection'; -import { SnapSection } from './SnapSection'; +import { RewardsSection } from './RewardsSection'; import { RecommendedChatsList } from './RecommendedChatsList'; export type ChannelVariantsSectionProps = {}; @@ -34,7 +34,7 @@ const ChannelVariantsSection: FC = () => { Recommended Chats - + ); diff --git a/src/modules/dashboard/components/SnapSection.tsx b/src/modules/dashboard/components/RewardsSection.tsx similarity index 74% rename from src/modules/dashboard/components/SnapSection.tsx rename to src/modules/dashboard/components/RewardsSection.tsx index b57146f397..06126c739a 100644 --- a/src/modules/dashboard/components/SnapSection.tsx +++ b/src/modules/dashboard/components/RewardsSection.tsx @@ -2,9 +2,9 @@ import { css } from 'styled-components'; // Components -import { Box, Text, Button, Link, Metamask } from 'blocks'; +import { Box, Text, Button, Link, RewardsCircle } from 'blocks'; -const SnapSection = () => { +const RewardsSection = () => { return ( { alignItems="center" gap="s3" > - + - Receive Instant Notifications in Metamask with Push Snap. + Complete Tasks on Push. Earn Reward Points. - Receive Instant Notifications in Metamask with Push Snap. + Complete Tasks on Push. Earn Reward Points. - + ); }; -export { SnapSection }; +export { RewardsSection }; diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx index ac67ef738f..a18e451509 100644 --- a/src/modules/rewards/Rewards.tsx +++ b/src/modules/rewards/Rewards.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { Box } from 'blocks'; +import { Box, Text } from 'blocks'; export type RewardsProps = {}; @@ -8,10 +8,16 @@ const Rewards: FC = () => { - Hello World + + Introducing Push Reward Points Program + ); }; diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx index 839f3321fc..494fcc8fe3 100644 --- a/src/structure/Header.tsx +++ b/src/structure/Header.tsx @@ -1,7 +1,6 @@ import { Suspense, useContext, useEffect, useRef, useState } from 'react'; // React + Web3 Essentials -import { Link } from 'react-router-dom'; // External Packages import { AiOutlineMenu } from 'react-icons/ai'; @@ -10,13 +9,10 @@ import { DarkModeSwitch } from 'react-toggle-dark-mode'; import styled, { useTheme } from 'styled-components'; // Internal Components -import OpenLink from 'assets/snap/GoToImage.svg?react'; -import MetamaskLogo from 'assets/snap/metamasksnap.svg?react'; +import { RewardsCircle, Box, Link } from 'blocks'; import { LOADER_SPINNER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import Spinner from 'components/reusables/spinners/SpinnerUnit'; -import { AppContext } from 'contexts/AppContext'; import { ErrorContext } from 'contexts/ErrorContext'; -import { GlobalContext } from 'contexts/GlobalContext'; import { NavigationContext } from 'contexts/NavigationContext'; import Profile from 'primaries/Profile'; @@ -26,12 +22,9 @@ import PushLogoLight from '../assets/pushLight.svg'; // Internal Configs import ChainIndicator from 'components/ChainIndicator'; -import { SpanV2 } from 'components/reusables/SharedStylingV2'; import APP_PATHS from 'config/AppPaths'; import GLOBALS from 'config/Globals'; import { themeDark, themeLight } from 'config/Themization'; -import { appConfig } from 'config/index.js'; -import { UnsupportedChainIdError } from 'connectors/error'; import { useAccount, useDeviceWidthCheck } from 'hooks'; import { useClickAway } from 'react-use'; import MobileNavigation from './MobileNavigation'; @@ -61,6 +54,17 @@ const EXTRA_HEADER_TAGS = { fg: themeDark.headerTagFg, }, }, + [APP_PATHS.Rewards]: { + title: 'Reward Points', + light: { + bg: GLOBALS.COLORS.GRADIENT_PRIMARY, + fg: themeLight.headerTagFg, + }, + dark: { + bg: themeDark.headerTagBg, + fg: themeDark.headerTagFg, + }, + }, }; // Create Header @@ -70,9 +74,8 @@ function Header({ isDarkMode, darkModeToggle }) { const navRef = useRef(); const { navigationSetup } = useContext(NavigationContext); - const { setSnapInstalled, snapInstalled } = useContext(AppContext); - const { isActive, switchChain, wallet } = useAccount(); + const { isActive, wallet } = useAccount(); const { authError: error } = useContext(ErrorContext); const [showLoginControls, setShowLoginControls] = useState(false); @@ -85,8 +88,7 @@ function Header({ isDarkMode, darkModeToggle }) { // Get Location const location = useLocation(); - - // const [snapInstalled, setSnapInstalled] = useState(false); + const isSnapPage = location?.pathname === '/snap'; useEffect(() => { // runs when navigation setup is updated, will run on init @@ -118,64 +120,15 @@ function Header({ isDarkMode, darkModeToggle }) { setShowNavBar(!showNavBar); }); - // handle error functions - function getErrorMessage(error: Error) { - if (error instanceof UnsupportedChainIdError) { - switchChain(appConfig.coreContractChain); - if (appConfig.coreContractChain === 42) - return 'Unsupported Network, please connect to the Ethereum Kovan network or Polygon Amoy network'; - else if (appConfig.coreContractChain === 11155111) - return 'Unsupported Network, please connect to the Ethereum Sepolia, Polygon Amoy, BNB testnet, Optimism Sepolia, Arbitrum Sepolia or Polygon zkEVM testnet'; - else - return 'Unsupported Network, please connect to the Ethereum, Polygon, BNB, Optimism, Arbitrum or Polygon zkEVM Mainnet'; - } else { - console.error(error); - return 'An unknown error occurred. Check the console for more details'; - } - } - - const bellPressed = () => { - setShowLoginControls(!showLoginControls); - }; - const isMobile = useDeviceWidthCheck(600); - const showSnapMobile = useDeviceWidthCheck(600); - const isSnapPage = location?.pathname === '/snap'; - - const isSnapInstalled = async () => { - const installedSnaps = await window.ethereum.request({ - method: 'wallet_getSnaps', - }); - Object.keys(installedSnaps).forEach((snap) => { - if (snap == 'npm:@pushprotocol/snap') { - setSnapInstalled(true); - } - }); - }; - useEffect(() => { - isSnapInstalled(); - }, []); - - const SnapHeader = () => { + const RewardsHeaderLink = () => { return ( - - - - - Get Notifications directly in MetaMask - - - Install Push Snap - - - + + + + + ); }; @@ -216,7 +169,9 @@ function Header({ isDarkMode, darkModeToggle }) { tabletAlign="flex-start" > - {showSnapMobile && } + + + @@ -259,7 +214,9 @@ function Header({ isDarkMode, darkModeToggle }) { /> } > - {!showSnapMobile && !snapInstalled && } + + + {isActive && !showLoginControls && !error && ( @@ -398,27 +355,6 @@ const NavMenuInner = styled(Item)` height: calc(100vh - 100px); `; -const Notice = styled.span` - border: 0; - outline: 0; - display: flex; - align-items: center; - justify-content: center; - padding: 8px 15px; - margin: 10px; - color: #fff; - border-radius: 20px; - font-size: 14px; -`; - -const PrimaryTheme = styled(Notice)` - background: #e20880; -`; - -const ThirdTheme = styled(Notice)` - background: #674c9f; -`; - const HeaderTag = styled(Item)` flex: 1; margin: 0px 5px; @@ -438,57 +374,5 @@ const HeaderTag = styled(Item)` } `; -const DarkMode = styled(Item)` - @media (max-width: 768px) { - display: none; - } -`; - -const SnapSection = styled.div` - width: 251px; - height: 28px; - display: flex; - flex-direction: row; - border-radius: 12px; - border: 1px solid #d4dcea; - border: 1px solid ${(props) => props.theme.default.border}; - background: ${(props) => props.theme.default.bg}; - padding: 12px 16px; - align-items: center; - gap: 9px; - @media (max-width: 600px) { - width: auto; - padding: 12px 14px; - } -`; - -const InstallText = styled.div` - display: flex; - flex-direction: column; - - @media (max-width: 600px) { - display: block; - width: auto; - } -`; - -const StyledLink = styled(Link)` - cursor: pointer; - font-size: 12px; - font-weight: 400; - color: #d53a94; - text-align: start; - text-decoration: none; - - @media (max-width: 600px) { - margin-left: 5px; - } - - &:hover { - text-decoration: underline; - text-underline-position: under; - } -`; - // Export Default export default Header; diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx index 62b94e5903..3f4332662d 100644 --- a/src/structure/MasterInterfacePage.tsx +++ b/src/structure/MasterInterfacePage.tsx @@ -40,6 +40,7 @@ const YieldFarmingV2Page = lazy(() => import('pages/YieldFarmingPageV2')); const UserSettingsPage = lazy(() => import('pages/UserSettingsPage')); const ClaimGalxePage = lazy(() => import('pages/ClaimGalxePage')); const Dashboard = lazy(() => import('modules/dashboard')); +const Rewards = lazy(() => import('modules/rewards')); // import AirdropPage from 'pages/AirdropPage'; // import ChannelDashboardPage from 'pages/ChannelDashboardPage'; @@ -153,11 +154,14 @@ function MasterInterfacePage() { } > - } /> + } + /> } /> - {/* }> */} Date: Mon, 17 Jun 2024 16:16:31 +0530 Subject: [PATCH 03/60] rewards tabs + dashboard tab ui --- src/blocks/icons/components/Copy.tsx | 52 +++++++++ src/blocks/icons/index.ts | 2 + src/hooks/useAccount.tsx | 1 + src/modules/rewards/Rewards.constants.ts | 16 +++ src/modules/rewards/Rewards.tsx | 26 ++++- src/modules/rewards/Rewards.types.ts | 3 + .../rewards/components/DashboardSection.tsx | 102 ++++++++++++++++++ .../rewards/components/RefferalSection.tsx | 50 +++++++++ .../rewards/components/RewardsTabs.tsx | 45 ++++++++ .../components/RewardsTabsContainer.tsx | 36 +++++++ 10 files changed, 329 insertions(+), 4 deletions(-) create mode 100644 src/blocks/icons/components/Copy.tsx create mode 100644 src/modules/rewards/Rewards.constants.ts create mode 100644 src/modules/rewards/Rewards.types.ts create mode 100644 src/modules/rewards/components/DashboardSection.tsx create mode 100644 src/modules/rewards/components/RefferalSection.tsx create mode 100644 src/modules/rewards/components/RewardsTabs.tsx create mode 100644 src/modules/rewards/components/RewardsTabsContainer.tsx diff --git a/src/blocks/icons/components/Copy.tsx b/src/blocks/icons/components/Copy.tsx new file mode 100644 index 0000000000..c78e265642 --- /dev/null +++ b/src/blocks/icons/components/Copy.tsx @@ -0,0 +1,52 @@ +import { FC } from 'react'; +import { IconWrapper } from '../IconWrapper'; +import { IconProps } from '../Icons.types'; + +const Copy: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + + + + + + + } + {...restProps} + /> + ); +}; + +export default Copy; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index 3b5aea7874..4f99a50e41 100644 --- a/src/blocks/icons/index.ts +++ b/src/blocks/icons/index.ts @@ -16,6 +16,8 @@ export { default as CaretUp } from './components/CaretUp'; export { default as CameraFilled } from './components/CameraFilled'; +export { default as Copy } from './components/Copy'; + export { default as Channel } from './components/Channel'; export { default as ChannelFilled } from './components/ChannelFilled'; diff --git a/src/hooks/useAccount.tsx b/src/hooks/useAccount.tsx index 371aee0e5f..9343252dd7 100644 --- a/src/hooks/useAccount.tsx +++ b/src/hooks/useAccount.tsx @@ -47,6 +47,7 @@ export const useAccount = () => { return { wallet: wallet ? wallet : readOnlyWallet, walletAddress: wallet ? wallet.accounts[0]?.address : readOnlyWallet, + isWalletConnected: !!wallet?.accounts?.length, connecting, connect, disconnect, diff --git a/src/modules/rewards/Rewards.constants.ts b/src/modules/rewards/Rewards.constants.ts new file mode 100644 index 0000000000..d6c6229ffa --- /dev/null +++ b/src/modules/rewards/Rewards.constants.ts @@ -0,0 +1,16 @@ +import { RewardsTabsList } from './Rewards.types'; + +export const rewardsTabsList: RewardsTabsList = [ + { + value: 'dashboard', + label: 'Dashboard', + }, + { + value: 'activites', + label: 'Reward Activites', + }, + { + value: 'leaderboard', + label: 'Leaderboard', + }, +]; diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx index ac67ef738f..f40562ce6e 100644 --- a/src/modules/rewards/Rewards.tsx +++ b/src/modules/rewards/Rewards.tsx @@ -1,19 +1,37 @@ -import { FC } from 'react'; -import { Box } from 'blocks'; +import { FC, useState } from 'react'; +import { Box, Text } from 'blocks'; +import { RefferalSection } from './components/RefferalSection'; +import { useAccount } from 'hooks'; +import { RewardsTabsContainer } from './components/RewardsTabsContainer'; +import { rewardsTabsList } from './Rewards.constants'; +import { RewardsTabs } from './Rewards.types'; export type RewardsProps = {}; const Rewards: FC = () => { + const [activeTab, setActiveTab] = useState(rewardsTabsList[0].value); + + const { isWalletConnected } = useAccount(); + + const handleSetActiveTab = (tab: RewardsTabs) => setActiveTab(tab); + return ( - Hello World + Introducing Push Reward Points Program + + {activeTab === 'dashboard' && isWalletConnected && } ); }; export { Rewards }; + +// fix the border-radius in box diff --git a/src/modules/rewards/Rewards.types.ts b/src/modules/rewards/Rewards.types.ts new file mode 100644 index 0000000000..3bc4e34f69 --- /dev/null +++ b/src/modules/rewards/Rewards.types.ts @@ -0,0 +1,3 @@ +export type RewardsTabs = 'dashboard' | 'activites' | 'leaderboard'; + +export type RewardsTabsList = Array<{ label: string; value: RewardsTabs }>; diff --git a/src/modules/rewards/components/DashboardSection.tsx b/src/modules/rewards/components/DashboardSection.tsx new file mode 100644 index 0000000000..854e93ac7d --- /dev/null +++ b/src/modules/rewards/components/DashboardSection.tsx @@ -0,0 +1,102 @@ +import { FC } from 'react'; +import { css } from 'styled-components'; +import { Box, Button, Text } from 'blocks'; + +export type DashboardSectionProps = { + onGetStarted: () => void; +}; + +const DashboardSection: FC = ({ onGetStarted }) => { + return ( + + Dashboard + + + img + + Title line 1 + Body Text goes here + + + + + + + TOTAL POINTS + + 11,500 + + Rank #240 + + + + + REFFERAL POINTS + + 10 + + 2 Users Invited + + + + + + ); +}; + +export { DashboardSection }; diff --git a/src/modules/rewards/components/RefferalSection.tsx b/src/modules/rewards/components/RefferalSection.tsx new file mode 100644 index 0000000000..62ed8ca03a --- /dev/null +++ b/src/modules/rewards/components/RefferalSection.tsx @@ -0,0 +1,50 @@ +import { FC } from 'react'; +import { css } from 'styled-components'; +import { Box, Button, Copy, Text } from 'blocks'; + +export type RefferalSectionProps = {}; + +const RefferalSection: FC = () => { + return ( + + + Onboard Users on Push. + Earn Points. + + Earn +12% of any Points your invites earn, and +2% of any Points your invite’s invites earn. + + + + + https://app.push.org/ref?123xx + + + + + ); +}; + +export { RefferalSection }; diff --git a/src/modules/rewards/components/RewardsTabs.tsx b/src/modules/rewards/components/RewardsTabs.tsx new file mode 100644 index 0000000000..8a12e912c4 --- /dev/null +++ b/src/modules/rewards/components/RewardsTabs.tsx @@ -0,0 +1,45 @@ +import { FC, useState } from 'react'; +import { css } from 'styled-components'; +import { Box, Text } from 'blocks'; +import { rewardsTabsList } from '../Rewards.constants'; +import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; + +export type RewardsTabsProps = { + activeTab: RewardsTabsType; + handleSetActiveTab: (tab: RewardsTabsType) => void; +}; + +const RewardsTabs: FC = ({ activeTab, handleSetActiveTab }) => { + return ( + + {rewardsTabsList.map((tab) => ( + handleSetActiveTab(tab.value)} + css={css` + margin-bottom: -1px; + border-bottom: ${tab.value === activeTab ? '2px solid var(--pink-400)' : '0px'}; + `} + > + + {tab.label} + + + ))} + + ); +}; + +export { RewardsTabs }; diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx new file mode 100644 index 0000000000..d0aea6e73f --- /dev/null +++ b/src/modules/rewards/components/RewardsTabsContainer.tsx @@ -0,0 +1,36 @@ +import { Box } from 'blocks'; +import { FC } from 'react'; +import { RewardsTabs } from './RewardsTabs'; +import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; +import { DashboardSection } from './DashboardSection'; + +export type RewardsTabsContainerProps = { + activeTab: RewardsTabsType; + handleSetActiveTab: (tab: RewardsTabsType) => void; +}; + +const RewardsTabsContainer: FC = ({ activeTab, handleSetActiveTab }) => { + return ( + + + + {activeTab === 'dashboard' && handleSetActiveTab('activites')} />} + + + ); +}; + +export { RewardsTabsContainer }; From 457b9691cc1079a6df8fe6829047bef14c1222ed Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Mon, 17 Jun 2024 16:19:44 +0530 Subject: [PATCH 04/60] fixed ui --- src/modules/rewards/Rewards.tsx | 1 + src/modules/rewards/components/DashboardSection.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx index f40562ce6e..3d6f6e909d 100644 --- a/src/modules/rewards/Rewards.tsx +++ b/src/modules/rewards/Rewards.tsx @@ -21,6 +21,7 @@ const Rewards: FC = () => { display="flex" margin={{ initial: 's4 s6 s4 s6', ml: 's4' }} gap="s6" + height="100%" > Introducing Push Reward Points Program void; @@ -29,7 +29,7 @@ const DashboardSection: FC = ({ onGetStarted }) => { gap="s3" display="flex" > - img + Date: Mon, 17 Jun 2024 21:30:52 +0530 Subject: [PATCH 05/60] added leadership board UI --- .../rewards/components/LeaderBoardList.tsx | 40 ++++++++++ .../components/LeaderBoardListItem.tsx | 79 +++++++++++++++++++ .../rewards/components/LeaderBoardSection.tsx | 48 +++++++++++ .../components/RewardsTabsContainer.tsx | 2 + 4 files changed, 169 insertions(+) create mode 100644 src/modules/rewards/components/LeaderBoardList.tsx create mode 100644 src/modules/rewards/components/LeaderBoardListItem.tsx create mode 100644 src/modules/rewards/components/LeaderBoardSection.tsx diff --git a/src/modules/rewards/components/LeaderBoardList.tsx b/src/modules/rewards/components/LeaderBoardList.tsx new file mode 100644 index 0000000000..75bbebfc7c --- /dev/null +++ b/src/modules/rewards/components/LeaderBoardList.tsx @@ -0,0 +1,40 @@ +import { FC } from 'react'; +import { Box, Skeleton } from 'blocks'; +import { LeaderboardListItem } from './LeaderBoardListItem'; + +export type LeaderBoardListProps = {}; + +const LeaderBoardList: FC = () => ( + + {dummyData.map((item, index) => ( + + + + ))} + +); + +export { LeaderBoardList }; + +const dummyData = [ + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '12,132' }, + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '1121' }, + { wallet: 'w2d3f3f232321we12s1', points: '1232' }, + { wallet: 'e232weqe2323232323232323232323', points: '12' }, + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '12,132' }, + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '12,132' }, + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '12,132' }, + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '12,132' }, + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '12,132' }, + { wallet: 'w2d3f3f23ddsqwdqwdqwd232132321we12s1', points: '12,132' }, +]; diff --git a/src/modules/rewards/components/LeaderBoardListItem.tsx b/src/modules/rewards/components/LeaderBoardListItem.tsx new file mode 100644 index 0000000000..c49e0be1c0 --- /dev/null +++ b/src/modules/rewards/components/LeaderBoardListItem.tsx @@ -0,0 +1,79 @@ +import { FC, useState } from 'react'; +import { Box, Text } from 'blocks'; +import { css } from 'styled-components'; + +export type LeaderboardListItemProps = { + rank: string; + address: string; + points: string; +}; + +const LeaderboardListItem: FC = ({ rank, address, points }) => { + const [isChainVisible, setChainVisibility] = useState(false); + + const handleShowChain = () => setChainVisibility(true); + + const handleHideChain = () => setChainVisibility(false); + + return ( + + + + {rank} + + + {/* to be replace by an image */} + + {address} + {/* to be replace by an image */} + {isChainVisible && ( + + )} + + + + {points} + + + ); +}; + +export { LeaderboardListItem }; diff --git a/src/modules/rewards/components/LeaderBoardSection.tsx b/src/modules/rewards/components/LeaderBoardSection.tsx new file mode 100644 index 0000000000..a672737963 --- /dev/null +++ b/src/modules/rewards/components/LeaderBoardSection.tsx @@ -0,0 +1,48 @@ +import { FC } from 'react'; +import { Box, Text } from 'blocks'; +import { LeaderBoardList } from './LeaderBoardList'; + +export type LeaderBoardSectionProps = {}; + +const LeaderBoardSection: FC = () => { + return ( + + Leaderboard + + + + RANK + + + USER + + + + TOTAL POINTS + + + + + ); +}; + +export { LeaderBoardSection }; diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx index d0aea6e73f..ae1229c5f3 100644 --- a/src/modules/rewards/components/RewardsTabsContainer.tsx +++ b/src/modules/rewards/components/RewardsTabsContainer.tsx @@ -3,6 +3,7 @@ import { FC } from 'react'; import { RewardsTabs } from './RewardsTabs'; import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; import { DashboardSection } from './DashboardSection'; +import { LeaderBoardSection } from './LeaderBoardSection'; export type RewardsTabsContainerProps = { activeTab: RewardsTabsType; @@ -28,6 +29,7 @@ const RewardsTabsContainer: FC = ({ activeTab, handle handleSetActiveTab={handleSetActiveTab} /> {activeTab === 'dashboard' && handleSetActiveTab('activites')} />} + {activeTab === 'leaderboard' && } ); From 556589991a2d1ddbb66e02324785f6712cdceb31 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Mon, 17 Jun 2024 21:37:17 +0530 Subject: [PATCH 06/60] fixed the colors --- src/blocks/Blocks.colors.ts | 8 ++++---- src/modules/rewards/components/DashboardSection.tsx | 11 +++-------- src/modules/rewards/components/RefferalSection.tsx | 5 +---- src/modules/rewards/components/RewardsTabs.tsx | 5 ++--- 4 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/blocks/Blocks.colors.ts b/src/blocks/Blocks.colors.ts index 95d5c370a7..22df3b8e61 100644 --- a/src/blocks/Blocks.colors.ts +++ b/src/blocks/Blocks.colors.ts @@ -4,8 +4,8 @@ const brandColors = { /* New brand colors */ 'GRAY-100': '#F5F6F8', - 'GRAY-200': '#E5E5E5', - 'GRAY-300': '#C5C8CD', + 'GRAY-200': '#EAEBF2', + 'GRAY-300': '#C4CBD5', 'GRAY-400': '#B0B3B9', 'GRAY-500': '#8C93A0', 'GRAY-600': '#757D8D', @@ -34,7 +34,7 @@ const brandColors = { 'RED-700': '#D43B3B', 'RED-800': '#A40A0A', 'RED-900': '#670000', - 'RED-1000': '#400000' + 'RED-1000': '#400000', }; export const blocksColorsLegacy = { @@ -79,7 +79,7 @@ export const blocksColorsLegacy = { LIGHT_MAROON: 'rgba(159.0, 0.0, 0.0, 1.0)', LIGHTER_MAROON: 'rgba(129.0, 0.0, 0.0, 1.0)', - ...brandColors + ...brandColors, }; const createBlocksColors = () => { diff --git a/src/modules/rewards/components/DashboardSection.tsx b/src/modules/rewards/components/DashboardSection.tsx index 73fd82eca7..e36f47b83f 100644 --- a/src/modules/rewards/components/DashboardSection.tsx +++ b/src/modules/rewards/components/DashboardSection.tsx @@ -55,10 +55,8 @@ const DashboardSection: FC = ({ onGetStarted }) => { flexDirection="column" padding="s6" borderRadius="var(--r6)" - gap="s3" // fix the color and add it to blocks.colors - css={css` - border: 1px solid #eaebf2; - `} + gap="s3" + border="1px solid gray-200" > TOTAL POINTS @@ -78,10 +76,7 @@ const DashboardSection: FC = ({ onGetStarted }) => { padding="s6" borderRadius="var(--r6)" gap="s3" - // fix the color and add it to blocks.colors - css={css` - border: 1px solid #eaebf2; - `} + border="1px solid gray-200" > REFFERAL POINTS diff --git a/src/modules/rewards/components/RefferalSection.tsx b/src/modules/rewards/components/RefferalSection.tsx index 62ed8ca03a..ec09930a6a 100644 --- a/src/modules/rewards/components/RefferalSection.tsx +++ b/src/modules/rewards/components/RefferalSection.tsx @@ -34,10 +34,7 @@ const RefferalSection: FC = () => { alignItems="center" padding="s3" borderRadius="var(--r3)" - // Add this color to blocks.color and user border prop - css={css` - border: 1.5px solid var(--components-input-field-stroke-default, #eaebf2); - `} + border="1.5px solid gray-200" > https://app.push.org/ref?123xx diff --git a/src/modules/rewards/components/RewardsTabs.tsx b/src/modules/rewards/components/RewardsTabs.tsx index 8a12e912c4..e7a563be0e 100644 --- a/src/modules/rewards/components/RewardsTabs.tsx +++ b/src/modules/rewards/components/RewardsTabs.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react'; +import { FC } from 'react'; import { css } from 'styled-components'; import { Box, Text } from 'blocks'; import { rewardsTabsList } from '../Rewards.constants'; @@ -14,9 +14,8 @@ const RewardsTabs: FC = ({ activeTab, handleSetActiveTab }) => {rewardsTabsList.map((tab) => ( From 61bbdb30df310e0b64604ef253e1ef6ce029c6b1 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Mon, 17 Jun 2024 21:56:29 +0530 Subject: [PATCH 07/60] fixed border radius --- src/blocks/Blocks.utils.ts | 17 +++++++++++++++-- src/blocks/box/Box.tsx | 6 +++--- src/blocks/box/Box.types.ts | 3 ++- .../dashboard/components/ChannelListItem.tsx | 2 +- .../dashboard/components/ChannelTabsSection.tsx | 6 +++--- .../components/ChannelVariantsSection.tsx | 2 +- .../dashboard/components/FeaturedChannels.tsx | 2 +- .../components/FeaturedChannelsListItem.tsx | 2 +- .../components/RecommendedChatsList.tsx | 2 +- .../dashboard/components/RewardsSection.tsx | 2 +- .../rewards/components/DashboardSection.tsx | 6 +++--- .../rewards/components/LeaderBoardListItem.tsx | 4 ++-- .../rewards/components/RefferalSection.tsx | 5 ++--- .../rewards/components/RewardsTabsContainer.tsx | 2 +- 14 files changed, 37 insertions(+), 24 deletions(-) diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts index 33d97c2fb4..237e71cec2 100644 --- a/src/blocks/Blocks.utils.ts +++ b/src/blocks/Blocks.utils.ts @@ -11,7 +11,8 @@ import { ResponsiveCSSPropertyData, ThemeMode, ThemeModeBorder, - BorderValue + BorderValue, + RadiusType, } from './Blocks.types'; /** @@ -109,7 +110,7 @@ export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => { tablet: '', laptop: '', laptopL: '', - desktop: '' + desktop: '', }; data.forEach(({ prop, propName }) => { @@ -166,3 +167,15 @@ export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeMod borderValues[2] = `var(--${borderValues[2]})`; return borderValues.join(' '); }; + +/** + * @param radius + * @returns + */ +export const getBlocksBorderRadius = (radius?: RadiusType) => { + // If border-radius is not given return undefined, to avoid any breakages + if (!radius) return radius; + + // If passed a design system border-radius then use radius as a variable + return `var(--${radius})`; +}; diff --git a/src/blocks/box/Box.tsx b/src/blocks/box/Box.tsx index d5d3792589..80d5ae4f7a 100644 --- a/src/blocks/box/Box.tsx +++ b/src/blocks/box/Box.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { useBlocksTheme } from '../Blocks.hooks'; import { TransformedHTMLAttributes, ModeProp } from '../Blocks.types'; -import { getBlocksColor, getBlocksBorder } from '../Blocks.utils'; +import { getBlocksColor, getBlocksBorder, getBlocksBorderRadius } from '../Blocks.utils'; import { BoxCSSProps, BoxComponentProps } from './Box.types'; import { getBoxResponsiveCSS } from './Box.utils'; import { boxRestrictedCSSPropKeys } from './Box.constants'; @@ -13,7 +13,7 @@ export type BoxProps = BoxCSSProps & BoxComponentProps & TransformedHTMLAttribut const StyledBox = styled.div.withConfig({ shouldForwardProp: (prop, defaultValidatorFn) => !boxRestrictedCSSPropKeys.includes(prop as keyof BoxCSSProps) && defaultValidatorFn(prop), -}) ` +})` /* Responsive props */ ${(props) => getBoxResponsiveCSS(props)} @@ -21,7 +21,7 @@ const StyledBox = styled.div.withConfig({ color: ${(props) => getBlocksColor(props.mode, props.color)}; background-color: ${(props) => getBlocksColor(props.mode, props.backgroundColor)}; box-shadow: ${(props) => props.boxShadow}; - border-radius: ${(props) => props.borderRadius}; + border-radius: ${(props) => getBlocksBorderRadius(props.borderRadius)}; cursor: ${(props) => props.cursor}; overflow: ${(props) => props.overflow}; border: ${(props) => getBlocksBorder(props.mode, props.border)}; diff --git a/src/blocks/box/Box.types.ts b/src/blocks/box/Box.types.ts index 764f9a79f6..657c7c83f6 100644 --- a/src/blocks/box/Box.types.ts +++ b/src/blocks/box/Box.types.ts @@ -3,6 +3,7 @@ import { CSSProperties, ReactNode } from 'react'; import { BlocksColors, BorderValue, + RadiusType, ResponsiveProp, SpaceType, ThemeModeBorder, @@ -44,7 +45,7 @@ export type BoxNonResponsiveProps = { /* Sets border css property */ border?: BorderValue | ThemeModeBorder; /* Sets border-radius css property */ - borderRadius?: string; + borderRadius?: RadiusType; /* Sets background-color css property */ backgroundColor?: BlocksColors | ThemeModeColors; /* Sets color css property */ diff --git a/src/modules/dashboard/components/ChannelListItem.tsx b/src/modules/dashboard/components/ChannelListItem.tsx index c38aed2d0f..d784bec044 100644 --- a/src/modules/dashboard/components/ChannelListItem.tsx +++ b/src/modules/dashboard/components/ChannelListItem.tsx @@ -88,7 +88,7 @@ const ChannelListItem: FC = ({ { padding="s1" height="fit-content" justifyContent="space-between" - borderRadius="var(--r4)" + borderRadius="r4" width={{ lp: 'auto', initial: 'fit-content' }} > {dahboardChannelTabs?.map((channelTab, index) => { @@ -62,7 +62,7 @@ const ChannelTabsSection = () => { width={{ ll: '100%' }} alignItems="center" padding="s2 s3" - borderRadius="var(--r4)" + borderRadius="r4" backgroundColor={ selectedChannelTab === channelTab.value ? { dark: 'gray-800', light: 'white' } : 'transparent' } @@ -84,7 +84,7 @@ const ChannelTabsSection = () => { display="flex" flexDirection="column" overflow="hidden auto" - borderRadius="var(--r6)" + borderRadius="r6" minHeight="285px" maxHeight="285px" border={{ light: '1px solid gray-200', dark: '1px solid gray-800' }} diff --git a/src/modules/dashboard/components/ChannelVariantsSection.tsx b/src/modules/dashboard/components/ChannelVariantsSection.tsx index 7b3dde8b2f..cf07800a6a 100644 --- a/src/modules/dashboard/components/ChannelVariantsSection.tsx +++ b/src/modules/dashboard/components/ChannelVariantsSection.tsx @@ -13,7 +13,7 @@ const ChannelVariantsSection: FC = () => { return ( = () => { return ( = (props) => { flexDirection="column" border={{ light: '1px solid gray-200', dark: '1px solid gray-800' }} padding="s6" - borderRadius="24px" + borderRadius="r6" gap="s3" width={{ initial: width }} css={css` diff --git a/src/modules/dashboard/components/RecommendedChatsList.tsx b/src/modules/dashboard/components/RecommendedChatsList.tsx index 9bd30b22a7..46f277e3c0 100644 --- a/src/modules/dashboard/components/RecommendedChatsList.tsx +++ b/src/modules/dashboard/components/RecommendedChatsList.tsx @@ -11,7 +11,7 @@ const RecommendedChatsList = () => { display="flex" flexDirection="column" gap="s4" - borderRadius="var(--r6)" + borderRadius="r6" border={{ light: '1px solid gray-200', dark: '1px solid gray-800' }} padding="s4" > diff --git a/src/modules/dashboard/components/RewardsSection.tsx b/src/modules/dashboard/components/RewardsSection.tsx index 06126c739a..26a03eedc7 100644 --- a/src/modules/dashboard/components/RewardsSection.tsx +++ b/src/modules/dashboard/components/RewardsSection.tsx @@ -9,7 +9,7 @@ const RewardsSection = () => { = ({ onGetStarted }) => { > Dashboard = ({ onGetStarted }) => { display="flex" flexDirection="column" padding="s6" - borderRadius="var(--r6)" + borderRadius="r6" gap="s3" border="1px solid gray-200" > @@ -74,7 +74,7 @@ const DashboardSection: FC = ({ onGetStarted }) => { display="flex" flexDirection="column" padding="s6" - borderRadius="var(--r6)" + borderRadius="r6" gap="s3" border="1px solid gray-200" > diff --git a/src/modules/rewards/components/LeaderBoardListItem.tsx b/src/modules/rewards/components/LeaderBoardListItem.tsx index c49e0be1c0..e8310e9717 100644 --- a/src/modules/rewards/components/LeaderBoardListItem.tsx +++ b/src/modules/rewards/components/LeaderBoardListItem.tsx @@ -50,7 +50,7 @@ const LeaderboardListItem: FC = ({ rank, address, poin width="32px" height="32px" backgroundColor="black" - borderRadius="var(--r10)" + borderRadius="r10" /> {address} {/* to be replace by an image */} @@ -59,7 +59,7 @@ const LeaderboardListItem: FC = ({ rank, address, poin width="24px" height="24px" backgroundColor="pink-300" - borderRadius="var(--r10)" + borderRadius="r10" /> )} diff --git a/src/modules/rewards/components/RefferalSection.tsx b/src/modules/rewards/components/RefferalSection.tsx index ec09930a6a..e691d077ce 100644 --- a/src/modules/rewards/components/RefferalSection.tsx +++ b/src/modules/rewards/components/RefferalSection.tsx @@ -1,5 +1,4 @@ import { FC } from 'react'; -import { css } from 'styled-components'; import { Box, Button, Copy, Text } from 'blocks'; export type RefferalSectionProps = {}; @@ -11,7 +10,7 @@ const RefferalSection: FC = () => { flexDirection="column" gap="s9" padding="s12" - borderRadius="var(--s6)" + borderRadius="r6" backgroundColor="white" > @@ -33,7 +32,7 @@ const RefferalSection: FC = () => { display="flex" alignItems="center" padding="s3" - borderRadius="var(--r3)" + borderRadius="r3" border="1.5px solid gray-200" > https://app.push.org/ref?123xx diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx index ae1229c5f3..4ab269d728 100644 --- a/src/modules/rewards/components/RewardsTabsContainer.tsx +++ b/src/modules/rewards/components/RewardsTabsContainer.tsx @@ -14,7 +14,7 @@ const RewardsTabsContainer: FC = ({ activeTab, handle return ( Date: Wed, 19 Jun 2024 09:42:14 +0100 Subject: [PATCH 08/60] Activities tab UI - Rewards page (#1651) * update UI * fix: resolve comments and pull rewardsv1 * chore: add dark mode style * PR fixes done --------- Co-authored-by: rohitmalhotra1420 --- src/modules/rewards/Rewards.constants.ts | 4 +- src/modules/rewards/Rewards.tsx | 2 - src/modules/rewards/Rewards.types.ts | 2 +- .../components/RewardsActivitiesList.tsx | 52 +++++++++++ .../components/RewardsActivitiesListItem.tsx | 87 +++++++++++++++++++ .../components/RewardsActivitiesSection.tsx | 22 +++++ .../components/RewardsTabsContainer.tsx | 4 +- 7 files changed, 167 insertions(+), 6 deletions(-) create mode 100644 src/modules/rewards/components/RewardsActivitiesList.tsx create mode 100644 src/modules/rewards/components/RewardsActivitiesListItem.tsx create mode 100644 src/modules/rewards/components/RewardsActivitiesSection.tsx diff --git a/src/modules/rewards/Rewards.constants.ts b/src/modules/rewards/Rewards.constants.ts index d6c6229ffa..c6ec1b629c 100644 --- a/src/modules/rewards/Rewards.constants.ts +++ b/src/modules/rewards/Rewards.constants.ts @@ -6,8 +6,8 @@ export const rewardsTabsList: RewardsTabsList = [ label: 'Dashboard', }, { - value: 'activites', - label: 'Reward Activites', + value: 'activities', + label: 'Reward Activities', }, { value: 'leaderboard', diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx index 3d6f6e909d..77713a48f2 100644 --- a/src/modules/rewards/Rewards.tsx +++ b/src/modules/rewards/Rewards.tsx @@ -34,5 +34,3 @@ const Rewards: FC = () => { }; export { Rewards }; - -// fix the border-radius in box diff --git a/src/modules/rewards/Rewards.types.ts b/src/modules/rewards/Rewards.types.ts index 3bc4e34f69..af3a66ac44 100644 --- a/src/modules/rewards/Rewards.types.ts +++ b/src/modules/rewards/Rewards.types.ts @@ -1,3 +1,3 @@ -export type RewardsTabs = 'dashboard' | 'activites' | 'leaderboard'; +export type RewardsTabs = 'dashboard' | 'activities' | 'leaderboard'; export type RewardsTabsList = Array<{ label: string; value: RewardsTabs }>; diff --git a/src/modules/rewards/components/RewardsActivitiesList.tsx b/src/modules/rewards/components/RewardsActivitiesList.tsx new file mode 100644 index 0000000000..b08dfd1c00 --- /dev/null +++ b/src/modules/rewards/components/RewardsActivitiesList.tsx @@ -0,0 +1,52 @@ +import { FC } from 'react'; +import { Box } from 'blocks'; +import { RewardsActivitiesListItem } from './RewardsActivitiesListItem'; + +const rewardsArray = [ + { + title: 'Follow @PushProtocol on X', + points: 10000, + buttonText: 'Follow', + }, + { + title: 'Join Push Discord', + points: 10000, + buttonText: 'Join Discord', + }, + { + title: 'Send 20 Messages using Push Chat', + points: 1500, + buttonText: 'Claim', + disabled: true, + }, + { + title: 'Subscribe to 3 Channels on PushX', + subtitle: 'Visit app.push.org/channels and opt-in to any 3 channels.', + points: 1500, + buttonText: 'Follow', + }, +]; + +export type RewardActivitiesProps = {}; + +const RewardsActivitiesList: FC = () => { + return ( + + {rewardsArray.map((item) => ( + + ))} + + ); +}; + +export { RewardsActivitiesList }; diff --git a/src/modules/rewards/components/RewardsActivitiesListItem.tsx b/src/modules/rewards/components/RewardsActivitiesListItem.tsx new file mode 100644 index 0000000000..6ce1c65a07 --- /dev/null +++ b/src/modules/rewards/components/RewardsActivitiesListItem.tsx @@ -0,0 +1,87 @@ +import { FC } from 'react'; +import { css } from 'styled-components'; +import { Box, Button, RewardsCircle, Text } from 'blocks'; + +export type RewardActivitiesListItemProps = { + title: string; + subtitle?: string; + points: number; + buttonText: string; + disabled?: boolean; +}; + +const RewardsActivitiesListItem: FC = ({ + title, + subtitle, + points, + buttonText, + disabled = false, +}) => { + return ( + + + + + + {title} + + + {subtitle} + + + + + + + + {points?.toLocaleString()} points + + + + + ); +}; + +export { RewardsActivitiesListItem }; diff --git a/src/modules/rewards/components/RewardsActivitiesSection.tsx b/src/modules/rewards/components/RewardsActivitiesSection.tsx new file mode 100644 index 0000000000..86c9648499 --- /dev/null +++ b/src/modules/rewards/components/RewardsActivitiesSection.tsx @@ -0,0 +1,22 @@ +import { Box, Text } from 'blocks'; +import { RewardsActivitiesList } from './RewardsActivitiesList'; + +const RewardsActivitiesSection = () => { + return ( + + + Activities + + + + ); +}; + +export { RewardsActivitiesSection }; diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx index 4ab269d728..a46384691e 100644 --- a/src/modules/rewards/components/RewardsTabsContainer.tsx +++ b/src/modules/rewards/components/RewardsTabsContainer.tsx @@ -4,6 +4,7 @@ import { RewardsTabs } from './RewardsTabs'; import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; import { DashboardSection } from './DashboardSection'; import { LeaderBoardSection } from './LeaderBoardSection'; +import { RewardsActivitiesSection } from './RewardsActivitiesSection'; export type RewardsTabsContainerProps = { activeTab: RewardsTabsType; @@ -28,7 +29,8 @@ const RewardsTabsContainer: FC = ({ activeTab, handle activeTab={activeTab} handleSetActiveTab={handleSetActiveTab} /> - {activeTab === 'dashboard' && handleSetActiveTab('activites')} />} + {activeTab === 'dashboard' && handleSetActiveTab('activities')} />} + {activeTab === 'activities' && } {activeTab === 'leaderboard' && } From 356c4067710ca2ccb07208d1a3944503a8023f62 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Wed, 19 Jun 2024 17:07:33 +0530 Subject: [PATCH 09/60] added lozenge and leaderboard tab (#1653) * added lozenge navigation * added navigation on tab switch * added navigation on tab switch * included rewards header in rewards page * added dark mode support for lozenge * added dark mode support for leaderboard * added heading * changed the background color in masterInterface * changed the background color in masterInterface * review fixes * added review fixes --- src/App.tsx | 7 +- src/blocks/Blocks.types.ts | 2 + src/blocks/icons/components/Star.tsx | 30 +++++ src/blocks/icons/index.ts | 2 + .../components/RewardsCircle.tsx | 2 +- src/blocks/index.ts | 1 + src/blocks/lozenge/Lozenge.constants.tsx | 113 +++++++++++++++++ src/blocks/lozenge/Lozenge.tsx | 77 ++++++++++++ src/blocks/lozenge/Lozenge.types.tsx | 5 + src/blocks/lozenge/index.tsx | 3 + src/config/AppPaths.ts | 3 + src/config/Themization.js | 4 +- src/modules/rewards/Rewards.tsx | 24 ++-- .../rewards/components/LeaderBoardList.tsx | 6 +- .../components/LeaderBoardListItem.tsx | 53 ++++---- .../rewards/components/LeaderBoardSection.tsx | 19 ++- .../rewards/components/RewardsTabs.tsx | 14 ++- .../components/RewardsTabsContainer.tsx | 11 +- src/modules/rewards/hooks/useRewardsTabs.ts | 31 +++++ src/structure/Header.tsx | 20 ++- src/structure/MasterInterfacePage.tsx | 31 +++-- src/structure/Navigation.tsx | 116 ++++++++++-------- 22 files changed, 457 insertions(+), 117 deletions(-) create mode 100644 src/blocks/icons/components/Star.tsx create mode 100644 src/blocks/lozenge/Lozenge.constants.tsx create mode 100644 src/blocks/lozenge/Lozenge.tsx create mode 100644 src/blocks/lozenge/Lozenge.types.tsx create mode 100644 src/blocks/lozenge/index.tsx create mode 100644 src/modules/rewards/hooks/useRewardsTabs.ts diff --git a/src/App.tsx b/src/App.tsx index 315791e302..3aea545b27 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -370,12 +370,7 @@ export default function App() { /> - + {!isSnapPage && ( ; export type ModeProp = { mode: ThemeMode }; + +export type IconOnlyProp = { iconOnly: boolean }; diff --git a/src/blocks/icons/components/Star.tsx b/src/blocks/icons/components/Star.tsx new file mode 100644 index 0000000000..1d70e002c0 --- /dev/null +++ b/src/blocks/icons/components/Star.tsx @@ -0,0 +1,30 @@ +import { FC } from 'react'; +import { IconWrapper } from '../IconWrapper'; +import { IconProps } from '../Icons.types'; + +const Star: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + } + {...restProps} + /> + ); +}; + +export default Star; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index 4f99a50e41..798dad93b0 100644 --- a/src/blocks/icons/index.ts +++ b/src/blocks/icons/index.ts @@ -112,6 +112,8 @@ export { default as SendNotificationFilled } from './components/SendNotification export { default as Smiley } from './components/Smiley'; +export { default as Star } from './components/Star'; + export { default as Settings } from './components/Settings'; export { default as Swap } from './components/Swap'; diff --git a/src/blocks/illustrations/components/RewardsCircle.tsx b/src/blocks/illustrations/components/RewardsCircle.tsx index a5b0d3bffd..5aa630dace 100644 --- a/src/blocks/illustrations/components/RewardsCircle.tsx +++ b/src/blocks/illustrations/components/RewardsCircle.tsx @@ -19,7 +19,7 @@ const RewardsCircle: FC = (allProps) => { cx="24.5" cy="24" r="24" - fill="#17181B" + fill="#202124" /> } diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 5e1bebb7ac..e192086845 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -1,5 +1,6 @@ export { Box, type BoxProps } from './box'; export { Button, type ButtonProps } from './button'; +export { Lozenge, type LozengeProps } from './lozenge'; export { HoverableSVG, type HoverableSVGProps } from './hoverableSVG'; export { Link, type LinkProps } from './link'; export { Separator, type SeparatorProps } from './separator'; diff --git a/src/blocks/lozenge/Lozenge.constants.tsx b/src/blocks/lozenge/Lozenge.constants.tsx new file mode 100644 index 0000000000..ea6696c7cf --- /dev/null +++ b/src/blocks/lozenge/Lozenge.constants.tsx @@ -0,0 +1,113 @@ +import { FlattenSimpleInterpolation, css } from 'styled-components'; + +//Types +import { LozengeSize, LozengeVariant } from './Lozenge.types'; +import { ThemeMode } from '../Blocks.types'; + +export const getLozengeVariantStyles = ({ + mode, + variant, +}: { + mode?: ThemeMode; + variant: LozengeVariant; +}): FlattenSimpleInterpolation => { + if (mode === 'dark') { + if (variant === 'primary') { + return css` + /* Lozenge tag container variant css */ + background-color: var(--pink-300); + color: var(--pink-800); + .icon { + color: var(--pink-400); + } + `; + } + return css``; + } + if (variant === 'primary') { + return css` + /* Lozenge tag container variant css */ + background-color: var(--pink-200); + color: var(--pink-600); + .icon { + color: var(--pink-400); + } + `; + } + return css``; +}; + +export const getLozengeSizeStyles = ({ + iconOnly, + size, +}: { + iconOnly?: boolean; + size: LozengeSize; +}): FlattenSimpleInterpolation => { + if (size === 'small') { + return css` + /* Lozenge tag container size css */ + + ${iconOnly + ? ` + border-radius: var(--r1); + gap: var(--s0); + height: 20px; + width: 20px; + padding: var(--s1); + ` + : ` + border-radius: var(--r1); + gap: var(--s1); + height: 20px; + padding: var(--s1) var(--s2); + `} + + /* Lozenge text size css */ + leading-trim: both; + text-edge: cap; + font-size: 10px; + font-style: normal; + font-weight: 700; + line-height: 14px; + + .icon > span { + height: 8px; + width: 8px; + } + `; + } + + return css` + /* Lozenge tag container size css + note: - add medium small and large sizes */ + + ${iconOnly + ? ` + border-radius: 15.6px; + gap: var(--s0); + height: 52px; + width: 52px; + padding: 15.6px; + ` + : ` + border-radius: var(--r3); + gap: var(--s1); + height: 52px; + padding: var(--s4); + `} + + /* Lozenge text size css */ + leading-trim: both; + text-edge: cap; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 16px; + + .icon > span { + height: 24px; + width: 24px; + } + `; +}; diff --git a/src/blocks/lozenge/Lozenge.tsx b/src/blocks/lozenge/Lozenge.tsx new file mode 100644 index 0000000000..10e0c29f00 --- /dev/null +++ b/src/blocks/lozenge/Lozenge.tsx @@ -0,0 +1,77 @@ +import { ReactNode, forwardRef } from 'react'; + +import styled, { FlattenSimpleInterpolation } from 'styled-components'; + +import { useBlocksTheme } from '../Blocks.hooks'; + +import { getLozengeSizeStyles, getLozengeVariantStyles } from './Lozenge.constants'; + +import { IconOnlyProp, ModeProp, TransformedHTMLAttributes } from '../Blocks.types'; +import { LozengeSize, LozengeVariant } from './Lozenge.types'; + +export type LozengeProps = { + /* Child react nodes rendered by Box */ + children?: ReactNode; + /* Additional prop from styled components to apply custom css to Lozenge */ + css?: FlattenSimpleInterpolation; + /* Render an icon before lozenge contents */ + icon?: ReactNode; + /* Sets the size of the lozenge */ + size?: LozengeSize; + /* Sets the variant of the lozenge */ + variant?: LozengeVariant; +} & TransformedHTMLAttributes; + +const StyledLozenge = styled.div.withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop), +})` + /* Common Lozenge CSS */ + + align-items: center; + display: flex; + font-family: var(--font-family); + justify-content: center; + white-space: nowrap; + + /* Common icon css added through CSS class */ + .icon { + display: flex; + align-items: center; + justify-content: center; + } + + /* Lozenge variant CSS styles */ + ${({ variant, mode }) => getLozengeVariantStyles({ variant: variant || 'primary', mode })} + + /* Lozenge and font size CSS styles */ + ${({ iconOnly, size }) => getLozengeSizeStyles({ iconOnly, size: size || 'small' })} + + /* Custom CSS applied via styled component css prop */ + ${(props) => props.css || ''} +`; + +const Lozenge = forwardRef( + ({ variant = 'primary', size = 'small', icon, children, ...props }, ref) => { + const { mode } = useBlocksTheme(); + const iconOnly = !children; + + return ( + + {icon && {icon}} + {children} + + ); + } +); + +Lozenge.displayName = 'Lozenge'; + +export { Lozenge }; diff --git a/src/blocks/lozenge/Lozenge.types.tsx b/src/blocks/lozenge/Lozenge.types.tsx new file mode 100644 index 0000000000..83ef5aad17 --- /dev/null +++ b/src/blocks/lozenge/Lozenge.types.tsx @@ -0,0 +1,5 @@ +export type LozengeVariant = 'primary'; + +export type LozengeSize = 'small'; + +export type LozengeVariantStyles = Record; diff --git a/src/blocks/lozenge/index.tsx b/src/blocks/lozenge/index.tsx new file mode 100644 index 0000000000..6d3411bff8 --- /dev/null +++ b/src/blocks/lozenge/index.tsx @@ -0,0 +1,3 @@ +export * from './Lozenge'; +export * from './Lozenge.constants'; +export * from './Lozenge.types'; diff --git a/src/config/AppPaths.ts b/src/config/AppPaths.ts index e5355ba4a1..40d2ae9790 100644 --- a/src/config/AppPaths.ts +++ b/src/config/AppPaths.ts @@ -8,6 +8,9 @@ enum APP_PATHS { Channels = '/channels', Dashboard = '/dashboard', Rewards = '/rewards', + RewardsDashboard = '/rewards/dashboard', + RewardsActivities = '/rewards/activities', + RewardsLeaderboard = '/rewards/leaderboard', Send = '/send', Receive = '/receive', Govern = '/govern', diff --git a/src/config/Themization.js b/src/config/Themization.js index 96499e0a3b..b16bb346c9 100644 --- a/src/config/Themization.js +++ b/src/config/Themization.js @@ -332,12 +332,12 @@ const themeDark = { // Header Theme header: { - bg: '#212228', // alt color to try - #F4F5FA, #FFF + bg: '#17181B', // alt color to try - #F4F5FA, #FFF }, // Navigation Theme nav: { - bg: '#212228', // alt color to try - #212228, #2F3137 + bg: '#17181B', // alt color to try - #212228, #2F3137 hamburgerBg: '#00000066', color: '#B6BCD6', activeColor: '#404650', diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx index 77713a48f2..04b83e7b2f 100644 --- a/src/modules/rewards/Rewards.tsx +++ b/src/modules/rewards/Rewards.tsx @@ -1,19 +1,20 @@ -import { FC, useState } from 'react'; +import { FC } from 'react'; + +//Hooks +import { useAccount } from 'hooks'; +import { useRewardsTabs } from './hooks/useRewardsTabs'; + +//Components import { Box, Text } from 'blocks'; import { RefferalSection } from './components/RefferalSection'; -import { useAccount } from 'hooks'; import { RewardsTabsContainer } from './components/RewardsTabsContainer'; -import { rewardsTabsList } from './Rewards.constants'; -import { RewardsTabs } from './Rewards.types'; export type RewardsProps = {}; const Rewards: FC = () => { - const [activeTab, setActiveTab] = useState(rewardsTabsList[0].value); - const { isWalletConnected } = useAccount(); - - const handleSetActiveTab = (tab: RewardsTabs) => setActiveTab(tab); + const { activeTab, handleSetActiveTab } = useRewardsTabs(); + const heading = activeTab === 'leaderboard' ? 'Push Reward Points' : 'Introducing Push Reward Points Program'; return ( = () => { gap="s6" height="100%" > - Introducing Push Reward Points Program + + {heading} + = () => ( diff --git a/src/modules/rewards/components/LeaderBoardListItem.tsx b/src/modules/rewards/components/LeaderBoardListItem.tsx index e8310e9717..8c16b9df6f 100644 --- a/src/modules/rewards/components/LeaderBoardListItem.tsx +++ b/src/modules/rewards/components/LeaderBoardListItem.tsx @@ -1,7 +1,15 @@ -import { FC, useState } from 'react'; -import { Box, Text } from 'blocks'; +// React and other libraries +import { FC } from 'react'; + +// Third-party libraries import { css } from 'styled-components'; +//Hooks +import { useBlocksTheme } from 'blocks/Blocks.hooks'; + +//Components +import { Box, Text } from 'blocks'; + export type LeaderboardListItemProps = { rank: string; address: string; @@ -9,11 +17,7 @@ export type LeaderboardListItemProps = { }; const LeaderboardListItem: FC = ({ rank, address, points }) => { - const [isChainVisible, setChainVisibility] = useState(false); - - const handleShowChain = () => setChainVisibility(true); - - const handleHideChain = () => setChainVisibility(false); + const { mode } = useBlocksTheme(); return ( = ({ rank, address, poin justifyContent="space-between" alignItems="center" cursor="pointer" + // TODO: Fix ds-blocks css={css` - border-bottom: 1px solid var(--gray-200); + border-bottom: 1px solid var(--${mode === 'dark' ? 'gray-800' : 'gray-200'}); `} - onMouseEnter={handleShowChain} - onMouseLeave={handleHideChain} > = ({ rank, address, poin justifyContent="center" display="flex" > - {rank} + + {rank} + = ({ rank, address, poin backgroundColor="black" borderRadius="r10" /> - {address} - {/* to be replace by an image */} - {isChainVisible && ( - - )} + + {address} + = ({ rank, address, poin display="flex" justifyContent="center" > - {points} + + {points} + ); diff --git a/src/modules/rewards/components/LeaderBoardSection.tsx b/src/modules/rewards/components/LeaderBoardSection.tsx index a672737963..9877f26ad2 100644 --- a/src/modules/rewards/components/LeaderBoardSection.tsx +++ b/src/modules/rewards/components/LeaderBoardSection.tsx @@ -1,6 +1,9 @@ +// React and other libraries import { FC } from 'react'; -import { Box, Text } from 'blocks'; + +//Components import { LeaderBoardList } from './LeaderBoardList'; +import { Box, Text } from 'blocks'; export type LeaderBoardSectionProps = {}; @@ -10,8 +13,14 @@ const LeaderBoardSection: FC = () => { display="flex" flexDirection="column" gap="s4" + backgroundColor={{ dark: 'gray-900', light: 'white' }} > - Leaderboard + + Leaderboard + = () => { > RANK USER TOTAL POINTS diff --git a/src/modules/rewards/components/RewardsTabs.tsx b/src/modules/rewards/components/RewardsTabs.tsx index e7a563be0e..dee82a259c 100644 --- a/src/modules/rewards/components/RewardsTabs.tsx +++ b/src/modules/rewards/components/RewardsTabs.tsx @@ -1,7 +1,13 @@ import { FC } from 'react'; + import { css } from 'styled-components'; -import { Box, Text } from 'blocks'; + import { rewardsTabsList } from '../Rewards.constants'; + +import { useBlocksTheme } from 'blocks/Blocks.hooks'; + +import { Box, Text } from 'blocks'; + import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; export type RewardsTabsProps = { @@ -10,12 +16,14 @@ export type RewardsTabsProps = { }; const RewardsTabs: FC = ({ activeTab, handleSetActiveTab }) => { + const { mode } = useBlocksTheme(); return ( {rewardsTabsList.map((tab) => ( @@ -31,7 +39,7 @@ const RewardsTabs: FC = ({ activeTab, handleSetActiveTab }) => > {tab.label} diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx index a46384691e..dcfa4045cd 100644 --- a/src/modules/rewards/components/RewardsTabsContainer.tsx +++ b/src/modules/rewards/components/RewardsTabsContainer.tsx @@ -1,11 +1,15 @@ -import { Box } from 'blocks'; import { FC } from 'react'; + +//Components +import { Box } from 'blocks'; import { RewardsTabs } from './RewardsTabs'; -import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; import { DashboardSection } from './DashboardSection'; import { LeaderBoardSection } from './LeaderBoardSection'; import { RewardsActivitiesSection } from './RewardsActivitiesSection'; +//Types +import { RewardsTabs as RewardsTabsType } from '../Rewards.types'; + export type RewardsTabsContainerProps = { activeTab: RewardsTabsType; handleSetActiveTab: (tab: RewardsTabsType) => void; @@ -14,7 +18,7 @@ export type RewardsTabsContainerProps = { const RewardsTabsContainer: FC = ({ activeTab, handleSetActiveTab }) => { return ( = ({ activeTab, handle activeTab={activeTab} handleSetActiveTab={handleSetActiveTab} /> + {activeTab === 'dashboard' && handleSetActiveTab('activities')} />} {activeTab === 'activities' && } {activeTab === 'leaderboard' && } diff --git a/src/modules/rewards/hooks/useRewardsTabs.ts b/src/modules/rewards/hooks/useRewardsTabs.ts new file mode 100644 index 0000000000..f9354e75ea --- /dev/null +++ b/src/modules/rewards/hooks/useRewardsTabs.ts @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; + +//Constants +import { rewardsTabsList } from '../Rewards.constants'; + +//Types +import { RewardsTabs } from '../Rewards.types'; + +const useRewardsTabs = () => { + const [activeTab, setActiveTab] = useState(rewardsTabsList[0].value); + + const location = useLocation(); + const navigate = useNavigate(); + + const locationArray = location.pathname.split('/'); + + const handleSetActiveTab = (tab: RewardsTabs) => { + setActiveTab(tab); + navigate(`/rewards/${tab}`); + }; + + useEffect(() => { + if (locationArray.length === 3 && locationArray[2]) handleSetActiveTab(locationArray[2] as RewardsTabs); + else handleSetActiveTab(rewardsTabsList[0].value); + }, [location]); + + return { activeTab, handleSetActiveTab }; +}; + +export { useRewardsTabs }; diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx index 494fcc8fe3..0d3843cc8f 100644 --- a/src/structure/Header.tsx +++ b/src/structure/Header.tsx @@ -9,7 +9,7 @@ import { DarkModeSwitch } from 'react-toggle-dark-mode'; import styled, { useTheme } from 'styled-components'; // Internal Components -import { RewardsCircle, Box, Link } from 'blocks'; +import { RewardsCircle, Box, Link, Text, Star, Lozenge } from 'blocks'; import { LOADER_SPINNER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import Spinner from 'components/reusables/spinners/SpinnerUnit'; import { ErrorContext } from 'contexts/ErrorContext'; @@ -124,10 +124,24 @@ function Header({ isDarkMode, darkModeToggle }) { const RewardsHeaderLink = () => { return ( - + - + + + 12,500 + + }>NEW ); }; diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx index 3f4332662d..3cfdb228ca 100644 --- a/src/structure/MasterInterfacePage.tsx +++ b/src/structure/MasterInterfacePage.tsx @@ -70,6 +70,8 @@ import MetamaskPushSnapModal from 'modules/receiveNotifs/MetamaskPushSnapModal'; import SnapPage from 'pages/SnapPage'; import { AppContextType } from 'types/context'; import { getPublicAssetPath } from 'helpers/RoutesHelper'; +import { useBlocksTheme } from 'blocks/Blocks.hooks'; +import { ModeProp } from 'blocks'; // Create Header function MasterInterfacePage() { @@ -86,7 +88,14 @@ function MasterInterfacePage() { const { MetamaskPushSnapModalComponent, blockedLoading }: AppContextType = useContext(AppContext); const { showMetamaskPushSnap } = useContext(AppContext); - + const { mode } = useBlocksTheme(); + + const rewardsPagePaths = [ + APP_PATHS.Rewards, + APP_PATHS.RewardsActivities, + APP_PATHS.RewardsDashboard, + APP_PATHS.RewardsLeaderboard, + ]; useEffect(() => { if (location.hash == '#receive-notifications') { showMetamaskPushSnap(); @@ -141,7 +150,7 @@ function MasterInterfacePage() { // Render return ( - + } /> - } - /> + {rewardsPagePaths.map((path, index) => ( + } + /> + ))} ` display: flex; flex: 1; flex-direction: column; @@ -403,10 +415,7 @@ const Container = styled.div` /* Padding to be handled by Modules individually */ /* padding: ${(props) => props.theme.interfaceTopPadding} 20px 20px 20px; */ align-items: stretch; - - background-image: url('${getPublicAssetPath('svg')}/${(props) => - props.theme.scheme === 'dark' ? 'dark' : 'light'}bg.svg'); - background-size: 100% 100%; + background-color: ${(props) => (props.mode === 'dark' ? '#17181B' : '#F4F5FA')}; position: relative; `; diff --git a/src/structure/Navigation.tsx b/src/structure/Navigation.tsx index cc0651fcfc..aa58ad310e 100644 --- a/src/structure/Navigation.tsx +++ b/src/structure/Navigation.tsx @@ -96,15 +96,27 @@ function Navigation() { // Similar to componentDidMount and componentDidUpdate: useEffect(() => { const primaryList = returnTransformedList(navigationList.primary, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.PRIMARY); - const notificationList = returnTransformedList(navigationList.secondary.Notifications, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.NOTIFICATION); - const messagingList = returnTransformedList(navigationList.secondary.Messsaging, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.MESSAGING); - const developersList = returnTransformedList(navigationList.secondary.Developers, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.DEVELOPERS); + const notificationList = returnTransformedList( + navigationList.secondary.Notifications, + GLOBALS.CONSTANTS.NAVBAR_SECTIONS.NOTIFICATION + ); + const messagingList = returnTransformedList( + navigationList.secondary.Messsaging, + GLOBALS.CONSTANTS.NAVBAR_SECTIONS.MESSAGING + ); + const developersList = returnTransformedList( + navigationList.secondary.Developers, + GLOBALS.CONSTANTS.NAVBAR_SECTIONS.DEVELOPERS + ); const thirdList = returnTransformedList(navigationList.third, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.THIRD); // Set Nav List let count = -1; let navList = returnNavList(navigationList.primary, count); - navList = Object.assign(navList, returnNavList(navigationList.secondary.Notifications, Object.keys(navList).length)); + navList = Object.assign( + navList, + returnNavList(navigationList.secondary.Notifications, Object.keys(navList).length) + ); navList = Object.assign(navList, returnNavList(navigationList.secondary.Messsaging, Object.keys(navList).length)); navList = Object.assign(navList, returnNavList(navigationList.secondary.Developers, Object.keys(navList).length)); navList = Object.assign(navList, returnNavList(navigationList.third, Object.keys(navList).length)); @@ -115,9 +127,8 @@ function Navigation() { messagingList: messagingList, developersList: developersList, third: thirdList, - navigation: navList - } - + navigation: navList, + }; setNavigationSetup(finalList); }, []); @@ -188,12 +199,15 @@ function Navigation() { useEffect(() => { if (navigationSetup) { // loop and find the item in question + Object.entries(navigationSetup).forEach(([key, value]) => { - if (key === 'primary' || + if ( + key === 'primary' || key === 'notificationList' || key === 'messagingList' || key === 'developersList' || - key === 'third') { + key === 'third' + ) { const topSection = navigationSetup[key]; Object.entries(topSection).forEach(([key, value]) => { @@ -253,11 +267,13 @@ function Navigation() { if (activeDrilldownId == null) { Object.keys(transformedMenuList).forEach((key) => { - if (key === 'primary' || + if ( + key === 'primary' || key === 'notificationList' || key === 'messagingList' || key === 'developersList' || - key === 'third') { + key === 'third' + ) { Object.keys(transformedMenuList[key]).forEach((sectionkey) => { const section = transformedMenuList[key][sectionkey]; @@ -279,11 +295,13 @@ function Navigation() { } else { // menu item is getting selected Object.keys(transformedMenuList).forEach((key) => { - if (key === 'primary' || + if ( + key === 'primary' || key === 'notificationList' || key === 'messagingList' || key === 'developersList' || - key === 'third') { + key === 'third' + ) { Object.keys(transformedMenuList[key]).forEach((sectionkey) => { const section = transformedMenuList[key][sectionkey]; @@ -322,6 +340,17 @@ function Navigation() { return transformedMenuList; }; + //checks if the navigation item is active + const checkIfNavigationItemIsActive = (item) => { + if (location.pathname === item.data.href && item.active) return true; + return false; + }; + + //returns navigationBgColor color + const returnNavigationBgColor = (isActive: boolean) => { + return isActive ? theme.nav.activeColor : 'transparent'; + }; + const returnNavList = (lists, count) => { let transformedList = []; @@ -399,7 +428,6 @@ function Navigation() { } let rendered = Object.keys(items).map(function (key) { const section = items[key]; - // console.log(section) const data = section.data; const uid = section.data.uid; // if(uid === 2 ){ @@ -421,7 +449,7 @@ function Navigation() { align="stretch" size={fontSize} wrap="nowrap" - margin={secondaryButton && "0 5px 0 10px"} + margin={secondaryButton && '0 5px 0 10px'} > {secondaryButton ? ( @@ -526,8 +554,8 @@ function Navigation() { item={section} data={data} sectionID={sectionID} - active={section.active} - bg={!section.active ? 'transparent' : theme.nav.activeColor} + active={checkIfNavigationItemIsActive(section)} + bg={returnNavigationBgColor(checkIfNavigationItemIsActive(section))} /> @@ -610,8 +638,8 @@ function Navigation() { item={item} data={data} sectionID={sectionID} - active={item.active} - bg={!item.active ? 'transparent' : theme.nav.activeColor} + active={checkIfNavigationItemIsActive(item)} + bg={returnNavigationBgColor(checkIfNavigationItemIsActive(item))} /> @@ -644,33 +672,22 @@ function Navigation() { {renderMainItems(navigationSetup.primary, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.PRIMARY)} - - - {sidebarCollapsed ? 'Notifs' : 'Notifications'} - + {sidebarCollapsed ? 'Notifs' : 'Notifications'} {renderMainItems(navigationSetup.notificationList, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.NOTIFICATION)} - - - {sidebarCollapsed ? 'Msgs' : 'Messaging'} - + {sidebarCollapsed ? 'Msgs' : 'Messaging'} {renderMainItems(navigationSetup.messagingList, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.MESSAGING)} - - - {sidebarCollapsed ? 'Devs' : 'Developers'} - + {sidebarCollapsed ? 'Devs' : 'Developers'} {renderMainItems(navigationSetup.developersList, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.DEVELOPERS)} - -