Punk Blockie (#30)

Author: carletex

packages/nextjs/app/builders/[address]/page.tsx

@@ -1,5 +1,6 @@
 import { UserChallengesTable } from "../_component/UserChallengesTable";
 import { UserSocials } from "../_component/UserSocials";
+import { PunkBlockie } from "~~/components/PunkBlockie";
 import { findUserChallengesByAddress } from "~~/services/database/repositories/userChallenges";
 import { findUserByAddress } from "~~/services/database/repositories/users";
 
@@ -15,6 +16,7 @@ export default async function BuilderPage({ params }: { params: { address: strin
 
   return (
     <div className="flex flex-col gap-8">
+      <PunkBlockie address={userAddress} scale={2} />
       <UserSocials user={user} />
       <UserChallengesTable challenges={challenges} />
     </div>

packages/nextjs/components/PunkBlockie.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { blo } from "blo";
+
+// punk size with scale = 1
+const PUNK_SIZE = 112;
+// punk size pixels in the original file
+const ORIGINAL_PUNK_SIZE = 24;
+const PUNK_SIZE_RATIO = PUNK_SIZE / ORIGINAL_PUNK_SIZE;
+
+interface PunkBlockieProps {
+  address: string;
+  scale?: number;
+  width?: number;
+  className?: string;
+}
+
+export const PunkBlockie = ({ address, scale, width, className }: PunkBlockieProps) => {
+  const part1 = address?.slice(2, 22);
+  const part2 = address?.slice(-20);
+
+  const backgroundPositionX = parseInt(part1, 16) % 100;
+  const backgroundPositionY = parseInt(part2, 16) % 100;
+
+  const computedScale = width ? width / PUNK_SIZE : (scale ?? 1);
+
+  return (
+    <div
+      className={`relative block overflow-hidden m-0 ${className}`}
+      style={{
+        width: PUNK_SIZE * computedScale,
+        height: PUNK_SIZE * computedScale,
+      }}
+    >
+      <div className="opacity-40 absolute inset-0">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img alt={address} src={blo(address as `0x${string}`, PUNK_SIZE * computedScale)} />
+      </div>
+      <div
+        className="absolute inset-0 bg-no-repeat [image-rendering:pixelated]"
+        style={{
+          backgroundImage: "url(/punks.png)",
+          backgroundSize: `${2400 * PUNK_SIZE_RATIO * computedScale}px ${2400 * PUNK_SIZE_RATIO * computedScale}px`,
+          backgroundPosition: `${-PUNK_SIZE * backgroundPositionX * computedScale}px ${-PUNK_SIZE * backgroundPositionY * computedScale}px`,
+        }}
+      />
+    </div>
+  );
+};

packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx

@@ -1,17 +1,14 @@
 "use client";
 
+import { PunkBlockie } from "../PunkBlockie";
 import { AvatarComponent } from "@rainbow-me/rainbowkit";
-import { blo } from "blo";
 
-// Custom Avatar for RainbowKit
-export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => {
+  if (!ensImage) {
+    return <PunkBlockie address={address} width={size} className="rounded-full" />;
+  }
+
   // Don't want to use nextJS Image here (and adding remote patterns for the URL)
   // eslint-disable-next-line @next/next/no-img-element
-  <img
-    className="rounded-full"
-    src={ensImage || blo(address as `0x${string}`)}
-    width={size}
-    height={size}
-    alt={`${address} avatar`}
-  />
-);
+  return <img className="rounded-full" src={ensImage} width={size} height={size} alt={`${address} avatar`} />;
+};