Start on org governance models

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