diff --git a/README.md b/README.md index 090ebcc380..92e5eec7ec 100644 --- a/README.md +++ b/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! diff --git a/src/components/RewardCard.tsx b/src/components/RewardCard.tsx index 8401bcf504..09ddb46e64 100644 --- a/src/components/RewardCard.tsx +++ b/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; diff --git a/src/components/cards/BaseStakingCard.sc.tsx b/src/components/cards/BaseStakingCard.sc.tsx index ec04a67139..55b8b1a38b 100644 --- a/src/components/cards/BaseStakingCard.sc.tsx +++ b/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; + } +`; diff --git a/src/components/cards/BaseStakingCard.tsx b/src/components/cards/BaseStakingCard.tsx index 002f15c9e3..79c9e40f7c 100644 --- a/src/components/cards/BaseStakingCard.tsx +++ b/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 ; + case config.XDAI_NETWORK_NUMBER: + return ; + } + // if no number is set then it defaults to platform icon switch (platform) { case StakingPlatform.BALANCER: return ; @@ -155,7 +171,9 @@ const BaseStakingCard: FC = ({ farmStartTimeMS, active, archived, + discontinued, introCard, + network: poolNetwork, } = poolStakingConfig; const { @@ -236,38 +254,49 @@ const BaseStakingCard: FC = ({ return ( <> - {(!active || archived) && disableModal && ( + {poolNetwork !== chainId && ( + + + + You are currently connected to{' '} + {chainName(chainId || 0)} switch to{' '} + {chainName(poolNetwork || 0)} to interact with this + farm. + + + )} + {(!active || archived || discontinued) && disableModal && ( - question + -
+ - This pool is no longer available + {discontinued + ? 'Attention Farmers!' + : 'This pool is no longer available'} -
- 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.'} setDisableModal(false)} /> -
+ )} {state === StakeCardState.NORMAL ? ( <> - {getPoolIconWithName(platform)} + {getPoolIconWithName(platform, poolNetwork)} {type === StakingType.GIV_LM && chainId === config.XDAI_NETWORK_NUMBER && @@ -319,7 +348,40 @@ const BaseStakingCard: FC = ({ {started ? (
- APR + + APR + {type === + StakingType.ICHI_GIV_ONEGIV && ( + + } + > + + 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). + + + )} + {active && !archived ? ( <> @@ -330,70 +392,28 @@ const BaseStakingCard: FC = ({ .mustard[500] } /> - {type === - StakingType.ICHI_GIV_ONEGIV ? ( - - {apr && - formatEthHelper( - apr.effectiveAPR, - 2, - )} - % - + + <> + + {apr && + formatEthHelper( + apr.effectiveAPR, + 2, + )} + % + + + setShowAPRModal( + true, + ) } > - - 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). - - - ) : ( - <> - - {apr && - formatEthHelper( - apr.effectiveAPR, - 2, - )} - % - - - setShowAPRModal( - true, - ) - } - > - - - - )} + + + ) : (
N/A %
diff --git a/src/components/cards/StakingPoolCard.tsx b/src/components/cards/StakingPoolCard.tsx index 0150b2917b..c03b990dba 100644 --- a/src/components/cards/StakingPoolCard.tsx +++ b/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; diff --git a/src/components/homeTabs/GIVbacks.tsx b/src/components/homeTabs/GIVbacks.tsx index 25d2d1dc33..192305b176 100644 --- a/src/components/homeTabs/GIVbacks.tsx +++ b/src/components/homeTabs/GIVbacks.tsx @@ -20,7 +20,6 @@ import { RoundSection, RoundTitle, RoundInfo, - RoundInfoRow, RoundInfoTallRow, RoundButton, InfoSection, @@ -36,7 +35,7 @@ import { HarvestAllModal } from '../modals/HarvestAll'; import { getNowUnixMS } from '@/helpers/time'; import { formatDate } from '@/lib/helpers'; import { GIVBackExplainModal } from '../modals/GIVBackExplain'; -import { TopInnerContainer } from './commons'; +import { NoWrap, TopInnerContainer } from './commons'; import links from '@/lib/constants/links'; import { Col, Container, Row } from '@/components/Grid'; import Routes from '@/lib/constants/Routes'; @@ -49,11 +48,11 @@ export const TabGIVbacksTop = () => { const [showGivBackExplain, setShowGivBackExplain] = useState(false); const [givBackStream, setGivBackStream] = useState(0); const { givTokenDistroHelper } = useGIVTokenDistroHelper(); - const currentValues = useAppSelector(state => state.subgraph.currentValues); + const xDaiValues = useAppSelector(state => state.subgraph.xDaiValues); const givTokenDistroBalance = useMemo(() => { - const sdh = new SubgraphDataHelper(currentValues); + const sdh = new SubgraphDataHelper(xDaiValues); return sdh.getGIVTokenDistroBalance(); - }, [currentValues]); + }, [xDaiValues]); const { chainId } = useWeb3React(); useEffect(() => { @@ -197,31 +196,55 @@ export const TabGIVbacksBottom = () => { - GIVbacks Round {round} + + GIVbacks Round {round} + - -

Start Date

+ + {' '} +

+ Start Date +

+

+ + {givTokenDistroHelper + ? formatDate(roundStartime) + : '-'} + +

+ +

- {givTokenDistroHelper - ? formatDate(roundStartime) - : '-'} + End Date

- - -

End Date

- {givTokenDistroHelper - ? formatDate(roundEndTime) - : '-'} + + {givTokenDistroHelper + ? formatDate(roundEndTime) + : '-'} +

- + -

GIV Allocated to Round

+

+ + GIV Allocated to Round + +

- 1 Million GIV + 1 Million GIV { +const renderPools = (chainId?: number, showArchivedPools?: boolean) => { + const pools = [...config.MAINNET_CONFIG.pools, ...config.XDAI_CONFIG.pools]; + if (chainId === config.XDAI_NETWORK_NUMBER) { + pools.reverse(); + } return pools .filter(p => (showArchivedPools ? true : p.active && !p.archived)) .map((poolStakingConfig, idx) => ({ poolStakingConfig, idx })) @@ -70,6 +65,7 @@ const renderPools = ( idx1 - idx2, ) .map(({ poolStakingConfig }, index) => { + const network = poolStakingConfig?.network || 0; return ( { return ( - + - - - Bridge your GIV - - - - - - Buy GIV token - - - - - {`Contract (${ - chainId === config.XDAI_NETWORK_NUMBER - ? config.XDAI_CONFIG.chainName - : config.MAINNET_CONFIG.chainName - }):`} - - {shortenAddress( + + + + Bridge your GIV + + + + + + Buy GIV token + + + + + {`Contract (${ chainId === config.XDAI_NETWORK_NUMBER - ? config.XDAI_CONFIG.TOKEN_ADDRESS - : config.MAINNET_CONFIG.TOKEN_ADDRESS, - )} - - { - navigator.clipboard.writeText( + ? config.XDAI_CONFIG.chainName + : config.MAINNET_CONFIG.chainName + }):`} + + {shortenAddress( chainId === config.XDAI_NETWORK_NUMBER ? config.XDAI_CONFIG.TOKEN_ADDRESS : config.MAINNET_CONFIG.TOKEN_ADDRESS, - ); - }} - > - - - + )} + + { + navigator.clipboard.writeText( + chainId === config.XDAI_NETWORK_NUMBER + ? config.XDAI_CONFIG.TOKEN_ADDRESS + : config.MAINNET_CONFIG + .TOKEN_ADDRESS, + ); + }} + > + + + + { isSelected={showArchivedPools} /> - {chainId === config.XDAI_NETWORK_NUMBER && ( - <> - - - - - {renderPools( - config.XDAI_CONFIG.pools, - config.XDAI_NETWORK_NUMBER, - showArchivedPools, - )} - + <> + + + + + + + + {renderPools(chainId, showArchivedPools)} + + {chainId === config.XDAI_NETWORK_NUMBER ? ( - - )} - {(!chainId || - chainId === config.MAINNET_NETWORK_NUMBER || - !givEconomySupportedNetworks.includes(chainId)) && ( - <> - - - - - {renderPools( - config.MAINNET_CONFIG.pools, - config.MAINNET_NETWORK_NUMBER, - showArchivedPools, - )} - + ) : ( - - )} + )} + Add Your DAO diff --git a/src/components/homeTabs/commons.tsx b/src/components/homeTabs/commons.tsx index 93457d66a1..28664bef6b 100644 --- a/src/components/homeTabs/commons.tsx +++ b/src/components/homeTabs/commons.tsx @@ -42,3 +42,7 @@ export const EnhancedRewardCard = styled(RewardCard)` export const ExtLinkCyan = styled(GLink)` color: ${brandColors.cyan[500]}; `; + +export const NoWrap = styled.span` + white-space: nowrap; +`; diff --git a/src/components/modals/WrongNetwork.tsx b/src/components/modals/WrongNetwork.tsx index 8c12fcfb14..82d3a08821 100644 --- a/src/components/modals/WrongNetwork.tsx +++ b/src/components/modals/WrongNetwork.tsx @@ -1,74 +1,12 @@ -import { P, brandColors } from '@giveth/ui-design-system'; import styled from 'styled-components'; -import { FC } from 'react'; -import { Button } from '@giveth/ui-design-system'; -import { useWeb3React } from '@web3-react/core'; -import { InjectedConnector } from '@web3-react/injected-connector'; - -import { switchNetwork } from '@/lib/wallet'; -import { chainName } from '@/lib/constants/constants'; import { Modal } from './Modal'; -import { IModal } from '@/types/common'; +import { + IWrongNetworkInnerModal, + WrongNetworkInnerModal, +} from './WrongNetworkInnerModal'; import { useModalAnimation } from '@/hooks/useModalAnimation'; - -interface IWrongNetworkInnerModal { - text?: string; - targetNetworks: number[]; -} - -export const WrongNetworkInnerModal: FC = ({ - text, - targetNetworks, -}) => { - const { account, activate } = useWeb3React(); - - const checkWalletAndSwitchNetwork = async (network: number) => { - if (!account) { - await activate(new InjectedConnector({})); - } - if (account) { - await switchNetwork(network); - } - }; - - return ( - - -

{text}

-

Please switch the network.

- - - {targetNetworks.map(network => ( -