Merge pull request #1590 from Giveth/add-fox-xdai-regen-farm

Add fox xdai regen farm

.vscode/settings.json

@@ -1,12 +1,14 @@
 {
 	"cSpell.words": [
-		"giveth",
-		"merkle",
-		"xdai",
-		"GIVpower",
+		"GIVback",
 		"GIVeconomy",
+		"giveth",
 		"GIVfarm",
-		"GIVback",
+		"GIVpower",
 		"GIVstream",
+		"HONEYSWAP",
+		"merkle",
+		"SUSHISWAP",
+		"xdai"
 	]
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.3.2",
+	"version": "2.3.3",
 	"private": true,
 	"scripts": {
 		"build": "next build",

src/components/DAOChangeNetworkModal.tsx

@@ -0,0 +1,76 @@
+import {
+	IconInfo16,
+	neutralColors,
+	brandColors,
+	Caption,
+	Button,
+} from '@giveth/ui-design-system';
+import { useWeb3React } from '@web3-react/core';
+import { InjectedConnector } from '@web3-react/injected-connector';
+import styled from 'styled-components';
+import { switchNetwork } from '@/lib/metamask';
+import { Flex } from './styled-components/Flex';
+import config from '@/configuration';
+
+interface IChangeNetworkModal {
+	network: number;
+}
+
+export const DAOChangeNetworkModal = ({ network }: IChangeNetworkModal) => {
+	const { account, activate } = useWeb3React();
+	const networkLabel =
+		network === config.XDAI_NETWORK_NUMBER ? 'Gnosis chain' : 'Mainnet';
+
+	const checkWalletAndSwitchNetwork = async (network: number) => {
+		if (!account) {
+			await activate(new InjectedConnector({}));
+			await switchNetwork(network);
+		}
+		if (account) {
+			await switchNetwork(network);
+		}
+	};
+	return (
+		<DAOChangeNetworkModalContainer>
+			<Flex gap='16px'>
+				<IconInfo16 />
+				<Title>Switch network</Title>
+			</Flex>
+			<Desc>This RegenFarm is only available on {networkLabel}</Desc>
+			<ChangeButton
+				buttonType='texty'
+				label={`Switch to ${networkLabel}`}
+				onClick={() => checkWalletAndSwitchNetwork(network)}
+			/>
+		</DAOChangeNetworkModalContainer>
+	);
+};
+
+const DAOChangeNetworkModalContainer = styled.div`
+	background-color: ${neutralColors.gray[100]};
+	color: ${brandColors.giv[300]};
+	border: 1px solid ${brandColors.giv[300]};
+	border-radius: 8px;
+	width: 320px;
+	z-index: 4;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 2;
+	padding: 16px;
+`;
+
+const Title = styled(Caption)`
+	font-weight: bold;
+`;
+
+const Desc = styled(Caption)`
+	margin-left: 32px;
+	margin-bottom: 16px;
+`;
+
+const ChangeButton = styled(Button)`
+	color: ${brandColors.giv[300]};
+	margin-left: auto;
+`;

src/components/RegenFarm.tsx

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+import { useWeb3React } from '@web3-react/core';
+import { H4 } from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import {
+	givEconomySupportedNetworks,
+	regenFarmStreamCardCol,
+} from '@/lib/constants/constants';
+import StakingPoolCard from './cards/StakingPoolCard';
+import { Row, Col } from './Grid';
+import { PoolRow } from './homeTabs/GIVfarm.sc';
+import config from '@/configuration';
+import { RegenFarmConfig } from '@/types/config';
+import { DAOChangeNetworkModal } from './DAOChangeNetworkModal';
+import { DAOContainer, DAOChangeNetwork } from './givfarm/GIVfrens.sc';
+import { RegenStreamCard } from './givfarm/RegenStreamCard';
+
+interface IRegenFarmProps {
+	regenFarm: RegenFarmConfig;
+}
+
+export const RegenFarm: FC<IRegenFarmProps> = ({ regenFarm }) => {
+	const { chainId } = useWeb3React();
+	const { pools } = regenFarm;
+
+	return (
+		<PoolRow>
+			<DAOContainer key={`regenStream_${regenFarm.type}`} xs={12}>
+				<DaoTitle>{regenFarm.title}</DaoTitle>
+				<Row>
+					{pools.map((poolStakingConfig, idx) => (
+						<Col key={idx} xs={12} sm={6} lg={4}>
+							<StakingPoolCard
+								poolStakingConfig={poolStakingConfig}
+								regenStreamConfig={regenFarm}
+							/>
+						</Col>
+					))}
+					<Col
+						xs={12}
+						sm={regenFarmStreamCardCol.sm[pools.length]} // TODO: use mod()
+						lg={regenFarmStreamCardCol.lg[pools.length]} // TODO: use mod()
+					>
+						{regenFarm && (
+							<RegenStreamCard
+								streamConfig={regenFarm}
+								network={
+									givEconomySupportedNetworks.includes(
+										chainId as number,
+									)
+										? (chainId as number)
+										: config.MAINNET_NETWORK_NUMBER
+								}
+							/>
+						)}
+					</Col>
+				</Row>
+				{chainId !== config.MAINNET_NETWORK_NUMBER &&
+					chainId !== config.XDAI_NETWORK_NUMBER && (
+						<>
+							<DAOChangeNetwork />
+							<DAOChangeNetworkModal
+								network={config.MAINNET_NETWORK_NUMBER}
+							/>
+						</>
+					)}
+			</DAOContainer>
+		</PoolRow>
+	);
+};
+
+const DaoTitle = styled(H4)`
+	margin-top: 32px;
+	margin-bottom: 24px;
+`;

src/components/cards/BaseStakingCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect, useMemo, useState } from 'react';
+import React, { FC, ReactNode, useEffect, useState } from 'react';
 import {
 	brandColors,
 	IconExternalLink,
@@ -15,6 +15,7 @@ import { useRouter } from 'next/router';
 import config from '../../configuration';
 import {
 	PoolStakingConfig,
+	RegenFarmConfig,
 	RegenPoolStakingConfig,
 	SimplePoolStakingConfig,
 	StakingPlatform,
@@ -129,6 +130,7 @@ interface IBaseStakingCardProps {
 	poolStakingConfig: PoolStakingConfig | RegenPoolStakingConfig;
 	stakeInfo: IStakeInfo;
 	notif?: ReactNode;
+	regenStreamConfig?: RegenFarmConfig;
 	stakedPositions?: LiquidityPosition[];
 	unstakedPositions?: LiquidityPosition[];
 	currentIncentive?: {
@@ -140,6 +142,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 	stakeInfo,
 	poolStakingConfig,
 	notif,
+	regenStreamConfig,
 	stakedPositions,
 	unstakedPositions,
 	currentIncentive,
@@ -181,9 +184,9 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 		provideLiquidityLink,
 		unit,
 		farmStartTimeMS,
+		farmEndTimeMS,
 		active,
 		archived,
-		discontinued,
 		introCard,
 		network: poolNetwork,
 	} = poolStakingConfig;
@@ -201,15 +204,9 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 
 	const userGIVLocked = sdh.getUserGIVLockedBalance();
 	const userGIVPowerBalance = sdh.getUserGIVPowerBalance();
-
-	const regenStreamConfig = useMemo(() => {
-		if (!regenStreamType) return undefined;
-		const networkConfig =
-			chainId === config.XDAI_NETWORK_NUMBER
-				? config.XDAI_CONFIG
-				: config.MAINNET_CONFIG;
-		return networkConfig.regenStreams.find(s => s.type === regenStreamType);
-	}, [chainId, regenStreamType]);
+	const isDiscontinued = farmEndTimeMS
+		? getNowUnixMS() > farmEndTimeMS
+		: false;
 
 	useEffect(() => {
 		if (isFirstStakeShown || !router) return;
@@ -301,7 +298,7 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 						</Caption>
 					</WrongNetworkContainer>
 				)}
-				{(!active || archived || discontinued) && disableModal && (
+				{(!active || archived || isDiscontinued) && disableModal && (
 					<DisableModal>
 						<DisableModalContent>
 							<DisableModalImage>
@@ -312,12 +309,12 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 								justifyContent='space-evenly'
 							>
 								<DisableModalText weight={700}>
-									{discontinued
+									{isDiscontinued
 										? 'Attention Farmers!'
 										: 'This pool is no longer available'}
 								</DisableModalText>
 								<DisableModalText>
-									{discontinued
+									{isDiscontinued
 										? 'This farm has ended, move your funds to another farm to keep earning rewards.'
 										: 'Please unstake your tokens and check out other available pools.'}
 								</DisableModalText>
@@ -670,9 +667,8 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 					<GIVpowerCardIntro setState={setState} />
 				) : (
 					<StakingCardIntro
-						poolStakingConfig={
-							poolStakingConfig as SimplePoolStakingConfig
-						}
+						symbol={title}
+						introCard={poolStakingConfig.introCard}
 						setState={setState}
 					/>
 				)}

src/components/cards/StakingCardIntro.tsx

@@ -9,22 +9,25 @@ import {
 } from '@giveth/ui-design-system';
 import { Dispatch, FC, SetStateAction } from 'react';
 import styled from 'styled-components';
-import { SimplePoolStakingConfig } from '@/types/config';
+import { IntroCardConfig } from '@/types/config';
 import { getSymbolIconWithName } from '../StakingPoolImages';
 import { Flex } from '../styled-components/Flex';
 import { StakeCardState } from './BaseStakingCard';
 
 interface IStakingCardIntro {
-	poolStakingConfig: SimplePoolStakingConfig;
 	setState: Dispatch<SetStateAction<StakeCardState>>;
+	symbol: string;
+	introCard?: IntroCardConfig;
 }
 
 const StakingCardIntro: FC<IStakingCardIntro> = ({
-	poolStakingConfig,
+	symbol,
+	introCard,
 	setState,
 }) => {
-	const { title, introCard } = poolStakingConfig;
-	const titleIcon = introCard?.icon ? introCard?.icon : title.split(' / ')[0];
+	const titleIcon = introCard?.icon
+		? introCard?.icon
+		: symbol.split(' / ')[0];
 	return (
 		<StakingCardIntroContainer>
 			<HeaderRow>

src/components/cards/StakingPoolCard.tsx

@@ -1,15 +1,20 @@
 import BaseStakingCard from './BaseStakingCard';
 import { useStakingPool } from '@/hooks/useStakingPool';
 import type {
+	RegenFarmConfig,
 	RegenPoolStakingConfig,
 	SimplePoolStakingConfig,
 } from '@/types/config';
 import type { FC } from 'react';
 interface IStakingPoolCardProps {
 	poolStakingConfig: SimplePoolStakingConfig | RegenPoolStakingConfig;
+	regenStreamConfig?: RegenFarmConfig;
 }
 
-const StakingPoolCard: FC<IStakingPoolCardProps> = ({ poolStakingConfig }) => {
+const StakingPoolCard: FC<IStakingPoolCardProps> = ({
+	poolStakingConfig,
+	regenStreamConfig,
+}) => {
 	const { apr, notStakedAmount, stakedAmount, earned } =
 		useStakingPool(poolStakingConfig);
 	const stakeInfo = {
@@ -23,6 +28,7 @@ const StakingPoolCard: FC<IStakingPoolCardProps> = ({ poolStakingConfig }) => {
 		<BaseStakingCard
 			stakeInfo={stakeInfo}
 			poolStakingConfig={poolStakingConfig}
+			regenStreamConfig={regenStreamConfig}
 		/>
 	);
 };

src/components/givfarm/GIVfrens.sc.tsx

@@ -13,7 +13,6 @@ export const GIVfrensLink = styled(GLink)`
 
 export const DAOContainer = styled(Col)`
 	position: relative;
-	padding-top: 24px;
 `;
 
 export const DAOChangeNetwork = styled.div`