clean-up code (#1672)

package.json

@@ -202,7 +202,6 @@
     "react-style-proptype": "^3.2.2",
     "readable-stream": "^1.0.33",
     "reanimated-bottom-sheet": "^1.0.0-alpha.18",
-    "recompact": "^3.4.0",
     "recyclerlistview": "3.0.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",

src/App.js

@@ -29,7 +29,6 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { enableScreens } from 'react-native-screens';
 import VersionNumber from 'react-native-version-number';
 import { connect, Provider } from 'react-redux';
-import { compose, withProps } from 'recompact';
 import PortalConsumer from './components/PortalConsumer';
 import { FlexItem } from './components/layout';
 import { OfflineToast } from './components/toasts';
@@ -309,16 +308,16 @@ class App extends Component {
   );
 }
 
-const AppWithRedux = compose(
-  withProps({ store }),
-  connect(({ appState: { walletReady } }) => ({ walletReady }), {
+const AppWithRedux = connect(
+  ({ appState: { walletReady } }) => ({ walletReady }),
+  {
     requestsForTopic,
-  })
+  }
 )(App);
 
 const AppWithCodePush = CodePush({
   checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
   installMode: CodePush.InstallMode.ON_NEXT_RESUME,
-})(AppWithRedux);
+})(() => <AppWithRedux store={store} />);
 
 AppRegistry.registerComponent('Rainbow', () => AppWithCodePush);

src/components/activity-list/ActivityList.js

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { SectionList } from 'react-native';
-import { mapProps } from 'recompact';
 import styled from 'styled-components';
 import { useTheme } from '../../context/ThemeContext';
 import networkTypes from '../../helpers/networkTypes';
@@ -73,8 +72,8 @@ const ActivityList = ({
   hasPendingTransaction,
   header,
   nativeCurrency,
-  pendingTransactionsCount,
   sections,
+  requests,
   transactionsCount,
   addCashAvailable,
   isEmpty,
@@ -85,6 +84,15 @@ const ActivityList = ({
   nextPage,
   remainingItemsLabel,
 }) => {
+  const pendingTransactionsCount = useMemo(() => {
+    let currentPendingTransactionsCount = 0;
+    const pendingTxSection = sections[requests?.length ? 1 : 0];
+
+    if (pendingTxSection && pendingTxSection.title === 'Pending') {
+      currentPendingTransactionsCount = pendingTxSection.data.length;
+    }
+    return currentPendingTransactionsCount;
+  }, [sections, requests]);
   return network === networkTypes.mainnet || sections.length ? (
     recyclerListView ? (
       <RecyclerActivityList
@@ -133,18 +141,4 @@ const ActivityList = ({
   );
 };
 
-export default mapProps(({ nativeCurrency, requests, sections, ...props }) => {
-  let pendingTransactionsCount = 0;
-  const pendingTxSection = sections[requests?.length ? 1 : 0];
-
-  if (pendingTxSection && pendingTxSection.title === 'Pending') {
-    pendingTransactionsCount = pendingTxSection.data.length;
-  }
-
-  return {
-    ...props,
-    nativeCurrency,
-    pendingTransactionsCount,
-    sections,
-  };
-})(ActivityList);
+export default ActivityList;

src/components/add-cash/AddCashStatus.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React, { Fragment, useEffect, useMemo, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { Transition, Transitioning } from 'react-native-reanimated';
-import { withProps } from 'recompact';
+import styled from 'styled-components';
 import jumpingDaiAnimation from '../../assets/lottie/jumping-dai.json';
 import jumpingEthAnimation from '../../assets/lottie/jumping-eth.json';
 import TransactionStatusTypes from '../../helpers/transactionStatusTypes';
@@ -24,12 +24,12 @@ import SupportButton from './SupportButton';
 import Routes from '@rainbow-me/routes';
 import { position } from '@rainbow-me/styles';
 
-const StatusMessageText = withProps({
+const StatusMessageText = styled(Text).attrs({
   align: 'center',
   lineHeight: 30,
   size: 23,
   weight: 'bold',
-})(Text);
+})``;
 
 const sx = StyleSheet.create({
   container: {

src/components/asset-list/AssetListItemSkeleton.js

@@ -9,7 +9,6 @@ import Animated, {
   timing,
   Value,
 } from 'react-native-reanimated';
-import { withProps } from 'recompact';
 import styled from 'styled-components';
 import { withThemeContext } from '../../context/ThemeContext';
 import { deviceUtils } from '../../utils';
@@ -35,7 +34,7 @@ const FakeAvatar = styled.View`
   border-radius: 20;
 `;
 
-const FakeRow = withProps({
+const FakeRow = styled(Row).attrs({
   align: 'flex-end',
   flex: 0,
   height: 10,

src/components/coin-row/CollectiblesSendRow.js

@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
-import { compose, onlyUpdateForKeys, shouldUpdate, withProps } from 'recompact';
+import React, { Fragment, useMemo } from 'react';
 import { css } from 'styled-components';
-import { useTheme, withThemeContext } from '../../context/ThemeContext';
+import { useTheme } from '../../context/ThemeContext';
 import { buildAssetUniqueIdentifier } from '../../helpers/assets';
-import { deviceUtils } from '../../utils';
+import { deviceUtils, magicMemo } from '../../utils';
 import Divider from '../Divider';
 import { ButtonPressAnimation } from '../animations';
 import { RequestVendorLogoIcon } from '../coin-icon';
@@ -44,23 +43,19 @@ const TopRow = ({ id, name, selected }) => (
   </CoinName>
 );
 
-const enhanceUniqueTokenCoinIcon = onlyUpdateForKeys([
-  'background',
-  'image_thumbnail_url',
-]);
-
-const UniqueTokenCoinIcon = enhanceUniqueTokenCoinIcon(
-  withThemeContext(
-    ({
-      asset_contract: { name },
-      background,
-      image_thumbnail_url,
-      shouldPrioritizeImageLoading,
-      ...props
-    }) => (
+const UniqueTokenCoinIcon = magicMemo(
+  ({
+    asset_contract: { name },
+    background,
+    image_thumbnail_url,
+    shouldPrioritizeImageLoading,
+    ...props
+  }) => {
+    const { colors } = useTheme();
+    return (
       <Centered>
         <RequestVendorLogoIcon
-          backgroundColor={background || props.colors.lightestGrey}
+          backgroundColor={background || colors.lightestGrey}
           borderRadius={8}
           dappName={name}
           imageUrl={image_thumbnail_url}
@@ -69,8 +64,9 @@ const UniqueTokenCoinIcon = enhanceUniqueTokenCoinIcon(
         />
         <InnerBorder opacity={0.04} radius={8} zIndex={2} />
       </Centered>
-    )
-  )
+    );
+  },
+  ['background', 'image_thumbnail_url']
 );
 
 UniqueTokenCoinIcon.propTypes = {
@@ -80,29 +76,28 @@ UniqueTokenCoinIcon.propTypes = {
   shouldPrioritizeImageLoading: PropTypes.bool,
 };
 
-const buildSubtitleForUniqueToken = ({ item }) => ({
-  subtitle: item.name
-    ? `${item.asset_contract.name} #${item.id}`
-    : item.asset_contract.name,
-});
+const arePropsEqual = (props, nextProps) =>
+  buildAssetUniqueIdentifier(props.item) !==
+  buildAssetUniqueIdentifier(nextProps.item);
 
-const enhance = compose(
-  withProps(buildSubtitleForUniqueToken),
-  shouldUpdate((props, nextProps) => {
-    const itemIdentifier = buildAssetUniqueIdentifier(props.item);
-    const nextItemIdentifier = buildAssetUniqueIdentifier(nextProps.item);
+// eslint-disable-next-line react/display-name
+const CollectiblesSendRow = React.memo(
+  ({ item, isFirstRow, onPress, selected, testID, ...props }) => {
+    const { colors } = useTheme();
+    const subtitle = useMemo(
+      () =>
+        item.name
+          ? `${item.asset_contract.name} #${item.id}`
+          : item.asset_contract.name,
 
-    return itemIdentifier !== nextItemIdentifier;
-  })
-);
+      [item.asset_contract.name, item.id, item.name]
+    );
 
-const CollectiblesSendRow = enhance(
-  withThemeContext(
-    ({ item, isFirstRow, onPress, selected, subtitle, testID, ...props }) => (
+    return (
       <Fragment>
         {isFirstRow && (
           <Centered height={dividerHeight}>
-            <Divider color={props.colors.rowDividerLight} />
+            <Divider color={colors.rowDividerLight} />
           </Centered>
         )}
         <ButtonPressAnimation onPress={onPress} scaleTo={0.98}>
@@ -119,8 +114,9 @@ const CollectiblesSendRow = enhance(
           />
         </ButtonPressAnimation>
       </Fragment>
-    )
-  )
+    );
+  },
+  arePropsEqual
 );
 
 CollectiblesSendRow.propTypes = {

src/components/copy-tooltip/CopyTooltip.ios.js

@@ -1,53 +1,24 @@
 import Clipboard from '@react-native-community/clipboard';
-import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import ToolTip from 'react-native-tooltip';
-import { compose, onlyUpdateForKeys } from 'recompact';
-import { withThemeContext } from '../../context/ThemeContext';
-import { withNavigation } from '../../navigation/Navigation';
 
-class CopyTooltip extends PureComponent {
-  static propTypes = {
-    activeOpacity: PropTypes.number,
-    navigation: PropTypes.object,
-    setSafeTimeout: PropTypes.func,
-    textToCopy: PropTypes.string,
-    tooltipText: PropTypes.string,
-  };
-
-  static defaultProps = {
-    activeOpacity: 0.666,
-    tooltipText: 'Copy',
-  };
-
-  componentWillUnmount = () => this.handleHideTooltip();
-
-  tooltip = null;
-
-  handleCopy = () => Clipboard.setString(this.props.textToCopy);
-
-  handleHideTooltip = () => this.tooltip.hideMenu();
-
-  handlePress = () => this.tooltip.showMenu();
-
-  handleRef = ref => {
-    this.tooltip = ref;
-  };
-
-  render = () => (
+function CopyTooltip({ textToCopy, activeOpacity, tooltipText, ...props }) {
+  const handleCopy = useCallback(() => Clipboard.setString(textToCopy), [
+    textToCopy,
+  ]);
+  const { colors } = useTheme();
+  const ref = useRef();
+  useEffect(() => ref.current.hideMenu, []);
+  return (
     <ToolTip
-      {...this.props}
-      actions={[{ onPress: this.handleCopy, text: this.props.tooltipText }]}
-      activeOpacity={this.props.activeOpacity}
-      onPress={this.handlePress}
-      ref={this.handleRef}
-      underlayColor={this.props.colors.transparent}
+      {...props}
+      actions={[{ onPress: handleCopy, text: tooltipText }]}
+      activeOpacity={activeOpacity}
+      onPress={() => ref.current.showMenu()}
+      ref={ref}
+      underlayColor={colors.transparent}
     />
   );
 }
 
-export default compose(
-  withNavigation,
-  withThemeContext,
-  onlyUpdateForKeys(['textToCopy', 'tooltipText'])
-)(CopyTooltip);
+export default CopyTooltip;