Merge branch 'master' into fix-page-content-not-full-height

apps/ui/src/components/FlashMessageWelcome.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { lsGet, lsSet } from '@/helpers/utils';
+
+const KEY = 'showV2Welcome';
+
+const open = ref(false);
+
+function handleClose() {
+  open.value = false;
+  lsSet(KEY, false);
+}
+
+onMounted(async () => {
+  open.value = lsGet(KEY) ?? true;
+});
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="fixed bottom-0 right-0 sm:mx-4 sm:mb-4 sm:rounded-lg bg-skin-link text-skin-bg z-[99] blocks-x !bg-left-top sm:max-w-[320px]"
+  >
+    <UiButton
+      class="!text-skin-bg !bg-transparent !border-none absolute top-1 right-1 !px-0 w-[40px] !h-[40px]"
+      @click="handleClose"
+    >
+      <IH-x class="inline-block" />
+    </UiButton>
+    <div class="bg-skin-link/90 sm:rounded-lg p-4">
+      <div class="flex space-x-3">
+        <div class="text-end">
+          <img src="@/assets/snapshot.svg" alt="Snapshot" class="w-[36px]" />
+        </div>
+        <div class="font-bold text-md leading-5">
+          Welcome to the new
+          <div class="font-display text-xl">Snapshot</div>
+        </div>
+      </div>
+      <div class="mt-3 mb-4">
+        Introducing the next evolution of Snapshot, with a brand new interface,
+        support for onchain voting, proposal executions, and many more
+        governance enhancements.
+      </div>
+      <div class="space-y-2 text-center">
+        <UiButton
+          class="w-full"
+          to="https://snapshot.mirror.xyz/0qnfjmE0SFeUykArdi664oO4qFcZUoZTTOd8m7es_Eo"
+          >Learn more</UiButton
+        >
+        <div class="block text-sm">
+          <span class="text-skin-bg/70">Or, go back to the </span>
+          <a href="https://v1.snapshot.box" target="_blank" class="text-skin-bg"
+            >previous interface</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/ui/src/components/Layout/App.vue

@@ -222,6 +222,7 @@ router.afterEach(() => {
       @add="handleTransactionAccept"
       @close="handleTransactionReject"
     />
+    <FlashMessageWelcome />
   </div>
 </template>
 

apps/ui/src/components/Modal/Vote.vue

@@ -27,7 +27,7 @@ const emit = defineEmits<{
 const { vote } = useActions();
 const { web3 } = useWeb3();
 const {
-  votingPower,
+  get: getVotingPower,
   fetch: fetchVotingPower,
   reset: resetVotingPower
 } = useVotingPower();
@@ -55,6 +55,10 @@ const formValidator = getValidator({
   }
 });
 
+const votingPower = computed(() =>
+  getVotingPower(props.proposal.space, props.proposal)
+);
+
 const formattedVotingPower = computed(() =>
   getFormattedVotingPower(votingPower.value)
 );
@@ -124,7 +128,7 @@ async function handleConfirmed(tx?: string | null) {
 }
 
 function handleFetchVotingPower() {
-  fetchVotingPower(props.proposal);
+  fetchVotingPower(props.proposal.space, props.proposal);
 }
 
 watch(

apps/ui/src/composables/usePropositionPower.ts

@@ -7,21 +7,21 @@ export function usePropositionPower() {
   const { web3 } = useWeb3();
   const { getCurrent } = useMetaStore();
 
-  function latestBlock(network: NetworkID) {
+  function getLatestBlock(network: NetworkID): number | null {
     return supportsNullCurrent(network) ? null : getCurrent(network) ?? 0;
   }
 
   function fetch(space: Space) {
     votingPowersStore.fetch(
       space,
       web3.value.account,
-      latestBlock(space.network)
+      getLatestBlock(space.network)
     );
   }
 
   function get(space: Space) {
     return votingPowersStore.votingPowers.get(
-      getIndex(space, latestBlock(space.network))
+      getIndex(space, getLatestBlock(space.network))
     );
   }
 

apps/ui/src/composables/useVotingPower.ts

@@ -1,69 +1,58 @@
 import { supportsNullCurrent } from '@/networks';
-import { getIndex as getVotingPowerIndex } from '@/stores/votingPowers';
-import { Proposal, Space } from '@/types';
+import { getIndex } from '@/stores/votingPowers';
+import { NetworkID, Proposal, Space } from '@/types';
 
 export function useVotingPower() {
   const votingPowersStore = useVotingPowersStore();
   const { web3 } = useWeb3();
   const { getCurrent } = useMetaStore();
 
-  const item = ref<Space | Proposal | undefined>();
-  const block = ref<number | null>(null);
-
-  const space = computed(() =>
-    item.value && 'space' in item.value
-      ? (item.value?.space as Space)
-      : item.value
-  );
+  function getLatestBlock(network: NetworkID): number | null {
+    return supportsNullCurrent(network) ? null : getCurrent(network) || 0;
+  }
 
-  const proposal = computed(() =>
-    item.value && 'snapshot' in item.value
-      ? (item.value as Proposal)
-      : undefined
-  );
+  function getProposalSnapshot(proposal: Proposal): number | null {
+    return (
+      (proposal.state === 'pending' ? null : proposal.snapshot) ||
+      getLatestBlock(proposal.network)
+    );
+  }
 
-  const proposalSnapshot = computed<number | null>(() => {
-    if (!proposal.value) return null;
+  function getSnapshot(
+    space: Space | Proposal['space'],
+    proposal?: Proposal
+  ): number | null {
+    return proposal
+      ? getProposalSnapshot(proposal)
+      : getLatestBlock((space as Space).network);
+  }
 
-    return proposal.value.state === 'pending'
-      ? latestBlock(proposal.value)
-      : proposal.value.snapshot;
-  });
+  function fetch(space: Space | Proposal['space'], proposal?: Proposal) {
+    if (!web3.value.account) return;
 
-  const votingPower = computed(
-    () =>
-      space.value &&
-      votingPowersStore.votingPowers.get(
-        getVotingPowerIndex(space.value, block.value)
-      )
-  );
+    votingPowersStore.fetch(
+      proposal || (space as Space),
+      web3.value.account,
+      getSnapshot(space, proposal)
+    );
+  }
 
-  function latestBlock(spaceOrProposal: Space | Proposal) {
-    return supportsNullCurrent(spaceOrProposal.network)
-      ? null
-      : getCurrent(spaceOrProposal.network) ?? 0;
+  function get(space: Space | Proposal['space'], proposal?: Proposal) {
+    return votingPowersStore.votingPowers.get(
+      getIndex(proposal?.space || space, getSnapshot(space, proposal))
+    );
   }
 
   function reset() {
     votingPowersStore.reset();
   }
 
-  function fetch(spaceOrProposal: Space | Proposal) {
-    if (!web3.value.account) return;
-    item.value = spaceOrProposal;
-    block.value = proposal.value
-      ? proposalSnapshot.value
-      : latestBlock(space.value as Space);
-
-    votingPowersStore.fetch(item.value, web3.value.account, block.value);
-  }
-
   watch(
     () => web3.value.account,
     account => {
       if (!account) reset();
     }
   );
 
-  return { votingPower, fetch, reset };
+  return { get, fetch, reset };
 }

apps/ui/src/views/Proposal.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
 const route = useRoute();
 const proposalsStore = useProposalsStore();
 const {
-  votingPower,
+  get: getVotingPower,
   fetch: fetchVotingPower,
   reset: resetVotingPower
 } = useVotingPower();
@@ -44,6 +44,12 @@ const discussion = computed(() => {
   return sanitizeUrl(proposal.value.discussion);
 });
 
+const votingPower = computed(() => {
+  if (!proposal.value) return;
+
+  return getVotingPower(props.space, proposal.value);
+});
+
 const votingPowerDecimals = computed(() => {
   if (!proposal.value) return 0;
   return Math.max(
@@ -93,7 +99,7 @@ async function handleVoteSubmitted() {
 function handleFetchVotingPower() {
   if (!proposal.value) return;
 
-  fetchVotingPower(proposal.value);
+  fetchVotingPower(props.space, proposal.value);
 }
 
 watch(

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

@@ -8,7 +8,7 @@ const props = defineProps<{ space: Space }>();
 
 const { setTitle } = useTitle();
 const {
-  votingPower,
+  get: getVotingPower,
   fetch: fetchVotingPower,
   reset: resetVotingPower
 } = useVotingPower();
@@ -28,6 +28,8 @@ const proposalsRecord = computed(
   () => proposalsStore.proposals[`${props.space.network}:${props.space.id}`]
 );
 
+const votingPower = computed(() => getVotingPower(props.space));
+
 const spaceLabels = computed(() => {
   if (!props.space.labels) return {};