Skip to content

Refactor NnsVotingCard to svelte 5 #6889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
+42 −45
Draft

Refactor NnsVotingCard to svelte 5 #6889

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 42 additions & 45 deletions frontend/src/lib/components/proposal-detail/VotingCard/NnsVotingCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
import { NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE } from "$lib/constants/neurons.constants";
import { definedNeuronsStore } from "$lib/derived/neurons.derived";
import { registerNnsVotes } from "$lib/services/nns-vote-registration.services";
import { neuronsStore } from "$lib/stores/neurons.store";
import { neuronsStore, type NeuronsStore } from "$lib/stores/neurons.store";
import {
voteRegistrationStore,
votingNeuronSelectStore,
type VoteRegistrationStoreEntry,
} from "$lib/stores/vote-registration.store";
import { votingNeuronSelectStore } from "$lib/stores/vote-registration.store";
import {
SELECTED_PROPOSAL_CONTEXT_KEY,
type SelectedProposalContext,
Expand All @@ -18,8 +18,6 @@
import {
filterIneligibleNnsNeurons,
votedNeuronDetails,
type CompactNeuronInfo,
type IneligibleNeuronData,
} from "$lib/utils/neuron.utils";
import {
isProposalDeadlineInTheFuture,
Expand All @@ -33,7 +31,11 @@
} from "@dfinity/nns";
import { getContext } from "svelte";

export let proposalInfo: ProposalInfo;
type Props = {
proposalInfo: ProposalInfo;
};

const { proposalInfo }: Props = $props();

const votableNeurons = ({
neurons,
Expand All @@ -47,18 +49,18 @@
proposal,
}).map((neuron) => nnsNeuronToVotingNeuron({ neuron, proposal }));

let visible = false;
/** Signals that the initial checkbox preselection was done. To avoid removing of user selection after second queryAndUpdate callback. */
const visible = $derived(
// definedNeuronsStore is always defined.
$definedNeuronsStore && isProposalDeadlineInTheFuture(proposalInfo)
);
/** Signals that the initial checkbox pre-selection was done. To avoid removing of user selection after second queryAndUpdate callback. */
let initialSelectionDone = false;
let voteRegistration: VoteRegistrationStoreEntry | undefined = undefined;

$: voteRegistration = (
$voteRegistrationStore.registrations[OWN_CANISTER_ID_TEXT] ?? []
).find(({ proposalIdString }) => `${proposalInfo.id}` === proposalIdString);

$: $definedNeuronsStore,
(visible = isProposalDeadlineInTheFuture(proposalInfo));

const voteRegistration: VoteRegistrationStoreEntry | undefined = $derived(
($voteRegistrationStore.registrations[OWN_CANISTER_ID_TEXT] ?? []).find(
({ proposalIdString }) => `${proposalInfo.id}` === proposalIdString
)
);
const updateVotingNeuronSelectedStore = ({
neurons,
proposal,
Expand All @@ -84,11 +86,12 @@
);
}
};

$: updateVotingNeuronSelectedStore({
neurons: $definedNeuronsStore,
proposal: proposalInfo,
});
$effect(() =>
updateVotingNeuronSelectedStore({
neurons: $definedNeuronsStore,
proposal: proposalInfo,
})
);

const { store } = getContext<SelectedProposalContext>(
SELECTED_PROPOSAL_CONTEXT_KEY
Expand All @@ -108,42 +111,36 @@
});

// UI loader
const neuronsStoreReady = (): boolean => {
const neuronsStoreReady = ({ neurons, certified }: NeuronsStore): boolean => {
// We consider the neurons store as ready if it has been initialized once. Subsequent changes that happen after vote or other functions are handled with the busy store.
// This to avoid the display of a spinner within the page and another spinner over it (the busy spinner) when the user vote is being processed.
if (neuronsReady) {
return true;
}

return (
$neuronsStore.neurons !== undefined &&
($neuronsStore.certified === true ||
($neuronsStore.certified === false && isForceCallStrategy()))
neurons !== undefined &&
(certified === true || (certified === false && isForceCallStrategy()))
);
};

let neuronsReady = false;
$: $neuronsStore, (neuronsReady = neuronsStoreReady());

let neuronsVotedForProposal: CompactNeuronInfo[];
$: {
neuronsVotedForProposal = votedNeuronDetails({
const neuronsReady = $derived(neuronsStoreReady($neuronsStore));
const neuronsVotedForProposal = $derived(
votedNeuronDetails({
neurons: $definedNeuronsStore,
proposal: proposalInfo,
});
}

let ineligibleNeurons: IneligibleNeuronData[];
$: ineligibleNeurons = filterIneligibleNnsNeurons({
neurons: $definedNeuronsStore,
proposal: proposalInfo,
});

let hasNeurons = false;
$: hasNeurons = $definedNeuronsStore.length > 0;

let minSnsDissolveDelaySeconds: bigint;
$: minSnsDissolveDelaySeconds = BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE);
})
);
const ineligibleNeurons = $derived(
filterIneligibleNnsNeurons({
neurons: $definedNeuronsStore,
proposal: proposalInfo,
})
);
const hasNeurons = $derived($definedNeuronsStore.length > 0);
// TODO: switch to voting economics
const minSnsDissolveDelaySeconds = $derived(
BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE)
);
</script>

<VotingCard
Expand Down
Loading