feat: Separate networks

src/components/ComboboxNetwork.vue

@@ -3,16 +3,22 @@ defineProps<{
   network: string;
   hint?: string;
   disabled?: boolean;
+  error?: string;
+  showErrors?: boolean;
 }>();
 
 const emit = defineEmits(['select']);
 
 const { filterNetworks } = useNetworksFilter();
+const { env } = useApp();
 
 const networks = computed((): { id: string; name: string }[] => {
   const filteredNetworks = filterNetworks().map(_n => ({
     id: _n.key,
-    name: _n.name
+    name: _n.name,
+    extras: {
+      hidden: env === 'production' ? _n.testnet : false
+    }
   }));
 
   return filteredNetworks;
@@ -26,6 +32,8 @@ const networks = computed((): { id: string; name: string }[] => {
     :model-value="network"
     :hint="hint"
     :disabled="disabled"
+    :error="error"
+    :show-errors="showErrors"
     @update:model-value="value => emit('select', value)"
   >
     <template #item="{ item }">

src/components/MessageWarningTestnet.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{
+  context: 'Treasury' | 'Strategy';
+  error?: string | Record<string, any>;
+}>();
+
+const strategyTestnetErrors = computed(() => {
+  if (typeof props.error === 'object') {
+    const entries = Object.entries(props.error).filter(e => e[1].network);
+    return entries.filter(e => e[1].network === 'Testnet not allowed.');
+  }
+});
+</script>
+
+<template>
+  <BaseMessageBlock
+    v-if="strategyTestnetErrors"
+    level="warning-red"
+    class="mt-3"
+  >
+    {{ context }}
+    #{{ strategyTestnetErrors.map(e => Number(e[0]) + 1).join(', ') }}
+    is using a test network which is no longer supported. If you are looking to
+    setup a space for testing, please checkout
+    <BaseLink link="https://demo.snapshot.org"> demo.snapshot.org</BaseLink>
+  </BaseMessageBlock>
+</template>

src/components/SettingsStrategiesBlock.vue

@@ -62,6 +62,8 @@ function handleSubmitStrategy(strategy) {
           :network="form.network"
           :hint="$t('settings.network.information')"
           :disabled="isViewOnly"
+          :error="validationErrors?.network"
+          :show-errors="showErrors"
           @select="value => (form.network = value)"
         />
         <TuneInput

src/components/SettingsTreasuriesBlock.vue

@@ -4,6 +4,7 @@ import { TreasuryWallet } from '@/helpers/interfaces';
 
 const props = defineProps<{
   context: 'setup' | 'settings';
+  error: string | Record<string, any>;
   isViewOnly?: boolean;
 }>();
 
@@ -67,6 +68,9 @@ function handleSubmitTreasury(treasury) {
     >
       {{ $t('settings.treasuries.add') }}
     </BaseButton>
+
+    <MessageWarningTestnet context="Treasury" :error="error" />
+
     <teleport to="#modal">
       <ModalTreasury
         :open="modalTreasuryOpen"

src/components/StrategiesBlockWarning.vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   context?: 'setup' | 'settings';
-  error?: string;
+  error?: string | Record<string, any>;
 }>();
+
+const strategyTestnetErrors = computed(() => {
+  if (typeof props.error === 'object') {
+    const entries = Object.entries(props.error).filter(e => e[1].network);
+    return entries.filter(e => e[1].network === 'Testnet not allowed.');
+  }
+});
 </script>
 
 <template>
-  <BaseMessageBlock v-if="error" level="warning-red" class="mt-3">
-    <span v-if="error === 'ticketWithAnyOrBasicError'">
+  <div v-if="error" class="mt-3">
+    <BaseMessageBlock
+      v-if="error === 'ticketWithAnyOrBasicError'"
+      level="warning-red"
+    >
       <i18n-t
         :keypath="
           context === 'setup'
@@ -25,10 +35,15 @@ defineProps<{
           </BaseLink>
         </template>
       </i18n-t>
-    </span>
+    </BaseMessageBlock>
+    <MessageWarningTestnet
+      v-else-if="strategyTestnetErrors"
+      context="Strategy"
+      :error="error"
+    />
 
-    <span v-else>
+    <BaseMessageBlock v-else level="warning-red">
       {{ error }}
-    </span>
-  </BaseMessageBlock>
+    </BaseMessageBlock>
+  </div>
 </template>

src/components/Tune/TuneCombobox.vue

@@ -23,6 +23,8 @@ const props = defineProps<{
   placeholder?: string;
   disabled?: boolean;
   definition?: any;
+  error?: string;
+  showErrors?: boolean;
 }>();
 
 const emit = defineEmits(['update:modelValue']);
@@ -49,100 +51,98 @@ const selectedItem = computed({
 
 const filteredItems = computed(() => {
   if (searchInput.value === '') {
-    return props.items;
+    return props.items.filter(item => !item.extras?.hidden);
   }
 
-  const miniSearchIds = miniSearch.search(searchInput.value).map(i => i.id);
+  const searchLower = searchInput.value.toLowerCase();
+  const searchResults = new Set(miniSearch.search(searchLower).map(i => i.id));
 
-  const includesIds = props.items
-    ?.filter(i =>
-      i.name.toLowerCase().includes(searchInput.value.toLowerCase())
-    )
-    .map(i => i.id);
+  return props.items.filter(item => {
+    const isIncluded = item.name.toLowerCase().includes(searchLower);
+    const isSearchResult = searchResults.has(item.id);
+    const isNotHidden = !item.extras?.hidden;
 
-  const filterIds = [...miniSearchIds, ...includesIds];
-
-  const filteredItems = props.items.filter(item => {
-    return filterIds.includes(item.id);
+    return (isIncluded || isSearchResult) && isNotHidden;
   });
-
-  return filteredItems;
 });
 </script>
 <template>
-  <Combobox
-    v-model="selectedItem"
-    :disabled="disabled"
-    as="div"
-    class="w-full"
-    nullable
-  >
-    <ComboboxLabel v-if="label || definition?.title" class="block">
-      <TuneLabelInput :hint="hint || definition?.description">
-        {{ label || definition.title }}
-      </TuneLabelInput>
-    </ComboboxLabel>
-    <div class="relative">
-      <ComboboxButton class="w-full">
-        <ComboboxInput
-          class="tune-input w-full py-2 !pr-[30px] pl-3 focus:outline-none"
-          spellcheck="false"
-          :display-value="(item: any) => item?.name"
+  <div class="w-full">
+    <Combobox
+      v-model="selectedItem"
+      :disabled="disabled"
+      as="div"
+      class="w-full"
+      nullable
+    >
+      <ComboboxLabel v-if="label || definition?.title" class="block">
+        <TuneLabelInput :hint="hint || definition?.description">
+          {{ label || definition.title }}
+        </TuneLabelInput>
+      </ComboboxLabel>
+      <div class="relative">
+        <ComboboxButton class="w-full">
+          <ComboboxInput
+            class="tune-input w-full py-2 !pr-[30px] pl-3 focus:outline-none"
+            spellcheck="false"
+            :display-value="(item: any) => item?.name"
+            :class="{ 'cursor-not-allowed': disabled }"
+            :placeholder="
+              placeholder || definition?.examples[0] || 'Select option'
+            "
+            :disabled="disabled"
+            @change="searchInput = $event.target.value"
+          />
+        </ComboboxButton>
+        <ComboboxButton
+          class="absolute inset-y-0 right-1 flex items-center px-2 focus:outline-none"
           :class="{ 'cursor-not-allowed': disabled }"
-          :placeholder="
-            placeholder || definition?.examples[0] || 'Select option'
-          "
-          :disabled="disabled"
-          @change="searchInput = $event.target.value"
-        />
-      </ComboboxButton>
-      <ComboboxButton
-        class="absolute inset-y-0 right-1 flex items-center px-2 focus:outline-none"
-        :class="{ 'cursor-not-allowed': disabled }"
-      >
-        <i-ho-chevron-down class="text-sm" />
-      </ComboboxButton>
-      <ComboboxOptions
-        v-if="filteredItems.length > 0"
-        class="tune-listbox-options absolute z-40 mt-1 w-full overflow-hidden focus:outline-none"
-      >
-        <div class="max-h-[180px] overflow-y-auto">
-          <ComboboxOption
-            v-for="item in filteredItems"
-            v-slot="{ active, selected, disabled: itemDisabled }"
-            :key="item.id"
-            as="template"
-            :value="item"
-          >
-            <li
-              :class="[
-                { active: active },
-                'tune-listbox-item relative cursor-default select-none truncate py-2 pl-3 pr-[50px]'
-              ]"
+        >
+          <i-ho-chevron-down class="text-sm" />
+        </ComboboxButton>
+        <ComboboxOptions
+          v-if="filteredItems.length > 0"
+          class="tune-listbox-options absolute z-40 mt-1 w-full overflow-hidden focus:outline-none"
+        >
+          <div class="max-h-[180px] overflow-y-auto">
+            <ComboboxOption
+              v-for="item in filteredItems"
+              v-slot="{ active, selected, disabled: itemDisabled }"
+              :key="item.id"
+              as="template"
+              :value="item"
             >
-              <span
+              <li
                 :class="[
-                  selected ? 'selected' : 'font-normal',
-                  { disabled: itemDisabled },
-                  'tune-listbox-item block truncate'
+                  { active: active },
+                  'tune-listbox-item relative cursor-default select-none truncate py-2 pl-3 pr-[50px]'
                 ]"
               >
-                <slot v-if="$slots.item" name="item" :item="item" />
-                <span v-else>
-                  {{ item.name }}
+                <span
+                  :class="[
+                    selected ? 'selected' : 'font-normal',
+                    { disabled: itemDisabled },
+                    'tune-listbox-item block truncate'
+                  ]"
+                >
+                  <slot v-if="$slots.item" name="item" :item="item" />
+                  <span v-else>
+                    {{ item.name }}
+                  </span>
                 </span>
-              </span>
 
-              <span
-                v-if="selected"
-                :class="['absolute inset-y-0 right-0 flex items-center pr-3']"
-              >
-                <i-ho-check class="text-sm" />
-              </span>
-            </li>
-          </ComboboxOption>
-        </div>
-      </ComboboxOptions>
-    </div>
-  </Combobox>
+                <span
+                  v-if="selected"
+                  :class="['absolute inset-y-0 right-0 flex items-center pr-3']"
+                >
+                  <i-ho-check class="text-sm" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </div>
+        </ComboboxOptions>
+      </div>
+    </Combobox>
+    <TuneErrorInput v-if="error && showErrors" :error="error" />
+  </div>
 </template>

src/components/Tune/TuneTextarea.vue

@@ -24,7 +24,8 @@ const props = withDefaults(
     error: '',
     autosize: true,
     disabled: false,
-    maxLength: undefined
+    maxLength: undefined,
+    definition: undefined
   }
 );
 

src/composables/useNetworksFilter.ts

@@ -30,16 +30,7 @@ export function useNetworksFilter() {
       (a, b) => (a.key === q ? -1 : b.key === q ? 1 : 0)
     );
 
-    const networksArrayTestnetworksLast = networksArrayByExactKeyMatch.sort(
-      (a, b) =>
-        a.name.toLowerCase().includes('testnet')
-          ? 1
-          : b.name.toLowerCase().includes('testnet')
-            ? -1
-            : 0
-    );
-
-    return networksArrayTestnetworksLast;
+    return networksArrayByExactKeyMatch;
   };
 
   const { apolloQuery } = useApolloQuery();

src/helpers/validation.ts

@@ -6,9 +6,11 @@ import { isAddress } from '@ethersproject/address';
 import networks from '@snapshot-labs/snapshot.js/src/networks.json';
 
 const networksIds = Object.keys(networks);
-// const mainnetNetworkIds = Object.keys(networks).filter(
-//   id => !networks[id].testnet
-// );
+const mainnetNetworkIds = Object.keys(networks).filter(
+  id => !networks[id].testnet
+);
+
+const { env } = useApp();
 
 function getErrorMessage(errorObject: ErrorObject): string {
   if (!errorObject.message) return 'Invalid field.';
@@ -85,12 +87,11 @@ export function validateForm(
   ajv.addKeyword({
     keyword: 'snapshotNetwork',
     validate: function (schema, data) {
-      // const snapshotEnv =  'default';
-      // if (snapshotEnv === 'production') return mainnetNetworkIds.includes(data);
+      if (env === 'production') return mainnetNetworkIds.includes(data);
       return networksIds.includes(data);
     },
     error: {
-      message: 'not valid network'
+      message: 'testnet not allowed'
     }
   });
 
@@ -131,6 +132,7 @@ function transformAjvErrors(ajv: Ajv): ValidationErrorOutput {
         output,
         path
       );
+
       targetObject[path[path.length - 1]] = getErrorMessage(error);
       return output;
     },

src/views/SpaceSettings.vue

@@ -288,6 +288,7 @@ onBeforeRouteLeave(async () => {
             <SettingsTreasuriesBlock
               context="settings"
               :is-view-only="isViewOnly"
+              :error="validationErrors.treasuries"
             />
             <SettingsSubSpacesBlock
               context="settings"