Routes for going directly to Become a Provider #193

shannonwells · 2024-11-07T02:12:53Z

Goal

The goal of this PR is to lay groundwork for the new Provider registration flow by setting up routes for going directly to the become-a-provider route.

Edit Filed issue #194 for looking at a non-hack fix for broken tests.

Related to #184

Discussion

Features:

The URL may include the name of the network to connect to. If so, it will try to connect to the given network.
The network selection dropdown goes away (on Provider Login and Become a Provider pages) when a network is selected. A 'Change network' link is provided which resets the component.
The network part of the URL is optional.

So the following routes all work, and they are case-insensitive.

/become-a-provider: which displays the network dropdown as before
/become-a-provider/mainnet : connects to mainnet immediately from the page
/become-a-provider/testnet: connects to Paseo testnet
/become-a-provider/localhost : tries to connect to localhost:9944
become-a-provider/MaInNet, etc.
/mainnet, /testnet, /localhost will each connect to the main page, select the appropriate network from the dropdown as above, and try to connect to it.
Custom network connections work as before.

Checklist

routes for become-a-provider
routes for root (provider login)
PR Self-Review and Commenting
Tests added

How To Test the Changes

Check out the branch and run the playwright tests.

git fetch && git co feat/new-registration-path
npx playwright test

Then you can play around with the new feature via npm run dev.

You should be able to click back and forth between Provider Login and Become a Provider pages, selecting things, then clicking Back/Cancel, and the state of the selections and connections should get reset.

You should be able to go to the URLs listed above and either connect automatically, or select from dropdown and connect, then click 'Change network' and the state should also be reset.

* Allow changing networks * Allow direct navigation to Become A Provider for a given network, which connects to the network * playwright tests and other tests for same

shannonwells · 2024-11-07T02:21:57Z

src/lib/stores/networksStore.ts

  endpoint?: string;
  genesisHash?: string;
 }

-export const allNetworks = writable<NetworkInfo[]>([
+export const defaultNetworks: NetworkInfo[] = [


this refactor was just to support converting from the path to the NetworkInfo.

shannonwells · 2024-11-07T02:22:58Z

src/routes/become-a-provider/[[network=networks]]/+layout.svelte

@@ -0,0 +1,7 @@
+<script>


note the path to this file, it uses the match function in src/params/networks.ts to figure out if the route is valid, and then populates $page.params accordingly with a value for network, or not. If it's something like /become-a-provider/foo it's a 404. The double square braces means it's an optional path in Svelte.

bookmarked * make same optional path param from root (Provider Login)

shannonwells · 2024-11-07T23:56:17Z

playwright.config.ts

@@ -75,6 +75,6 @@ export default defineConfig({
  webServer: {
    command: 'npm run build && npm run preview',
    port: 4173,
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: false,


Having this set to true breaks tests.

shannonwells · 2024-11-07T23:56:30Z

src/components/BecomeAProvider.svelte

@@ -16,7 +16,7 @@
      <SelectNetworkAndAccount
        bind:newUser={$user}
        accounts={$nonProviderAccountsStore}
-        accountSelectorTitle="Account Id"
+        accountSelectorTitle="Select an Account Id"


to match the Become a Provider prompt

shannonwells · 2024-11-07T23:57:24Z

src/components/LoginForm.svelte

 />
 <div class="flex justify-between align-bottom">
-  <Button id="connect-button" title="Connect" disabled={!canConnect} action={connect} />
+  <Button id="connect-button" title="Connect To Account" disabled={!canConnect} action={connect} />


"Connect" on the button was confusing due to the other text if you connected to the endpoint. So make the button more clear what you're connecting to.

shannonwells · 2024-11-08T00:00:30Z

src/params/networks.ts

@@ -0,0 +1,3 @@
+export const match = (path: string): boolean => {
+  return (/mainnet|testnet|localhost/i).test(path);
+}


See defaultAccounts pathname

src/components/SelectNetworkAndAccount.svelte

JoeCap08055

Couple of things:

Playwright tests are passing, but other tests appear to be broken (both when I run locally & in pipeline)
The optional path component for the network is interesting; I'm wondering if you considered a more traditional URL query parameter approach, ie ?node=<mainnet|testnet|URL> (similar to the PolkadotJS UI)? Would seemingly allow for custom networks (or even just specific nodes) right in the link, as opposed to just mainnet/testnet/localhost specific node. Just my $0.02.
☝️ non-blocking, but tests should def. be fixed

shannonwells · 2024-11-08T17:26:37Z

The optional path component for the network is interesting; I'm wondering if you considered

I did, but reading through the docs it didn't seem to be the Svelte Way, and once I already had it implemented, I realized how to do it the other way. ¯_(ツ)_/¯

I could be persuaded to redo it and use query params instead.

Co-authored-by: Joe Caputo <joseph.caputo@projectliberty.io>

JoeCap08055 · 2024-11-11T15:09:28Z

Hmmm, maybe out of scope, but... should the page maybe retain your current network choice/connection when you navigate back to Home? As of now it does not appear to.

Example:

Navigate to http://localhost:/localhost (or just select a network from the dropdown from the home page)
Click "Become a Provider"
Navigate back to "Home" using the link on the page

Expected results: Still connected to "localhost" node
Actual results: Required to select a network connection again

shannonwells · 2024-11-11T18:17:12Z

should the page maybe retain your current network choice/connection when you navigate back to Home? As of now it does not appear to.

That's intentional because, IMO, no it shouldn't. If you navigate back to home then you've changed your mind about what you want to do. We can't predict what the user intent was and it's harmless to make them do just one more click to select from the dropdown and reconnect.

JoeCap08055

Pulled & ran tests locally & explored in browser.
Looks good!

shannonwells added 3 commits November 5, 2024 14:56

Hide/show network selection, allow changing of networks

f77ea9a

routes for network taking data

918cc8e

* Hide/show network selection

426af77

* Allow changing networks * Allow direct navigation to Become A Provider for a given network, which connects to the network * playwright tests and other tests for same

shannonwells commented Nov 7, 2024

View reviewed changes

* updates URL when connecting to a network so it can be easily

089fcc3

bookmarked * make same optional path param from root (Provider Login)

shannonwells commented Nov 7, 2024

View reviewed changes

shannonwells commented Nov 8, 2024

View reviewed changes

simple rename

c465cc9

shannonwells marked this pull request as ready for review November 8, 2024 00:01

shannonwells requested review from wilwade, claireolmstead, enddynayn and JoeCap08055 November 8, 2024 00:01

prettier

1f3ef5d

JoeCap08055 reviewed Nov 8, 2024

View reviewed changes

src/components/SelectNetworkAndAccount.svelte Outdated Show resolved Hide resolved

JoeCap08055 reviewed Nov 8, 2024

View reviewed changes

Update src/components/SelectNetworkAndAccount.svelte

d7a09c0

Co-authored-by: Joe Caputo <joseph.caputo@projectliberty.io>

shannonwells marked this pull request as draft November 8, 2024 17:29

HACK: fix tests

21a3903

shannonwells marked this pull request as ready for review November 8, 2024 18:27

shannonwells requested a review from JoeCap08055 November 8, 2024 18:27

shannonwells mentioned this pull request Nov 8, 2024

[FIX]: Fix the test hack used to get tests running, re: $app/[foo] resolution & mocking #194

Open

1 task

shannonwells enabled auto-merge (squash) November 8, 2024 21:23

JoeCap08055 approved these changes Nov 11, 2024

View reviewed changes

shannonwells merged commit 00be832 into main Nov 11, 2024
5 checks passed

shannonwells deleted the feat/new-registration-path branch November 11, 2024 18:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Routes for going directly to Become a Provider #193

Routes for going directly to Become a Provider #193

shannonwells commented Nov 7, 2024 •

edited

Loading

shannonwells Nov 7, 2024

shannonwells Nov 7, 2024 •

edited

Loading

shannonwells Nov 7, 2024

shannonwells Nov 7, 2024

shannonwells Nov 7, 2024

shannonwells Nov 8, 2024

JoeCap08055 left a comment

shannonwells commented Nov 8, 2024

JoeCap08055 commented Nov 11, 2024

shannonwells commented Nov 11, 2024 •

edited

Loading

JoeCap08055 left a comment

Routes for going directly to Become a Provider #193

Routes for going directly to Become a Provider #193

Conversation

shannonwells commented Nov 7, 2024 • edited Loading

Goal

Discussion

Checklist

How To Test the Changes

shannonwells Nov 7, 2024

Choose a reason for hiding this comment

shannonwells Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

shannonwells Nov 7, 2024

Choose a reason for hiding this comment

shannonwells Nov 7, 2024

Choose a reason for hiding this comment

shannonwells Nov 7, 2024

Choose a reason for hiding this comment

shannonwells Nov 8, 2024

Choose a reason for hiding this comment

JoeCap08055 left a comment

Choose a reason for hiding this comment

shannonwells commented Nov 8, 2024

JoeCap08055 commented Nov 11, 2024

shannonwells commented Nov 11, 2024 • edited Loading

JoeCap08055 left a comment

Choose a reason for hiding this comment

shannonwells commented Nov 7, 2024 •

edited

Loading

shannonwells Nov 7, 2024 •

edited

Loading

shannonwells commented Nov 11, 2024 •

edited

Loading