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

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

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

Переданный в проп avatar AvatarComponent имеет следующие типы пропов: <{ address: string; ensImage?: string | null; size: number;}>

Обзор

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

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

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

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