Use subtabs in sidebar

[dasanra]

What it solves

Resolves #1295

How this PR fixes it

This PR adds subtabs menu for ASSETS and SETTINGS, making easier to discover collectibles and making the view for the settings bigger

How to test it

Just load a safe and navigate using the sidebar menu. Check for the expected behavior when clicking around

Screenshots

Notification badge example for current PR

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

• Safe Multisig app bsc

[github-actions]

• Safe Multisig app rinkeby

[github-actions]

• Safe Multisig app polygon

[github-actions]

• Safe Multisig app mainnet

[lukasschor]

Looks really good! Especially the settings. 🎉

I realize the PR is still in draft, but wanted to leave some things I saw so I won't forget about them. Feel free to ignore if these are anyways planned to be addressed.

There is a missing whitespace in Spending Limit

This switch now became redundant. Should we remove it?

Also, while not related to this PR I saw that in the Safe Details section is the only place where we:

• Use a bigger font for the description
• Have a line-break in the description

Maybe worth aligning at some point. I personally feel (1) big text and (2) no line-break would leverage the increased screen estate the best and be easiest to read.

[dasanra]

@lukasschor thank you for your suggestions! I was still working on the old link change, as it had some deeper changes 😉 but all the others were useful!

Once the build is ready all those will be done.

I still have to add, if is still requested the "upgrade" badge that we had (red dot in Safe Details button when a smart contract upgrade is available)

Or maybe we can remove it from scope and create a new ticket in order to add some more standard bubble that can be used for a more generic notification system for any menu entry WDYT?

[katspaugh]

There's a bit of duplication in this config. I would suggest defining a more static config and build this one from it.

Like so:

const makeItem = (config) => ({
  label: config.label,
  badge: needsUpdate && granted,
  icon: <ListIcon type={config.id} />,
  selected: safeAction === config.sectionId && safeSubaction === config.id,
  href: `${matchSafeWithAddress?.url}/${config.sectionId}/${config.id}`,
})

makeItem({
  label: ''Safe Details',
  id: 'details',
  sectionId: 'settings'
}),
makeItem({
  ...
}),

[dasanra]

I'm not sure that this change has a big impact. Will only save us from writting <ListIcon /> and matchSafeWithAddress?.url/. config.id abstraction done here is not correct, Icon type doesn't always match with subSection name. Worst case we will always need the same number of properties to write this:

makeItem({
  label: 'Safe Details',
  badge: (true or false, needs to be parametrized for each case)
  icon: 'settingsTool',
  sectionId: 'settings',
  subSectionId: 'subSection'
})

[katspaugh]

These URLs are duplicated here and in the menu. Ideally they should come from the same enum, and the menu should use generatePath.

[dasanra]

With current implementation I can only do a partial refactor for this suggestion. I won't be able to use generatePath, as SAFELIST_ADDRESS include a / character and generatePath escape those values.

To improve this we should either go for a tech debt ticket because it won't make sense to change it only here or to define two SAFELIST_ADDRESS values in src/routes/routes meanwhile we can't do the full migration

[lukasschor]

Screen.Recording.2021-07-12.at.17.30.00.mov

This bouncing behavior seems weird. It happens when you click a category that is already selected.

[francovenica]

Minor issue:
The "back" button in the browser is causing some inconsistencies:
1 - Go to assets tab > Balances
2 - Click in settings (it will go to Settings > safe details by default)
3 - Use the back button

The safe will go back to balances, but the setting menu remains open. The "Assets" tab gets selected, but it doesn't open to show it is in the "Coin" tab

Same happens if you are in the Settings tab > Safe details, then go to assets > Coin lastly you use the "Back" button of the browser. It will go back to Settings > Safe details, but is the Assets dropdown the one that remains open.

[francovenica]

The bouncer behavior and the issue with the "back" button in browsers were solved.

It looks good to me

[liliya-soroka]

@dasanra , is the information about the opened tab is missed or skipped ?
Example: assets/coins