Avatars personnalisés

Personnalisation de l'avatar utilisateur de votre application

Par défaut, nous fournissons un avatar pour les utilisateurs au cas où leur image ENS n'est pas définie, mais vous pouvez personnaliser cela en fournissant votre propre composant avatar. Vous pouvez importer le type AvatarComponent si vous utilisez TypeScript :

import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};

Le AvatarComponent passé à la propriété avatar a les types suivants : <{ address: string; ensImage?: string | null; size: number;}>

Aperçu

Prise en main

Avancé

Avatars personnalisés

Personnalisation de l'avatar utilisateur de votre application