Safe List Sidebar

[tschubotz]

Story
As a user I am able to switch between different Safes in order to be able to have several of them.

Default Safe

• One safe can set as the default Safe
• This Safe is automatically opened every time the site is visited

Safe List

• Click the button top left (right of the logo) bring up the Safe list sidebar
• Clicking "Add Safe" starts the flow to create a new or load an existing Safe
• Safe are sorted alphabetically by Safe name, ascending.
• User can search for Safe by their name or address.
  • The search is triggered automatically upon entering characters
  • Clearing the search field shows all Safes again
• The default Safe has the default badge
  • The default Safe is the one that is opened when accessing the website initially.
  • By hovering over another Safe, the "Make default" button is displayed to change the default Safe
• The sidebar is automatically closed upon the following events
  • User clicks "Add Safe" -> Add Safe flow
  • User clicks a Safe -> Safe is opened
  • User clicks the button that opened the sidebar again -> Sidebar closes
  • User clicks in the greyed out area -> Sidebar closes
• Safes that are being deployed, use a loading spinner, for all others, the identicon according to their address is used. (exclude "deploying safes" if too much effort to implement)

From Welcome Screen

If no wallet is connected

• Show screen with intro text and "Connect" button to initiate Web3Connect

If wallet is connected

• If there is at least 1 safe in the safe list: Open the default (or only) Safe -> go directly to asset view of this Safe
• If there is no safe in the safe list: Show Welcome screen but instead of "Connect" button show "Create Safe" and "Load Safe" buttons

[germartinez]

@lukasschor
A few questions/confirmations regarding the Welcome screen:

If no wallet is connected

• Show screen with intro text and "Connect" button to initiate Web3Connect
  We don't have a design for this, but I assume is this screen where we replace the two buttons with just a blue one. https://app.zeplin.io/project/5b83b4fa75f90943c86ed14f/screen/5b87c11b787d9e4ffcc02309

If wallet is connected

• If there is at least 1 safe in the safe list: Open sidebar
  Personally, I think it would be better for the user to have the sidebar closed. This is adding one more click everytime the user wants to access his Safe and he is finding a "wall" (even if there is just one Safe on the list). If we didn't have a default Safe, that would make sense, but if we have it, I think we should just show it directly.

[lukasschor]

1. Exactly, Mikhail is working on this already as part of the Web3Connect feature.
2. Good point, I agree with this and changed the specs accordingly. 👍