feat: update message structure

packages/shared/components/ActivityDetail.svelte

@@ -6,14 +6,15 @@
     import { getContext } from 'svelte'
     import { date } from 'svelte-i18n'
     import type { Readable, Writable } from 'svelte/store'
+    import type { Payload } from 'shared/lib/typings/message'
 
     export let id
-    export let incoming
-    export let internal
-    export let value
-    export let payload
+
     export let timestamp
     export let locale
+
+    export let payload: Payload
+
     export let onBackClick = () => {}
 
     const accounts = getContext<Writable<WalletAccount[]>>('walletAccounts')
@@ -30,15 +31,15 @@
             ?.filter((output) => output?.data?.remainder === false)
             ?.map((output) => output?.data?.address) ?? []
 
-    $: senderAccount = !incoming
+    $: senderAccount = !payload.data.essence.data.incoming
         ? $activeAccount
-        : internal
+        : payload.data.essence.data.internal
         ? $accounts.find((acc) => acc.addresses.some((add) => senderAddress === add.address))
         : null
 
-    $: receiverAccount = incoming
+    $: receiverAccount = payload.data.essence.data.incoming
         ? $activeAccount
-        : internal
+        : payload.data.essence.data.internal
         ? $accounts.find((acc) => acc.addresses.some((add) => receiverAddresses.includes(add.address)))
         : null
 </script>
@@ -52,27 +53,27 @@
                     class="flex items-center justify-center w-8 h-8 rounded-xl p-2 mb-2 text-12 leading-100 font-bold text-center bg-{senderAccount?.color ?? 'blue'}-500 text-white">
                     {getInitials(senderAccount.alias, 2)}
                 </div>
-                {#if !incoming}
+                {#if !payload.data.essence.data.incoming}
                     <Text smaller>{locale('general.you')}</Text>
                 {/if}
             {:else}
                 <Text smaller>{truncateString(senderAddress, 3, 3, 3)}</Text>
             {/if}
         </div>
         <Icon icon="small-chevron-right" classes="mx-4 text-gray-500 dark:text-white" />
-        <Text bold smaller>{formatUnit(value)}</Text>
+        <Text bold smaller>{formatUnit(payload.data.essence.data.value)}</Text>
         <Icon icon="small-chevron-right" classes="mx-4 text-gray-500 dark:text-white" />
         <div class="flex flex-col flex-wrap justify-center items-center text-center">
             {#if receiverAccount}
                 <div
                     class="flex items-center justify-center w-8 h-8 rounded-xl p-2 mb-2 text-12 leading-100 font-bold bg-{receiverAccount?.color ?? 'blue'}-500 text-white">
                     {getInitials(receiverAccount.alias, 2)}
                 </div>
-                {#if incoming}
+                {#if payload.data.essence.data.incoming}
                     <Text smaller>{locale('general.you')}</Text>
                 {/if}
             {/if}
-            {#if !incoming}
+            {#if !payload.data.essence.data.incoming}
                 {#each receiverAddresses as address}
                     <Text smaller>{truncateString(address, 3, 3, 3)}</Text>
                 {/each}

packages/shared/components/ActivityRow.svelte

@@ -3,15 +3,16 @@
     import { truncateString } from 'shared/lib/helpers'
     import { formatUnit } from 'shared/lib/units'
     import { date } from 'svelte-i18n'
+    import type { Payload } from 'shared/lib/typings/message'
 
     export let id
     export let timestamp
-    export let value
-    export let incoming
-    export let internal
     export let confirmed
     export let color
-    export let onClick = () => {}
+
+    export let payload: Payload
+
+export let onClick = () => {}
 </script>
 
 <button
@@ -20,9 +21,9 @@
     class="w-full text-left flex rounded-2xl items-center bg-gray-100 dark:bg-gray-900 dark:bg-opacity-50 p-4 {!confirmed ? 'opacity-50' : ''}">
     <Icon
         boxed
-        classes="text-white dark:text-{internal ? 'gray-500' : `${color}-${incoming ? '500' : '600'}`}"
-        boxClasses="bg-{internal ? 'gray-500' : `${color}-${incoming ? '500' : '600'}`} dark:bg-gray-900"
-        icon={internal ? 'transfer' : incoming ? 'chevron-down' : 'chevron-up'} />
+        classes="text-white dark:text-{payload.data.essence.data.internal ? 'gray-500' : `${color}-${payload.data.essence.data.incoming ? '500' : '600'}`}"
+        boxClasses="bg-{payload.data.essence.data.internal ? 'gray-500' : `${color}-${payload.data.essence.data.internal ? '500' : '600'}`} dark:bg-gray-900"
+        icon={payload.data.essence.data.internal ? 'transfer' : payload.data.essence.data.incoming ? 'chevron-down' : 'chevron-up'} />
     <div class="flex flex-col ml-4">
         <Text type="p" bold smaller>{truncateString(id)}</Text>
         <Text type="p" secondary smaller>
@@ -37,6 +38,6 @@
         </Text>
     </div>
     <div class="flex-1 items-end flex flex-col ml-4">
-        <Text type="p" smaller>{`${!incoming ? '-' : ''}${formatUnit(value)}`}</Text>
+        <Text type="p" smaller>{`${!payload.data.essence.data.incoming ? '-' : ''}${formatUnit(payload.data.essence.data.value)}`}</Text>
     </div>
 </button>

packages/shared/lib/chart.ts

@@ -127,8 +127,8 @@ export const getAccountActivityData = (account: WalletAccount) => {
                     const message = messages[index]
                     const messageTimestamp = new Date(message.timestamp).getTime()
                     if (messageTimestamp >= start && messageTimestamp <= end) {
-                        const valueMiota = convertUnits(message.value, Unit.i, Unit.Mi)
-                        if (message.incoming) {
+                        const valueMiota = convertUnits(message.payload.data.essence.data.value, Unit.i, Unit.Mi)
+                        if (message.payload.data.essence.data.incoming) {
                             _incoming += valueMiota
                         }
                         else {