From b38f39393f0ae0ec10a302578fe25261f8c8b8d3 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 17 Jan 2025 04:32:36 +0400
Subject: [PATCH] feat: support offchain space creation

---
 .../components/EnsConfiguratorOffchain.vue    | 157 ++++++++
 apps/ui/src/components/FormController.vue     |   2 +-
 .../ui/src/components/FormEnsRegistration.vue |  67 ++++
 .../ui/src/components/FormSpaceStrategies.vue |  88 ++---
 apps/ui/src/components/FormVoting.vue         |  49 ++-
 .../components/Modal/SelectTokenStandard.vue  |  51 +++
 .../src/components/Modal/SelectValidation.vue |  33 +-
 .../ProposalValidationConfigurator.vue        | 104 ++++++
 .../SetupStrategiesConfiguratorOffchain.vue   | 244 +++++++++++++
 .../ui/src/components/SpaceCreateOffchain.vue | 335 +++++++++++++++++-
 apps/ui/src/components/SpaceCreateOnchain.vue | 198 +++++------
 .../src/components/Ui/ContainerSettings.vue   |   3 +-
 apps/ui/src/components/Ui/SelectorCard.vue    |  59 +++
 apps/ui/src/components/Ui/Stepper.vue         |  35 +-
 .../components/VotingPrivacyConfigurator.vue  |  52 +++
 apps/ui/src/composables/useWalletEns.ts       | 149 ++++++++
 apps/ui/src/helpers/stamp.ts                  |  28 +-
 apps/ui/src/views/Create.vue                  |  96 +++--
 18 files changed, 1549 insertions(+), 201 deletions(-)
 create mode 100644 apps/ui/src/components/EnsConfiguratorOffchain.vue
 create mode 100644 apps/ui/src/components/FormEnsRegistration.vue
 create mode 100644 apps/ui/src/components/Modal/SelectTokenStandard.vue
 create mode 100644 apps/ui/src/components/ProposalValidationConfigurator.vue
 create mode 100644 apps/ui/src/components/SetupStrategiesConfiguratorOffchain.vue
 create mode 100644 apps/ui/src/components/Ui/SelectorCard.vue
 create mode 100644 apps/ui/src/components/VotingPrivacyConfigurator.vue
 create mode 100644 apps/ui/src/composables/useWalletEns.ts

diff --git a/apps/ui/src/components/EnsConfiguratorOffchain.vue b/apps/ui/src/components/EnsConfiguratorOffchain.vue
new file mode 100644
index 000000000..1428c0e14
--- /dev/null
+++ b/apps/ui/src/components/EnsConfiguratorOffchain.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { getNetwork } from '@/networks';
+import { SNAPSHOT_URLS } from '@/networks/offchain';
+import { NetworkID } from '@/types';
+
+const spaceId = defineModel<string>();
+
+const emit = defineEmits<{
+  (e: 'select');
+}>();
+
+const props = defineProps<{
+  networkId: NetworkID;
+}>();
+
+const {
+  MAX_ENS_NAME_LENGTH,
+  isRefreshing,
+  isLoading,
+  hasError,
+  names,
+  load,
+  refresh
+} = useWalletEns(props.networkId);
+const { resume: resumeEnsMonitoring } = useIntervalFn(() => refresh, 5000, {
+  immediate: false
+});
+
+const validNames = computed(() => {
+  return Object.values(names.value || {}).filter(d => d.status === 'AVAILABLE');
+});
+
+const invalidNames = computed(() => {
+  return Object.values(names.value || {}).filter(d => d.status !== 'AVAILABLE');
+});
+
+const isTestnet = computed(() => {
+  return getNetwork(props.networkId).name.includes('testnet');
+});
+
+function handleSelect(value: string) {
+  spaceId.value = value;
+  emit('select');
+}
+</script>
+
+<template>
+  <UiAlert v-if="hasError" type="error">
+    <div>
+      An error happened while fetching the ENS names associated to your wallet.
+      Please try again
+    </div>
+    <UiButton
+      class="flex items-center justify-center gap-2"
+      :loading="isRefreshing"
+      @click="load"
+    >
+      <IH-refresh />
+      Retry
+    </UiButton>
+  </UiAlert>
+  <div v-else class="space-y-4">
+    <div class="space-y-2">
+      <div>
+        To create a space, you need an ENS name on
+        {{ isTestnet ? 'Sepolia testnet' : 'Ethereum mainnet' }}.
+      </div>
+      <UiMessage v-if="!isTestnet" type="info">
+        Still experimenting ?
+        <br />
+        You can also try
+        <AppLink to="https://testnet.snapshot.box/#/create">
+          testnet.snapshot.box
+        </AppLink>
+        - a Sepolia testnet playground dedicated to testing before creating your
+        space or proposals on Snapshot.
+      </UiMessage>
+    </div>
+    <div class="space-y-3">
+      <div class="flex justify-between items-center">
+        <h4 class="eyebrow">ENS names</h4>
+        <UiButton
+          v-if="names"
+          class="flex items-center gap-1 !text-skin-text !p-0 !border-0 !h-auto"
+          :disabled="isLoading"
+          :loading="isRefreshing"
+          @click="refresh"
+        >
+          <IH-refresh class="h-[16px]" />
+          Refresh
+        </UiButton>
+      </div>
+      <UiLoading v-if="(isLoading && !isRefreshing) || !names" class="block" />
+      <div v-else-if="Object.keys(names).length" class="space-y-2">
+        <UiSelector
+          v-for="name in validNames"
+          :key="name.name"
+          :is-active="spaceId === name.name"
+          class="w-full"
+          @click="() => handleSelect(name.name)"
+        >
+          <div class="flex gap-2 items-center text-skin-link">
+            <IH-Globe-alt class="shrink-0" />
+            {{ name.name }}
+          </div>
+        </UiSelector>
+        <UiSelector
+          v-for="name in invalidNames"
+          :key="name.name"
+          :disabled="true"
+          class="w-full"
+        >
+          <div class="flex gap-2 items-top">
+            <IH-Exclamation class="mt-[5px] text-skin-danger shrink-0" />
+            <div class="flex flex-col">
+              <div class="text-skin-danger" v-text="name.name" />
+              <div v-if="name.status === 'USED'">
+                ENS name already attached to a
+                <AppLink
+                  :to="{
+                    name: 'space',
+                    params: { space: `${networkId}:${name.name}` }
+                  }"
+                  class="text-skin-link"
+                >
+                  space
+                </AppLink>
+              </div>
+              <div v-else-if="name.status === 'TOO_LONG'">
+                ENS name is too long. It must be less than
+                {{ MAX_ENS_NAME_LENGTH }} characters
+              </div>
+              <div v-else-if="name.status === 'DELETED'">
+                ENS name was used by a previously deleted space and can not be
+                reused to create a new space.
+                <AppLink
+                  to="https://docs.snapshot.box/faq/im-a-snapshot-user/space-settings#why-cant-i-create-a-new-space-with-my-previous-deleted-space-ens-name"
+                  class="text-skin-link"
+                >
+                  Learn more
+                  <IH-arrow-sm-right class="-rotate-45 inline" />
+                </AppLink>
+              </div>
+            </div>
+          </div>
+        </UiSelector>
+      </div>
+      <UiMessage v-else type="danger">
+        No ENS names found for the current wallet.
+      </UiMessage>
+    </div>
+    <div class="space-y-3">
+      <h4 class="eyebrow">Register new ENS name</h4>
+      <FormEnsRegistration @submit="resumeEnsMonitoring" />
+    </div>
+  </div>
+</template>
diff --git a/apps/ui/src/components/FormController.vue b/apps/ui/src/components/FormController.vue
index d2ac51035..61289099d 100644
--- a/apps/ui/src/components/FormController.vue
+++ b/apps/ui/src/components/FormController.vue
@@ -2,7 +2,7 @@
 import { validateForm } from '@/helpers/validation';
 import { ChainId } from '@/types';
 
-const model = defineModel<string>({ required: true });
+const model = defineModel<string>();
 
 const props = defineProps<{
   title: string;
diff --git a/apps/ui/src/components/FormEnsRegistration.vue b/apps/ui/src/components/FormEnsRegistration.vue
new file mode 100644
index 000000000..19cc11e0f
--- /dev/null
+++ b/apps/ui/src/components/FormEnsRegistration.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { clone } from '@/helpers/utils';
+import { getValidator } from '@/helpers/validation';
+
+const VALID_EXTENSIONS = [
+  'eth',
+  'xyz',
+  'com',
+  'org',
+  'io',
+  'app',
+  'art',
+  'id'
+] as const;
+
+const DOMAIN_DEFINITION = {
+  type: 'string',
+  pattern: `^[a-zA-Z0-9\-\.]+\.(${VALID_EXTENSIONS.join('|')})$`,
+  title: 'ENS name',
+  examples: ['dao-name.eth'],
+  errorMessage: {
+    pattern: `Must be a valid domain ending with ${VALID_EXTENSIONS.join(', ')}`
+  }
+} as const;
+
+const definition = {
+  type: 'object',
+  additionalProperties: false,
+  required: [],
+  properties: {
+    domain: DOMAIN_DEFINITION
+  }
+};
+
+const emit = defineEmits<{
+  (e: 'submit');
+}>();
+
+const form = ref(clone({ domain: '' }));
+
+const formErrors = computed(() => {
+  const validator = getValidator(definition);
+  return validator.validate(form.value, { skipEmptyOptionalFields: true });
+});
+
+const formValid = computed(() => {
+  return form.value.domain && Object.keys(formErrors.value).length === 0;
+});
+</script>
+
+<template>
+  <div class="s-box">
+    <UiForm :model-value="form" :error="formErrors" :definition="definition" />
+    <UiButton
+      class="w-full"
+      :disabled="!formValid"
+      :to="
+        formValid
+          ? `https://app.ens.domains/name/${form.domain}/register`
+          : undefined
+      "
+      @click="emit('submit')"
+    >
+      Register ENS name
+    </UiButton>
+  </div>
+</template>
diff --git a/apps/ui/src/components/FormSpaceStrategies.vue b/apps/ui/src/components/FormSpaceStrategies.vue
index 17401cb0b..e2754499e 100644
--- a/apps/ui/src/components/FormSpaceStrategies.vue
+++ b/apps/ui/src/components/FormSpaceStrategies.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { MAX_STRATEGIES } from '@/helpers/turbo';
 import { StrategyConfig } from '@/networks/types';
-import { NetworkID, Space } from '@/types';
+import { NetworkID } from '@/types';
 
 const snapshotChainId = defineModel<number>('snapshotChainId', {
   required: true
@@ -10,11 +10,15 @@ const strategies = defineModel<StrategyConfig[]>('strategies', {
   required: true
 });
 
-const props = defineProps<{
-  networkId: NetworkID;
-  isTicketValid: boolean;
-  space: Space;
-}>();
+const props = withDefaults(
+  defineProps<{
+    networkId: NetworkID;
+    isTicketValid: boolean;
+    space: { turbo: boolean; verified: boolean };
+    withNetworkSelector?: boolean;
+  }>(),
+  { withNetworkSelector: true }
+);
 
 const strategiesLimit = computed(() => {
   const spaceType = props.space.turbo
@@ -28,40 +32,42 @@ const strategiesLimit = computed(() => {
 </script>
 
 <template>
-  <h4 class="eyebrow mb-2 font-medium">Strategies</h4>
-  <div class="s-box mb-4">
-    <UiSelectorNetwork
-      v-model="snapshotChainId"
-      :definition="{
-        type: 'number',
-        title: 'Network',
-        tooltip:
-          'The default network used for this space. Networks can also be specified in individual strategies',
-        examples: ['Select network'],
-        networkId,
-        networksListKind: 'offchain'
-      }"
-    />
-  </div>
-  <UiContainerSettings
-    :title="`Select up to ${strategiesLimit} strategies`"
-    description="(Voting power is cumulative)"
-  >
-    <UiMessage
-      v-if="!isTicketValid"
-      type="danger"
-      learn-more-link="https://snapshot.mirror.xyz/-uSylOUP82hGAyWUlVn4lCg9ESzKX9QCvsUgvv-ng84"
-      class="mb-3"
+  <div>
+    <h4 class="eyebrow mb-2 font-medium">Strategies</h4>
+    <div v-if="withNetworkSelector" class="s-box mb-4">
+      <UiSelectorNetwork
+        v-model="snapshotChainId"
+        :definition="{
+          type: 'number',
+          title: 'Network',
+          tooltip:
+            'The default network used for this space. Networks can also be specified in individual strategies',
+          examples: ['Select network'],
+          networkId,
+          networksListKind: 'offchain'
+        }"
+      />
+    </div>
+    <UiContainerSettings
+      :title="`Select up to ${strategiesLimit} strategies`"
+      description="(Voting power is cumulative)"
     >
-      In order to use the "ticket" strategy you are required to set a voting
-      validation strategy. This combination reduces the risk of spam and sybil
-      attacks.
-    </UiMessage>
-    <UiStrategiesConfiguratorOffchain
-      v-model:model-value="strategies"
-      :network-id="networkId"
-      :default-chain-id="snapshotChainId"
-      :limit="strategiesLimit"
-    />
-  </UiContainerSettings>
+      <UiMessage
+        v-if="!isTicketValid"
+        type="danger"
+        learn-more-link="https://snapshot.mirror.xyz/-uSylOUP82hGAyWUlVn4lCg9ESzKX9QCvsUgvv-ng84"
+        class="mb-3"
+      >
+        In order to use the "ticket" strategy you are required to set a voting
+        validation strategy. This combination reduces the risk of spam and sybil
+        attacks.
+      </UiMessage>
+      <UiStrategiesConfiguratorOffchain
+        v-model:model-value="strategies"
+        :network-id="networkId"
+        :default-chain-id="snapshotChainId"
+        :limit="strategiesLimit"
+      />
+    </UiContainerSettings>
+  </div>
 </template>
diff --git a/apps/ui/src/components/FormVoting.vue b/apps/ui/src/components/FormVoting.vue
index eb4657454..10e88f782 100644
--- a/apps/ui/src/components/FormVoting.vue
+++ b/apps/ui/src/components/FormVoting.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { validateForm } from '@/helpers/validation';
+import { offchainNetworks } from '@/networks';
 import { NetworkID } from '@/types';
 
 const props = defineProps<{
   form: any;
   selectedNetworkId: NetworkID;
-  title: string;
+  title?: string;
   description?: string;
 }>();
 
@@ -13,28 +14,58 @@ const emit = defineEmits<{
   (e: 'errors', value: any);
 }>();
 
+const isOffchainNetwork = computed(() =>
+  offchainNetworks.includes(props.selectedNetworkId)
+);
+
 const definition = computed(() => {
   return {
     type: 'object',
     title: 'SpaceSettings',
     additionalProperties: true,
-    required: ['votingDelay', 'minVotingDuration', 'maxVotingDuration'],
+    required: [
+      'votingDelay',
+      'minVotingDuration',
+      !isOffchainNetwork.value ? 'maxVotingDuration' : undefined
+    ].filter(Boolean),
     properties: {
       votingDelay: {
         type: 'number',
         format: 'duration',
-        title: 'Voting delay'
+        title: 'Voting delay',
+        ...(isOffchainNetwork.value
+          ? {
+              maximum: 2592000,
+              errorMessage: {
+                maximum: 'Delay must be less than 30 days'
+              }
+            }
+          : {})
       },
       minVotingDuration: {
         type: 'number',
         format: 'duration',
-        title: 'Min. voting duration'
+        title: isOffchainNetwork.value
+          ? 'Voting period'
+          : 'Min. voting duration',
+        ...(isOffchainNetwork.value
+          ? {
+              maximum: 15552000,
+              errorMessage: {
+                maximum: 'Period must be less than 180 days'
+              }
+            }
+          : {})
       },
-      maxVotingDuration: {
-        type: 'number',
-        format: 'duration',
-        title: 'Max. voting duration'
-      }
+      ...(isOffchainNetwork.value
+        ? {}
+        : {
+            maxVotingDuration: {
+              type: 'number',
+              format: 'duration',
+              title: 'Max. voting duration'
+            }
+          })
     }
   };
 });
diff --git a/apps/ui/src/components/Modal/SelectTokenStandard.vue b/apps/ui/src/components/Modal/SelectTokenStandard.vue
new file mode 100644
index 000000000..e696d5046
--- /dev/null
+++ b/apps/ui/src/components/Modal/SelectTokenStandard.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+export type TokenStandard = 'ERC20' | 'ERC721' | 'ERC1155';
+
+const ITEMS: Record<TokenStandard, { label: string; description: string }> = {
+  ERC20: {
+    label: 'ERC-20',
+    description: 'For tokens e.g. ETH, USDC, UNI, etc...'
+  },
+  ERC721: {
+    label: 'ERC-721',
+    description: 'For non-fungible tokens e.g. CryptoKitties, Doodle, etc...'
+  },
+  ERC1155: {
+    label: 'ERC-1155',
+    description:
+      'For both fungibles and non-fungibles tokens, e.g. MANA, Decentraland, etc...'
+  }
+} as const;
+
+defineProps<{
+  open: boolean;
+  initialState?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close');
+  (e: 'save', value: TokenStandard);
+}>();
+</script>
+
+<template>
+  <UiModal :open="open" @close="emit('close')">
+    <template #header>
+      <h3>Select token standard</h3>
+    </template>
+    <div class="p-4 flex flex-col gap-2.5">
+      <UiSelector
+        v-for="(standard, id) in ITEMS"
+        :key="id"
+        :is-active="initialState === id"
+        class="w-full"
+        @click="emit('save', id)"
+      >
+        <div>
+          <h4 class="text-skin-link" v-text="standard.label" />
+          <div v-text="standard.description" />
+        </div>
+      </UiSelector>
+    </div>
+  </UiModal>
+</template>
diff --git a/apps/ui/src/components/Modal/SelectValidation.vue b/apps/ui/src/components/Modal/SelectValidation.vue
index 920f1b948..2828fd1a4 100644
--- a/apps/ui/src/components/Modal/SelectValidation.vue
+++ b/apps/ui/src/components/Modal/SelectValidation.vue
@@ -27,14 +27,18 @@ const STRATEGIES_WITHOUT_PARAMS: ValidationDetails['key'][] = [
   'only-members'
 ];
 
-const props = defineProps<{
-  open: boolean;
-  networkId: NetworkID;
-  defaultChainId: ChainId;
-  space: Space;
-  type: 'voting' | 'proposal';
-  current?: Validation;
-}>();
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    networkId: NetworkID;
+    defaultChainId: ChainId;
+    space?: Space;
+    type: 'voting' | 'proposal';
+    current?: Validation;
+    skipMenu?: boolean;
+  }>(),
+  { skipMenu: false }
+);
 
 const emit = defineEmits<{
   (e: 'save', type: Validation);
@@ -227,14 +231,23 @@ function handleApply() {
 
 watch(
   () => props.open,
-  value => {
+  async value => {
     if (value) {
       selectedValidation.value = null;
-      fetchValidations();
+      await fetchValidations();
 
       if (props.current) {
         form.value = clone(props.current.params);
         rawParams.value = JSON.stringify(props.current.params, null, 2);
+
+        if (props.skipMenu) {
+          const selectedValidationDetail = filteredValidations.value.find(
+            v => v.key === props.current!.name
+          );
+          if (selectedValidationDetail) {
+            handleSelect(selectedValidationDetail);
+          }
+        }
       }
     }
   },
diff --git a/apps/ui/src/components/ProposalValidationConfigurator.vue b/apps/ui/src/components/ProposalValidationConfigurator.vue
new file mode 100644
index 000000000..8faf9789a
--- /dev/null
+++ b/apps/ui/src/components/ProposalValidationConfigurator.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import UiSelector from '@/components/Ui/Selector.vue';
+import { VALIDATION_TYPES_INFO } from '@/helpers/constants';
+import { NetworkID, Validation } from '@/types';
+import IHBeaker from '~icons/heroicons-outline/beaker';
+import IHUser from '~icons/heroicons-outline/user';
+
+type ValidationDetailId =
+  | 'only-members'
+  | 'basic'
+  | 'passport-gated'
+  | 'arbitrum'
+  | 'karma-eas-attestation';
+type ValidationDetailsExtra = {
+  tag?: string;
+  icon?: Component;
+  withoutParams?: boolean;
+};
+type ValidationDetails = (typeof VALIDATION_TYPES_INFO)[ValidationDetailId] &
+  ValidationDetailsExtra;
+type ValidationRecords = Record<ValidationDetailId, ValidationDetails>;
+
+const PROPOSAL_VALIDATIONS: Record<ValidationDetailId, ValidationDetailsExtra> =
+  {
+    'only-members': {
+      icon: IHUser,
+      withoutParams: true
+    },
+    basic: {},
+    'passport-gated': {
+      tag: 'Beta',
+      icon: IHBeaker
+    },
+    arbitrum: {},
+    'karma-eas-attestation': {}
+  } as const;
+
+const validation = defineModel<Validation | null>({ required: true });
+
+defineProps<{
+  networkId: NetworkID;
+  snapshotChainId: number;
+}>();
+
+const isSelectValidationModalOpen = ref(false);
+const initialValidation = ref<Validation>();
+
+const availableValidations = computed(() => {
+  return Object.keys(PROPOSAL_VALIDATIONS).reduce((acc, id) => {
+    acc[id] = {
+      ...VALIDATION_TYPES_INFO[id],
+      ...PROPOSAL_VALIDATIONS[id]
+    };
+    return acc;
+  }, {} as ValidationRecords);
+});
+
+function handleClick(validationId: string) {
+  const selectedValidation = {
+    name: validationId,
+    params: {}
+  };
+
+  if (PROPOSAL_VALIDATIONS[validationId].withoutParams) {
+    validation.value = selectedValidation;
+    return;
+  }
+
+  initialValidation.value =
+    validation.value?.name === validationId
+      ? validation.value
+      : selectedValidation;
+
+  isSelectValidationModalOpen.value = true;
+}
+</script>
+
+<template>
+  <div>
+    <div class="space-y-3">
+      <UiSelectorCard
+        :is="UiSelector"
+        v-for="(type, id) in availableValidations"
+        :key="id"
+        :item="{ ...type, key: id }"
+        :selected="validation?.name === id"
+        :is-active="validation?.name === id"
+        @click="handleClick"
+      />
+    </div>
+    <teleport to="#modal">
+      <ModalSelectValidation
+        type="proposal"
+        :open="isSelectValidationModalOpen"
+        :network-id="networkId"
+        :default-chain-id="snapshotChainId"
+        :current="initialValidation"
+        :skip-menu="true"
+        @close="isSelectValidationModalOpen = false"
+        @save="value => (validation = value)"
+      />
+    </teleport>
+  </div>
+</template>
diff --git a/apps/ui/src/components/SetupStrategiesConfiguratorOffchain.vue b/apps/ui/src/components/SetupStrategiesConfiguratorOffchain.vue
new file mode 100644
index 000000000..b8f3d0099
--- /dev/null
+++ b/apps/ui/src/components/SetupStrategiesConfiguratorOffchain.vue
@@ -0,0 +1,244 @@
+<script lang="ts">
+type VotingSetupId = 'ticket' | 'whitelist' | 'token-weighted' | 'custom';
+type VotingSetup = {
+  label: string;
+  description: string;
+  strategyId?: StrategyTemplate['address'];
+  icon?: Component;
+};
+
+const availableStrategies = ref<StrategyTemplate[]>([]);
+const editStrategyModalStrategyId = ref<StrategyTemplate['address']>();
+const votingSetupId = ref<VotingSetupId>();
+const selectedTokenStandard = ref<TokenStandard>();
+</script>
+
+<script setup lang="ts">
+import UiSelector from '@/components/Ui/Selector.vue';
+import { getNetwork } from '@/networks';
+import { StrategyConfig, StrategyTemplate } from '@/networks/types';
+import { ChainId, NetworkID } from '@/types';
+import { TokenStandard } from './Modal/SelectTokenStandard.vue';
+import IHBeaker from '~icons/heroicons-outline/beaker';
+
+const VOTING_SETUPS: Record<VotingSetupId, VotingSetup> = {
+  ticket: {
+    label: 'Anyone can vote',
+    strategyId: 'ticket',
+    icon: IHBeaker,
+    description:
+      'A strategy that gives one voting power to anyone. It should only be used for testing purposes and not in production.'
+  },
+  whitelist: {
+    label: 'Whitelist',
+    strategyId: 'whitelist',
+    description:
+      'A strategy that gives voting power to a predefined list of addresses.'
+  },
+  'token-weighted': {
+    label: 'Token weighted',
+    description:
+      'Votes are weighted by a token. The token can be an ERC-20, ERC-721 or ERC-1155 token standard.'
+  },
+  custom: {
+    label: 'Custom setup',
+    description:
+      "Select up to 8 strategies with a wide range of options. If you can't find the right strategy for your use case, you can create your own"
+  }
+} as const;
+
+const TOKEN_STANDARD_STRATEGY_MAPPING: Record<
+  TokenStandard,
+  StrategyTemplate['address']
+> = {
+  ERC20: 'erc20-balance-of',
+  ERC721: 'erc721',
+  ERC1155: 'erc1155-balance-of'
+} as const;
+
+const strategies = defineModel<StrategyConfig[]>({ required: true });
+
+const props = defineProps<{
+  snapshotChainId: number;
+  networkId: NetworkID;
+  space: { turbo: boolean; verified: boolean };
+}>();
+
+const chainId = ref<number>(props.snapshotChainId);
+const isLoading = ref(false);
+const hasError = ref(false);
+const isEditStrategyModalOpen = ref(false);
+const isSelectTokenStandardModelOpen = ref(false);
+const expectedVotingSetupId = ref<VotingSetupId>();
+const expectedTokenStandard = ref<TokenStandard>();
+
+const editStrategyModalStrategy: ComputedRef<StrategyConfig | undefined> =
+  computed(() => {
+    if (editStrategyModalStrategyId.value === strategies.value[0]?.address) {
+      return strategies.value[0];
+    }
+
+    const strategyTemplate = availableStrategies.value.find(
+      strategy => strategy.address === editStrategyModalStrategyId.value
+    );
+
+    if (!strategyTemplate) return;
+
+    return {
+      id: crypto.randomUUID(),
+      params: strategyTemplate.defaultParams || {},
+      ...strategyTemplate
+    };
+  });
+
+async function loadAvailableStrategies() {
+  if (availableStrategies.value.length) return;
+
+  isLoading.value = true;
+
+  try {
+    const network = getNetwork(props.networkId);
+    availableStrategies.value = await network.api.loadStrategies();
+    hasError.value = false;
+  } catch (e) {
+    hasError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function handleVotingSetupClick(id: string) {
+  if (id === 'custom') {
+    strategies.value = [];
+    votingSetupId.value = 'custom';
+    return;
+  }
+
+  expectedVotingSetupId.value = id as VotingSetupId;
+
+  if (id === 'token-weighted') {
+    isSelectTokenStandardModelOpen.value = true;
+    return;
+  }
+
+  editStrategyModalStrategyId.value = VOTING_SETUPS[id].strategyId;
+  isEditStrategyModalOpen.value = true;
+}
+
+function handleSelectTokenStandard(tokenStandard: TokenStandard) {
+  expectedTokenStandard.value = tokenStandard;
+  editStrategyModalStrategyId.value =
+    TOKEN_STANDARD_STRATEGY_MAPPING[tokenStandard];
+  isSelectTokenStandardModelOpen.value = false;
+  isEditStrategyModalOpen.value = true;
+}
+
+function handleSaveStrategy(value: StrategyConfig['params'], chainId: ChainId) {
+  if (!editStrategyModalStrategy.value || !editStrategyModalStrategyId.value)
+    return;
+
+  const strategy: StrategyConfig = {
+    ...editStrategyModalStrategy.value,
+    params: value,
+    chainId
+  };
+
+  selectedTokenStandard.value = Object.values(
+    TOKEN_STANDARD_STRATEGY_MAPPING
+  ).includes(editStrategyModalStrategyId.value)
+    ? expectedTokenStandard.value
+    : undefined;
+
+  votingSetupId.value = expectedVotingSetupId.value;
+  strategies.value = [strategy];
+  isEditStrategyModalOpen.value = false;
+}
+
+function reset() {
+  strategies.value = [];
+  votingSetupId.value = undefined;
+  selectedTokenStandard.value = undefined;
+}
+
+onMounted(() => {
+  loadAvailableStrategies();
+
+  if (!strategies.value.length) {
+    reset();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <UiAlert v-if="hasError" type="error">
+      <div>
+        An error happened while fetching the strategies list. Please try again
+      </div>
+      <UiButton
+        class="flex items-center justify-center gap-2"
+        :loading="isLoading"
+        @click="loadAvailableStrategies"
+      >
+        <IH-refresh />
+        Retry
+      </UiButton>
+    </UiAlert>
+    <UiLoading v-else-if="isLoading" class="block" />
+    <div v-else-if="votingSetupId !== 'custom'" class="space-y-3">
+      <UiSelectorCard
+        :is="UiSelector"
+        v-for="(type, id) in VOTING_SETUPS"
+        :key="id"
+        :item="{ ...type, key: id }"
+        :selected="votingSetupId === id"
+        :is-active="votingSetupId === id"
+        @click="handleVotingSetupClick"
+      />
+    </div>
+    <div v-else class="space-y-4">
+      <div>
+        <h4 class="eyebrow mb-2">Selected</h4>
+        <div
+          class="rounded-lg border px-4 py-3 text-skin-link leading-[18px] flex justify-between items-center gap-3"
+        >
+          <div
+            class="whitespace-nowrap"
+            v-text="VOTING_SETUPS[votingSetupId].label"
+          />
+          <button type="button" @click="reset">
+            <IH-trash />
+          </button>
+        </div>
+      </div>
+      <FormSpaceStrategies
+        v-model:snapshot-chain-id="chainId"
+        v-model:strategies="strategies"
+        :network-id="networkId"
+        :is-ticket-valid="true"
+        :with-network-selector="false"
+        :space="space"
+      />
+    </div>
+    <teleport to="#modal">
+      <ModalEditStrategy
+        v-if="editStrategyModalStrategy"
+        with-network-selector
+        :open="isEditStrategyModalOpen"
+        :network-id="networkId"
+        :initial-network="editStrategyModalStrategy.chainId ?? snapshotChainId"
+        :strategy-address="editStrategyModalStrategy.address"
+        :definition="editStrategyModalStrategy.paramsDefinition"
+        :initial-state="editStrategyModalStrategy.params"
+        @save="handleSaveStrategy"
+        @close="isEditStrategyModalOpen = false"
+      />
+      <ModalSelectTokenStandard
+        :open="isSelectTokenStandardModelOpen"
+        :initial-state="selectedTokenStandard"
+        @close="isSelectTokenStandardModelOpen = false"
+        @save="handleSelectTokenStandard"
+      />
+    </teleport>
+  </div>
+</template>
diff --git a/apps/ui/src/components/SpaceCreateOffchain.vue b/apps/ui/src/components/SpaceCreateOffchain.vue
index 5de04766a..48f093c46 100644
--- a/apps/ui/src/components/SpaceCreateOffchain.vue
+++ b/apps/ui/src/components/SpaceCreateOffchain.vue
@@ -1,20 +1,335 @@
 <script setup lang="ts">
-import { NetworkID } from '@/types';
+import { StepRecords } from '@/components/Ui/Stepper.vue';
+import { CHAIN_IDS } from '@/helpers/constants';
+import { clone } from '@/helpers/utils';
+import { getNetwork } from '@/networks';
+import { StrategyConfig } from '@/networks/types';
+import { Member, NetworkID, SpacePrivacy, Validation } from '@/types';
+
+const DEFAULT_SETTINGS_FORM = {
+  id: '',
+  chainId: CHAIN_IDS['eth'] as number,
+  name: '',
+  avatar: '',
+  cover: '',
+  description: '',
+  externalUrl: '',
+  twitter: '',
+  github: '',
+  coingecko: '',
+  votingPowerSymbol: '',
+  categories: [],
+  votingDelay: 0,
+  minVotingDuration: 0,
+  privacy: 'any' as SpacePrivacy,
+  strategies: [] as StrategyConfig[],
+  members: [] as Member[],
+  proposalValidation: null as Validation | null
+};
+
+const DEFAULT_STEP_ERRORS = {
+  profile: false,
+  voting: false
+};
+
+type extendedStepRecords = Record<
+  keyof StepRecords,
+  StepRecords[keyof StepRecords] & {
+    contentTitle: string;
+    contentDescription?: string;
+  }
+>;
+
+const STEPS: extendedStepRecords = {
+  welcome: {
+    title: 'Getting started',
+    isValid: () => !web3.value.authLoading,
+    contentTitle: 'Getting started',
+    contentDescription: 'Create a snapshot space offchain.',
+    onBeforeNext: () => {
+      if (web3.value.account) return true;
+
+      modalAccountOpen.value = true;
+      return false;
+    }
+  },
+  id: {
+    title: 'ENS name',
+    isValid: () => !!settingsForm.value.id,
+    contentTitle: 'ENS name',
+    contentDescription: 'Select your space ENS name.'
+  },
+  profile: {
+    title: 'Profile',
+    isValid: () => !stepsErrors.value['profile'],
+    contentTitle: 'Space profile',
+    contentDescription: 'Tell us more about your space.'
+  },
+  network: {
+    title: 'Network',
+    isValid: () => true,
+    contentTitle: 'Space network',
+    contentDescription: 'Set a base/default network for your space.'
+  },
+  strategies: {
+    title: 'Strategies',
+    isValid: () => !!settingsForm.value.strategies.length,
+    contentTitle: 'Voting strategies',
+    contentDescription:
+      "Choose how your users's votes are counted, through a set of strategies."
+  },
+  proposal: {
+    title: 'Proposal validation',
+    isValid: () => !!settingsForm.value.proposalValidation,
+    contentTitle: 'Proposal validation',
+    contentDescription: 'Configure who is allowed to create a proposal.'
+  },
+  voting: {
+    title: 'Voting',
+    isValid: () => !stepsErrors.value['voting'],
+    contentTitle: 'Voting settings'
+  },
+  members: {
+    title: 'Members',
+    isValid: () => true,
+    contentTitle: 'Members',
+    contentDescription:
+      'Assign different roles and permissions to your space members.'
+  },
+  controller: {
+    title: 'Controller',
+    isValid: () => true,
+    contentTitle: 'Controller',
+    contentDescription: "The controller is the space's owner."
+  }
+} as const;
+
+const props = defineProps<{ networkId: NetworkID }>();
 
 const { createSpaceRaw } = useActions();
+const { web3, authInitiated } = useWeb3();
+const router = useRouter();
+const { modalAccountOpen } = useModal();
+
+const sending = ref(false);
+const stepsErrors = ref<Record<string, boolean>>(clone(DEFAULT_STEP_ERRORS));
+
+const settingsForm = ref(clone(DEFAULT_SETTINGS_FORM));
+
+const space = computed(() => ({
+  turbo: false,
+  verified: false,
+  network: props.networkId,
+  id: settingsForm.value.id,
+  cover: settingsForm.value.cover,
+  avatar: settingsForm.value.avatar
+}));
 
-const networkId = ref<NetworkID>('s');
-const spaceId = ref<string>('');
+const formattedSpaceSettings = computed(() => {
+  return {
+    name: settingsForm.value.name,
+    avatar: settingsForm.value.avatar,
+    cover: settingsForm.value.cover,
+    about: settingsForm.value.description,
+    categories: settingsForm.value.categories,
+    website: settingsForm.value.externalUrl,
+    twitter: settingsForm.value.twitter,
+    github: settingsForm.value.github,
+    coingecko: settingsForm.value.coingecko,
+    symbol: settingsForm.value.votingPowerSymbol,
+    network: String(settingsForm.value.chainId),
+    strategies: settingsForm.value.strategies.map(strategy => ({
+      name: strategy.name,
+      network: String(strategy.chainId ?? settingsForm.value.chainId),
+      params: strategy.params
+    })),
+    voting: {
+      delay: settingsForm.value.votingDelay,
+      period: settingsForm.value.minVotingDuration,
+      privacy:
+        settingsForm.value.privacy === 'none' ? '' : settingsForm.value.privacy
+    },
+    filters: {
+      onlyMembers:
+        settingsForm.value.proposalValidation?.name === 'only-members'
+    },
+    voteValidation: settingsForm.value.strategies.find(s => s.name == 'ticket')
+      ? {
+          name: 'basic',
+          params: {
+            minScore: 1
+          }
+        }
+      : { name: 'any', params: {} },
+    admins: settingsForm.value.members
+      .filter(member => member.role === 'admin')
+      .map(member => member.address),
+    moderators: settingsForm.value.members
+      .filter(member => member.role === 'moderator')
+      .map(member => member.address),
+    members: settingsForm.value.members
+      .filter(member => member.role === 'author')
+      .map(member => member.address),
+    ...(settingsForm.value.proposalValidation?.name === 'only-members' ||
+    !settingsForm.value.proposalValidation
+      ? {}
+      : { validation: settingsForm.value.proposalValidation })
+  };
+});
 
-async function create() {
-  const result = await createSpaceRaw(
-    networkId.value,
-    spaceId.value,
-    JSON.stringify({})
-  );
+async function handleSubmit() {
+  const compositeSpaceId = `${props.networkId}:${settingsForm.value.id}`;
+
+  try {
+    sending.value = true;
+
+    await createSpaceRaw(
+      props.networkId,
+      settingsForm.value.id,
+      JSON.stringify(formattedSpaceSettings.value)
+    );
+
+    await router.push({
+      name: 'space-overview',
+      params: { space: compositeSpaceId }
+    });
+  } catch (e) {
+    console.error('Fail to create space', e);
+  } finally {
+    sending.value = false;
+  }
+}
+
+function reset() {
+  settingsForm.value = clone(DEFAULT_SETTINGS_FORM);
+  stepsErrors.value = clone(DEFAULT_STEP_ERRORS);
 }
+
+function handleErrors(stepName: string, errors: any) {
+  stepsErrors.value[stepName] = Object.values(errors).length > 0;
+}
+
+watch(
+  [() => web3.value.account, () => authInitiated.value],
+  async ([newAccount, authInitiated], [oldAccount]) => {
+    if (!authInitiated) return;
+
+    if (
+      (newAccount && oldAccount && newAccount !== oldAccount) ||
+      !newAccount
+    ) {
+      reset();
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
-  <div></div>
+  <UiStepper :steps="STEPS" :submitting="sending" @submit="handleSubmit">
+    <template #content="{ currentStep, goToNext }">
+      <UiContainerSettings
+        :title="STEPS[currentStep].contentTitle"
+        :description="STEPS[currentStep].contentDescription"
+      >
+        <div v-if="currentStep === 'welcome'" class="space-y-4">
+          <div>
+            You will be guided through the process of creating a space.
+            <br />
+            Don't worry, all settings can be changed later.
+          </div>
+          <div class="border py-3 px-4 rounded-lg flex gap-3">
+            <IH-Book-open class="shrink-0 size-[30px]" />
+            <div>
+              <b>Not sure how to setup your space?</b>
+              <br />
+              Learn more in the
+              <AppLink
+                :to="'https://docs.snapshot.box/user-guides/spaces/create'"
+              >
+                documentation
+              </AppLink>
+              or contact support on
+              <AppLink :to="'https://help.snapshot.box/en'">
+                Help Center </AppLink
+              >.
+            </div>
+          </div>
+        </div>
+        <EnsConfiguratorOffchain
+          v-if="currentStep === 'id'"
+          v-model="settingsForm.id"
+          :network-id="networkId"
+          @select="goToNext()"
+        />
+        <FormSpaceProfile
+          v-if="currentStep === 'profile'"
+          :form="settingsForm"
+          :space="space"
+          @errors="v => handleErrors('profile', v)"
+        />
+        <div v-if="currentStep === 'network'" class="s-box mb-4">
+          <UiSelectorNetwork
+            v-model="settingsForm.chainId"
+            :definition="{
+              type: 'number',
+              title: 'Network',
+              tooltip:
+                'Networks can also be specified in individual strategies, delegations, treasuries, etc...',
+              examples: ['Select network'],
+              networkId: networkId,
+              networksListKind: 'offchain'
+            }"
+          />
+        </div>
+        <SetupStrategiesConfiguratorOffchain
+          v-if="currentStep === 'strategies'"
+          v-model="settingsForm.strategies"
+          :snapshot-chain-id="settingsForm.chainId"
+          :network-id="networkId"
+          :space="space"
+        />
+        <ProposalValidationConfigurator
+          v-if="currentStep === 'proposal'"
+          v-model="settingsForm.proposalValidation"
+          :network-id="networkId"
+          :snapshot-chain-id="settingsForm.chainId"
+        />
+        <template v-if="currentStep === 'voting'">
+          <div class="mb-3">
+            The voting delay is the time interval between the creation of a
+            proposal and the start of voting. The voting period is the duration
+            for which the proposal remains open for voting.<br />
+            If these values are left empty, the proposal author will be able to
+            set them.
+          </div>
+          <FormVoting
+            :form="settingsForm"
+            :selected-network-id="networkId"
+            @errors="v => handleErrors('voting', v)"
+          />
+          <VotingPrivacyConfigurator v-model="settingsForm.privacy" />
+        </template>
+        <FormSpaceMembers
+          v-if="currentStep === 'members'"
+          v-model="settingsForm.members"
+          :network-id="networkId"
+          :is-controller="true"
+          :is-admin="true"
+        />
+        <template v-if="currentStep === 'controller'">
+          <UiMessage type="danger" class="mb-3">
+            The controller is set to the ENS name owner. Any change of the ENS
+            name ownership will also change the controller.</UiMessage
+          >
+          <FormSpaceController
+            :controller="web3.account"
+            :network="getNetwork(networkId)"
+            :disabled="true"
+          />
+        </template>
+      </UiContainerSettings>
+    </template>
+    <template #submit-text> Create space</template>
+  </UiStepper>
 </template>
diff --git a/apps/ui/src/components/SpaceCreateOnchain.vue b/apps/ui/src/components/SpaceCreateOnchain.vue
index 12eafed7b..26f3b4db6 100644
--- a/apps/ui/src/components/SpaceCreateOnchain.vue
+++ b/apps/ui/src/components/SpaceCreateOnchain.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { StepRecords } from '@/components/Ui/Stepper.vue';
 import { clone, getSalt } from '@/helpers/utils';
 import { enabledReadWriteNetworks, getNetwork } from '@/networks';
 import { StrategyConfig } from '@/networks/types';
 import { NetworkID, SpaceMetadata, SpaceSettings } from '@/types';
 
-const STEPS = {
+const STEPS: StepRecords = {
   profile: {
     title: 'Profile',
     isValid: () => !stepsErrors.value['profile']
@@ -120,104 +121,103 @@ watch(selectedNetworkId, () => {
 </script>
 
 <template>
-  <div>
-    <CreateDeploymentProgress
-      v-if="confirming && salt && predictedSpaceAddress && validationStrategy"
-      :network-id="selectedNetworkId"
-      :salt="salt"
-      :predicted-space-address="predictedSpaceAddress"
-      :metadata="metadataForm"
-      :settings="settingsForm"
-      :authenticators="authenticators"
-      :validation-strategy="validationStrategy"
-      :voting-strategies="votingStrategies"
-      :execution-strategies="executionStrategies"
-      :controller="controller"
-      @back="confirming = false"
-    />
-    <UiStepper v-else :steps="STEPS" @submit="handleSubmit">
-      <template #content="{ currentStep }">
-        <template v-if="currentStep === 'profile'">
-          <h3 class="mb-4">Space profile</h3>
-          <FormSpaceProfile
-            :form="metadataForm"
-            @errors="v => handleErrors('profile', v)"
-          />
-          <div class="s-box p-4 -mt-6">
-            <FormSpaceTreasuries
-              v-model="metadataForm.treasuries"
-              :network-id="selectedNetworkId"
-            />
-            <FormSpaceDelegations
-              v-model="metadataForm.delegations"
-              :network-id="selectedNetworkId"
-              class="mt-2"
-            />
-          </div>
-        </template>
-        <FormNetwork
-          v-else-if="currentStep === 'network'"
-          v-model="selectedNetworkId"
-        />
-        <FormStrategies
-          v-else-if="currentStep === 'strategies'"
-          v-model="votingStrategies"
-          :network-id="selectedNetworkId"
-          :available-strategies="
-            selectedNetwork.constants.EDITOR_VOTING_STRATEGIES
-          "
-          title="Voting strategies"
-          description="Voting strategies are customizable contracts used to define how much voting power each user has when casting a vote."
-        />
-        <FormStrategies
-          v-else-if="currentStep === 'auths'"
-          v-model="authenticators"
-          unique
-          :network-id="selectedNetworkId"
-          :available-strategies="
-            selectedNetwork.constants.EDITOR_AUTHENTICATORS
-          "
-          title="Authenticators"
-          description="Authenticators are customizable contracts that verify user identity for proposing and voting using different methods."
-        />
-        <FormValidation
-          v-else-if="currentStep === 'validations'"
-          v-model="validationStrategy"
-          :network-id="selectedNetworkId"
-          :available-strategies="
-            selectedNetwork.constants.EDITOR_PROPOSAL_VALIDATIONS
-          "
-          :available-voting-strategies="
-            selectedNetwork.constants
-              .EDITOR_PROPOSAL_VALIDATION_VOTING_STRATEGIES
-          "
-          title="Proposal validation"
-          description="Proposal validation strategies are used to determine if a user is allowed to create a proposal."
-        />
-        <FormStrategies
-          v-else-if="currentStep === 'executions'"
-          v-model="executionStrategies"
-          :network-id="selectedNetworkId"
-          :available-strategies="
-            selectedNetwork.constants.EDITOR_EXECUTION_STRATEGIES
-          "
-          :default-params="{ controller }"
-          title="Execution strategies"
-          description="Execution strategies are used to determine the status of a proposal and execute its payload if it's accepted."
-        />
-        <FormVoting
-          v-else-if="currentStep === 'voting'"
-          :form="settingsForm"
-          :selected-network-id="selectedNetworkId"
-          @errors="v => handleErrors('voting', v)"
-        />
-        <FormController
-          v-else-if="currentStep === 'controller'"
-          v-model="controller"
-          @errors="v => handleErrors('controller', v)"
+  <CreateDeploymentProgress
+    v-if="confirming && salt && predictedSpaceAddress && validationStrategy"
+    :network-id="selectedNetworkId"
+    :salt="salt"
+    :predicted-space-address="predictedSpaceAddress"
+    :metadata="metadataForm"
+    :settings="settingsForm"
+    :authenticators="authenticators"
+    :validation-strategy="validationStrategy"
+    :voting-strategies="votingStrategies"
+    :execution-strategies="executionStrategies"
+    :controller="controller"
+    @back="confirming = false"
+  />
+  <UiStepper v-else :steps="STEPS" @submit="handleSubmit">
+    <template #content="{ currentStep }">
+      <template v-if="currentStep === 'profile'">
+        <h3 class="mb-4">Space profile</h3>
+        <FormSpaceProfile
+          :form="metadataForm"
+          @errors="v => handleErrors('profile', v)"
         />
+        <div class="s-box p-4 -mt-6">
+          <FormSpaceTreasuries
+            v-model="metadataForm.treasuries"
+            :network-id="selectedNetworkId"
+          />
+          <FormSpaceDelegations
+            v-model="metadataForm.delegations"
+            :network-id="selectedNetworkId"
+            class="mt-2"
+          />
+        </div>
       </template>
-      <template #submit-text> Create </template>
-    </UiStepper>
-  </div>
+      <FormNetwork
+        v-else-if="currentStep === 'network'"
+        v-model="selectedNetworkId"
+        title="Space network"
+      />
+      <FormStrategies
+        v-else-if="currentStep === 'strategies'"
+        v-model="votingStrategies"
+        :network-id="selectedNetworkId"
+        :available-strategies="
+          selectedNetwork.constants.EDITOR_VOTING_STRATEGIES
+        "
+        title="Voting strategies"
+        description="Voting strategies are customizable contracts used to define how much voting power each user has when casting a vote."
+      />
+      <FormStrategies
+        v-else-if="currentStep === 'auths'"
+        v-model="authenticators"
+        unique
+        :network-id="selectedNetworkId"
+        :available-strategies="selectedNetwork.constants.EDITOR_AUTHENTICATORS"
+        title="Authenticators"
+        description="Authenticators are customizable contracts that verify user identity for proposing and voting using different methods."
+      />
+      <FormValidation
+        v-else-if="currentStep === 'validations'"
+        v-model="validationStrategy"
+        :network-id="selectedNetworkId"
+        :available-strategies="
+          selectedNetwork.constants.EDITOR_PROPOSAL_VALIDATIONS
+        "
+        :available-voting-strategies="
+          selectedNetwork.constants.EDITOR_PROPOSAL_VALIDATION_VOTING_STRATEGIES
+        "
+        title="Proposal validation"
+        description="Proposal validation strategies are used to determine if a user is allowed to create a proposal."
+      />
+      <FormStrategies
+        v-else-if="currentStep === 'executions'"
+        v-model="executionStrategies"
+        :network-id="selectedNetworkId"
+        :available-strategies="
+          selectedNetwork.constants.EDITOR_EXECUTION_STRATEGIES
+        "
+        :default-params="{ controller }"
+        title="Execution strategies"
+        description="Execution strategies are used to determine the status of a proposal and execute its payload if it's accepted."
+      />
+      <FormVoting
+        v-else-if="currentStep === 'voting'"
+        :form="settingsForm"
+        :selected-network-id="selectedNetworkId"
+        title="Voting settings"
+        @errors="v => handleErrors('voting', v)"
+      />
+      <FormController
+        v-else-if="currentStep === 'controller'"
+        v-model="controller"
+        title="Controller"
+        :chain-id="selectedNetwork.chainId"
+        @errors="v => handleErrors('controller', v)"
+      />
+    </template>
+    <template #submit-text> Create </template>
+  </UiStepper>
 </template>
diff --git a/apps/ui/src/components/Ui/ContainerSettings.vue b/apps/ui/src/components/Ui/ContainerSettings.vue
index 01e026c42..8ce8d6eba 100644
--- a/apps/ui/src/components/Ui/ContainerSettings.vue
+++ b/apps/ui/src/components/Ui/ContainerSettings.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  title: string;
+  title?: string;
   description?: string;
 }>();
 </script>
@@ -8,6 +8,7 @@ defineProps<{
 <template>
   <div class="mb-4">
     <h3
+      v-if="title"
       class="text-md leading-6"
       :class="{
         'mb-4': !description
diff --git a/apps/ui/src/components/Ui/SelectorCard.vue b/apps/ui/src/components/Ui/SelectorCard.vue
new file mode 100644
index 000000000..30829ea36
--- /dev/null
+++ b/apps/ui/src/components/Ui/SelectorCard.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import IHCode from '~icons/heroicons-outline/code';
+
+withDefaults(
+  defineProps<{
+    item: {
+      key: string;
+      label: string;
+      description?: string;
+      tag?: string;
+      icon?: Component;
+    };
+    selected?: boolean;
+    is?: string | Component;
+  }>(),
+  {
+    is: 'button',
+    selected: false
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'click', key: string);
+}>();
+</script>
+
+<template>
+  <component
+    :is="is"
+    class="flex flex-col md:flex-row !rounded-lg border w-full text-left items-stretch overflow-hidden !p-0 !gap-0"
+    @click="emit('click', item.key)"
+  >
+    <div
+      :class="[
+        'flex items-center justify-center min-h-[40px] bg-skin-border text-skin-link',
+        {
+          'bg-skin-link !text-skin-bg': selected
+        }
+      ]"
+    >
+      <component :is="item.icon || IHCode" class="inline-block mx-3" />
+    </div>
+    <div class="py-3 px-4">
+      <div class="flex items-center space-x-2">
+        <h4 class="text-skin-link inline-block" v-text="item.label" />
+        <span
+          v-if="item.tag"
+          class="bg-skin-text text-skin-accent-foreground rounded-full px-1.5 py-0.5 text-[13px] leading-[13px] h-fit"
+          v-text="item.tag"
+        />
+      </div>
+      <div
+        v-if="item.description"
+        class="text-ellipsis"
+        v-text="item.description"
+      />
+    </div>
+  </component>
+</template>
diff --git a/apps/ui/src/components/Ui/Stepper.vue b/apps/ui/src/components/Ui/Stepper.vue
index 0b827fbb2..a5854af2b 100644
--- a/apps/ui/src/components/Ui/Stepper.vue
+++ b/apps/ui/src/components/Ui/Stepper.vue
@@ -1,7 +1,14 @@
 <script lang="ts" setup>
+export type StepRecords = Record<string, Step>;
+type Step = {
+  title: string;
+  isValid: () => boolean;
+  onBeforeNext?: () => boolean;
+};
+
 const props = withDefaults(
   defineProps<{
-    steps: Record<string, { title: string; isValid: () => boolean }>;
+    steps: StepRecords;
     submitting?: boolean;
   }>(),
   {
@@ -23,16 +30,28 @@ const submitDisabled = computed(() =>
   Object.values(props.steps).some(step => !step.isValid())
 );
 
+const currentStep = computed(() => {
+  return stepper.stepNames.value[stepper.index.value];
+});
+
 function goToStep(stepName: string) {
+  if (props.steps[currentStep.value]?.onBeforeNext?.() === false) return;
+
   stepper.goTo(stepName);
   window.scrollTo({
     top: 0
   });
 }
+
+watchEffect(() => {
+  if (firstInvalidStepIndex.value < stepper.index.value) {
+    stepper.goTo(stepper.stepNames.value[firstInvalidStepIndex.value]);
+  }
+});
 </script>
 
 <template>
-  <div class="pt-5 flex max-w-[50rem] mx-auto px-4">
+  <div class="flex">
     <div
       class="flex fixed lg:sticky top-[72px] inset-x-0 p-3 border-b z-10 bg-skin-bg lg:top-auto lg:inset-x-auto lg:p-0 lg:pr-5 lg:border-0 lg:flex-col gap-1 min-w-[180px] overflow-auto"
     >
@@ -48,20 +67,20 @@ function goToStep(stepName: string) {
           'text-skin-link': i <= firstInvalidStepIndex
         }"
         @click="goToStep(stepName)"
-      >
-        {{ step.title }}
-      </button>
+        v-text="step.title"
+      />
     </div>
     <div class="flex-1">
       <div class="mt-8 lg:mt-0">
         <slot
           name="content"
-          :current-step="stepper.stepNames.value[stepper.index.value]"
+          :current-step="currentStep"
+          :go-to-next="stepper.goToNext"
         />
       </div>
       <UiButton
         v-if="stepper.isLast.value"
-        class="w-full"
+        class="w-full primary"
         :loading="submitting"
         :disabled="submitDisabled"
         @click="emit('submit')"
@@ -70,7 +89,7 @@ function goToStep(stepName: string) {
       </UiButton>
       <UiButton
         v-else-if="stepper.next.value"
-        class="w-full"
+        class="w-full primary"
         :disabled="!stepper.current.value.isValid()"
         @click="goToStep(stepper.next.value)"
       >
diff --git a/apps/ui/src/components/VotingPrivacyConfigurator.vue b/apps/ui/src/components/VotingPrivacyConfigurator.vue
new file mode 100644
index 000000000..3b84f3c62
--- /dev/null
+++ b/apps/ui/src/components/VotingPrivacyConfigurator.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import UiSelector from '@/components/Ui/Selector.vue';
+import { SpacePrivacy } from '@/types';
+import IHCHeck from '~icons/heroicons-outline/check';
+import IHUser from '~icons/heroicons-outline/user';
+import IHX from '~icons/heroicons-outline/x';
+
+const PRIVACY_TYPES = {
+  any: {
+    label: 'Up to the author',
+    description:
+      'Leave it to the proposal author whether to enable shielded voting.',
+    icon: IHUser
+  },
+  shutter: {
+    label: 'On',
+    description: 'Votes will always stay private until proposal ends.',
+    icon: IHCHeck
+  },
+  none: {
+    label: 'Off',
+    description: 'Votes will always be public.',
+    icon: IHX
+  }
+} as const;
+
+const privacy = defineModel<SpacePrivacy>();
+
+function handleClick(value: string) {
+  privacy.value = value as SpacePrivacy;
+}
+</script>
+
+<template>
+  <div>
+    <h4 class="eyebrow">Shielded voting</h4>
+    <div class="mb-3">
+      Encrypt votes, making voter's choice private until the proposal ends.
+    </div>
+    <div class="space-y-3">
+      <UiSelectorCard
+        :is="UiSelector"
+        v-for="(type, id) in PRIVACY_TYPES"
+        :key="id"
+        :item="{ ...type, key: id }"
+        :selected="privacy === id"
+        :is-active="privacy === id"
+        @click="handleClick"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/ui/src/composables/useWalletEns.ts b/apps/ui/src/composables/useWalletEns.ts
new file mode 100644
index 000000000..847fdbdae
--- /dev/null
+++ b/apps/ui/src/composables/useWalletEns.ts
@@ -0,0 +1,149 @@
+import { getENSNames } from '@/helpers/stamp';
+import { getNetwork } from '@/networks';
+import { NetworkID } from '@/types';
+
+type ENSNameStatus = 'AVAILABLE' | 'USED' | 'TOO_LONG' | 'DELETED';
+type ENSName = { name: string; status: ENSNameStatus };
+type ENSNames = Record<ENSName['name'], ENSName>;
+
+const MAX_ENS_NAME_LENGTH = 64;
+const DEFAULT_STATUS = 'AVAILABLE';
+
+const ensNames = ref<Map<string, ENSNames>>(new Map());
+const checkedDeletedSpaceIds = new Map<string, boolean>();
+
+async function fetchDeletedSpaces(networkId: NetworkID, ids: string[]) {
+  const newIds = ids.filter(id => !checkedDeletedSpaceIds.has(id));
+
+  if (!newIds.length) return;
+
+  const network = getNetwork(networkId);
+  const hubUrl = network.api.apiUrl.replace('/graphql', '');
+
+  await Promise.allSettled(
+    newIds.map(async id => {
+      try {
+        const response = await fetch(`${hubUrl}/api/spaces/${id}`, {
+          headers: { 'Content-Type': 'application/json' }
+        });
+
+        checkedDeletedSpaceIds.set(
+          id,
+          (await response.json())?.deleted === true
+        );
+      } catch (e) {
+        console.error(e);
+      }
+    })
+  );
+}
+
+export function useWalletEns(networkId: NetworkID) {
+  const { getSpaces } = useSpaces();
+  const { web3, authInitiated } = useWeb3();
+
+  const isLoading = ref(false);
+  const isRefreshing = ref(false);
+  const hasError = ref(false);
+
+  const names = computed(() => ensNames.value.get(web3.value.account));
+
+  const network = computed(() => getNetwork(networkId));
+
+  async function validateDeletedSpaces(records: ENSNames) {
+    const ids = Object.values(records)
+      .filter(d => d.status === DEFAULT_STATUS)
+      .map(d => d.name);
+
+    await fetchDeletedSpaces(networkId, ids);
+
+    ids.forEach(id => {
+      if (checkedDeletedSpaceIds.get(id)) {
+        records[id].status = 'DELETED';
+      }
+    });
+  }
+
+  function validateNameLength(records: ENSNames) {
+    Object.values(records).forEach(d => {
+      if (d.name.length > MAX_ENS_NAME_LENGTH) {
+        d.status = 'TOO_LONG';
+      }
+    });
+  }
+
+  async function validateUsedNames(records: ENSNames) {
+    const ids = Object.values(records)
+      .filter(d => d.status === DEFAULT_STATUS)
+      .map(d => `${networkId}:${d.name}`);
+
+    if (!ids.length) return;
+
+    const spaces = await getSpaces({
+      id_in: ids
+    });
+
+    spaces.forEach(space => {
+      records[space.id].status = 'USED';
+    });
+  }
+
+  async function validateNames(values: string[]) {
+    const records: ENSNames = values.reduce((acc, name) => {
+      acc[name] = { name, status: DEFAULT_STATUS };
+      return acc;
+    }, {});
+
+    validateNameLength(records);
+    await validateUsedNames(records);
+    await validateDeletedSpaces(records);
+
+    ensNames.value.set(web3.value.account, records);
+  }
+
+  async function load(silent = false) {
+    if (silent) isRefreshing.value = true;
+    isLoading.value = true;
+
+    try {
+      await validateNames(
+        await getENSNames(web3.value.account, network.value.chainId)
+      );
+      hasError.value = false;
+    } catch (e) {
+      console.error(e);
+      hasError.value = true;
+    } finally {
+      isRefreshing.value = false;
+      isLoading.value = false;
+    }
+  }
+
+  function refresh() {
+    return load(true);
+  }
+
+  watch(
+    [
+      () => web3.value.account,
+      () => web3.value.authLoading,
+      () => authInitiated.value
+    ],
+    async ([newAccount, loading, authInitiated]) => {
+      if (loading || !authInitiated) return;
+
+      await load(ensNames.value.has(newAccount));
+    },
+    { immediate: true }
+  );
+
+  return {
+    MAX_ENS_NAME_LENGTH,
+    isRefreshing,
+    isLoading,
+    hasError,
+    names,
+    load,
+    refresh
+  };
+}
diff --git a/apps/ui/src/helpers/stamp.ts b/apps/ui/src/helpers/stamp.ts
index ef5a0ef17..efa65f113 100644
--- a/apps/ui/src/helpers/stamp.ts
+++ b/apps/ui/src/helpers/stamp.ts
@@ -1,7 +1,10 @@
+import { ChainId } from '@/types';
 import { formatAddress } from './utils';
 
 const resolvedAddresses = new Map<string, string | null>();
 
+const STAMP_URL = 'https://stamp.fyi';
+
 export async function getNames(
   addresses: string[]
 ): Promise<Record<string, string>> {
@@ -16,7 +19,7 @@ export async function getNames(
     let data: string[] = [];
 
     if (unresolvedAddresses.length > 0) {
-      const res = await fetch('https://stamp.fyi', {
+      const res = await fetch(STAMP_URL, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -46,3 +49,26 @@ export async function getNames(
     return {};
   }
 }
+
+export async function getENSNames(
+  address: string,
+  chaindId: ChainId
+): Promise<string[]> {
+  const res = await fetch(STAMP_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      method: 'lookup_domains',
+      params: formatAddress(address),
+      network: chaindId
+    })
+  });
+
+  if (res.status !== 200) {
+    throw new Error('Failed to get domains');
+  }
+
+  return (await res.json()).result;
+}
diff --git a/apps/ui/src/views/Create.vue b/apps/ui/src/views/Create.vue
index 490527d5a..64f29b870 100644
--- a/apps/ui/src/views/Create.vue
+++ b/apps/ui/src/views/Create.vue
@@ -1,31 +1,85 @@
 <script setup lang="ts">
-type SpaceType = 'onchain' | 'offchain';
+import SpaceCreateOffchain from '@/components/SpaceCreateOffchain.vue';
+import SpaceCreateOnchain from '@/components/SpaceCreateOnchain.vue';
+import { enabledNetworks, offchainNetworks } from '@/networks';
+import IHBolt from '~icons/heroicons-outline/bolt';
+import IHLink from '~icons/heroicons-outline/link';
 
-const { setTitle } = useTitle();
+type ProtocolId = 'onchain' | 'offchain';
+type Protocol = {
+  label: string;
+  description: string;
+  icon: any;
+  component: any;
+  isEnabled: boolean;
+  networkId?: string;
+};
+type ProtocolRecords = Record<ProtocolId, Protocol>;
 
-const spaceType = ref<SpaceType | null>(null);
+const PROTOCOLS: ProtocolRecords = {
+  onchain: {
+    label: 'Onchain space',
+    description: 'Create a space onchain',
+    icon: IHLink,
+    component: SpaceCreateOnchain,
+    isEnabled: enabledNetworks.some(
+      network => !offchainNetworks.includes(network)
+    )
+  },
+  offchain: {
+    label: 'Offchain space',
+    description: 'Create a space offchain',
+    icon: IHBolt,
+    component: SpaceCreateOffchain,
+    isEnabled: enabledNetworks.some(network =>
+      offchainNetworks.includes(network)
+    ),
+    networkId: enabledNetworks.find(id => offchainNetworks.includes(id))
+  }
+} as const;
 
-setTitle('Create space');
+useTitle('Create space');
+
+const protocol = ref<ProtocolId>();
+
+const availableProtocols = computed(
+  () =>
+    Object.fromEntries(
+      Object.entries(PROTOCOLS).filter(([, value]) => value.isEnabled)
+    ) as ProtocolRecords
+);
+
+function handleClick(value: string) {
+  protocol.value = value as ProtocolId;
+}
+
+onMounted(() => {
+  const availableProtocolIds = Object.keys(
+    availableProtocols.value
+  ) as ProtocolId[];
+
+  if (availableProtocolIds.length === 1) {
+    protocol.value = availableProtocolIds[0];
+  }
+});
 </script>
 
 <template>
-  <div v-if="!spaceType" class="max-w-[50rem] mx-auto px-4 mt-4 space-y-4">
-    <h2>Choose a space type</h2>
-    <div class="flex w-full gap-3">
-      <button
-        class="border p-3 w-full rounded-md"
-        @click="spaceType = 'onchain'"
-      >
-        Create an <b>onchain</b> space
-      </button>
-      <button
-        class="border p-3 w-full rounded-md"
-        @click="spaceType = 'offchain'"
-      >
-        Create an <b>offchain</b> space
-      </button>
+  <div v-if="!protocol" class="max-w-[50rem] mx-auto pt-5 px-4 space-y-4">
+    <h2>What kind of space do you want to create?</h2>
+    <div class="flex w-full flex-col md:flex-row gap-3">
+      <UiSelectorCard
+        v-for="(item, id) in availableProtocols"
+        :key="id"
+        :item="{ ...PROTOCOLS[id], key: id }"
+        @click="handleClick"
+      />
     </div>
   </div>
-  <SpaceCreateOnchain v-else-if="spaceType === 'onchain'" />
-  <SpaceCreateOffchain v-else />
+  <div v-else class="pt-5 max-w-[50rem] mx-auto px-4">
+    <component
+      :is="PROTOCOLS[protocol].component"
+      :network-id="PROTOCOLS[protocol].networkId"
+    />
+  </div>
 </template>