From 3ce7aada0f8202aedbe717d093d71ed6fb3a4621 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Wed, 5 Oct 2022 16:36:26 +0200 Subject: [PATCH] Refactor forms MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add a link to the faucet page from `Rinkeby` badge in header - refactor the `` component to include - a loading indicator - a keyboard shortcut to submit the input by pressing the `enter` key - add a keyboard shortcut hint ⏎ that shows up whenever the input is ready to be submitted - a validation message - align all pages with a single input form to have a similar look and feel - improve validation messages and error handling in all forms Signed-off-by: Rūdolfs Ošiņš --- src/Header.svelte | 4 +- src/Loading.svelte | 13 +- src/Search.svelte | 94 ++++---- src/TextInput.svelte | 95 +++++++-- src/base/faucet/Index.svelte | 233 ++++++++++---------- src/base/registrations/Index.svelte | 146 +++++++------ src/base/vesting/Index.svelte | 271 +++++++++++++----------- src/base/vesting/state.ts | 18 -- src/base/vesting/vesting.ts | 26 ++- src/components/TransferOwnership.svelte | 183 +++++++++------- src/ens/SetName.svelte | 37 ++-- 11 files changed, 629 insertions(+), 491 deletions(-) delete mode 100644 src/base/vesting/state.ts diff --git a/src/Header.svelte b/src/Header.svelte index 809c70136..125aff1ee 100644 --- a/src/Header.svelte +++ b/src/Header.svelte @@ -190,7 +190,9 @@
{#if config && config.network.name === "rinkeby"} - Rinkeby + + Rinkeby + {:else if config && config.network.name === "homestead"} {:else} diff --git a/src/Loading.svelte b/src/Loading.svelte index e194400cf..4377973c5 100644 --- a/src/Loading.svelte +++ b/src/Loading.svelte @@ -1,21 +1,20 @@ -
+
- - {#if loading} - - {/if} - - + on:submit={search} + placeholder="Search a name or address…" />
diff --git a/src/TextInput.svelte b/src/TextInput.svelte index fdb562c39..791987874 100644 --- a/src/TextInput.svelte +++ b/src/TextInput.svelte @@ -1,6 +1,9 @@ -
- +
+ - {#if $$slots.right}
- + {#if $$slots.right} + + {/if} + + {#if loading} + + {/if} + + {#if valid && !loading} +
⏎
+ {/if}
- {/if} + + {#if validationMessage} +
+ {validationMessage} +
+ {/if} +
diff --git a/src/base/faucet/Index.svelte b/src/base/faucet/Index.svelte index 61851ef8f..724e42af1 100644 --- a/src/base/faucet/Index.svelte +++ b/src/base/faucet/Index.svelte @@ -1,24 +1,24 @@ - Radicle: Faucet + Radicle – Faucet -
-
- {#if config.network.name === "homestead"} -
- To get RAD tokens on - {config.network.name} - - , please check the known exchanges. -
- {:else if !$session} -
- To get RAD tokens on - {config.network.name} - - , please connect your wallet. -
- {:else} -
- Obtain RAD tokens on - {config.network.name} - -
-
-
-
- (error = "")} /> -
- -
- {#if error} -
- {error} -
- {/if} -
- {/if} +
+
+ Obtain RAD tokens on + {config.network.name} +
+ + {#if config.network.name === "homestead"} +
+ To get RAD tokens on + {config.network.name}, + + please +
+ check + + popular exchanges + + ​. +
+ {:else if !$session} +
+ To get RAD tokens on + {config.network.name} + + ​, +
+ please connect your wallet. +
+ {:else} +
+ { + withdraw(amount); + }} + bind:value={amount} + {valid} + {loading} /> + + +
+ {/if}
diff --git a/src/base/registrations/Index.svelte b/src/base/registrations/Index.svelte index eb6c0ed41..ba27b1dce 100644 --- a/src/base/registrations/Index.svelte +++ b/src/base/registrations/Index.svelte @@ -8,102 +8,108 @@ export let config: Config; let input = ""; + let valid: boolean = false; + let validationMessage: string | undefined = undefined; function register() { - navigate(`/registrations/${label}/form`); + if (!valid) { + return; + } + navigate(`/registrations/${ensName}/form`); } - function validate(input: string): string[] { - const errors: string[] = []; + function validate(input: string) { + if (input === "") { + return { valid: false }; + } if (input && input.includes(".")) { - errors.push("Please do not use dots as separators."); + return { + valid: false, + validationMessage: "Please do not use dots as separators.", + }; } if (input && input.length < 2) { - errors.push("Please enter a minimum of 2 characters."); + return { + valid: false, + validationMessage: "Please enter a minimum of 2 characters.", + }; } if (input && input.length > 128) { - errors.push("Please enter a maximum of 128 characters."); + return { + valid: false, + validationMessage: "Please enter a maximum of 128 characters.", + }; } - return errors; + return { valid: true }; } - $: label = input.trim(); - $: errors = validate(label); + $: ensName = input.trim(); + $: ({ valid, validationMessage } = validate(ensName)); - Radicle: Register + Radicle – Register -
-
-
- Register a {config.registrar.domain} - name -
- Register a unique name with our ENS registrar, under the - radicle.eth - - domain (e.g. cloudhead.radicle.eth). Radicle names never expire and free - to register. -
-
-
- - - - .{config.registrar.domain} - - - {#if errors} -
- {#each errors as error} -
{error}
- {/each} -
- {/if} - +
+
+ Register a {config.registrar.domain} + name +
- -
+
+ Register a unique name with our ENS registrar, under
+ the + radicle.eth + domain (e.g. cloudhead.radicle.eth). +
+ Radicle names never expire and free to register. +
+ +
+ + + .{config.registrar.domain} + + + +
diff --git a/src/base/vesting/Index.svelte b/src/base/vesting/Index.svelte index fa7bd86b3..374687b7f 100644 --- a/src/base/vesting/Index.svelte +++ b/src/base/vesting/Index.svelte @@ -1,52 +1,78 @@ -{#if state === State.Success && newOwner} +{#if state === "success" && newOwner}
✅
@@ -96,7 +116,7 @@
-{:else if state === State.Proposed && org} +{:else if state === "proposed" && org}
🪴
@@ -118,63 +138,80 @@
-{:else} - +{:else if state === "failed"} +
🔑
Transfer ownership
- {#if state === State.Signing} +
+ {errorMessage} +
+
+ +
+ +
+ +{:else} + +
+ 🔑 +
Transfer ownership
+
+ +
+ {#if state === "signing"} Please confirm the transaction in your wallet. - {:else if state === State.Pending} + {:else if state === "pending"} Waiting for transaction to be processed… - {:else if state === State.Proposing && org} + {:else if state === "proposing" && org} Proposal is being submitted to the safe {formatAddress(org.owner)} , please sign the transaction in your wallet. - {:else if state === State.Idle} + {:else if state === "idle"} Transfer the ownership of Org {formatAddress(org.address)} to a new address. - {:else if state === State.Failed} -
- {error} -
{/if}
- {#if state === State.Idle} -
- + {#if state === "idle"} +
+
+ +
- {:else if state === State.Pending || state === State.Proposing || state === State.Signing} + {:else if state === "pending" || state === "proposing" || state === "signing"} - {:else if state === State.Failed} - {/if}
- {#if state === State.Signing} + {#if state === "signing"} - {:else if state === State.Pending} + {:else if state === "pending"} - {:else if state === State.Failed} - {:else} - diff --git a/src/ens/SetName.svelte b/src/ens/SetName.svelte index 18f27b506..09cd41fe8 100644 --- a/src/ens/SetName.svelte +++ b/src/ens/SetName.svelte @@ -6,12 +6,12 @@ import { formatAddress, isAddressEqual } from "@app/utils"; import { Org } from "@app/base/orgs/Org"; import type { User } from "@app/base/users/User"; - import Loading from "@app/Loading.svelte"; - import Error from "@app/Error.svelte"; + import ErrorModal from "@app/Error.svelte"; import Address from "@app/Address.svelte"; import * as utils from "@app/utils"; import Button from "@app/Button.svelte"; import TextInput from "@app/TextInput.svelte"; + import Loading from "@app/Loading.svelte"; const dispatch = createEventDispatcher(); @@ -44,6 +44,9 @@ let error: string | null = null; const onSubmit = async () => { + if (!valid) { + return; + } state = State.Checking; const domain = `${name}.${config.registrar.domain}`; @@ -62,15 +65,21 @@ await tx.wait(); state = State.Success; } - } catch (e: any) { + } catch (e) { console.error(e); state = State.Failed; - error = e.message; + if (e instanceof Error) { + error = e.message; + } else { + error = "Unknown error. Check dev console for details."; + } } } else { state = State.Mismatch; } }; + + $: valid = name !== "" && state === State.Idle;