Start on org governance models

public/index.css

@@ -254,6 +254,14 @@ h1 {
 	margin-bottom: 2rem;
 }
 
+h2 {
+	margin: 1.5rem 0;
+}
+
+h3 {
+	margin: 1rem 0;
+}
+
 p {
 	margin: 0.5rem 0;
 }

src/Modal.svelte

@@ -42,7 +42,7 @@
   }
   .modal-title {
     font-size: 1.75rem;
-    line-height: 1.75rem;
+    line-height: 2.625rem;
     margin-bottom: 2rem;
     color: var(--color-secondary);
     text-align: center;
@@ -72,9 +72,11 @@
     <div class="modal-subtitle">
       <slot name="subtitle"></slot>
     </div>
-    <div class="modal-body">
-      <slot name="body"></slot>
-    </div>
+    {#if $$slots.body}
+      <div class="modal-body">
+        <slot name="body"></slot>
+      </div>
+    {/if}
     <div class="modal-actions">
       <slot name="actions"></slot>
     </div>

src/Options.svelte

@@ -0,0 +1,49 @@
+<script lang="typescript">
+  import { createEventDispatcher } from 'svelte';
+
+  export let options: { label: string, value: string }[];
+  export let name: string;
+  export let selected: string = "";
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<style>
+  main {
+    display: flex;
+    justify-content: center;
+  }
+  .options {
+    text-align: left;
+  }
+  .options label {
+    display: block;
+    margin-bottom: 1rem;
+    line-height: 1.5rem;
+    width: 100%;
+  }
+  .options label:last-child {
+    margin-bottom: 0.5rem;
+  }
+  .options label, .options input {
+    cursor: pointer;
+  }
+  .options input {
+    margin-right: 0.75rem;
+    display: inline-block;
+  }
+</style>
+
+<main>
+  <div class="options">
+    {#each options as option}
+      <label for="{option.value}">
+        <input type="radio" {disabled} checked={selected === option.value} {name}
+               id="{option.value}" value="{option.value}"
+               on:click={() => dispatch('changed', option.value)}>
+        {option.label}
+      </label>
+    {/each}
+  </div>
+</main>

src/base/orgs/CreateOrg.svelte

@@ -5,6 +5,8 @@
   import type { Err } from '@app/error';
   import { Org } from '@app/base/orgs/Org';
   import type { Config } from '@app/config';
+  import Loading from '@app/Loading.svelte';
+  import Options from '@app/Options.svelte';
 
   export let config: Config;
   export let owner: string;
@@ -16,9 +18,15 @@
     Success,
   }
 
+  const orgTypes = [
+    { label: "Single signer", value: "bdfl" },
+    { label: "Quorum", value: "dao" },
+  ];
+
   let state = State.Idle;
   let error: Err | null = null;
   let org: Org | null = null;
+  let governance: string = "bdfl";
 
   const dispatch = createEventDispatcher();
   const createOrg = async () => {
@@ -38,6 +46,10 @@
       error = e;
     }
   };
+
+  const onGovernanceChanged = (event: { detail: string }) => {
+    governance = event.detail;
+  };
 </script>
 
 {#if error}
@@ -45,16 +57,21 @@
 {:else}
   <Modal floating on:close>
     <span slot="title">
-      {#if !org}
-        Create an Org
-      {:else}
-        🎉
-      {/if}
+      {#if org}🎉{:else}✨{/if}
     </span>
 
     <span slot="subtitle">
       {#if org}
         <strong>Your org was successfully created.</strong>
+      {:else}
+        <h3>Create an Org</h3>
+        {#if state === State.Idle}
+          <div class="highlight">Select a governance model</div>
+        {:else if state === State.Signing}
+          <div class="highlight">Confirm transaction in your wallet</div>
+        {:else if state === State.Pending}
+          <div class="highlight">Waiting for transaction to be processed</div>
+        {/if}
       {/if}
     </span>
 
@@ -64,31 +81,31 @@
           <tr><td class="label">Address</td><td>{org.address}</td></tr>
           <tr><td class="label">Owner</td><td>{org.safe}</td></tr>
         </table>
-      {:else}
-        <table>
-          <tr><td class="label">Member</td><td>{owner}</td></tr>
-        </table>
+      {:else if state === State.Idle}
+        <Options name="governance" disabled={state !== State.Idle}
+                 selected="{governance}" options={orgTypes}
+                 on:changed={onGovernanceChanged} />
       {/if}
     </span>
 
     <span slot="actions">
       {#if !org}
-        <button
-          on:click={createOrg}
-          class="primary"
-          data-waiting={[State.Signing, State.Pending].includes(state) || null}
-          disabled={state !== State.Idle}
-        >
-          {#if state === State.Pending}
-            Creating...
-          {:else}
+        {#if state === State.Idle}
+          <button
+            on:click={createOrg}
+            class="primary"
+            data-waiting={[State.Signing, State.Pending].includes(state) || null}
+            disabled={state !== State.Idle}
+          >
             Create
-          {/if}
-        </button>
+          </button>
 
-        <button on:click={() => dispatch('close')} class="text">
-          Cancel
-        </button>
+          <button on:click={() => dispatch('close')} class="text">
+            Cancel
+          </button>
+        {:else}
+          <Loading center small />
+        {/if}
       {:else}
         <button on:click={() => dispatch('close')}>
           Done