Fix/4028/leather wallet modal routing

[pete-watters]

Try out this version of Leather — download extension builds.

This PR fixes: #4086 & #4028.

Some work was performed on this before rebranding as Leather in this PR and this PR

The changes introduced here:

• refactor our routes
• introduce ModalBackgroundWrapper which allows us to overlay modals above other routes
  • This lets us show the correct background behind nested routes
• adds useBackgroundLocationRedirect so that when pages are visited directly or opened in new tabs we can properly set the content behind them

This video shows how it's working:

Kapture.2023-10-13.at.13.12.40.mp4

I found two bugs that I haven't fixed yet and are present on dev:

• as a user when I
  • choose to view secret key
  • and use the settings menu
  • then the menu modal does not display until I enter my password
• as a user when I
  • try to directly access /receive/collectible/ordinal (new tab or copy paste)
  • then the page crashes as it doesn't have the tap root address TypeError: Cannot read properties of null (reading 'btcAddressTaproot')

[pete-watters]

@kyranjamie - I need to work on setting the BG location on the /receive/stx modal but opening this for initial review in case you spot any flaws / don't like what I'm doing

[pete-watters]

To go direct to /receive/stx for example in Ledger mode, we need this declaration also.

Doing this outside of <Home /> means we bypass the check for <Routes location={backgroundLocation || location}>

We can't do that check in this file without moving from createHashRouter -> <HashRouter> or introducing another wrapper which I can investigate

[kyranjamie]

Confused by this. What's ledger mode got to do with it?

[pete-watters]

I had a test failing in the ledger.spec.ts as direct access to this route was not available.

// ledger.spec.ts
 test('that receive modal opens', async ({ homePage }) => {
    const address = await homePage.getReceiveStxAddress();
    test.expect(address).toEqual('SPSDM5RXY2E3V7JTFYKPFNRPDHG1B85788FKG2KN');
  });

That calls homePage.getReceiveStxAddress() in home.page.ts which has this code:

async getReceiveStxAddress() {
    await this.goToReceiveModal();
    // In Ledger mode, this element isn't visible, so clicking is conditional
    const qrCodeBtn = this.page.getByTestId(HomePageSelectors.ReceiveStxQrCodeBtn);
    if (await qrCodeBtn.isVisible()) await qrCodeBtn.click();
    const displayerAddress = await this.page
      .getByTestId(SharedComponentsSelectors.AddressDisplayer)
      .innerText();
    return displayerAddress.replaceAll('\n', '');
  }

Basically, here its trying to go direct to /receive/stx but it crashes. The same issue occured on the onboarding.spec.ts that restoring a wallet generates the correct stacks address

I think it's more to do with the route than with ledger mode specifically. It's just that in most of the other tests we first open the receive modal then click the QR code

[pete-watters]

I split app-routes up as it was difficult to work with.

I could refactor further to change this to object config:

export const receiveRoutesArray = [
  {
    path: RouteUrls.Receive,
    element: <ReceiveModal />,
    routes: [
      {
        path: RouteUrls.ReceiveStx,
        element: <ReceiveStxModal />,
      },

[fbwoolf]

Nice work here, @pete-watters! 👍