Merge pull request #2585 from Giveth/release-2.15.1

Release 2.15.1
Giveth · Apr 30, 2023 · 3784211 · 3784211 · vercel · Apr 30, 2023
2 parents c5f7917 + 640b3b4
commit 3784211
Show file tree

Hide file tree

Showing 23 changed files with 344 additions and 68 deletions.
diff --git a/lang/ca.json b/lang/ca.json
@@ -1205,7 +1205,6 @@
 	"food": "Menjar",
 	"grassroots": "Comunitari",
 	"label.cant_donate": "No podeu fer una donació? Compartiu aquesta pàgina en lloc.",
-	"label.check_out_on": "Consulteu a",
 	"label.sign_out": "Sortir",
 	"label.team": "Equip",
 	"label.our_mission": "La nostra missió",

diff --git a/lang/en.json b/lang/en.json
@@ -177,7 +177,6 @@
 	"label.copy_link": "Copy Link",
 	"label.dismiss": "Dismiss",
 	"label.copied": "Copied!",
-	"label.check_out_on": "Check out on",
 	"label.sign_out": "Sign out",
 	"label.building_the_future_of_giving": "Building the Future of Giving",
 	"label.join_desc_one": "Giveth is first and foremost a community of givers and changemakers. We are passionate people working together to build a crypto-economic system that can reward giving to good causes. Our project is open-source, decentralized, altruistic, and community-led.",

diff --git a/lang/es.json b/lang/es.json
@@ -177,7 +177,6 @@
 	"label.copy_link": "Copiar Link",
 	"label.dismiss": "Ignorar",
 	"label.copied": "Copiado!",
-	"label.check_out_on": "Echa un vistazo en",
 	"label.sign_out": "Salir",
 	"label.building_the_future_of_giving": "Construyendo el Futuro de las Donaciones",
 	"label.join_desc_one": "Giveth es, ante todo, una comunidad de donantes y agentes de cambio. Somos personas apasionadas que trabajan juntas para construir un sistema cripto-económico que pueda recompensar las donaciones a buenas causas. Nuestro proyecto es de código abierto, descentralizado, altruista y dirigido por la comunidad.",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.15.0",
+	"version": "2.15.1",
 	"private": true,
 	"scripts": {
 		"build": "next build",
@@ -60,7 +60,7 @@
 		"react-quill": "^2.0.0",
 		"react-redux": "^8.0.1",
 		"react-select": "^5.2.1",
-		"react-share": "^4.4.0",
+		"react-share": "^4.4.1",
 		"sharp": "^0.30.5",
 		"siwe": "^1.1.6",
 		"styled-components": "^5.3.6",

diff --git a/pages/landings/web3-crypto-donation-platform.tsx b/pages/landings/web3-crypto-donation-platform.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import Head from 'next/head';
+import Web3CryptoDonation from '@/components/views/landings/web3CryptoDonation';
+
+const Web3CryptoDonationRoute: FC = () => {
+	return (
+		<>
+			<Head>
+				<title>Giveth - Web3 Crypto Donation Platform</title>
+			</Head>
+			<Web3CryptoDonation />
+		</>
+	);
+};
+
+export default Web3CryptoDonationRoute;
diff --git a/src/components/PFP.tsx b/src/components/PFP.tsx
@@ -72,16 +72,17 @@ interface IStyledImageProps {
 
 const StyledImage = styled(Image)<IStyledImageProps>`
 	transition: box-shadow 0.2s ease, transform 0.2s ease;
-	border: 0.2754px solid ${brandColors.mustard[500]};
-	box-shadow: 0px 0.76px 4.6px 1.14px rgba(225, 69, 141, 0.3);
+	border: 0.18 solid ${brandColors.mustard[500]};
 	border-radius: 4px;
+	box-shadow: 0px 0.76px 4.6px 1.14px rgba(225, 69, 141, 0.3);
 	&:hover {
 		transform: scale(1.2); // Adjust the scale value as desired
 	}
 
 	${props =>
 		props.PFPsize === EPFPSize.LARGE &&
 		css`
+			border: 0.2754px solid ${brandColors.mustard[500]};
 			box-shadow: 0px 1.15778px 6.9467px 1.73668px #e1458d;
 			border-radius: 16px;
 		`}

diff --git a/src/components/views/donate/SocialBox.tsx → src/components/SocialBox.tsx b/src/components/views/donate/SocialBox.tsx → src/components/SocialBox.tsx
@@ -11,39 +11,43 @@ import styled from 'styled-components';
 import { fullPath } from '@/lib/helpers';
 import { IProject } from '@/apollo/types/types';
 import { slugToProjectView } from '@/lib/routeCreators';
+import {
+	EContentType,
+	ESocialType,
+	shareContentCreator,
+} from '@/lib/constants/shareContent';
 
 interface ISocialBox {
 	project: IProject;
-	isSuccess?: boolean;
+	contentType: EContentType;
+	isDonateFooter?: boolean;
 }
 
-const SocialBox: FC<ISocialBox> = ({ project, isSuccess }) => {
+const SocialBox: FC<ISocialBox> = props => {
+	const { project, contentType, isDonateFooter } = props;
 	const { description, slug } = project;
 	const { formatMessage } = useIntl();
-	const shareTitleTwitter = `${
-		isSuccess ? 'This' : 'Our'
-	} project is raising funds in crypto on @giveth! 🙌
-Donate directly on Ethereum Mainnet or @gnosischain w/ no fees or intermediaries.👇`;
 
-	const shareTitleFacebookAndLinkedin = `${
-		isSuccess ? 'This' : 'Our'
-	} project is raising funds in crypto on @givethio!
-	Donate directly on Ethereum Mainnet or Gnosis Chain with no fees or intermediaries.
-	
-	Here's the link to ${isSuccess ? 'this' : 'our'} project:
-	`;
+	const shareTitleTwitter = shareContentCreator(
+		contentType,
+		ESocialType.twitter,
+	);
+	const shareTitleFacebookAndLinkedin = shareContentCreator(
+		contentType,
+		ESocialType.facebook,
+	);
 
 	const projectUrl = fullPath(slugToProjectView(slug));
 
 	return (
-		<Social isSuccess={isSuccess}>
+		<Social isDonateFooter={isDonateFooter}>
 			<BLead>
-				{isSuccess
-					? formatMessage({ id: 'label.share_this' })
-					: formatMessage({ id: 'label.cant_donate' })}
+				{isDonateFooter
+					? formatMessage({ id: 'label.cant_donate' })
+					: formatMessage({ id: 'label.share_this' })}
 			</BLead>
 			<SocialItems>
-				<SocialItem isSuccess={isSuccess}>
+				<SocialItem isDonateFooter={isDonateFooter}>
 					<TwitterShareButton
 						title={shareTitleTwitter}
 						url={projectUrl || ''}
@@ -57,7 +61,7 @@ Donate directly on Ethereum Mainnet or @gnosischain w/ no fees or intermediaries
 						/>
 					</TwitterShareButton>
 				</SocialItem>
-				<SocialItem isSuccess={isSuccess}>
+				<SocialItem isDonateFooter={isDonateFooter}>
 					<LinkedinShareButton
 						title={shareTitleFacebookAndLinkedin}
 						summary={description}
@@ -71,7 +75,7 @@ Donate directly on Ethereum Mainnet or @gnosischain w/ no fees or intermediaries
 						/>
 					</LinkedinShareButton>
 				</SocialItem>
-				<SocialItem isSuccess={isSuccess}>
+				<SocialItem isDonateFooter={isDonateFooter}>
 					<FacebookShareButton
 						quote={shareTitleFacebookAndLinkedin}
 						url={projectUrl || ''}
@@ -97,12 +101,12 @@ const BLead = styled(Lead)`
 	z-index: 2;
 `;
 
-const Social = styled.div<{ isSuccess?: boolean }>`
+const Social = styled.div<{ isDonateFooter?: boolean }>`
 	z-index: 1;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	margin: ${props => (props.isSuccess ? '50px 0' : '18px 0')};
+	margin: ${props => (props.isDonateFooter ? '18px 0' : '50px 0')};
 	color: ${neutralColors.gray[900]};
 	align-items: center;
 `;
@@ -113,11 +117,11 @@ const SocialItems = styled.div`
 	justify-content: center;
 	margin: 8px 0 0 0;
 `;
-const SocialItem = styled.div<{ isSuccess?: boolean }>`
+const SocialItem = styled.div<{ isDonateFooter?: boolean }>`
 	cursor: pointer;
 	border-radius: 8px;
-	padding: ${props => (props.isSuccess ? `0 6px` : '0 12px')};
-	margin: ${props => (props.isSuccess ? `0 12px` : '0')};
+	padding: ${props => (props.isDonateFooter ? `0 12px` : '0 6px')};
+	margin: ${props => (props.isDonateFooter ? '0' : '0 12px')};
 `;
 
 export default SocialBox;
diff --git a/src/components/UserWithPFPInCell.tsx b/src/components/UserWithPFPInCell.tsx
@@ -15,7 +15,7 @@ export const UserWithPFPInCell: FC<IUserWithPFPInCell> = ({ user }) => {
 	const name =
 		user?.name || shortenAddress(user.walletAddress?.toLowerCase());
 	return pfpToken ? (
-		<Flex gap='8px'>
+		<Flex gap='12px' alignItems='center'>
 			<StyledPFP pfpToken={pfpToken} />
 			<Bold>{name || '\u200C'}</Bold>
 		</Flex>
@@ -24,13 +24,14 @@ export const UserWithPFPInCell: FC<IUserWithPFPInCell> = ({ user }) => {
 	);
 };
 const StyledPFP = styled(PFP)`
-	margin-left: 8px;
+	margin-top: 5px;
+	margin-left: 5px;
 `;
 
 const Bold = styled.span`
 	font-weight: 500;
 `;
 
 const NoAvatar = styled.span`
-	padding-left: 40px;
+	padding-left: 44px;
 `;
diff --git a/src/components/modals/ShareModal.tsx b/src/components/modals/ShareModal.tsx
@@ -12,8 +12,9 @@ import {
 	neutralColors,
 	OutlineButton,
 } from '@giveth/ui-design-system';
-
 import { useIntl } from 'react-intl';
+import { FC } from 'react';
+
 import { Modal } from './Modal';
 import FacebookIcon from '../../../public/images/social-fb.svg';
 import LinkedinIcon from '../../../public/images/social-linkedin.svg';
@@ -25,16 +26,32 @@ import { IModal } from '@/types/common';
 import CopyLink from '@/components/CopyLink';
 import { fullPath } from '@/lib/helpers';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
+import {
+	EContentType,
+	ESocialType,
+	shareContentCreator,
+} from '@/lib/constants/shareContent';
 
 interface IShareModal extends IModal {
 	projectHref: string;
+	contentType: EContentType;
 }
 
-const ShareModal = ({ projectHref, setShowModal }: IShareModal) => {
+const ShareModal: FC<IShareModal> = props => {
+	const { projectHref, setShowModal, contentType } = props;
 	const url = fullPath(slugToProjectView(projectHref));
 	const { isAnimating, closeModal } = useModalAnimation(setShowModal);
 	const { formatMessage } = useIntl();
 
+	const shareTitleTwitter = shareContentCreator(
+		contentType,
+		ESocialType.twitter,
+	);
+	const shareTitleFacebookAndLinkedin = shareContentCreator(
+		contentType,
+		ESocialType.facebook,
+	);
+
 	return (
 		<Modal
 			closeModal={closeModal}
@@ -51,19 +68,15 @@ const ShareModal = ({ projectHref, setShowModal }: IShareModal) => {
 					<SocialButtonContainer>
 						<TwitterShareButton
 							hashtags={['giveth']}
-							title={`${formatMessage({
-								id: 'label.check_out_on',
-							})} @giveth`}
+							title={shareTitleTwitter}
 							url={url}
 						>
 							<Image src={TwitterIcon} alt='twitter icon' />
 						</TwitterShareButton>
 					</SocialButtonContainer>
 					<SocialButtonContainer>
 						<LinkedinShareButton
-							title={`${formatMessage({
-								id: 'label.check_out_on',
-							})} @Givethio`}
+							title={shareTitleFacebookAndLinkedin}
 							url={url}
 						>
 							<Image src={LinkedinIcon} alt='twitter icon' />
@@ -72,9 +85,7 @@ const ShareModal = ({ projectHref, setShowModal }: IShareModal) => {
 					<SocialButtonContainer>
 						<FacebookShareButton
 							hashtag='#giveth'
-							quote={`${formatMessage({
-								id: 'label.check_out_on',
-							})} @Givethio`}
+							quote={shareTitleFacebookAndLinkedin}
 							url={url}
 						>
 							<Image src={FacebookIcon} alt='facebook icon' />

diff --git a/src/components/project-card/ProjectCardLikeAndShareButtons.tsx b/src/components/project-card/ProjectCardLikeAndShareButtons.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/features/user/user.slice';
 import { slugToProjectView } from '@/lib/routeCreators';
 import { EModalEvents, useModalCallback } from '@/hooks/useModalCallback';
+import { EContentType } from '@/lib/constants/shareContent';
 
 interface IProjectCardLikeAndShareButtons {
 	project: IProject;
@@ -123,7 +124,11 @@ const ProjectCardLikeAndShareButtons = (
 	return (
 		<>
 			{showModal && (
-				<ShareModal setShowModal={setShowModal} projectHref={slug} />
+				<ShareModal
+					contentType={EContentType.thisProject}
+					setShowModal={setShowModal}
+					projectHref={slug}
+				/>
 			)}
 			<BadgeWrapper>
 				<Flex gap='6px'>

diff --git a/src/components/project-card/ProjectCardUserName.tsx b/src/components/project-card/ProjectCardUserName.tsx
@@ -36,7 +36,7 @@ export const ProjectCardUserName: FC<IProjectCardUserName> = ({
 					)}
 				>
 					{pfpToken ? (
-						<Flex gap='8px'>
+						<Flex gap='8px' alignItems='center'>
 							<PFP pfpToken={pfpToken} />
 							<Author bold size='Big'>
 								{name || '\u200C'}
@@ -62,7 +62,7 @@ interface IAuthor {
 
 const Author = styled(GLink)<IAuthor>`
 	color: ${neutralColors.gray[700]};
-	margin-bottom: 16px;
+	margin-bottom: 9px;
 	display: block;
 	font-weight: ${props => (props.bold ? 500 : 400)};
 `;
diff --git a/src/components/views/create/SuccessfulCreation.tsx b/src/components/views/create/SuccessfulCreation.tsx
@@ -1,21 +1,29 @@
 import React, { Dispatch, SetStateAction, useEffect } from 'react';
-import { brandColors, Button, H2, Lead, P } from '@giveth/ui-design-system';
+import {
+	brandColors,
+	Button,
+	Col,
+	Container,
+	H2,
+	Lead,
+	P,
+	Row,
+} from '@giveth/ui-design-system';
 import Link from 'next/link';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-
-import { Col, Row, Container } from '@giveth/ui-design-system';
 import ProjectCard from '@/components/project-card/ProjectCardAlt';
 import { IProject } from '@/apollo/types/types';
 import { slugToProjectView } from '@/lib/routeCreators';
-import SocialBox from '@/components/views/donate/SocialBox';
+import SocialBox from '@/components/SocialBox';
 import CopyLink from '@/components/CopyLink';
 import { mediaQueries } from '@/lib/constants/constants';
 import { fullPath } from '@/lib/helpers';
 import { setShowFooter } from '@/features/general/general.slice';
 import { useAppDispatch } from '@/features/hooks';
 import CongratsAnimation from '@/animations/congrats.json';
 import LottieControl from '@/components/LottieControl';
+import { EContentType } from '@/lib/constants/shareContent';
 
 const SuccessfulCreation = (props: {
 	project: IProject;
@@ -63,7 +71,10 @@ const SuccessfulCreation = (props: {
 						<br />
 						<br />
 						<br />
-						<SocialBox project={project} isSuccess />
+						<SocialBox
+							project={project}
+							contentType={EContentType.ourProject}
+						/>
 						<br />
 						<P>
 							{formatMessage({