Updated navbar to use latest design.

[Randy808]

To run locally, npm install and use the following snippets:

# Bitcoin
export API_URL=https://blockstream.info/api
export PORT=4999
source flavors/blockstream/config.env
source flavors/bitcoin-mainnet/config.env
npm run dev-server

# Liquid
export API_URL=https://blockstream.info/liquid/api
export PORT=5000
source flavors/blockstream/config.env
source flavors/liquid-mainnet/config.env
npm run dev-server

Mainnet

Current design:

New design:

Testnet

Current design:

New design:

[shesek]

Instead of adding the BASE_HREF to each route handler, we could put the handlers on an express Router and mount that under the BASE_HREF. Something like router = express.Router(), then change all app.{get,use}() to router.{get,use}(), and finally app.use(process.env.BASE_HREF||'/', router).

Alternatively, we could mount a pre-processing middleware that strips the BASE_HREF prefix before forwarding the request to the other handlers. Something like this (untested):

if (process.env.BASE_HREF && process.env.BASE_HREF != '/') {
  const baseHref = process.env.BASE_HREF.replace(/\/+$/, '')
  app.use((req, res, next) => {
    if (req.url == '/' || req.url == baseHref) {
      res.redirect(302, baseHref+'/')
    } else if (req.url.startsWith(baseHref+'/')) {
      req.url = req.url.slice(baseHref.length)
      next()
    } else {
      res.sendStatus(404)
    }
  })
}

Personally I've just been making sure to run the dev-server with BASE_HREF=/, with e.g. (source config1.env && source config2.env && BASE_HREF=/ npm run dev-server). But I guess it could make sense to support BASE_HREF, to make the dev-server behave more closely to the live server.

[Randy808]

Mounted router onto base path and removed prefix from individual routes

[philippem]

lgtm

[FedOken]

1. You might want to add some spacing between the input field and the clear icon; the text is overlapping the clear icon. 2. You could add `cursor: pointer` to the clear icon's hover state. 3. The placeholder no longer fits in the input field; it might be worth shortening it

[FedOken]

1. This behavior might be expected, but when we click on the network, we get the URL `/search?q=liquid`, whereas the main site uses `/liquid`. 2. Also, when we on Liquid env, clicking on the mainnet does not return a “Not Found” page.

[FedOken]

Here, I might have made the indentation a little deeper before the circle. I might also have removed it when we're on the assets page the text highlight at the bottom extends into the circle, which doesn't look quite right in this case.

[FedOken]

It doesn't look right on a white background

[FedOken]

1. Review the breakpoints 2. On mobile, clicking the menu icon refreshes the page instead of opening it 3. The sidebar close button doesn't work in tablet view; this is also an issue for the prod

[FedOken]

Otherwise, it's good - good work

[Randy808]

@FedOken

• The clear icon comes from the default HTML input behavior rather than something custom. There isn’t currently spacing between the text and icon, so I can look into whether we can safely adjust that without overriding native styles too heavily.
• I can also check if it’s possible to add a hover cursor to the clear icon, though I’m aiming to avoid large overrides since this PR is focused on gradually introducing the new designs rather than doing broader cleanup.
• I’ll pass along the placeholder text feedback to design so we can keep that consistent with the intended spec.
• The dev server behaves a bit differently from production, so it doesn’t currently support switching themes or API URLs per instance.
• For the navbar spacing and circle issues, I’ve tried to keep changes minimal in this PR to make review easier. I did prevent the navbar text from wrapping, which can truncate "Explorer API" on smaller screens. I can look at adjusting the breakpoint address that more cleanly.