Revert 3fb7d98

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

@@ -1,5 +1,5 @@
 // @flow
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, injectIntl } from 'react-intl';
 import { Button } from 'react-polymorph/lib/components/Button';
@@ -66,7 +66,6 @@ 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);
@@ -77,26 +76,36 @@ const WalletToken = observer((props: Props) => {
     props.isFavorite ? styles.isFavorite : null,
   ]);
 
-  const {
-    anyAssetWasHovered,
-    asset,
-    assetSettingsDialogWasOpened,
-    intl,
-    isFavorite,
-    isLoading,
-    onAssetSettings,
-    onCopyAssetParam,
-    onOpenAssetSend,
-    onToggleFavorite,
-  } = props;
-
-  const assetHeaderContent = useMemo(() => {
-    const { decimals, recommendedDecimals } = asset;
+  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 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}
@@ -116,50 +125,13 @@ 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 = useMemo(() => {
+  const footer = () => {
+    const { asset, isLoading, intl } = props;
     return (
       <div className={styles.footer}>
         <dl>
@@ -175,12 +147,13 @@ const WalletToken = observer((props: Props) => {
             />
           </dd>
         </dl>
-        {buttons}
+        {buttons()}
       </div>
     );
-  }, [asset, isLoading, intl]);
+  };
 
-  const buttons = useMemo(() => {
+  const buttons = () => {
+    const { asset, onOpenAssetSend, onAssetSettings, intl } = props;
     const { recommendedDecimals, decimals } = asset;
     const hasWarning =
       typeof recommendedDecimals === 'number' &&
@@ -233,24 +206,24 @@ const WalletToken = observer((props: Props) => {
         />
       </div>
     );
-  }, [asset, onOpenAssetSend, onAssetSettings, intl]);
+  };
 
-  const { isInsertingAsset, isRemovingAsset } = props;
+  const { asset, onCopyAssetParam, 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>
   );