list card component created and styled

package.json

@@ -27,11 +27,12 @@
 		"@tailwindcss/forms": "^0.5.7",
 		"@testing-library/jest-dom": "^6.2.0",
 		"@testing-library/svelte": "^4.0.5",
+		"@testing-library/user-event": "^14.5.2",
+		"@types/jest": "^29.5.11",
 		"@typescript-eslint/eslint-plugin": "^6.18.1",
 		"@typescript-eslint/parser": "^6.18.1",
 		"@vitest/coverage-v8": "^1.1.3",
 		"@vitest/ui": "^1.1.3",
-		"@testing-library/user-event": "^14.5.2",
 		"autoprefixer": "^10.4.16",
 		"eslint": "^8.56.0",
 		"eslint-plugin-svelte": "^2.35.1",

src/components/AddControlKey.svelte

@@ -3,11 +3,11 @@
   import type { ApiPromise } from '@polkadot/api';
   import { submitAddControlKey } from '$lib/connections';
   import { ActionForms, defaultDotApi } from '$lib/storeTypes';
-  import KeySelection from './KeySelection.svelte';
   import { onMount } from 'svelte';
   import { isFunction } from '@polkadot/util';
   import { isLocalhost } from '$lib/utils';
   import TransactionStatus from './TransactionStatus.svelte';
+  import DropDownMenu from './DropDownMenu.svelte';
 
   let connected = false;
   let thisDotApi = defaultDotApi;
@@ -111,12 +111,11 @@
     </ul>
   </ol>
   <form class="mt-8">
-    <KeySelection
-      component="AddControlKey"
-      selectLabel="Key to Add"
-      bind:selectedOption={selectedKeyToAdd}
-      {validAccounts}
-      classOverrides="border-2 rounded-lg"
+    <DropDownMenu
+      id="AddControlKey"
+      label="Key to Add"
+      selected={selectedKeyToAdd}
+      options={validAccounts}
     />
     <div class="flex w-350 justify-between">
       <button on:click|preventDefault={addControlKey} class="btn-primary">Add It</button>

src/components/Capacity.svelte

@@ -6,22 +6,25 @@
     storeMsaInfo,
     storeBlockNumber,
     storeChainInfo,
+    storeCurrentAction,
   } from '$lib/stores';
   import { getBlockNumber } from '$lib/connections';
   import type { ApiPromise } from '@polkadot/api';
   import type { ChainInfo, MsaInfo } from '$lib/storeTypes';
   import { getMsaEpochAndCapacityInfo } from '$lib/polkadotApi';
   import { providerNameToHuman } from '$lib/utils';
   import { balanceToHuman } from '$lib/utils.js';
+  import ListCard from './ListCard.svelte';
+  import { ActionForms } from '$lib/storeTypes.js';
 
   let signingAddress = ''; // eslint-disable-line no-unused-vars
   let epochNumber = 0n;
   let connected: boolean;
   storeConnected.subscribe((val) => (connected = val));
 
   let msaInfo: MsaInfo = { isProvider: false, msaId: 0, providerName: '' };
-  storeMsaInfo.subscribe((info: MsaInfo) => {
-    msaInfo = info;
+  storeMsaInfo.subscribe((info) => {
+    msaInfo = info as MsaInfo;
   });
 
   storeConnected.subscribe((val) => (connected = val));
@@ -34,7 +37,7 @@
   let blockNumber = 0n;
   storeBlockNumber.subscribe((val) => (blockNumber = val));
 
-  export let token;
+  export let token = '';
 
   type CapacityDetails = {
     remainingCapacity: bigint;
@@ -72,34 +75,19 @@
       storeMsaInfo.set(msaInfo);
     }
   });
+
+  function showStake() {
+    storeCurrentAction.update((val) => (val = ActionForms.Stake));
+  }
+
+  $: capacityList = [
+    { label: 'Remaining', value: balanceToHuman(capacityDetails?.remainingCapacity, 'CAP') },
+    { label: 'Total Issued', value: balanceToHuman(capacityDetails?.totalCapacityIssued, 'CAP') },
+    { label: 'Last Replenished', value: `Epoch ${capacityDetails?.lastReplenishedEpoch}` },
+    { label: 'Staked Token', value: balanceToHuman(capacityDetails?.totalCapacityIssued, token) },
+  ];
 </script>
 
-<div class="p-14 ml-8 flex-grow action-card font-semibold tracking-wider bg-bg-black">
-  <p class="text-2xl pb-6">Capacity</p>
-  {#if !connected}
-    <p>Not connected</p>
-  {:else if msaInfo.isProvider}
-    <table>
-      <tr>
-        <td>Remaining:</td>
-        <td class="pl-4 font-light">{balanceToHuman(capacityDetails?.remainingCapacity, 'CAP')}</td>
-      </tr>
-      <tr>
-        <td>Total Issued: </td>
-        <td class="pl-4 font-light">{balanceToHuman(capacityDetails?.totalCapacityIssued, 'CAP')}</td>
-      </tr>
-      <tr>
-        <td>Last Replenished:</td>
-        <td class="pl-4 font-light">Epoch {capacityDetails?.lastReplenishedEpoch}</td>
-      </tr>
-      <tr>
-        <td>Staked Token: </td>
-        <td class="pl-4 font-light">{balanceToHuman(capacityDetails?.totalCapacityIssued, token)}</td>
-      </tr>
-    </table>
-  {:else if signingAddress == ''}
-    <p>No transaction signing address selected</p>
-  {:else}
-    <p>Not a provider</p>
-  {/if}
-</div>
+<ListCard title="Capacity" list={capacityList} {connected} {msaInfo} {signingAddress}>
+  <button on:click={showStake} class="btn-primary">Stake To Provider</button>
+</ListCard>

src/components/Dashboard.svelte

@@ -39,24 +39,29 @@
   storeChainInfo.subscribe((info: ChainInfo) => (epochNumber = info.epochNumber));
 </script>
 
-<DashboardHeader />
-<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 class="flex flex-col gap-4">
+  <DashboardHeader />
+
+  <ChainStatus {blockNumber} {connected} {token} {epochNumber} />
+
+  <div class="flex justify-center gap-4">
+    <Provider />
+    <Capacity bind:token />
+  </div>
+
+  <div class="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>
 </div>

src/components/DashboardHeader.svelte

@@ -3,7 +3,7 @@
   import ActivityLogPreview from '$components/ActivityLogPreview.svelte';
 </script>
 
-<div class="content-block flex justify-between mb-5">
+<div class="content-block flex justify-between">
   <Profile />
   <ActivityLogPreview />
 </div>

src/components/DropDownMenu.svelte

@@ -10,15 +10,17 @@
   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>
+<div>
+  <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>
+</div>
 
 <style>
   option[value=''][disabled] {

src/components/ListCard.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { MsaInfo } from '$lib/storeTypes';
+
+  export let title = '';
+  export let list: { label: string; value: string }[] = [];
+  export let connected = false;
+  export let signingAddress = '';
+  export let msaInfo: MsaInfo;
+</script>
+
+<div class="content-block flex-grow min-w-fit relative">
+  <p class="section-title border-b border-divider pb-3">{title}</p>
+  {#if !connected}
+    <div class="pt-3">Not connected</div>
+  {:else if signingAddress === ''}
+    <div class="pt-3">No transaction signing address selected</div>
+  {:else if msaInfo?.msaId === 0}
+    <div class="pt-3">No Msa Id. Please create an MSA first.</div>
+  {:else}
+    <div class="mb-16">
+      {#each list as item}
+        <div class="flex justify-between items-center py-3 border-b border-divider">
+          <div class="label">{item.label}</div>
+          <div class="data-value-base">{item.value}</div>
+        </div>
+      {/each}
+      <div class="absolute bottom-7 right-7">
+        <slot />
+      </div>
+    </div>
+  {/if}
+</div>