Rainbow logo
RainbowKit
2.2.0

맞춤형 ConnectButton

맞춤형 ConnectButton

맞춤형 ConnectButton 생성하기

저수준의 ConnectButton.Custom을 사용하여 자신만의 맞춤 연결 버튼을 생성할 수 있습니다. 이 컴포넌트는 내장 버튼을 다시 구현할 필요가 있는 모든 것을 포함한 함수를 렌더링합니다.

내장 버튼의 최소한의 재구현은 다음과 같을 것입니다:

import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return (
<ConnectButton.Custom>
{({
account,
chain,
openAccountModal,
openChainModal,
openConnectModal,
authenticationStatus,
mounted,
}) => {
// Note: If your app doesn't use authentication, you
// can remove all 'authenticationStatus' checks
const ready = mounted && authenticationStatus !== 'loading';
const connected =
ready &&
account &&
chain &&
(!authenticationStatus ||
authenticationStatus === 'authenticated');
return (
<div {...(!ready && { 'aria-hidden': true, 'style': { opacity: 0, pointerEvents: 'none', userSelect: 'none', }, })} >
{(() => {
if (!connected) {
return (
<button onClick={openConnectModal} type="button">
Connect Wallet
</button>
);
}
if (chain.unsupported) {
return (
<button onClick={openChainModal} type="button">
Wrong network
</button>
);
}
return (
<div style={{ display: 'flex', gap: 12 }}>
<button onClick={openChainModal} style={{ display: 'flex', alignItems: 'center' }} type="button" >
{chain.hasIcon && (
<div style={{ background: chain.iconBackground, width: 12, height: 12, borderRadius: 999, overflow: 'hidden', marginRight: 4, }} >
{chain.iconUrl && (
<img alt={chain.name ?? 'Chain icon'} src={chain.iconUrl} style={{ width: 12, height: 12 }} />
)}
</div>
)}
{chain.name}
</button>
<button onClick={openAccountModal} type="button">
{account.displayName}
{account.displayBalance
? ` (${account.displayBalance})`
: ''}
</button>
</div>
);
})()}
</div>
);
}}
</ConnectButton.Custom>
);
};

다음 props는 렌더 함수에 전달됩니다.

PropTypeDefault
accountobject | undefined
account.addressstring
account.balanceDecimalsstring | undefined
account.balanceFormattedstring | undefined
account.balanceSymbolstring | undefined
account.displayBalancestring | undefined
account.displayNamestring
account.ensAvatarstring | undefined
account.ensNamestring | undefined
account.hasPendingTransactionsboolean
PropTypeDefault
chainobject | undefined
chain.hasIconboolean
chain.iconUrlstring | undefined
chain.iconBackgroundstring | undefined
chain.idnumber
chain.namestring | undefined
chain.unsupportedboolean | undefined
PropTypeDefault
openAccountModal() => void
openChainModal() => void
openConnectModal() => void
accountModalOpenboolean
chainModalOpenboolean
connectModalOpenboolean
PropTypeDefault
mountedboolean
authenticationStatus"loading" | "unauthenticated" | "authenticated" | undefined