Release 3.10.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "Allowing crypto users manage funds in a safer way",
   "website": "https://github.com/gnosis/safe-react#readme",
   "bugs": {
@@ -248,7 +248,7 @@
     "@testing-library/react": "^11.2.7",
     "@typechain/web3-v1": "^3.0.0",
     "@types/history": "4.6.2",
-    "@types/jest": "^26.0.22",
+    "@types/jest": "^26.0.23",
     "@types/js-cookie": "^2.2.6",
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.memoize": "^4.1.6",

src/components/AppLayout/Sidebar/useSidebarItems.tsx

@@ -1,69 +1,134 @@
 import React, { useMemo } from 'react'
+import { useSelector } from 'react-redux'
 import { useRouteMatch } from 'react-router-dom'
 
+import { isFeatureEnabled } from 'src/config'
 import { ListItemType } from 'src/components/List'
 import ListIcon from 'src/components/List/ListIcon'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { FEATURES } from 'src/config/networks/network.d'
-import { useSelector } from 'react-redux'
-import { currentSafeFeaturesEnabled } from 'src/logic/safe/store/selectors'
+import { currentSafeFeaturesEnabled, currentSafeWithNames } from 'src/logic/safe/store/selectors'
+import { grantedSelector } from 'src/routes/safe/container/selector'
 
 const useSidebarItems = (): ListItemType[] => {
   const featuresEnabled = useSelector(currentSafeFeaturesEnabled)
-  const safeAppsEnabled = Boolean(featuresEnabled?.includes(FEATURES.SAFE_APPS))
+  const safeAppsEnabled = isFeatureEnabled(FEATURES.SAFE_APPS)
+  const isCollectiblesEnabled = isFeatureEnabled(FEATURES.ERC721)
+  const isSpendingLimitEnabled = isFeatureEnabled(FEATURES.SPENDING_LIMIT)
+  const { needsUpdate } = useSelector(currentSafeWithNames)
+  const granted = useSelector(grantedSelector)
+
   const matchSafe = useRouteMatch({ path: `${SAFELIST_ADDRESS}`, strict: false })
   const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
-  const matchSafeWithAction = useRouteMatch({ path: `${SAFELIST_ADDRESS}/:safeAddress/:safeAction` }) as {
+  const matchSafeWithAction = useRouteMatch({
+    path: `${SAFELIST_ADDRESS}/:safeAddress/:safeAction/:safeSubaction?`,
+  }) as {
     url: string
     params: Record<string, string>
   }
 
   return useMemo((): ListItemType[] => {
-    if (!matchSafe || !matchSafeWithAddress || !featuresEnabled) {
+    if (!matchSafe || !matchSafeWithAddress || !matchSafeWithAction || !featuresEnabled) {
       return []
     }
 
+    const { safeAction, safeSubaction } = matchSafeWithAction?.params
+
     const settingsItem = {
       label: 'Settings',
       icon: <ListIcon type="settings" />,
-      selected: matchSafeWithAction?.params.safeAction === 'settings',
-      href: `${matchSafeWithAddress?.url}/settings`,
+      selected: safeAction === 'settings',
+      href: `${matchSafeWithAddress?.url}/settings/details`,
+      subItems: [
+        {
+          label: 'Safe Details',
+          badge: needsUpdate && granted,
+          icon: <ListIcon type="info" />,
+          selected: safeAction === 'settings' && safeSubaction === 'details',
+          href: `${matchSafeWithAddress?.url}/settings/details`,
+        },
+        {
+          label: 'Owners',
+          icon: <ListIcon type="owners" />,
+          selected: safeAction === 'settings' && safeSubaction === 'owners',
+          href: `${matchSafeWithAddress?.url}/settings/owners`,
+        },
+        {
+          label: 'Policies',
+          icon: <ListIcon type="requiredConfirmations" />,
+          selected: safeAction === 'settings' && safeSubaction === 'policies',
+          href: `${matchSafeWithAddress?.url}/settings/policies`,
+        },
+        {
+          disabled: !isSpendingLimitEnabled,
+          label: 'Spending Limit',
+          icon: <ListIcon type="fuelIndicator" />,
+          selected: safeAction === 'settings' && safeSubaction === 'spending-limit',
+          href: `${matchSafeWithAddress?.url}/settings/spending-limit`,
+        },
+        {
+          label: 'Advanced',
+          icon: <ListIcon type="settingsTool" />,
+          selected: safeAction === 'settings' && safeSubaction === 'advanced',
+          href: `${matchSafeWithAddress?.url}/settings/advanced`,
+        },
+      ],
     }
 
-    const safeSidebar = safeAppsEnabled
-      ? [
-          {
-            label: 'Apps',
-            icon: <ListIcon type="apps" />,
-            selected: matchSafeWithAction?.params.safeAction === 'apps',
-            href: `${matchSafeWithAddress?.url}/apps`,
-          },
-          settingsItem,
-        ]
-      : [settingsItem]
-
     return [
       {
         label: 'ASSETS',
         icon: <ListIcon type="assets" />,
-        selected: matchSafeWithAction?.params.safeAction === 'balances',
+        selected: safeAction === 'balances',
         href: `${matchSafeWithAddress?.url}/balances`,
+        subItems: [
+          {
+            label: 'Coins',
+            icon: <ListIcon type="assets" />,
+            selected: safeAction === 'balances' && safeSubaction === undefined,
+            href: `${matchSafeWithAddress?.url}/balances`,
+          },
+          {
+            disabled: !isCollectiblesEnabled,
+            label: 'Collectibles',
+            icon: <ListIcon type="collectibles" />,
+            selected: safeAction === 'balances' && safeSubaction === 'collectibles',
+            href: `${matchSafeWithAddress?.url}/balances/collectibles`,
+          },
+        ],
       },
       {
         label: 'TRANSACTIONS',
         icon: <ListIcon type="transactionsInactive" />,
-        selected: matchSafeWithAction?.params.safeAction === 'transactions',
+        selected: safeAction === 'transactions',
         href: `${matchSafeWithAddress?.url}/transactions`,
       },
       {
         label: 'ADDRESS BOOK',
         icon: <ListIcon type="addressBook" />,
-        selected: matchSafeWithAction?.params.safeAction === 'address-book',
+        selected: safeAction === 'address-book',
         href: `${matchSafeWithAddress?.url}/address-book`,
       },
-      ...safeSidebar,
+      {
+        label: 'Apps',
+        disabled: !safeAppsEnabled,
+        icon: <ListIcon type="apps" />,
+        selected: safeAction === 'apps',
+        href: `${matchSafeWithAddress?.url}/apps`,
+      },
+      settingsItem,
     ]
-  }, [matchSafe, matchSafeWithAction, matchSafeWithAddress, safeAppsEnabled, featuresEnabled])
+  }, [
+    granted,
+    isCollectiblesEnabled,
+    isSpendingLimitEnabled,
+    matchSafe,
+    matchSafeWithAction,
+    matchSafeWithAddress,
+    needsUpdate,
+    safeAppsEnabled,
+    featuresEnabled,
+  ])
 }
 
 export { useSidebarItems }

src/components/Collapse/index.tsx

@@ -5,9 +5,21 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
 import React from 'react'
 import styled from 'styled-components'
 
-const Wrapper = styled.div``
+const Wrapper = styled.div`
+  width: 100%;
+`
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 15px 0 3px;
+  cursor: pointer;
+  user-select: none;
 
-const HeaderWrapper = styled.div``
+  & > * {
+    margin-right: 5px;
+  }
+`
 
 const TitleWrapper = styled.div``
 
@@ -20,25 +32,25 @@ interface CollapseProps {
   title: React.ReactElement | string
   description?: React.ReactElement | string
   collapseClassName?: string
-  headerWrapperClassName?: string
+  defaultExpanded?: boolean
 }
 
 const Collapse: React.FC<CollapseProps> = ({
   children,
   description = null,
   title,
   collapseClassName,
-  headerWrapperClassName,
+  defaultExpanded = false,
 }): React.ReactElement => {
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = React.useState(defaultExpanded)
 
   const handleClick = () => {
     setOpen(!open)
   }
 
   return (
     <Wrapper>
-      <HeaderWrapper className={headerWrapperClassName} onClick={handleClick}>
+      <HeaderWrapper onClick={handleClick}>
         <TitleWrapper>{title}</TitleWrapper>
         <Header>
           <IconButton disableRipple size="small">