WIP - refactoring containers and header

[pete-watters]

Try out Leather build b5d3bd7 — Extension build, Test report, Storybook, Chromatic

This is a POC of how we can refactor our code to make it easier to add headers to the approval flow.

In the screenshot below you can see a double header:

• one in a ContainerLayout wrapper
• one in the Approver component

[pete-watters]

@kyranjamie I made a slight change here as a suggestion of an approach we could take. It would involve grouping the routes we use based on their use case which may be a good idea anyway but I'm not sure if it would lead to some duplication.

Before, all routes had the same route container. I've changed it to add another level so we have:

<Route> 
   <Route element={<Container />}>
     // everything in the main extension 
   </Route>
   // Other routes for popup windows e.g. Approver

<Route path="approver"   ...        />

I just did this as a quick POC but would need to review all the routes.

A lot of the complicated code came from the variants for different types of pages but @fbwoolf had a good suggestion to have different containers for each which I am doing here.

[kyranjamie]

Interesting idea.

The problem currently is that we mix both functionality and container styles in the container.tsx component.

What if we want the behaviour of

  useOnWalletLock(() => closeWindow());
  useOnSignOut(() => closeWindow());

but not the styles.

I think this refactor should decouple the container styles & logic. If so, then the router based approach to wrapping is a good idea I think.

[pete-watters]

This is your Approver but outside of the generic <Container.

In this file I am wrapping it with ContainerLayout so the Header is wider to show how we could do this.

A good fit for this approach would be the OnBoarding pages.

For Approver I think we shouldn't wrap it but instead load the Header inside that component as I have done here

By grouping routes better I believe we can simplify our logic and remove all the pathname switches I added to get us away from storing headers in state.

[pete-watters]

This <Header component became overly complex when trying to be a do everything for everyone header.

In fact, once I had applied logic I reverse engineered from production and documented here it was decided that for most popups we would only show the logo anyway.

Steps I think we can take here are:

• refactor and organise our routes
• create simpler Containers and Headers

[pete-watters]

This is just a POC. I'm thinking about how best to do this and also to include solving #5181

[kyranjamie]

to remove/add to gitignore

[kyranjamie]

to remove

[kyranjamie]

Interesting idea.

The problem currently is that we mix both functionality and container styles in the container.tsx component.

What if we want the behaviour of

  useOnWalletLock(() => closeWindow());
  useOnSignOut(() => closeWindow());

but not the styles.

I think this refactor should decouple the container styles & logic. If so, then the router based approach to wrapping is a good idea I think.