Ảnh đại diện tùy chỉnh

Tùy chỉnh ảnh đại diện của người dùng ứng dụng

Theo mặc định, chúng tôi cung cấp một ảnh đại diện cho người dùng nếu hình ảnh ENS của họ chưa được thiết lập, nhưng bạn có thể tùy chỉnh điều này bằng cách cung cấp thành phần ảnh đại diện của riêng bạn. Bạn có thể nhập kiểu AvatarComponent nếu sử dụng 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 được truyền vào thuộc tính avatar có các kiểu thuộc tính như sau: <{ address: string; ensImage?: string | null; size: number;}>

Tổng quan

Bắt đầu

Nâng cao

Ảnh đại diện tùy chỉnh

Tùy chỉnh ảnh đại diện của người dùng ứng dụng