Merge branch 'main' into hot-fix-fixed-nav

frequency-chain · Jan 17, 2024 · 59d8e63 · 59d8e63
2 parents d1d95fb + 604120f
commit 59d8e63
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 55 deletions.
diff --git a/src/components/Dashboard.svelte b/src/components/Dashboard.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import Connect from '$components/Connect.svelte';
+  import Capacity from '$components/Capacity.svelte';
+  import Provider from '$components/Provider.svelte';
+  import KeySelection from '$components/KeySelection.svelte';
+  import ProviderActions from '$components/ProviderActions.svelte';
+  import ChainStatus from '$components/ChainStatus.svelte';
+  import type { ChainInfo } from '$lib/storeTypes';
+
+  import {
+    storeBlockNumber,
+    storeChainInfo,
+    storeConnected,
+    storeMsaInfo,
+    storeToken,
+    storeValidAccounts,
+    transactionSigningAddress,
+  } from '$lib/stores';
+
+  const onChangeTxnSigningAddress = (evt: Event) => {
+    let option = evt.target as HTMLOptionElement;
+    storeMsaInfo.set({ isProvider: false, msaId: 0, providerName: '' });
+    transactionSigningAddress.set(option.value);
+  };
+
+  let token = '';
+
+  storeToken.subscribe((val) => (token = val));
+  let blockNumber = 0n;
+  let epochNumber = 0n;
+  let connected = false;
+  let validAccounts = {};
+
+  // TODO: put all this in chainInfo and update how it's stored.
+  storeBlockNumber.subscribe((val) => (blockNumber = val));
+  storeConnected.subscribe((val) => (connected = val));
+  storeValidAccounts.subscribe((val) => (validAccounts = val));
+  storeChainInfo.subscribe((info: ChainInfo) => (epochNumber = info.epochNumber));
+</script>
+
+<ChainStatus {blockNumber} {connected} {token} {epochNumber} />
+<div class="flex justify-center">
+  <Provider />
+  <Capacity bind:token />
+</div>
+<div class="mt-8 text-white">
+  <form id="setupForm">
+    <Connect />
+    <div class:hidden={!connected} class="mt-8">
+      <KeySelection
+        component="TransactionSigningKey"
+        selectLabel="Choose a Wallet Address"
+        selectedOption={''}
+        onSelect={onChangeTxnSigningAddress}
+        {validAccounts}
+      />
+    </div>
+  </form>
+  <ProviderActions {validAccounts} />
+</div>
diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let label: string;
+  export let id: string = '';
+  export let options: Record<string, string>;
+  export let selected: string = '';
+  export let placeholder: string = '';
+  export let onChange = () => {};
+  export let onSelect = () => {};
+  export let required = false;
+  export let disabled = false;
+</script>
+
+<label class="label block mb-3.5" for={id}>{label}</label>
+<select {id} bind:value={selected} {required} {disabled} on:change={onChange} on:select={onSelect}>
+  {#if placeholder !== ''}
+    <option class="text-disabled" value="" disabled selected>{placeholder}</option>
+  {/if}
+  {#each Object.entries(options) as [key, value]}
+    <option value={key} class="bg-base">{key}: {value}</option>
+  {/each}
+</select>
+
+<style>
+  option[value=''][disabled] {
+    display: none;
+  }
+</style>
diff --git a/src/components/ProviderLogin.svelte b/src/components/ProviderLogin.svelte
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -14,4 +14,24 @@ export const storeCurrentAction = writable(ActionForms.NoForm);
 
 export const storeToken = writable('');
 
-export const storeChainInfo = writable({ connected: false, blockNumber: 0n, epochNumber: 0n, token: ''});
+export const storeChainInfo = writable({ connected: false, blockNumber: 0n, epochNumber: 0n, token: '' });
+
+export enum PageContent {
+    Dashboard = 'dashboard',
+    Login = 'login',
+    BecomeProvider = 'becomeProvider'
+}
+
+const createPageContentStore = () => {
+    const { subscribe, set, update } = writable(PageContent.Login);
+
+    return {
+        subscribe,
+        set,
+        login: () => set(PageContent.Login),
+        becomeProvider: () => set(PageContent.BecomeProvider),
+        dashboard: () => set(PageContent.Dashboard)
+    };
+}
+
+export const pageContent = createPageContentStore();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,58 +1,17 @@
 <script lang="ts">
-  import {
-    storeBlockNumber,
-    storeChainInfo,
-    storeConnected,
-    storeMsaInfo,
-    storeToken,
-    storeValidAccounts,
-    transactionSigningAddress,
-  } from '$lib/stores';
-  import Connect from '$components/Connect.svelte';
-  import Capacity from '$components/Capacity.svelte';
-  import Provider from '$components/Provider.svelte';
-  import KeySelection from '$components/KeySelection.svelte';
-  import ProviderActions from '$components/ProviderActions.svelte';
-  import ChainStatus from '$components/ChainStatus.svelte';
-  import type { ChainInfo, MsaInfo } from '$lib/storeTypes';
+  import bottomleft from '$lib/assets/bottom-left-bars.png';
+  import Dashboard from '$components/Dashboard.svelte';
+  import RequestToBeProvider from '$components/RequestToBeProvider.svelte';
+  import ProviderLogin from '$components/ProviderLogin.svelte';
+  import { pageContent, PageContent } from '$lib/stores';
 
-  let token = '';
-  let blockNumber = 0n;
-  let epochNumber = 0n;
-  let connected = false;
-  let validAccounts = {};
-
-  // TODO: put all this in chainInfo and update how it's stored.
-  storeBlockNumber.subscribe((val) => (blockNumber = val));
-  storeToken.subscribe((val) => (token = val));
-  storeConnected.subscribe((val) => (connected = val));
-  storeValidAccounts.subscribe((val) => (validAccounts = val));
-  storeChainInfo.subscribe((info: ChainInfo) => (epochNumber = info.epochNumber));
-
-  const onChangeTxnSigningAddress = (evt: Event) => {
-    let option = evt.target as HTMLOptionElement;
-    storeMsaInfo.set({ isProvider: false, msaId: 0, providerName: '' });
-    transactionSigningAddress.set(option.value);
-  };
+  $pageContent = PageContent.Dashboard;
 </script>
 
-<ChainStatus {blockNumber} {connected} {token} {epochNumber} />
-<div class="flex justify-center">
-  <Provider />
-  <Capacity bind:token />
-</div>
-<div class="mt-8 text-white">
-  <form id="setupForm">
-    <Connect />
-    <div class:hidden={!connected} class="mt-8">
-      <KeySelection
-        component="TransactionSigningKey"
-        selectLabel="Choose a Wallet Address"
-        selectedOption={''}
-        onSelect={onChangeTxnSigningAddress}
-        {validAccounts}
-      />
-    </div>
-  </form>
-  <ProviderActions {validAccounts} />
-</div>
+{#if $pageContent === PageContent.Dashboard}
+<Dashboard />
+{:else if $pageContent === PageContent.Login}
+<ProviderLogin />
+{:else if $pageContent === PageContent.BecomeProvider}
+<RequestToBeProvider />
+{/if}