5c83de4 Improve org creation dialog — radicle-explorer

Radicle web interface

Improve org creation dialog

Alexis Sellier committed 4 years ago

commit 5c83de4ff6fdc66d4822cf5920edc1a8d51b13a8
parent 0b6f3a4044f99772b9b19d34b7de53354e1a2145

2 files changed +41 -3

modified src/Options.svelte

@@ -1,7 +1,8 @@

 <script lang="ts">
   import marked from "marked";
   import { createEventDispatcher } from 'svelte';
   export let options: { label: string; value: string }[];
   export let options: { label: string; value: string; description?: string[] }[];
   export let name: string;
   export let selected = "";
   export let disabled = false;

@@ -33,6 +34,24 @@

     margin-right: 0.75rem;
     display: inline-block;
   }
   .options .description {
     color: var(--color-secondary);
     font-size: 0.875rem;
     margin-bottom: 2rem;
     max-width: 24rem;
   }
   .options .description:last-child {
     margin-bottom: 0;
   }
   .description :global(a) {
     text-decoration: underline;
   }
   .description :global(em) {
     font-style: italic;
   }
   .description :global(strong) {
     font-weight: var(--font-weight-medium);
   }
 </style>
 <main>

@@ -44,6 +63,11 @@

                on:click={() => dispatch('changed', option.value)}>
         {option.label}
       </label>
       {#if option.description}
         <div class="description">
           {@html marked(option.description.join("\n"))}
         </div>
       {/if}
     {/each}
   </div>
 </main>

modified src/base/orgs/Create.svelte

@@ -6,6 +6,7 @@

   import type { Err } from '@app/error';
   import { Org } from '@app/base/orgs/Org';
   import type { Config } from '@app/config';
   import { formatAddress } from '@app/utils';
   import Loading from '@app/Loading.svelte';
   import Options from '@app/Options.svelte';
   import Address from '@app/Address.svelte';

@@ -26,8 +27,21 @@

   }
   const orgTypes = [
     { label: "Single signer", value: Governance.BDFL },
     { label: "Quorum", value: Governance.Quorum },
     { label: "Single-signature",
       description: [
         `Creates an org with you (${formatAddress(owner)}) as the only owner.`,
         `Org transactions such as anchoring can be signed and executed directly from your wallet.`
       ],
       value: Governance.BDFL
     },
     { label: "Multi-signature",
       description: [
         "Creates an org with a multi-signature contract as its owner.",
         "A [Gnosis Safe](https://gnosis-safe.io) contract is deployed for your org and assigned as the owner.",
         "Org transactions such as anchoring have to be approved by a quorum of signers."
       ],
       value: Governance.Quorum
     },
   ];
   let state = State.Idle;