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} />)
+ }}
+ />
+
+