Customizing RainbowKit to use jazzicon avatars. Uses the Jazzicon component shared on previous gist.

JazziconAvatar.tsx

import { AvatarComponent } from "@rainbow-me/rainbowkit";
import Jazzicon from "./Jazzicon";
import { addressToSeed } from "./utils";

const JazziconAvatar: AvatarComponent = ({ address, ensImage, size }) =>
	ensImage ? (
		<img
			src={ensImage}
			width={size}
			height={size}
			style={{ borderRadius: 999 }}
			alt=""
		/>
	) : (
		<Jazzicon
			seed={addressToSeed(address as `0x${string}`)}
			width={size}
			height={size}
		/>
	);

export default JazziconAvatar;