ConnectButton

ConnectButton

ConnectButton 사용 및 사용자 정의

이것은 주요 구성 요소입니다. 연결/연결 해제 버튼 및 체인 전환 UI를 렌더링하는 책임이 있습니다.

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

참고: 앱이 필요한 제공자들에 의해 래핑되었는지 확인하세요. 자세히 읽기.

ConnectButton 구성 요소는 외관을 사용자 정의하기 위한 여러 속성을 노출하며, 다양한 요소의 가시성을 전환할 수 있습니다.

참고: 내장된 largeScreen 브레이크포인트는 768px입니다.

label 속성을 사용하여 맞춤형 ConnectButton 텍스트를 설정합니다.

<ConnectButton label="Sign in" />

accountStatus 속성을 사용하는 몇 가지 다양한 방법이 있습니다.

계정의 아바타만 표시합니다.

<ConnectButton accountStatus="avatar" />

계정의 주소만 표시합니다.

<ConnectButton accountStatus="address" />

chainStatus 속성을 사용하는 몇 가지 다양한 방법이 있습니다.

현재 체인의 아이콘만 표시합니다.

<ConnectButton chainStatus="icon" />

현재 체인의 이름만 표시합니다.

<ConnectButton chainStatus="name" />

체인 UI를 완전히 숨깁니다.

<ConnectButton chainStatus="none" />

showBalance 속성을 사용하여 잔액을 숨기거나 표시합니다.

잔액 숨기기.

<ConnectButton showBalance={false} />

이 속성들은 반응형 형식으로도 정의될 수 있습니다.

작은 화면에서는 계정 아이콘만 표시합니다. 그러나 큰 화면에서는 아이콘과 주소를 표시합니다.

<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>

작은 화면에서는 잔액을 숨깁니다. 그러나 큰 화면에서는 표시합니다.

<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>