Revert "Revert 3fb7d98"

This reverts commit 0683b5b.

source/renderer/app/components/wallet/tokens/WalletToken.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { useState } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, injectIntl } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
@@ -66,6 +66,7 @@ type IsExpanded = boolean;
 
 const WalletToken = observer((props: Props) => {
   const [isExpanded, setIsExpanded] = useState<IsExpanded>(false);
+  const [arrowStyles, setArrowStyles] = useState<string | null>(null);
 
   const toggleIsExpanded = () => {
     setIsExpanded(!isExpanded);
@@ -76,36 +77,26 @@ const WalletToken = observer((props: Props) => {
     props.isFavorite ? styles.isFavorite : null,
   ]);
 
-  const header = () => {
-    const {
-      anyAssetWasHovered,
-      asset,
-      assetSettingsDialogWasOpened,
-      isFavorite,
-      isLoading,
-      onCopyAssetParam,
-      onToggleFavorite,
-    } = props;
-    const { decimals, recommendedDecimals, uniqueId } = asset;
-    const arrowStyles = classNames(styles.arrow, {
-      [styles.isExpanded]: isExpanded,
-    });
+  const {
+    anyAssetWasHovered,
+    asset,
+    assetSettingsDialogWasOpened,
+    intl,
+    isFavorite,
+    isLoading,
+    onAssetSettings,
+    onCopyAssetParam,
+    onOpenAssetSend,
+    onToggleFavorite,
+  } = props;
+
+  const assetHeaderContent = useMemo(() => {
+    const { decimals, recommendedDecimals } = asset;
     const hasWarning =
       typeof recommendedDecimals === 'number' &&
       decimals !== recommendedDecimals;
-    const starIcon = isFavorite ? starFilledIcon : starNotFilledIcon;
     return (
-      <div className={styles.header} onClick={toggleIsExpanded}>
-        <button
-          className={favoriteIconStyles}
-          onClick={(event) => {
-            event.persist();
-            event.stopPropagation();
-            onToggleFavorite({ uniqueId, isFavorite });
-          }}
-        >
-          <SVGInline className={styles.warningIcon} svg={starIcon} />
-        </button>
+      <>
         <Asset
           asset={asset}
           onCopyAssetParam={onCopyAssetParam}
@@ -125,13 +116,50 @@ const WalletToken = observer((props: Props) => {
           className={styles.assetAmount}
           isShort
         />
+      </>
+    );
+  }, [
+    anyAssetWasHovered,
+    asset,
+    assetSettingsDialogWasOpened,
+    isFavorite,
+    isLoading,
+    onCopyAssetParam,
+    onToggleFavorite,
+  ]);
+
+  useEffect(
+    () =>
+      setArrowStyles(
+        classNames(styles.arrow, {
+          [styles.isExpanded]: isExpanded,
+        })
+      ),
+    [isExpanded]
+  );
+
+  const header = useMemo(() => {
+    const { uniqueId } = asset;
+    const starIcon = isFavorite ? starFilledIcon : starNotFilledIcon;
+    return (
+      <div className={styles.header} onClick={toggleIsExpanded}>
+        <button
+          className={favoriteIconStyles}
+          onClick={(event) => {
+            event.persist();
+            event.stopPropagation();
+            onToggleFavorite({ uniqueId, isFavorite });
+          }}
+        >
+          <SVGInline className={styles.warningIcon} svg={starIcon} />
+        </button>
+        {assetHeaderContent}
         <SVGInline svg={arrow} className={arrowStyles} />
       </div>
     );
-  };
+  }, [asset, isExpanded, arrowStyles]);
 
-  const footer = () => {
-    const { asset, isLoading, intl } = props;
+  const footer = useMemo(() => {
     return (
       <div className={styles.footer}>
         <dl>
@@ -147,13 +175,12 @@ const WalletToken = observer((props: Props) => {
             />
           </dd>
         </dl>
-        {buttons()}
+        {buttons}
       </div>
     );
-  };
+  }, [asset, isLoading, intl]);
 
-  const buttons = () => {
-    const { asset, onOpenAssetSend, onAssetSettings, intl } = props;
+  const buttons = useMemo(() => {
     const { recommendedDecimals, decimals } = asset;
     const hasWarning =
       typeof recommendedDecimals === 'number' &&
@@ -206,24 +233,24 @@ const WalletToken = observer((props: Props) => {
         />
       </div>
     );
-  };
+  }, [asset, onOpenAssetSend, onAssetSettings, intl]);
 
-  const { asset, onCopyAssetParam, isInsertingAsset, isRemovingAsset } = props;
+  const { isInsertingAsset, isRemovingAsset } = props;
   const componentStyles = classNames(styles.component, {
     [styles.isExpanded]: isExpanded,
     [styles.inserting]: isInsertingAsset,
     [styles.removing]: isRemovingAsset,
   });
   return (
     <div className={componentStyles}>
-      {header()}
+      {header}
       <div className={styles.content}>
         <AssetContent
           asset={asset}
           onCopyAssetParam={onCopyAssetParam}
           highlightFingerprint={false}
         />
-        {footer()}
+        {footer}
       </div>
     </div>
   );