Merge pull request #1563 from Giveth/release-2.2.8

Release 2.2.8

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.2.7",
+	"version": "2.2.8",
 	"private": true,
 	"scripts": {
 		"build": "next build",
@@ -19,7 +19,7 @@
 		"@ethersproject/contracts": "^5.5.0",
 		"@ethersproject/providers": "^5.5.0",
 		"@ethersproject/units": "^5.5.0",
-		"@giveth/ui-design-system": "^1.8.8",
+		"@giveth/ui-design-system": "^1.8.22",
 		"@gnosis.pm/safe-apps-web3-react": "^1.5.0",
 		"@reduxjs/toolkit": "^1.8.1",
 		"@sentry/nextjs": "^6.19.3",

src/components/cards/BaseStakingCard.sc.tsx

@@ -8,7 +8,7 @@ import {
 	P,
 	Caption,
 	Button,
-	OulineButton,
+	OutlineButton,
 	Subline,
 } from '@giveth/ui-design-system';
 import { Flex } from '../styled-components/Flex';
@@ -76,7 +76,7 @@ export const StakeButtonsRow = styled(Flex)`
 	gap: 16px;
 `;
 
-export const StakeButton = styled(OulineButton)`
+export const StakeButton = styled(OutlineButton)`
 	width: 100%;
 `;
 
@@ -190,7 +190,7 @@ export const DisableModalText = styled(P)<{ weight?: number }>`
 	font-weight: ${props => (props.weight ? props.weight : 400)};
 `;
 
-export const DisableModalCloseButton = styled(OulineButton)`
+export const DisableModalCloseButton = styled(OutlineButton)`
 	border: none;
 	color: ${brandColors.giv[500]};
 	font-weight: 700;

src/components/homeTabs/GIVbacks.tsx

@@ -122,33 +122,36 @@ export const TabGIVbacksTop = () => {
 
 export const TabGIVbacksBottom = () => {
 	const [round, setRound] = useState(0);
-	const [roundStartime, setRoundStartime] = useState(new Date());
+	const [roundStarTime, setRoundStarTime] = useState(new Date());
 	const [roundEndTime, setRoundEndTime] = useState(new Date());
-	const { givTokenDistroHelper } = useGIVTokenDistroHelper();
+	const { givTokenDistroHelper, isLoaded } = useGIVTokenDistroHelper();
 
 	useEffect(() => {
-		if (givTokenDistroHelper) {
+		if (
+			givTokenDistroHelper &&
+			isLoaded &&
+			givTokenDistroHelper.startTime.getTime() !== 0
+		) {
 			const now = getNowUnixMS();
-			const deltaT = now - givTokenDistroHelper.startTime.getTime();
+			const ROUND_20_OFFSET = 4; // At round 20 we changed the rounds from Fridays to Tuesdays
+			const startTime = new Date(givTokenDistroHelper.startTime);
+			startTime.setDate(startTime.getDate() + ROUND_20_OFFSET);
+			const deltaT = now - startTime.getTime();
 			const TwoWeek = 1_209_600_000;
 			const _round = Math.floor(deltaT / TwoWeek) + 1;
 			setRound(_round);
-			const _rounStartTime = new Date(givTokenDistroHelper.startTime);
-			_rounStartTime.setDate(
-				givTokenDistroHelper.startTime.getDate() + (_round - 1) * 14,
-			);
-			_rounStartTime.setHours(givTokenDistroHelper.startTime.getHours());
-			_rounStartTime.setMinutes(
-				givTokenDistroHelper.startTime.getMinutes(),
-			);
-			setRoundStartime(_rounStartTime);
-			const _roundEndTime = new Date(_rounStartTime);
-			_roundEndTime.setDate(_rounStartTime.getDate() + 14);
-			_roundEndTime.setHours(givTokenDistroHelper.startTime.getHours());
-			_roundEndTime.setMinutes(
-				givTokenDistroHelper.startTime.getMinutes(),
-			);
+			const _roundEndTime = new Date(startTime);
+			_roundEndTime.setDate(startTime.getDate() + _round * 14);
+			_roundEndTime.setHours(startTime.getHours());
+			_roundEndTime.setMinutes(startTime.getMinutes());
 			setRoundEndTime(_roundEndTime);
+			const _roundStartTime = new Date(_roundEndTime);
+			if (_round === 20) {
+				_roundStartTime.setDate(_roundEndTime.getDate() - 18);
+			} else {
+				_roundStartTime.setDate(_roundEndTime.getDate() - 14);
+			}
+			setRoundStarTime(_roundStartTime);
 		}
 	}, [givTokenDistroHelper]);
 
@@ -197,7 +200,10 @@ export const TabGIVbacksBottom = () => {
 						<Col xs={12} md={8}>
 							<RoundSection>
 								<RoundTitle>
-									GIVbacks <NoWrap>Round {round}</NoWrap>
+									GIVbacks{' '}
+									<NoWrap>
+										Round {isLoaded ? round : '--'}
+									</NoWrap>
 								</RoundTitle>
 								<RoundInfo>
 									<RoundInfoTallRow
@@ -211,9 +217,9 @@ export const TabGIVbacksBottom = () => {
 										</P>
 										<P>
 											<NoWrap>
-												{givTokenDistroHelper
-													? formatDate(roundStartime)
-													: '-'}
+												{isLoaded
+													? formatDate(roundStarTime)
+													: '--'}
 											</NoWrap>
 										</P>
 									</RoundInfoTallRow>
@@ -227,9 +233,9 @@ export const TabGIVbacksBottom = () => {
 										</P>
 										<P>
 											<NoWrap>
-												{givTokenDistroHelper
+												{isLoaded
 													? formatDate(roundEndTime)
-													: '-'}
+													: '--'}
 											</NoWrap>
 										</P>
 									</RoundInfoTallRow>

src/components/modals/GIVBackExplain.tsx

@@ -5,7 +5,7 @@ import {
 	GLink,
 	brandColors,
 	IconExternalLink,
-	OulineButton,
+	OutlineButton,
 	IconGIVBack,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
@@ -77,7 +77,7 @@ const LinksRow = styled(Flex)`
 	margin-bottom: 24px;
 `;
 
-const GotItButton = styled(OulineButton)`
+const GotItButton = styled(OutlineButton)`
 	width: 316px;
 	margin: 0 auto;
 `;

src/components/modals/LowerShields.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import styled from 'styled-components';
-import { Lead, Button, OulineButton } from '@giveth/ui-design-system';
+import { Lead, Button, OutlineButton } from '@giveth/ui-design-system';
 
 import { Modal } from '@/components/modals/Modal';
 import ShieldBlackIcon from '/public/images/icons/shield_black.svg';
@@ -42,7 +42,7 @@ const LowerShields = (props: { onClose: () => void }) => {
 					window for you to complete your sign-in
 				</Lead>
 				{isDark ? (
-					<OulineButton label='OK' onClick={closeModal} />
+					<OutlineButton label='OK' onClick={closeModal} />
 				) : (
 					<Button label='OK' onClick={closeModal} />
 				)}

src/components/modals/ShareModal.tsx

@@ -10,7 +10,7 @@ import {
 	H5,
 	Lead,
 	neutralColors,
-	OulineButton,
+	OutlineButton,
 } from '@giveth/ui-design-system';
 
 import { Modal } from './Modal';
@@ -111,7 +111,7 @@ const LeadText = styled(Lead)`
 	color: ${brandColors.deep[900]};
 `;
 
-const CustomOutlineButton = styled(OulineButton)`
+const CustomOutlineButton = styled(OutlineButton)`
 	text-transform: uppercase;
 	font-weight: 700;
 	border: none;

src/components/modals/Stake.tsx

@@ -4,7 +4,7 @@ import {
 	Button,
 	H4,
 	neutralColors,
-	OulineButton,
+	OutlineButton,
 	P,
 	SublineBold,
 } from '@giveth/ui-design-system';
@@ -510,7 +510,7 @@ const InnerModal = styled.div`
 	padding: 0 24px;
 `;
 
-const ApproveButton = styled(OulineButton)`
+const ApproveButton = styled(OutlineButton)`
 	width: 100%;
 	margin-top: 32px;
 	margin-bottom: 8px;

src/components/modals/WhatisStream.tsx

@@ -6,7 +6,7 @@ import {
 	GLink,
 	brandColors,
 	IconExternalLink,
-	OulineButton,
+	OutlineButton,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
 import { FC } from 'react';
@@ -124,7 +124,7 @@ const LinksRow = styled(FlexCenter)`
 	margin-bottom: 24px;
 `;
 
-const GotItButton = styled(OulineButton)`
+const GotItButton = styled(OutlineButton)`
 	width: 316px;
 	margin: 0 auto;
 `;

src/components/views/create/CreateProject.tsx

@@ -8,7 +8,7 @@ import {
 	H5,
 	IconExternalLink,
 	neutralColors,
-	OulineButton,
+	OutlineButton,
 } from '@giveth/ui-design-system';
 import { useMutation } from '@apollo/client';
 import { utils } from 'ethers';
@@ -396,7 +396,7 @@ const CreateProject: FC<ICreateProjectProps> = ({ project }) => {
 						</PublishList>
 						<Buttons>
 							{(!isEditMode || isDraft) && (
-								<OulineButton
+								<OutlineButton
 									label='PREVIEW '
 									buttonType='primary'
 									disabled={isLoading}
@@ -414,7 +414,7 @@ const CreateProject: FC<ICreateProjectProps> = ({ project }) => {
 								disabled={isLoading}
 							/>
 							{isEditMode && (
-								<OulineButton
+								<OutlineButton
 									onClick={() => router.back()}
 									label='CANCEL'
 									buttonType='primary'

src/components/views/project/projectDonateCard/ProjectDonateCard.tsx

@@ -13,7 +13,7 @@ import {
 	Button,
 	brandColors,
 	neutralColors,
-	OulineButton,
+	OutlineButton,
 } from '@giveth/ui-design-system';
 import { motion } from 'framer-motion';
 import { captureException } from '@sentry/nextjs';
@@ -416,7 +416,7 @@ const FullButton = styled(Button)`
 	}
 `;
 
-const FullOutlineButton = styled(OulineButton)`
+const FullOutlineButton = styled(OutlineButton)`
 	width: 100%;
 `;
 

src/components/views/projects/ProjectsIndex.tsx

@@ -7,7 +7,7 @@ import {
 	neutralColors,
 	Subline,
 	H3,
-	OulineButton,
+	OutlineButton,
 	Lead,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
@@ -307,7 +307,7 @@ const Loader = styled.div`
 	margin: 20px auto;
 `;
 
-const StyledButton = styled(OulineButton)<{ transparent?: boolean }>`
+const StyledButton = styled(OutlineButton)<{ transparent?: boolean }>`
 	color: ${brandColors.pinky[500]};
 	border-color: ${props =>
 		props.transparent ? 'transparent' : brandColors.pinky[500]};

src/components/views/userPublicProfile/PublicProfileOverviewTab.tsx

@@ -7,7 +7,7 @@ import {
 	H1,
 	QuoteText,
 	Button,
-	OulineButton,
+	OutlineButton,
 } from '@giveth/ui-design-system';
 
 import Routes from '@/lib/constants/Routes';
@@ -112,7 +112,7 @@ const PublicProfileOverviewTab: FC<IUserPublicProfileView> = ({ user }) => {
 							onClick: btn.onClick,
 						};
 						if (btn.outline)
-							return <OulineButton key={index} {...props} />;
+							return <OutlineButton key={index} {...props} />;
 						return <Button key={index} {...props} />;
 					})}
 				</Buttons>

src/components/views/verification/Common.sc.tsx

@@ -3,14 +3,14 @@ import {
 	Button,
 	H6,
 	neutralColors,
-	OulineButton,
+	OutlineButton,
 	semanticColors,
 } from '@giveth/ui-design-system';
 import { Flex, FlexCenter } from '@/components/styled-components/Flex';
 import { Shadow } from '@/components/styled-components/Shadow';
 import { mediaQueries } from '@/lib/constants/constants';
 
-export const OutlineStyled = styled(OulineButton)`
+export const OutlineStyled = styled(OutlineButton)`
 	padding-left: 100px;
 	padding-right: 100px;
 	margin-bottom: 24px;

src/hooks/useGIVTokenDistroHelper.tsx

@@ -18,15 +18,17 @@ export const defaultTokenDistroHelper = new TokenDistroHelper({
 const useGIVTokenDistroHelper = () => {
 	const [givTokenDistroHelper, setGIVTokenDistroHelper] =
 		useState<TokenDistroHelper>(defaultTokenDistroHelper);
+	const [isLoaded, setIsLoaded] = useState(false);
 	const currentValue = useAppSelector(
 		state => state.subgraph.currentValues,
 		shallowEqual,
 	);
 	useEffect(() => {
 		const sdh = new SubgraphDataHelper(currentValue);
 		setGIVTokenDistroHelper(new TokenDistroHelper(sdh.getGIVTokenDistro()));
+		setIsLoaded(currentValue.isLoaded as boolean);
 	}, [currentValue]);
-	return { givTokenDistroHelper };
+	return { givTokenDistroHelper, isLoaded };
 };
 
 export default useGIVTokenDistroHelper;

yarn.lock

@@ -653,10 +653,10 @@
     "@ethersproject/properties" "^5.6.0"
     "@ethersproject/strings" "^5.6.1"
 
-"@giveth/ui-design-system@^1.8.8":
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/@giveth/ui-design-system/-/ui-design-system-1.8.12.tgz#07f57c78fa865a352f9250c4d7c05af56f6d55d0"
-  integrity sha512-ixJahC1YuQD1DFfYNsIB2N+B7JHjm8n0XZBZ6w2Yv6kL13fYxIAsHHNCe6Ql6dmjTnlI7NzO3uEZweMTQi28zA==
+"@giveth/ui-design-system@^1.8.22":
+  version "1.8.22"
+  resolved "https://registry.yarnpkg.com/@giveth/ui-design-system/-/ui-design-system-1.8.22.tgz#0b58f1b2ff6570a5cae2467765f0bcfd5d250313"
+  integrity sha512-KbFijCEQUV1kaVfJA5ZNSA4ecXIr8VKzizuh0m1BF3X08WQ/kfzmoow9tadLYszQE7/E2sGsqbboGeHh/3+v+w==
   dependencies:
     next "12.0.7"
     react "17.0.2"