From 186b93f6f3b56cf954bfc3a238b8598f3e5d616b Mon Sep 17 00:00:00 2001
From: Ramin <raminramazanpour@gmail.com>
Date: Mon, 23 Sep 2024 13:57:49 +0330
Subject: [PATCH] fix connected wallet bug

---
 .../donate/OneTime/EstimatedMatchingToast.tsx |  7 +++++--
 .../donate/OneTime/OneTimeDonationCard.tsx    |  1 +
 .../QRCodeDonation/QRDonationCard.tsx         |  1 +
 .../views/donate/QFEligibleNetworks.tsx       | 20 ++++++++++++++-----
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/views/donate/OneTime/EstimatedMatchingToast.tsx b/src/components/views/donate/OneTime/EstimatedMatchingToast.tsx
index 77ecccccef..3014859c5b 100644
--- a/src/components/views/donate/OneTime/EstimatedMatchingToast.tsx
+++ b/src/components/views/donate/OneTime/EstimatedMatchingToast.tsx
@@ -27,6 +27,7 @@ interface IEstimatedMatchingToast {
 	token?: IProjectAcceptedToken;
 	tokenPrice?: number;
 	isStellar?: boolean;
+	show?: boolean;
 }
 
 const EstimatedMatchingToast: FC<IEstimatedMatchingToast> = ({
@@ -35,6 +36,7 @@ const EstimatedMatchingToast: FC<IEstimatedMatchingToast> = ({
 	amount,
 	tokenPrice,
 	isStellar,
+	show,
 }) => {
 	const { formatMessage, locale } = useIntl();
 	const { estimatedMatching, qfRounds } = projectData || {};
@@ -71,7 +73,7 @@ const EstimatedMatchingToast: FC<IEstimatedMatchingToast> = ({
 	)} ${allocatedFundUSDPreferred ? '' : ` ${allocatedTokenSymbol}`}`;
 
 	return (
-		<Wrapper>
+		<Wrapper show={show}>
 			<FlexCenter gap='5px'>
 				<Caption $medium>
 					{formatMessage({ id: 'label.estimated_matching' })}
@@ -93,7 +95,7 @@ const EstimatedMatchingToast: FC<IEstimatedMatchingToast> = ({
 	);
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ show?: boolean }>`
 	display: flex;
 	padding: 4px 16px 8px 16px;
 	justify-content: space-between;
@@ -102,6 +104,7 @@ const Wrapper = styled.div`
 	background: ${neutralColors.gray[200]};
 	color: ${semanticColors.jade[700]};
 	margin-bottom: -5px;
+	opacity: ${({ show }) => (show ? 1 : 0)};
 `;
 
 export default EstimatedMatchingToast;
diff --git a/src/components/views/donate/OneTime/OneTimeDonationCard.tsx b/src/components/views/donate/OneTime/OneTimeDonationCard.tsx
index 6a3fcb099a..0a4c4edbd8 100644
--- a/src/components/views/donate/OneTime/OneTimeDonationCard.tsx
+++ b/src/components/views/donate/OneTime/OneTimeDonationCard.tsx
@@ -434,6 +434,7 @@ const CryptoDonation: FC<{
 				token={selectedOneTimeToken}
 				amount={amount}
 				tokenPrice={tokenPrice}
+				show={showEstimatedMatching}
 			/>
 			<ForEstimatedMatchingAnimation
 				showEstimatedMatching={showEstimatedMatching}
diff --git a/src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
index 0b3e791ce2..6f690ac2c2 100644
--- a/src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
+++ b/src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
@@ -346,6 +346,7 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
 					token={stellarToken}
 					amount={amount}
 					tokenPrice={tokenPrice}
+					show={showEstimatedMatching}
 					isStellar
 				/>
 				{!showQRCode ? (
diff --git a/src/components/views/donate/QFEligibleNetworks.tsx b/src/components/views/donate/QFEligibleNetworks.tsx
index 29b09355dd..c0c1f31d53 100644
--- a/src/components/views/donate/QFEligibleNetworks.tsx
+++ b/src/components/views/donate/QFEligibleNetworks.tsx
@@ -18,9 +18,11 @@ import { useDonateData } from '@/context/donate.context';
 import { ChainType } from '@/types/config';
 import config from '@/configuration';
 import { IconWithTooltip } from '@/components/IconWithToolTip';
+import { useGeneralWallet } from '@/providers/generalWalletProvider';
 
 const QFEligibleNetworks = () => {
 	const [showModal, setShowModal] = useState(false);
+	const { isConnected } = useGeneralWallet();
 	const { formatMessage } = useIntl();
 	const { activeStartedRound } = useDonateData();
 	const router = useRouter();
@@ -42,9 +44,13 @@ const QFEligibleNetworks = () => {
 			<IconsWrapper>
 				{eligibleNetworksWithChainType?.map(network => (
 					<IconWithTooltip
-						icon={config.NETWORKS_CONFIG[
-							network.networkId
-						]?.chainLogo(24)}
+						icon={
+							<TooltipIconWrapper>
+								{config.NETWORKS_CONFIG[
+									network.networkId
+								]?.chainLogo(24)}
+							</TooltipIconWrapper>
+						}
 						direction='top'
 						align='top'
 						key={network.networkId}
@@ -55,7 +61,7 @@ const QFEligibleNetworks = () => {
 					</IconWithTooltip>
 				))}
 			</IconsWrapper>
-			{!isQRDonation && (
+			{!isQRDonation && isConnected && (
 				<ButtonsWrapper>
 					<OutlineButton
 						onClick={() => setShowModal(true)}
@@ -82,8 +88,12 @@ const QFEligibleNetworks = () => {
 	);
 };
 
+const TooltipIconWrapper = styled.div`
+	margin-top: 4px;
+`;
+
 const IconsWrapper = styled.div`
-	margin-top: 16px;
+	margin-top: 14px;
 	display: flex;
 	gap: 4px;
 	img {