fix: Show sub proposals on custom domain (snapshot-labs#3485)

* Show sub proposals on custom domain

* Cleanup

* Fix warnings

* Fix warnings

src/components/LinkSpace.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import domains from '@/../snapshot-spaces/spaces/domains.json';
+import { useApp } from '@/composables';
+
+const props = defineProps<{
+  spaceId: string;
+}>();
+
+const { domain } = useApp();
+
+const spaceLink = computed(() => {
+  // Check if proposal space id is a value in the domains.json file
+  if (domain && Object.values(domains).includes(props.spaceId)) {
+    // If so, find the key that matches the value
+    const key = Object.keys(domains).find(
+      key => domains[key] === props.spaceId
+    );
+    return `https://${key}`;
+  }
+
+  if (domain) return `https://snapshot.org/#/${props.spaceId}`;
+
+  return {
+    name: 'spaceProposals',
+    params: { key: props.spaceId }
+  };
+});
+</script>
+
+<template>
+  <BaseLink :link="spaceLink" hide-external-icon>
+    <slot />
+  </BaseLink>
+</template>

src/components/ProposalsItem.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   profiles: { [key: string]: Profile };
   space: ExtendedSpace;
   voted: boolean;
+  to: Record<string, unknown>;
   hideSpaceAvatar?: boolean;
 }>();
 
@@ -16,23 +17,15 @@ const body = computed(() => removeMd(props.proposal.body));
 
 <template>
   <div>
-    <router-link
-      class="block p-3 text-skin-text sm:p-4"
-      :to="{
-        name: 'spaceProposal',
-        params: { key: proposal.space.id, id: proposal.id }
-      }"
-    >
+    <router-link class="block p-3 text-skin-text sm:p-4" :to="to">
       <div>
         <div class="mb-2 flex items-center justify-between">
           <div class="flex items-center space-x-1">
             <template v-if="!hideSpaceAvatar">
-              <router-link
+              <LinkSpace
                 class="text-skin-text"
-                :to="{
-                  name: 'spaceProposals',
-                  params: { key: proposal.space.id }
-                }"
+                :space-id="proposal.space.id"
+                @click.stop
               >
                 <div class="flex items-center">
                   <AvatarSpace :space="proposal.space" size="28" />
@@ -41,7 +34,7 @@ const body = computed(() => removeMd(props.proposal.body));
                     v-text="proposal.space.name"
                   />
                 </div>
-              </router-link>
+              </LinkSpace>
               <span v-text="$tc('proposalBy')" />
             </template>
             <BaseUser

src/components/SettingsSubSpacesBlock.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 }>();
 
 const { form } = useSpaceForm(props.context);
-const { loadExtentedSpaces, extentedSpaces } = useExtendedSpaces();
+const { loadExtendedSpaces, extendedSpaces } = useExtendedSpaces();
 
 const lookingUpParent = ref(false);
 const foundParent = ref(false);
@@ -22,9 +22,9 @@ watchDebounced(
     if (!form.value.parent) return;
 
     lookingUpParent.value = true;
-    await loadExtentedSpaces([form.value.parent]);
+    await loadExtendedSpaces([form.value.parent]);
 
-    const found = extentedSpaces.value?.some(
+    const found = extendedSpaces.value?.some(
       space => space.id === form.value.parent
     );
     if (found) {
@@ -50,9 +50,9 @@ watchDebounced(
     if (!childInput.value) return;
 
     lookingUpChild.value = true;
-    await loadExtentedSpaces([childInput.value]);
+    await loadExtendedSpaces([childInput.value]);
 
-    const found = extentedSpaces.value?.some(
+    const found = extendedSpaces.value?.some(
       space => space.id === childInput.value
     );
     if (found) {

src/components/SetupDomain.vue

@@ -14,7 +14,7 @@ const defaultNetwork = import.meta.env.VITE_DEFAULT_NETWORK;
 
 const { web3Account } = useWeb3();
 const { loadOwnedEnsDomains, ownedEnsDomains } = useEns();
-const { loadExtentedSpaces, extentedSpaces, spaceLoading } =
+const { loadExtendedSpaces, extendedSpaces, spaceLoading } =
   useExtendedSpaces();
 
 const inputDomain = ref('');
@@ -28,19 +28,19 @@ watch(
     await loadOwnedEnsDomains(web3Account.value);
     loadingOwnedEnsDomains.value = false;
     if (ownedEnsDomains.value.map(d => d.name).length)
-      await loadExtentedSpaces(ownedEnsDomains.value.map(d => d.name));
+      await loadExtendedSpaces(ownedEnsDomains.value.map(d => d.name));
   },
   { immediate: true }
 );
 
 const domainsWithoutExistingSpace = computed(() => {
-  const spaces = clone(extentedSpaces.value.map(space => space.id));
+  const spaces = clone(extendedSpaces.value.map(space => space.id));
   return ownedEnsDomains.value.filter(d => !spaces.includes(d.name));
 });
 
 const domainsWithExistingSpace = computed(() => {
   const spaces = ownedEnsDomains.value.map(d => d.name);
-  return extentedSpaces.value.filter(d => spaces.includes(d.id));
+  return extendedSpaces.value.filter(d => spaces.includes(d.id));
 });
 
 const emit = defineEmits(['next']);

src/components/SpaceProposalHeader.vue

@@ -105,18 +105,12 @@ watch(
   <div class="mb-4 flex flex-col sm:flex-row sm:space-x-1">
     <div class="mb-1 flex items-center sm:mb-0">
       <LabelProposalState :state="proposal.state" class="mr-2" />
-      <router-link
-        class="group text-skin-text"
-        :to="{
-          name: 'spaceProposals',
-          params: { key: space.id }
-        }"
-      >
+      <LinkSpace :space-id="space.id" class="group text-skin-text">
         <div class="flex items-center">
           <AvatarSpace :space="space" size="28" />
           <span class="ml-2 group-hover:text-skin-link" v-text="space.name" />
         </div>
-      </router-link>
+      </LinkSpace>
     </div>
     <div class="flex grow items-center space-x-1">
       <span v-text="$t('proposalBy')" />