Add image in the council frontend

apps/web/src/app/page.tsx

@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 import { getAddress } from "viem";
 import { useAccount, useChains } from "wagmi";
 import { DEFAULT_COUNCIL_ADDRESS, NETWORK } from "../../../../constants";
+import { CouncilImage } from "../components/CouncilImage";
 import { CouncilName } from "../components/CouncilName";
 import VotingCard from "../components/VotingCard";
 import { useAllocation } from "../hooks/useAllocation";
@@ -35,6 +36,7 @@ export default function Page() {
   const { address } = useAccount();
   const {
     councilName,
+    councilImage,
     councilMembers,
     grantees,
     maxAllocationsPerMember,
@@ -54,6 +56,7 @@ export default function Page() {
         href={`https://explorer.superfluid.finance/${NETWORK}-mainnet/accounts/${council}?tab=pools`}
         target="_blank"
       >
+        <CouncilImage image={councilImage} />
         <CouncilName
           name={councilName}
           className="min-h-12 text-4xl font-bold mb-4 text-accent text-center"

apps/web/src/components/CouncilImage.tsx

@@ -0,0 +1,17 @@
+export function CouncilImage({ image }: { image: string }) {
+  return (
+    <div className="w-[100px] h-[100px] mx-auto flex items-center justify-center mb-6">
+      <div className="w-full h-full border-2 border-accent rounded-full">
+        <div className="relative w-full h-full rounded-full border-8 border-card">
+          <div className="absolute inset-0 bg-accent rounded-full " />
+          <div
+            className={
+              "absolute inset-0 w-full h-full bg-cover bg-center mb-6 grayscale opacity-60 rounded-full contrast-100"
+            }
+            style={{ backgroundImage: `url(${image})` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/CouncilName.tsx

@@ -2,11 +2,18 @@
 
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
 import { cn } from "@repo/ui/lib/utils";
-
 export function CouncilName({
   name,
   className,
 }: { name: string | undefined; className?: string }) {
-  if (!name) return <Skeleton className={cn("w-1/3 ", className)} />;
-  return <h1 className={className}>{name}</h1>;
+  if (!name) return <CouncilNameSkeleton className={className} />;
+  return (
+    <>
+      <h1 className={className}>{name}</h1>
+    </>
+  );
+}
+
+function CouncilNameSkeleton({ className }: { className?: string }) {
+  return <Skeleton className={cn("w-1/3 mx-auto", className)} />;
 }

apps/web/src/hooks/useCouncil.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { gql, request } from "graphql-request";
+import { getCouncilImage } from "../utils/council";
 
 export const useCouncil = (council: `0x${string}` | undefined) => {
   const url =
@@ -41,8 +42,11 @@ export const useCouncil = (council: `0x${string}` | undefined) => {
     },
     enabled: !!council,
   });
+
+  const councilImage = getCouncilImage(council);
   return {
     councilName: data?.council?.councilName,
+    councilImage,
     councilMembers: data?.council?.councilMembers.filter((m) => m.enabled),
     grantees: data?.council?.grantees.filter((g) => g.enabled),
     maxAllocationsPerMember: data?.council?.maxAllocationsPerMember,

apps/web/src/utils/council.ts

@@ -0,0 +1,6 @@
+export const getCouncilImage = (council: `0x${string}` | undefined) => {
+  if (council === "0xFa942226E5dd1E2d4D99014982846786B09939DA") {
+    return "https://ipfs.blossom.software/ipfs/QmSkDgv6nQEUM5GjKCpqCiuKvMVYs63KqFveNH6DSra9ve";
+  }
+  return "";
+};