Small optimizations (#3053)

* Small optimizations

* Additional tooltip

packages/apps/src/overlays/Base.tsx

@@ -28,7 +28,7 @@ function BaseOverlay ({ children, className = '', icon, type }: Props): React.Re
         <Icon
           className='contentIcon'
           icon={icon}
-          size='large'
+          size='2x'
         />
         <div className='contentItem'>
           {children}

packages/apps/src/overlays/Connecting.tsx

@@ -26,7 +26,7 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
     return (
       <BaseOverlay
         className={className}
-        icon='puzzle'
+        icon='puzzle-piece'
         type='info'
       >
         <div>{t<string>('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>

packages/page-contracts/src/shared/MessageSignature.tsx

@@ -65,9 +65,8 @@ function MessageSignature ({ className, message: { args, mutates, name, returnTy
         <>
           <Icon
             className='ui--MessageSignature-mutates'
-            data-for={`mutates-${name}`}
-            data-tip
             icon='database'
+            tooltip={`mutates-${name}`}
           />
           {withTooltip && (
             <Tooltip

packages/react-components/src/Badge.tsx

@@ -22,13 +22,14 @@ let badgeId = 0;
 
 function Badge ({ className = '', color = 'normal', hover, info, isInline, isSmall, isTooltip, onClick }: Props): React.ReactElement<Props> | null {
   const [trigger] = useState(`badge-hover-${Date.now()}-${badgeId++}`);
+  const extraProps = isTooltip && hover
+    ? { 'data-for': trigger, 'data-tip': true }
+    : {};
 
   return (
     <div
+      {...extraProps}
       className={`ui--Badge ${isInline ? 'isInline' : ''} ${isTooltip ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${color}Color ${className}`}
-      data-for={trigger}
-      data-tip={isTooltip && !!hover}
-      data-tip-disable={!isTooltip}
       onClick={onClick}
     >
       <div className='badge'>

packages/react-components/src/Icon.tsx

@@ -14,8 +14,6 @@ interface Props {
   icon: IconName;
   isSpinning?: boolean;
   onClick?: () => void;
-  onMouseOut?: () => void;
-  onMouseOver?: () => void;
   size?: '1x' | '2x';
   tooltip?: string;
 }
@@ -23,16 +21,17 @@ interface Props {
 // one-time init of FA libraries
 library.add(fas);
 
-function Icon ({ className = '', color = 'normal', icon, isSpinning, onClick, onMouseOut, onMouseOver, size = '1x', tooltip }: Props): React.ReactElement<Props> {
+function Icon ({ className = '', color = 'normal', icon, isSpinning, onClick, size = '1x', tooltip }: Props): React.ReactElement<Props> {
+  const extraProps = tooltip
+    ? { 'data-for': tooltip, 'data-tip': true }
+    : {};
+
   return (
     <FontAwesomeIcon
+      {...extraProps}
       className={`ui--Icon ${color}Color ${onClick ? 'isClickable' : ''} ${className}`}
-      data-for={tooltip}
-      data-tip={!!tooltip}
       icon={icon}
       onClick={onClick}
-      onMouseOut={onMouseOut}
-      onMouseOver={onMouseOver}
       size={size}
       spin={isSpinning}
     />

packages/react-components/src/LinkExternal.tsx

@@ -42,7 +42,7 @@ function genLinks (systemChain: string, { data, hash, type, withShort }: Props):
       return (
         <a
           data-for={trigger}
-          data-tip={true}
+          data-tip
           href={link}
           key={name}
           rel='noopener noreferrer'