Add props to Icon component

- "className" so that Icon can be directly styled
- mouse*, focus & click events because "Tooltip" requests to implement those from children

src/components/Icon/index.js

@@ -28,9 +28,10 @@ const SvgWrapper = styled.svg`
 const Path = styled.path``;
 
 const Icon = ({
-    icon, size = 32, color = 'black', isActive, canAnimate,
+    className, icon, size = 32, color = 'black', isActive, canAnimate, onMouseEnter, onMouseLeave, onFocus, onClick,
 }) => (
     <SvgWrapper
+        className={className}
         canAnimate={canAnimate}
         isActive={isActive}
         style={{
@@ -40,6 +41,10 @@ const Icon = ({
         width={`${size}`}
         height={`${size}`}
         viewBox="0 0 1024 1024"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onFocus={onFocus}
+        onClick={onClick}
     >
         {icon.map(path => (
             <Path
@@ -53,11 +58,16 @@ const Icon = ({
 );
 
 Icon.propTypes = {
+    className: PropTypes.string,
     canAnimate: PropTypes.bool,
     icon: PropTypes.arrayOf(PropTypes.string).isRequired,
     size: PropTypes.number,
     isActive: PropTypes.bool,
     color: PropTypes.string,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    onFocus: PropTypes.func,
+    onClick: PropTypes.func,
 };
 
 

src/views/Wallet/views/AccountSummary/index.js

@@ -9,7 +9,6 @@ import Tooltip from 'rc-tooltip';
 
 import CoinLogo from 'components/CoinLogo';
 import * as stateUtils from 'reducers/utils';
-import type { NetworkToken } from 'reducers/LocalStorageReducer';
 import SelectedAccount from 'views/Wallet/components/SelectedAccount';
 import Link from 'components/Link';
 import SummaryDetails from './components/Details';
@@ -37,6 +36,14 @@ const StyledCoinLogo = styled(CoinLogo)`
     margin-right: 10px;
 `;
 
+const StyledIcon = styled(Icon)`
+    position: relative;
+    top: -1px;
+    &:hover {
+        cursor: pointer;
+    }
+`;
+
 const Summary = (props: Props) => {
     const device = props.wallet.selectedDevice;
     const {
@@ -58,9 +65,8 @@ const Summary = (props: Props) => {
 
     const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
     const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
-
     return (
-        <div>
+        <SelectedAccount {...props}>
             <AccountHeading network={account.networks}>
                 <AccountName>
                     <StyledCoinLogo coinNetwork={account.network} />
@@ -92,7 +98,11 @@ const Summary = (props: Props) => {
                     overlay={tokensTooltip}
                     placement="top"
                 >
-                    <span className="what-is-it" />
+                    <StyledIcon
+                        icon={ICONS.HELP}
+                        color={colors.TEXT_SECONDARY}
+                        size={24}
+                    />
                 </Tooltip>
             </StyledH2>
             {/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
@@ -134,13 +144,8 @@ const Summary = (props: Props) => {
                 tokens={tokens}
                 removeToken={props.removeToken}
             />
-
+        </SelectedAccount>
-        </div>
     );
 };
 
-export default (props: Props) => (
+export default Summary;
-    <SelectedAccount {...props}>
-        <Summary {...props} />
-    </SelectedAccount>
-);