only above to select from provider accounts. provider accounts now sa…

…ved in store. (#94)

closes #92

---------

Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>

src/components/Connect.svelte

@@ -52,7 +52,13 @@
     storeMsaInfo.set({ isProvider: false, msaId: 0, providerName: '' });
     try {
       await getApi(selectedProviderURI, thisDotApi, wsProvider);
-      await loadAccounts(selectedProviderURI, selectedProvider, thisWeb3Enable, thisWeb3Accounts);
+      await loadAccounts(
+        selectedProviderURI,
+        selectedProvider,
+        thisWeb3Enable,
+        thisWeb3Accounts,
+        thisDotApi.api as ApiPromise
+      );
       await updateConnectionStatus(thisDotApi.api as ApiPromise);
     } catch (e: any) {
       console.error('Error: ', e);

src/components/KeySelection.svelte

@@ -10,11 +10,7 @@
 
 <p class="text-2xl"><label for={`signing-address-${component}`}>{selectLabel}</label></p>
 <div class="{classOverrides} inline-block mt-2">
-  <select id={`signing-address-${component}`}
-          bind:value={selectedOption}
-          on:change={onSelect}
-          class="text-black px-6 py-2 rounded-md border-0 pr-10"
-  >
+  <select id={`signing-address-${component}`} bind:value={selectedOption} on:change={onSelect}>
     {#each Object.keys(validAccounts) as address}
       <option value={address}>{validAccounts[address].meta.name}: {address}</option>
     {/each}

src/lib/polkadotApi.ts

@@ -1,6 +1,13 @@
 import { ApiPromise, Keyring, WsProvider } from '@polkadot/api';
 import { GENESIS_HASHES, getBlockNumber, getEpoch } from './connections';
-import { dotApi, storeBlockNumber, storeConnected, storeToken, storeValidAccounts } from './stores';
+import {
+  dotApi,
+  storeBlockNumber,
+  storeConnected,
+  storeToken,
+  storeValidAccounts,
+  storeProviderAccounts,
+} from './stores';
 import { isLocalhost } from './utils';
 import { options } from '@frequency-chain/api-augment';
 
@@ -51,7 +58,8 @@ export async function loadAccounts(
   selectedProviderURI: string,
   selectedProvider: string,
   thisWeb3Enable: typeof web3Enable,
-  thisWeb3Accounts: typeof web3Accounts
+  thisWeb3Accounts: typeof web3Accounts,
+  apiPromise: ApiPromise
 ) {
   // populating for localhost and for a parachain are different since with localhost, there is
   // access to the Alice/Bob/Charlie accounts etc., and so won't use the extension.
@@ -82,6 +90,14 @@ export async function loadAccounts(
   // to avoid updating subscribers with an empty list
   if (Object.keys(foundAccounts).length > 0) {
     storeValidAccounts.update((val) => (val = foundAccounts));
+
+    let foundProviderAccounts: AccountMap | MetaMap = {};
+    for (let index in Object.keys(foundAccounts)) {
+      const account = Object.values(foundAccounts)[index];
+      const { isProvider } = await getMsaInfo(apiPromise, account.address);
+      if (isProvider) foundProviderAccounts[account.address] = account;
+    }
+    storeProviderAccounts.update((val) => (val = foundProviderAccounts));
   }
 }
 
@@ -113,21 +129,31 @@ export async function getBalances(apiPromise: ApiPromise, accountId: string): Pr
   };
 }
 
-export async function getMsaEpochAndCapacityInfo(
-  apiPromise: ApiPromise,
-  accountId: string
-): Promise<{ epochNumber: bigint; msaInfo: MsaInfo; capacityDetails: any }> {
+export async function getMsaInfo(apiPromise: ApiPromise, accountId: string): Promise<MsaInfo> {
   const received: u64 = (await apiPromise.query.msa.publicKeyToMsaId(accountId)).unwrapOrDefault();
   const msaInfo: MsaInfo = { isProvider: false, msaId: 0, providerName: '' };
   msaInfo.msaId = received.toNumber();
-  const epochNumber = await getEpoch(apiPromise);
-  let capacityDetails;
   if (msaInfo.msaId > 0) {
     const providerRegistry: Option<any> = await apiPromise.query.msa.providerToRegistryEntry(msaInfo.msaId);
     if (providerRegistry.isSome) {
       msaInfo.isProvider = true;
       const registryEntry = providerRegistry.unwrap();
       msaInfo.providerName = registryEntry.providerName;
+    }
+  }
+  return msaInfo;
+}
+
+export async function getMsaEpochAndCapacityInfo(
+  apiPromise: ApiPromise,
+  accountId: string
+): Promise<{ epochNumber: bigint; msaInfo: MsaInfo; capacityDetails: any }> {
+  const msaInfo = await getMsaInfo(apiPromise, accountId);
+  const epochNumber = await getEpoch(apiPromise);
+  let capacityDetails;
+  if (msaInfo.msaId > 0) {
+    const providerRegistry: Option<any> = await apiPromise.query.msa.providerToRegistryEntry(msaInfo.msaId);
+    if (providerRegistry.isSome) {
       const details: any = (await apiPromise.query.capacity.capacityLedger(msaInfo.msaId)).unwrapOrDefault();
       capacityDetails = {
         remainingCapacity: details.remainingCapacity.toBigInt(),

src/lib/stores.ts

@@ -2,7 +2,12 @@ import { writable } from 'svelte/store';
 import { ActionForms, defaultDotApi } from '$lib/storeTypes';
 
 export const storeConnected = writable(false);
+
+//All accounts
 export const storeValidAccounts = writable({});
+//Only provider accounts
+export const storeProviderAccounts = writable({});
+
 export const transactionSigningAddress = writable('');
 
 export const storeMsaInfo = writable();
@@ -34,4 +39,4 @@ const createPageContentStore = () => {
     };
 }
 
-export const pageContent = createPageContentStore();
+export const pageContent = createPageContentStore();

src/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  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';
@@ -9,9 +8,9 @@
 </script>
 
 {#if $pageContent === PageContent.Dashboard}
-<Dashboard />
+  <Dashboard />
 {:else if $pageContent === PageContent.Login}
-<ProviderLogin />
+  <ProviderLogin />
 {:else if $pageContent === PageContent.BecomeProvider}
-<RequestToBeProvider />
+  <RequestToBeProvider />
 {/if}

src/style/app.css

@@ -21,7 +21,7 @@
   .action-card-title {
     @apply font-semibold text-2xl;
   }
-  
+
   /* typeography */
   /* headers */
   .section-title {
@@ -59,7 +59,7 @@
   input,
   [type='text'],
   select {
-    @apply w-[320px] h-[30px] text-black rounded-md text-sm py-0 px-2 border-none outline-none disabled:opacity-85 disabled:text-disabled;
+    @apply w-[320px] h-[30px] text-black rounded-md text-sm py-0 pl-2 pr-7 border-none outline-none disabled:opacity-85 disabled:text-disabled overflow-ellipsis;
   }
 
   ::placeholder {