Merge pull request #661 from Giveth/f/archived-pools

F/ Displays archived pools on toggle + unescaping characters on project cards
Giveth · May 9, 2022 · 8dda267 · 8dda267
2 parents 609c561 + 70350c1
commit 8dda267
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.3.0",
+	"version": "2.0.6",
 	"private": true,
 	"scripts": {
 		"build": "next build",

diff --git a/src/components/cards/BaseStakingCard.tsx b/src/components/cards/BaseStakingCard.tsx
@@ -129,9 +129,10 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 		BUY_LINK,
 		unit,
 		farmStartTimeMS,
+		active,
 	} = poolStakingConfig;
 
-	const isV3Staking = type === StakingType.UNISWAPV3;
+	const isInactive = !active || type === StakingType.UNISWAPV3;
 
 	const { apr, earned, stakedLpAmount, userNotStakedAmount } = stakeInfo;
 
@@ -165,10 +166,12 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 		setStarted(farmStartTimeMS ? getNowUnixMS() > farmStartTimeMS : true);
 	}, [farmStartTimeMS]);
 
+	// if(isInactive) return null
+
 	return (
 		<>
 			<StakingPoolContainer>
-				{isV3Staking && disableModal && (
+				{isInactive && disableModal && (
 					<DisableModal>
 						<DisableModalContent>
 							<DisableModalImage>
@@ -253,7 +256,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 									<FirstDetail justifyContent='space-between'>
 										<DetailLabel>APR</DetailLabel>
 										<Flex gap='8px' alignItems='center'>
-											{isV3Staking ? (
+											{isInactive ? (
 												<div>N/A %</div>
 											) : (
 												<>
@@ -288,7 +291,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 									<Detail justifyContent='space-between'>
 										<DetailLabel>Claimable</DetailLabel>
 										<DetailValue>
-											{isV3Staking ? (
+											{isInactive ? (
 												<div>N/A</div>
 											) : (
 												`${formatWeiHelper(
@@ -312,7 +315,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 										</Flex>
 										<Flex gap='4px' alignItems='center'>
 											<DetailValue>
-												{isV3Staking ? (
+												{isInactive ? (
 													<div>N/A</div>
 												) : (
 													formatWeiHelper(
@@ -333,7 +336,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 								/>
 							)}
 							<ClaimButton
-								disabled={earned.isZero() || isV3Staking}
+								disabled={earned.isZero() || isInactive}
 								onClick={() => setShowHarvestModal(true)}
 								label='HARVEST REWARDS'
 								buttonType='primary'
@@ -345,12 +348,12 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 										size='small'
 										disabled={
 											userNotStakedAmount.isZero() ||
-											isV3Staking
+											isInactive
 										}
 										onClick={() => setShowStakeModal(true)}
 									/>
 									<StakeAmount>
-										{isV3Staking
+										{isInactive
 											? `${userNotStakedAmount.toNumber()} ${unit}`
 											: `${formatWeiHelper(
 													userNotStakedAmount,
@@ -367,23 +370,23 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 										}
 									/>
 									<StakeAmount>
-										{isV3Staking
+										{isInactive
 											? `${stakedLpAmount.toNumber()} ${unit}`
 											: `${formatWeiHelper(
 													stakedLpAmount,
 											  )} ${unit}`}
 									</StakeAmount>
 								</StakeContainer>
 							</StakeButtonsRow>
-							{!isV3Staking && (
+							{!isInactive && (
 								<LiquidityButton
 									label={
 										type === StakingType.GIV_LM
 											? 'BUY GIV TOKENS'
 											: 'PROVIDE LIQUIDITY'
 									}
 									onClick={() => {
-										if (isV3Staking) {
+										if (isInactive) {
 											setShowUniV3APRModal(true);
 										} else {
 											window.open(
@@ -428,7 +431,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 				/>
 			)}
 			{showStakeModal &&
-				(isV3Staking ? (
+				(isInactive ? (
 					<V3StakeModal
 						setShowModal={setShowStakeModal}
 						poolStakingConfig={poolStakingConfig}
@@ -441,7 +444,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 					/>
 				))}
 			{showUnStakeModal &&
-				(isV3Staking ? (
+				(isInactive ? (
 					<V3StakeModal
 						isUnstakingModal={true}
 						setShowModal={setShowUnStakeModal}

diff --git a/src/components/homeTabs/GIVfarm.sc.tsx b/src/components/homeTabs/GIVfarm.sc.tsx
@@ -31,6 +31,10 @@ export const GIVfarmRewardCard = styled(EnhancedRewardCard)`
 	}
 `;
 
+export const ArchivedPoolsToggle = styled.div`
+	margin-top: 25px;
+`;
+
 interface PoolRowProps {
 	disabled?: boolean;
 }

diff --git a/src/components/homeTabs/GIVfarm.tsx b/src/components/homeTabs/GIVfarm.tsx
@@ -21,7 +21,9 @@ import {
 	ContractRow,
 	CopyWrapper,
 	GIVfarmBottomContainer,
+	ArchivedPoolsToggle,
 } from './GIVfarm.sc';
+import RadioTitle from '@/components/views/donate/RadioTitle';
 import { NetworkSelector } from '@/components/NetworkSelector';
 import StakingPositionCard from '@/components/cards/StakingPositionCard';
 import { getGivStakingConfig } from '@/helpers/networkProvider';
@@ -43,10 +45,11 @@ import {
 const renderPools = (
 	pools: BasicNetworkConfig['pools'],
 	network: number,
-	active: boolean,
-) =>
-	pools
-		.filter(p => p.active === active)
+	showArchivedPools?: boolean,
+) => {
+	return pools
+		.filter(p => (showArchivedPools ? true : !!p.active))
+		.sort(p => (p.active ? -1 : 1))
 		.map((poolStakingConfig, index) => {
 			return (
 				<Col
@@ -68,6 +71,7 @@ const renderPools = (
 				</Col>
 			);
 		});
+};
 
 export const TabGIVfarmTop = () => {
 	const [rewardLiquidPart, setRewardLiquidPart] = useState(constants.Zero);
@@ -117,6 +121,7 @@ export const TabGIVfarmTop = () => {
 
 export const TabGIVfarmBottom = () => {
 	const { chainId } = useWeb3React();
+	const [showArchivedPools, setArchivedPools] = useState(false);
 
 	return (
 		<GIVfarmBottomContainer>
@@ -175,14 +180,17 @@ export const TabGIVfarmBottom = () => {
 						</CopyWrapper>
 					</ContractRow>
 				</Flex>
+				<ArchivedPoolsToggle>
+					<RadioTitle
+						title='Show archived pools'
+						toggleRadio={() => setArchivedPools(!showArchivedPools)}
+						isSelected={showArchivedPools}
+					/>
+				</ArchivedPoolsToggle>
+
 				{chainId === config.XDAI_NETWORK_NUMBER && (
 					<>
 						<PoolRow>
-							{renderPools(
-								config.XDAI_CONFIG.pools,
-								config.XDAI_NETWORK_NUMBER,
-								true,
-							)}
 							<Col sm={6} lg={4}>
 								<StakingPoolCard
 									network={config.XDAI_NETWORK_NUMBER}
@@ -194,7 +202,7 @@ export const TabGIVfarmBottom = () => {
 							{renderPools(
 								config.XDAI_CONFIG.pools,
 								config.XDAI_NETWORK_NUMBER,
-								false,
+								showArchivedPools,
 							)}
 						</PoolRow>
 						<GIVfrens
@@ -213,11 +221,6 @@ export const TabGIVfarmBottom = () => {
 								!givEconomySupportedNetworks.includes(chainId)
 							}
 						>
-							{renderPools(
-								config.MAINNET_CONFIG.pools,
-								config.MAINNET_NETWORK_NUMBER,
-								true,
-							)}
 							<Col sm={6} lg={4}>
 								<StakingPoolCard
 									network={config.MAINNET_NETWORK_NUMBER}
@@ -229,7 +232,7 @@ export const TabGIVfarmBottom = () => {
 							{renderPools(
 								config.MAINNET_CONFIG.pools,
 								config.MAINNET_NETWORK_NUMBER,
-								false,
+								showArchivedPools,
 							)}
 						</PoolRow>
 						<GIVfrens

diff --git a/src/components/views/donate/RadioTitle.tsx b/src/components/views/donate/RadioTitle.tsx
@@ -7,17 +7,19 @@ import {
 	neutralColors,
 	Subline,
 } from '@giveth/ui-design-system';
+import { useGeneral, ETheme } from '@/context/general.context';
 
 import RadioOnIcon from '../../../../public/images/radio_on.svg';
 import RadioOffIcon from '../../../../public/images/radio_off.svg';
 
 const RadioTitle = (props: {
 	title: string;
-	subtitle: string;
+	subtitle?: string;
 	isSelected: boolean;
 	toggleRadio: () => void;
 }) => {
 	const { title, subtitle, isSelected, toggleRadio } = props;
+	const { theme } = useGeneral();
 
 	return (
 		<RadioTitleBox onClick={toggleRadio}>
@@ -26,7 +28,12 @@ const RadioTitle = (props: {
 				alt='radio icon'
 			/>
 			<div>
-				<RadioTitleText isSelected={isSelected}>{title}</RadioTitleText>
+				<RadioTitleText
+					isSelected={isSelected}
+					isDark={theme === ETheme.Dark}
+				>
+					{title}
+				</RadioTitleText>
 				<RadioSubtitleText isSelected={isSelected}>
 					{subtitle}
 				</RadioSubtitleText>
@@ -46,8 +53,12 @@ const RadioTitleBox = styled.div`
 `;
 
 const RadioTitleText = styled(Lead)`
-	color: ${(props: { isSelected: boolean }) =>
-		props.isSelected ? brandColors.deep[900] : neutralColors.gray[600]};
+	color: ${(props: { isSelected: boolean; isDark: boolean }) =>
+		props.isSelected
+			? props.isDark
+				? 'white'
+				: brandColors.deep[900]
+			: neutralColors.gray[600]};
 `;
 
 const RadioSubtitleText = styled(Subline)`

diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
@@ -1,4 +1,5 @@
 import { promisify } from 'util';
+import { unescape } from 'lodash';
 import { parseUnits, parseEther } from '@ethersproject/units';
 import { keccak256 } from '@ethersproject/keccak256';
 import { Contract } from '@ethersproject/contracts';
@@ -127,12 +128,13 @@ export const isUserRegistered = (user?: IUser) => {
 
 export const htmlToText = (text?: string) => {
 	if (!text) return;
-	return text
+	const formattedText = text
+		.replace(/<[^>]+>/g, '')
 		.replace(/<\/(?:.|\n)*?>/gm, ' ') // replace closing tags w/ a space
 		.replace(/<(?:.|\n)*?>/gm, '') // strip opening tags
 		.trim();
+	return unescape(formattedText);
 };
-
 export const capitalizeFirstLetter = (string: string) => {
 	return string.charAt(0).toUpperCase() + string.slice(1);
 };