Пользовательские аватары

Настройка аватара пользователя в вашем приложении

По умолчанию мы предоставляем аватар для пользователей, если их изображение 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;}>

Обзор

Начало работы

Продвинутый уровень

Пользовательские аватары

Настройка аватара пользователя в вашем приложении