feat: add option to flag offchain proposals (#1063)

.changeset/lucky-kangaroos-approve.md

@@ -0,0 +1,5 @@
+---
+"@snapshot-labs/sx": patch
+---
+
+add flagProposal method to offchain EthereumSig client

apps/ui/src/composables/useActions.ts

@@ -349,6 +349,25 @@ export function useActions() {
     return true;
   }
 
+  async function flagProposal(proposal: Proposal) {
+    if (!web3.value.account) {
+      await forceLogin();
+      return false;
+    }
+
+    const network = getNetwork(proposal.network);
+    if (!network.managerConnectors.includes(web3.value.type as Connector)) {
+      throw new Error(`${web3.value.type} is not supported for this action`);
+    }
+
+    await wrapPromise(
+      proposal.network,
+      network.actions.flagProposal(auth.web3, proposal)
+    );
+
+    return true;
+  }
+
   async function cancelProposal(proposal: Proposal) {
     if (!web3.value.account) {
       await forceLogin();
@@ -634,6 +653,7 @@ export function useActions() {
     vote: wrapWithErrors(vote),
     propose: wrapWithErrors(propose),
     updateProposal: wrapWithErrors(updateProposal),
+    flagProposal: wrapWithErrors(flagProposal),
     cancelProposal: wrapWithErrors(cancelProposal),
     finalizeProposal: wrapWithErrors(finalizeProposal),
     executeTransactions: wrapWithErrors(executeTransactions),

apps/ui/src/networks/evm/actions.ts

@@ -368,6 +368,9 @@ export function createActions(
         { noWait: isContract }
       );
     },
+    flagProposal: () => {
+      throw new Error('Not implemented');
+    },
     cancelProposal: async (web3: Web3Provider, proposal: Proposal) => {
       await verifyNetwork(web3, chainId);
 

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

@@ -188,6 +188,15 @@ export function createActions(
 
       return client.updateProposal({ signer: web3.getSigner(), data });
     },
+    flagProposal(web3: Web3Provider, proposal: Proposal) {
+      return client.flagProposal({
+        signer: web3.getSigner(),
+        data: {
+          proposal: proposal.proposal_id as string,
+          space: proposal.space.id
+        }
+      });
+    },
     cancelProposal(web3: Web3Provider, proposal: Proposal) {
       return client.cancel({
         signer: web3.getSigner(),

apps/ui/src/networks/starknet/actions.ts

@@ -401,6 +401,9 @@ export function createActions(
         data
       });
     },
+    flagProposal: () => {
+      throw new Error('Not implemented');
+    },
     cancelProposal: async (web3: any, proposal: Proposal) => {
       await verifyStarknetNetwork(web3, chainId);
 

apps/ui/src/networks/types.ts

@@ -169,6 +169,7 @@ export type ReadOnlyNetworkActions = {
     labels: string[],
     executions: ExecutionInfo[] | null
   ): Promise<any>;
+  flagProposal(web3: Web3Provider, proposal: Proposal);
   cancelProposal(web3: Web3Provider, proposal: Proposal);
   vote(
     web3: Web3Provider,

apps/ui/src/views/Proposal/Overview.vue

@@ -20,7 +20,7 @@ const uiStore = useUiStore();
 const proposalsStore = useProposalsStore();
 const { getCurrent, getTsFromCurrent } = useMetaStore();
 const { web3 } = useWeb3();
-const { cancelProposal } = useActions();
+const { flagProposal, cancelProposal } = useActions();
 const { createDraft } = useEditor();
 const {
   state: aiSummaryState,
@@ -42,9 +42,24 @@ const {
 
 const modalOpenVotes = ref(false);
 const modalOpenTimeline = ref(false);
+const flagging = ref(false);
 const cancelling = ref(false);
 const aiSummaryOpen = ref(false);
 
+const flaggable = computed(() => {
+  if (!offchainNetworks.includes(props.proposal.network)) return false;
+  if (props.proposal.flagged) return false;
+
+  const addresses = [
+    props.proposal.space.admins || [],
+    props.proposal.space.moderators || []
+  ].flat();
+
+  return addresses.some(address =>
+    compareAddresses(address, web3.value.account)
+  );
+});
+
 const editable = computed(() => {
   // HACK: here we need to use snapshot instead of start because start is artificially
   // shifted for Starknet's proposals with ERC20Votes strategies.
@@ -176,6 +191,22 @@ async function handleDuplicateClick() {
   });
 }
 
+async function handleFlagClick() {
+  flagging.value = true;
+
+  try {
+    const result = await flagProposal(props.proposal);
+    if (result) {
+      proposalsStore.reset(props.proposal.space.id, props.proposal.network);
+      router.push({
+        name: 'space-overview'
+      });
+    }
+  } finally {
+    flagging.value = false;
+  }
+}
+
 async function handleCancelClick() {
   cancelling.value = true;
 
@@ -357,6 +388,21 @@ onBeforeUnmount(() => destroyAudio());
                   Edit proposal
                 </button>
               </UiDropdownItem>
+              <UiDropdownItem
+                v-if="flaggable"
+                v-slot="{ active, disabled }"
+                :disabled="flagging"
+              >
+                <button
+                  type="button"
+                  class="flex items-center gap-2"
+                  :class="{ 'opacity-80': active, 'opacity-40': disabled }"
+                  @click="handleFlagClick"
+                >
+                  <IH-flag :width="16" />
+                  Flag proposal
+                </button>
+              </UiDropdownItem>
               <UiDropdownItem
                 v-if="cancellable"
                 v-slot="{ active, disabled }"

packages/sx.js/src/clients/offchain/ethereum-sig/index.ts

@@ -11,6 +11,7 @@ import {
   deleteSpaceTypes,
   domain,
   encryptedVoteTypes,
+  flagProposalTypes,
   followSpaceTypes,
   proposeTypes,
   rankedChoiceVoteTypes,
@@ -29,6 +30,7 @@ import {
   DeleteSpace,
   EIP712CancelProposalMessage,
   EIP712DeleteSpaceMessage,
+  EIP712FlagProposalMessage,
   EIP712FollowSpaceMessage,
   EIP712Message,
   EIP712ProposeMessage,
@@ -40,6 +42,7 @@ import {
   EIP712UpdateUserMessage,
   EIP712VoteMessage,
   Envelope,
+  FlagProposal,
   FollowSpace,
   Propose,
   SetAlias,
@@ -82,6 +85,7 @@ export class EthereumSig {
       | EIP712VoteMessage
       | EIP712ProposeMessage
       | EIP712UpdateProposal
+      | EIP712FlagProposalMessage
       | EIP712CancelProposalMessage
       | EIP712FollowSpaceMessage
       | EIP712UnfollowSpaceMessage
@@ -116,6 +120,7 @@ export class EthereumSig {
       | Vote
       | Propose
       | UpdateProposal
+      | FlagProposal
       | CancelProposal
       | FollowSpace
       | UnfollowSpace
@@ -200,6 +205,21 @@ export class EthereumSig {
     };
   }
 
+  public async flagProposal({
+    signer,
+    data
+  }: {
+    signer: Signer & TypedDataSigner;
+    data: FlagProposal;
+  }): Promise<Envelope<FlagProposal>> {
+    const signatureData = await this.sign(signer, data, flagProposalTypes);
+
+    return {
+      signatureData,
+      data
+    };
+  }
+
   public async cancel({
     signer,
     data

packages/sx.js/src/clients/offchain/ethereum-sig/types.ts

@@ -93,6 +93,15 @@ export const updateProposalTypes = {
   ]
 };
 
+export const flagProposalTypes = {
+  FlagProposal: [
+    { name: 'from', type: 'address' },
+    { name: 'space', type: 'string' },
+    { name: 'proposal', type: 'string' },
+    { name: 'timestamp', type: 'uint64' }
+  ]
+};
+
 export const cancelProposalTypes = {
   CancelProposal: [
     { name: 'from', type: 'address' },

packages/sx.js/src/clients/offchain/types.ts

@@ -80,6 +80,13 @@ export type EIP712UpdateProposal = {
   from?: string;
 };
 
+export type EIP712FlagProposalMessage = {
+  space: string;
+  proposal: string;
+  from?: string;
+  timestamp?: number;
+};
+
 export type EIP712CancelProposalMessage = {
   space: string;
   proposal: string;
@@ -193,11 +200,18 @@ export type UpdateProposal = {
   plugins: string;
 };
 
-export type CancelProposal = {
+export type FlagProposal = {
   from?: string;
   space: string;
+  proposal: string;
   timestamp?: number;
+};
+
+export type CancelProposal = {
+  from?: string;
+  space: string;
   proposal: string;
+  timestamp?: number;
 };
 
 export type FollowSpace = {