67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { ConnectButton as RainbowBtn } from '@rainbow-me/rainbowkit';
|
|
import { Button } from './Button';
|
|
import defaultAvatar from '../../assets/avatar.svg';
|
|
import { usePrimaryName } from '../../hooks/usePrimaryName';
|
|
|
|
const Custom = ({
|
|
account,
|
|
chain,
|
|
openAccountModal,
|
|
openChainModal,
|
|
openConnectModal,
|
|
}) => {
|
|
const { name, avatar } = usePrimaryName();
|
|
const connected = account && chain;
|
|
|
|
if (!connected) {
|
|
return <Button onClick={openConnectModal}>Connect Wallet</Button>;
|
|
}
|
|
|
|
if (chain.unsupported) {
|
|
return (
|
|
<Button
|
|
onClick={openChainModal}
|
|
type="button"
|
|
className="bg-red-600 whitespace-nowrap"
|
|
>
|
|
Wrong network
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className="p-1 bg-white rounded-lg shadow justify-start items-center inline-flex gap-1 cursor-pointer hover:scale-105 transition duration-200 focus:outline-none"
|
|
onClick={openAccountModal}
|
|
>
|
|
<div className="text-sky-950 font-semibold hidden md:block pl-1">
|
|
{account.displayBalance}
|
|
</div>
|
|
<div className="px-1.5 py-1 bg-neutral-100 rounded-lg justify-end items-center gap-1.5 flex">
|
|
<img
|
|
alt={name}
|
|
src={avatar || account.ensAvatar || defaultAvatar}
|
|
className="w-6 h-6 rounded-full overflow-hidden"
|
|
/>
|
|
|
|
<div className="text-neutral-900 font-semibold">
|
|
{name || account.ensName || account.displayName}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
Custom.propTypes = {
|
|
account: PropTypes.object,
|
|
chain: PropTypes.object,
|
|
openAccountModal: PropTypes.func,
|
|
openChainModal: PropTypes.func,
|
|
openConnectModal: PropTypes.func,
|
|
};
|
|
|
|
export const ConnectButton = () => {
|
|
return <RainbowBtn.Custom>{Custom}</RainbowBtn.Custom>;
|
|
};
|