fix(IconButton): improves code quality and fixes a console error re: incorrect...

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

src/components/WalletDropdown/AuthenticatedHeader.tsx

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

src/components/WalletDropdown/IconButton.tsx

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