From 7fa7f849a0d72840af040be61f0c73e7442c328f Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 10 Oct 2024 18:25:58 +0900
Subject: [PATCH] fix: fix broken space setting delegation portal (#4913)

---
 src/components/SettingsDelegationBlock.vue | 48 +++++++++++++++++++---
 src/composables/useFormSpaceSettings.ts    |  1 +
 src/helpers/interfaces.ts                  |  1 +
 src/helpers/queries.ts                     |  1 +
 4 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/components/SettingsDelegationBlock.vue b/src/components/SettingsDelegationBlock.vue
index c5527fce3229..6b6dd2d4bdf6 100644
--- a/src/components/SettingsDelegationBlock.vue
+++ b/src/components/SettingsDelegationBlock.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
 import schemas from '@snapshot-labs/snapshot.js/src/schemas';
 
+const delegationDefinition =
+  schemas.space.properties.delegationPortal.properties;
+
 const props = defineProps<{
   context: 'setup' | 'settings';
   isViewOnly?: boolean;
 }>();
 
 const { form, validationErrors, addRef } = useFormSpaceSettings(props.context);
+
+const delegationTypes = computed(() => {
+  return delegationDefinition.delegationType.anyOf.map((item: any) => ({
+    value: item.const,
+    name: item.title
+  }));
+});
 </script>
 
 <template>
@@ -14,11 +24,37 @@ const { form, validationErrors, addRef } = useFormSpaceSettings(props.context);
     <BaseMessageBlock level="info" class="mb-3">
       {{ $t('settings.delegationPortal.information') }}
     </BaseMessageBlock>
-    <TuneForm
-      :ref="addRef"
-      v-model="form.delegationPortal"
-      :definition="schemas.space.properties.delegationPortal"
-      :error="validationErrors?.delegationPortal || {}"
-    />
+
+    <div class="space-y-2">
+      <TuneListbox
+        :ref="addRef"
+        :items="delegationTypes"
+        :model-value="form.delegationPortal.delegationType"
+        :definition="delegationDefinition.delegationType"
+        @update:model-value="
+          value => (form.delegationPortal.delegationType = value)
+        "
+      />
+      <TuneInput
+        :ref="addRef"
+        v-model="form.delegationPortal.delegationContract"
+        :definition="delegationDefinition.delegationContract"
+        :error="validationErrors.delegationPortal?.delegationContract"
+      />
+
+      <ComboboxNetwork
+        :ref="addRef"
+        label="Delegation network"
+        :hint="delegationDefinition.delegationContract.description"
+        :network="form.delegationPortal.delegationNetwork"
+        @select="value => (form.delegationPortal.delegationNetwork = value)"
+      />
+      <TuneInput
+        :ref="addRef"
+        v-model="form.delegationPortal.delegationApi"
+        :definition="delegationDefinition.delegationApi"
+        :error="validationErrors.delegationPortal?.delegationApi"
+      />
+    </div>
   </BaseBlock>
 </template>
diff --git a/src/composables/useFormSpaceSettings.ts b/src/composables/useFormSpaceSettings.ts
index 3a4f95cdec14..00d82058ef87 100644
--- a/src/composables/useFormSpaceSettings.ts
+++ b/src/composables/useFormSpaceSettings.ts
@@ -10,6 +10,7 @@ const DEFAULT_VOTE_VALIDATION = { name: 'any', params: {} };
 const DEFAULT_DELEGATION = {
   delegationType: 'compound-governor',
   delegationContract: '',
+  delegationNetwork: '1',
   delegationApi: ''
 };
 const EMPTY_SPACE_FORM = {
diff --git a/src/helpers/interfaces.ts b/src/helpers/interfaces.ts
index dc64722b030e..fc39df550075 100644
--- a/src/helpers/interfaces.ts
+++ b/src/helpers/interfaces.ts
@@ -189,6 +189,7 @@ export interface ExtendedSpace {
 export interface DelegatesConfig {
   delegationType: DelegationTypes;
   delegationContract: string;
+  delegationNetwork: string;
   delegationApi: string;
 }
 export interface SpaceValidation {
diff --git a/src/helpers/queries.ts b/src/helpers/queries.ts
index 09773dfd7ee5..eacc199b3491 100644
--- a/src/helpers/queries.ts
+++ b/src/helpers/queries.ts
@@ -515,6 +515,7 @@ export const SPACE_QUERY = gql`
       delegationPortal {
         delegationType
         delegationContract
+        delegationNetwork
         delegationApi
       }
       treasuries {