components: add ConnectWalletButton, AddressView #10
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
caffeinum
changed the title
| {!address && ( | ||
| renderButton | ||
| ? renderButton({ text: "Connect Wallet", onClick: () => setOpen(true) }) | ||
| : <button onClick={() => setOpen(true)}>Connect Wallet</button> |
There was a problem hiding this comment.
Should use <Button variant="contained" /> from @mui by default since it's already dependent on this UI library
| * @param isShort - If true, the address is displayed in short format: 0xff...abcd | ||
| * @returns {JSX.Element} | ||
| */ | ||
| export const AddressView = ({ isShort = true }: Props): JSX.Element => { |
There was a problem hiding this comment.
How to style <AddressView />? Consider wrapping in @mui <Box /> and passing styling props: sx, style, className
| : <button onClick={() => setOpen(true)}>Connect Wallet</button> | ||
| )} | ||
|
|
||
| {showDisconnect && address && ( |
There was a problem hiding this comment.
Consider moving disconnect logic to a <ProfileView /> component
| navigator.clipboard.writeText(address) | ||
|
|
||
| // TODO: show a snackbar | ||
| window.alert("Address copied to clipboard") |
There was a problem hiding this comment.
|
I'd still prefer having a simple |
| <AddressView /> | ||
| </Typography>} | ||
|
|
||
| {showDisconnect && address && (renderButton({ |
There was a problem hiding this comment.
Popup might also be better from a UX perspective because users can accidentally log out if this button is so visible. I heard stories of 10x difference in log out rates because of unaware users who just click on things. Can be added in the future release
Added connect wallet component that keeps track of the modal state open/closed. Use like this: