Nút Kết Nối

Nút Kết Nối

Sử dụng và tùy chỉnh Nút Kết Nối

Đây là thành phần chính. Nó chịu trách nhiệm vẽ nút kết nối/ngắt kết nối, cũng như giao diện trao đổi chuỗi.

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

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

Lưu ý: Đảm bảo ứng dụng của bạn được bao trong nhà cung cấp cần thiết. Đọc thêm.

Thành phần ConnectButton cung cấp nhiều thuộc tính để tùy chỉnh giao diện của nó, bao gồm bật/tắt hiển thị các phần tử khác nhau.

Lưu ý: điểm ngắt largeScreen tích hợp là 768px.

Sử dụng thuộc tính label để đặt văn bản tuỳ chỉnh cho ConnectButton.

<ConnectButton label="Sign in" />

Đây là một vài cách khác nhau bạn có thể sử dụng thuộc tính accountStatus.

Chỉ hiển thị ảnh đại diện của tài khoản.

<ConnectButton accountStatus="avatar" />

Chỉ hiển thị địa chỉ của tài khoản.

<ConnectButton accountStatus="address" />

Đây là một vài cách khác nhau bạn có thể sử dụng thuộc tính chainStatus.

Chỉ hiển thị biểu tượng chuỗi hiện tại.

<ConnectButton chainStatus="icon" />

Chỉ hiển thị tên chuỗi hiện tại.

<ConnectButton chainStatus="name" />

Ẩn hoàn toàn giao diện chuỗi.

<ConnectButton chainStatus="none" />

Sử dụng thuộc tính showBalance để ẩn/hiển thị số dư.

Ẩn số dư.

<ConnectButton showBalance={false} />

Các thuộc tính này cũng có thể được định nghĩa ở định dạng đáp ứng.

Trên màn hình nhỏ, chỉ hiển thị biểu tượng tài khoản. Nhưng trên màn hình lớn, hiển thị biểu tượng và địa chỉ.

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

Trên màn hình nhỏ, ẩn số dư. Nhưng trên màn hình lớn, hiển thị nó.

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