diff --git a/src/App.js b/src/App.js
index 4639ecf7e89..244281a037b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,7 +47,6 @@ import {
runWalletBackupStatusChecks,
} from './handlers/walletReadyEvents';
import RainbowContextWrapper from './helpers/RainbowContext';
-import { withAccountSettings, withAppState } from './hoc';
import { registerTokenRefreshListener, saveFCMToken } from './model/firebase';
import * as keychain from './model/keychain';
import { loadAddress } from './model/wallet';
@@ -308,9 +307,7 @@ class App extends Component {
const AppWithRedux = compose(
withProps({ store }),
- withAccountSettings,
- withAppState,
- connect(null, {
+ connect(({ appState: { walletReady } }) => ({ walletReady }), {
requestsForTopic,
})
)(App);
diff --git a/src/components/asset-list/RecyclerAssetList.js b/src/components/asset-list/RecyclerAssetList.js
index 7401e2eef91..b4730b90731 100644
--- a/src/components/asset-list/RecyclerAssetList.js
+++ b/src/components/asset-list/RecyclerAssetList.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import React, { Component, Fragment } from 'react';
import { LayoutAnimation, RefreshControl, View } from 'react-native';
import { connect } from 'react-redux';
-import { compose } from 'recompact';
import {
BaseItemAnimator,
DataProvider,
@@ -11,14 +10,6 @@ import {
RecyclerListView,
} from 'recyclerlistview';
import StickyContainer from 'recyclerlistview/dist/reactnative/core/StickyContainer';
-import {
- withAccountSettings,
- withCoinListEdited,
- withOpenBalances,
- withOpenFamilyTabs,
- withOpenInvestmentCards,
- withOpenSavings,
-} from '../../hoc';
import {
deviceUtils,
isNewValueForPath,
@@ -832,15 +823,19 @@ class RecyclerAssetList extends Component {
}
}
-export default compose(
- withCoinListEdited,
- withOpenFamilyTabs,
- withOpenInvestmentCards,
- withOpenBalances,
- withOpenSavings,
- withAccountSettings,
- connect(({ openSmallBalances, openSavings }) => ({
+export default connect(
+ ({
+ editOptions: { isCoinListEdited },
+ openSavings,
+ openSmallBalances,
+ openStateSettings: { openFamilyTabs, openInvestmentCards },
+ settings: { nativeCurrency },
+ }) => ({
+ isCoinListEdited,
+ nativeCurrency,
+ openFamilyTabs,
+ openInvestmentCards,
openSavings,
openSmallBalances,
- }))
+ })
)(RecyclerAssetList);
diff --git a/src/components/coin-row/BalanceCoinRow.js b/src/components/coin-row/BalanceCoinRow.js
index 6485a712af4..a644de13000 100644
--- a/src/components/coin-row/BalanceCoinRow.js
+++ b/src/components/coin-row/BalanceCoinRow.js
@@ -2,13 +2,8 @@ import { get } from 'lodash';
import React, { Fragment, useCallback, useEffect, useState } from 'react';
import Animated from 'react-native-reanimated';
import { View } from 'react-primitives';
-import { compose } from 'recompact';
+import { connect } from 'react-redux';
import styled from 'styled-components/primitives';
-import {
- withCoinRecentlyPinned,
- withEditOptions,
- withOpenBalances,
-} from '../../hoc';
import { useCoinListEditedValue } from '../../hooks/useCoinListEdited';
import { ButtonPressAnimation } from '../animations';
import { initialChartExpandedStateSheetHeight } from '../expanded-state/ChartExpandedState';
@@ -20,6 +15,10 @@ import CoinName from './CoinName';
import CoinRow from './CoinRow';
import { buildAssetUniqueIdentifier } from '@rainbow-me/helpers/assets';
import { useCoinListEdited } from '@rainbow-me/hooks';
+import {
+ pushSelectedCoin,
+ removeSelectedCoin,
+} from '@rainbow-me/redux/editOptions';
import { colors } from '@rainbow-me/styles';
import { isNewValueForObjectPaths, isNewValueForPath } from '@rainbow-me/utils';
@@ -214,8 +213,13 @@ const arePropsEqual = (prev, next) => {
const MemoizedBalanceCoinRow = React.memo(BalanceCoinRow, arePropsEqual);
-export default compose(
- withOpenBalances,
- withEditOptions,
- withCoinRecentlyPinned
+export default connect(
+ ({ editOptions: { recentlyPinnedCount }, openSmallBalances }) => ({
+ openSmallBalances,
+ recentlyPinnedCount,
+ }),
+ {
+ pushSelectedCoin,
+ removeSelectedCoin,
+ }
)(MemoizedBalanceCoinRow);
diff --git a/src/components/settings-menu/CurrencySection.js b/src/components/settings-menu/CurrencySection.js
index 1f207a57eb2..e6e30552631 100644
--- a/src/components/settings-menu/CurrencySection.js
+++ b/src/components/settings-menu/CurrencySection.js
@@ -1,12 +1,10 @@
import analytics from '@segment/analytics-react-native';
import { isNil } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { compose, onlyUpdateForKeys, withHandlers } from 'recompact';
-import { withAccountSettings } from '../../hoc';
+import React, { useCallback } from 'react';
import { CoinIcon } from '../coin-icon';
import { RadioList, RadioListItem } from '../radio-list';
import { Emoji } from '../text';
+import { useAccountSettings } from '@rainbow-me/hooks';
import { supportedNativeCurrencies } from '@rainbow-me/references';
const currencyListItems = Object.values(supportedNativeCurrencies).map(
@@ -34,35 +32,27 @@ const CurrencyListItem = ({ currency, emojiName, label, ...item }) => (
/>
);
-CurrencyListItem.propTypes = {
- currency: PropTypes.string,
- emojiName: PropTypes.string,
- label: PropTypes.string,
-};
-
-const CurrencySection = ({ nativeCurrency, onSelectCurrency }) => (
-
-);
+const CurrencySection = () => {
+ const { nativeCurrency, settingsChangeNativeCurrency } = useAccountSettings();
-CurrencySection.propTypes = {
- nativeCurrency: PropTypes.oneOf(Object.keys(supportedNativeCurrencies)),
- onSelectCurrency: PropTypes.func.isRequired,
-};
-
-export default compose(
- withAccountSettings,
- withHandlers({
- onSelectCurrency: ({ settingsChangeNativeCurrency }) => currency => {
+ const onSelectCurrency = useCallback(
+ currency => {
settingsChangeNativeCurrency(currency);
analytics.track('Changed native currency', { currency });
},
- }),
- onlyUpdateForKeys(['nativeCurrency'])
-)(CurrencySection);
+ [settingsChangeNativeCurrency]
+ );
+
+ return (
+
+ );
+};
+
+export default CurrencySection;
diff --git a/src/components/settings-menu/LanguageSection.js b/src/components/settings-menu/LanguageSection.js
index 7ab191bc9a2..542a1d888ca 100644
--- a/src/components/settings-menu/LanguageSection.js
+++ b/src/components/settings-menu/LanguageSection.js
@@ -1,11 +1,9 @@
import analytics from '@segment/analytics-react-native';
import { get, keys, pickBy } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { compose, onlyUpdateForKeys, withHandlers } from 'recompact';
-import { withAccountSettings } from '../../hoc';
+import React, { useCallback } from 'react';
import { resources, supportedLanguages } from '../../languages';
import { RadioList, RadioListItem } from '../radio-list';
+import { useAccountSettings } from '@rainbow-me/hooks';
// Only show languages that have 'wallet' translations available.
const hasWalletTranslations = language => get(language, 'translation.wallet');
@@ -24,29 +22,27 @@ const renderLanguageListItem = ({ code, language, ...item }) => (
);
-const LanguageSection = ({ language, onSelectLanguage }) => (
-
-);
-
-LanguageSection.propTypes = {
- language: PropTypes.string,
- onSelectLanguage: PropTypes.func.isRequired,
-};
+const LanguageSection = () => {
+ const { language, settingsChangeLanguage } = useAccountSettings();
-export default compose(
- withAccountSettings,
- withHandlers({
- onSelectLanguage: ({ settingsChangeLanguage }) => language => {
+ const onSelectLanguage = useCallback(
+ language => {
settingsChangeLanguage(language);
analytics.track('Changed language', { language });
},
- }),
- onlyUpdateForKeys(['language'])
-)(LanguageSection);
+ [settingsChangeLanguage]
+ );
+
+ return (
+
+ );
+};
+
+export default LanguageSection;
diff --git a/src/hoc/assetSelectors.js b/src/helpers/assetSelectors.js
similarity index 100%
rename from src/hoc/assetSelectors.js
rename to src/helpers/assetSelectors.js
diff --git a/src/hoc/uniswapLiquidityTokenInfoSelector.js b/src/helpers/uniswapLiquidityTokenInfoSelector.js
similarity index 100%
rename from src/hoc/uniswapLiquidityTokenInfoSelector.js
rename to src/helpers/uniswapLiquidityTokenInfoSelector.js
diff --git a/src/hoc/index.js b/src/hoc/index.js
deleted file mode 100644
index 9b681e4d8fe..00000000000
--- a/src/hoc/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as withAccountSettings } from './withAccountSettings';
-export { default as withAppState } from './withAppState';
-export { default as withCoinListEdited } from './withCoinListEdited';
-export { default as withCoinRecentlyPinned } from './withCoinRecentlyPinned';
-export { default as withEditOptions } from './withEditOptions';
-export { default as withOpenBalances } from './withOpenBalances';
-export { default as withOpenFamilyTabs } from './withOpenFamilyTabs';
-export { default as withOpenInvestmentCards } from './withOpenInvestmentCards';
-export { default as withOpenSavings } from './withOpenSavings';
diff --git a/src/hoc/withAccountSettings.js b/src/hoc/withAccountSettings.js
deleted file mode 100644
index 6e58be54a56..00000000000
--- a/src/hoc/withAccountSettings.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import lang from 'i18n-js';
-import { connect } from 'react-redux';
-import { compose, withProps } from 'recompact';
-import { createSelector } from 'reselect';
-import {
- settingsChangeLanguage,
- settingsChangeNativeCurrency,
- settingsUpdateNetwork,
-} from '@rainbow-me/redux/settings';
-import { supportedNativeCurrencies } from '@rainbow-me/references';
-
-const mapStateToProps = ({
- settings: {
- accountAddress,
- accountColor,
- accountName,
- chainId,
- language,
- nativeCurrency,
- network,
- },
-}) => ({
- accountAddress,
- accountColor,
- accountName,
- chainId,
- language,
- nativeCurrency,
- network,
-});
-
-const languageSelector = state => state.language;
-const nativeCurrencySelector = state => state.nativeCurrency;
-
-const withLanguage = language => {
- if (language !== lang.locale) {
- lang.locale = language;
- }
-
- return { language };
-};
-
-const withNativeCurrencySymbol = nativeCurrency => ({
- nativeCurrencySymbol: supportedNativeCurrencies[nativeCurrency].symbol,
-});
-
-const withLanguageSelector = createSelector([languageSelector], withLanguage);
-
-const withNativeCurrencySelector = createSelector(
- [nativeCurrencySelector],
- withNativeCurrencySymbol
-);
-
-export default Component =>
- compose(
- connect(mapStateToProps, {
- settingsChangeLanguage,
- settingsChangeNativeCurrency,
- settingsUpdateNetwork,
- }),
- withProps(withLanguageSelector),
- withProps(withNativeCurrencySelector)
- )(Component);
diff --git a/src/hoc/withAppState.js b/src/hoc/withAppState.js
deleted file mode 100644
index ae3e6df290b..00000000000
--- a/src/hoc/withAppState.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { connect } from 'react-redux';
-
-const mapStateToProps = ({ appState: { walletReady } }) => ({
- walletReady,
-});
-
-export default Component => connect(mapStateToProps)(Component);
diff --git a/src/hoc/withCoinListEdited.js b/src/hoc/withCoinListEdited.js
deleted file mode 100644
index e7a9c72b8ee..00000000000
--- a/src/hoc/withCoinListEdited.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { connect } from 'react-redux';
-
-const mapStateToProps = ({ editOptions: { isCoinListEdited } }) => ({
- isCoinListEdited,
-});
-
-export default Component => connect(mapStateToProps, {})(Component);
diff --git a/src/hoc/withCoinRecentlyPinned.js b/src/hoc/withCoinRecentlyPinned.js
deleted file mode 100644
index d3f3bc3303f..00000000000
--- a/src/hoc/withCoinRecentlyPinned.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import { pushSelectedCoin, removeSelectedCoin } from '../redux/editOptions';
-
-const mapStateToProps = ({ editOptions: { recentlyPinnedCount } }) => ({
- recentlyPinnedCount,
-});
-
-export default Component =>
- connect(mapStateToProps, {
- pushSelectedCoin,
- removeSelectedCoin,
- })(Component);
diff --git a/src/hoc/withEditOptions.js b/src/hoc/withEditOptions.js
deleted file mode 100644
index 64dfe58a6da..00000000000
--- a/src/hoc/withEditOptions.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import {
- pushSelectedCoin,
- removeSelectedCoin,
- setHiddenCoins,
- setIsCoinListEdited,
- setPinnedCoins,
-} from '../redux/editOptions';
-
-export default Component =>
- connect(() => ({}), {
- pushSelectedCoin,
- removeSelectedCoin,
- setHiddenCoins,
- setIsCoinListEdited,
- setPinnedCoins,
- })(Component);
diff --git a/src/hoc/withOpenBalances.js b/src/hoc/withOpenBalances.js
deleted file mode 100644
index ec47eba04bb..00000000000
--- a/src/hoc/withOpenBalances.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { connect } from 'react-redux';
-import { setOpenSmallBalances } from '../redux/openStateSettings';
-
-const mapStateToProps = ({ openStateSettings: { openSmallBalances } }) => ({
- openSmallBalances,
-});
-
-export default Component =>
- connect(mapStateToProps, { setOpenSmallBalances })(Component);
diff --git a/src/hoc/withOpenFamilyTabs.js b/src/hoc/withOpenFamilyTabs.js
deleted file mode 100644
index 7cf706bfde2..00000000000
--- a/src/hoc/withOpenFamilyTabs.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-import {
- pushOpenFamilyTab,
- setOpenFamilyTabs,
-} from '../redux/openStateSettings';
-
-const mapStateToProps = ({ openStateSettings: { openFamilyTabs } }) => ({
- openFamilyTabs,
-});
-
-export default Component =>
- connect(mapStateToProps, {
- pushOpenFamilyTab,
- setOpenFamilyTabs,
- })(Component);
diff --git a/src/hoc/withOpenInvestmentCards.js b/src/hoc/withOpenInvestmentCards.js
deleted file mode 100644
index 443641f4261..00000000000
--- a/src/hoc/withOpenInvestmentCards.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { connect } from 'react-redux';
-import { setOpenInvestmentCards } from '../redux/openStateSettings';
-
-const mapStateToProps = ({ openStateSettings: { openInvestmentCards } }) => ({
- openInvestmentCards,
-});
-
-export default Component =>
- connect(mapStateToProps, {
- setOpenInvestmentCards,
- })(Component);
diff --git a/src/hoc/withOpenSavings.js b/src/hoc/withOpenSavings.js
deleted file mode 100644
index 2f74b5ae23d..00000000000
--- a/src/hoc/withOpenSavings.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { connect } from 'react-redux';
-import { setOpenSavings } from '../redux/openStateSettings';
-
-const mapStateToProps = ({ openStateSettings: { openSavings } }) => ({
- openSavings,
-});
-
-export default Component =>
- connect(mapStateToProps, { setOpenSavings })(Component);
diff --git a/src/hooks/useAccountAssets.js b/src/hooks/useAccountAssets.js
index 44f4d0e06bf..d052541d692 100644
--- a/src/hooks/useAccountAssets.js
+++ b/src/hooks/useAccountAssets.js
@@ -1,5 +1,5 @@
import { useSelector } from 'react-redux';
-import { sortAssetsByNativeAmountSelector } from '../hoc/assetSelectors';
+import { sortAssetsByNativeAmountSelector } from '@rainbow-me/helpers/assetSelectors';
export default function useAccountAssets() {
const assets = useSelector(sortAssetsByNativeAmountSelector);
diff --git a/src/hooks/useAccountSettings.js b/src/hooks/useAccountSettings.js
index 67d23cd957a..b97c2905a28 100644
--- a/src/hooks/useAccountSettings.js
+++ b/src/hooks/useAccountSettings.js
@@ -1,9 +1,10 @@
import lang from 'i18n-js';
-import { useSelector } from 'react-redux';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
import { createSelector } from 'reselect';
import {
- settingsUpdateAccountColor,
- settingsUpdateAccountName,
+ settingsChangeLanguage as changeLanguage,
+ settingsChangeNativeCurrency as changeNativeCurrency,
} from '../redux/settings';
import { supportedNativeCurrencies } from '@rainbow-me/references';
@@ -20,20 +21,10 @@ const createLanguageSelector = createSelector([languageSelector], withLanguage);
export default function useAccountSettings() {
const { language } = useSelector(createLanguageSelector);
+ const dispatch = useDispatch();
const settingsData = useSelector(
- ({
- settings: {
- accountAddress,
- accountColor,
- accountName,
- chainId,
- nativeCurrency,
- network,
- },
- }) => ({
+ ({ settings: { accountAddress, chainId, nativeCurrency, network } }) => ({
accountAddress,
- accountColor,
- accountName,
chainId,
language,
nativeCurrency,
@@ -41,9 +32,20 @@ export default function useAccountSettings() {
network,
})
);
+
+ const settingsChangeLanguage = useCallback(
+ language => dispatch(changeLanguage(language)),
+ [dispatch]
+ );
+
+ const settingsChangeNativeCurrency = useCallback(
+ currency => dispatch(changeNativeCurrency(currency)),
+ [dispatch]
+ );
+
return {
- settingsUpdateAccountColor,
- settingsUpdateAccountName,
+ settingsChangeLanguage,
+ settingsChangeNativeCurrency,
...settingsData,
};
}
diff --git a/src/hooks/useUniswapAssetsInWallet.js b/src/hooks/useUniswapAssetsInWallet.js
index c1e160b510a..30ec47254d8 100644
--- a/src/hooks/useUniswapAssetsInWallet.js
+++ b/src/hooks/useUniswapAssetsInWallet.js
@@ -1,8 +1,8 @@
import { filter, keys } from 'lodash';
import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';
-import NetworkTypes from '../helpers/networkTypes';
-import { sortAssetsByNativeAmountSelector } from '../hoc/assetSelectors';
+import { sortAssetsByNativeAmountSelector } from '@rainbow-me/helpers/assetSelectors';
+import NetworkTypes from '@rainbow-me/networkTypes';
const uniswapPairsSelector = state => state.uniswap.pairs;
const uniswapAllTokensSelector = state => state.uniswap.allTokens;
diff --git a/src/hooks/useWalletSectionsData.js b/src/hooks/useWalletSectionsData.js
index 03075c23dd5..c40034a77fa 100644
--- a/src/hooks/useWalletSectionsData.js
+++ b/src/hooks/useWalletSectionsData.js
@@ -1,7 +1,5 @@
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
-import { buildWalletSectionsSelector } from '../helpers/buildWalletSections';
-import { readableUniswapSelector } from '../hoc/uniswapLiquidityTokenInfoSelector';
import useAccountAssets from './useAccountAssets';
import useAccountSettings from './useAccountSettings';
import useCoinListEditOptions from './useCoinListEditOptions';
@@ -9,6 +7,8 @@ import useIsWalletEthZero from './useIsWalletEthZero';
import useSavingsAccount from './useSavingsAccount';
import useSendableUniqueTokens from './useSendableUniqueTokens';
import useShowcaseTokens from './useShowcaseTokens';
+import { buildWalletSectionsSelector } from '@rainbow-me/helpers/buildWalletSections';
+import { readableUniswapSelector } from '@rainbow-me/helpers/uniswapLiquidityTokenInfoSelector';
export default function useWalletSectionsData() {
const accountData = useAccountAssets();
diff --git a/src/redux/settings.js b/src/redux/settings.js
index d560ee04493..6916b4b3f16 100644
--- a/src/redux/settings.js
+++ b/src/redux/settings.js
@@ -19,9 +19,6 @@ import logger from 'logger';
const SETTINGS_UPDATE_SETTINGS_ADDRESS =
'settings/SETTINGS_UPDATE_SETTINGS_ADDRESS';
-const SETTINGS_UPDATE_SETTINGS_COLOR =
- 'settings/SETTINGS_UPDATE_SETTINGS_COLOR';
-const SETTINGS_UPDATE_SETTINGS_NAME = 'settings/SETTINGS_UPDATE_SETTINGS_NAME';
const SETTINGS_UPDATE_NATIVE_CURRENCY_SUCCESS =
'settings/SETTINGS_UPDATE_NATIVE_CURRENCY_SUCCESS';
const SETTINGS_UPDATE_LANGUAGE_SUCCESS =
@@ -56,18 +53,6 @@ export const settingsLoadNetwork = () => async dispatch => {
}
};
-export const settingsUpdateAccountName = accountName => dispatch =>
- dispatch({
- payload: { accountName },
- type: SETTINGS_UPDATE_SETTINGS_NAME,
- });
-
-export const settingsUpdateAccountColor = accountColor => dispatch =>
- dispatch({
- payload: { accountColor },
- type: SETTINGS_UPDATE_SETTINGS_COLOR,
- });
-
export const settingsUpdateAccountAddress = accountAddress => async dispatch => {
dispatch({
payload: accountAddress,
@@ -122,8 +107,6 @@ export const settingsChangeNativeCurrency = nativeCurrency => async dispatch =>
// -- Reducer --------------------------------------------------------------- //
export const INITIAL_STATE = {
accountAddress: '',
- accountColor: 6,
- accountName: '',
chainId: 1,
language: 'en',
nativeCurrency: 'USD',
@@ -137,16 +120,6 @@ export default (state = INITIAL_STATE, action) => {
...state,
accountAddress: action.payload,
};
- case SETTINGS_UPDATE_SETTINGS_NAME:
- return {
- ...state,
- accountName: action.payload.accountName,
- };
- case SETTINGS_UPDATE_SETTINGS_COLOR:
- return {
- ...state,
- accountColor: action.payload.accountColor,
- };
case SETTINGS_UPDATE_NATIVE_CURRENCY_SUCCESS:
return {
...state,