Avatares Personalizados

Personalización del avatar de usuario de su aplicación

Por defecto, proporcionamos un avatar para los usuarios en caso de que su imagen ENS no esté configurada, pero puede personalizarlo proporcionando su propio componente de avatar. Puede importar el tipo AvatarComponent si usa 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>
  );
};

El AvatarComponent pasado a la prop avatar tiene los tipos de prop como sigue: <{ dirección: string; ensImage?: string | null; tamaño: number;}>

Visión General

Primeros Pasos

Avanzado

Avatares Personalizados

Personalización del avatar de usuario de su aplicación