feat: vote and create/update proposals with session key

.changeset/nice-dogs-agree.md

@@ -0,0 +1,5 @@
+---
+"@snapshot-labs/sx": patch
+---
+
+add space follow and unfollow support for OffchainEthereumSig

.changeset/thick-carrots-brush.md

@@ -0,0 +1,5 @@
+---
+"@snapshot-labs/sx": patch
+---
+
+add setAlias to OffchainEthereumSig

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

@@ -2,24 +2,24 @@
 import draggable from 'vuedraggable';
 
 const uiStore = useUiStore();
-const spacesStore = useSpacesStore();
+const bookmarksStore = useBookmarksStore();
 </script>
 
 <template>
-  <div class="w-[72px] border-r fixed left-0 top-0 bottom-0 text-center">
+  <div class="w-[72px] flex flex-col border-r fixed left-0 top-0 bottom-0 text-center h-screen">
     <router-link :to="{ name: 'landing' }" class="h-[72px] block">
       <IH-stop class="inline-block my-4 w-[32px] h-[32px] text-skin-link" />
     </router-link>
-    <UiLoading v-if="!spacesStore.starredSpacesLoaded" />
+    <UiLoading v-if="!bookmarksStore.bookmarksLoaded" />
     <draggable
       v-else
-      v-model="spacesStore.starredSpaces"
+      v-model="bookmarksStore.bookmarkedSpaces"
       :delay="100"
       :delay-on-touch-only="true"
       :touch-start-threshold="35"
       :item-key="i => i"
       v-bind="{ animation: 200 }"
-      class="space-y-3 p-2"
+      class="space-y-3 p-2 no-scrollbar overscroll-contain overflow-auto"
     >
       <template #item="{ element }">
         <router-link

apps/ui/src/components/SpacesListItem.vue

@@ -4,12 +4,14 @@ import { Space } from '@/types';
 
 const props = defineProps<{ space: Space }>();
 
-const spacesStore = useSpacesStore();
+const bookmarksStore = useBookmarksStore();
+
+const compositeSpaceId = `${props.space.network}:${props.space.id}`;
 </script>
 
 <template>
   <router-link
-    :to="{ name: 'space-overview', params: { id: `${space.network}:${space.id}` } }"
+    :to="{ name: 'space-overview', params: { id: compositeSpaceId } }"
     class="text-skin-text border rounded-lg block h-[280px] relative group overflow-hidden"
   >
     <SpaceCover :space="props.space" class="!rounded-none w-full h-[68px] absolute" />
@@ -24,12 +26,9 @@ const spacesStore = useSpacesStore();
     </div>
     <button
       class="hidden group-hover:block absolute top-3 right-3 hover:text-skin-link"
-      @click.prevent="spacesStore.toggleSpaceStar(`${space.network}:${space.id}`)"
+      @click.prevent="bookmarksStore.toggleSpaceStar(compositeSpaceId)"
     >
-      <IS-star
-        v-if="spacesStore.starredSpacesIds.includes(`${space.network}:${space.id}`)"
-        class="inline-block"
-      />
+      <IS-star v-if="bookmarksStore.isStarred(compositeSpaceId)" class="inline-block" />
       <IH-star v-else class="inline-block" />
     </button>
     <div class="px-4">

apps/ui/src/composables/useAccount.ts

@@ -1,8 +1,7 @@
 import { getNetwork } from '@/networks';
-import type { NetworkID, Proposal, Space, Vote } from '@/types';
+import type { NetworkID, Proposal, Vote } from '@/types';
 
-const votes: Ref<Record<Proposal['id'], Vote>> = ref({});
-const follows: Ref<Space['id'][]> = ref([]);
+const votes = ref<Record<Proposal['id'], Vote>>({});
 
 export function useAccount() {
   const { web3, web3Account } = useWeb3();
@@ -17,20 +16,13 @@ export function useAccount() {
     votes.value = { ...votes.value, ...userVotes };
   }
 
-  async function loadFollows(networkId: NetworkID) {
-    const { account, type } = web3.value;
-    if (!account || type === 'argentx') {
-      follows.value = [];
-      return;
-    }
-
-    const network = getNetwork(networkId);
-    follows.value = (await network.api.loadFollows(account)).map(follow => follow.space.id);
-  }
-
   watchEffect(() => {
     if (!web3Account.value) votes.value = {};
   });
 
-  return { account: web3.value.account, loadVotes, loadFollows, votes, follows };
+  return {
+    account: web3.value.account,
+    votes,
+    loadVotes
+  };
 }

apps/ui/src/composables/useActions.ts

@@ -1,5 +1,5 @@
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
-import { getNetwork, getReadWriteNetwork } from '@/networks';
+import { getNetwork, getReadWriteNetwork, offchainNetworks } from '@/networks';
 import { registerTransaction } from '@/helpers/mana';
 import { convertToMetaTransactions } from '@/helpers/transactions';
 import type {
@@ -12,11 +12,14 @@ import type {
   NetworkID,
   VoteType
 } from '@/types';
+import type { Web3Provider } from '@ethersproject/providers';
 import type { Connector, StrategyConfig } from '@/networks/types';
+import type { Wallet } from '@ethersproject/wallet';
 
 export function useActions() {
   const { mixpanel } = useMixpanel();
   const uiStore = useUiStore();
+  const alias = useAlias();
   const { web3 } = useWeb3();
   const { getCurrentFromDuration } = useMetaStore();
   const { modalAccountOpen } = useModal();
@@ -103,6 +106,20 @@ export function useActions() {
     modalAccountOpen.value = true;
   }
 
+  async function aliasableSigner(networkId: NetworkID): Promise<Web3Provider | Wallet> {
+    if (!offchainNetworks.includes(networkId)) return auth.web3;
+
+    const network = getNetwork(networkId);
+
+    if (!(await alias.isValid())) {
+      await alias.create(address =>
+        wrapPromise(networkId, network.actions.setAlias(auth.web3, address))
+      );
+    }
+
+    return alias.wallet.value || auth.web3;
+  }
+
   async function predictSpaceAddress(networkId: NetworkID, salt: string): Promise<string | null> {
     if (!web3.value.account) {
       forceLogin();
@@ -194,7 +211,7 @@ export function useActions() {
     await wrapPromise(
       proposal.network,
       network.actions.vote(
-        auth.web3,
+        await aliasableSigner(proposal.network),
         web3.value.type as Connector,
         web3.value.account,
         proposal,
@@ -248,7 +265,7 @@ export function useActions() {
     await wrapPromise(
       space.network,
       network.actions.propose(
-        auth.web3,
+        await aliasableSigner(space.network),
         web3.value.type as Connector,
         web3.value.account,
         space,
@@ -303,7 +320,7 @@ export function useActions() {
     await wrapPromise(
       space.network,
       network.actions.updateProposal(
-        auth.web3,
+        await aliasableSigner(space.network),
         web3.value.type as Connector,
         web3.value.account,
         space,
@@ -485,6 +502,48 @@ export function useActions() {
     });
   }
 
+  async function followSpace(networkId: NetworkID, spaceId: string) {
+    if (!web3.value.account) {
+      await forceLogin();
+      return false;
+    }
+
+    const network = getNetwork(networkId);
+
+    try {
+      await wrapPromise(
+        networkId,
+        network.actions.followSpace(await aliasableSigner(networkId), spaceId, web3.value.account)
+      );
+    } catch (e) {
+      uiStore.addNotification('error', e.message);
+      return false;
+    }
+
+    return true;
+  }
+
+  async function unfollowSpace(networkId: NetworkID, spaceId: string) {
+    if (!web3.value.account) {
+      await forceLogin();
+      return false;
+    }
+
+    const network = getNetwork(networkId);
+
+    try {
+      await wrapPromise(
+        networkId,
+        network.actions.unfollowSpace(await aliasableSigner(networkId), spaceId, web3.value.account)
+      );
+    } catch (e) {
+      uiStore.addNotification('error', e.message);
+      return false;
+    }
+
+    return true;
+  }
+
   return {
     predictSpaceAddress: wrapWithErrors(predictSpaceAddress),
     deployDependency: wrapWithErrors(deployDependency),
@@ -503,6 +562,8 @@ export function useActions() {
     setMaxVotingDuration: wrapWithErrors(setMaxVotingDuration),
     transferOwnership: wrapWithErrors(transferOwnership),
     updateStrategies: wrapWithErrors(updateStrategies),
-    delegate: wrapWithErrors(delegate)
+    delegate: wrapWithErrors(delegate),
+    followSpace: wrapWithErrors(followSpace),
+    unfollowSpace: wrapWithErrors(unfollowSpace)
   };
 }

apps/ui/src/composables/useAlias.ts

@@ -0,0 +1,50 @@
+import { Wallet } from '@ethersproject/wallet';
+import { getDefaultProvider } from '@ethersproject/providers';
+import pkg from '../../package.json';
+import { enabledNetworks, getNetwork, offchainNetworks } from '@/networks';
+
+const aliases = useStorage(`${pkg.name}.aliases`, {} as Record<string, string>);
+
+const networkId = offchainNetworks.filter(network => enabledNetworks.includes(network))[0];
+const network = getNetwork(networkId);
+
+export function useAlias() {
+  const { web3 } = useWeb3();
+
+  const wallet = computed(() => {
+    const provider = getDefaultProvider();
+    const pk = aliases.value[web3.value.account];
+
+    if (!pk) return null;
+
+    return new Wallet(pk, provider);
+  });
+
+  async function create(actionFn: (address: string) => Promise<unknown>) {
+    const newAliasWallet = Wallet.createRandom();
+
+    await actionFn(newAliasWallet.address);
+
+    aliases.value = {
+      ...aliases.value,
+      ...{
+        [web3.value.account]: newAliasWallet.privateKey
+      }
+    };
+  }
+
+  async function isValid() {
+    if (!wallet.value) return false;
+
+    const registeredAlias = await network.api.loadAlias(web3.value.account, wallet.value.address);
+
+    if (!registeredAlias) return false;
+
+    return (
+      registeredAlias.address === web3.value.account &&
+      registeredAlias.alias === wallet.value.address
+    );
+  }
+
+  return { wallet, isValid, create };
+}

apps/ui/src/networks/common/graphqlApi/index.ts

@@ -435,6 +435,9 @@ export function createApi(uri: string, networkId: NetworkID, opts: ApiOptions =
     },
     loadFollows: async () => {
       return [] as Follow[];
+    },
+    loadAlias: async () => {
+      return null;
     }
   };
 }

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

@@ -606,6 +606,9 @@ export function createActions(
           };
         })
       );
-    }
+    },
+    followSpace: () => {},
+    unfollowSpace: () => {},
+    setAlias() {}
   };
 }