Skip to content

Commit 98cf2ba

Browse files
fabianfernofabianferno
committed
Merge branch 'main' of https://github.com/show-karma/grants-stack into feat/gap-display-impact-section
2 parents 23960dc + 9288c5c commit 98cf2ba

File tree

12 files changed

+233
-113
lines changed

12 files changed

+233
-113
lines changed

‎packages/grant-explorer/src/features/attestations/MintYourImpactComponents.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -160,22 +160,28 @@ export const ImpactMintingSuccess = ({
160160
} = useGetImages(impactImageCid ? [impactImageCid] : [], !!impactImageCid);
161161

162162
return isShareButtonsAbove ? (
163-
<>
164-
<ShareButtons attestationLink={attestationLink} />
163+
<div className="flex flex-col items-center gap-6">
164+
<ShareButtons
165+
attestationLink={attestationLink}
166+
isTop={isShareButtonsAbove}
167+
/>
165168
<ImageWithLoading
166169
src={image?.[0]}
167170
isLoading={isLoading || !image || !impactImageCid || isFetching}
168171
sizeClass={imageSize}
169172
/>
170-
</>
173+
</div>
171174
) : (
172-
<>
175+
<div className="flex flex-col items-center gap-6">
173176
<ImageWithLoading
174177
src={image?.[0]}
175178
isLoading={isLoading || !image || !impactImageCid || isFetching}
176179
sizeClass={imageSize}
177180
/>
178-
<ShareButtons attestationLink={attestationLink} />
179-
</>
181+
<ShareButtons
182+
attestationLink={attestationLink}
183+
isTop={isShareButtonsAbove}
184+
/>
185+
</div>
180186
);
181187
};

‎packages/grant-explorer/src/features/attestations/components/ActionButton.tsx

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { Button } from "common/src/styles";
22
import processingIcon from "../../../assets/processing.svg";
33
import { ProgressStatus } from "../../../hooks/attestations/config";
44
import { ConnectButton } from "@rainbow-me/rainbowkit";
5+
import GenericModal from "../../common/GenericModal";
6+
import SquidWidget, { SwapParams } from "../../round/ViewCartPage/SquidWidget";
7+
import { useState } from "react";
8+
import { NATIVE } from "common";
59

610
// Extracted ActionButton component
711
export const ActionButton = ({
@@ -19,6 +23,17 @@ export const ActionButton = ({
1923
notEnoughFunds: boolean;
2024
isLoading: boolean;
2125
}) => {
26+
const [openSwapModel, setOpenSwapModal] = useState<boolean>(false);
27+
const swapParams = {
28+
fromChainId: "1",
29+
toChainId: "42161",
30+
fromTokenAddress: NATIVE,
31+
toTokenAddress: NATIVE,
32+
} as SwapParams;
33+
34+
const swapModalHandler = async (flag: boolean) => {
35+
setOpenSwapModal(flag);
36+
};
2237
if (!isConnected) {
2338
return (
2439
<Button className="bg-[#DE3714] text-white font-mono text-md w-full px-4 py-2 rounded-lg hover:shadow-md">
@@ -41,9 +56,21 @@ export const ActionButton = ({
4156
Insufficient funds to complete the minting process. Please bridge or
4257
add funds to your wallet to proceed.
4358
</span>
44-
<Button className="bg-[#DE3714] text-white font-mono text-md w-full px-4 pb-2 rounded-lg hover:shadow-md">
59+
<Button
60+
onClick={() => {
61+
swapModalHandler(true);
62+
}}
63+
className="bg-[#DE3714] text-white font-mono text-md w-full px-4 pb-2 rounded-lg hover:shadow-md"
64+
>
4565
Bridge Funds
4666
</Button>
67+
<GenericModal
68+
isIframe={true}
69+
body={<SquidWidget {...swapParams} />}
70+
isOpen={openSwapModel}
71+
setIsOpen={swapModalHandler}
72+
className="z-40"
73+
/>
4774
</div>
4875
);
4976
} else if (

‎packages/grant-explorer/src/features/common/GenericModal.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface InfoModalProps {
1111
| ((flag: boolean) => void);
1212
children?: ReactNode;
1313
isIframe?: boolean;
14+
className?: string;
1415
}
1516

1617
export default function InfoModal({
@@ -30,7 +31,7 @@ export default function InfoModal({
3031
<Transition.Root show={isOpen} as={Fragment}>
3132
<Dialog
3233
as="div"
33-
className="relative z-10"
34+
className={`relative ${props.className ?? "z-10"}`}
3435
initialFocus={cancelButtonRef}
3536
onClose={setIsOpen}
3637
data-testid="generic-modal"

‎packages/grant-explorer/src/features/common/ShareButtons.tsx

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import { useState } from "react";
1111

1212
export const ShareButtons = ({
1313
attestationLink,
14+
isTop,
1415
}: {
16+
isTop?: boolean;
1517
attestationLink: string;
1618
}): JSX.Element => {
1719
const twitterShareUrl = createTwitterAttestationShareUrl(attestationLink);
@@ -30,37 +32,47 @@ export const ShareButtons = ({
3032

3133
return (
3234
<div className="flex flex-col items-center z-30">
33-
<span className="font-mona pb-1 text-md">Share</span>
35+
<span className="font-modern-era-medium pb-2 text-[24px]/[28px]">
36+
Share with your network!
37+
</span>
3438
<div className="flex items-center gap-2 pb-1">
35-
<div className="flex size-8 items-center justify-center gap-2 p-2 relative rounded-3xl border border-solid border-color-primitives-neutral-100 cursor-pointer hover:shadow-md">
36-
<img
37-
className="relative size-8"
38-
alt="Frame"
39-
src={Link}
40-
onClick={handleCopy} // Update onClick to use handleCopy
41-
/>
39+
<div className="rainbow-border-icon">
40+
<div className="icon-button ">
41+
<img
42+
className="icon"
43+
alt="Frame"
44+
src={shareOnFarcaster}
45+
onClick={() => window.open(farcasterShareUrl, "_blank")}
46+
/>
47+
</div>
48+
</div>
49+
<div className="rainbow-border-icon">
50+
<div className="icon-button ">
51+
<img
52+
className="icon"
53+
alt="Frame"
54+
src={XTwitter}
55+
onClick={() => window.open(twitterShareUrl, "_blank")}
56+
/>
57+
</div>
58+
</div>
59+
<div className="rainbow-border-icon">
60+
<div className="icon-button ">
61+
<img
62+
className="icon"
63+
alt="Frame"
64+
src={Link}
65+
onClick={handleCopy} // Update onClick to use handleCopy
66+
/>
67+
</div>
4268
{tooltipVisible && ( // Render tooltip conditionally
43-
<span className="absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs rounded px-2 py-1">
69+
<span
70+
className={`${isTop ? "copytooltip-top" : "copytooltip-bottom"}`}
71+
>
4472
Copied!
4573
</span>
4674
)}
4775
</div>
48-
<div className="flex size-8 items-center gap-2 p-2 relative rounded-3xl border border-solid border-color-primitives-neutral-100 cursor-pointer hover:shadow-md">
49-
<img
50-
className="relative size-8"
51-
alt="Frame"
52-
src={XTwitter}
53-
onClick={() => window.open(twitterShareUrl, "_blank")}
54-
/>
55-
</div>
56-
<div className="flex size-8 items-center gap-2 p-2 relative rounded-3xl border border-solid border-color-primitives-neutral-100 cursor-pointer hover:shadow-md">
57-
<img
58-
className="relative size-8"
59-
alt="Frame"
60-
src={shareOnFarcaster}
61-
onClick={() => window.open(farcasterShareUrl, "_blank")}
62-
/>
63-
</div>
6476
</div>
6577
</div>
6678
);
@@ -82,7 +94,7 @@ export function createTwitterShareUrl(props: TwitterButtonParams) {
8294
}
8395

8496
export function createTwitterAttestationShareText(attestationLink: string) {
85-
return `Certified public goods supporter 🫡\n\nMy contribution is now onchain—check out the visual that represents my impact.\n\nHat tip to @gitcoin 💚\n\n${attestationLink}`;
97+
return `Just minted my donation on @gitcoin 🫡\n\nMy impact is now onchain!\n\n${attestationLink}`;
8698
}
8799

88100
export function createTwitterAttestationShareUrl(attestationLink: string) {
@@ -93,10 +105,9 @@ export function createTwitterAttestationShareUrl(attestationLink: string) {
93105
}
94106

95107
export function getFarcasterAttestationShareText() {
96-
const encodedText1 = encodeURIComponent(
97-
`Certified public goods supporter 🫡\n\nMy contribution is now onchain—check out the visual that represents my impact.\n\nHat tip to `
98-
);
99-
const encodedText2 = encodeURIComponent(` 💚\n`);
108+
const encodedText1 = encodeURIComponent(`Just minted my donation on `);
109+
const encodedText2 = encodeURIComponent(` 🫡\n\nMy impact is now onchain!`);
110+
100111
// NB: mentions should not be encoded
101112
return `${encodedText1}@gitcoin${encodedText2}`;
102113
}

‎packages/grant-explorer/src/features/common/components/ImageWithLoading.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const ImageWithLoading = ({
1717
return (
1818
<div
1919
{...props}
20-
className={`bg-cover bg-center bg-gray-200 dark:bg-gray-800 ${sizeClass} ${blurClass} ${loadingClass}`}
20+
className={`bg-cover bg-center bg-transparent ${sizeClass} ${blurClass} ${loadingClass}`}
2121
style={{ backgroundImage: `url("${src || ""}")` }} // Use src if available, otherwise keep it empty
2222
/>
2323
);

‎packages/grant-explorer/src/features/contributors/components/RoundDonations/TransactionHeader.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { getTxBlockExplorerLink } from "common";
55
import { truncateAddress } from "../../utils/address";
66
import { MintingActionButton } from "../Buttons";
77
import { Contribution, MintingAttestationIdsData } from "data-layer";
8-
import { useDebugMode } from "../../../api/utils";
98

109
interface AttestationData {
1110
attestation?: MintingAttestationIdsData;
@@ -31,7 +30,6 @@ export function TransactionHeader({
3130
transactionHash
3231
);
3332
const parcialTransactionHash = truncateAddress(transactionHash, 5);
34-
const debugModeEnabled = useDebugMode();
3533

3634
return (
3735
<div className="bg-grey-75 rounded-lg gap-2 p-4 flex flex-col sm:flex-row items-center justify-between">
@@ -45,13 +43,11 @@ export function TransactionHeader({
4543
<ArrowTopRightOnSquareIcon className="size-4 text-black" />
4644
</a>
4745
</span>
48-
{debugModeEnabled &&
4946
<MintingActionButton
5047
transaction={{ hash: transactionHash, chainId: transactionChainId }}
5148
contributions={contributions}
5249
attestationData={{ attestation, isFetchingAttestations, refetch }}
5350
/>
54-
}
5551
</div>
5652
);
5753
}

‎packages/grant-explorer/src/features/discovery/LandingPage.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,18 @@ const LandingPage = () => {
4040
);
4141
}, [roundsEndingSoon.data]);
4242

43-
const collections = useCollections();
43+
// const collections = useCollections();
4444

4545
return (
4646
<GradientLayout showWalletInteraction showAlloVersionBanner={false}>
4747
<LandingHero />
4848

4949
{/* Note: This is being revisited for GG Rounds */}
50-
<LandingSection title="Community collections">
50+
{/* <LandingSection title="Community collections">
5151
{collections.data !== undefined && (
5252
<CollectionsGrid data={collections.data} />
5353
)}
54-
</LandingSection>
54+
</LandingSection> */}
5555

5656
<LandingSection
5757
title="Donate now"

‎packages/grant-explorer/src/features/round/ThankYou.tsx

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import { useEstimateGas } from "../../hooks/attestations/useEstimateGas";
2121
import { AttestationChainId } from "../attestations/utils/constants";
2222
import { useAttestationFee } from "../contributors/hooks/useMintingAttestations";
2323
import { useAttestationStore } from "../../attestationStore";
24-
import { useDebugMode } from "../api/utils";
2524
import { RainbowBorderButton } from "../contributors/components/Buttons/RainbowBorderButton";
2625
import Modal from "../common/components/Modal";
2726

@@ -170,7 +169,6 @@ export default function ThankYou() {
170169
? false
171170
: balance.value < attestationFee + (gasEstimation ?? 0n);
172171

173-
const debugModeEnabled = useDebugMode();
174172

175173
return (
176174
<>
@@ -193,35 +191,36 @@ export default function ThankYou() {
193191
</div>
194192

195193
{/* Right Section */}
196-
{debugModeEnabled && (
197-
<div className="w-full lg:w-1/2 ">
198-
<div className="flex flex-col items-center justify-center">
199-
{/* Main content */}
200-
<div className="w-full max-w-[800px] min-h-svh overflow-hidden bg-gradient-to-b from-[#EBEBEB] to-transparent rounded-t-[400px] flex flex-col items-center justify-center pt-20 px-4 mx-auto">
201-
<div className="flex flex-col items-center">
202-
<div className="relative max-w-[500px] z-10 text-center">
203-
<h1 className="text-5xl mb-2 font-modern-era-bold">
204-
Mint your Impact
205-
</h1>
206-
<p className="mt-1 text-lg font-modern-era-regular">
207-
Capture your contribution onchain with an
208-
attestation and receive a unique visual that
209-
symbolizes your donation.
210-
</p>
211-
<p className="my-2 text-lg font-modern-era-regular">
212-
This visual reflects your onchain attestation,
213-
marking your support in a meaningful way.
214-
</p>
215-
</div>
216-
<PreviewFrame
217-
handleSelectBackground={handleSelectBackground}
218-
mint={toggleModal}
219-
/>
194+
<div className="w-full lg:w-1/2 ">
195+
<div className="flex flex-col items-center justify-center">
196+
{/* Main content */}
197+
<div className="w-full max-w-[800px] min-h-svh overflow-hidden bg-gradient-to-b from-[#EBEBEB] to-transparent rounded-t-[400px] flex flex-col items-center justify-center pt-20 px-4 mx-auto">
198+
<div className="flex flex-col items-center">
199+
<div className="relative max-w-[500px] z-10 text-center">
200+
<h1 className="text-5xl mb-2 font-modern-era-bold">
201+
Mint your Impact
202+
</h1>
203+
<p className="mt-1 text-lg font-modern-era-regular">
204+
Capture your contribution onchain with an
205+
attestation and receive a unique visual that
206+
symbolizes your donation.
207+
</p>
208+
<p className="my-2 text-lg font-modern-era-regular">
209+
This visual reflects your onchain attestation,
210+
marking your support in a meaningful way.
211+
</p>
220212
</div>
213+
<PreviewFrame
214+
handleSelectBackground={handleSelectBackground}
215+
mint={toggleModal}
216+
/>
221217
</div>
222218
</div>
223219
</div>
224-
)}
220+
<div className="fixed -bottom-6 right-11 w-full z-20">
221+
<Footer />
222+
</div>
223+
</div>
225224
</div>
226225
) : minted ? (
227226
<div className="rounded-xl absolute top-20 flex flex-col items-center text-center gap-6 px-[64px] py-8 backdrop-blur-xl">
@@ -240,13 +239,21 @@ export default function ThankYou() {
240239
imageSize="size-[520px]"
241240
attestationLink={attestationLink ?? ""}
242241
/>
243-
<div className="my-2 z-50">
242+
<div className="flex flex-wrap gap-6 my-2 z-50">
244243
<RainbowBorderButton
245244
dataTestId="view-transaction-button"
246245
onClick={onViewTransaction}
247246
>
248247
View attestation
249248
</RainbowBorderButton>
249+
<button
250+
className="blue-background-button font-medium font-mono"
251+
onClick={() => {
252+
window.open("https://explorer.gitcoin.co/", "_blank");
253+
}}
254+
>
255+
Return to Explorer
256+
</button>
250257
</div>
251258
</div>
252259
) : (
@@ -255,12 +262,12 @@ export default function ThankYou() {
255262
roundName={round?.roundMetadata?.name ?? ""}
256263
isMrc={isMrc}
257264
/>
265+
<div className="fixed -bottom-6 right-11 w-full z-20">
266+
<Footer />
267+
</div>
258268
</div>
259269
)}
260270
</main>
261-
<div className="fixed -bottom-6 right-11 w-full z-20">
262-
<Footer />
263-
</div>
264271

265272
{/* Progress Modal */}
266273
{transactions.length > 0 && (

0 commit comments

Comments
 (0)