Merge pull request #1607 from decentdao/update-blockie-avatar

Update deterministic avatar generation library

package.json

@@ -24,10 +24,10 @@
     "@shutter-network/shutter-crypto": "^1.0.1",
     "@snapshot-labs/snapshot.js": "^0.7.3",
     "@tanstack/react-query": "^5.28.4",
-    "@ukstv/jazzicon-react": "^1.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@web3modal/wagmi": "^4.1.1",
     "axios": "^0.27.2",
+    "blo": "^1.2.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.1",

src/components/ui/page/Header/Avatar.tsx

@@ -1,7 +1,8 @@
 import { Box, Image } from '@chakra-ui/react';
-import { Jazzicon } from '@ukstv/jazzicon-react';
+import { blo } from 'blo';
 import { Suspense } from 'react';
 import { useImage } from 'react-image';
+import { getAddress } from 'viem';
 
 type AvatarSize = 'icon' | 'lg' | 'sm';
 const avatarSizes: { [size: string]: string } = {
@@ -10,13 +11,17 @@ const avatarSizes: { [size: string]: string } = {
   lg: '2rem',
 };
 
-function JazziconAvatar({ address, size }: { size: AvatarSize; address: string }) {
+function BlockieAvatar({ address, size }: { size: AvatarSize; address: string }) {
   return (
     <Box
       h={avatarSizes[size]}
       w={avatarSizes[size]}
     >
-      <Jazzicon address={address} />
+      <Image
+        borderRadius="full"
+        src={blo(getAddress(address))}
+        alt={address}
+      />
     </Box>
   );
 }
@@ -48,7 +53,7 @@ function Avatar({
 }) {
   if (!url) {
     return (
-      <JazziconAvatar
+      <BlockieAvatar
         size={size}
         address={address}
       />
@@ -58,7 +63,7 @@ function Avatar({
   return (
     <Suspense
       fallback={
-        <JazziconAvatar
+        <BlockieAvatar
           size={size}
           address={address}
         />