diff --git a/src/routes/safe/components/Balances/index.tsx b/src/routes/safe/components/Balances/index.tsx index 1b3b8d72..8d01217a 100644 --- a/src/routes/safe/components/Balances/index.tsx +++ b/src/routes/safe/components/Balances/index.tsx @@ -10,15 +10,16 @@ import Modal from 'src/components/Modal' import ButtonLink from 'src/components/layout/ButtonLink' import Col from 'src/components/layout/Col' import Divider from 'src/components/layout/Divider' -import Link from 'src/components/layout/Link' + import Row from 'src/components/layout/Row' import { SAFELIST_ADDRESS } from 'src/routes/routes' import SendModal from 'src/routes/safe/components/Balances/SendModal' import CurrencyDropdown from 'src/routes/safe/components/CurrencyDropdown' import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/routes/safe/store/selectors' -import { history } from 'src/store/index' + import { wrapInSuspense } from 'src/utils/wrapInSuspense' import { useFetchTokens } from '../../container/hooks/useFetchTokens' +import { Route, Switch, NavLink, Redirect } from 'react-router-dom' const Collectibles = React.lazy(() => import('src/routes/safe/components/Balances/Collectibles')) const Coins = React.lazy(() => import('src/routes/safe/components/Balances/Coins')) @@ -28,15 +29,12 @@ export const BALANCE_ROW_TEST_ID = 'balance-row' const INITIAL_STATE = { erc721Enabled: false, - subMenuOptions: [], showToken: false, showManageCollectibleModal: false, sendFunds: { isOpen: false, selectedToken: undefined, }, - showCoins: true, - showCollectibles: false, showReceive: false, } @@ -52,36 +50,13 @@ const Balances = (props) => { useFetchTokens() useEffect(() => { - const showCollectibles = COLLECTIBLES_LOCATION_REGEX.test(history.location.pathname) - const showCoins = COINS_LOCATION_REGEX.test(history.location.pathname) - const subMenuOptions = [{ enabled: showCoins, legend: 'Coins', url: `${SAFELIST_ADDRESS}/${address}/balances` }] - - if (!showCollectibles && !showCoins) { - history.replace(`${SAFELIST_ADDRESS}/${address}/balances`) - } - const erc721Enabled = featuresEnabled && featuresEnabled.includes('ERC721') - if (erc721Enabled) { - subMenuOptions.push({ - enabled: showCollectibles, - legend: 'Collectibles', - url: `${SAFELIST_ADDRESS}/${address}/balances/collectibles`, - }) - } else { - if (showCollectibles) { - history.replace(subMenuOptions[0].url) - } - } - setState((prevState) => ({ ...prevState, - showCoins, - showCollectibles, erc721Enabled, - subMenuOptions, })) - }, [featuresEnabled, address]) + }, [featuresEnabled]) const onShow = (action) => { setState((prevState) => ({ ...prevState, [`show${action}`]: true })) @@ -121,65 +96,116 @@ const Balances = (props) => { receiveModal, tokenControls, } = props.classes - const { - erc721Enabled, - sendFunds, - showCoins, - showCollectibles, - showManageCollectibleModal, - showReceive, - showToken, - subMenuOptions, - } = state + const { erc721Enabled, sendFunds, showManageCollectibleModal, showReceive, showToken } = state return ( <> - {subMenuOptions.length > 1 && - subMenuOptions.map(({ enabled, legend, url }, index) => ( - - {index > 0 && } - - {legend} - - - ))} - - - {showCoins && } - onShow('ManageCollectibleModal') : () => onShow('Token')} - size="lg" - testId="manage-tokens-btn" + - Manage List - - onHide('ManageCollectibleModal') : () => onHide('Token')} - open={showToken || showManageCollectibleModal} - title="Manage List" + Coins + + + - onHide('ManageCollectibleModal') : () => onHide('Token')} - safeAddress={address} - /> - + Collectibles + + + { + return ( + <> + + onShow('ManageCollectibleModal')} + size="lg" + testId="manage-tokens-btn" + > + Manage List + + onHide('ManageCollectibleModal')} + open={showManageCollectibleModal} + title="Manage List" + > + onHide('ManageCollectibleModal')} + safeAddress={address} + /> + + + + ) + }} + /> + { + return ( + <> + + + onShow('Token')} + size="lg" + testId="manage-tokens-btn" + > + Manage List + + onHide('Token')} + open={showToken} + title="Manage List" + > + onHide('Token')} safeAddress={address} /> + + + + ) + }} + /> + - {showCoins && wrapInSuspense( onShow('Receive')} showSendFunds={showSendFunds} />)} - {erc721Enabled && showCollectibles && wrapInSuspense()} + + { + if (erc721Enabled) { + return wrapInSuspense() + } + return null + }} + /> + { + return wrapInSuspense( onShow('Receive')} showSendFunds={showSendFunds} />) + }} + /> + +