chore: move network health into class

packages/desktop/components/NetworkCard.svelte

@@ -7,31 +7,21 @@
     import { localize } from '@core/i18n'
     import { generateAndStoreEvmAddressForAccounts, pollL2BalanceForAccount } from '@core/layer-2/actions'
     import { LedgerAppName } from '@core/ledger'
-    import {
-        ExplorerEndpoint,
-        Network,
-        NetworkHealth,
-        NetworkNamespace,
-        evmNetworkStatuses,
-        getDefaultExplorerUrl,
-        networkStatus,
-        setSelectedChain,
-    } from '@core/network'
+    import { ExplorerEndpoint, Network, NetworkNamespace, getDefaultExplorerUrl, setSelectedChain } from '@core/network'
     import { ProfileType } from '@core/profile'
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { activeProfile } from '@core/profile/stores'
     import { buildUrl, truncateString } from '@core/utils'
     import { NetworkAvatar, NetworkStatusPill } from '@ui'
     import { NetworkConfigRoute, networkConfigRouter } from '@views/dashboard/drawers'
-    import { onMount } from 'svelte'
 
     export let network: Network
 
     let address: string | undefined
-    let status: NetworkHealth
     const explorer = getDefaultExplorerUrl(network.id, ExplorerEndpoint.Address)
 
-    $: $networkStatus, $evmNetworkStatuses, $selectedAccount, setNetworkCardData()
+    $: health = network.health
+    $: address = getAddressFromAccountForNetwork($selectedAccount as IAccountState, network.id)
 
     function onExplorerClick(): void {
         if (!explorer || !address) {
@@ -59,13 +49,6 @@
         }
     }
 
-    function setNetworkCardData(): void {
-        const account = $selectedAccount as IAccountState
-
-        status = network.getStatus().health
-        address = getAddressFromAccountForNetwork(account, network.id)
-    }
-
     async function onGenerateAddressClick(): Promise<void> {
         if (!network || network.namespace !== NetworkNamespace.Evm) {
             return
@@ -92,10 +75,6 @@
             handleError(error)
         }
     }
-
-    onMount(() => {
-        setNetworkCardData()
-    })
 </script>
 
 <Tile border onClick={onCardClick}>
@@ -105,9 +84,7 @@
                 <NetworkAvatar networkId={network.id} />
                 <Text type="body1" truncate>{network.name}</Text>
             </div>
-            {#key status}
-                <NetworkStatusPill {status} />
-            {/key}
+            <NetworkStatusPill status={$health} />
         </network-header>
         <network-address class="flex flex-row justify-between items-end gap-4">
             <div class="flex flex-col">

packages/desktop/components/popup/popups/RemoveProposalPopup.svelte

@@ -16,6 +16,8 @@
     import { closePopup } from '@desktop/auxiliary/popup'
     import PopupTemplate from '../PopupTemplate.svelte'
     import { IAccountState } from '@core/account'
+    import { getProposalStatusForMilestone } from '@contexts/governance'
+    import { getL1Network } from '@core/network/stores'
 
     function onCancelClick(): void {
         closePopup()
@@ -47,8 +49,9 @@
     }
 
     // TODO: User can only remove a proposal when he is not voting for it
-    $: showAlert =
-        $selectedProposal?.status === EventStatus.Commencing || $selectedProposal?.status === EventStatus.Holding
+    const { currentMilestone } = getL1Network()
+    $: status = getProposalStatusForMilestone($currentMilestone, $selectedProposal?.milestones)
+    $: showAlert = status === EventStatus.Commencing || status === EventStatus.Holding
 </script>
 
 <PopupTemplate

packages/desktop/views/dashboard/drawers/network-config/views/ConnectedNetworksDrawer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { DrawerTemplate, NetworkCard } from '@components'
     import { localize } from '@core/i18n'
-    import { clearSelectedChain, networks, networkStatus } from '@core/network'
+    import { clearSelectedChain, networks } from '@core/network'
     import { Router } from '@core/router'
     import features from '@features/features'
     import { Button, IconName } from '@bloomwalletio/ui'
@@ -22,11 +22,9 @@
 <DrawerTemplate title={localize('views.dashboard.drawers.networkConfig.connectedChains.title')} {drawerRouter}>
     <connected-chains-drawer class="h-full flex flex-col justify-between px-6">
         <div class="flex flex-col gap-4">
-            {#key $networkStatus}
-                {#each $networks as network}
-                    <NetworkCard {network} />
-                {/each}
-            {/key}
+            {#each $networks as network}
+                <NetworkCard {network} />
+            {/each}
         </div>
     </connected-chains-drawer>
     <div slot="footer" class="flex justify-center">

packages/desktop/views/dashboard/governance/components/ProposalCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Icon, IconName, Pill, Text, TooltipIcon } from '@bloomwalletio/ui'
-    import { IProposal } from '@contexts/governance/interfaces'
+    import { IProposalWithStatus } from '@contexts/governance/interfaces'
     import { participationOverviewForSelectedAccount, selectedProposalId } from '@contexts/governance/stores'
     import { isVotingForProposal } from '@contexts/governance/utils'
     import { localize } from '@core/i18n'
@@ -9,12 +9,13 @@
     import { onMount } from 'svelte'
     import { ProposalStatusInfo } from './'
     import { getTimeDifference, milestoneToDate } from '@core/utils'
-    import { networkStatus } from '@core/network/stores'
+    import { getL1Network } from '@core/network/stores'
     import { time } from '@core/app/stores'
 
-    export let proposal: IProposal
+    export let proposal: IProposalWithStatus
 
     let hasVoted = false
+    const currentMilestone = getL1Network().currentMilestone
 
     $: $participationOverviewForSelectedAccount, proposal, setHasVoted()
 
@@ -32,21 +33,15 @@
     $: switch (proposal?.status) {
         case EventStatus.Upcoming:
             remainingTime = getTimeDifference(
-                milestoneToDate($networkStatus.currentMilestone, proposal?.milestones?.commencing),
+                milestoneToDate($currentMilestone, proposal?.milestones?.commencing),
                 $time
             )
             break
         case EventStatus.Commencing:
-            remainingTime = getTimeDifference(
-                milestoneToDate($networkStatus.currentMilestone, proposal?.milestones?.holding),
-                $time
-            )
+            remainingTime = getTimeDifference(milestoneToDate($currentMilestone, proposal?.milestones?.holding), $time)
             break
         case EventStatus.Holding:
-            remainingTime = getTimeDifference(
-                milestoneToDate($networkStatus.currentMilestone, proposal?.milestones?.ended),
-                $time
-            )
+            remainingTime = getTimeDifference(milestoneToDate($currentMilestone, proposal?.milestones?.ended), $time)
             break
         default:
             break

packages/desktop/views/dashboard/governance/components/ProposalList.svelte

@@ -2,13 +2,15 @@
     import { EmptyListPlaceholder, Filter } from '@components'
     import { IconName } from '@bloomwalletio/ui'
     import { proposalFilter, registeredProposalsForSelectedAccount } from '@contexts/governance/stores'
-    import { isVisibleProposal, sortProposals } from '@contexts/governance/utils'
+    import { getProposalsWithStatus, isVisibleProposal, sortProposals } from '@contexts/governance/utils'
     import { SearchInput } from '@ui'
     import { ProposalCard } from './'
     import ProposalListMenu from './ProposalListMenu.svelte'
     import { localize } from '@core/i18n'
+    import { getL1Network } from '@core/network'
 
-    $: proposals = Object.values($registeredProposalsForSelectedAccount)
+    const { currentMilestone } = getL1Network()
+    $: proposals = getProposalsWithStatus($registeredProposalsForSelectedAccount, $currentMilestone)
 
     let searchTerm = ''
 

packages/desktop/views/dashboard/governance/components/ProposalQuestion.svelte

@@ -5,11 +5,16 @@
     import { Icon, IconName, Text, IconButton } from '@bloomwalletio/ui'
 
     import { ABSTAIN_VOTE_VALUE } from '@contexts/governance/constants'
-    import { getPercentagesFromAnswerStatuses, IProposalAnswerPercentages } from '@contexts/governance'
+    import {
+        getPercentagesFromAnswerStatuses,
+        getProposalStatusForMilestone,
+        IProposalAnswerPercentages,
+    } from '@contexts/governance'
     import { selectedProposal } from '@contexts/governance/stores'
     import { openPopup } from '@desktop/auxiliary/popup/actions'
     import { PopupId } from '@desktop/auxiliary/popup'
     import { localize } from '@core/i18n'
+    import { getL1Network } from '@core/network/stores'
 
     export let onQuestionClick: (questionIndex: number) => void
     export let onAnswerClick: (answerValue: number, questionIndex: number) => void
@@ -26,13 +31,13 @@
     let percentages: IProposalAnswerPercentages = {}
     let winnerAnswerIndex: number
 
+    const { currentMilestone } = getL1Network()
+    $: status = getProposalStatusForMilestone($currentMilestone, $selectedProposal?.milestones)
+
     $: answers = [...(question?.answers ?? []), { value: 0, text: 'Abstain', additionalInfo: '' }]
 
     $: percentages = getPercentagesFromAnswerStatuses(answerStatuses)
-    $: disabled =
-        $selectedProposal?.status === EventStatus.Upcoming ||
-        $selectedProposal?.status === EventStatus.Ended ||
-        !!$selectedProposal?.error
+    $: disabled = status === EventStatus.Upcoming || status === EventStatus.Ended || !!$selectedProposal?.error
     $: answerStatuses, setWinnerAnswerIndex()
     $: showMargin =
         isOpened ||
@@ -41,7 +46,7 @@
         winnerAnswerIndex !== undefined
 
     function setWinnerAnswerIndex(): void {
-        if ($selectedProposal?.status === EventStatus.Ended && answerStatuses?.length > 0) {
+        if (status === EventStatus.Ended && answerStatuses?.length > 0) {
             const answersAccumulated = answerStatuses?.map((answer) => answer.accumulated)
             const maxAccumulated = Math.max(...answersAccumulated)
             winnerAnswerIndex = answersAccumulated?.indexOf(maxAccumulated)

packages/desktop/views/dashboard/governance/components/ProposalStatusInfo.svelte

@@ -2,11 +2,11 @@
     import { ProposalStatusPill, ProposalStatusTimelineTooltip } from './'
     import { InformationTooltip } from '@ui'
 
-    import { IProposal } from '@contexts/governance/interfaces'
+    import { IProposalWithStatus } from '@contexts/governance/interfaces'
     import { localize } from '@core/i18n'
     import { ProposalError } from '@lib/contexts/governance'
 
-    export let proposal: IProposal
+    export let proposal: IProposalWithStatus
     export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
 
     let anchor: HTMLElement
@@ -24,7 +24,7 @@
         showTooltip(false)
     }
 
-    function getProposalErrorText(proposal: IProposal): { title: string; body: string } {
+    function getProposalErrorText(proposal: IProposalWithStatus): { title: string; body: string } {
         let title: string = ''
         let body: string = ''
 

packages/desktop/views/dashboard/governance/components/ProposalStatusPill.svelte

@@ -2,9 +2,9 @@
     import { EventStatus } from '@iota/sdk/out/types'
     import { COLOR_PALETTE, Icon, IconName, Pill, Text } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import { IProposal } from '@contexts/governance/interfaces'
+    import { IProposalWithStatus } from '@contexts/governance/interfaces'
 
-    export let proposal: IProposal
+    export let proposal: IProposalWithStatus
 
     $: status = proposal?.status
     $: error = proposal?.error

packages/desktop/views/dashboard/governance/components/ProposalStatusTimelineTooltip.svelte

@@ -3,14 +3,16 @@
     import { Text, Popover } from '@bloomwalletio/ui'
 
     import { formatDate, localize } from '@core/i18n'
-    import { networkStatus } from '@core/network'
     import { DATE_FORMAT, milestoneToDate } from '@core/utils'
+    import { getL1Network } from '@core/network/stores'
 
     export let milestones: Record<EventStatus, number>
     export let status: EventStatus
     export let anchor: HTMLElement
     export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
 
+    const currentMilestone = getL1Network().currentMilestone
+
     let eventProgress: number
     switch (status) {
         case EventStatus.Upcoming:
@@ -69,7 +71,7 @@
                     {localize(`views.governance.statusTimeline.${EventStatus[status]}.${getLocaleTenseKey(index)}`)}
                 </Text>
                 <Text textColor="current" fontWeight="medium">
-                    {formatDate(milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]), {
+                    {formatDate(milestoneToDate($currentMilestone, milestones[EventStatus[status]]), {
                         ...DATE_FORMAT,
                         timeZoneName: undefined,
                     })}

packages/desktop/views/dashboard/governance/components/proposal-details/ProposalDetailsPane.svelte

@@ -2,32 +2,28 @@
     import { Icon, IconName, MarkdownBlock, Pill, Text } from '@bloomwalletio/ui'
     import { IProposal } from '@contexts/governance'
     import { time } from '@core/app/stores'
-    import { networkStatus } from '@core/network/stores'
     import { getTimeDifference, milestoneToDate } from '@core/utils'
     import { EventStatus } from '@iota/sdk/out/types'
     import { ProposalDetailsMenu, ProposalStatusPill } from '../'
+    import { getL1Network } from '@core/network/stores'
 
     export let proposal: IProposal
 
+    const currentMilestone = getL1Network().currentMilestone
+
     let remainingTime: string = ''
     $: switch (proposal?.status) {
         case EventStatus.Upcoming:
             remainingTime = getTimeDifference(
-                milestoneToDate($networkStatus.currentMilestone, proposal?.milestones?.commencing),
+                milestoneToDate($currentMilestone, proposal?.milestones?.commencing),
                 $time
             )
             break
         case EventStatus.Commencing:
-            remainingTime = getTimeDifference(
-                milestoneToDate($networkStatus.currentMilestone, proposal?.milestones?.holding),
-                $time
-            )
+            remainingTime = getTimeDifference(milestoneToDate($currentMilestone, proposal?.milestones?.holding), $time)
             break
         case EventStatus.Holding:
-            remainingTime = getTimeDifference(
-                milestoneToDate($networkStatus.currentMilestone, proposal?.milestones?.ended),
-                $time
-            )
+            remainingTime = getTimeDifference(milestoneToDate($currentMilestone, proposal?.milestones?.ended), $time)
             break
         default:
             remainingTime = ''

packages/desktop/views/dashboard/governance/components/proposal-details/ProposalInformationPane.svelte

@@ -5,10 +5,13 @@
         selectedParticipationEventStatus,
         selectedProposal,
     } from '@contexts/governance/stores'
-    import { calculateTotalVotesForTrackedParticipations } from '@contexts/governance/utils'
+    import {
+        calculateTotalVotesForTrackedParticipations,
+        getProposalStatusForMilestone,
+    } from '@contexts/governance/utils'
     import { selectedAccount } from '@core/account/stores'
     import { formatDate, localize } from '@core/i18n'
-    import { networkStatus } from '@core/network/stores'
+    import { getL1Network } from '@core/network/stores'
     import { activeProfile } from '@core/profile/stores'
     import { formatTokenAmountBestMatch } from '@core/token'
     import { visibleSelectedAccountTokens } from '@core/token/stores'
@@ -20,9 +23,11 @@
         milestone: number
     }
 
-    $: proposalDateData = getNextProposalDateData($selectedProposal?.status)
+    const currentMilestone = getL1Network().currentMilestone
 
-    function getNextProposalDateData(status: EventStatus): IProposalDateData {
+    $: proposalDateData = getNextProposalDateData($currentMilestone)
+    function getNextProposalDateData(_currentMilestone: number): IProposalDateData | undefined {
+        const status = getProposalStatusForMilestone(_currentMilestone, $selectedProposal?.milestones)
         switch (status) {
             case EventStatus.Upcoming:
                 return {
@@ -50,15 +55,13 @@
     }
 
     const { metadata } = $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin ?? {}
-
     let totalVotes = BigInt(0)
 
     $: selectedProposalOverview = $participationOverviewForSelectedAccount?.participations?.[$selectedProposal?.id]
     $: trackedParticipations = Object.values(selectedProposalOverview ?? {})
-    $: currentMilestone = $networkStatus.currentMilestone
 
     // Reactively start updating votes once component has mounted and participation overview is available.
-    $: $selectedParticipationEventStatus && trackedParticipations && currentMilestone && setTotalVotes()
+    $: $selectedParticipationEventStatus && trackedParticipations && $currentMilestone && setTotalVotes()
 
     function setTotalVotes(): void {
         switch ($selectedParticipationEventStatus?.status) {
@@ -85,10 +88,7 @@
             {
                 key: localize(`views.governance.details.proposalInformation.${proposalDateData?.propertyKey}`),
                 value: proposalDateData?.propertyKey
-                    ? formatDate(
-                          milestoneToDate($networkStatus.currentMilestone, proposalDateData.milestone),
-                          DATE_FORMAT
-                      )
+                    ? formatDate(milestoneToDate($currentMilestone, proposalDateData.milestone), DATE_FORMAT)
                     : undefined,
             },
             {