cleanup of activity log

src/components/ActivityLogPreview.svelte

@@ -6,7 +6,7 @@
   let recentActivityItem: Activity;
 
   $: {
-    recentActivityItem = $activityLog[$activityLog.length - 1];
+    recentActivityItem = $activityLog[0];
   }
 </script>
 

src/components/AddControlKey.svelte

@@ -15,17 +15,15 @@
 
   let selectedAccount: Account | null;
 
-  let showTransactionStatus = false;
-
-  $: isSubmitDisabled = selectedAccount?.injectedAccount == null || showTransactionStatus;
+  $: isSubmitDisabled = selectedAccount?.injectedAccount == null;
 
   const addControlKey = async () => {
     if (!selectedAccount || !selectedAccount.injectedAccount) {
       alert('Please choose a key to add.');
     } else if (!$user.msaId || !$user.injectedAccount) {
       alert('Invalid provider.');
     } else {
-      showTransactionStatus = true;
+      close();
       await submitAddControlKey(
         $dotApi.api as ApiPromise,
         await getExtension($user),
@@ -38,7 +36,6 @@
 
   function onCancel() {
     selectedAccount = null;
-    showTransactionStatus = false;
     close();
   }
 </script>

src/components/BecomeAProvider.svelte

@@ -43,7 +43,7 @@
           <CreateProvider {updateUser} />
         {/if}
       {:else}
-        <button on:click|preventDefault={cancelAction} class="btn-no-fill text-left">Cancel</button>
+        <button on:click|preventDefault={cancelAction} class="btn-no-fill text-left">Back</button>
       {/if}
     </form>
   </BlockSection>

src/components/LoginForm.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { providerAccountsStore, type Account } from '$lib/stores/accountsStore';
+  import { writableActivityLog } from '$lib/stores/activityLogStore';
   import { user } from '$lib/stores/userStore';
   import Button from './Button.svelte';
   import SelectNetworkAndAccount from './SelectNetworkAndAccount.svelte';
@@ -16,6 +17,7 @@
       alert('Invalid form values');
       return;
     }
+    if ($user.network) $writableActivityLog = [];
     $user = newUser;
     onConnect();
   }

src/components/Nav.svelte

@@ -2,23 +2,28 @@
   import { logout } from '$lib/stores';
   import { isLoggedIn } from '$lib/stores';
   import iconLogo from '$lib/assets/icon-logo.png';
-  import { onMount } from 'svelte';
   import NavItem from '$components/NavItem.svelte';
 
-  let url = '/';
-  onMount(() => (url = window.location.pathname));
+  $: url = window.location.pathname;
+
+  const handleLogout = () => {
+    logout();
+    url = '/';
+  };
 </script>
 
 <div class="fixed flex h-screen w-[126px] min-w-[126px] flex-col items-center justify-center bg-bg-black">
   <img alt="iconLogo" src={iconLogo} class="absolute left-6 top-7 w-[57px]" />
   <div class="flex w-[100%] flex-col">
-    <NavItem href="/" isActive={url === '/'}>Home</NavItem>
+    <NavItem href="/" isActive={url === '/'} onClick={() => (url = '/')}>Home</NavItem>
     {#if $isLoggedIn === true}
-      <NavItem href="/activity-log" isActive={url === '/activity-log'}>Activity Log</NavItem>
+      <NavItem href="/activity-log" isActive={url === '/activity-log'} onClick={() => (url = '/activity-log')}
+        >Activity Log</NavItem
+      >
     {/if}
-    <NavItem href="/faq" isActive={url === '/faq'}>FAQ's</NavItem>
+    <NavItem href="/faq" isActive={url === '/faq'} onClick={() => (url = '/faq')}>FAQ's</NavItem>
     {#if $isLoggedIn === true}
-      <NavItem id="logout-button" href="/" onClick={logout}>Logout</NavItem>
+      <NavItem id="logout-button" href="/" onClick={handleLogout}>Logout</NavItem>
     {:else}
       <NavItem />
     {/if}

src/lib/stores.ts

@@ -5,6 +5,7 @@ import { derived } from 'svelte/store';
 import { user } from './stores/userStore';
 import { pageContent } from './stores/pageContentStore';
 import { createApi } from '../hooks.client';
+import { writableActivityLog } from './stores/activityLogStore';
 
 export const dotApi = writable<DotApi>(defaultDotApi);
 
@@ -28,6 +29,7 @@ export const logout = () => {
   dotApi.set(defaultDotApi);
   storeChainInfo.set({ connected: false, blockNumber: 0n, epochNumber: 0n, token: '' });
   pageContent.login();
+  writableActivityLog.set([]);
 };
 
 export const storeChainInfo = storable('storeChainInfo', {

src/lib/stores/activityLogStore.ts

@@ -1,15 +1,16 @@
 import { TxnStatus, type Activity } from '$lib/storeTypes';
 import { storable } from './storable';
-import { readonly } from 'svelte/store';
+import { derived, readonly } from 'svelte/store';
 import type { EventRecord, ExtrinsicStatus } from '@polkadot/types/interfaces';
+import { user } from './userStore';
 
 //writableActivityLog: Oldest to Newest
-const writableActivityLog = storable<Activity[]>('ActivityLog', []);
+export const writableActivityLog = storable<Activity[]>('ActivityLog', []);
 export const activityLog = readonly(writableActivityLog);
 
 export const handleResult = (txnId: string) => async (result: any) => {
   const activity: Activity = parseActivity(txnId, result);
-    addNewTxnStatus(activity);
+  addNewTxnStatus(activity);
 };
 
 export const handleTxnError = (txnId: string, errorMsg: string) => {

src/routes/+layout.svelte

@@ -10,7 +10,7 @@
 
   $: {
     $dotApi?.api?.rpc.system.properties().then((chain) => {
-      if ($dotApi?.api && chain) {       
+      if ($dotApi?.api && chain) {
         const token = getToken(chain);
         Promise.all([getBlockNumber($dotApi.api), getEpoch($dotApi.api)])
           .then(([blockNumber, epochNumber]) => {

src/routes/activity-log/+page.svelte

@@ -7,7 +7,7 @@
   let activityItems: Activity[];
 
   $: {
-    activityItems = $activityLog.reverse();
+    activityItems = $activityLog;
   }
 </script>