feat: implement seed phrase backup reminder modal
Add comprehensive seed phrase backup reminder system to encourage users to secure their identity after creating content. Core Features: - Modal dialog with "Backup Identifier Seed" and "Remind me Later" options - 24-hour localStorage cooldown to prevent notification fatigue - 1-second delay after success messages for better UX flow - Focuses on claim creation actions, not confirmations New Files: - src/utils/seedPhraseReminder.ts: Core utility for reminder logic - doc/seed-phrase-reminder-implementation.md: Comprehensive documentation Trigger Points Added: - Profile saving (AccountViewView) - Claim creation (ClaimAddRawView, GiftedDialog, GiftedDetailsView) - Offer creation (OfferDialog) - QR code view exit (ContactQRScanFullView, ContactQRScanShowView) Technical Implementation: - Uses existing notification group modal system from App.vue - Integrates with PlatformServiceMixin for account settings access - Graceful error handling with logging fallbacks - Non-blocking implementation that doesn't affect main functionality - Modal stays open indefinitely (timeout: -1) until user interaction User Experience: - Non-intrusive reminders that respect user preferences - Clear call-to-action for security-conscious users - Seamless integration with existing workflows - Maintains focus on content creation rather than confirmation actions
This commit is contained in:
90
src/utils/seedPhraseReminder.ts
Normal file
90
src/utils/seedPhraseReminder.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
import { NotificationIface } from "@/constants/app";
|
||||
|
||||
const SEED_REMINDER_KEY = "seedPhraseReminderLastShown";
|
||||
const REMINDER_COOLDOWN_MS = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
|
||||
|
||||
/**
|
||||
* Checks if the seed phrase backup reminder should be shown
|
||||
* @param hasBackedUpSeed - Whether the user has backed up their seed phrase
|
||||
* @returns true if the reminder should be shown, false otherwise
|
||||
*/
|
||||
export function shouldShowSeedReminder(hasBackedUpSeed: boolean): boolean {
|
||||
// Don't show if user has already backed up
|
||||
if (hasBackedUpSeed) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check localStorage for last shown time
|
||||
const lastShown = localStorage.getItem(SEED_REMINDER_KEY);
|
||||
if (!lastShown) {
|
||||
return true; // First time, show the reminder
|
||||
}
|
||||
|
||||
try {
|
||||
const lastShownTime = parseInt(lastShown, 10);
|
||||
const now = Date.now();
|
||||
const timeSinceLastShown = now - lastShownTime;
|
||||
|
||||
// Show if more than 24 hours have passed
|
||||
return timeSinceLastShown >= REMINDER_COOLDOWN_MS;
|
||||
} catch (error) {
|
||||
// If there's an error parsing the timestamp, show the reminder
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Marks the seed phrase reminder as shown by updating localStorage
|
||||
*/
|
||||
export function markSeedReminderShown(): void {
|
||||
localStorage.setItem(SEED_REMINDER_KEY, Date.now().toString());
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the seed phrase backup reminder notification
|
||||
* @returns NotificationIface configuration for the reminder modal
|
||||
*/
|
||||
export function createSeedReminderNotification(): NotificationIface {
|
||||
return {
|
||||
group: "modal",
|
||||
type: "confirm",
|
||||
title: "Backup Your Identifier Seed?",
|
||||
text: "It looks like you haven't backed up your identifier seed yet. It's important to back it up as soon as possible to secure your identity.",
|
||||
yesText: "Backup Identifier Seed",
|
||||
noText: "Remind me Later",
|
||||
onYes: async () => {
|
||||
// Navigate to seed backup page
|
||||
window.location.href = "/seed-backup";
|
||||
},
|
||||
onNo: async () => {
|
||||
// Mark as shown so it won't appear again for 24 hours
|
||||
markSeedReminderShown();
|
||||
},
|
||||
onCancel: async () => {
|
||||
// Mark as shown so it won't appear again for 24 hours
|
||||
markSeedReminderShown();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the seed phrase backup reminder if conditions are met
|
||||
* @param hasBackedUpSeed - Whether the user has backed up their seed phrase
|
||||
* @param notifyFunction - Function to show notifications
|
||||
* @returns true if the reminder was shown, false otherwise
|
||||
*/
|
||||
export function showSeedPhraseReminder(
|
||||
hasBackedUpSeed: boolean,
|
||||
notifyFunction: (notification: NotificationIface, timeout?: number) => void,
|
||||
): boolean {
|
||||
if (shouldShowSeedReminder(hasBackedUpSeed)) {
|
||||
const notification = createSeedReminderNotification();
|
||||
// Add 1-second delay before showing the modal to allow success message to be visible
|
||||
setTimeout(() => {
|
||||
// Pass -1 as timeout to ensure modal stays open until user interaction
|
||||
notifyFunction(notification, -1);
|
||||
}, 1000);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Reference in New Issue
Block a user