chore: implemented Minting attestation image

src/features/explorer/components/HiddenMintingAttestationFrame.tsx

@@ -0,0 +1,36 @@
+import { MintingAttestationFrame, MintingAttestationFrameProps } from "./MintingAttestationFrame";
+
+export type HiddenMintingAttestationFrameProps = MintingAttestationFrameProps & {
+  imagesBase64: string[] | undefined;
+  hidden?: boolean;
+};
+
+export const HiddenMintingAttestationFrame = (props: HiddenMintingAttestationFrameProps) => {
+  const { imagesBase64, hidden = true, projects, topRound, ...partialFrameProps } = props;
+  const projectsWithImage = projects.map((project, i) => ({
+    ...project,
+    image: imagesBase64 ? imagesBase64[i] : "",
+  }));
+
+  return (
+    <div
+      id="hidden-attestation-frame"
+      style={{
+        ...(hidden && {
+          position: "absolute",
+          top: "-9999px",
+          left: "-9999px",
+          width: "0",
+          height: "0",
+        }),
+        overflow: "hidden",
+      }}
+    >
+      <MintingAttestationFrame
+        {...partialFrameProps}
+        projects={projectsWithImage}
+        topRound={topRound ?? ""}
+      />
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/MintingAttestationFrame.tsx

@@ -0,0 +1,70 @@
+import useColorAndBackground from "../../hooks/useColorAndBackground";
+import { MintingProject } from "../../types/projects";
+import { HeaderSection, StatsSection, TopProjectsSection, TopRoundSection } from "./components";
+
+export type MintingAttestationFrameProps = {
+  frameId: string;
+  selectedBackground: string;
+  topRound: string;
+  projectsFunded: number;
+  roundsSupported: number;
+  checkedOutChains: number;
+  projects: MintingProject[];
+  address: string | undefined;
+  ensName: string | null | undefined;
+};
+
+export const MintingAttestationFrame = ({
+  frameId,
+  selectedBackground,
+  topRound,
+  projectsFunded,
+  roundsSupported,
+  checkedOutChains,
+  projects,
+  address,
+  ensName,
+}: {
+  frameId: string;
+  selectedBackground: string;
+  topRound: string;
+  projectsFunded: number;
+  roundsSupported: number;
+  checkedOutChains: number;
+  projects: MintingProject[];
+  address: string | undefined;
+  ensName: string | null | undefined;
+}) => {
+  const { attestationFrameLogo } = useColorAndBackground();
+
+  return (
+    <div
+      className="relative flex h-[800px] w-[800px] flex-col items-center overflow-hidden rounded-[32px] bg-cover bg-center bg-no-repeat px-[50px] py-[54px]"
+      id={`attestation-impact-frame-${frameId}`}
+      style={{
+        backgroundImage: `url(${selectedBackground})`,
+      }}
+    >
+      <div className="flex h-full w-full flex-col rounded-lg border border-black bg-white bg-opacity-10">
+        <HeaderSection
+          logo={attestationFrameLogo}
+          ensName={ensName ?? undefined}
+          address={address}
+        />
+
+        <div className="flex w-full flex-1 truncate">
+          <div className="flex h-full w-[60%] flex-col ">
+            <TopProjectsSection projects={projects} />
+
+            <TopRoundSection roundName={topRound} />
+          </div>
+          <StatsSection
+            projectsFunded={projectsFunded}
+            roundsSupported={roundsSupported}
+            checkedOutChains={checkedOutChains}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/components/HeaderSection.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+
+export type HeaderSectionProps = {
+  logo: string;
+  ensName?: string;
+  address?: string;
+};
+
+export const HeaderSection = ({ logo, ensName = "", address = "" }: HeaderSectionProps) => {
+  const addressText = ensName ? ensName : address;
+  return (
+    <div className="flex h-auto w-full items-center justify-between rounded-t-lg border-b border-black px-8 py-5">
+      <div
+        className={clsx(
+          "max-w-[80%] truncate font-mono font-medium text-black",
+          !!ensName ? "text-[32px]/[41.66px]" : "text-lg/[23.44px]",
+        )}
+      >
+        {addressText}
+      </div>
+      <img className="h-10 w-auto" alt="Logo" src={logo} />
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/components/StatItem.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+export type StatItemProps = {
+  label: string;
+  amount: number;
+  className?: string;
+};
+
+export const StatItem = ({ label, amount, className }: StatItemProps) => {
+  return (
+    <div
+      className={clsx(
+        "flex w-full flex-col items-start justify-between border-black p-8",
+        className,
+      )}
+    >
+      <div className="font-mono text-[64px]/[64px] font-medium text-black ">{amount}</div>
+      <div className="font-mono text-[20px]/[26.04px] font-medium text-black">{label}</div>
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/components/StatsSection.tsx

@@ -0,0 +1,21 @@
+import { StatItem } from "./StatItem";
+
+export type StatsSectionProps = {
+  projectsFunded: number;
+  roundsSupported: number;
+  checkedOutChains: number;
+};
+
+export const StatsSection = ({
+  projectsFunded,
+  roundsSupported,
+  checkedOutChains,
+}: StatsSectionProps) => {
+  return (
+    <div className="flex w-full flex-col">
+      <StatItem label="Projects Funded" amount={projectsFunded} className="h-[204px]" />
+      <StatItem label="Rounds Supported" amount={roundsSupported} className="h-[203px]" />
+      <StatItem label="Chains" amount={checkedOutChains} className="h-[205px] rounded-br-lg" />
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/components/TopProject.tsx

@@ -0,0 +1,28 @@
+import { MintingProject } from "../../../types/projects";
+
+export type TopProjectProps = {
+  project: MintingProject;
+};
+
+export const TopProject = ({ project }: TopProjectProps) => {
+  const { rank, image, name, round } = project;
+  return (
+    <div className="flex h-28 flex-1 items-center justify-start gap-4 border-b border-r border-black p-8">
+      <div className="font-mono text-[23.04px]/[30px] font-medium text-black">{rank}</div>
+      <img
+        className="aspect-square size-12 rounded-full border border-[#eaeaea]"
+        alt="Project"
+        src={image}
+      />
+
+      <div className="flex flex-col items-start justify-center gap-2 truncate">
+        <div className="max-w-full truncate font-modern-era text-2xl/[24px] font-medium text-black">
+          {name}
+        </div>
+        <div className="max-w-full truncate font-modern-era text-base/[16px] font-medium text-black">
+          {round}
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/components/TopProjectsSection.tsx

@@ -0,0 +1,19 @@
+import { MintingProject } from "../../../types/projects";
+import { TopProject } from "./TopProject";
+
+export type TopProjectsSectionProps = {
+  projects?: MintingProject[];
+};
+
+export const TopProjectsSection = ({ projects = [] }: TopProjectsSectionProps) => {
+  return (
+    <div className="flex h-[407px] max-w-full flex-col">
+      <div className="border-b border-r border-black px-8 py-4 font-mono text-[23.04px]/[30px] font-medium text-black">
+        Top Projects
+      </div>
+      {projects.map((project, index) => (
+        <TopProject key={index} project={project} />
+      ))}
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/components/TopRoundSection.tsx

@@ -0,0 +1,14 @@
+export type TopRoundSectionProps = {
+  roundName: string;
+};
+
+export const TopRoundSection = ({ roundName }: TopRoundSectionProps) => {
+  return (
+    <div className="inline-flex h-[205px] w-full flex-col items-start justify-between rounded-bl-lg border-r border-black p-8">
+      <div className="font-mono text-[20px]/[26.04px] font-medium text-black ">Top Round</div>
+      <div className="whitespace-normal font-modern-era text-[32px]/[32px] font-medium text-black">
+        {roundName}
+      </div>
+    </div>
+  );
+};

src/features/explorer/components/MintingAttestationFrame/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./HeaderSection";
+export * from "./StatsSection";
+export * from "./TopProjectsSection";
+export * from "./TopRoundSection";

src/features/explorer/components/MintingAttestationFrame/index.ts

@@ -0,0 +1,4 @@
+export {
+  MintingAttestationFrame,
+  type MintingAttestationFrameProps,
+} from "./MintingAttestationFrame";

src/features/explorer/hooks/useColorAndBackground.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import alt1 from "../assets/alt1.svg";
+import alt2 from "../assets/alt2.svg";
+import alt3 from "../assets/alt3.svg";
+import alt4 from "../assets/alt4.svg";
+import alt5 from "../assets/alt5.svg";
+import preview_alt1 from "../assets/preview_alt_1.svg";
+import preview_alt2 from "../assets/preview_alt_2.svg";
+import preview_alt3 from "../assets/preview_alt_3.svg";
+import preview_alt4 from "../assets/preview_alt_4.svg";
+import preview_alt5 from "../assets/preview_alt_5.svg";
+import attestationFrameLogo from "../assets/gg_22_logo.svg";
+
+const useColorAndBackground = () => {
+  const colorMapper = {
+    "0": "#8266BE",
+    "1": "#79A557",
+    "2": "#9BC8E7",
+    "3": "#E3734C",
+    "4": "#BCBFBF",
+  };
+
+  const backgroundMapper = {
+    "0": alt1,
+    "1": alt2,
+    "2": alt3,
+    "3": alt4,
+    "4": alt5,
+  };
+
+  const defaultColor = "#EBEBEB";
+
+  const backgroundAlternatives = [
+    preview_alt1,
+    preview_alt2,
+    preview_alt3,
+    preview_alt4,
+    preview_alt5,
+  ];
+
+  const [selectedColor, setSelectedColor] = React.useState("0");
+  const [previousColor, setPreviousColor] = React.useState("-0");
+  const [selectedBackground, setSelectedBackground] = React.useState(backgroundMapper["0"]);
+  const [previewBackground, setPreviewBackground] = React.useState(preview_alt1);
+
+  const selectBackground = (option: string) => {
+    setPreviousColor(selectedColor);
+    setSelectedColor(option);
+    setPreviewBackground(backgroundAlternatives[Number(option)]);
+    setSelectedBackground(backgroundMapper[option as keyof typeof backgroundMapper]);
+  };
+
+  return {
+    colorMapper,
+    backgroundMapper,
+    defaultColor,
+    backgroundAlternatives,
+    selectedColor,
+    previousColor,
+    previewBackground,
+    selectBackground,
+    selectedBackground,
+    preview_alt1,
+    attestationFrameLogo,
+  };
+};
+
+export default useColorAndBackground;

src/features/explorer/types/projects.ts

@@ -0,0 +1,6 @@
+export type MintingProject = {
+  rank: number;
+  name: string;
+  round: string;
+  image: string;
+};

src/index.ts

@@ -1 +1,5 @@
 export * from "./legacy";
+export {
+  HiddenMintingAttestationFrame,
+  type HiddenMintingAttestationFrameProps,
+} from "./features/explorer/components/HiddenMintingAttestationFrame";