From aa87e0cb44683c8970bfc83b5ab9d164dd191c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wiktor=20Tkaczy=C5=84ski?= <wiktor.tkaczynski@gmail.com>
Date: Tue, 24 Sep 2024 09:42:09 +0200
Subject: [PATCH] feat: add Advanced settings for offchain spaces. (#789)

* feat: add parent and sub-space settings

* feat: add terms of services input

* feat: add customDomain and isPrivate

* feat: add DeleteSpace UI

* feat: add support for deleteSpace action

* feat: validate parent space

* feat: add tooltips

* fix: handle initial value validation

* fix: validate parent or sub-space is not current space

* fix: prevent duplicate sub-spaces

* chore: fix typo actions -> action

* fix: increase checkbox label gap

* fix: use v2 external link icon

* fix: remove danger border if button is disabled

* chore: capitalize GitHub name

* fix: add default values for computedAsync

* feat: use inline validation

* feat: allow parent and subspaces at the same time

* feat: remove description from Advanced settings page

* feat: inline Message icon

* fix: show errors on customDomain field

* feat: add custom message for self-parent

* fix: use v-show for advanced

To workaround https://github.com/snapshot-labs/sx-monorepo/issues/573

* feat: add basic domain validation

* feat: add error when reaching maxmimum number of subspaces

* fix: only show child limit error if it's not empty
---
 .changeset/sweet-papayas-provide.md           |   5 +
 apps/ui/src/assets/icons/switch-disabled.svg  |   3 +
 apps/ui/src/assets/icons/switch-enabled.svg   |   3 +
 apps/ui/src/components/FormSpaceAdvanced.vue  | 245 ++++++++++++++++++
 apps/ui/src/components/Modal/DeleteSpace.vue  |  73 ++++++
 apps/ui/src/components/Ui/Checkbox.vue        |  26 ++
 .../src/components/Ui/ContainerSettings.vue   |  13 +-
 apps/ui/src/components/Ui/InputString.vue     |   2 +
 apps/ui/src/components/Ui/Message.vue         |  29 +++
 apps/ui/src/components/Ui/Switch.vue          |  32 +++
 apps/ui/src/components/Ui/WrapperInput.vue    |  34 ++-
 apps/ui/src/composables/useActions.ts         |  36 ++-
 .../composables/useSpaceInputValidation.ts    |  60 +++++
 apps/ui/src/composables/useSpaceSettings.ts   |  79 +++++-
 apps/ui/src/helpers/validation.ts             |  11 +
 apps/ui/src/networks/evm/actions.ts           |   3 +
 apps/ui/src/networks/offchain/actions.ts      |   6 +
 apps/ui/src/networks/starknet/actions.ts      |   9 +-
 apps/ui/src/networks/types.ts                 |   1 +
 apps/ui/src/style.scss                        |   5 +-
 apps/ui/src/views/Space/Settings.vue          |  43 ++-
 .../clients/offchain/ethereum-sig/index.ts    |  19 ++
 .../clients/offchain/ethereum-sig/types.ts    |   8 +
 packages/sx.js/src/clients/offchain/types.ts  |  13 +
 24 files changed, 718 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/sweet-papayas-provide.md
 create mode 100644 apps/ui/src/assets/icons/switch-disabled.svg
 create mode 100644 apps/ui/src/assets/icons/switch-enabled.svg
 create mode 100644 apps/ui/src/components/FormSpaceAdvanced.vue
 create mode 100644 apps/ui/src/components/Modal/DeleteSpace.vue
 create mode 100644 apps/ui/src/components/Ui/Checkbox.vue
 create mode 100644 apps/ui/src/components/Ui/Message.vue
 create mode 100644 apps/ui/src/components/Ui/Switch.vue
 create mode 100644 apps/ui/src/composables/useSpaceInputValidation.ts

diff --git a/.changeset/sweet-papayas-provide.md b/.changeset/sweet-papayas-provide.md
new file mode 100644
index 000000000..6d8253cbb
--- /dev/null
+++ b/.changeset/sweet-papayas-provide.md
@@ -0,0 +1,5 @@
+---
+"@snapshot-labs/sx": patch
+---
+
+add deleteSpace method to offchain ethSig client
diff --git a/apps/ui/src/assets/icons/switch-disabled.svg b/apps/ui/src/assets/icons/switch-disabled.svg
new file mode 100644
index 000000000..cdd238f02
--- /dev/null
+++ b/apps/ui/src/assets/icons/switch-disabled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M7 11L11 7M7 7L11 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/ui/src/assets/icons/switch-enabled.svg b/apps/ui/src/assets/icons/switch-enabled.svg
new file mode 100644
index 000000000..bc6fe719e
--- /dev/null
+++ b/apps/ui/src/assets/icons/switch-enabled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M6 9L8 11L12 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/ui/src/components/FormSpaceAdvanced.vue b/apps/ui/src/components/FormSpaceAdvanced.vue
new file mode 100644
index 000000000..54cdbfa17
--- /dev/null
+++ b/apps/ui/src/components/FormSpaceAdvanced.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { getValidator } from '@/helpers/validation';
+import { NetworkID } from '@/types';
+
+const CHILDREN_LIMIT = 16;
+
+const PARENT_SPACE_DEFINITION = {
+  type: 'string',
+  title: 'Main space',
+  examples: ['pistachiodao.eth'],
+  tooltip:
+    'The space that this space is a sub-space of will be displayed on the space page'
+};
+
+const CHILD_DEFINITION = {
+  type: 'string',
+  title: 'Sub-space(s)',
+  examples: ['pistachiodao.eth'],
+  tooltip: 'Related Sub-spaces listed here will be displayed on the space page'
+};
+
+const TERMS_OF_SERVICES_DEFINITION = {
+  type: 'string',
+  format: 'uri',
+  title: 'Terms of services',
+  maxLength: 256,
+  examples: ['https://example.com/terms'],
+  tooltip:
+    'Users will be required to accept these terms once before they can create a proposal or cast a vote'
+};
+
+const CUSTOM_DOMAIN_DEFINITION = {
+  type: 'string',
+  format: 'domain',
+  title: 'Domain name',
+  maxLength: 64,
+  examples: ['vote.balancer.fi']
+};
+
+const parent = defineModel<string>('parent', { required: true });
+const children = defineModel<string[]>('children', { required: true });
+const termsOfServices = defineModel<string>('termsOfServices', {
+  required: true
+});
+const customDomain = defineModel<string>('customDomain', { required: true });
+const isPrivate = defineModel<boolean>('isPrivate', { required: true });
+
+const props = defineProps<{
+  networkId: NetworkID;
+  spaceId: string;
+  isController: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'updateValidity', valid: boolean): void;
+  (e: 'deleteSpace');
+}>();
+
+const {
+  loading: isParentLoading,
+  validationResult: parentSpaceValidationResult,
+  error: parentValidationError
+} = useSpaceInputValidation(toRef(props, 'networkId'), parent);
+
+const child = ref('');
+const {
+  loading: isChildLoading,
+  validationResult: childValidationResult,
+  error: childValidationError
+} = useSpaceInputValidation(toRef(props, 'networkId'), child);
+
+const isDeleteSpaceModalOpen = ref(false);
+
+const addSubSpaceButtonEnabled = computed(() => {
+  if (!child.value) return false;
+
+  if (childValidationResult.value === null) return true;
+  if (childValidationResult.value.value !== child.value) return false;
+  if (!childValidationResult.value.valid) return false;
+
+  return true;
+});
+const formErrors = computed(() => {
+  const validator = getValidator({
+    type: 'object',
+    title: 'Advanced',
+    additionalProperties: false,
+    required: [],
+    properties: {
+      parent: PARENT_SPACE_DEFINITION,
+      child: CHILD_DEFINITION,
+      termsOfServices: TERMS_OF_SERVICES_DEFINITION,
+      customDomain: CUSTOM_DOMAIN_DEFINITION
+    }
+  });
+
+  const errors = validator.validate(
+    {
+      parent: parent.value,
+      child: child.value,
+      termsOfServices: termsOfServices.value,
+      customDomain: customDomain.value
+    },
+    {
+      skipEmptyOptionalFields: true
+    }
+  );
+
+  if (parent.value === props.spaceId) {
+    errors.parent = 'Space cannot be a parent of itself';
+  }
+
+  if (child.value === props.spaceId) {
+    errors.child = 'Space cannot be a sub-space of itself';
+  }
+
+  if (children.value.includes(child.value)) {
+    errors.child = 'Space already configured as sub-space';
+  }
+
+  if (child.value && children.value.length >= CHILDREN_LIMIT) {
+    errors.child = 'Maximum number of sub-spaces reached';
+  }
+
+  return errors;
+});
+
+function addChild() {
+  children.value.push(child.value);
+  child.value = '';
+}
+
+function deleteChild(i: number) {
+  children.value = children.value.filter((_, index) => index !== i);
+}
+
+watchEffect(() => {
+  const valid =
+    Object.keys(formErrors.value).length === 0 &&
+    parentSpaceValidationResult.value?.valid &&
+    parentSpaceValidationResult.value?.value === parent.value;
+
+  emit('updateValidity', !!valid);
+});
+</script>
+
+<template>
+  <h4 class="eyebrow mb-2 font-medium">Sub-spaces</h4>
+  <UiMessage
+    type="info"
+    :learn-more-link="'https://docs.snapshot.org/user-guides/spaces/sub-spaces'"
+  >
+    Add a sub-space to display its proposals within your space. If you want the
+    current space to be displayed on the sub-space's page, the space need to be
+    added as main space in the subs-space settings to make relation mutual.
+  </UiMessage>
+  <div class="s-box my-3">
+    <UiInputString
+      v-model="parent"
+      :loading="isParentLoading"
+      :definition="PARENT_SPACE_DEFINITION"
+      :error="formErrors.parent ?? parentValidationError"
+    />
+    <UiInputString
+      v-model="child"
+      :loading="isChildLoading"
+      :definition="CHILD_DEFINITION"
+      :error="formErrors.child ?? childValidationError"
+    />
+    <UiButton
+      v-if="children.length < CHILDREN_LIMIT"
+      :disabled="!!formErrors.child || !addSubSpaceButtonEnabled"
+      class="w-full"
+      @click="addChild"
+    >
+      Add space
+    </UiButton>
+  </div>
+  <div class="flex flex-wrap gap-2">
+    <div
+      v-for="(space, i) in children"
+      :key="space"
+      class="flex items-center gap-2 rounded-lg border px-3 py-2 w-fit"
+    >
+      <span>{{ space }}</span>
+      <button type="button" @click="deleteChild(i)">
+        <IH-x-mark class="w-[16px]" />
+      </button>
+    </div>
+  </div>
+  <h4 class="eyebrow mb-2 font-medium mt-4">Terms of services</h4>
+  <div class="s-box">
+    <UiInputString
+      v-model="termsOfServices"
+      :definition="TERMS_OF_SERVICES_DEFINITION"
+      :error="formErrors.termsOfServices"
+    />
+  </div>
+  <h4 class="eyebrow mb-2 font-medium mt-4">Custom domain</h4>
+  <UiMessage
+    type="info"
+    :learn-more-link="'https://docs.snapshot.org/spaces/add-custom-domain'"
+  >
+    To setup a custom domain you additionally need to open a pull request on
+    GitHub after you have created the space.
+  </UiMessage>
+  <div class="s-box mt-3">
+    <UiInputString
+      v-model="customDomain"
+      :definition="CUSTOM_DOMAIN_DEFINITION"
+      :error="formErrors.customDomain"
+    />
+    <UiSwitch v-model="isPrivate" title="Hide space from homepage" />
+  </div>
+  <h4 class="eyebrow mb-2 font-medium mt-4">Danger zone</h4>
+  <div
+    class="flex flex-col md:flex-row gap-3 md:gap-1 items-center border rounded-md px-4 py-3"
+  >
+    <div class="flex flex-col">
+      <h4 class="text-base">Delete space</h4>
+      <span class="leading-5">
+        Delete this space and all its content. This cannot be undone and you
+        will not be able to create a new space with the same ENS domain name.
+      </span>
+    </div>
+    <UiButton
+      :disabled="!isController"
+      class="w-full md:w-auto flex-shrink-0"
+      :class="{
+        'border-skin-danger !text-skin-danger': isController
+      }"
+      @click="isDeleteSpaceModalOpen = true"
+    >
+      Delete space
+    </UiButton>
+  </div>
+  <teleport to="#modal">
+    <ModalDeleteSpace
+      :open="isDeleteSpaceModalOpen"
+      :space-id="spaceId"
+      @confirm="emit('deleteSpace')"
+      @close="isDeleteSpaceModalOpen = false"
+    />
+  </teleport>
+</template>
diff --git a/apps/ui/src/components/Modal/DeleteSpace.vue b/apps/ui/src/components/Modal/DeleteSpace.vue
new file mode 100644
index 000000000..33e258b53
--- /dev/null
+++ b/apps/ui/src/components/Modal/DeleteSpace.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { clone } from '@/helpers/utils';
+
+const DEFAULT_FORM_STATE = {
+  id: '',
+  confirmed: false
+};
+
+const props = defineProps<{
+  open: boolean;
+  spaceId: string;
+  initialState?: any;
+}>();
+
+const emit = defineEmits<{
+  (e: 'confirm');
+  (e: 'close');
+}>();
+
+const form: Ref<{
+  id: string;
+  confirmed: boolean;
+}> = ref(clone(DEFAULT_FORM_STATE));
+
+const isValid = computed(
+  () => form.value.confirmed && form.value.id === props.spaceId
+);
+
+function handleSubmit() {
+  emit('confirm');
+  emit('close');
+}
+
+watch(
+  () => props.open,
+  () => {
+    form.value = clone(DEFAULT_FORM_STATE);
+  }
+);
+</script>
+
+<template>
+  <UiModal :open="open" @close="$emit('close')">
+    <template #header>
+      <h3>Confirm action</h3>
+    </template>
+    <div class="s-box p-4">
+      <UiMessage type="danger">
+        Do you really want to delete this space? This action cannot be undone
+        and you will not be able to use {{ spaceId }} again to create another
+        space.
+      </UiMessage>
+      <UiInputString
+        v-model="form.id"
+        class="my-3"
+        :definition="{
+          type: 'string',
+          title: `Enter ${spaceId} to continue`,
+          minLength: 1
+        }"
+      />
+      <UiCheckbox
+        v-model="form.confirmed"
+        :title="`I acknowledge that I will not be able to use ${spaceId} again to create a new space.`"
+      />
+    </div>
+    <template #footer>
+      <UiButton class="w-full" :disabled="!isValid" @click="handleSubmit">
+        Confirm
+      </UiButton>
+    </template>
+  </UiModal>
+</template>
diff --git a/apps/ui/src/components/Ui/Checkbox.vue b/apps/ui/src/components/Ui/Checkbox.vue
new file mode 100644
index 000000000..143e6d5e6
--- /dev/null
+++ b/apps/ui/src/components/Ui/Checkbox.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
+
+const enabled = defineModel<boolean>({ required: true });
+
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <SwitchGroup>
+    <div class="flex items-top gap-2">
+      <Switch
+        v-model="enabled"
+        :class="enabled ? 'bg-skin-primary' : 'border bg-skin-input-bg'"
+        class="flex items-center justify-center size-[20px] shrink-0 cursor-pointer rounded-md border-skin-border transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
+      >
+        <IC-switch-enabled v-if="enabled" class="text-skin-bg" />
+      </Switch>
+      <SwitchLabel class="leading-[18px]">
+        {{ title }}
+      </SwitchLabel>
+    </div>
+  </SwitchGroup>
+</template>
diff --git a/apps/ui/src/components/Ui/ContainerSettings.vue b/apps/ui/src/components/Ui/ContainerSettings.vue
index 8c1ac7cc1..01e026c42 100644
--- a/apps/ui/src/components/Ui/ContainerSettings.vue
+++ b/apps/ui/src/components/Ui/ContainerSettings.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
 defineProps<{
   title: string;
-  description: string;
+  description?: string;
 }>();
 </script>
 
 <template>
   <div class="mb-4">
-    <h3 class="text-md leading-6">{{ title }}</h3>
-    <span class="mb-4 inline-block">
+    <h3
+      class="text-md leading-6"
+      :class="{
+        'mb-4': !description
+      }"
+    >
+      {{ title }}
+    </h3>
+    <span v-if="description" class="mb-4 inline-block">
       {{ description }}
     </span>
     <slot />
diff --git a/apps/ui/src/components/Ui/InputString.vue b/apps/ui/src/components/Ui/InputString.vue
index 8886f87b9..18f247808 100644
--- a/apps/ui/src/components/Ui/InputString.vue
+++ b/apps/ui/src/components/Ui/InputString.vue
@@ -8,6 +8,7 @@ export default {
 const model = defineModel<string>();
 
 const props = defineProps<{
+  loading?: boolean;
   error?: string;
   definition: any;
 }>();
@@ -37,6 +38,7 @@ watch(model, () => {
   <UiWrapperInput
     v-slot="{ id }"
     :definition="definition"
+    :loading="loading"
     :error="error"
     :dirty="dirty"
     :input-value-length="inputValue?.length"
diff --git a/apps/ui/src/components/Ui/Message.vue b/apps/ui/src/components/Ui/Message.vue
new file mode 100644
index 000000000..ffaed08e7
--- /dev/null
+++ b/apps/ui/src/components/Ui/Message.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  type: 'info' | 'danger';
+  learnMoreLink?: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="border rounded-md p-[20px]"
+    :class="{
+      'text-skin-danger border-skin-danger': type === 'danger'
+    }"
+  >
+    <IH-information-circle class="float-left mr-1" />
+    <div class="leading-5">
+      <slot />
+      <a
+        v-if="learnMoreLink"
+        :href="learnMoreLink"
+        target="_blank"
+        class="flex items-center text-skin-link mt-1 gap-1 w-fit"
+      >
+        Learn more
+        <IH-arrow-sm-right class="-rotate-45" />
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/apps/ui/src/components/Ui/Switch.vue b/apps/ui/src/components/Ui/Switch.vue
new file mode 100644
index 000000000..2f2d54fb6
--- /dev/null
+++ b/apps/ui/src/components/Ui/Switch.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
+
+const enabled = defineModel<boolean>({ required: true });
+
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <SwitchGroup>
+    <div class="flex items-center gap-2">
+      <Switch
+        v-model="enabled"
+        :class="enabled ? 'bg-skin-primary' : 'bg-skin-border'"
+        class="relative inline-flex h-[22px] w-[38px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
+      >
+        <span
+          :class="enabled ? 'translate-x-[16px]' : 'translate-x-0'"
+          class="flex justify-center items-center pointer-events-none h-[18px] w-[18px] transform rounded-full bg-skin-bg shadow-lg ring-0 transition duration-200 ease-in-out"
+        >
+          <IC-switch-enabled v-if="enabled" class="text-skin-primary" />
+          <IC-switch-disabled v-else class="text-skin-text" />
+        </span>
+      </Switch>
+      <SwitchLabel class="text-skin-link">
+        {{ title }}
+      </SwitchLabel>
+    </div>
+  </SwitchGroup>
+</template>
diff --git a/apps/ui/src/components/Ui/WrapperInput.vue b/apps/ui/src/components/Ui/WrapperInput.vue
index 690b8fe4c..550bfe1ec 100644
--- a/apps/ui/src/components/Ui/WrapperInput.vue
+++ b/apps/ui/src/components/Ui/WrapperInput.vue
@@ -3,6 +3,7 @@ import { _n } from '@/helpers/utils';
 
 const props = withDefaults(
   defineProps<{
+    loading?: boolean;
     definition: any;
     inputValueLength?: number;
     error?: string;
@@ -18,21 +19,28 @@ const showError = computed(() => props.error && props.dirty);
 
 <template>
   <div class="s-base" :class="showError ? 's-error' : ''">
-    <div class="!flex s-label w-full gap-1">
-      <label
-        v-if="definition.title"
-        :for="id"
-        class="truncate"
-        v-text="definition.title"
-      />
-      <div
-        v-if="inputValueLength >= 0 && definition.maxLength"
-        class="text-sm hidden grow text-right s-label-char-count whitespace-nowrap"
-      >
-        {{ _n(inputValueLength) }} / {{ _n(definition.maxLength) }}
+    <div class="relative">
+      <div class="!flex justify-between s-label w-full gap-1">
+        <label
+          v-if="definition.title"
+          :for="id"
+          class="truncate flex items-center gap-1"
+        >
+          {{ definition.title }}
+          <UiTooltip v-if="definition.tooltip" :title="definition.tooltip">
+            <IH-question-mark-circle class="shrink-0" />
+          </UiTooltip>
+        </label>
+        <UiLoading v-if="loading" :size="16" />
+        <div
+          v-else-if="inputValueLength >= 0 && definition.maxLength"
+          class="text-sm hidden grow text-right s-label-char-count whitespace-nowrap"
+        >
+          {{ _n(inputValueLength) }} / {{ _n(definition.maxLength) }}
+        </div>
       </div>
+      <slot :id="id" />
     </div>
-    <slot :id="id" />
     <span v-if="showError" class="s-input-error-message">{{ error }}</span>
     <legend v-if="definition.description" v-text="definition.description" />
   </div>
diff --git a/apps/ui/src/composables/useActions.ts b/apps/ui/src/composables/useActions.ts
index ee367172d..556413363 100644
--- a/apps/ui/src/composables/useActions.ts
+++ b/apps/ui/src/composables/useActions.ts
@@ -199,7 +199,7 @@ export function useActions() {
 
     const network = getReadWriteNetwork(networkId);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     const receipt = await network.actions.createSpace(auth.web3, salt, {
@@ -231,7 +231,7 @@ export function useActions() {
 
     const network = getReadWriteNetwork(space.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     await wrapPromise(
@@ -349,7 +349,7 @@ export function useActions() {
 
     const network = getNetwork(proposal.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     await wrapPromise(
@@ -412,7 +412,7 @@ export function useActions() {
 
     const network = getReadWriteNetwork(space.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     await wrapPromise(
@@ -430,7 +430,7 @@ export function useActions() {
 
     const network = getReadWriteNetwork(space.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     await wrapPromise(
@@ -448,7 +448,7 @@ export function useActions() {
 
     const network = getReadWriteNetwork(space.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     await wrapPromise(
@@ -469,7 +469,7 @@ export function useActions() {
 
     const network = getNetwork(space.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     return wrapPromise(
@@ -497,7 +497,7 @@ export function useActions() {
 
     const network = getReadWriteNetwork(space.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     return wrapPromise(
@@ -532,7 +532,7 @@ export function useActions() {
 
     const network = getNetwork(space.network);
     if (!network.managerConnectors.includes(web3.value.type as Connector)) {
-      throw new Error(`${web3.value.type} is not supported for this actions`);
+      throw new Error(`${web3.value.type} is not supported for this action`);
     }
 
     return wrapPromise(
@@ -541,6 +541,23 @@ export function useActions() {
     );
   }
 
+  async function deleteSpace(space: Space) {
+    if (!web3.value.account) {
+      await forceLogin();
+      return null;
+    }
+
+    const network = getNetwork(space.network);
+    if (!network.managerConnectors.includes(web3.value.type as Connector)) {
+      throw new Error(`${web3.value.type} is not supported for this action`);
+    }
+
+    return wrapPromise(
+      space.network,
+      network.actions.deleteSpace(auth.web3, space)
+    );
+  }
+
   async function delegate(
     space: Space,
     networkId: NetworkID,
@@ -668,6 +685,7 @@ export function useActions() {
     transferOwnership: wrapWithErrors(transferOwnership),
     updateSettings: wrapWithErrors(updateSettings),
     updateSettingsRaw: wrapWithErrors(updateSettingsRaw),
+    deleteSpace: wrapWithErrors(deleteSpace),
     delegate: wrapWithErrors(delegate),
     followSpace: wrapWithErrors(followSpace),
     unfollowSpace: wrapWithErrors(unfollowSpace),
diff --git a/apps/ui/src/composables/useSpaceInputValidation.ts b/apps/ui/src/composables/useSpaceInputValidation.ts
new file mode 100644
index 000000000..64fbe5473
--- /dev/null
+++ b/apps/ui/src/composables/useSpaceInputValidation.ts
@@ -0,0 +1,60 @@
+import { getNetwork } from '@/networks';
+import { NetworkID } from '@/types';
+
+type SpaceValidationResult = { value: string; valid: boolean };
+
+export function useSpaceInputValidation(
+  networkId: Ref<NetworkID>,
+  value: Ref<string>
+) {
+  const loading = ref(false);
+  const validationResult = ref(null as SpaceValidationResult | null);
+
+  const network = computed(() => getNetwork(networkId.value));
+  const error = computed(() => {
+    if (validationResult.value === null) return null;
+    if (validationResult.value.value !== value.value) return null;
+    if (validationResult.value.valid) return null;
+
+    return `Space ${validationResult.value.value} not found`;
+  });
+
+  watchDebounced(
+    value,
+    async value => {
+      loading.value = true;
+
+      try {
+        if (!value || value === validationResult.value?.value) {
+          validationResult.value = {
+            value,
+            valid: true
+          };
+          return;
+        }
+
+        const space = await network.value.api.loadSpace(value);
+        validationResult.value = {
+          value,
+          valid: !!space
+        };
+      } catch (e) {
+        console.error(e);
+
+        validationResult.value = {
+          value,
+          valid: false
+        };
+      } finally {
+        loading.value = false;
+      }
+    },
+    { debounce: 500, immediate: true }
+  );
+
+  return {
+    loading,
+    validationResult,
+    error
+  };
+}
diff --git a/apps/ui/src/composables/useSpaceSettings.ts b/apps/ui/src/composables/useSpaceSettings.ts
index 7a046579d..814ca44c9 100644
--- a/apps/ui/src/composables/useSpaceSettings.ts
+++ b/apps/ui/src/composables/useSpaceSettings.ts
@@ -69,7 +69,12 @@ const DEFAULT_FORM_STATE: Form = {
 export function useSpaceSettings(space: Ref<Space>) {
   const { web3 } = useWeb3();
   const { getDurationFromCurrent } = useMetaStore();
-  const { updateSettings, updateSettingsRaw, transferOwnership } = useActions();
+  const {
+    updateSettings,
+    updateSettingsRaw,
+    transferOwnership,
+    deleteSpace: deleteSpaceAction
+  } = useActions();
 
   const loading = ref(true);
   const isModified = ref(false);
@@ -83,7 +88,7 @@ export function useSpaceSettings(space: Ref<Space>) {
     );
 
     return compareAddresses(controller, account);
-  });
+  }, false);
   const isOwner = computedAsync(async () => {
     if (!offchainNetworks.includes(space.value.network)) {
       return isController.value;
@@ -97,7 +102,7 @@ export function useSpaceSettings(space: Ref<Space>) {
     );
 
     return compareAddresses(owner, account);
-  });
+  }, false);
   const isAdmin = computed(() => {
     if (!offchainNetworks.includes(space.value.network)) return false;
 
@@ -129,6 +134,11 @@ export function useSpaceSettings(space: Ref<Space>) {
 
   // Offchain properties
   const members = ref([] as Member[]);
+  const parent = ref('');
+  const children = ref([] as string[]);
+  const termsOfServices = ref('');
+  const customDomain = ref('');
+  const isPrivate = ref(false);
 
   function currentToMinutesOnly(value: number) {
     const duration = getDurationFromCurrent(space.value.network, value);
@@ -397,15 +407,15 @@ export function useSpaceSettings(space: Ref<Space>) {
       cover: form.value.cover ?? space.value.cover,
       network: space.value.snapshot_chain_id?.toString() ?? '1',
       symbol: form.value.votingPowerSymbol ?? space.value.voting_power_symbol,
-      terms: space.value.additionalRawData.terms,
+      terms: termsOfServices.value,
       website: form.value.externalUrl ?? space.value.external_url,
       twitter: form.value.twitter ?? space.value.twitter,
       github: form.value.github ?? space.value.github,
       coingecko: form.value.coingecko ?? space.value.coingecko,
-      parent: space.value.parent?.id ?? null,
-      children: space.value.children.map(child => child.id),
-      private: space.value.additionalRawData.private,
-      domain: space.value.additionalRawData.domain,
+      parent: parent.value,
+      children: children.value,
+      private: isPrivate.value,
+      domain: customDomain.value,
       skin: space.value.additionalRawData.skin,
       guidelines: space.value.additionalRawData.guidelines,
       template: space.value.additionalRawData.template,
@@ -513,6 +523,10 @@ export function useSpaceSettings(space: Ref<Space>) {
     return transferOwnership(space.value, controller.value);
   }
 
+  async function deleteSpace() {
+    return deleteSpaceAction(space.value);
+  }
+
   async function reset() {
     const authenticatorsValue = await getInitialStrategiesConfig(
       space.value.authenticators,
@@ -555,6 +569,11 @@ export function useSpaceSettings(space: Ref<Space>) {
 
     if (offchainNetworks.includes(space.value.network)) {
       members.value = getInitialMembers(space.value);
+      parent.value = space.value.parent?.id ?? '';
+      children.value = space.value.children.map(child => child.id);
+      termsOfServices.value = space.value.additionalRawData?.terms ?? '';
+      customDomain.value = space.value.additionalRawData?.domain ?? '';
+      isPrivate.value = space.value.additionalRawData?.private ?? false;
     }
   }
 
@@ -572,6 +591,11 @@ export function useSpaceSettings(space: Ref<Space>) {
     const initialValidationStrategyObjectHashValue =
       initialValidationStrategyObjectHash.value;
     const membersValue = members.value;
+    const parentValue = parent.value;
+    const childrenValue = children.value;
+    const termsOfServicesValue = termsOfServices.value;
+    const customDomainValue = customDomain.value;
+    const isPrivateValue = isPrivate.value;
 
     if (loading.value) {
       isModified.value = false;
@@ -619,6 +643,39 @@ export function useSpaceSettings(space: Ref<Space>) {
         isModified.value = true;
         return;
       }
+
+      if (parentValue !== (space.value.parent?.id ?? '')) {
+        isModified.value = true;
+        return;
+      }
+
+      if (
+        objectHash(childrenValue, ignoreOrderOpts) !==
+        objectHash(
+          space.value.children.map(child => child.id),
+          ignoreOrderOpts
+        )
+      ) {
+        isModified.value = true;
+        return;
+      }
+
+      if (
+        termsOfServicesValue !== (space.value.additionalRawData?.terms ?? '')
+      ) {
+        isModified.value = true;
+        return;
+      }
+
+      if (customDomainValue !== (space.value.additionalRawData?.domain ?? '')) {
+        isModified.value = true;
+        return;
+      }
+
+      if (isPrivateValue !== space.value.additionalRawData?.private) {
+        isModified.value = true;
+        return;
+      }
     } else {
       const [authenticatorsToAdd, authenticatorsToRemove] =
         await processChanges(
@@ -674,8 +731,14 @@ export function useSpaceSettings(space: Ref<Space>) {
     validationStrategy,
     votingStrategies,
     members,
+    parent,
+    children,
+    termsOfServices,
+    customDomain,
+    isPrivate,
     save,
     saveController,
+    deleteSpace,
     reset
   };
 }
diff --git a/apps/ui/src/helpers/validation.ts b/apps/ui/src/helpers/validation.ts
index 858f20099..a5e281d17 100644
--- a/apps/ui/src/helpers/validation.ts
+++ b/apps/ui/src/helpers/validation.ts
@@ -200,6 +200,14 @@ ajv.addFormat('farcaster-handle', {
   }
 });
 
+ajv.addFormat('domain', {
+  validate: (value: string) => {
+    if (!value) return false;
+
+    return !!value.match(/^[a-zA-Z0-9\-\.]+$/);
+  }
+});
+
 ajv.addFormat('ethValue', {
   validate: value => {
     if (!value.match(/^([0-9]|[1-9][0-9]+)(\.[0-9]+)?$/)) return false;
@@ -230,6 +238,7 @@ ajv.addKeyword({
   }
 });
 ajv.addKeyword('options');
+ajv.addKeyword('tooltip');
 
 function getErrorMessage(errorObject: Partial<ErrorObject>): string {
   if (!errorObject.message) return 'Invalid field.';
@@ -240,6 +249,8 @@ function getErrorMessage(errorObject: Partial<ErrorObject>): string {
     switch (errorObject.params.format) {
       case 'uri':
         return 'Must be a valid URL.';
+      case 'domain':
+        return 'Must be a valid domain.';
       case 'address':
       case 'ethAddress':
         return 'Must be a valid address.';
diff --git a/apps/ui/src/networks/evm/actions.ts b/apps/ui/src/networks/evm/actions.ts
index ae777ab54..ebc270cf8 100644
--- a/apps/ui/src/networks/evm/actions.ts
+++ b/apps/ui/src/networks/evm/actions.ts
@@ -705,6 +705,9 @@ export function createActions(
     updateSettingsRaw: () => {
       throw new Error('Not implemented');
     },
+    deleteSpace: () => {
+      throw new Error('Not implemented');
+    },
     send: (envelope: any) => ethSigClient.send(envelope),
     getVotingPower: async (
       spaceId: string,
diff --git a/apps/ui/src/networks/offchain/actions.ts b/apps/ui/src/networks/offchain/actions.ts
index e7ab4d4ae..c38e973e2 100644
--- a/apps/ui/src/networks/offchain/actions.ts
+++ b/apps/ui/src/networks/offchain/actions.ts
@@ -353,6 +353,12 @@ export function createActions(
         signer: web3 instanceof Web3Provider ? web3.getSigner() : web3,
         data: { space: space.id, settings }
       });
+    },
+    deleteSpace: (web3: Web3Provider | Wallet, space: Space) => {
+      return client.deleteSpace({
+        signer: web3 instanceof Web3Provider ? web3.getSigner() : web3,
+        data: { space: space.id }
+      });
     }
   };
 }
diff --git a/apps/ui/src/networks/starknet/actions.ts b/apps/ui/src/networks/starknet/actions.ts
index d8b60a6e5..7e03104d3 100644
--- a/apps/ui/src/networks/starknet/actions.ts
+++ b/apps/ui/src/networks/starknet/actions.ts
@@ -672,9 +672,6 @@ export function createActions(
         }
       });
     },
-    updateSettingsRaw: () => {
-      throw new Error('Not implemented');
-    },
     delegate: async (
       web3: any,
       space: Space,
@@ -770,6 +767,12 @@ export function createActions(
     },
     updateUser: () => {},
     updateStatement: () => {},
+    updateSettingsRaw: () => {
+      throw new Error('Not implemented');
+    },
+    deleteSpace: () => {
+      throw new Error('Not implemented');
+    },
     send: (envelope: any) => starkSigClient.send(envelope) // TODO: extract it out of client to common helper
   };
 }
diff --git a/apps/ui/src/networks/types.ts b/apps/ui/src/networks/types.ts
index 89f9d6c8d..736736fd5 100644
--- a/apps/ui/src/networks/types.ts
+++ b/apps/ui/src/networks/types.ts
@@ -175,6 +175,7 @@ export type ReadOnlyNetworkActions = {
   );
   transferOwnership(web3: Web3Provider, space: Space, owner: string);
   updateSettingsRaw(web3: Web3Provider, space: Space, settings: string);
+  deleteSpace(web3: Web3Provider, space: Space);
   send(envelope: any): Promise<any>;
 };
 
diff --git a/apps/ui/src/style.scss b/apps/ui/src/style.scss
index 6effe859d..45de0541c 100644
--- a/apps/ui/src/style.scss
+++ b/apps/ui/src/style.scss
@@ -308,7 +308,8 @@ input:placeholder-shown {
   }
 
   textarea.s-input {
-    &, :focus {
+    &,
+    :focus {
       @apply outline outline-1 outline-offset-[-1px] outline-skin-danger border-transparent;
     }
   }
@@ -326,7 +327,7 @@ input:placeholder-shown {
   // Adding the gradient fade to the top of the input
   .s-label:has(+ textarea),
   .s-base:has(textarea:only-child) {
-     &::before {
+    &::before {
       @apply block bg-gradient-to-b from-skin-border to-transparent h-[8px] absolute top-3.5 left-[1px] right-[1px];
 
       content: '';
diff --git a/apps/ui/src/views/Space/Settings.vue b/apps/ui/src/views/Space/Settings.vue
index 1977471fd..0e88a4f48 100644
--- a/apps/ui/src/views/Space/Settings.vue
+++ b/apps/ui/src/views/Space/Settings.vue
@@ -5,6 +5,7 @@ import { Space } from '@/types';
 
 const props = defineProps<{ space: Space }>();
 
+const router = useRouter();
 const route = useRoute();
 const {
   loading,
@@ -23,8 +24,14 @@ const {
   validationStrategy,
   votingStrategies,
   members,
+  parent,
+  children,
+  termsOfServices,
+  customDomain,
+  isPrivate,
   save,
   saveController,
+  deleteSpace,
   reset
 } = useSpaceSettings(toRef(props, 'space'));
 const spacesStore = useSpacesStore();
@@ -32,6 +39,7 @@ const { setTitle } = useTitle();
 const uiStore = useUiStore();
 const { getDurationFromCurrent, getCurrentFromDuration } = useMetaStore();
 
+const hasAdvancedErrors = ref(false);
 const changeControllerModalOpen = ref(false);
 const executeFn = ref(save);
 const saving = ref(false);
@@ -47,7 +55,8 @@ type Tab = {
     | 'voting'
     | 'members'
     | 'execution'
-    | 'controller';
+    | 'controller'
+    | 'advanced';
   name: string;
   visible: boolean;
 };
@@ -108,6 +117,11 @@ const tabs = computed<Tab[]>(
         id: 'controller',
         name: 'Controller',
         visible: true
+      },
+      {
+        id: 'advanced',
+        name: 'Advanced',
+        visible: isOffchainNetwork.value
       }
     ] as const
 );
@@ -211,6 +225,16 @@ function handleControllerSave(value: string) {
   executeFn.value = saveController;
 }
 
+function handleSpaceDelete() {
+  saving.value = true;
+  executeFn.value = async () => {
+    await deleteSpace();
+    router.push({ name: 'my-home' });
+
+    return null;
+  };
+}
+
 function handleTabFocus(event: FocusEvent) {
   if (!event.target) return;
 
@@ -489,9 +513,24 @@ watchEffect(() => setTitle(`Edit settings - ${props.space.name}`));
         />
       </teleport>
     </UiContainerSettings>
+    <UiContainerSettings v-show="activeTab === 'advanced'" title="Advanced">
+      <FormSpaceAdvanced
+        v-model:parent="parent"
+        v-model:children="children"
+        v-model:terms-of-services="termsOfServices"
+        v-model:custom-domain="customDomain"
+        v-model:is-private="isPrivate"
+        :network-id="space.network"
+        :space-id="space.id"
+        :is-controller="isController"
+        @delete-space="handleSpaceDelete"
+        @update-validity="v => (hasAdvancedErrors = !v)"
+      />
+    </UiContainerSettings>
     <div
       v-if="
-        !uiStore.sidebarOpen && ((isModified && canModifySettings) || error)
+        !uiStore.sidebarOpen &&
+        ((isModified && canModifySettings && !hasAdvancedErrors) || error)
       "
       class="fixed bg-skin-bg bottom-0 left-0 right-0 lg:left-[312px] xl:right-[240px] border-y px-4 py-3 flex flex-col xs:flex-row justify-between items-center"
     >
diff --git a/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts b/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts
index a406eb4ff..2dd62f8b9 100644
--- a/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts
+++ b/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts
@@ -8,6 +8,7 @@ import {
   approvalVoteTypes,
   basicVoteTypes,
   cancelProposalTypes,
+  deleteSpaceTypes,
   domain,
   encryptedVoteTypes,
   followSpaceTypes,
@@ -25,7 +26,9 @@ import { offchainGoerli } from '../../../offchainNetworks';
 import { OffchainNetworkConfig, SignatureData } from '../../../types';
 import {
   CancelProposal,
+  DeleteSpace,
   EIP712CancelProposalMessage,
+  EIP712DeleteSpaceMessage,
   EIP712FollowSpaceMessage,
   EIP712Message,
   EIP712ProposeMessage,
@@ -86,6 +89,7 @@ export class EthereumSig {
       | EIP712UpdateUserMessage
       | EIP712UpdateStatementMessage
       | EIP712UpdateSpaceMessage
+      | EIP712DeleteSpaceMessage
   >(
     signer: Signer & TypedDataSigner,
     message: T,
@@ -361,4 +365,19 @@ export class EthereumSig {
       data
     };
   }
+
+  public async deleteSpace({
+    signer,
+    data
+  }: {
+    signer: Signer & TypedDataSigner;
+    data: DeleteSpace;
+  }) {
+    const signatureData = await this.sign(signer, data, deleteSpaceTypes);
+
+    return {
+      signatureData,
+      data
+    };
+  }
 }
diff --git a/packages/sx.js/src/clients/offchain/ethereum-sig/types.ts b/packages/sx.js/src/clients/offchain/ethereum-sig/types.ts
index 9c9b8ea78..efa2f9bab 100644
--- a/packages/sx.js/src/clients/offchain/ethereum-sig/types.ts
+++ b/packages/sx.js/src/clients/offchain/ethereum-sig/types.ts
@@ -156,3 +156,11 @@ export const updateSpaceTypes = {
     { name: 'settings', type: 'string' }
   ]
 };
+
+export const deleteSpaceTypes = {
+  DeleteSpace: [
+    { name: 'from', type: 'address' },
+    { name: 'space', type: 'string' },
+    { name: 'timestamp', type: 'uint64' }
+  ]
+};
diff --git a/packages/sx.js/src/clients/offchain/types.ts b/packages/sx.js/src/clients/offchain/types.ts
index b3d8dd22e..11f7c056e 100644
--- a/packages/sx.js/src/clients/offchain/types.ts
+++ b/packages/sx.js/src/clients/offchain/types.ts
@@ -129,6 +129,12 @@ export type EIP712UpdateSpaceMessage = {
   settings: string;
 };
 
+export type EIP712DeleteSpaceMessage = {
+  from?: string;
+  space: string;
+  timestamp?: number;
+};
+
 export type EIP712Message = Required<
   | EIP712VoteMessage
   | EIP712ProposeMessage
@@ -140,6 +146,7 @@ export type EIP712Message = Required<
   | EIP712UpdateUserMessage
   | EIP712UpdateStatementMessage
   | EIP712UpdateSpaceMessage
+  | EIP712DeleteSpaceMessage
 >;
 
 export type Vote = {
@@ -230,3 +237,9 @@ export type UpdateSpace = {
   space: string;
   settings: string;
 };
+
+export type DeleteSpace = {
+  from?: string;
+  timestamp?: number;
+  space: string;
+};