From cb0aa838f8ef7d865a1858944ae89d7bbf36f6d0 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 25 Jun 2020 22:19:10 +0200
Subject: [PATCH] Small optimizations (#3053)

* Small optimizations

* Additional tooltip
---
 packages/apps/src/overlays/Base.tsx                 |  2 +-
 packages/apps/src/overlays/Connecting.tsx           |  2 +-
 .../page-contracts/src/shared/MessageSignature.tsx  |  3 +--
 packages/react-components/src/Badge.tsx             |  7 ++++---
 packages/react-components/src/Icon.tsx              | 13 ++++++-------
 packages/react-components/src/LinkExternal.tsx      |  2 +-
 6 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index 13a90b2f6f..d1351b6131 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/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}
diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx
index c377b237cb..3bcd1a1b81 100644
--- a/packages/apps/src/overlays/Connecting.tsx
+++ b/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>
diff --git a/packages/page-contracts/src/shared/MessageSignature.tsx b/packages/page-contracts/src/shared/MessageSignature.tsx
index fd0f7e7256..e863784085 100644
--- a/packages/page-contracts/src/shared/MessageSignature.tsx
+++ b/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
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index ca5b2fbd37..c48602819b 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/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'>
diff --git a/packages/react-components/src/Icon.tsx b/packages/react-components/src/Icon.tsx
index 26e09caa7c..7ab08dd63f 100644
--- a/packages/react-components/src/Icon.tsx
+++ b/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}
     />
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index 33e0a94a62..3807526cbd 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/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'