Merge branch 'samuv/delegation-2' of github.com:snapshot-labs/snapsho…

…t into samuv/delegation-2

package.json

@@ -45,7 +45,7 @@
     "@shutter-network/shutter-crypto": "0.1.0-beta.3",
     "@snapshot-labs/lock": "^0.2.0",
     "@snapshot-labs/pineapple": "^0.2.0",
-    "@snapshot-labs/snapshot.js": "^0.5.6",
+    "@snapshot-labs/snapshot.js": "^0.5.8",
     "@snapshot-labs/tune": "^0.1.33",
     "@vue/apollo-composable": "4.0.0-beta.4",
     "@vueuse/core": "^10.4.0",

src/components/ButtonFollow.vue

@@ -28,7 +28,7 @@ const canFollow = computed(() =>
       v-bind="$attrs"
       :loading="loadingFollow === space.id"
       :disabled="isGnosisSafe"
-      class="group min-w-[120px]"
+      class="group min-w-[125px]"
       :class="{
         'flex items-center justify-center hover:!border-red hover:!bg-red hover:!bg-opacity-5 hover:!text-red':
           isFollowing

src/components/ExploreSpaces.vue

@@ -134,7 +134,7 @@ onMounted(() => {
                   })
                 }}
               </div>
-              <ButtonFollow class="!mb-0" :space="space" />
+              <ButtonFollow :space="space" class="mx-auto" />
             </BaseBlock>
           </router-link>
         </div>

src/components/ModalConfirmLeave.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  open: boolean;
+  title?: string;
+  disabled?: boolean;
+}>();
+
+defineEmits(['close', 'save', 'leave']);
+</script>
+
+<template>
+  <BaseModal :open="open" @close="$emit('close')">
+    <template #header>
+      <div class="flex flex-row items-center justify-center">
+        <h3>{{ title ? title : 'Unsaved changes' }}</h3>
+      </div>
+    </template>
+
+    <BaseMessageBlock level="warning" class="m-4">
+      You have unsaved changes. Would you like to save them before leaving?
+    </BaseMessageBlock>
+
+    <template #footer>
+      <div class="flex gap-3">
+        <BaseButton class="w-full" @click="$emit('leave'), $emit('close')">
+          Leave
+        </BaseButton>
+        <BaseButton
+          class="w-full"
+          primary
+          :disabled="disabled"
+          @click="$emit('save'), $emit('close')"
+        >
+          Save
+        </BaseButton>
+      </div>
+    </template>
+  </BaseModal>
+</template>

src/components/SpaceDelegateEdit.vue

@@ -10,11 +10,11 @@ const props = defineProps<{
     about: string;
     statement: string;
   };
+  edited: boolean;
+  saving: boolean;
 }>();
 
-const emit = defineEmits(['reload', 'update:about', 'update:statement']);
-
-const { saveStatement, savingStatement } = useStatement();
+const emit = defineEmits(['save', 'update:about', 'update:statement']);
 
 const aboutRef = ref<any>(null);
 
@@ -31,12 +31,7 @@ async function handleClickSave() {
     aboutRef.value?.forceShowError();
     return;
   }
-  try {
-    await saveStatement(props.space.id, props.statement);
-    emit('reload');
-  } catch (e) {
-    console.log(e);
-  }
+  emit('save');
 }
 </script>
 
@@ -79,7 +74,8 @@ async function handleClickSave() {
           <div class="px-4 md:px-0">
             <BaseButton
               class="mt-3 w-full"
-              :loading="savingStatement"
+              :loading="saving"
+              :disabled="!edited"
               primary
               @click="handleClickSave"
             >

src/components/SpaceProposalPage.vue

@@ -149,6 +149,13 @@ onMounted(() => setMessageVisibility(props.proposal.flagged));
             :is-admin="isAdmin"
             :is-moderator="isModerator"
           />
+          <div
+            v-if="proposal?.id === '0xb356f9a8bd8aa3210b5cfb7c8c34c950aada63c1d9dc72916730e214e7d380b8'"
+            class="border !border-skin-link bg-skin-block-bg p-4 rounded-lg mb-4"
+          >
+            <i-ho-exclamation-circle class="inline-block"/>
+            The proposal is rejected due to an obvious mistake "Utilizing Cyber Community Treasury’s unlocked CYBER to provide liquidity for bridging. The foundation will try to keep 25k CYBER-ETH, 25k CYBER-BSC, 25k CYBER-OP in the bridge. A total of 7,000,000 CYBER-BSC and 3,888,000 CYBER-ETH can be used to maintain liquidity on the bridging service." Only 1,088,000 CYBER were unlocked to Community Treasury so far, not the 10.888M stated here.
+          </div>
           <SpaceProposalContent :space="space" :proposal="proposal" />
         </div>
         <div class="space-y-4">

src/composables/useStatement.ts

@@ -1,5 +1,6 @@
 import { STATEMENTS_QUERY } from '@/helpers/queries';
 import { Statement } from '@/helpers/interfaces';
+import { clone } from '@snapshot-labs/snapshot.js/src/utils';
 
 const SET_STATEMENT_ACTION = 'set-statement';
 
@@ -76,7 +77,7 @@ export function useStatement() {
 
   function getStatement(id: string): { about: string; statement: string } {
     const defaultStatement = { about: '', statement: '' };
-    return statements.value?.[id?.toLowerCase()] || defaultStatement;
+    return clone(statements.value?.[id?.toLowerCase()] || defaultStatement);
   }
 
   function formatPercentageNumber(value: string | number) {

src/views/SpaceDelegate.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { ExtendedSpace } from '@/helpers/interfaces';
 import { DEFAULT_ETH_ADDRESS } from '@/helpers/constants';
+import { useConfirmDialog } from '@vueuse/core';
+
+const INITIAL_STATEMENT = {
+  about: '',
+  statement: ''
+};
 
 const props = defineProps<{
   space: ExtendedSpace;
@@ -9,6 +15,7 @@ const props = defineProps<{
 const { web3Account } = useWeb3();
 const { formatCompactNumber } = useIntl();
 const { getProfile } = useProfiles();
+const { saveStatement, savingStatement } = useStatement();
 const route = useRoute();
 
 const {
@@ -25,13 +32,18 @@ const { reloadStatement, getStatement, formatPercentageNumber } =
 const showEdit = ref(false);
 const showDelegateModal = ref(false);
 const web3AccountDelegatingTo = ref('');
-const statementForm = ref({
-  about: '',
-  statement: ''
-});
+const fetchedStatement = ref(INITIAL_STATEMENT);
+const statementForm = ref(INITIAL_STATEMENT);
 
 const address = computed(() => route.params.address as string);
 
+const edited = computed(() => {
+  return (
+    fetchedStatement.value?.about !== statementForm.value?.about ||
+    fetchedStatement.value?.statement !== statementForm.value?.statement
+  );
+});
+
 const isLoggedUser = computed(() => {
   return web3Account.value.toLowerCase() === address.value.toLowerCase();
 });
@@ -73,21 +85,31 @@ const delegatorItems = computed(() => {
   ];
 });
 
+async function saveStatementForm() {
+  if (!showEdit.value) showEdit.value = true;
+  try {
+    await saveStatement(props.space.id, statementForm.value);
+    reloadStatement(props.space.id, address.value);
+    showEdit.value = false;
+  } catch (e) {
+    console.log(e);
+  }
+}
+
 async function loadDelegatingTo() {
   web3AccountDelegatingTo.value = await fetchDelegatingTo(web3Account.value);
 }
 
 async function handleReload() {
-  reloadStatement(props.space.id, address.value);
   loadDelegate(address.value);
   loadDelegatingTo();
-  showEdit.value = false;
 }
 
 async function init() {
   loadDelegatingTo();
   await loadDelegate(address.value);
   statementForm.value = getStatement(address.value);
+  fetchedStatement.value = getStatement(address.value);
 }
 
 watch(address, init, {
@@ -101,6 +123,20 @@ watch(address, () => {
 watch(web3Account, async () => {
   loadDelegatingTo();
 });
+
+const {
+  isRevealed: isConfirmLeaveOpen,
+  reveal: openConfirmLeave,
+  confirm: confirmLeave,
+  cancel: cancelLeave
+} = useConfirmDialog();
+
+onBeforeRouteLeave(async () => {
+  if (edited.value) {
+    const { data } = await openConfirmLeave();
+    if (!data) return false;
+  }
+});
 </script>
 
 <template>
@@ -131,8 +167,10 @@ watch(web3Account, async () => {
         :space="space"
         :address="address"
         :statement="statementForm"
+        :edited="edited"
+        :saving="savingStatement"
         class="mt-[16px]"
-        @reload="handleReload"
+        @save="saveStatementForm"
         @update:about="statementForm.about = $event"
         @update:statement="statementForm.statement = $event"
       />
@@ -233,6 +271,13 @@ watch(web3Account, async () => {
         @close="showDelegateModal = false"
         @reload="handleReload"
       />
+      <ModalConfirmLeave
+        :open="isConfirmLeaveOpen"
+        show-cancel
+        @close="cancelLeave"
+        @save="saveStatementForm"
+        @leave="confirmLeave(true)"
+      />
     </Teleport>
   </div>
 </template>

src/views/SpaceSettings.vue

@@ -373,16 +373,13 @@ const isViewOnly = computed(() => {
         </p>
       </div>
     </ModalConfirmAction>
-    <ModalConfirmAction
+    <ModalConfirmLeave
       :open="isConfirmLeaveOpen"
       show-cancel
       @close="cancelLeave"
-      @confirm="confirmLeave(true)"
-    >
-      <BaseMessageBlock level="warning" class="m-4">
-        {{ $t('settings.confirmLeaveMessage') }}
-      </BaseMessageBlock>
-    </ModalConfirmAction>
+      @save="handleSubmit"
+      @leave="confirmLeave(true)"
+    />
     <ModalConfirmAction
       :open="isConfirmDeleteOpen"
       :disabled="modalDeleteSpaceConfirmation !== space.id"

yarn.lock

@@ -1869,10 +1869,10 @@
   dependencies:
     cross-fetch "^3.1.5"
 
-"@snapshot-labs/snapshot.js@^0.5.6":
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/@snapshot-labs/snapshot.js/-/snapshot.js-0.5.6.tgz#e8fa4786bfc1fd69c5093d31e65b60ad2f0c5f65"
-  integrity sha512-5YVgM2V2uhJi3PZfTwSNihcrPa66Wz697IfC8v57enXdYaVYryZnwZfB0A0eahgwdtjBHWlyPOvfRI4Rr7aoTw==
+"@snapshot-labs/snapshot.js@^0.5.8":
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/@snapshot-labs/snapshot.js/-/snapshot.js-0.5.8.tgz#16bf19b27e487e937be8472e53f0ed71f25e47af"
+  integrity sha512-bFe4VBUOD2LbKKesD52G7hqBCrmx7BS/4n8JfnzR+GZddL4UWmjRhfnxx/6YLeJvaHOWSPs7LHkr16fpJXD7pQ==
   dependencies:
     "@ensdomains/eth-ens-namehash" "^2.0.15"
     "@ethersproject/abi" "^5.6.4"