ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(IconButton): improves code quality and fixes a console error re: incorrect data- attribute syntax (#4788)

Browse Source
This commit is contained in:
Jordan Frankfurt 2022-10-04 15:37:57 -05:00 committed by GitHub
parent a73e814167
commit 446eb9f9a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/WalletDropdown/AuthenticatedHeader.tsx
View File

@ -149,14 +149,15 @@ const AuthenticatedHeader = () => {
</FlexContainer> </FlexContainer>
</StatusWrapper> </StatusWrapper>
<IconContainer> <IconContainer>
<IconButton onClick={copy} Icon={Copy} text={isCopied ? <Trans>Copied!</Trans> : <Trans>Copy</Trans>} /> <IconButton onClick={copy} Icon={Copy}>
<IconButton href={`${explorer}address/${account}`} Icon={ExternalLink} text={<Trans>Explore</Trans>} /> {isCopied ? <Trans>Copied!</Trans> : <Trans>Copy</Trans>}
<IconButton </IconButton>
dataTestId="wallet-disconnect" <IconButton href={`${explorer}address/${account}`} target="_blank" Icon={ExternalLink}>
onClick={disconnect} <Trans>Explore</Trans>
Icon={Power} </IconButton>
text={<Trans>Disconnect</Trans>} <IconButton data-testid="wallet-disconnect" onClick={disconnect} Icon={Power}>
/> <Trans>Disconnect</Trans>
</IconButton>
</IconContainer> </IconContainer>
</HeaderWrapper> </HeaderWrapper>
<Column> <Column>

35
src/components/WalletDropdown/IconButton.tsx
View File

@ -58,31 +58,28 @@ const IconWrapper = styled.span`
width: 16px; width: 16px;
height: 16px; height: 16px;
` `
interface BaseProps {
interface IconButtonProps {
text: React.ReactNode
Icon: Icon Icon: Icon
onClick?: () => void }
href?: string interface IconLinkProps extends React.ComponentPropsWithoutRef<'a'>, BaseProps {}
dataTestId?: string interface IconButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseProps {}
const IconBlock = (props: React.ComponentPropsWithoutRef<'a' | 'button'>) => {
if ('href' in props) {
return <IconBlockLink {...props} />
}
// ignoring 'button' 'type' conflict between React and styled-components
// @ts-ignore
return <IconBlockButton {...props} />
} }
const IconButton = ({ Icon, onClick, text, href, dataTestId }: IconButtonProps) => { const IconButton = ({ Icon, children, ...rest }: IconButtonProps | IconLinkProps) => (
return href ? ( <IconBlock {...rest}>
<IconBlockLink data-testId={dataTestId} href={href} target="_blank">
<IconWrapper> <IconWrapper>
<Icon strokeWidth={1.5} size={16} /> <Icon strokeWidth={1.5} size={16} />
<IconHoverText>{text}</IconHoverText> <IconHoverText>{children}</IconHoverText>
</IconWrapper> </IconWrapper>
</IconBlockLink> </IconBlock>
) : (
<IconBlockButton data-testId={dataTestId} onClick={onClick}>
<IconWrapper>
<Icon strokeWidth={1.5} size={16} />
<IconHoverText>{text}</IconHoverText>
</IconWrapper>
</IconBlockButton>
) )
}
export default IconButton export default IconButton