Add delegated balances to adresses table

Author: GusevPM

components/modules/address/AddressCharts.vue

@@ -21,7 +21,7 @@ const props = defineProps({
 	},
 })
 
-const selectedPeriodIdx = ref(0)
+const selectedPeriodIdx = ref(1)
 const periods = ref([
 	{
 		title: "Last 24 hours",
@@ -188,7 +188,7 @@ const getTxSeries = async () => {
 
 	const txSeriesRawData = await fetchAddressSeries({
 		hash: props.hash,
-		name: "count",
+		name: "tx_count",
 		timeframe: selectedPeriod.value.timeframe,
 		from: parseInt(
 			DateTime.now().minus({

pages/addresses.vue

@@ -94,10 +94,6 @@ const getAddresses = async () => {
 	isRefetching.value = false
 }
 
-const calculateTotalBalance = (address) => {
-	return parseInt(address.balance.spendable) + parseInt(address.balance.delegated) + parseInt(address.balance.unbonding)
-}
-
 getAddresses()
 
 /** Refetch addresses */
@@ -192,7 +188,7 @@ const handleLast = async () => {
 								<th><Text size="12" weight="600" color="tertiary" noWrap>Hash</Text></th>
 								<th @click="handleSort('spendable')" :class="$style.sortable">
 									<Flex align="center" gap="6">
-										<Text size="12" weight="600" color="tertiary" noWrap>Balance</Text>
+										<Text size="12" weight="600" color="tertiary" noWrap>Spendable Balance</Text>
 										<Icon
 											v-if="sort.by === 'spendable'"
 											name="chevron"
@@ -202,6 +198,18 @@ const handleLast = async () => {
 										/>
 									</Flex>
 								</th>
+								<th @click="handleSort('delegated')" :class="$style.sortable">
+									<Flex align="center" gap="6">
+										<Text size="12" weight="600" color="tertiary" noWrap>Delegated Balance</Text>
+										<Icon
+											v-if="sort.by === 'delegated'"
+											name="chevron"
+											size="12"
+											color="secondary"
+											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
+										/>
+									</Flex>
+								</th>
 								<th><Text size="12" weight="600" color="tertiary" noWrap>First Height</Text></th>
 								<th><Text size="12" weight="600" color="tertiary" noWrap>Last Height</Text></th>
 							</tr>
@@ -227,7 +235,15 @@ const handleLast = async () => {
 								<td>
 									<NuxtLink :to="`/address/${address.hash}`">
 										<AmountInCurrency
-											:amount="{ value: calculateTotalBalance(address) }"
+											:amount="{ value: parseInt(address.balance.spendable) }"
+											:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
+										/>
+									</NuxtLink>
+								</td>
+								<td>
+									<NuxtLink :to="`/address/${address.hash}`">
+										<AmountInCurrency
+											:amount="{ value: parseInt(address.balance.delegated) }"
 											:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
 										/>
 									</NuxtLink>