Merge pull request #1404 from Giveth/giveconomy

GIVFarm Extension - 2.2.1

README.md

@@ -10,13 +10,13 @@ NEXT_PUBLIC_XDAI_NODE_URL=
 NEXT_PUBLIC_NODE_URL=
 NEXT_PUBLIC_INFURA_API_KEY=
 ```
+
 `NEXT_PUBLIC_ENV` value can be empty or `production`.
 
-`NEXT_PUBLIC_XDAI_NODE_URL` and `NEXT_PUBLIC_NODE_URL` are JRPC endpoints for xdai and mainnet (kovan in development env) networks.
+`NEXT_PUBLIC_XDAI_NODE_URL` and `NEXT_PUBLIC_NODE_URL` are JRPC endpoints for xdai and mainnet (goerli in development env) networks.
 
 `NEXT_PUBLIC_INFURA_API_KEY` is the infura api key.
 
-
 Then, run the development server:
 
 ```bash
@@ -37,8 +37,8 @@ The `pages/api` directory is mapped to `/api/*`. Files in this directory are tre
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 

src/components/RewardCard.tsx

@@ -20,9 +20,9 @@ import config from '@/configuration';
 import { IconEthereum } from './Icons/Eth';
 import { IconGnosisChain } from './Icons/GnosisChain';
 import { WhatisStreamModal } from '@/components/modals/WhatisStream';
-import { WrongNetworkInnerModal } from './modals/WrongNetwork';
 import useGIVTokenDistroHelper from '@/hooks/useGIVTokenDistroHelper';
 import { useAppSelector } from '@/features/hooks';
+import { WrongNetworkInnerModal } from '@/components//modals/WrongNetworkInnerModal';
 interface IRewardCardProps {
 	title?: string;
 	liquidAmount: ethers.BigNumber;

src/components/cards/BaseStakingCard.sc.tsx

@@ -132,7 +132,7 @@ export const OutOfRangeTooltip = styled(Subline)`
 export const AngelVaultTooltip = styled(Subline)`
 	color: ${neutralColors.gray[100]};
 	// TODO: until we merge the new tooltip to and can align it.
-	width: 161px;
+	width: 220px;
 	text-align: left;
 `;
 
@@ -181,7 +181,7 @@ export const DisableModalContent = styled.div`
 	border-radius: 12px;
 	box-shadow: ${Shadow.Neutral[400]};
 	max-width: 80%;
-	height: 156px;
+	height: 190px;
 	padding: 16px 12px;
 `;
 
@@ -206,3 +206,19 @@ export const DisableModalImage = styled.div`
 	width: 36px;
 	color: ${brandColors.giv[500]};
 `;
+
+export const WrongNetworkContainer = styled(Flex)`
+	flex-direction: row;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 257px;
+	padding: 0 20px;
+	align-items: center;
+	background: linear-gradient(180deg, #3811bf 0%, #17096a 47.94%);
+	opacity: 0.7;
+	z-index: 2;
+	div {
+		padding: 0 0 0 17px;
+	}
+`;

src/components/cards/BaseStakingCard.tsx

@@ -1,10 +1,12 @@
-import Image from 'next/image';
 import React, { FC, ReactNode, useEffect, useMemo, useState } from 'react';
 import {
 	brandColors,
 	IconExternalLink,
 	IconHelp,
 	IconSpark,
+	Caption,
+	IconAlertCricle,
+	IconInfo24,
 } from '@giveth/ui-design-system';
 import { constants } from 'ethers';
 import BigNumber from 'bignumber.js';
@@ -50,12 +52,15 @@ import {
 	StakingPoolExchangeRow,
 	StakingPoolLabel,
 	StakingPoolSubtitle,
+	WrongNetworkContainer,
 } from './BaseStakingCard.sc';
 import { APRModal } from '../modals/APR';
 import { StakeModal } from '../modals/Stake';
 import { UnStakeModal } from '../modals/UnStake';
 import { StakingPoolImages } from '../StakingPoolImages';
 import { V3StakeModal } from '../modals/V3Stake';
+import { IconEthereum } from '../Icons/Eth';
+import { IconGnosisChain } from '../Icons/GnosisChain';
 import { IconGIV } from '../Icons/GIV';
 import { IconHoneyswap } from '../Icons/Honeyswap';
 import { IconBalancer } from '../Icons/Balancer';
@@ -68,11 +73,12 @@ import { UniV3APRModal } from '../modals/UNIv3APR';
 import StakingCardIntro from './StakingCardIntro';
 import { getNowUnixMS } from '@/helpers/time';
 import FarmCountDown from '../FarmCountDown';
-import { Flex } from '../styled-components/Flex';
+import { Flex, FlexCenter } from '../styled-components/Flex';
 import { IStakeInfo } from '@/hooks/useStakingPool';
 import { TokenDistroHelper } from '@/lib/contractHelper/TokenDistroHelper';
 import { useAppSelector } from '@/features/hooks';
 import Routes from '@/lib/constants/Routes';
+import { chainName } from '@/lib/constants/constants';
 import { SubgraphDataHelper } from '@/lib/subgraph/subgraphDataHelper';
 import { IconAngelVault } from '../Icons/AngelVault';
 import type { LiquidityPosition } from '@/types/nfts';
@@ -82,7 +88,17 @@ export enum StakeCardState {
 	INTRO,
 }
 
-export const getPoolIconWithName = (platform: StakingPlatform) => {
+export const getPoolIconWithName = (
+	platform: StakingPlatform,
+	poolNetwork?: number,
+) => {
+	switch (poolNetwork) {
+		case config.MAINNET_NETWORK_NUMBER:
+			return <IconEthereum size={16} />;
+		case config.XDAI_NETWORK_NUMBER:
+			return <IconGnosisChain size={16} />;
+	}
+	// if no number is set then it defaults to platform icon
 	switch (platform) {
 		case StakingPlatform.BALANCER:
 			return <IconBalancer size={16} />;
@@ -155,7 +171,9 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 		farmStartTimeMS,
 		active,
 		archived,
+		discontinued,
 		introCard,
+		network: poolNetwork,
 	} = poolStakingConfig;
 
 	const {
@@ -236,38 +254,49 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 	return (
 		<>
 			<StakingPoolContainer>
-				{(!active || archived) && disableModal && (
+				{poolNetwork !== chainId && (
+					<WrongNetworkContainer>
+						<IconAlertCricle size={32} />
+						<Caption>
+							You are currently connected to{' '}
+							{chainName(chainId || 0)} switch to{' '}
+							{chainName(poolNetwork || 0)} to interact with this
+							farm.
+						</Caption>
+					</WrongNetworkContainer>
+				)}
+				{(!active || archived || discontinued) && disableModal && (
 					<DisableModal>
 						<DisableModalContent>
 							<DisableModalImage>
-								<Image
-									src='/images/icons/questionMarkGiv.svg'
-									height={24}
-									width={24}
-									alt='question'
-								/>
+								<IconInfo24 />
 							</DisableModalImage>
-							<div>
+							<Flex
+								flexDirection='column'
+								justifyContent='space-evenly'
+							>
 								<DisableModalText weight={700}>
-									This pool is no longer available
+									{discontinued
+										? 'Attention Farmers!'
+										: 'This pool is no longer available'}
 								</DisableModalText>
-								<br />
 								<DisableModalText>
-									Please unstake your tokens and check out
-									other available pools.
+									{discontinued
+										? '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>
 								<DisableModalCloseButton
 									label='GOT IT'
 									onClick={() => setDisableModal(false)}
 								/>
-							</div>
+							</Flex>
 						</DisableModalContent>
 					</DisableModal>
 				)}
 				{state === StakeCardState.NORMAL ? (
 					<>
 						<StakingPoolExchangeRow gap='4px' alignItems='center'>
-							{getPoolIconWithName(platform)}
+							{getPoolIconWithName(platform, poolNetwork)}
 							<StakingPoolExchange styleType='Small'>
 								{type === StakingType.GIV_LM &&
 									chainId === config.XDAI_NETWORK_NUMBER &&
@@ -319,7 +348,40 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 							{started ? (
 								<Details>
 									<FirstDetail justifyContent='space-between'>
-										<DetailLabel>APR</DetailLabel>
+										<FlexCenter gap='8px'>
+											<DetailLabel>APR</DetailLabel>
+											{type ===
+												StakingType.ICHI_GIV_ONEGIV && (
+												<IconWithTooltip
+													direction='right'
+													icon={
+														<IconHelp size={16} />
+													}
+												>
+													<AngelVaultTooltip>
+														Your cumulative APR
+														including both rewards
+														earned as fees & added
+														automatically to your
+														position (
+														{apr?.vaultIRR &&
+															formatEthHelper(
+																apr.vaultIRR,
+																2,
+															)}
+														% IRR), and rewards
+														earned in GIV from
+														staking your LP (
+														{apr &&
+															formatEthHelper(
+																apr.effectiveAPR,
+																2,
+															)}
+														% APR).
+													</AngelVaultTooltip>
+												</IconWithTooltip>
+											)}
+										</FlexCenter>
 										<Flex gap='8px' alignItems='center'>
 											{active && !archived ? (
 												<>
@@ -330,70 +392,28 @@ const BaseStakingCard: FC<IBaseStakingCardProps> = ({
 																.mustard[500]
 														}
 													/>
-													{type ===
-													StakingType.ICHI_GIV_ONEGIV ? (
-														<IconWithTooltip
-															direction='top'
-															icon={
-																<DetailValue>
-																	{apr &&
-																		formatEthHelper(
-																			apr.effectiveAPR,
-																			2,
-																		)}
-																	%
-																</DetailValue>
+
+													<>
+														<DetailValue>
+															{apr &&
+																formatEthHelper(
+																	apr.effectiveAPR,
+																	2,
+																)}
+															%
+														</DetailValue>
+														<IconContainer
+															onClick={() =>
+																setShowAPRModal(
+																	true,
+																)
 															}
 														>
-															<AngelVaultTooltip>
-																Your cumulative
-																APR including
-																both rewards
-																earned as fees &
-																added
-																automatically to
-																your position (
-																{apr?.vaultIRR &&
-																	formatEthHelper(
-																		apr.vaultIRR,
-																		2,
-																	)}
-																% IRR), and
-																rewards earned
-																in GIV from
-																staking your LP
-																(
-																{apr &&
-																	formatEthHelper(
-																		apr.effectiveAPR,
-																		2,
-																	)}
-																% APR).
-															</AngelVaultTooltip>
-														</IconWithTooltip>
-													) : (
-														<>
-															<DetailValue>
-																{apr &&
-																	formatEthHelper(
-																		apr.effectiveAPR,
-																		2,
-																	)}
-																%
-															</DetailValue>
-															<IconContainer
-																onClick={() =>
-																	setShowAPRModal(
-																		true,
-																	)
-																}
-															>
-																<IconHelp
-																	size={16}
-																/>
-															</IconContainer>
-														</>
-													)}
+															<IconHelp
+																size={16}
+															/>
+														</IconContainer>
+													</>
 												</>
 											) : (
 												<div>N/A %</div>

src/components/cards/StakingPoolCard.tsx

@@ -6,6 +6,7 @@ import {
 	SimplePoolStakingConfig,
 } from '@/types/config';
 import { useStakingPool } from '@/hooks/useStakingPool';
+
 interface IStakingPoolCardProps {
 	network: number;
 	poolStakingConfig: SimplePoolStakingConfig | RegenPoolStakingConfig;