@sky-mavis/tanto-widget
Version:
Tanto Widget
66 lines • 2.18 kB
JavaScript
import {jsx,jsxs}from'@emotion/react/jsx-runtime';import {useAccount}from'wagmi';import {SmoothWidth}from'./components/animated-containers/SmoothWidth.mjs';import {TransitionedView}from'./components/animated-containers/TransitionedView.mjs';import {Avatar}from'./components/avatar/Avatar.mjs';import {Box}from'./components/box/Box.mjs';import {Button}from'./components/button/Button.mjs';import {CSSReset}from'./components/css-reset/CSSReset.mjs';import {useConnectCallback}from'./hooks/useConnectCallback.mjs';import {useRnsName}from'./hooks/useRnsName.mjs';import {useTantoConfig}from'./hooks/useTantoConfig.mjs';import {useWidgetModal}from'./hooks/useWidgetModal.mjs';import {truncate}from'./utils/index.mjs';function TantoConnectButton({
onConnect,
onDisconnect,
children,
...rest
}) {
const {
disableProfile
} = useTantoConfig();
const {
address,
chainId,
isConnected
} = useAccount();
const {
open,
show,
hide
} = useWidgetModal();
const {
data: rns,
isSuccess: isRnsSuccess
} = useRnsName({
address
});
const normalizedAddress = address?.toLowerCase();
useConnectCallback({
onConnect,
onDisconnect
});
return jsx(CSSReset, {
...rest,
children: typeof children === 'function' ? jsx(SmoothWidth, {
children: children({
isConnected,
chainId,
rns,
address: normalizedAddress,
modalOpen: open,
showModal: show,
hideModal: hide
})
}) : jsx(Button, {
intent: isConnected ? 'secondary' : 'primary',
onClick: show,
children: jsx(SmoothWidth, {
css: {
minWidth: 120
},
children: jsx(TransitionedView, {
viewKey: isConnected && isRnsSuccess,
children: isConnected && !disableProfile ? jsxs(Box, {
align: "center",
gap: 8,
children: [jsx(Avatar, {
seed: normalizedAddress,
size: "S"
}), jsx("p", {
children: rns ? rns : truncate(normalizedAddress)
})]
}) : 'Connect Wallet'
})
})
})
});
}export{TantoConnectButton};