fix: fix empty voting period being overriden (#1014)

* fix: fix empty voting period being overriden

* fix: set a default voting period when not set by the space

* fix: use single source of truth for current time

* fix: use custom proposal time only for offchain spaces

* fix: use dynamix current timestamp

* fix: make timestamp reactive

* fix: make timestamp reactive

* fix: use separate variable for max voting period

* fix: fix offset in ms instead of seconds

* docs: add notes about unix argument

* Update apps/ui/src/views/Space/Editor.vue

Co-authored-by: Wiktor Tkaczyński <[email protected]>

---------

Co-authored-by: Wiktor Tkaczyński <[email protected]>

Author: wa0x6e

apps/ui/src/components/ProposalTimeline.vue

@@ -26,17 +26,9 @@ const LABELS = {
 
 const { getTsFromCurrent, getDurationFromCurrent } = useMetaStore();
 
-const now = ref(parseInt((Date.now() / 1000).toFixed()));
+const timestamp = useTimestamp({ interval: 1000 });
 
-onMounted(() => {
-  const interval = setInterval(() => {
-    now.value = parseInt((Date.now() / 1000).toFixed());
-  }, 1000);
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
-});
+const now = computed(() => Math.floor(timestamp.value / 1000));
 
 function formatTimelineValues(): ProposalTimelineValues {
   const data = props.data;
@@ -94,6 +86,12 @@ const states: ComputedRef<State[]> = computed(() => {
 
   return initial;
 });
+
+// Use an offset to compare timestamps to avoid issues when comparing
+// timestamps that are not refreshed synchronously
+function isInThePast(timestamp: number): boolean {
+  return timestamp <= now.value + 1;
+}
 </script>
 
 <template>
@@ -106,12 +104,14 @@ const states: ComputedRef<State[]> = computed(() => {
       >
         <div
           class="absolute size-[15px] inline-block rounded-full left-[-7px] border-4 border-skin-bg"
-          :class="state.value <= now ? 'bg-skin-heading' : 'bg-skin-border'"
+          :class="
+            isInThePast(state.value) ? 'bg-skin-heading' : 'bg-skin-border'
+          "
         />
         <div
           v-if="states[i + 1]"
           class="border-l pr-4 mt-3"
-          :class="states[i + 1].value <= now && 'border-skin-heading'"
+          :class="isInThePast(states[i + 1].value) && 'border-skin-heading'"
         />
       </div>
     </div>

apps/ui/src/networks/offchain/api/index.ts

@@ -56,7 +56,6 @@ import {
   ApiStrategy,
   ApiVote
 } from './types';
-import { DEFAULT_VOTING_DELAY } from '../constants';
 
 const DEFAULT_AUTHENTICATOR = 'OffchainAuthenticator';
 
@@ -175,8 +174,8 @@ function formatSpace(
     voting_types: space.voting.type
       ? [space.voting.type]
       : constants.EDITOR_VOTING_TYPES,
-    min_voting_period: space.voting.period ?? DEFAULT_VOTING_DELAY,
-    max_voting_period: space.voting.period ?? DEFAULT_VOTING_DELAY,
+    min_voting_period: space.voting.period ?? 0,
+    max_voting_period: space.voting.period ?? 0,
     proposal_threshold: '1',
     treasuries,
     labels: space.labels,

apps/ui/src/networks/offchain/constants.ts

@@ -27,5 +27,3 @@ export const EDITOR_VOTING_TYPES: VoteType[] = [
   'weighted',
   'quadratic'
 ];
-
-export const DEFAULT_VOTING_DELAY = 60 * 60 * 24 * 7;

apps/ui/src/views/Space/Editor.vue

@@ -14,6 +14,8 @@ import { validateForm } from '@/helpers/validation';
 import { getNetwork, offchainNetworks } from '@/networks';
 import { Contact, Space, Transaction, VoteType } from '@/types';
 
+const DEFAULT_VOTING_DELAY = 60 * 60 * 24 * 3;
+
 const TITLE_DEFINITION = {
   type: 'string',
   title: 'Title',
@@ -54,6 +56,7 @@ const {
 } = usePropositionPower();
 const { strategiesWithTreasuries } = useTreasuries(props.space);
 const termsStore = useTermsStore();
+const timestamp = useTimestamp({ interval: 1000 });
 
 const modalOpen = ref(false);
 const modalOpenTerms = ref(false);
@@ -173,6 +176,24 @@ const proposalLimitReached = computed(
 
 const propositionPower = computed(() => getPropositionPower(props.space));
 
+const unixTimestamp = computed(() => Math.floor(timestamp.value / 1000));
+
+const proposalStart = computed(
+  () => unixTimestamp.value + props.space.voting_delay
+);
+
+const proposalMinEnd = computed(
+  () =>
+    proposalStart.value +
+    (props.space.min_voting_period || DEFAULT_VOTING_DELAY)
+);
+
+const proposalMaxEnd = computed(
+  () =>
+    proposalStart.value +
+    (props.space.max_voting_period || DEFAULT_VOTING_DELAY)
+);
+
 async function handleProposeClick() {
   if (!proposal.value) return;
 
@@ -214,11 +235,10 @@ async function handleProposeClick() {
       );
     } else {
       const appName = (route.query.app as LocationQueryValue) || '';
-      const currentTime = Math.floor(Date.now() / 1000);
-      const start = currentTime + props.space.voting_delay;
-      const minEnd = start + props.space.min_voting_period;
-      const maxEnd = start + props.space.max_voting_period;
 
+      // Proposal start, min and end time are unix timestamp,
+      // and are not compatible with onchain EMV spaces (those use blocks instead of timestamps)
+      // (these args are ignored by onchain networks)
       result = await propose(
         props.space,
         proposal.value.title,
@@ -228,10 +248,10 @@ async function handleProposeClick() {
         choices,
         proposal.value.labels,
         appName.length <= 128 ? appName : '',
-        currentTime,
-        start,
-        minEnd,
-        maxEnd,
+        unixTimestamp.value,
+        proposalStart.value,
+        proposalMinEnd.value,
+        proposalMaxEnd.value,
         executions
       );
     }
@@ -567,7 +587,19 @@ watchEffect(() => {
           />
           <div>
             <h4 class="eyebrow mb-2.5" v-text="'Timeline'" />
-            <ProposalTimeline :data="space" />
+            <ProposalTimeline
+              :data="
+                isOffchainSpace
+                  ? {
+                      ...space,
+                      created: unixTimestamp,
+                      start: proposalStart,
+                      min_end: proposalMinEnd,
+                      max_end: proposalMaxEnd
+                    }
+                  : space
+              "
+            />
           </div>
         </div>
       </Affix>