feat: add available xrd to stake card

apps/dashboard/src/pages/navbar-pages/staking/Validators.svelte

@@ -18,7 +18,6 @@
   }>()
 
   export const selectedValidators = writable<Record<string, boolean>>({})
-  export const accountsWithStakes = writable<AccountWithStakes[]>([])
 </script>
 
 <script lang="ts">
@@ -39,8 +38,10 @@
   import { stakeInfo } from '../../../routes/(navbar-pages)/network-staking/(load-validators)/(load-staking-data)/+layout.svelte'
   import IconNew from '@components/_base/icon/IconNew.svelte'
   import type { ValidatorListItem } from '@api/utils/entities/component/validator'
+  import AvailableToStake from './available-to-stake/AvailableToStake.svelte'
 
   export let validators: Promise<ValidatorListItem<true, true, true>[]>
+  export let totalXrdBalance: Promise<string>
   export let filteredValidators:
     | ValidatorListItem<true, true, true>[]
     | undefined = undefined
@@ -133,6 +134,10 @@
       have connected.
     </div>
   {/if}
+
+  <div class="available-to-stake">
+    <AvailableToStake xrdAvailableToStake={totalXrdBalance} />
+  </div>
 </div>
 
 {#if $connected}
@@ -310,5 +315,9 @@
         background: var(--color-grey-4);
       }
     }
+
+    .available-to-stake {
+      margin-left: auto;
+    }
   }
 </style>

apps/dashboard/src/pages/navbar-pages/staking/available-to-stake/AvailableToStake.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import SkeletonLoader from '@components/_base/skeleton-loader/SkeletonLoader.svelte'
+  import TokenIcon from '@components/_base/token-icon/TokenIcon.svelte'
+  import { formatXRDValue } from '@utils'
+
+  export let xrdAvailableToStake: Promise<string>
+</script>
+
+<div class="card available-to-stake">
+  <TokenIcon isXrd --size="24px" />
+  <div class="text">XRD available to be staked:</div>
+  <div class="amount">
+    {#await xrdAvailableToStake}
+      <SkeletonLoader />
+    {:then amount}
+      {formatXRDValue(amount)}
+    {/await}
+  </div>
+</div>
+
+<style>
+  .available-to-stake {
+    min-width: 21rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+  }
+
+  .text {
+    font-weight: 500;
+    color: var(--color-grey-2);
+  }
+
+  .amount {
+    font-weight: 500;
+    color: var(--color-grey-1);
+    display: flex;
+  }
+</style>

apps/dashboard/src/routes/(navbar-pages)/network-staking/(load-validators)/(load-staking-data)/+layout.svelte

@@ -69,10 +69,13 @@
         filteredValidators = filtered
       }
     }
+
+  let totalXrdBalance = data.totalXrdBalance
 </script>
 
 <Validators
   validators={data.promises.validators}
+  totalXrdBalance={$totalXrdBalance}
   {filteredValidators}
   on:show-claim-all={() => goto('/network-staking/claim-multiple')}
   on:show-claim-single={(e) => goto(`/network-staking/claim/${e.detail}`)}

apps/dashboard/src/routes/(navbar-pages)/network-staking/(load-validators)/(load-staking-data)/+layout.ts

@@ -11,6 +11,7 @@ import {
   type UnstakingInfo,
   getStakedInfo
 } from '@api/_deprecated/utils/staking'
+import { getXRDBalance } from '@dashboard/pages/navbar-pages/staking/stake-unstake/stake/getXrdBalance'
 
 export type AccumulatedStakes = {
   [validator: string]: {
@@ -135,8 +136,15 @@ export const load: LayoutLoad = async ({ depends, parent }) => {
     })
   )
 
+  const totalXrdBalance = derived(accounts, async ($accounts) =>
+    (await Promise.all($accounts.map((a) => getXRDBalance(a.address))))
+      .reduce((acc, curr) => acc.plus(curr), new BigNumber(0))
+      .toString()
+  )
+
   return {
     validatorAccumulatedStakes,
-    stakeInfo
+    stakeInfo,
+    totalXrdBalance
   }
 }