230 bug become provider refresh error (#232)

## Goal

The goal of this PR is to use the persistent state to keep the dropdowns
populated on refresh, resolving the bug.

Closes #230 

## Discussion

To recreate the bug on main:
- go to become a provider
- select network and address
- see create msa or enter provider name
- reload page
- dropdowns are cleared, but create msa/enter provider name persists
- if you go to the values in the store, you'll see that the selected
user values are there (which is why we still see the create msa option),
but the dropdowns aren't accessing those values.

## Checklist

- [ ] PR Self-Review and Commenting
- [ ] Docs updated
- [ ] Tests added

## Demo


https://github.com/user-attachments/assets/68603d11-8234-446c-a297-1795b13d2c7f

Author: claireclark1

src/components/atoms/DropDownMenu.svelte

@@ -9,6 +9,7 @@
     placeholder?: string;
     onChange?: (() => void) | undefined;
     formatter?: (value: T) => string;
+    getKey?: (item: T) => string;
     isLoading?: boolean;
     disabled?: boolean;
     [key: string]: unknown;
@@ -18,36 +19,37 @@
     label,
     id = '',
     options,
-    value = $bindable(null),
+    value = $bindable<T | null>(null),
     placeholder = '',
     onChange = undefined,
     formatter = (value: T) => value.toString(),
+    getKey = (item: T) => item.toString(),
     isLoading = false,
     disabled = false,
     ...rest
   }: Props = $props();
 </script>
 
-<div class="column freq-select gap-f8 w-full max-w-[460px]">
+<div class="column freq-select gap-f8">
   <label class="font-bold" for={id}>{label}</label>
-  <select
-    {...rest}
-    {id}
-    bind:value
-    onchange={onChange}
-    data-test-id={id}
-    class="mt-f8 pr-f32 outline-gray3 hover:outline-teal focus-visible:outline-gray3 disabled:outline-gray3 disabled:hover:outline-gray3 disabled:focus-visible:outline-gray3 relative m-0 cursor-pointer rounded-md bg-white p-2 align-middle outline focus-visible:outline
-    active:outline
-    disabled:cursor-not-allowed"
-    disabled={isLoading || disabled}
-  >
-    <option class="text-gray3" value={null} disabled>{placeholder}</option>
-    {#each options as option}
-      <option value={option}>{formatter(option)}</option>
-    {/each}
-  </select>
-  {#if isLoading}
-    <LoadingIcon />
-  {/if}
-  <div class="select-arrow"></div>
+  <div class="gap-f12 flex flex-row items-center">
+    <select
+      {...rest}
+      {id}
+      bind:value
+      onchange={onChange}
+      data-test-id={id}
+      class="mt-f8 pr-f32 outline-gray3 hover:outline-teal focus-visible:outline-gray3 disabled:outline-gray3 disabled:hover:outline-gray3 disabled:focus-visible:outline-gray3 relative m-0 w-full max-w-[420px] cursor-pointer rounded-md bg-white p-2 align-middle outline focus-visible:outline active:outline disabled:cursor-not-allowed"
+      disabled={isLoading || disabled}
+    >
+      <option class="text-gray3" value={null} disabled>{placeholder}</option>
+      {#each options as option}
+        <option value={option}>{formatter(option)}</option>
+      {/each}
+    </select>
+    {#if isLoading}
+      <LoadingIcon />
+    {/if}
+    <div class="select-arrow"></div>
+  </div>
 </div>

src/components/features/BecomeProviderNextSteps/CreateProvider.svelte

@@ -70,7 +70,14 @@
 <form id="create-provider" class="column gap-f16">
   <div>
     <label for="providerNameCB" class="label block">Provider name</label>
-    <input id="providerNameCB" class="" required placeholder="Short name" maxlength={16} bind:value={newProviderName} />
+    <input
+      id="providerNameCB"
+      type="text"
+      required
+      placeholder="Short name"
+      maxlength={16}
+      bind:value={newProviderName}
+    />
   </div>
   <div class="flex items-end justify-between">
     <Button

src/components/features/BecomeProviderNextSteps/RequestToBeProvider.svelte

@@ -59,7 +59,14 @@
     <form class="column">
       <div>
         <label for="providerNameRtB" class="label mb-3.5 block">Provider name</label>
-        <input id="providerNameRtB" required placeholder="Short name" maxlength={16} bind:value={newProviderName} />
+        <input
+          type="text"
+          id="providerNameRtB"
+          required
+          placeholder="Short name"
+          maxlength={16}
+          bind:value={newProviderName}
+        />
       </div>
       <div class="flex w-[350px] justify-between">
         <button

src/components/features/LoginForm/LoginForm.svelte

@@ -14,11 +14,11 @@
   let { onConnect = () => {}, onCancel = undefined }: Props = $props();
 
   // Get the matching account object safely
-  let newUser: Account | undefined = $state($providerAccountsStore.get($user.address));
+  let newUser: Account | null = $state($providerAccountsStore.get($user.address) ?? null);
 
   // Derive whether we can connect
   const canConnect = $derived.by(() => {
-    console.log(newUser);
+    console.log('Selected new user: ', newUser);
     return newUser?.network != null && $providerAccountsStore.size > 0 && newUser?.address !== '';
   });
 

src/components/features/SelectNetworkAndAccount/SelectNetworkAndAccount.svelte

@@ -11,7 +11,7 @@
   import { createApi } from '$lib/polkadotApi';
 
   interface Props {
-    newUser: Account | undefined;
+    newUser: Account | null;
     accounts: Accounts;
     accountSelectorTitle?: string;
     accountSelectorPlaceholder?: string;
@@ -30,8 +30,8 @@
   let thisWeb3Enable: typeof web3Enable;
   let thisWeb3Accounts: typeof web3Accounts;
 
-  let selectedAccount: Account | null = $state(null);
-  let selectedNetwork: NetworkInfo | null = $state(null);
+  let selectedAccount: Account | null = $state(newUser);
+  let selectedNetwork: NetworkInfo | null = $state(newUser?.network ?? null);
   let customNetwork: string = $state('');
   let isCustomNetwork: boolean = $state(false);
   let isLoading: boolean = $state(false);
@@ -111,14 +111,30 @@
     }
   }
 
+  function findMatchingAccount(): Account | null {
+    for (const account of accounts.values()) {
+      if (JSON.stringify(account) === JSON.stringify(selectedAccount)) return account;
+    }
+    return null;
+  }
+
+  $effect(() => {
+    if (accounts && selectedAccount) {
+      const match = findMatchingAccount();
+      if (match && match !== selectedAccount) {
+        selectedAccount = match;
+      }
+    }
+  });
+
   const resetState = () => {
     selectedNetwork = null;
     selectedAccount = null;
     isCustomNetwork = false;
     connectedToEndpoint = false;
     networkErrorMsg = '';
     controlKeysErrorMsg = '';
-    newUser = undefined;
+    newUser = null;
   };
 </script>