feat: Add key backup reminder. Refactor Toast component to handle dark mode better

src/core/hooks/useCookie.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import Cookies, { type CookieAttributes } from "js-cookie";
+
+type Cookie<T> = [
+  T | undefined,
+  (value: T, options?: CookieAttributes) => void,
+  () => void,
+];
+
+const useCookie = <T>(
+  cookieName: string,
+  initialValue?: T,
+): Cookie<T> => {
+  const [cookieValue, setCookieValue] = React.useState<T | undefined>(() => {
+    const cookie = Cookies.get(cookieName);
+    return cookie ? (JSON.parse(cookie) as T) : initialValue;
+  });
+
+  const setCookie = React.useCallback(
+    (value: T, options?: CookieAttributes) => {
+      Cookies.set(cookieName, JSON.stringify(value), options);
+      setCookieValue(value);
+    },
+    [cookieName],
+  );
+
+  const removeCookie = React.useCallback(() => {
+    Cookies.remove(cookieName);
+    setCookieValue(undefined);
+  }, [cookieName]);
+
+  return [cookieValue, setCookie, removeCookie];
+};
+
+export default useCookie;

src/core/hooks/useKeyBackupReminder.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useCallback } from 'react';
+import { useToast } from './useToast';
+import useCookie from './useCookie';
+import type { CookieAttributes } from 'js-cookie';
+import { Button } from '@app/components/UI/Button';
+
+interface UseBackupReminderOptions {
+  suppressDays?: number;
+  message?: string;
+  onAccept?: () => void | Promise<void>;
+  cookieName?: string;
+  cookieOptions?: CookieAttributes;
+}
+
+interface ReminderState {
+  suppressed: boolean;
+  lastShown: string;
+}
+
+export function useBackupReminder({
+  suppressDays = 365,
+  message = "It's time to back up your key data. Would you like to do this now?",
+  onAccept = () => { },
+  cookieName = "backup_reminder_state",
+  cookieOptions = {},
+}: UseBackupReminderOptions = {}) {
+  const { toast } = useToast();
+
+  const [reminderState, setReminderState, resetReminderState] = useCookie<ReminderState>(cookieName);
+
+  const suppressReminder = useCallback(() => {
+    const expiryDate = new Date();
+    expiryDate.setDate(expiryDate.getDate() + suppressDays);
+
+    setReminderState(
+      {
+        suppressed: true,
+        lastShown: new Date().toISOString(),
+      },
+      {
+        ...cookieOptions,
+        expires: expiryDate,
+      }
+    );
+
+  }, [setReminderState, suppressDays, cookieOptions]);
+
+  useEffect(() => {
+    if (!reminderState) {
+      const { dismiss: dimissToast } = toast({
+        title: "Backup Reminder",
+        description: message,
+        action: (
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant={"default"}
+              onClick={async () => {
+                await onAccept();
+                dimissToast()
+                suppressReminder();
+              }}
+            >
+              Back up now
+            </Button>
+            <Button
+              type="button"
+              variant={"outline"}
+              onClick={() => {
+                dimissToast();
+                suppressReminder();
+              }}
+            >
+              Remind me later
+            </Button>
+          </div>
+        ),
+      });
+    }
+  }, [reminderState]);
+
+  return {
+    resetReminder: resetReminderState
+  };
+}