Merge pull request #2433 from Giveth/release-2.13.0-regenfarm-new-design

Release 2.13.0 RegenFarm new design

.vscode/settings.json

@@ -4,6 +4,7 @@
 		"GIVback",
 		"GIVBACKS",
 		"GIVeconomy",
+		"GIVgarden",
 		"giveth",
 		"GIVfarm",
 		"GIVfrens",

lang/en.json

@@ -725,11 +725,12 @@
 	"label.your_givfarm_rewards": "Your GIVfarm rewards",
 	"label.bridge_your_giv": "Bridge your GIV",
 	"label.contract": "Contract",
-	"label.show_archived_pools": "Show archived pools",
-	"label.you_are_currently_connected_to": "You are currently connected to",
+	"label.switch_to_archive_cards": "Switch to Archive Cards",
+	"label.wrong_network": "You are currently connected to {chainName} switch to {targetChain} to interact with this farm.",
 	"label.switch_to": "switch to",
-	"label.to_interact_with_this_farm": "to interact with this farm.",
+	"label.please_connect_your_wallet": "Please connect your wallet",
 	"label.this_farm_has_ended": "This farm has ended",
+	"label.this_stream_has_ended": "This stream has ended",
 	"label.an_exploit_has_removed_available_rewards": "An exploit has removed available rewards from this pool. Please refer to",
 	"label.this_forum_post": "this forum post",
 	"label.for_details": "for details.",
@@ -946,6 +947,7 @@
 	"label.your_donations_and_participation_in_the_giveconomy": "Your donations, and participation in the GIVeconomy, enables us to build a new future where real world impact projects benefit from their own community-driven regenerative economies.",
 	"label.discover_our_roadmap": "discover our roadmap",
 	"label.more_about_us": "More about us",
+	"component.archive_cover.archived": "ARCHIVED",
 	"modal.news_letter": "Newsletter sign up",
 	"section.we_wont_send_it": "We won’t send it every 5 second! Promise :)",
 	"section.subscribe_to_our_newsletter": "Subscribe to our newsletter and get all updates straight to your mailbox!",
@@ -1228,6 +1230,7 @@
 	"label.getting_started": "Getting Started",
 	"label.the_mt_pelerin_onramp_allows_you_to_use_a_credit_card_or_bank_transfer": "The Mt Pelerin 'onramp' allows you to use a credit card or bank transfer to get crypto in your web3 wallet to donate. First, select the method of payment (bank transfer or credit card), and then select the currency you want to use to purchase crypto. Then, select the crypto currency you wish to purchase. The currency xDAI and network Gnosis Chain will be selected by default. Finally, click 'Buy'.",
 	"label.you_can_wait_on_this_page_until_the_payment_goes_through": "You can wait on this page until the payment goes through, or you can close it. If the payment is successful, the funds will automatically appear in your chosen wallet after some time. Note: If you click 'Close', you will be redirected back to the start and will not get to the next page.",
+	"component.regenstream_card.harvest_caption": "Use the Harvest button to claim liquid rewards from this RegenStream",
 	"label.get_crypto_with_mtpelerin": "Get Crypto with Mt Pelerin",
 	"label.use_a_bank_transfer_or_credit_Card": "Use a bank transfer or credit card to purchase crypto and deposit it directly into your web3 wallet.",
 	"label.crypto_made_easy": "Crypto made easy",

lang/es.json

@@ -723,6 +723,10 @@
 	"label.your_givfarm_rewards": "Tus recompensas de GIVfarm",
 	"label.bridge_your_giv": "Mueve tu GIV",
 	"label.contract": "Contrato",
+	"label.switch_to_archive_cards": "",
+	"label.wrong_network": "",
+	"label.please_connect_your_wallet": "",
+	"label.this_stream_has_ended": "",
 	"label.show_archived_pools": "Mostrar pools archivadas",
 	"label.you_are_currently_connected_to": "Estas conectado actualmente a",
 	"label.switch_to": "cambiar a",
@@ -874,6 +878,7 @@
 	"label.if_you_remove_givpower_it_will_be_distributed_proportionally": "Si eliminas el GIVpower de este proyecto, se repartirá proporcionalmente a los demás proyectos que hayas boosteado.",
 	"label.you_cant_remove_your_givpower_from_this_project": "No puedes eliminar tu GIVpower de este proyecto porque es el único boost que tienes. Boostea otro proyecto con GIVpower antes de continuar.",
 	"label.remove_givpower": "Remover GIVpower",
+	"component.archive_cover.archived": "",
 	"label.you_dont_have_any_givpower": "¡No tienes GIVpower!",
 	"label.stake_and_lock_your_giv_to_get_givpower": "Haz stake y bloquea tu GIV para obtener GIVpower.",
 	"page.faq.what_is_the_givfarm.content": "es el programa de 'Liquidity Mining' donde Giveth permite a los titulares de GIV proporcionar liquidez y hacer stake de tokens para obtener recompensas GIV. Para obtener más información, consulte el",
@@ -1235,6 +1240,7 @@
 	"label.you_can_wait_on_this_page_until_the_payment_goes_through": "Puedes esperar en esta página mientras el pago se procesa, o puedes cerrarla. Si el pago es exitoso, los fondos aparecerán automáticamente en tu billetera luego de un tiempo. Nota: Si presionas 'Close', serás redirigído al inicio y no a la siguiente página.",
 	"label.mtpelerin_pricing_starts_at_zero": "La tarifa de MtPelerin comienza en 0%, ¡muy difícil de superar! En general, tratamos de mantener nuestra estructura de precios lo más atractiva, simple y transparente posible. Damos al usuario la mejor tasa de cambio que podemos encontrar como comerciantes profesionales en el mercado. Cobramos un pequeño porcentaje a esa tarifa cuando se superan los $500 por año, por debajo de eso no cobramos nada.",
 	"label.the_mt_pelerin_onramp_allows_you_to_use_a_credit_card_or_bank_transfer": "El 'ramp' de Mt Pelerin te permite usar una tarjeta de crédito o transferencia bancaria para obtener cripto en tu billetera web3 para donar. Primero, seleccione el método de pago (transferencia bancaria o tarjeta de crédito) y luego seleccione la moneda que desea usar para comprar criptomonedas. Luego, seleccione la cripto que desea comprar. xDAI y la red Gnosis Chain estarán seleccionadas por defecto. Finalmente, haga clic en 'Buy'.",
+	"component.regenstream_card.harvest_caption": "",
 	"label.thanks_to_mtpelerin_you_can_onramp_your_dollars": "Gracias a Mt Pelerin, puedes hacer 'onramp' de tus dólares y obtener cripto para donar a proyectos. Con 0% de tarifas para transacciones por debajo de $500 al año, después de este monto cobran un pequeño porcentaje.",
 	"label.the_funds_are_sent_to_your_wallet_within_minutes": "Los fondos son enviados a tu billetera en cuestión de minutos sin costos de gas",
 	"label.the_service_is_a_kycfree_authorized_financial_intermediary": "Son una entidad financiera autorizada localizada en Suiza, libre de KYC",

package.json

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

pages/_document.tsx

@@ -49,6 +49,8 @@ export default class MyDocument extends Document {
 								const r = document.querySelector(':root');
 								r.style.setProperty('--bgColor', '#090446');
 								r.style.setProperty('--color', '#FFFFFF');
+								r.style.setProperty('--scrollColor', '#754CFF');
+								r.style.setProperty('--scrollHoverColor', '#211985');
 							}`,
 						}}
 					></script>

pages/givbacks.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import GIVbackView from '@/components/views/Back.view';
+import GIVbacksView from '@/components/views/GIVbacks.view';
 import { givbacksMetatags } from '@/content/metatags';
 import { GeneralMetatags } from '@/components/Metatag';
 import { useAppDispatch } from '@/features/hooks';
@@ -18,7 +18,7 @@ export default function GIVbacksRoute() {
 	return (
 		<>
 			<GeneralMetatags info={givbacksMetatags} />
-			<GIVbackView />
+			<GIVbacksView />
 		</>
 	);
 }

pages/giveconomy.tsx

@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 
-import HomeView from '@/components/views/Home.view';
 import { giveconomyMetatags } from '@/content/metatags';
 import { GeneralMetatags } from '@/components/Metatag';
 import { setDarkTheme, setLightTheme } from '@/features/general/general.slice';
 import { useAppDispatch } from '@/features/hooks';
+import GIVeconomyView from '@/components/views/GIVeconomy.view';
 
 export default function GIVeconomyRoute() {
 	const dispatch = useAppDispatch();
@@ -19,7 +19,7 @@ export default function GIVeconomyRoute() {
 	return (
 		<>
 			<GeneralMetatags info={giveconomyMetatags} />
-			<HomeView />
+			<GIVeconomyView />
 		</>
 	);
 }

pages/givfarm.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import GIVfarmView from '@/components/views/Farm.view';
+import GIVfarmView from '@/components/views/givfarm/GIVfarm.view';
 import { givfarmMetatags } from '@/content/metatags';
 import { GeneralMetatags } from '@/components/Metatag';
 import { setDarkTheme, setLightTheme } from '@/features/general/general.slice';

pages/givgarden.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import GIVgardenView from '@/components/views/Garden.view';
+import GIVgardenView from '@/components/views/GIVgarden.view';
 import { givgardenMetatags } from '@/content/metatags';
 import { GeneralMetatags } from '@/components/Metatag';
 import { setDarkTheme, setLightTheme } from '@/features/general/general.slice';

pages/givpower.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import GIVpowerView from '@/components/views/Power.view';
+import GIVpowerView from '@/components/views/GIVpower.view';
 import { GeneralMetatags } from '@/components/Metatag';
 import { setDarkTheme, setLightTheme } from '@/features/general/general.slice';
 import { useAppDispatch } from '@/features/hooks';

pages/givstream.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import GIVstreamView from '@/components/views/Stream.view';
+import GIVstreamView from '@/components/views/GIVstream.view';
 import { givstreamMetatags } from '@/content/metatags';
 import { GeneralMetatags } from '@/components/Metatag';
 import { setDarkTheme, setLightTheme } from '@/features/general/general.slice';

pages/test1.tsx

@@ -2,17 +2,21 @@ import styled from 'styled-components';
 import { GetServerSideProps } from 'next';
 import { useWeb3React } from '@web3-react/core';
 import { IconHelpFilled16 } from '@giveth/ui-design-system';
-import { useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
+
 import { Container } from '@giveth/ui-design-system';
 import { gToast, ToastType } from '@/components/toasts';
 import { useAppDispatch } from '@/features/hooks';
 import { fetchXDaiInfoAsync } from '@/features/subgraph/subgraph.thunks';
-import { FlowRateTooltip } from '@/components/homeTabs/GIVstream.sc';
+import { FlowRateTooltip } from '@/components/GIVeconomyPages/GIVstream.sc';
 import { IconWithTooltip } from '@/components/IconWithToolTip';
-import { zIndex } from '@/lib/constants/constants';
 import { removeQueryParamAndRedirect } from '@/helpers/url';
+import { TestProvider, useTestData } from '@/context/test.context';
+import { IModal } from '@/types/common';
+import { useModalAnimation } from '@/hooks/useModalAnimation';
+import { Modal } from '@/components/modals/Modal';
 import { FETCH_ALL_PROJECTS } from '@/apollo/gql/gqlProjects';
 import { client } from '@/apollo/apolloClient';
 
@@ -21,15 +25,32 @@ const RichTextInput = dynamic(() => import('@/components/RichTextInput'), {
 });
 
 const TestRoute = () => {
+	return (
+		<TestProvider>
+			<TestIndex />
+		</TestProvider>
+	);
+};
+
+const TestIndex = () => {
 	// const xDaiValues = useSelector(
 	// 	(state: RootState) => state.subgraph.xDaiValues,
 	// );
+	const [showModal, setShowModal] = useState(false);
 	const { account } = useWeb3React();
 	const dispatch = useAppDispatch();
 	const functionRef = useRef<Function>();
 	const [state, setState] = useState(0);
 	const [description, setDescription] = useState('');
 	const router = useRouter();
+	const { setTest } = useTestData();
+	console.log('Index rerender');
+
+	useEffect(() => {
+		setInterval(() => {
+			setTest(test => !test);
+		}, 1000);
+	}, [setTest]);
 
 	// const { data, isLoading, error, refetch } = useGetSubgraphValuesQuery({
 	// 	chain: chainId,
@@ -129,6 +150,9 @@ const TestRoute = () => {
 				>
 					remove search
 				</button>
+				<button type='button' onClick={() => setShowModal(true)}>
+					show Modal
+				</button>
 				<button type='button' onClick={fetchProjects}>
 					Fetch Projects
 				</button>
@@ -152,11 +176,38 @@ const TestRoute = () => {
 					limit={200}
 				/>
 			</TestContainer>
+			{showModal && <TestModal setShowModal={setShowModal} />}
 		</>
 	);
 };
+interface ITestInnerModalProps {}
 
-export default TestRoute;
+interface ITestModalProps extends IModal, ITestInnerModalProps {}
+
+const TestModal: FC<ITestModalProps> = ({ setShowModal }) => {
+	const { isAnimating, closeModal } = useModalAnimation(setShowModal);
+	console.log('Modal rerender');
+	return (
+		<Modal
+			closeModal={closeModal}
+			isAnimating={isAnimating}
+			headerTitle='APR'
+		>
+			<TestInnerModal />
+		</Modal>
+	);
+};
+
+const TestInnerModal: FC<ITestInnerModalProps> = () => {
+	const { test } = useTestData();
+	console.log('Inner Modal rerender');
+	return (
+		<div>
+			<div>Hiii there this is test:</div>
+			<div>{test.toString()}</div>
+		</div>
+	);
+};
 
 export const getServerSideProps: GetServerSideProps = async context => {
 	// let { statusCode } = context.res;
@@ -170,15 +221,8 @@ export const getServerSideProps: GetServerSideProps = async context => {
 };
 
 const TestContainer = styled(Container)`
-	padding: 200px 0;
+	padding-top: 200px;
+	padding-bottom: 200px;
 `;
 
-const TooltipContainer = styled.div`
-	position: fixed;
-	padding: 0;
-	background-color: black;
-	color: #fff;
-	border-radius: 6px;
-	padding: 8px;
-	z-index: ${zIndex.TOOLTIP};
-`;
+export default TestRoute;

src/components/ArchiveAndNetworkCover/ArchiveAndNetworkCover.tsx

@@ -0,0 +1,26 @@
+import { useWeb3React } from '@web3-react/core';
+import { FC } from 'react';
+import { ArchiveCover } from './ArchiveCover';
+import { WrongNetworkCover } from './WrongNetworkCover';
+
+interface IArchiveAndNetworkCoverProps {
+	targetNetwork: number;
+	isStream?: boolean;
+	isArchived?: boolean;
+	isExploited?: boolean;
+}
+
+export const ArchiveAndNetworkCover: FC<IArchiveAndNetworkCoverProps> = ({
+	isStream,
+	targetNetwork,
+	isArchived,
+	isExploited,
+}) => {
+	const { chainId } = useWeb3React();
+
+	return chainId === undefined || chainId !== targetNetwork ? (
+		<WrongNetworkCover targetNetwork={targetNetwork} />
+	) : isArchived || isExploited ? (
+		<ArchiveCover isStream={isStream} isExploited={isExploited} />
+	) : null;
+};