Skip to content

Commit c0e8c87

Browse files
vdappdev2vdappdev2
committed
Add identity creation enhancements and toast notifications
- Add toast notifications to ID control token and advanced currency forms - Add manual primary address input option for identity modals - Add identity creation choice modal for workflow selection - Add registration modal for existing name commitments with JSON validation - Improve UX with step labels and validation feedback
1 parent bf6098f commit c0e8c87

8 files changed

Lines changed: 973 additions & 87 deletions

‎src/lib/components/IdentityCreationChoiceModal.svelte‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script lang="ts">
2+
import { Modal } from './cards';
3+
4+
interface Props {
5+
isOpen: boolean;
6+
onClose: () => void;
7+
onChooseNew: () => void;
8+
onChooseExisting: () => void;
9+
}
10+
11+
let { isOpen = false, onClose, onChooseNew, onChooseExisting }: Props = $props();
12+
</script>
13+
14+
<Modal {isOpen} onclose={onClose} title="Create Identity" size="md">
15+
<div class="p-6">
16+
<p class="text-verusidx-stone-dark dark:text-verusidx-mountain-mist mb-6">
17+
Choose how you want to proceed with identity creation:
18+
</p>
19+
20+
<div class="space-y-4">
21+
<!-- Option 1: Start fresh -->
22+
<button
23+
onclick={onChooseNew}
24+
class="w-full p-6 border-2 border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark hover:border-verusidx-turquoise-deep dark:hover:border-verusidx-turquoise-bright hover:bg-verusidx-sky-soft dark:hover:bg-verusidx-stone-medium transition-all text-left"
25+
>
26+
<div class="flex items-start space-x-4">
27+
<span class="text-3xl">📝</span>
28+
<div>
29+
<h3 class="text-lg font-semibold text-verusidx-stone-dark dark:text-white mb-1">
30+
I don't have a name commitment yet
31+
</h3>
32+
<p class="text-sm text-verusidx-mountain-grey dark:text-verusidx-mountain-mist">
33+
Start the full identity creation process from name reservation through registration
34+
</p>
35+
</div>
36+
</div>
37+
</button>
38+
39+
<!-- Option 2: Use existing commitment -->
40+
<button
41+
onclick={onChooseExisting}
42+
class="w-full p-6 border-2 border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark hover:border-verusidx-turquoise-deep dark:hover:border-verusidx-turquoise-bright hover:bg-verusidx-sky-soft dark:hover:bg-verusidx-stone-medium transition-all text-left"
43+
>
44+
<div class="flex items-start space-x-4">
45+
<span class="text-3xl">📋</span>
46+
<div>
47+
<h3 class="text-lg font-semibold text-verusidx-stone-dark dark:text-white mb-1">
48+
I have a name commitment already
49+
</h3>
50+
<p class="text-sm text-verusidx-mountain-grey dark:text-verusidx-mountain-mist">
51+
Resume registration with an existing name commitment JSON
52+
</p>
53+
</div>
54+
</div>
55+
</button>
56+
</div>
57+
58+
<!-- Cancel button -->
59+
<div class="mt-6 pt-6 border-t border-verusidx-mountain-mist dark:border-verusidx-stone-medium">
60+
<button
61+
onclick={onClose}
62+
class="w-full px-6 py-3 border border-verusidx-mountain-mist dark:border-verusidx-stone-medium text-verusidx-stone-dark dark:text-white rounded-lg hover:bg-verusidx-mountain-mist dark:hover:bg-verusidx-stone-medium transition-colors"
63+
>
64+
Cancel
65+
</button>
66+
</div>
67+
</div>
68+
</Modal>

‎src/lib/components/IdentityCreationModal.svelte‎

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
let error = $state<string | null>(null);
5656
let addressLoadingError = $state<string | null>(null);
5757
let blockCheckInterval = $state<NodeJS.Timeout | null>(null);
58+
let showManualPrimaryInput = $state(false);
5859
5960
// Connection state for chain parameter
6061
let connectionState = $state<any>();
@@ -126,6 +127,8 @@
126127
clearInterval(blockCheckInterval);
127128
blockCheckInterval = null;
128129
}
130+
// Reset manual input state
131+
showManualPrimaryInput = false;
129132
}
130133
131134
async function loadControlAddresses() {
@@ -338,6 +341,22 @@
338341
}
339342
}
340343
344+
function handlePrimaryAddressDropdownChange(event: Event) {
345+
const target = event.target as HTMLSelectElement;
346+
if (target.value === '__MANUAL__') {
347+
showManualPrimaryInput = true;
348+
formData.primaryAddresses[0] = '';
349+
} else {
350+
showManualPrimaryInput = false;
351+
formData.primaryAddresses[0] = target.value;
352+
}
353+
}
354+
355+
function switchToDropdown() {
356+
showManualPrimaryInput = false;
357+
formData.primaryAddresses[0] = '';
358+
}
359+
341360
async function handleNameReservation(event: SubmitEvent) {
342361
event.preventDefault();
343362
@@ -958,28 +977,49 @@
958977
{#each formData.primaryAddresses as _, index}
959978
<div class="flex space-x-2 mb-2">
960979
{#if index === 0}
961-
<!-- First address: dropdown from loaded addresses -->
962-
<select
963-
bind:value={formData.primaryAddresses[index]}
964-
required
965-
disabled={isLoadingControlAddresses}
966-
class="flex-1 p-3 border border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark text-verusidx-stone-dark dark:text-white disabled:opacity-50"
967-
>
968-
<option value="">
969-
{#if isLoadingControlAddresses}
970-
Loading addresses...
971-
{:else if hasLoadedControlAddresses && controlAddresses.length === 0}
972-
No addresses available
973-
{:else if !hasLoadedControlAddresses}
974-
Failed to load addresses
975-
{:else}
976-
Select address...
977-
{/if}
978-
</option>
979-
{#each controlAddresses as addr}
980-
<option value={addr}>{addr}{addr.startsWith('z') ? ' (Private)' : ' (Transparent)'}</option>
981-
{/each}
982-
</select>
980+
<!-- First address: dropdown or manual input -->
981+
{#if !showManualPrimaryInput}
982+
<select
983+
onchange={handlePrimaryAddressDropdownChange}
984+
value={formData.primaryAddresses[index]}
985+
required
986+
disabled={isLoadingControlAddresses}
987+
class="flex-1 p-3 border border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark text-verusidx-stone-dark dark:text-white disabled:opacity-50"
988+
>
989+
<option value="">
990+
{#if isLoadingControlAddresses}
991+
Loading addresses...
992+
{:else if hasLoadedControlAddresses && controlAddresses.length === 0}
993+
No addresses available
994+
{:else if !hasLoadedControlAddresses}
995+
Failed to load addresses
996+
{:else}
997+
Select address...
998+
{/if}
999+
</option>
1000+
<option value="__MANUAL__">Input address manually</option>
1001+
{#each controlAddresses as addr}
1002+
<option value={addr}>{addr}{addr.startsWith('z') ? ' (Private)' : ' (Transparent)'}</option>
1003+
{/each}
1004+
</select>
1005+
{:else}
1006+
<div class="flex-1">
1007+
<input
1008+
type="text"
1009+
bind:value={formData.primaryAddresses[index]}
1010+
required
1011+
placeholder="Enter primary address (R-address)"
1012+
class="w-full p-3 border border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark text-verusidx-stone-dark dark:text-white"
1013+
/>
1014+
<button
1015+
type="button"
1016+
onclick={switchToDropdown}
1017+
class="mt-1 text-xs text-verusidx-turquoise-deep hover:text-verusidx-turquoise-bright"
1018+
>
1019+
← Use address dropdown
1020+
</button>
1021+
</div>
1022+
{/if}
9831023
{:else}
9841024
<!-- Additional addresses: manual text input -->
9851025
<input
@@ -1093,20 +1133,16 @@
10931133
<label class="block text-sm font-medium text-verusidx-stone-dark dark:text-white mb-2">
10941134
Source of Funds (Optional)
10951135
</label>
1096-
<select
1136+
<select
10971137
bind:value={formData.sourceOfFunds}
10981138
disabled={isLoadingSourceAddresses}
10991139
class="w-full p-3 border border-verusidx-mountain-mist dark:border-verusidx-stone-medium rounded-lg bg-white dark:bg-verusidx-stone-dark text-verusidx-stone-dark dark:text-white disabled:opacity-50"
11001140
>
11011141
<option value="">
11021142
{#if isLoadingSourceAddresses}
11031143
Loading source addresses...
1104-
{:else if hasLoadedSourceAddresses && sourceAddresses.length === 0}
1105-
Default (transparent wildcard "*") - No addresses found
1106-
{:else if !hasLoadedSourceAddresses}
1107-
Default (transparent wildcard "*") - Failed to load
11081144
{:else}
1109-
Default (transparent wildcard "*")
1145+
Select address
11101146
{/if}
11111147
</option>
11121148
{#each sourceAddresses as address}
@@ -1115,9 +1151,6 @@
11151151
</option>
11161152
{/each}
11171153
</select>
1118-
<p class="text-xs text-verusidx-mountain-grey dark:text-verusidx-mountain-mist mt-1">
1119-
Address to source funds for registration fees. Leave empty to use transparent wildcard "*"
1120-
</p>
11211154
</div>
11221155

11231156

0 commit comments

Comments
 (0)