You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
4.9 KiB
JavaScript
134 lines
4.9 KiB
JavaScript
import { ConnectButton } from '@rainbow-me/rainbowkit';
|
|
import { AwesomeButton } from 'react-awesome-button';
|
|
|
|
import './styles/buttons.css';
|
|
|
|
|
|
export function Wallet() {
|
|
return (
|
|
<nav className="navbar">
|
|
<ConnectButton.Custom>
|
|
{({
|
|
account,
|
|
chain,
|
|
openAccountModal,
|
|
openChainModal,
|
|
openConnectModal,
|
|
mounted,
|
|
}) => {
|
|
const ready = mounted;
|
|
const connected =
|
|
ready &&
|
|
account &&
|
|
chain;
|
|
|
|
return (
|
|
<div
|
|
className='walletButtons'
|
|
{...(!ready && {
|
|
'aria-hidden': true,
|
|
'style': {
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
userSelect: 'none',
|
|
},
|
|
})}
|
|
>
|
|
{(() => {
|
|
if (!connected) {
|
|
return (
|
|
<AwesomeButton
|
|
type="secondary"
|
|
ripple={true}
|
|
loadingLabel=""
|
|
resultLabel=""
|
|
releaseDelay={1500}
|
|
onReleased={(event, release) => {
|
|
openConnectModal();
|
|
release();
|
|
}}>
|
|
Connect Wallet
|
|
</AwesomeButton>
|
|
);
|
|
}
|
|
|
|
if (chain.unsupported) {
|
|
return (
|
|
<AwesomeButton
|
|
type="secondary"
|
|
ripple={true}
|
|
loadingLabel=""
|
|
resultLabel=""
|
|
releaseDelay={1500}
|
|
onReleased={(event, release) => {
|
|
openChainModal();
|
|
release();
|
|
}}>
|
|
Wrong network
|
|
</AwesomeButton>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
<AwesomeButton
|
|
type="secondary"
|
|
style={{ display: 'flex', alignItems: 'center' }}
|
|
ripple={true}
|
|
loadingLabel=""
|
|
resultLabel=""
|
|
releaseDelay={1500}
|
|
onReleased={(event, release) => {
|
|
openChainModal();
|
|
release();
|
|
}}>
|
|
{chain.hasIcon && (
|
|
<div
|
|
style={{
|
|
background: chain.iconBackground,
|
|
width: 24,
|
|
height: 24,
|
|
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}
|
|
</AwesomeButton>
|
|
|
|
<AwesomeButton
|
|
type="primary"
|
|
style={{ display: 'flex', alignItems: 'center' }}
|
|
ripple={true}
|
|
loadingLabel=""
|
|
resultLabel=""
|
|
releaseDelay={1500}
|
|
onReleased={(event, release) => {
|
|
openAccountModal();
|
|
release();
|
|
}}>
|
|
{account.displayName}
|
|
{account.displayBalance
|
|
? ` (${account.displayBalance})`
|
|
: ''}
|
|
</AwesomeButton>
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
);
|
|
}}
|
|
</ConnectButton.Custom>
|
|
</nav>
|
|
);
|
|
};
|