Avatar Tersendiri

Menggubah avatar pengguna aplikasi anda

Secara lalai, kami menyediakan avatar untuk pengguna sekiranya imej ENS mereka tidak disetkan, tetapi anda boleh menyesuaikan ini dengan menyediakan komponen avatar anda sendiri. Anda boleh mengimport jenis AvatarComponent jika menggunakan 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>
  );
};

Komponen AvatarComponent yang diteruskan kepada prop avatar mempunyai jenis props seperti berikut: <{ alamat: string; imejEns?: string | null; saiz: number;}>

Tinjauan

Memulakan

Lanjutan

Avatar Tersendiri

Menggubah avatar pengguna aplikasi anda