Merge branch 'master' into feat-whitelabel

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import IHBell from '~icons/heroicons-outline/bell';
+import IHGlobe from '~icons/heroicons-outline/globe-americas';
+import IHHome from '~icons/heroicons-outline/home';
+import IHUser from '~icons/heroicons-outline/user';
+
+const { web3 } = useWeb3();
+const route = useRoute();
+
+const menu = [
+  {
+    label: 'Home',
+    link: { name: 'my-home' },
+    icon: IHHome
+  },
+  {
+    label: 'Explore',
+    link: { name: 'my-explore' },
+    icon: IHGlobe
+  },
+  {
+    label: 'Notifications',
+    link: { name: 'my-notifications' },
+    icon: IHBell
+  },
+  {
+    label: 'Profile',
+    link: { name: 'user', params: { user: web3.value.account } },
+    icon: IHUser
+  }
+];
+</script>
+
+<template>
+  <nav class="bg-skin-bg border-t text-xs">
+    <div class="flex gap-2 px-3 justify-center">
+      <AppLink
+        v-for="(item, i) in menu"
+        :key="i"
+        :to="item.link"
+        class="inline-flex flex-col text-center gap-1 truncate justify-center w-[25%] max-w-[120px]"
+        :class="
+          route.name === item.link.name ? 'text-skin-link' : 'text-skin-text'
+        "
+      >
+        <component :is="item.icon" class="mx-auto" />
+        <span class="truncate" v-text="item.label" />
+      </AppLink>
+    </div>
+  </nav>
+</template>

apps/ui/src/components/FormSpaceAdvanced.vue

@@ -52,7 +52,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'updateValidity', valid: boolean): void;
+  (e: 'updateValidity', valid: boolean, resolved: boolean): void;
   (e: 'deleteSpace');
 }>();
 
@@ -135,12 +135,12 @@ function deleteChild(i: number) {
 }
 
 watchEffect(() => {
+  const resolved = parentSpaceValidationResult.value?.value === parent.value;
   const valid =
     Object.keys(formErrors.value).length === 0 &&
-    parentSpaceValidationResult.value?.valid &&
-    parentSpaceValidationResult.value?.value === parent.value;
+    parentSpaceValidationResult.value?.valid;
 
-  emit('updateValidity', !!valid);
+  emit('updateValidity', !!valid, resolved);
 });
 </script>
 

apps/ui/src/components/FormSpaceProposal.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { getValidator } from '@/helpers/validation';
+
+const GUIDELINES_DEFINITION = {
+  type: 'string',
+  format: 'uri',
+  title: 'Guidelines',
+  maxLength: 256,
+  examples: ['https://example.com/guidelines'],
+  tooltip:
+    'Display a link to your guidelines on proposal creation to help users understand what constitutes a good/valid proposal'
+};
+
+const TEMPLATE_DEFINITION = {
+  type: 'string',
+  title: 'Template',
+  maxLength: 1024,
+  examples: ['## Intro\n## Body\n## Conclusion'],
+  tooltip:
+    'Start every proposal with a template to help users understand what information is required'
+};
+
+const onlyMembers = defineModel<boolean>('onlyMembers', {
+  required: true
+});
+const guidelines = defineModel<string>('guidelines', {
+  required: true
+});
+const template = defineModel<string>('template', {
+  required: true
+});
+
+const emit = defineEmits<{
+  (e: 'updateValidity', valid: boolean): void;
+}>();
+
+const errors = computed(() => {
+  const validator = getValidator({
+    type: 'object',
+    title: 'Proposal',
+    additionalProperties: false,
+    required: [],
+    properties: {
+      guidelines: GUIDELINES_DEFINITION,
+      template: TEMPLATE_DEFINITION
+    }
+  });
+
+  return validator.validate(
+    {
+      guidelines: guidelines.value,
+      template: template.value
+    },
+    { skipEmptyOptionalFields: true }
+  );
+});
+
+watchEffect(() => {
+  emit('updateValidity', Object.values(errors.value).length === 0);
+});
+</script>
+
+<template>
+  <h4 class="eyebrow mb-2 font-medium">Proposal Validation</h4>
+  <div class="s-box mb-4">
+    <UiSwitch
+      v-model="onlyMembers"
+      title="Allow only authors to submit a proposal"
+    />
+  </div>
+  <h4 class="eyebrow mb-2 font-medium">Proposal</h4>
+  <div class="s-box mb-4">
+    <UiInputString
+      v-model="guidelines"
+      :definition="GUIDELINES_DEFINITION"
+      :error="errors.guidelines"
+    />
+    <UiTextarea
+      v-model="template"
+      :definition="TEMPLATE_DEFINITION"
+      :error="errors.template"
+      class="!min-h-[140px]"
+    />
+  </div>
+</template>

apps/ui/src/components/FormSpaceVoting.vue

@@ -35,6 +35,10 @@ const props = defineProps<{
   space: Space;
 }>();
 
+const emit = defineEmits<{
+  (e: 'updateValidity', valid: boolean): void;
+}>();
+
 const QUORUM_DEFINITION = {
   type: 'number',
   title: 'Quorum',
@@ -99,6 +103,10 @@ function getIsMaxVotingPeriodValid(value: number) {
     props.space.min_voting_period
   );
 }
+
+watchEffect(() => {
+  emit('updateValidity', Object.values(errors.value).length === 0);
+});
 </script>
 
 <template>

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

@@ -172,10 +172,17 @@ router.afterEach(() => {
   >
     <UiLoading v-if="app.loading || !app.init" class="overlay big" />
     <div v-else :class="['flex min-h-screen', { 'pb-6': bottomPadding }]">
+      <AppBottomNav
+        v-if="web3.account"
+        :class="[
+          `fixed bottom-0 inset-x-0 hidden app-bottom-nav z-[100]`,
+          { 'app-bottom-nav-open': uiStore.sideMenuOpen }
+        ]"
+      />
       <AppSidebar
         v-if="hasSidebar"
         :class="[
-          `hidden lg:flex app-sidebar h-screen fixed inset-y-0`,
+          `hidden lg:flex app-sidebar fixed inset-y-0`,
           { '!flex app-sidebar-open': uiStore.sideMenuOpen }
         ]"
       />
@@ -230,6 +237,7 @@ router.afterEach(() => {
 
 <style lang="scss" scoped>
 $sidebarWidth: 72px;
+$mobileMenuHeight: 72px;
 $navWidth: 240px;
 $placeholderSidebarWidth: 240px;
 
@@ -277,6 +285,22 @@ $placeholderSidebarWidth: 240px;
   }
 }
 
+.app-bottom-nav {
+  height: $mobileMenuHeight;
+
+  @media (max-width: 767px) {
+    &-open {
+      @apply grid;
+
+      & ~ .backdrop,
+      & ~ .app-nav-open,
+      & ~ .app-sidebar-open {
+        @apply bottom-[#{$mobileMenuHeight}];
+      }
+    }
+  }
+}
+
 .app-placeholder-sidebar {
   @apply w-[#{$placeholderSidebarWidth}];
 

apps/ui/src/composables/useSpaceSettings.ts

@@ -131,6 +131,9 @@ export function useSpaceSettings(space: Ref<Space>) {
   const initialValidationStrategyObjectHash = ref(null as string | null);
 
   // Offchain properties
+  const onlyMembers = ref(false);
+  const guidelines = ref('');
+  const template = ref('');
   const quorumType = ref(
     'default' as NonNullable<OffchainApiSpace['voting']['quorumType']>
   );
@@ -487,8 +490,8 @@ export function useSpaceSettings(space: Ref<Space>) {
       private: isPrivate.value,
       domain: customDomain.value,
       skin: space.value.additionalRawData.skin,
-      guidelines: space.value.additionalRawData.guidelines,
-      template: space.value.additionalRawData.template,
+      guidelines: guidelines.value,
+      template: template.value,
       strategies: strategies.value.map(strategy => ({
         name: strategy.name,
         network: strategy.chainId?.toString() ?? snapshotChainId.value,
@@ -512,7 +515,10 @@ export function useSpaceSettings(space: Ref<Space>) {
         .map(member => member.address),
       plugins: space.value.additionalRawData.plugins,
       delegationPortal: delegationPortal,
-      filters: space.value.additionalRawData.filters,
+      filters: {
+        ...space.value.additionalRawData.filters,
+        onlyMembers: onlyMembers.value
+      },
       voting: {
         ...space.value.additionalRawData.voting,
         delay:
@@ -645,8 +651,12 @@ export function useSpaceSettings(space: Ref<Space>) {
     );
 
     if (offchainNetworks.includes(space.value.network)) {
-      const initialVotingProperties = getInitialVotingProperties(space.value);
+      onlyMembers.value =
+        space.value.additionalRawData?.filters.onlyMembers ?? false;
+      guidelines.value = space.value.additionalRawData?.guidelines ?? '';
+      template.value = space.value.additionalRawData?.template ?? '';
 
+      const initialVotingProperties = getInitialVotingProperties(space.value);
       quorumType.value = initialVotingProperties.quorumType;
       quorum.value = initialVotingProperties.quorum;
       voteType.value = initialVotingProperties.votingType;
@@ -681,6 +691,9 @@ export function useSpaceSettings(space: Ref<Space>) {
     const validationStrategyValue = validationStrategy.value;
     const initialValidationStrategyObjectHashValue =
       initialValidationStrategyObjectHash.value;
+    const onlyMembersValue = onlyMembers.value;
+    const guidelinesValue = guidelines.value;
+    const templateValue = template.value;
     const quorumTypeValue = quorumType.value;
     const quorumValue = quorum.value;
     const votingTypeValue = voteType.value;
@@ -734,6 +747,26 @@ export function useSpaceSettings(space: Ref<Space>) {
     if (offchainNetworks.includes(space.value.network)) {
       const ignoreOrderOpts = { unorderedArrays: true };
 
+      if (
+        onlyMembersValue !==
+        (space.value.additionalRawData?.filters.onlyMembers ?? false)
+      ) {
+        isModified.value = true;
+        return;
+      }
+
+      if (
+        guidelinesValue !== (space.value.additionalRawData?.guidelines ?? '')
+      ) {
+        isModified.value = true;
+        return;
+      }
+
+      if (templateValue !== (space.value.additionalRawData?.template ?? '')) {
+        isModified.value = true;
+        return;
+      }
+
       const initialVotingProperties = getInitialVotingProperties(space.value);
 
       if (quorumTypeValue !== initialVotingProperties.quorumType) {
@@ -872,6 +905,9 @@ export function useSpaceSettings(space: Ref<Space>) {
     authenticators,
     validationStrategy,
     votingStrategies,
+    onlyMembers,
+    guidelines,
+    template,
     quorumType,
     quorum,
     votingType: voteType,

apps/ui/src/helpers/intercom.ts

@@ -6,7 +6,7 @@ export function startIntercom() {
   const w: any = window;
   w.intercomSettings = {
     app_id: APP_ID,
-    custom_launcher_selector: '.intercom-launcher'
+    custom_launcher_selector: '.intercom-launcher hidden md:block'
   };
   const ic = w.Intercom;
   if (typeof ic === 'function') {