f38ec1daff
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
91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
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;
|
|
}
|