example-smart-wallet/packages/nextjs/components/UserAvatar.tsx

"use client";

import Avatar from "boring-avatars";
import { useMemo } from "react";

type UserAvatarProps = {
  address: string;
  primaryColor?: string;
};

const SUB_COLORS = ["#37BCFA", "#6D37FA"];

const UserAvatar = ({ address, primaryColor = "#37BCFA" }: UserAvatarProps) => {
  const avatarColors = useMemo(() => {
    return shuffleColors([primaryColor, ...SUB_COLORS]);
  }, [primaryColor]);

  return (
    <Avatar
      size={32}
      name={address}
      variant="marble"
      colors={avatarColors.length > 0 ? avatarColors : [primaryColor]}
    />
  );
};

const shuffleColors = (colors: string[]) => {
  return colors.sort(() => Math.random() - 0.5);
};

export { UserAvatar };