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,