Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improved attestation frame made it more dynamic-minimal #3682

Merged
merged 2 commits into from
Oct 11, 2024
Merged

improved attestation frame made it more dynamic-minimal #3682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bee55f
improved attestation frame made it more dynamic-minimal
nijoe1 Oct 11, 2024
1f3bdd8
make sure the frame projects images are fetched
nijoe1 Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 37 additions & 50 deletions packages/grant-explorer/src/features/attestations/MintYourImpactComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@ export const AttestationFrame = ({
ensName: string | null | undefined;
}) => {
const { attestationFrameLogo } = useColorAndBackground();
const projectsLength = projects.length;
const padding =
projectsLength === 3
? "threeProjectsPadding"
: projectsLength === 2
? "py-11"
: "py-28";

return (
<div className="flex flex-col items-center">
<div
Expand All @@ -59,58 +67,39 @@ export const AttestationFrame = ({
style={{ maxWidth: "80%" }}
>
{ensName ? (
<div
className="font-mono font-medium text-black text-[19px] truncate"
style={{ maxWidth: "100%" }}
>
<div className="font-mono font-medium text-black text-[19px] truncate">
{ensName}
</div>
) : (
<div
className="font-mono font-medium text-black text-sm truncate"
style={{ maxWidth: "100%" }}
>
<div className="font-mono font-medium text-black text-sm truncate">
{address}
</div>
)}
</div>
<img
className="h-6 w-auto"
className="h-6 w-auto "
alt="Logo"
src={attestationFrameLogo}
style={{ flexShrink: 0 }}
/>
</div>

{/* Main Body */}
<div
className="flex flex-1 w-full bg-white bg-opacity-10 border-x border-b border-black rounded-b-lg overflow-x-auto"
style={{
scrollbarWidth: "none" /* Firefox */,
msOverflowStyle: "none" /* Internet Explorer 10+ */,
}}
>
<div className="flex flex-1 w-full bg-white bg-opacity-10 border-x border-b border-black rounded-b-lg truncate">
{/* Left Section (Top Projects and Top Round) */}
<div className="flex flex-col flex-1 h-full p-5 w-[350px]">
<div className="flex flex-col h-full w-[60%] ">
{/* Top Projects Header */}
<div className="w-full pb-4 border-b border-black">
<h2 className="font-mono font-medium text-black text-[18px]">
Top Projects
</h2>
</div>
<div className="h-[70%] ">
<div className="p-4 border-b border-black">
<h2 className="font-mono font-medium text-black text-[18px]">
Top Projects
</h2>
</div>

{/* Project List (3/4 of the height) */}
<div
className="flex-[2] overflow-x-auto"
style={{
scrollbarWidth: "none" /* Firefox */,
msOverflowStyle: "none" /* Internet Explorer 10+ */,
}}
>
{/* Project List */}
{projects.map((project, index) => (
<div
key={index}
className="flex items-center gap-3 py-4 border-b border-black"
className={`truncate flex items-center gap-3 ${padding} border-b border-black px-2`}
>
<div className="font-mono font-medium text-black text-[16px]">
{project.rank}
Expand All @@ -120,49 +109,47 @@ export const AttestationFrame = ({
alt="Project"
src={project.image}
/>
<div className="flex flex-col flex-1">

<div className="truncate ">
<p className="text-black text-[14px] font-medium truncate">
{project.name}
</p>
<p className="text-gray-600 text-[12px] break-words truncate">
<p className="text-gray-600 text-[12px] truncate">
{project.round}
</p>
</div>
</div>
))}
</div>

{/* Top Round Section (1/4 of the height) */}
<div className="flex-[1] w-full mt-4 items-center justify-center">
<div
className={`flex flex-col ${
projects.length < 3 && "border-t border-black py-4"
}`}
>
<p className="text-black text-[18px] font-medium font-mono">
{/* Top Round Section */}

<div className="h-[5%] pl-5 float-left ">
<div className="h-[10%] flex flex-col justify-start">
<div className="text-black text-[18px] font-medium font-mono ">
Top Round
</p>
</div>
</div>
<div className="flex flex-col flex-1 items-left text-left relative top-5">
<p className="text-black text-[25px] font-medium break-words leading-tight overflow-hidden">
{topRound}
</p>
</div>
<div className="h-[25%] px-5 pb-2 float-left flex flex-col justify-end ">
<div className="text-black text-[20px] font-medium truncate ">
{topRound}
</div>
</div>
</div>

{/* Right Section (Stats) */}
<div className="flex flex-col w-[250px] my-2 p-5 border-l border-black">
<div className="flex flex-col h-fit pl-5 w-[40%] border-l border-black">
{[
{ value: projectsFunded, label: "Projects Funded" },
{ value: roundsSupported, label: "Rounds Supported" },
{ value: checkedOutChains, label: "Chains" },
].map((stat, index) => (
<div key={index} className="flex flex-col py-5">
<div key={index} className="flex flex-col py-8 ">
<div className="text-[48px] font-medium font-mono text-black">
{stat.value}
</div>
<div className="text-[16px] mt-3 font-medium font-mono text-black">
<div className="text-[16px] font-medium font-mono text-black">
{stat.label}
</div>
</div>
Expand Down
18 changes: 12 additions & 6 deletions .../grant-explorer/src/features/contributors/components/Buttons/MintDonationImpactAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ import { Contribution } from "data-layer";
import { ProgressStatus } from "../../../../hooks/attestations/config";
import { useEstimateGas } from "../../../../hooks/attestations/useEstimateGas";

import {
AttestationChainId,
} from "../../../attestations/utils/constants";
import { AttestationChainId } from "../../../attestations/utils/constants";
import { ethers } from "ethers";
import { useAttestationFee } from "../../hooks/useMintingAttestations";

Expand Down Expand Up @@ -57,15 +55,23 @@ export function MintDonationImpactAction({
[[transactionHash]]
);

const { data: imagesBase64, isLoading: isLoadingImages } = useGetImages(
const {
data: imagesBase64,
isLoading: isLoadingImages,
isFetched: imagesFetched,
} = useGetImages(
FrameProps.projects.map((project) => project.image),
isOpen
);

const { data, isLoading, isRefetching } = useGetAttestationData(
[transactionHash],
handleGetAttestationPreview,
isLoadingENS || isLoadingImages || !isOpen || !startAction,
isLoadingENS ||
isLoadingImages ||
!isOpen ||
!startAction ||
!imagesFetched,
selectedColor
);

Expand All @@ -91,7 +97,7 @@ export function MintDonationImpactAction({
});

const { data: attestationFee } = useAttestationFee();
console.log("====> A1", attestationFee)
console.log("====> A1", attestationFee);

const notEnoughFunds =
balance?.value && gasEstimation
Expand Down
16 changes: 11 additions & 5 deletions packages/grant-explorer/src/features/round/ThankYou.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ import { useResolveENS } from "../../hooks/useENS";
import { useAccount, useBalance } from "wagmi";
import { useGetImages } from "../../hooks/attestations/useGetImages";
import { useEstimateGas } from "../../hooks/attestations/useEstimateGas";
import {
AttestationChainId,
} from "../attestations/utils/constants";
import { AttestationChainId } from "../attestations/utils/constants";
import { ethers } from "ethers";
import { useAttestationFee } from "../contributors/hooks/useMintingAttestations";
import { useAttestationStore } from "../../attestationStore";
Expand Down Expand Up @@ -141,15 +139,23 @@ export default function ThankYou() {

const { data: name, isLoading: isLoadingENS } = useResolveENS(address);

const { data: imagesBase64, isLoading: isLoadingImages } = useGetImages(
const {
data: imagesBase64,
isLoading: isLoadingImages,
isFetched: imagesFetched,
} = useGetImages(
ImpactFrameProps.projects.map((project) => project.image),
isModalOpen
);

const { data, isLoading } = useGetAttestationData(
transactions,
handleGetAttestationPreview,
isLoadingENS || isLoadingImages || !isModalOpen || isLoadingRoundNames,
isLoadingENS ||
isLoadingImages ||
!isModalOpen ||
isLoadingRoundNames ||
!imagesFetched,
selectedBackground
);

Expand Down
29 changes: 22 additions & 7 deletions packages/grant-explorer/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}

.font-modern-era-bold {
font-family: 'Modern Era Bold', serif;
font-family: "Modern Era Bold", serif;
}

.blurred::before {
Expand Down Expand Up @@ -101,21 +101,36 @@

.rainbow-button {
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.20);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), linear-gradient(124deg, #FF9776 17.77%, #5F94BC 35.47%, #25BDCE 59.3%, #DEAB0C 91.61%);
border: 1px solid rgba(0, 0, 0, 0.2);
background: linear-gradient(
0deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 100%
),
linear-gradient(
124deg,
#ff9776 17.77%,
#5f94bc 35.47%,
#25bdce 59.3%,
#deab0c 91.61%
);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.chakra-accordion .chakra-accordion__item{
.chakra-accordion .chakra-accordion__item {
border: 0;
}


@keyframes reverse-spin {
to {
transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.animate-reverse-spin {
animation: reverse-spin 1s linear infinite;
}
}

.threeProjectsPadding {
padding-top: 1.33rem;
padding-bottom: 1.33rem;
}
Loading