list card component created and styled

frequency-chain · Jan 17, 2024 · 6da4528 · 6da4528
1 parent 5c83e86
commit 6da4528
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 97 deletions.
diff --git a/src/components/Capacity.svelte b/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>
diff --git a/src/components/ListCard.svelte b/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>
diff --git a/src/components/Provider.svelte b/src/components/Provider.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
-  import { dotApi, storeConnected, storeMsaInfo, storeToken, transactionSigningAddress } from '$lib/stores';
+  import {
+    dotApi,
+    storeConnected,
+    storeMsaInfo,
+    storeToken,
+    transactionSigningAddress,
+    storeCurrentAction,
+  } from '$lib/stores';
   import type { MsaInfo } from '$lib/storeTypes';
   import { balanceToHuman } from '$lib/utils';
   import type { ApiPromise } from '@polkadot/api';
   import { getBalances } from '$lib/polkadotApi';
   import type { AccountBalances } from '$lib/polkadotApi';
+  import ListCard from './ListCard.svelte';
+  import { ActionForms } from '$lib/storeTypes.js';
 
   let msaInfo: MsaInfo;
   let accountBalances: AccountBalances = { free: 0n, reserved: 0n, frozen: 0n };
@@ -22,67 +31,31 @@
     }
   });
 
-  let localSigningAddress = ''; // eslint-disable-line no-unused-vars
+  let signingAddress = ''; // eslint-disable-line no-unused-vars
   transactionSigningAddress.subscribe(async (val) => {
-    localSigningAddress = val;
+    signingAddress = val;
     if (api) {
       accountBalances = await getBalances(api, val);
     }
   });
 
-  storeMsaInfo.subscribe((info: MsaInfo) => {
-    msaInfo = info;
+  storeMsaInfo.subscribe((info) => {
+    msaInfo = info as MsaInfo;
   });
+
+  function showAddControlKey() {
+    storeCurrentAction.set(ActionForms.AddControlKey);
+  }
+
+  $: providerList = [
+    { label: 'Id', value: msaInfo?.msaId.toString() },
+    { label: 'Name', value: msaInfo?.providerName },
+    { label: 'Total Balance', value: balanceToHuman(accountBalances.free + accountBalances.frozen, token) },
+    { label: 'Transferable', value: balanceToHuman(accountBalances.free, token) },
+    { label: 'Locked', value: balanceToHuman(accountBalances.frozen, token) },
+  ];
 </script>
 
-<div class="p-14 action-card flex-grow min-w-fit font-semibold tracking-wider bg-bg-black align-top">
-  <table>
-    <tr>
-      <td colspan="2" class="text-2xl pb-6">Provider</td>
-    </tr>
-    {#if !connected}
-      <tr>
-        <td colspan="2">Not connected</td>
-      </tr>
-    {:else if localSigningAddress === ''}
-      <tr>
-        <td colspan="2">No transaction signing address selected</td>
-      </tr>
-    {:else}
-      {#if msaInfo?.msaId === 0}
-        <tr>
-          <td colspan="2">No Msa Id. Please create an MSA first.</td>
-        </tr>
-      {:else}
-        <tr>
-          <td>Id:</td>
-          <td class="pl-4 font-medium">{msaInfo.msaId}</td>
-        </tr>
-      {/if}
-      {#if msaInfo?.isProvider}
-        <tr>
-          <td>Name:</td>
-          <td class="pl-4 font-medium">{msaInfo.providerName}</td>
-        </tr>
-      {:else if msaInfo.msaId > 0}
-        <tr>
-          <td colspan="2">Selected Key is not associated with a Provider</td>
-        </tr>
-      {/if}
-    {/if}
-    {#if localSigningAddress !== ''}
-      <tr>
-        <td>Total Balance:</td>
-        <td class="pl-4 font-light">{balanceToHuman(accountBalances.free + accountBalances.frozen, token)}</td>
-      </tr>
-      <tr>
-        <td>Transferable:</td>
-        <td class="pl-4 font-light"> {balanceToHuman(accountBalances.free, token)}</td>
-      </tr>
-      <tr>
-        <td>Locked:</td>
-        <td class="pl-4 font-light"> {balanceToHuman(accountBalances.frozen, token)}</td>
-      </tr>
-    {/if}
-  </table>
-</div>
+<ListCard title="Provider" list={providerList} {signingAddress} {msaInfo} {connected}>
+  <button on:click|preventDefault={showAddControlKey} class="btn-primary">Add control key</button>
+</ListCard>
diff --git a/src/components/ProviderActions.svelte b/src/components/ProviderActions.svelte
@@ -64,20 +64,20 @@
 
 {#if msaInfo?.isProvider}
   <div class="w-500 flex justify-between">
-    <button on:click|preventDefault={showAddControlKey} class='btn-primary mr-4 grow'> Add control key </button>
-    <button on:click={showStake} class='btn-primary ml-4 grow'> Stake To Provider </button>
+    <button on:click|preventDefault={showAddControlKey} class="btn-primary mr-4 grow"> Add control key </button>
+    <button on:click={showStake} class="btn-primary ml-4 grow"> Stake To Provider </button>
   </div>
 {:else if msaInfo?.msaId > 0}
   <button
     on:click|preventDefault={showCreateOrRequestProvider}
     class:hidden={signingAddress === ''}
-    class='btn-primary'
+    class="btn-primary"
   >
     Become a Provider
   </button>
 {:else if signingAddress !== ''}
   <p class="mt-6 p-2">The selected signing address does not have an MSA. An MSA is required to become a Provider.</p>
-  <button on:click|preventDefault={showCreateMsa} class:hidden={signingAddress === ''} class='btn-primary'>
+  <button on:click|preventDefault={showCreateMsa} class:hidden={signingAddress === ''} class="btn-primary">
     Create an MSA
   </button>
 {/if}

diff --git a/src/routes/+page.svelte b/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}
diff --git a/src/style/app.css b/src/style/app.css
@@ -21,7 +21,12 @@
   .action-card-title {
     @apply font-semibold text-2xl;
   }
-
+
+  /* layout */
+  .content-block {
+    @apply bg-bg-black rounded-md p-7;
+  }
+
   /* typeography */
   /* headers */
   .section-title {