Користувацькі Аватари

Налаштування аватару користувача вашого додатку

За замовчуванням ми надаємо аватар для користувачів, якщо їхнє зображення ENS не встановлено, але ви можете налаштувати це, надавши свій власний компонент аватара. Ви можете імпортувати тип AvatarComponent, якщо використовуєте 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>
  );
};

Компонент AvatarComponent, переданий в властивість avatar, має такі типи властивостей: <{ address: string; ensImage?: string | null; size: number;}>

Огляд

Початок роботи

Розширені можливості

Користувацькі Аватари

Налаштування аватару користувача вашого додатку