Skip to content

Commit b52cf78

Browse files
vdappdev2vdappdev2
committed
Add export identity warning modal for control token education
1 parent c0fee88 commit b52cf78

3 files changed

Lines changed: 143 additions & 6 deletions

File tree

‎src/lib/components/ExportIdentityWarningModal.svelte‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script lang="ts">
2+
import { Modal } from './cards';
3+
4+
// Props
5+
interface Props {
6+
isOpen: boolean;
7+
onProceed: () => void;
8+
onCancel: () => void;
9+
}
10+
11+
let { isOpen = false, onProceed, onCancel }: Props = $props();
12+
13+
// Checkbox state
14+
let understood = $state(false);
15+
16+
// Reset checkbox when modal opens/closes
17+
$effect(() => {
18+
if (isOpen) {
19+
understood = false;
20+
}
21+
});
22+
</script>
23+
24+
<Modal
25+
isOpen={isOpen}
26+
onclose={onCancel}
27+
title="🚥 Identity Export - Important Information"
28+
>
29+
<div class="space-y-4">
30+
<!-- Educational content -->
31+
<div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
32+
<h3 class="text-sm font-semibold text-yellow-900 dark:text-yellow-200 mb-3">
33+
Understanding Control Tokens and Identity Exports
34+
</h3>
35+
36+
<ul class="space-y-3 text-sm text-yellow-800 dark:text-yellow-300">
37+
<li class="flex items-start">
38+
<span class="mr-2 mt-0.5">🌐</span>
39+
<span>
40+
<strong>One control token gets defined:</strong> An ID control token can only be defined on the chain where the identity was originally registered. There will only be one control token that works across all chains and all instances of an exported ID.
41+
</span>
42+
</li>
43+
44+
<li class="flex items-start">
45+
<span class="mr-2 mt-0.5">⌚</span>
46+
<span>
47+
<strong>The order matters:</strong> Once an identity is exported without a control token, you cannot retroactively add token control to it. You can still define a control token even if you've already exported the ID to other chains, but any previously exported IDs won't be controlled by it.
48+
</span>
49+
</li>
50+
51+
<li class="flex items-start">
52+
<span class="mr-2 mt-0.5">🎫</span>
53+
<span>
54+
<strong>A difference in flags:</strong> A flag is set in an ID when it gets a control token definition. Only afterward can the ID be exported with that flag and be controllable by the token.
55+
</span>
56+
</li>
57+
</ul>
58+
</div>
59+
60+
<!-- Understanding checkbox -->
61+
<label class="flex items-start space-x-3 cursor-pointer p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
62+
<input
63+
type="checkbox"
64+
bind:checked={understood}
65+
class="mt-1 w-4 h-4 text-pink-600 border-gray-300 dark:border-gray-600 rounded focus:ring-pink-600"
66+
/>
67+
<span class="text-sm text-gray-700 dark:text-gray-300 font-medium">
68+
I understand how control tokens work with identity exports
69+
</span>
70+
</label>
71+
72+
<!-- Action buttons -->
73+
<div class="flex justify-end space-x-3 pt-2">
74+
<button
75+
type="button"
76+
onclick={onCancel}
77+
class="px-4 py-2 text-verusidx-mountain-grey dark:text-verusidx-mountain-mist hover:text-verusidx-stone-dark dark:hover:text-white transition-colors"
78+
>
79+
Cancel
80+
</button>
81+
<button
82+
type="button"
83+
onclick={onProceed}
84+
disabled={!understood}
85+
class="px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
86+
>
87+
Proceed
88+
</button>
89+
</div>
90+
</div>
91+
</Modal>

‎src/lib/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export { default as CurrencyListCard } from './CurrencyListCard.svelte';
1313
export { default as CurrencyCreationModal } from './CurrencyCreationModal.svelte';
1414
export { default as CurrencyModal } from './CurrencyModal.svelte';
1515
export { default as DefiOperationModal } from './DefiOperationModal.svelte';
16+
export { default as ExportIdentityWarningModal } from './ExportIdentityWarningModal.svelte';
1617
export { default as OnboardingConversionModal } from './OnboardingConversionModal.svelte';
1718
export { default as EstimateConversionModal } from './EstimateConversionModal.svelte';
1819
export { default as OfferTypeSelector } from './OfferTypeSelector.svelte';

‎src/routes/defi/+page.svelte‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { goto } from "$app/navigation";
55
import { page } from "$app/stores";
66
import { BlockHeightHeader, DefiOperationModal, OperationCard } from "$lib/components";
7+
import ExportIdentityWarningModal from "$lib/components/ExportIdentityWarningModal.svelte";
78
89
type OperationType =
910
| 'send-transparent'
@@ -121,6 +122,18 @@
121122
// State for modal management
122123
let isModalOpen = $state(false);
123124
let currentOperation = $state<OperationType | null>(null);
125+
let isExportWarningModalOpen = $state(false);
126+
127+
// Check if user has seen the export identity warning this session
128+
const EXPORT_IDENTITY_WARNING_KEY = 'exportIdentityWarningShown';
129+
let hasSeenExportIdentityWarning = $state(false);
130+
131+
// Load from sessionStorage on mount
132+
$effect(() => {
133+
if (typeof window !== 'undefined') {
134+
hasSeenExportIdentityWarning = sessionStorage.getItem(EXPORT_IDENTITY_WARNING_KEY) === 'true';
135+
}
136+
});
124137
125138
// State for operations tracking
126139
let operations = $state<any[]>([]);
@@ -139,9 +152,18 @@
139152
}
140153
141154
function openModal(operationId: string) {
142-
currentOperation = operationId as OperationType;
143-
isModalOpen = true;
144-
console.log("Opening modal for:", operationId);
155+
// Check if this is export-identity and if user has seen warning
156+
if (operationId === 'export-identity' && !hasSeenExportIdentityWarning) {
157+
// Show warning modal first
158+
currentOperation = operationId as OperationType;
159+
isExportWarningModalOpen = true;
160+
console.log("Opening export identity warning modal");
161+
} else {
162+
// Directly open operation modal
163+
currentOperation = operationId as OperationType;
164+
isModalOpen = true;
165+
console.log("Opening modal for:", operationId);
166+
}
145167
}
146168
147169
function closeModal() {
@@ -151,6 +173,22 @@
151173
loadOperations();
152174
}
153175
176+
function handleExportWarningProceed() {
177+
// Mark as seen for this session
178+
if (typeof window !== 'undefined') {
179+
sessionStorage.setItem(EXPORT_IDENTITY_WARNING_KEY, 'true');
180+
hasSeenExportIdentityWarning = true;
181+
}
182+
// Close warning modal and open operation modal
183+
isExportWarningModalOpen = false;
184+
isModalOpen = true;
185+
}
186+
187+
function handleExportWarningCancel() {
188+
isExportWarningModalOpen = false;
189+
currentOperation = null;
190+
}
191+
154192
// Load operations when component mounts
155193
$effect(() => {
156194
loadOperations();
@@ -242,9 +280,16 @@
242280
</div>
243281
</div>
244282

283+
<!-- Export Identity Warning Modal -->
284+
<ExportIdentityWarningModal
285+
isOpen={isExportWarningModalOpen}
286+
onProceed={handleExportWarningProceed}
287+
onCancel={handleExportWarningCancel}
288+
/>
289+
245290
<!-- DeFi Operation Modal -->
246-
<DefiOperationModal
247-
isOpen={isModalOpen}
291+
<DefiOperationModal
292+
isOpen={isModalOpen}
248293
operationType={currentOperation}
249-
onClose={closeModal}
294+
onClose={closeModal}
250295
/>

0 commit comments

Comments
 (0)