diff --git a/packages/grant-explorer/src/features/attestations/MintAttestationProgressModal.tsx b/packages/grant-explorer/src/features/attestations/MintAttestationProgressModal.tsx deleted file mode 100755 index 87db79dab..000000000 --- a/packages/grant-explorer/src/features/attestations/MintAttestationProgressModal.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { Fragment, ReactNode } from "react"; -import { Dialog, Transition } from "@headlessui/react"; -import { XMarkIcon } from "@heroicons/react/24/outline"; - -interface MintAttestationProgressModalProps { - isOpen: boolean; - onClose: () => void; - heading?: string; - subheading?: string; - body?: JSX.Element; - redirectUrl?: string; - children?: ReactNode; -} - -export default function MintAttestationProgressModal({ - isOpen, - onClose, - heading = "Processing...", - subheading = "Please hold while we submit your donation.", - children, - ...props -}: MintAttestationProgressModalProps) { - return ( - - - -
- - -
- - -
- - {heading} - - -
-
-

{subheading}

-
-
{props.body}
- {children} - - -
- {/* Adding invisible button as modal needs to be displayed with a button */} -
- - ); -} diff --git a/packages/grant-explorer/src/features/attestations/MintProgressModalBody.tsx b/packages/grant-explorer/src/features/attestations/MintProgressModalBody.tsx index 83731f065..e913177ba 100755 --- a/packages/grant-explorer/src/features/attestations/MintProgressModalBody.tsx +++ b/packages/grant-explorer/src/features/attestations/MintProgressModalBody.tsx @@ -25,6 +25,8 @@ type MintProgressModalBodyProps = { previewBackground?: string; selectedColor?: string; attestationFee: bigint; + heading?: string; + subheading?: string; }; // MintProgressModalBodyThankYou component @@ -39,6 +41,8 @@ export function MintProgressModalBodyThankYou( notEnoughFunds, handleAttest, isLoading, + heading, + subheading, } = props; const { address, isConnected } = useAccount(); @@ -49,7 +53,15 @@ export function MintProgressModalBodyThankYou( const { data: attestationFee } = useAttestationFee(); return ( -
+
+
+
{heading}
+
+ {subheading} +
+
( @@ -99,26 +113,41 @@ export function MintProgressModalBodyHistory( chainId: AttestationChainId, address, }); - const [nextStep, setNextStep] = useState(false); + + const isOnAction = + status !== ProgressStatus.SELECTING_COLOR && + status !== ProgressStatus.IS_SUCCESS; return ( -
- {!nextStep ? ( -
- void} - nextStep={() => { - toggleStartAction?.(); - setNextStep(true); - }} - previewBackground={previewBackground as string} - selectedColor={selectedColor as string} - /> +
+
+
+ {heading}
+
+ {subheading} +
+
+ {status === ProgressStatus.SELECTING_COLOR ? ( + void} + nextStep={() => { + toggleStartAction?.(); + }} + previewBackground={previewBackground as string} + selectedColor={selectedColor as string} + /> ) : status === ProgressStatus.IS_SUCCESS ? ( ) : ( +
-
-
-
-
- Pick your color -
- - {Object.keys(colorMapper).map((key, index) => ( -
selectBackground(key)} - className={`w-5 h-5 rounded-full cursor-pointer ${ - selectedColor === key ? "border-1 border-black" : "" - }`} - style={{ - backgroundColor: - selectedColor === key - ? colorMapper[key as unknown as keyof typeof colorMapper] - : defaultColor, - }} - /> - ))} -
-
-
- -
-
-
+
+
Pick your color
+ {Object.keys(colorMapper).map((key, index) => ( +
selectBackground(key)} + className={`w-5 h-5 rounded-full cursor-pointer ${ + selectedColor === key ? "border-1 border-black" : "" + }`} + style={{ + backgroundColor: + selectedColor === key + ? colorMapper[key as unknown as keyof typeof colorMapper] + : defaultColor, + }} + /> + ))} +
+
+
); @@ -358,19 +349,18 @@ export const HiddenAttestationFrame = ({
); }; -import bgImage from "../../assets/mint-your-impact-background.svg"; import { ImageWithLoading } from "../common/components/ImageWithLoading"; export const ImpactMintingSuccess = ({ attestationLink, impactImageCid, - containerSize = "w-[430px] h-[430px]", - imageSize = "w-[400px] h-[400px]", + imageSize = "size-[400px]", + isShareButtonsAbove = true, }: { attestationLink: string; impactImageCid?: string; - containerSize?: string; imageSize?: string; + isShareButtonsAbove?: boolean; }) => { const { data: image, @@ -378,23 +368,23 @@ export const ImpactMintingSuccess = ({ isFetching, } = useGetImages(impactImageCid ? [impactImageCid] : [], !!impactImageCid); - return ( -
-
-
- -
-
+ return isShareButtonsAbove ? ( + <> -
+ + + ) : ( + <> + + + ); }; diff --git a/packages/grant-explorer/src/features/attestations/components/BalanceDisplay.tsx b/packages/grant-explorer/src/features/attestations/components/BalanceDisplay.tsx index 1380ff61f..208713d84 100644 --- a/packages/grant-explorer/src/features/attestations/components/BalanceDisplay.tsx +++ b/packages/grant-explorer/src/features/attestations/components/BalanceDisplay.tsx @@ -1,6 +1,7 @@ import warningIcon from "../../../assets/warning.svg"; -import ethereumIcon from "../../../assets/icons/ethereum-icon.svg"; import { formatAmount } from "../utils/formatAmount"; +import { AttestationChainId } from "../utils/constants"; +import { getChainById, stringToBlobUrl } from "common"; export const BalanceDisplay = ({ balance, @@ -8,23 +9,35 @@ export const BalanceDisplay = ({ }: { balance: bigint | undefined; notEnoughFunds: boolean; -}) => ( -
-
- Ethereum -
- Mainnet -
- {notEnoughFunds ? ( -
- errorIcon - Balance: {formatAmount(balance)} ETH -
- ) : ( - Balance: {formatAmount(balance)} ETH - )} +}) => { + const chain = getChainById(AttestationChainId); + + return ( +
+
+ Ethereum +
+ {chain.prettyName} +
+ {notEnoughFunds ? ( +
+ errorIcon + Balance: {formatAmount(balance, 3)} ETH +
+ ) : ( + Balance: {formatAmount(balance, 3)} ETH + )} +
-
-); + ); +}; diff --git a/packages/grant-explorer/src/features/attestations/components/CostDetails.tsx b/packages/grant-explorer/src/features/attestations/components/CostDetails.tsx index 320fc01bb..8addb6b93 100644 --- a/packages/grant-explorer/src/features/attestations/components/CostDetails.tsx +++ b/packages/grant-explorer/src/features/attestations/components/CostDetails.tsx @@ -17,7 +17,7 @@ export const CostDetails = ({ const estimatedGasFormatted = `${formatAmount(estimatedGas)} ETH`; return ( -
+
- )} - {children} - - + {showCloseButton && ( + + )} + {children} + + + + ); } diff --git a/packages/grant-explorer/src/features/contributors/components/Buttons/MintDonationImpactAction.tsx b/packages/grant-explorer/src/features/contributors/components/Buttons/MintDonationImpactAction.tsx index 28d32f5f4..9349d6e19 100644 --- a/packages/grant-explorer/src/features/contributors/components/Buttons/MintDonationImpactAction.tsx +++ b/packages/grant-explorer/src/features/contributors/components/Buttons/MintDonationImpactAction.tsx @@ -1,5 +1,4 @@ import { HiddenAttestationFrame } from "../../../attestations/MintYourImpactComponents"; -import MintAttestationProgressModal from "../../../attestations/MintAttestationProgressModal"; import { MintProgressModalBodyHistory } from "../../../attestations/MintProgressModalBody"; import { useGetAttestationData } from "../../../../hooks/attestations/useGetAttestationData"; import { useEASAttestation } from "../../../../hooks/attestations/useEASAttestation"; @@ -17,12 +16,14 @@ import { useEstimateGas } from "../../../../hooks/attestations/useEstimateGas"; import { AttestationChainId } from "../../../attestations/utils/constants"; import { ethers } from "ethers"; import { useAttestationFee } from "../../hooks/useMintingAttestations"; +import { useMemo } from "react"; +import Modal from "../../../common/components/Modal"; interface MintDonationImpactActionProps { toggleModal: () => void; toggleStartAction: (started: boolean) => void; selectBackground: (background: string) => void; - startAction: boolean; + startAction: boolean | undefined; isOpen: boolean; contributions: Contribution[]; transactionHash: string; @@ -72,7 +73,8 @@ export function MintDonationImpactAction({ !isOpen || !startAction || !imagesFetched, - selectedColor + selectedColor, + name as string | undefined ); const { @@ -87,12 +89,14 @@ export function MintDonationImpactAction({ const { data: attestationFee } = useAttestationFee(); - const { handleAttest, handleSwitchChain, status } = useEASAttestation( - AttestationChainId, - () => null, - data?.data, - attestationFee - ); + const { handleAttest, handleSwitchChain, status, updateStatus } = + useEASAttestation( + AttestationChainId, + () => null, + data?.data, + attestationFee, + true + ); const { data: balance, isLoading: isLoadingBalance } = useBalance({ chainId: AttestationChainId, @@ -104,48 +108,62 @@ export function MintDonationImpactAction({ ? false : balance.value < attestationFee + (gasEstimation ?? 0n); - const title = - status !== ProgressStatus.IS_SUCCESS - ? "Mint your impact" - : "Your donation impact"; - - const subheading = - status !== ProgressStatus.IS_SUCCESS - ? "Your unique donation graphic will be generated after you mint." - : "Share with your friends"; - + // Use useMemo to memoize title and subheading + const { title, subheading } = useMemo(() => { + const newTitle = + status === ProgressStatus.SELECTING_COLOR + ? "Mint your impact!" + : status !== ProgressStatus.IS_SUCCESS + ? "Mint your impact" + : "Your donation impact"; + + const newSubheading = + status === ProgressStatus.SELECTING_COLOR + ? "Capture your contribution onchain with an attestation and receive a unique visual representation of your donation. Please note, this is not an NFT, but an onchain attestation that verifies your support." + : status !== ProgressStatus.IS_SUCCESS + ? "Your attestation will be generated after you mint. " + : "Congratulations! Your attestation is now onchain, and here's the unique visual that represents your donation. Share your impact with your community and inspire others to join in!"; + + return { title: newTitle, subheading: newSubheading }; + }, [status]); const loading = isLoading || isLoadingENS || isRefetching || isRefetchingEstimate; return ( <> - { toggleModal(); toggleStartAction(false); + setTimeout(() => { + updateStatus(ProgressStatus.SELECTING_COLOR); + }, 500); }} - heading={title} - subheading={subheading} - body={ - toggleStartAction(true)} - impactImageCid={data?.impactImageCid} - /> - } - /> + padding="p-0" + > + { + toggleStartAction(true); + updateStatus(ProgressStatus.NOT_STARTED); + }} + impactImageCid={data?.impactImageCid} + /> + ) { return (