From 089fcc30343f529410e39854676cd1cfdc0f9021 Mon Sep 17 00:00:00 2001
From: shannonwells <shannonwells@users.noreply.github.com>
Date: Thu, 7 Nov 2024 15:54:55 -0800
Subject: [PATCH] * updates URL when connecting to a network so it can be
 easily   bookmarked * make same optional path param from root (Provider
 Login)

---
 src/components/BecomeAProvider.svelte         |  2 +-
 src/components/ConnectProvider.svelte         |  2 +-
 src/components/ConnectionStatus.svelte        |  2 +-
 src/components/DropDownMenu.svelte            |  2 +-
 src/components/LoginForm.svelte               |  6 ++--
 src/components/SelectNetworkAndAccount.svelte | 17 ++++++++--
 src/lib/stores/networksStore.ts               | 10 +++---
 src/lib/utils.ts                              |  6 ++--
 .../{ => [[network=networks]]}/+page.svelte   |  0
 test/playwright/navigation.test.ts            | 33 ++++++++++++++++---
 10 files changed, 58 insertions(+), 22 deletions(-)
 rename src/routes/{ => [[network=networks]]}/+page.svelte (100%)

diff --git a/src/components/BecomeAProvider.svelte b/src/components/BecomeAProvider.svelte
index becb2f8..8c595ab 100644
--- a/src/components/BecomeAProvider.svelte
+++ b/src/components/BecomeAProvider.svelte
@@ -16,7 +16,7 @@
       <SelectNetworkAndAccount
         bind:newUser={$user}
         accounts={$nonProviderAccountsStore}
-        accountSelectorTitle="Account Id"
+        accountSelectorTitle="Select an Account Id"
         accountSelectorPlaceholder="Select an Account Id"
         noAccountsFoundErrorMsg="No accounts found.  Add an Account Id to your wallet."
       />
diff --git a/src/components/ConnectProvider.svelte b/src/components/ConnectProvider.svelte
index 7f73e64..3665b92 100644
--- a/src/components/ConnectProvider.svelte
+++ b/src/components/ConnectProvider.svelte
@@ -5,7 +5,7 @@
   export let isOpen: boolean = false;
 </script>
 
-<Modal id="conntect-provider" {close} {isOpen}>
+<Modal id="connect-provider" {close} {isOpen}>
   <span slot="title">Connect Provider</span>
   <LoginForm slot="body" onConnect={close} onCancel={close} />
 </Modal>
diff --git a/src/components/ConnectionStatus.svelte b/src/components/ConnectionStatus.svelte
index 35a81cb..c1acb83 100644
--- a/src/components/ConnectionStatus.svelte
+++ b/src/components/ConnectionStatus.svelte
@@ -17,7 +17,7 @@
       {:else}
         <div class="w-1 bg-red-error h-1 rounded-full p-1"></div>
       {/if}
-      <p id="connected-network" class="text-md uppercase">{$user.network?.displayName}</p>
+      <p id="connected-network" class="text-md uppercase">{$user.network?.name}</p>
     </div>
     <p class="text-md">
       {#if $user?.network}{$user.network.endpoint?.toString().replace(/\/$/, '')}{/if}
diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
index 9648fbb..ce7c991 100644
--- a/src/components/DropDownMenu.svelte
+++ b/src/components/DropDownMenu.svelte
@@ -15,7 +15,7 @@
       <option class="text-disabled" value={null} disabled selected>{placeholder}</option>
     {/if}
     {#each options as option}
-      <option value={formatter(option)} class="bg-white">{formatter(option)}</option>
+      <option value={option} class="bg-white">{formatter(option)}</option>
     {/each}
   </select>
 </div>
diff --git a/src/components/LoginForm.svelte b/src/components/LoginForm.svelte
index 1a2bad8..6349cb1 100644
--- a/src/components/LoginForm.svelte
+++ b/src/components/LoginForm.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { preventDefault } from 'svelte/legacy';
 
-  import { providerAccountsStore, type Account } from '$lib/stores/accountsStore';
+  import { providerAccountsStore, type Account} from '$lib/stores/accountsStore';
   import { clearLog } from '$lib/stores/activityLogStore';
   import { user } from '$lib/stores/userStore';
   import Button from './Button.svelte';
@@ -32,12 +32,12 @@
 <SelectNetworkAndAccount
   bind:newUser
   accounts={$providerAccountsStore}
-  accountSelectorTitle="Select an Account Id"
+  accountSelectorTitle="Select a Provider Account Id"
   accountSelectorPlaceholder="Select a Provider Account Id"
   noAccountsFoundErrorMsg="No Provider Account Ids found. To become a Provider, see below."
 />
 <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} />
   {#if onCancel}
     <button class="btn-no-fill" onclick={preventDefault(onCancel)}>Cancel</button>
   {/if}
diff --git a/src/components/SelectNetworkAndAccount.svelte b/src/components/SelectNetworkAndAccount.svelte
index d93a5c0..2f0698e 100644
--- a/src/components/SelectNetworkAndAccount.svelte
+++ b/src/components/SelectNetworkAndAccount.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { page} from '\$app/stores';
+  import { goto } from '\$app/navigation';
 
   import { allNetworks, NetworkType, type NetworkInfo, networkNameToNetworkInfo } from '$lib/stores/networksStore';
 
@@ -96,6 +97,18 @@
     isLoading = false;
   }
 
+  const onSelectNetworkChanged = () => {
+    isCustomNetwork = selectedNetwork?.id === NetworkType.CUSTOM;
+    if (!isCustomNetwork) {
+      if (selectedNetwork?.endpoint && isValidURL(selectedNetwork!.endpoint.toString())) {
+        console.log("pathname: ", $page.url.pathname);
+        const join = $page.url.pathname === "/become-a-provider" ? '/' : ''
+        goto([$page.url.toString(),selectedNetwork.pathName].join(join));
+        networkChanged()
+      }
+    }
+  }
+
   function customNetworkChanged(event: KeyboardEvent) {
     console.debug('HERE');
     if (event.key === 'Enter') {
@@ -123,12 +136,12 @@
     bind:value={selectedNetwork}
     placeholder="Select a network"
     options={$allNetworks}
-    onChange={networkChanged}
+    onChange={onSelectNetworkChanged}
     formatter={formatNetwork}
   />
 {:else }
   <p class="flex justify-between">
-    <span class="text-teal">Connected to {selectedNetwork?.displayName || "Custom"}</span>
+    <span class="text-teal">Connected to {selectedNetwork?.name || "Custom"}</span>
     <span onclick={resetState} class="btn-no-fill cursor-pointer">
       Change networks
     </span>
diff --git a/src/lib/stores/networksStore.ts b/src/lib/stores/networksStore.ts
index b054419..2751482 100644
--- a/src/lib/stores/networksStore.ts
+++ b/src/lib/stores/networksStore.ts
@@ -12,7 +12,7 @@ export enum NetworkType {
  */
 export interface NetworkInfo {
   id: NetworkType;
-  displayName: string;
+  name: string;
   pathName: string;
   endpoint?: string;
   genesisHash?: string;
@@ -21,23 +21,23 @@ export interface NetworkInfo {
 export const defaultNetworks: NetworkInfo[] = [
   {
     id: NetworkType.MAINNET,
-    displayName: 'Mainnet',
+    name: 'Mainnet',
     pathName: 'mainnet',
     endpoint: 'wss://1.rpc.frequency.xyz',
     genesisHash: '0x4a587bf17a404e3572747add7aab7bbe56e805a5479c6c436f07f36fcc8d3ae1',
   },
   {
     id: NetworkType.TESTNET_PASEO,
-    displayName: 'Testnet on Paseo',
+    name: 'Testnet on Paseo',
     pathName: 'testnet',
     endpoint: 'wss://0.rpc.testnet.amplica.io',
     genesisHash: '0x203c6838fc78ea3660a2f298a58d859519c72a5efdc0f194abd6f0d5ce1838e0',
   },
-  { id: NetworkType.LOCALHOST, displayName: 'Localhost', pathName: 'localhost', endpoint: 'ws://127.0.0.1:9944' },
+  { id: NetworkType.LOCALHOST, name: 'Localhost', pathName: 'localhost', endpoint: 'ws://127.0.0.1:9944' },
 ];
 
 export const allNetworks =
-  writable<NetworkInfo[]>(defaultNetworks.concat( [{ id: NetworkType.CUSTOM, displayName: 'Custom', pathName: 'custom' }]));
+  writable<NetworkInfo[]>(defaultNetworks.concat( [{ id: NetworkType.CUSTOM, name: 'Custom', pathName: 'custom' }]));
 
 export const networkNameToNetworkInfo = (name: string|undefined): NetworkInfo|undefined => {
   if (name ===undefined) return undefined;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 920aaf5..47a0c2c 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -61,9 +61,9 @@ export function isValidURL(url: string): boolean {
 
 export function formatNetwork(network: NetworkInfo): string {
   if (network.id === NetworkType.CUSTOM) {
-    return network.displayName;
+    return network.name;
   }
-  return `${network?.displayName ?? ''}: ${network?.endpoint?.toString().replace(/\/$/, '') ?? ''}`;
+  return `${network?.name ?? ''}: ${network?.endpoint?.toString().replace(/\/$/, '') ?? ''}`;
 }
 
 export function formatAccount(account: Account): string {
@@ -76,7 +76,7 @@ export function formatAccount(account: Account): string {
 // create a URL-encoded mailto URL string using the provided parameters.
 export function createMailto(to: string, subject?: string, body?: string): string {
   // this regex is not at all rigourous, it's just for preventing blatant errors
-  const emailRegex = /^[\w\-\.]+@([\w-]+\.)+[\w-]{2,}$/; // eslint-disable-line no-useless-escape
+  const emailRegex = /^[\w\-.]+@([\w-]+\.)+[\w-]{2,}$/; // eslint-disable-line no-useless-escape
   const matches = to.match(emailRegex);
   if (matches === null) {
     throw `to is not an email address: ${to}`;
diff --git a/src/routes/+page.svelte b/src/routes/[[network=networks]]/+page.svelte
similarity index 100%
rename from src/routes/+page.svelte
rename to src/routes/[[network=networks]]/+page.svelte
diff --git a/test/playwright/navigation.test.ts b/test/playwright/navigation.test.ts
index e1059b4..4cebe8e 100644
--- a/test/playwright/navigation.test.ts
+++ b/test/playwright/navigation.test.ts
@@ -1,4 +1,13 @@
 import { test, expect } from '@playwright/test';
+import Page from '$routes/+page.svelte';
+
+// Mainnet: 1, testnet: 2, localhost: 3
+// selects the option and then it must fire a change event.
+const selectNetwork = async (page: Page, index: number) => {
+  await page.locator('select#network').selectOption({index});
+  await page.locator('select#network').dispatchEvent('change');
+
+}
 
 test('Navigation from home page', async ({ page }) => {
   await page.goto('/');
@@ -57,12 +66,26 @@ test('On provider login page, can change networks', async ({page}) => {
   await page.waitForURL('**/');
   await expect(page.getByText('Provider Login')).toBeVisible();
 
-  await page.locator('select#network').selectOption({index: 1});
-  await page.locator('select#network').dispatchEvent('change');
-
+  await selectNetwork(page, 2);
 
-  await expect(page.getByText(/Connected to Mainnet/i)).toBeVisible();
+  await expect(page.getByText(/Connected to Testnet on Paseo/i)).toBeVisible();
   await page.getByText(/Change networks/).click({ force: true});
-  await expect(page.getByText(/Connected to Mainnet/i)).not.toBeVisible();
+  await expect(page.getByText(/Connected to Testnet on Paseo/i)).not.toBeVisible();
   await expect(page.getByLabel(/Select a Network/i)).toBeVisible();
 })
+
+test('When selecting a network from Provider Login, updates URL', async ({page}) => {
+  await page.goto('/');
+  await page.waitForURL('**/');
+  await selectNetwork(page, 1);
+  await expect(page.getByText(/Connected to Mainnet/i)).toBeVisible();
+  expect(page.url().endsWith('mainnet'))
+});
+
+test('When selecting a network from Become A Provider, updates URL', async ({page}) => {
+  await page.goto('/become-a-provider');
+  await page.waitForURL('**/become-a-provider');
+  await selectNetwork(page, 1);
+  await expect(page.getByText(/Connected to Mainnet/i)).toBeVisible();
+  expect(page.url().endsWith('/become-a-provider/mainnet'))
+});