Merge pull request #4700 from Giveth/4698_ui_fix_stellar

Fix some UI stuff for stellar feature
Giveth · Sep 9, 2024 · 6832fc9 · 6832fc9
2 parents 169fb18 + 519b32c
commit 6832fc9
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 52 deletions.
diff --git a/lang/ca.json b/lang/ca.json
@@ -604,6 +604,7 @@
 	"label.look_for_the_share_and_get_rewarded": "Busca el botó 'Comparteix i guanya recompenses' per generar enllaços a pàgines específiques a tot el lloc de Giveth.",
 	"label.make_a_recurring_donation_with": "Fes una donació recurrent amb ",
 	"label.make_it_anonymous": "Fes-ho anònim",
+	"label.transaction_detail": "Detall de la transacció",
 	"label.qr_code_error": "S'ha produït un error en generar el codi QR. Torneu-ho a provar.",
 	"label.make_it_easier_for_donors_to_find_your_project": "Fes més fàcil que els donants trobin el teu projecte proporcionant una ubicació.",
 	"label.make_it_unique_and_memorable_to_stand_out_from_other_projects": "Fes-ho únic i memorable per destacar entre altres projectes.",

diff --git a/lang/en.json b/lang/en.json
@@ -1233,6 +1233,7 @@
 	"label.valid_for": "Valid for",
 	"label.new_qr_code_needed": "If you didn’t make it in time, you need to generate a new QR code.",
 	"label.please_wait_for_you_donation_to_come_through": "Do not close this page until your donation is successful.",
+	"label.transaction_detail": "Transaction detail",
 	"label.please_wait": "Please wait",
 	"label.the_time_is_up": "The time is up.",
 	"label.the_community_of_makers": "The community of makers",

diff --git a/lang/es.json b/lang/es.json
@@ -1244,6 +1244,7 @@
 	"label.the_donation_was_successful": "La donación fue exitosa. Guarda esta URL si deseas mantener un registro de tu donación.",
 	"label.view_details": "Ver detalles",
 	"label.transaction_link": "Enlace de la transacción",
+	"label.transaction_detail": "Detalles de la transacción",
 	"label.your_transactions_have_been_submitted": "Tus transacciones han sido enviadas",
 	"label.your_withdrawal_from_this_stream_balance_is_being_processed": "Tu retiro de este saldo de transmisión se está procesando.",
 	"label.your_withdrawal_from_this_stream_balance_was_successful": "Tu retiro de este saldo de transmisión ha sido exitoso.",

diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
@@ -266,6 +266,21 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 					})}
 				/>
 			)}
+			{!isSignedIn && stellarToken?.isGivbackEligible && (
+				<InlineToast
+					noIcon
+					type={EToastType.Hint}
+					message={formatMessage({
+						id: 'label.sign_in_with_your_eth_wallet_for_givebacks',
+					})}
+					link={links.GIVBACK_DOC}
+					linkText={capitalizeAllWords(
+						formatMessage({
+							id: 'label.learn_more',
+						}),
+					)}
+				/>
+			)}
 			{!showQRCode ? (
 				<>
 					<StyledInputWrapper>
@@ -329,26 +344,12 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 									alt='Next'
 									width={16}
 									height={16}
+									style={{ marginLeft: '8px' }} // Add margin to the right of the icon
 								/>
 							}
 							onClick={handleNext}
 							disabled={amount === 0n}
 						/>
-						{!isSignedIn && stellarToken?.isGivbackEligible && (
-							<InlineToast
-								noIcon
-								type={EToastType.Hint}
-								message={formatMessage({
-									id: 'label.sign_in_with_your_eth_wallet_for_givebacks',
-								})}
-								link={links.GIVBACK_DOC}
-								linkText={capitalizeAllWords(
-									formatMessage({
-										id: 'label.learn_more',
-									}),
-								)}
-							/>
-						)}
 					</CardBottom>
 				</>
 			) : (

diff --git a/src/components/views/transaction/DonationStatusSection.tsx b/src/components/views/transaction/DonationStatusSection.tsx
@@ -27,8 +27,10 @@ import { useQRCodeDonation } from '@/hooks/useQRCodeDonation';
 import { client } from '@/apollo/apolloClient';
 import { MARK_DRAFT_DONATION_AS_FAILED } from '@/apollo/gql/gqlDonations';
 import { useDonateData } from '@/context/donate.context';
+import { slugToProjectView } from '@/lib/routeCreators';
 
 type IColor = 'golden' | 'jade' | 'punch' | 'blueSky';
+
 interface TimerProps {
 	status: TQRStatus;
 	endDate: Date;
@@ -170,18 +172,19 @@ const Timer: React.FC<TimerProps> = ({
 
 	return (time.minutes === 0 && time.seconds === 0) || status === 'failed' ? (
 		<FlexWrap $alignItems='center' gap='8px'>
-			<P>{'15 Minutes'}</P>
+			<B>{'15 Minutes'}</B>
 			<TextBox>{'Expired at ' + formatTime(_endDate, locale)}</TextBox>
 		</FlexWrap>
 	) : (
-		<P>
+		<TextBox>
 			{time.minutes.toString().padStart(2, '0')} {' Minutes '}
 			{time.seconds.toString().padStart(2, '0')} {' Seconds '}
-		</P>
+		</TextBox>
 	);
 };
 
-const transactionLink = 'https://stellar.expert/explorer/public/tx/';
+const STELLAR_TRANSACTION_LINK = 'https://stellar.expert/explorer/public/tx/';
+const STELLAR_ADDRESS_LINK = 'https://stellar.expert/explorer/public/account/';
 
 const formatComponent = (date: string | undefined, locale: string) => {
 	const timePassed = getHowManyPassed(new Date(date ?? ''), locale);
@@ -190,14 +193,14 @@ const formatComponent = (date: string | undefined, locale: string) => {
 		<FlexWrap $alignItems='center' gap='8px'>
 			{date ? (
 				<>
-					<P style={{ minWidth: 'fit-content' }}>
+					<B style={{ minWidth: 'fit-content' }}>
 						{timePassed.value} {timePassed.unit} ago
-					</P>
+					</B>
 					<TextBox>{smallDashedFormatDate(new Date(date))}</TextBox>
 					<TextBox>{formatTime(new Date(date), locale)}</TextBox>
 				</>
 			) : (
-				'NA'
+				<B>NA</B>
 			)}
 		</FlexWrap>
 	);
@@ -237,14 +240,14 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
 					<FlexWrap $alignItems='center' gap='8px'>
 						<B>{draftDonationData?.amount}</B>
 						<UsdAmountCard>$ {usdAmount}</UsdAmountCard>
-						<TokenIcon
-							symbol={
-								config.NETWORKS_CONFIG[ChainType.STELLAR]
-									.nativeCurrency.symbol
-							}
-							size={32}
-						/>
 						<TokenSymbol>
+							<TokenIcon
+								symbol={
+									config.NETWORKS_CONFIG[ChainType.STELLAR]
+										.nativeCurrency.symbol
+								}
+								size={32}
+							/>
 							{
 								config.NETWORKS_CONFIG[ChainType.STELLAR]
 									.nativeCurrency.symbol
@@ -253,30 +256,46 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
 						</TokenSymbol>
 					</FlexWrap>
 				</FlexWrap>
-				<FlexWrap $alignItems='center'>
+				<FlexAddress $alignItems='center'>
 					<Label>{formatMessage({ id: 'label.from' })}</Label>
 					{donationData?.fromWalletAddress ? (
-						<Link>{donationData.fromWalletAddress}</Link>
+						<ExternalLink
+							href={`${STELLAR_ADDRESS_LINK}${donationData.fromWalletAddress}`}
+						>
+							<Link>{donationData.fromWalletAddress}</Link>
+						</ExternalLink>
 					) : (
 						<B>{'NA'}</B>
 					)}
-				</FlexWrap>
+				</FlexAddress>
 				<FlexWrap $alignItems='center'>
 					<Label>{formatMessage({ id: 'label.donating_to' })}</Label>
 					{draftDonationData?.project?.title ? (
-						<Link>{draftDonationData.project.title}</Link>
+						<ExternalLink
+							href={slugToProjectView(
+								draftDonationData.project.slug,
+							)}
+						>
+							<Link>{draftDonationData.project.title}</Link>
+						</ExternalLink>
 					) : (
 						<B>{'NA'}</B>
 					)}
 				</FlexWrap>
-				<FlexWrap $alignItems='center'>
+				<FlexAddress $alignItems='center' style={{ width: '100%' }}>
 					<Label $capitalize>
 						{formatMessage({ id: 'label.recipient_address' })}
 					</Label>
-					<B style={{ wordBreak: 'break-word' }}>
-						{draftDonationData?.toWalletAddress ?? 'NA'}
-					</B>
-				</FlexWrap>
+					{draftDonationData?.toWalletAddress ? (
+						<ExternalLink
+							href={`${STELLAR_ADDRESS_LINK}${draftDonationData?.toWalletAddress}`}
+						>
+							<Link>{draftDonationData?.toWalletAddress}</Link>
+						</ExternalLink>
+					) : (
+						<B>{'NA'}</B>
+					)}
+				</FlexAddress>
 				<FlexWrap $alignItems='center'>
 					<Label>{formatMessage({ id: 'label.memo' })}</Label>
 					<B>{draftDonationData?.toWalletMemo ?? 'NA'}</B>
@@ -297,12 +316,14 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
 						donationData?.transactionId ? (
 							<Flex $alignItems='center' gap='8px'>
 								<ExternalLink
-									href={`${transactionLink}${donationData.transactionId}`}
-									title={formatMessage({
-										id: 'label.view_details',
-									})}
-									color={brandColors.pinky[500]}
-								/>
+									href={`${STELLAR_TRANSACTION_LINK}${donationData.transactionId}`}
+								>
+									<Link color={brandColors.pinky[500]}>
+										{formatMessage({
+											id: 'label.transaction_detail',
+										})}
+									</Link>
+								</ExternalLink>
 								<IconExternalLink
 									color={brandColors.pinky[500]}
 								/>
@@ -421,7 +442,10 @@ const ColorfulDot = styled.div<{ status: string }>`
 		semanticColors[StatusMap[status].color][700]};
 `;
 
-const TokenSymbol = styled(B)`
+const TokenSymbol = styled(Flex)`
+	align-items: center;
+	gap: 8px;
+	font-weight: 500;
 	white-space: nowrap;
 `;
 
@@ -440,7 +464,11 @@ const Label = styled(B)<{ $capitalize?: boolean }>`
 	width: 50%;
 	text-transform: ${({ $capitalize }) =>
 		$capitalize ? 'capitalize' : 'none'};
-	color: ${neutralColors.gray[700]};
+	color: ${neutralColors.gray[700]} !important;
+
+	${mediaQueries.tablet} {
+		width: 30%;
+	}
 
 	${mediaQueries.laptopS} {
 		width: 19%;
@@ -453,12 +481,6 @@ const Hr = styled.div`
 	background-color: ${neutralColors.gray[300]};
 `;
 
-const Link = styled(B)`
-	color: ${semanticColors.blueSky[500]};
-	cursor: pointer;
-	word-break: break-word;
-`;
-
 const TextBox = styled(P)`
 	padding: 2px 8px;
 	border: 1px solid ${neutralColors.gray[300]};
@@ -477,6 +499,31 @@ const FlexWrap = styled(Flex)`
 	gap: 10px;
 `;
 
+const FlexAddress = styled(Flex)`
+	flex-wrap: wrap;
+	gap: 10px;
+
+	${mediaQueries.tablet} {
+		flex-wrap: nowrap;
+	}
+
+	> :last-child {
+		width: 100% !important;
+	}
+
+	${mediaQueries.laptopL} {
+		> :last-child {
+			width: 81% !important;
+		}
+	}
+
+	${mediaQueries.tablet} {
+		> :last-child {
+			width: 50% !important;
+		}
+	}
+`;
+
 const FlexDirection = styled(Flex)`
 	flex-direction: column;
 	gap: 16px;
@@ -486,4 +533,10 @@ const FlexDirection = styled(Flex)`
 	}
 `;
 
+const Link = styled(B)<{ color?: string }>`
+	color: ${({ color }) => color || semanticColors.blueSky[500]} !important;
+	word-break: break-all;
+	font-weight: 500 !important;
+`;
+
 export default DonationStatusSection;