feat: Filter networks by window location#100
Conversation
✅ Deploy Preview for lifted-alberto ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
stanleyjones
left a comment
stanleyjones
left a comment
There was a problem hiding this comment.
Some hopefully useful comments.
| devServer: function (configDevServer) { | ||
| return function (proxy, allowedHosts) { | ||
| const config = configDevServer(proxy, allowedHosts) | ||
| return { ...config, public: "alberto.local" } | ||
| } | ||
| }, |
There was a problem hiding this comment.
This bit allows Webpack to serve Alberto locally at a specific domain (e.g. https://alberto.local:3000) provided you also add the following line to your /etc/hosts:
127.0.0.1 alberto.local
127.0.0.1 wallet.end-labs.local
It's useful in local development to test whether the hostname detection is working.
| const { activeNetwork, networks, setActiveId } = useNetworkStore(s => ({ | ||
| networks: s.getNetworks(), | ||
| activeNetwork: s.getActiveNetwork(), | ||
| setActiveId: s.setActiveId, | ||
| })) |
There was a problem hiding this comment.
All of this business logic was moved out of the view and into the state store. See below.
| [0, { name: "Manifest Ledger", url: "/api", filter: "alberto" }], | ||
| [1, { name: "GBOP Ledger", url: "/api-end", filter: "end-labs" }], |
There was a problem hiding this comment.
@jgryffindor Please double-check the url here. I'm pretty sure it's what I heard you say. Easy to change.
| .map(([id, network]) => ({ id, ...network })) | ||
| .sort(({ name: a }, { name: b }) => | ||
| a.toLowerCase() < b.toLowerCase() ? -1 : 1, | ||
| ) | ||
| .filter(({ filter }) => !filter || hostname.includes(filter)) |
There was a problem hiding this comment.
The mapping, sorting, and filtering has been moved here from the view.
| return config | ||
| // return { ...config, public: "wallet.end-labs.local" } |
There was a problem hiding this comment.
Comment out L14 and uncomment L15 to serve the app from a different domain name during local development. Make sure to add that domain in your /etc/hosts as well (e.g. 127.0.0.1 wallet.end-labs.local).
| expect(networkName).toBe("no network selected") | ||
| expect(networkName).not.toBe(name) |
There was a problem hiding this comment.
The test assumed that no network would be available after deleting one. I changed it to confirm that the deleted network was no longer active.
| .map(([id, network]) => ({ id, ...network })) | ||
| .sort(({ name: a }, { name: b }) => | ||
| a.toLowerCase() < b.toLowerCase() ? -1 : 1, | ||
| ) | ||
| .filter( | ||
| ({ filter }) => | ||
| !filter || | ||
| hostname.includes(filter) || | ||
| hostname.includes("localhost"), | ||
| ) |
There was a problem hiding this comment.
All the mapping, sorting, and filtering from the view has been moved here. Note that all networks are available if you're just viewing from localhost — but see above for a trick to set your domain to something else in local development.
| const networks = get().getNetworks() | ||
| const activeNetwork = networks.find(({ id }) => id === get().activeId) | ||
| return activeNetwork ?? networks[0] |
There was a problem hiding this comment.
It's possible that the "active network" in your browser cache no longer exists, in which case fall back to the first one alphabetically.
3 participants
Description
This PR adds a network for the END Labs ledger and filters which networks are available based on the location reported by the browser.
/api-endCloses https://github.com/liftedinit/operations/issues/6 (but doesn't really)
Testing / Breaking Changes
The change was tested manually and required modifying the existing E2E tests, as they were built with the assumption that only one network would be available.
BREAKING CHANGE: The "Manifest Network" will no longer be available from front-ends running Alberto that do not have "alberto" somewhere in the domain name. While this change is the goal of this ticket, it also constitutes a breaking change. We can put it back once ledger clusters have static URLs for their APIs.
Screenshots
AS ALBERTO
AS WALLET.END-LABS