feat: safe sync appdata

2024-04-15 13:23:26 +01:00 · 2024-04-15 13:23:26 +01:00 · edf64e4125
commit edf64e4125
parent a089ae2ec6
41 changed files with 386 additions and 211 deletions
--- a/packages/app/src/Components/Embed/MixCloudEmbed.tsx
+++ b/packages/app/src/Components/Embed/MixCloudEmbed.tsx
@ -4,14 +4,12 @@ import { MixCloudRegex } from "@/Utils/Const";
 const MixCloudEmbed = ({ link }: { link: string }) => {
  const feedPath = (MixCloudRegex.test(link) && RegExp.$1) + "%2F" + (MixCloudRegex.test(link) && RegExp.$2);

-  const theme = useLogin(s => s.appData.item.preferences.theme);
+  const theme = useLogin(s => s.appData.json.preferences.theme);
  const lightParams = theme === "light" ? "light=1" : "light=0";
  return (
    <>
      <br />
      <iframe
-        // eslint-disable-next-line react/no-unknown-property
-        credentialless=""
        title="SoundCloud player"
        width="100%"
        height="120"
--- a/packages/app/src/Components/Embed/PubkeyList.tsx
+++ b/packages/app/src/Components/Embed/PubkeyList.tsx
@ -22,7 +22,7 @@ export default function PubkeyList({ ev, className }: { ev: NostrEvent; classNam
    for (const pk of ids) {
      try {
        const profile = await UserCache.get(pk);
-        const amtSend = login.appData.item.preferences.defaultZapAmount;
+        const amtSend = login.appData.json.preferences.defaultZapAmount;
        const lnurl = profile?.lud16 || profile?.lud06;
        if (lnurl) {
          const svc = new LNURL(lnurl);
@ -74,7 +74,7 @@ export default function PubkeyList({ ev, className }: { ev: NostrEvent; classNam
              defaultMessage="Zap all {n} sats"
              id="IVbtTS"
              values={{
-                n: <FormattedNumber value={login.appData.item.preferences.defaultZapAmount * ids.length} />,
+                n: <FormattedNumber value={login.appData.json.preferences.defaultZapAmount * ids.length} />,
              }}
            />
          </AsyncButton>
--- a/packages/app/src/Components/Event/Create/NoteCreator.tsx
+++ b/packages/app/src/Components/Event/Create/NoteCreator.tsx
@ -56,7 +56,7 @@ const quoteNoteOptions = {
 export function NoteCreator() {
  const { formatMessage } = useIntl();
  const uploader = useFileUpload();
-  const login = useLogin(s => ({ relays: s.relays, publicKey: s.publicKey, pow: s.appData.item.preferences.pow }));
+  const login = useLogin(s => ({ relays: s.relays, publicKey: s.publicKey, pow: s.appData.json.preferences.pow }));
  const { system, publisher: pub } = useEventPublisher();
  const publisher = login.pow ? pub?.pow(login.pow, GetPowWorker()) : pub;
  const note = useNoteCreator();
--- a/packages/app/src/Components/Event/HiddenNote.tsx
+++ b/packages/app/src/Components/Event/HiddenNote.tsx
@ -4,7 +4,7 @@ import { FormattedMessage } from "react-intl";
 import useLogin from "@/Hooks/useLogin";

 const HiddenNote = ({ children }: { children: React.ReactNode }) => {
-  const hideMutedNotes = useLogin(s => s.appData.item.preferences.hideMutedNotes);
+  const hideMutedNotes = useLogin(s => s.appData.json.preferences.hideMutedNotes);
  const [show, setShow] = useState(false);
  if (hideMutedNotes) return;

--- a/packages/app/src/Components/Event/Note/NoteContextMenu.tsx
+++ b/packages/app/src/Components/Event/Note/NoteContextMenu.tsx
@ -78,7 +78,7 @@ export function NoteContextMenu({ ev, ...props }: NoteContextMenuProps) {

  useEffect(() => {
    const sub = getCurrentSubscription(login.subscriptions);
-    if (sub?.type === SubscriptionType.Premium && (login.appData.item.preferences.autoTranslate ?? true)) {
+    if (sub?.type === SubscriptionType.Premium && (login.appData.json.preferences.autoTranslate ?? true)) {
      translate();
    }
  }, []);
--- a/packages/app/src/Components/Event/Note/NoteFooter/FooterZapButton.tsx
+++ b/packages/app/src/Components/Event/Note/NoteFooter/FooterZapButton.tsx
@ -30,7 +30,7 @@ export const FooterZapButton = ({ ev, zaps, onClickZappers }: ZapIconProps) => {
  } = useLogin(s => ({
    publicKey: s.publicKey,
    readonly: s.readonly,
-    preferences: s.appData.item.preferences,
+    preferences: s.appData.json.preferences,
  }));
  const walletState = useWallet();
  const wallet = walletState.wallet;
--- a/packages/app/src/Components/Event/Note/NoteFooter/NoteFooter.tsx
+++ b/packages/app/src/Components/Event/Note/NoteFooter/NoteFooter.tsx
@ -26,7 +26,7 @@ export default function NoteFooter(props: NoteFooterProps) {
  const { positive } = reactions;

  const { preferences: prefs, readonly } = useLogin(s => ({
-    preferences: s.appData.item.preferences,
+    preferences: s.appData.json.preferences,
    publicKey: s.publicKey,
    readonly: s.readonly,
  }));
--- a/packages/app/src/Components/Event/Note/NoteFooter/RepostButton.tsx
+++ b/packages/app/src/Components/Event/Note/NoteFooter/RepostButton.tsx
@ -16,7 +16,7 @@ export const RepostButton = ({ ev, reposts }: { ev: TaggedNostrEvent; reposts: T
  const navigate = useNavigate();
  const { publisher, system } = useEventPublisher();
  const { publicKey, preferences: prefs } = useLogin(s => ({
-    preferences: s.appData.item.preferences,
+    preferences: s.appData.json.preferences,
    publicKey: s.publicKey,
  }));
  const note = useNoteCreator(n => ({ show: n.show, replyTo: n.replyTo, update: n.update, quote: n.quote }));
--- a/packages/app/src/Components/Event/Note/NoteText.tsx
+++ b/packages/app/src/Components/Event/Note/NoteText.tsx
@ -53,7 +53,7 @@ export const NoteText = memo(function InnerContent(
    </>
  );

-  if (!appData.item.showContentWarningPosts) {
+  if (!appData.json.showContentWarningPosts) {
    const contentWarning = ev.tags.find(a => a[0] === "content-warning");
    if (contentWarning) {
      return (
--- a/packages/app/src/Components/Event/Poll.tsx
+++ b/packages/app/src/Components/Event/Poll.tsx
@ -27,7 +27,7 @@ export default function Poll(props: PollProps) {
    preferences: prefs,
    publicKey: myPubKey,
    relays,
-  } = useLogin(s => ({ preferences: s.appData.item.preferences, publicKey: s.publicKey, relays: s.relays }));
+  } = useLogin(s => ({ preferences: s.appData.json.preferences, publicKey: s.publicKey, relays: s.relays }));
  const pollerProfile = useUserProfile(props.ev.pubkey);
  const [tallyBy, setTallyBy] = useState<PollTally>("pubkeys");
  const [error, setError] = useState("");
--- a/packages/app/src/Components/Event/RevealMedia.tsx
+++ b/packages/app/src/Components/Event/RevealMedia.tsx
@ -17,7 +17,7 @@ interface RevealMediaProps {

 export default function RevealMedia(props: RevealMediaProps) {
  const { preferences, follows, publicKey } = useLogin(s => ({
-    preferences: s.appData.item.preferences,
+    preferences: s.appData.json.preferences,
    follows: s.follows.item,
    publicKey: s.publicKey,
  }));
--- a/packages/app/src/Components/Feed/RootTabs.tsx
+++ b/packages/app/src/Components/Feed/RootTabs.tsx
@ -19,7 +19,7 @@ export function RootTabs({ base = "/" }: { base: string }) {
  } = useLogin(s => ({
    publicKey: s.publicKey,
    tags: s.tags,
-    preferences: s.appData.item.preferences,
+    preferences: s.appData.json.preferences,
  }));

  const menuItems = useMemo(() => rootTabItems(base, pubKey, tags), [base, pubKey, tags]);
--- a/packages/app/src/Components/IntlProvider/useLocale.tsx
+++ b/packages/app/src/Components/IntlProvider/useLocale.tsx
@ -5,7 +5,7 @@ import { LangOverride } from "@/Components/IntlProvider/langStore";
 import useLogin from "@/Hooks/useLogin";

 export function useLocale() {
-  const { language } = useLogin(s => ({ language: s.appData.item.preferences.language }));
+  const { language } = useLogin(s => ({ language: s.appData.json.preferences.language }));
  const loggedOutLang = useSyncExternalStore(
    c => LangOverride.hook(c),
    () => LangOverride.snapshot(),
--- a/packages/app/src/Components/PinPrompt/PinPrompt.tsx
+++ b/packages/app/src/Components/PinPrompt/PinPrompt.tsx
@ -104,8 +104,8 @@ export function LoginUnlock() {
    const newPin = await PinEncrypted.create(k, pin);

    const pub = EventPublisher.privateKey(k);
-    if (login.appData.item.preferences.pow) {
-      pub.pow(login.appData.item.preferences.pow, GetPowWorker());
+    if (login.appData.json.preferences.pow) {
+      pub.pow(login.appData.json.preferences.pow, GetPowWorker());
    }
    LoginStore.setPublisher(login.id, pub);
    LoginStore.updateSession({
@ -121,8 +121,8 @@ export function LoginUnlock() {
    await key.unlock(pin);
    const pub = createPublisher(login);
    if (pub) {
-      if (login.appData.item.preferences.pow) {
-        pub.pow(login.appData.item.preferences.pow, GetPowWorker());
+      if (login.appData.json.preferences.pow) {
+        pub.pow(login.appData.json.preferences.pow, GetPowWorker());
      }
      LoginStore.setPublisher(login.id, pub);
      LoginStore.updateSession({
--- a/packages/app/src/Components/ZapModal/ZapModalInput.tsx
+++ b/packages/app/src/Components/ZapModal/ZapModalInput.tsx
@ -22,7 +22,7 @@ export function ZapModalInput(props: {
  onNextStage: (v: SendSatsInputSelection) => Promise<void>;
 }) {
  const { defaultZapAmount, readonly } = useLogin(s => ({
-    defaultZapAmount: s.appData.item.preferences.defaultZapAmount,
+    defaultZapAmount: s.appData.json.preferences.defaultZapAmount,
    readonly: s.readonly,
  }));
  const { formatMessage } = useIntl();
--- a/packages/app/src/Feed/LoginFeed.ts
+++ b/packages/app/src/Feed/LoginFeed.ts
@ -1,17 +1,15 @@
-import { EventKind, NostrLink, parseRelayTags, RequestBuilder, TaggedNostrEvent } from "@snort/system";
+import { EventKind, NostrLink, NostrPrefix, parseRelayTags, RequestBuilder, TaggedNostrEvent } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
-import { usePrevious } from "@uidotdev/usehooks";
 import { useEffect, useMemo } from "react";

 import { Nip28ChatSystem } from "@/chat/nip28";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import useLogin from "@/Hooks/useLogin";
-import { bech32ToHex, debounce, getNewest, getNewestEventTagsByKey, unwrap } from "@/Utils";
+import { bech32ToHex, getNewest, getNewestEventTagsByKey, unwrap } from "@/Utils";
 import { SnortPubKey } from "@/Utils/Const";
 import {
  addSubscription,
  LoginStore,
-  setAppData,
  setBlocked,
  setBookmarked,
  setFollows,
@ -19,7 +17,6 @@ import {
  setPinned,
  setRelays,
  setTags,
-  SnortAppData,
 } from "@/Utils/Login";
 import { SubscriptionEvent } from "@/Utils/Subscription";
 /**
@ -31,22 +28,15 @@ export default function useLoginFeed() {
  const { publisher, system } = useEventPublisher();

  useEffect(() => {
-    system.checkSigs = login.appData.item.preferences.checkSigs;
-  }, [login]);
+    if (login.appData.json) {
+      system.checkSigs = login.appData.json.preferences.checkSigs;

-  const previous = usePrevious(login.appData.item);
-  // write appdata after 10s of no changes
-  useEffect(() => {
-    if (!previous || JSON.stringify(previous) === JSON.stringify(login.appData.item)) {
-      return;
-    }
-    return debounce(10_000, async () => {
-      if (publisher && login.appData.item) {
-        const ev = await publisher.appData(login.appData.item, "snort");
-        await system.BroadcastEvent(ev);
+      if (publisher) {
+        const link = new NostrLink(NostrPrefix.Address, "snort", EventKind.AppData, pubKey);
+        login.appData.sync(link, publisher.signer, system);
      }
-    });
-  }, [previous]);
+    }
+  }, [login, publisher]);

  const subLogin = useMemo(() => {
    if (!login || !pubKey) return null;
@ -68,7 +58,6 @@ export default function useLoginFeed() {
        EventKind.DirectMessage,
      ]);
    if (CONFIG.features.subscriptions && !login.readonly) {
-      b.withFilter().authors([pubKey]).kinds([EventKind.AppData]).tag("d", ["snort"]);
      b.withFilter()
        .relay("wss://relay.snort.social/")
        .kinds([EventKind.SnortSubscriptions])
@ -113,13 +102,6 @@ export default function useLoginFeed() {
            }
          }),
        ).then(a => addSubscription(login, ...a.filter(a => a !== undefined).map(unwrap)));
-
-        const appData = getNewest(loginFeed.filter(a => a.kind === EventKind.AppData));
-        if (appData) {
-          publisher.decryptGeneric(appData.content, appData.pubkey).then(d => {
-            setAppData(login, JSON.parse(d) as SnortAppData, appData.created_at * 1000);
-          });
-        }
      }
    }
  }, [loginFeed, publisher]);
--- a/packages/app/src/Feed/TimelineFeed.ts
+++ b/packages/app/src/Feed/TimelineFeed.ts
@ -30,7 +30,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
    window: options.window,
    now: options.now ?? unixNow(),
  });
-  const pref = useLogin(s => s.appData.item.preferences);
+  const pref = useLogin(s => s.appData.json.preferences);
  const { isEventMuted } = useModeration();

  const createBuilder = useCallback(() => {
--- a/packages/app/src/Hooks/useImgProxy.ts
+++ b/packages/app/src/Hooks/useImgProxy.ts
@ -11,7 +11,7 @@ export interface ImgProxySettings {
 }

 export default function useImgProxy() {
-  const settings = useLogin(s => s.appData.item.preferences.imgProxyConfig);
+  const settings = useLogin(s => s.appData.json.preferences.imgProxyConfig);

  return {
    proxy: (url: string, resize?: number, sha256?: string) => proxyImg(url, settings, resize, sha256),
--- a/packages/app/src/Hooks/useModeration.tsx
+++ b/packages/app/src/Hooks/useModeration.tsx
@ -58,11 +58,11 @@ export default function useModeration() {
  }

  function isMutedWord(word: string) {
-    return appData.item.mutedWords.includes(word.toLowerCase());
+    return appData.json.mutedWords.includes(word.toLowerCase());
  }

  function isEventMuted(ev: TaggedNostrEvent | NostrEvent) {
-    return isMuted(ev.pubkey) || appData.item.mutedWords.some(w => ev.content.toLowerCase().includes(w));
+    return isMuted(ev.pubkey) || appData.json.mutedWords.some(w => ev.content.toLowerCase().includes(w));
  }

  return {
--- a/packages/app/src/Hooks/usePreferences.ts
+++ b/packages/app/src/Hooks/usePreferences.ts
@ -0,0 +1,16 @@
+import { updatePreferences, UserPreferences } from "@/Utils/Login";
+
+import useEventPublisher from "./useEventPublisher";
+import useLogin from "./useLogin";
+
+export default function usePreferences() {
+  const { id, pref } = useLogin(s => ({ id: s.id, pref: s.appData.json.preferences }));
+  const { system } = useEventPublisher();
+
+  return {
+    preferences: pref,
+    update: async (data: UserPreferences) => {
+      await updatePreferences(id, data, system);
+    },
+  };
+}
--- a/packages/app/src/Hooks/useTheme.tsx
+++ b/packages/app/src/Hooks/useTheme.tsx
@ -3,7 +3,7 @@ import { useEffect } from "react";
 import useLogin from "./useLogin";

 export function useTheme() {
-  const { preferences } = useLogin(s => ({ preferences: s.appData.item.preferences }));
+  const { preferences } = useLogin(s => ({ preferences: s.appData.json.preferences }));

  function setTheme(theme: "light" | "dark") {
    const elm = document.documentElement;
--- a/packages/app/src/Pages/Deck/DeckLayout.tsx
+++ b/packages/app/src/Pages/Deck/DeckLayout.tsx
@ -40,7 +40,7 @@ export function SnortDeckLayout() {
  const login = useLogin(s => ({
    publicKey: s.publicKey,
    subscriptions: s.subscriptions,
-    telemetry: s.appData.item.preferences.telemetry,
+    telemetry: s.appData.json.preferences.telemetry,
  }));
  const navigate = useNavigate();
  const [deckState, setDeckState] = useState<DeckState>({
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@ -27,7 +27,7 @@ export default function Index() {
  const { id, stalker, telemetry } = useLogin(s => ({
    id: s.id,
    stalker: s.stalker ?? false,
-    telemetry: s.appData.item.preferences.telemetry,
+    telemetry: s.appData.json.preferences.telemetry,
  }));

  useTheme();
--- a/packages/app/src/Pages/NetworkGraph/Avatar.tsx
+++ b/packages/app/src/Pages/NetworkGraph/Avatar.tsx
@ -8,6 +8,6 @@ import { LoginStore } from "@/Utils/Login";
 export const avatar = (node: NodeObject<NodeObject<GraphNode>>) => {
  const login = LoginStore.snapshot();
  return node.profile?.picture
-    ? proxyImg(node.profile?.picture, login.appData.item.preferences.imgProxyConfig)
+    ? proxyImg(node.profile?.picture, login.appData.json.preferences.imgProxyConfig)
    : defaultAvatar(node.address);
 };
--- a/packages/app/src/Pages/Profile/ProfileDetails.tsx
+++ b/packages/app/src/Pages/Profile/ProfileDetails.tsx
@ -32,8 +32,8 @@ const ProfileDetails = ({
 }) => {
  const follows = useFollowsFeed(id);
  const { showStatus, showBadges } = useLogin(s => ({
-    showStatus: s.appData.item.preferences.showStatus ?? false,
-    showBadges: s.appData.item.preferences.showBadges ?? false,
+    showStatus: s.appData.json.preferences.showStatus ?? false,
+    showBadges: s.appData.json.preferences.showBadges ?? false,
  }));
  const [showLnQr, setShowLnQr] = useState<boolean>(false);
  const badges = useProfileBadges(showBadges ? id : undefined);
--- a/packages/app/src/Pages/Root/DefaultTab.tsx
+++ b/packages/app/src/Pages/Root/DefaultTab.tsx
@ -3,7 +3,7 @@ import { RootTabRoutes } from "@/Pages/Root/RootTabRoutes";

 export const DefaultTab = () => {
  const { preferences, publicKey } = useLogin(s => ({
-    preferences: s.appData.item.preferences,
+    preferences: s.appData.json.preferences,
    publicKey: s.publicKey,
  }));
  const tab = publicKey ? preferences.defaultRootTab : `trending/notes`;
--- a/packages/app/src/Pages/ZapPool/ZapPoolPageInner.tsx
+++ b/packages/app/src/Pages/ZapPool/ZapPoolPageInner.tsx
@ -66,7 +66,7 @@ export function ZapPoolPageInner() {
          values={{
            number: (
              <b>
-                <FormattedNumber value={login.appData.item.preferences.defaultZapAmount} />
+                <FormattedNumber value={login.appData.json.preferences.defaultZapAmount} />
              </b>
            ),
          }}
@ -79,13 +79,13 @@ export function ZapPoolPageInner() {
          values={{
            nIn: (
              <b>
-                <FormattedNumber value={login.appData.item.preferences.defaultZapAmount} />
+                <FormattedNumber value={login.appData.json.preferences.defaultZapAmount} />
              </b>
            ),
            nOut: (
              <b>
                <FormattedNumber
-                  value={ZapPoolController?.calcAllocation(login.appData.item.preferences.defaultZapAmount) ?? 0}
+                  value={ZapPoolController?.calcAllocation(login.appData.json.preferences.defaultZapAmount) ?? 0}
                />
              </b>
            ),
--- a/packages/app/src/Pages/ZapPool/ZapPoolTarget.tsx
+++ b/packages/app/src/Pages/ZapPool/ZapPoolTarget.tsx
@ -9,7 +9,7 @@ function ZapPoolTargetInner({ target }: { target: ZapPoolRecipient }) {
  const login = useLogin();
  const profile = useUserProfile(target.pubkey);
  const hasAddress = profile?.lud16 || profile?.lud06;
-  const defaultZapMount = Math.ceil(login.appData.item.preferences.defaultZapAmount * (target.split / 100));
+  const defaultZapMount = Math.ceil(login.appData.json.preferences.defaultZapAmount * (target.split / 100));
  return (
    <ProfilePreview
      pubkey={target.pubkey}
--- a/packages/app/src/Pages/onboarding/moderation.tsx
+++ b/packages/app/src/Pages/onboarding/moderation.tsx
@ -1,10 +1,10 @@
-import { unixNowMs } from "@snort/shared";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";

 import AsyncButton from "@/Components/Button/AsyncButton";
 import { ToggleSwitch } from "@/Components/Icons/Toggle";
+import useEventPublisher from "@/Hooks/useEventPublisher";
 import useLogin from "@/Hooks/useLogin";
 import { FixedModeration } from "@/Pages/onboarding/fixedModeration";
 import { appendDedupe } from "@/Utils";
@ -15,6 +15,7 @@ export function Moderation() {
  const [topics, setTopics] = useState<Array<string>>(Object.keys(FixedModeration));
  const [extraTerms, setExtraTerms] = useState("");
  const navigate = useNavigate();
+  const { system } = useEventPublisher();

  return (
    <div className="flex flex-col g24">
@ -81,15 +82,10 @@ export function Moderation() {
                .filter(a => a.length > 1),
            );
          if (words.length > 0) {
-            updateAppData(id, ad => {
-              return {
-                item: {
-                  ...ad,
-                  mutedWords: appendDedupe(ad.mutedWords, words),
-                },
-                timestamp: unixNowMs(),
-              };
-            });
+            updateAppData(id, system, ad => ({
+              ...ad,
+              mutedWords: appendDedupe(ad.mutedWords, words),
+            }));
          }
          navigate("/");
        }}>
--- a/packages/app/src/Pages/settings/Moderation.tsx
+++ b/packages/app/src/Pages/settings/Moderation.tsx
@ -1,7 +1,7 @@
-import { unixNowMs } from "@snort/shared";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";

+import useEventPublisher from "@/Hooks/useEventPublisher";
 import useLogin from "@/Hooks/useLogin";
 import { appendDedupe } from "@/Utils";
 import { SnortAppData, updateAppData } from "@/Utils/Login";
@ -9,36 +9,28 @@ import { SnortAppData, updateAppData } from "@/Utils/Login";
 export default function ModerationSettingsPage() {
  const login = useLogin();
  const [muteWord, setMuteWord] = useState("");
-  const appData = login.appData.item;
+  const appData = login.appData.json;
+  const { system } = useEventPublisher();

  function addMutedWord() {
-    updateAppData(login.id, ad => ({
-      item: {
-        ...ad,
-        mutedWords: appendDedupe(appData.mutedWords, [muteWord]),
-      },
-      timestamp: unixNowMs(),
+    updateAppData(login.id, system, ad => ({
+      ...ad,
+      mutedWords: appendDedupe(appData.mutedWords, [muteWord]),
    }));
    setMuteWord("");
  }

  const handleToggle = (setting: keyof SnortAppData) => {
-    updateAppData(login.id, ad => ({
-      item: {
-        ...ad,
-        [setting]: !appData[setting],
-      },
-      timestamp: unixNowMs(),
+    updateAppData(login.id, system, ad => ({
+      ...ad,
+      [setting]: !appData[setting],
    }));
  };

  function removeMutedWord(word: string) {
-    updateAppData(login.id, ad => ({
-      item: {
-        ...ad,
-        mutedWords: appData.mutedWords.filter(a => a !== word),
-      },
-      timestamp: unixNowMs(),
+    updateAppData(login.id, system, ad => ({
+      ...ad,
+      mutedWords: appData.mutedWords.filter(a => a !== word),
    }));
    setMuteWord("");
  }
--- a/packages/app/src/Pages/settings/Preferences.tsx
+++ b/packages/app/src/Pages/settings/Preferences.tsx
@ -1,36 +1,52 @@
+/* eslint-disable max-lines */
 import "./Preferences.css";

+import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";

+import AsyncButton from "@/Components/Button/AsyncButton";
 import { AllLanguageCodes } from "@/Components/IntlProvider/IntlProviderUtils";
-import { useLocale } from "@/Components/IntlProvider/useLocale";
-import useLogin from "@/Hooks/useLogin";
+import usePreferences from "@/Hooks/usePreferences";
 import { unwrap } from "@/Utils";
 import { DefaultImgProxy } from "@/Utils/Const";
-import { updatePreferences, UserPreferences } from "@/Utils/Login";
+import { UserPreferences } from "@/Utils/Login";

 import messages from "./messages";

 const PreferencesPage = () => {
  const { formatMessage } = useIntl();
-  const { id, pref } = useLogin(s => ({ id: s.id, pref: s.appData.item.preferences }));
-  const { lang } = useLocale();
+  const { preferences, update: updatePerf } = usePreferences();
+  const [pref, setPref] = useState<UserPreferences>(preferences);
+  const [error, setError] = useState("");
+
+  async function update(obj: UserPreferences) {
+    try {
+      setError("");
+      await updatePerf(obj);
+    } catch (e) {
+      console.error(e);
+      setError(formatMessage({ defaultMessage: "Failed to update, please try again", id: "OoZgbB" }));
+    }
+  }

  return (
    <div className="preferences flex flex-col g24">
      <h3>
-        <FormattedMessage {...messages.Preferences} />
+        <FormattedMessage defaultMessage="Preferences" id="PCSt5T" />
      </h3>
-
+      <AsyncButton onClick={() => update(pref)}>
+        <FormattedMessage defaultMessage="Save" id="jvo0vs" />
+      </AsyncButton>
+      {error && <b className="warning">{error}</b>}
      <div className="flex justify-between w-max">
        <h4>
          <FormattedMessage defaultMessage="Language" id="y1Z3or" />
        </h4>
        <div>
          <select
-            value={lang}
+            value={pref.language}
            onChange={e =>
-              updatePreferences(id, {
+              setPref({
                ...pref,
                language: e.target.value,
              })
@ -54,7 +70,7 @@ const PreferencesPage = () => {
          <select
            value={pref.theme}
            onChange={e =>
-              updatePreferences(id, {
+              setPref({
                ...pref,
                theme: e.target.value,
              } as UserPreferences)
@ -79,7 +95,7 @@ const PreferencesPage = () => {
          <select
            value={pref.defaultRootTab}
            onChange={e =>
-              updatePreferences(id, {
+              setPref({
                ...pref,
                defaultRootTab: e.target.value,
              } as UserPreferences)
@ -112,7 +128,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.telemetry ?? true}
-            onChange={e => updatePreferences(id, { ...pref, telemetry: e.target.checked })}
+            onChange={e => setPref({ ...pref, telemetry: e.target.checked })}
          />
        </div>
      </div>
@ -129,7 +145,7 @@ const PreferencesPage = () => {
              className="w-max"
              value={pref.autoLoadMedia}
              onChange={e =>
-                updatePreferences(id, {
+                setPref({
                  ...pref,
                  autoLoadMedia: e.target.value,
                } as UserPreferences)
@ -160,7 +176,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.checkSigs}
-            onChange={e => updatePreferences(id, { ...pref, checkSigs: e.target.checked })}
+            onChange={e => setPref({ ...pref, checkSigs: e.target.checked })}
          />
        </div>
      </div>
@ -177,7 +193,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.autoTranslate}
-            onChange={e => updatePreferences(id, { ...pref, autoTranslate: e.target.checked })}
+            onChange={e => setPref({ ...pref, autoTranslate: e.target.checked })}
          />
        </div>
      </div>
@ -195,7 +211,7 @@ const PreferencesPage = () => {
            type="number"
            defaultValue={pref.pow}
            min={0}
-            onChange={e => updatePreferences(id, { ...pref, pow: parseInt(e.target.value || "0") })}
+            onChange={e => setPref({ ...pref, pow: parseInt(e.target.value || "0") })}
          />
        </div>
      </div>
@ -208,7 +224,7 @@ const PreferencesPage = () => {
            type="number"
            defaultValue={pref.defaultZapAmount}
            min={1}
-            onChange={e => updatePreferences(id, { ...pref, defaultZapAmount: parseInt(e.target.value || "0") })}
+            onChange={e => setPref({ ...pref, defaultZapAmount: parseInt(e.target.value || "0") })}
          />
        </div>
      </div>
@ -225,7 +241,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.showBadges ?? false}
-            onChange={e => updatePreferences(id, { ...pref, showBadges: e.target.checked })}
+            onChange={e => setPref({ ...pref, showBadges: e.target.checked })}
          />
        </div>
      </div>
@ -242,7 +258,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.showStatus ?? true}
-            onChange={e => updatePreferences(id, { ...pref, showStatus: e.target.checked })}
+            onChange={e => setPref({ ...pref, showStatus: e.target.checked })}
          />
        </div>
      </div>
@ -259,7 +275,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.autoZap}
-            onChange={e => updatePreferences(id, { ...pref, autoZap: e.target.checked })}
+            onChange={e => setPref({ ...pref, autoZap: e.target.checked })}
          />
        </div>
      </div>
@ -278,7 +294,7 @@ const PreferencesPage = () => {
              type="checkbox"
              checked={pref.imgProxyConfig !== null}
              onChange={e =>
-                updatePreferences(id, {
+                setPref({
                  ...pref,
                  imgProxyConfig: e.target.checked ? DefaultImgProxy : undefined,
                })
@ -302,7 +318,7 @@ const PreferencesPage = () => {
                    description: "Placeholder text for imgproxy url textbox",
                  })}
                  onChange={e =>
-                    updatePreferences(id, {
+                    setPref({
                      ...pref,
                      imgProxyConfig: {
                        ...unwrap(pref.imgProxyConfig),
@ -327,7 +343,7 @@ const PreferencesPage = () => {
                    description: "Hexidecimal 'key' input for improxy",
                  })}
                  onChange={e =>
-                    updatePreferences(id, {
+                    setPref({
                      ...pref,
                      imgProxyConfig: {
                        ...unwrap(pref.imgProxyConfig),
@ -352,7 +368,7 @@ const PreferencesPage = () => {
                    description: "Hexidecimal 'salt' input for imgproxy",
                  })}
                  onChange={e =>
-                    updatePreferences(id, {
+                    setPref({
                      ...pref,
                      imgProxyConfig: {
                        ...unwrap(pref.imgProxyConfig),
@ -379,7 +395,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.enableReactions}
-            onChange={e => updatePreferences(id, { ...pref, enableReactions: e.target.checked })}
+            onChange={e => setPref({ ...pref, enableReactions: e.target.checked })}
          />
        </div>
      </div>
@ -395,7 +411,7 @@ const PreferencesPage = () => {
          value={pref.reactionEmoji}
          onChange={e => {
            const split = e.target.value.match(/[\p{L}\S]{1}/u);
-            updatePreferences(id, {
+            setPref({
              ...pref,
              reactionEmoji: split?.[0] ?? "",
            });
@ -415,7 +431,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.confirmReposts}
-            onChange={e => updatePreferences(id, { ...pref, confirmReposts: e.target.checked })}
+            onChange={e => setPref({ ...pref, confirmReposts: e.target.checked })}
          />
        </div>
      </div>
@ -432,7 +448,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.autoShowLatest}
-            onChange={e => updatePreferences(id, { ...pref, autoShowLatest: e.target.checked })}
+            onChange={e => setPref({ ...pref, autoShowLatest: e.target.checked })}
          />
        </div>
      </div>
@ -446,7 +462,7 @@ const PreferencesPage = () => {
        <select
          value={pref.fileUploader}
          onChange={e =>
-            updatePreferences(id, {
+            setPref({
              ...pref,
              fileUploader: e.target.value,
            } as UserPreferences)
@ -473,7 +489,7 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.showDebugMenus}
-            onChange={e => updatePreferences(id, { ...pref, showDebugMenus: e.target.checked })}
+            onChange={e => setPref({ ...pref, showDebugMenus: e.target.checked })}
          />
        </div>
      </div>
@ -490,10 +506,14 @@ const PreferencesPage = () => {
          <input
            type="checkbox"
            checked={pref.hideMutedNotes}
-            onChange={e => updatePreferences(id, { ...pref, hideMutedNotes: e.target.checked })}
+            onChange={e => setPref({ ...pref, hideMutedNotes: e.target.checked })}
          />
        </div>
      </div>
+      <AsyncButton onClick={() => update(pref)}>
+        <FormattedMessage defaultMessage="Save" id="jvo0vs" />
+      </AsyncButton>
+      {error && <b className="error">{error}</b>}
    </div>
  );
 };
--- a/packages/app/src/Utils/Login/Functions.ts
+++ b/packages/app/src/Utils/Login/Functions.ts
@ -16,7 +16,7 @@ import { GiftsCache } from "@/Cache";
 import SnortApi from "@/External/SnortApi";
 import { bech32ToHex, dedupeById, deleteRefCode, getCountry, sanitizeRelayUrl, unwrap } from "@/Utils";
 import { Blasters } from "@/Utils/Const";
-import { LoginSession, LoginSessionType, LoginStore, Newest, SnortAppData, UserPreferences } from "@/Utils/Login/index";
+import { LoginSession, LoginSessionType, LoginStore, SnortAppData, UserPreferences } from "@/Utils/Login/index";
 import { entropyToPrivateKey, generateBip39Entropy } from "@/Utils/nip6";
 import { SubscriptionEvent } from "@/Utils/Subscription";

@ -56,12 +56,9 @@ export function removeRelay(state: LoginSession, addr: string) {
  LoginStore.updateSession(state);
 }

-export function updatePreferences(id: string, p: UserPreferences) {
-  updateAppData(id, d => {
-    return {
-      item: { ...d, preferences: p },
-      timestamp: unixNowMs(),
-    };
+export async function updatePreferences(id: string, p: UserPreferences, system: SystemInterface) {
+  await updateAppData(id, system, d => {
+    return { ...d, preferences: p };
  });
 }

@ -206,23 +203,19 @@ export function setBookmarked(state: LoginSession, bookmarked: Array<string>, ts
  LoginStore.updateSession(state);
 }

-export function setAppData(state: LoginSession, data: SnortAppData, ts: number) {
-  if (state.appData.timestamp >= ts) {
-    return;
-  }
-  state.appData.item = data;
-  state.appData.timestamp = ts;
+export async function setAppData(state: LoginSession, data: SnortAppData, system: SystemInterface) {
+  const pub = LoginStore.getPublisher(state.id);
+  if (!pub) return;
+
+  await state.appData.updateJson(data, pub.signer, system);
  LoginStore.updateSession(state);
 }

-export function updateAppData(id: string, fn: (data: SnortAppData) => Newest<SnortAppData>) {
+export async function updateAppData(id: string, system: SystemInterface, fn: (data: SnortAppData) => SnortAppData) {
  const session = LoginStore.get(id);
  if (session) {
-    const next = fn(session.appData.item);
-    if (next.timestamp > session.appData.timestamp) {
-      session.appData = next;
-      LoginStore.updateSession(session);
-    }
+    const next = fn(session.appData.json);
+    await setAppData(session, next, system);
  }
 }

--- a/packages/app/src/Utils/Login/LoginSession.ts
+++ b/packages/app/src/Utils/Login/LoginSession.ts
@ -1,4 +1,4 @@
-import { HexKey, KeyStorage, RelaySettings, u256 } from "@snort/system";
+import { HexKey, JsonEventSync, KeyStorage, RelaySettings } from "@snort/system";

 import { DisplayAs } from "@/Components/Feed/DisplayAsSelector";
 import { UserPreferences } from "@/Utils/Login/index";
@ -21,6 +21,7 @@ export const enum LoginSessionType {
 }

 export interface SnortAppData {
+  id: string;
  mutedWords: Array<string>;
  showContentWarningPosts: boolean;
  preferences: UserPreferences;
@ -81,12 +82,12 @@ export interface LoginSession {
  /**
   * A list of event ids this user has pinned
   */
-  pinned: Newest<Array<u256>>;
+  pinned: Newest<Array<string>>;

  /**
   * A list of event ids this user has bookmarked
   */
-  bookmarked: Newest<Array<u256>>;
+  bookmarked: Newest<Array<string>>;

  /**
   * A list of pubkeys this user has muted
@ -116,7 +117,7 @@ export interface LoginSession {
  /**
   * Snort application data
   */
-  appData: Newest<SnortAppData>;
+  appData: JsonEventSync<SnortAppData>;

  /**
   * A list of chats which we have joined (NIP-28/NIP-29)
--- a/packages/app/src/Utils/Login/MultiAccountStore.ts
+++ b/packages/app/src/Utils/Login/MultiAccountStore.ts
@ -1,12 +1,20 @@
 import * as utils from "@noble/curves/abstract/utils";
 import * as secp from "@noble/curves/secp256k1";
 import { ExternalStore, unwrap } from "@snort/shared";
-import { EventPublisher, HexKey, KeyStorage, NotEncrypted, RelaySettings, socialGraphInstance } from "@snort/system";
+import {
+  EventPublisher,
+  HexKey,
+  JsonEventSync,
+  KeyStorage,
+  NotEncrypted,
+  RelaySettings,
+  socialGraphInstance,
+} from "@snort/system";
 import { v4 as uuid } from "uuid";

-import { createPublisher, LoginSession, LoginSessionType } from "@/Utils/Login/index";
+import { createPublisher, LoginSession, LoginSessionType, SnortAppData } from "@/Utils/Login/index";

-import { DefaultPreferences, UserPreferences } from "./Preferences";
+import { DefaultPreferences } from "./Preferences";

 const AccountStoreKey = "sessions";
 const LoggedOut = {
@ -44,14 +52,15 @@ const LoggedOut = {
  latestNotification: 0,
  readNotifications: 0,
  subscriptions: [],
-  appData: {
-    item: {
-      mutedWords: [],
+  appData: new JsonEventSync<SnortAppData>(
+    {
+      id: "",
      preferences: DefaultPreferences,
+      mutedWords: [],
      showContentWarningPosts: false,
    },
-    timestamp: 0,
-  },
+    true,
+  ),
  extraChats: [],
  stalker: false,
 } as LoginSession;
@ -87,19 +96,14 @@ export class MultiAccountStore extends ExternalStore<LoginSession> {
      if (v.type === LoginSessionType.PrivateKey && v.readonly) {
        v.readonly = false;
      }
-      // fill possibly undefined (migrate up)
-      v.appData ??= {
-        item: {
-          mutedWords: [],
-          showContentWarningPosts: false,
-          preferences: DefaultPreferences,
-        },
-        timestamp: 0,
-      };
      v.extraChats ??= [];
      if (v.privateKeyData) {
        v.privateKeyData = KeyStorage.fromPayload(v.privateKeyData as object);
      }
+      v.appData = new JsonEventSync<SnortAppData>(v.appData as unknown as SnortAppData, true);
+      v.appData.on("change", () => {
+        this.#save();
+      });
    }
    this.#loadIrisKeyIfExists();
  }
@ -163,10 +167,18 @@ export class MultiAccountStore extends ExternalStore<LoginSession> {
        item: initRelays,
        timestamp: 1,
      },
-      preferences: {
-        ...DefaultPreferences,
-        ...CONFIG.defaultPreferences,
-      },
+      appData: new JsonEventSync<SnortAppData>(
+        {
+          id: "",
+          preferences: {
+            ...DefaultPreferences,
+            ...CONFIG.defaultPreferences,
+          },
+          mutedWords: [],
+          showContentWarningPosts: false,
+        },
+        true,
+      ),
      remoteSignerRelays,
      privateKeyData: privateKey,
      stalker: stalker ?? false,
@ -209,10 +221,18 @@ export class MultiAccountStore extends ExternalStore<LoginSession> {
        item: initRelays,
        timestamp: 1,
      },
-      preferences: {
-        ...DefaultPreferences,
-        ...CONFIG.defaultPreferences,
-      },
+      appData: new JsonEventSync<SnortAppData>(
+        {
+          id: "",
+          preferences: {
+            ...DefaultPreferences,
+            ...CONFIG.defaultPreferences,
+          },
+          mutedWords: [],
+          showContentWarningPosts: false,
+        },
+        true,
+      ),
    } as LoginSession;

    if ("nostr_os" in window && window?.nostr_os) {
@ -271,41 +291,10 @@ export class MultiAccountStore extends ExternalStore<LoginSession> {
  #migrate() {
    let didMigrate = false;

-    // update session types
-    for (const [, v] of this.#accounts) {
-      if (!v.type) {
-        v.type = v.privateKey ? LoginSessionType.PrivateKey : LoginSessionType.Nip7;
-        didMigrate = true;
-      }
-    }
-
-    // add ids
-    for (const [, v] of this.#accounts) {
-      if ((v.id?.length ?? 0) === 0) {
-        v.id = uuid();
-        didMigrate = true;
-      }
-    }
-
-    // mark readonly
-    for (const [, v] of this.#accounts) {
-      if (v.type === LoginSessionType.PublicKey && !v.readonly) {
-        v.readonly = true;
-        didMigrate = true;
-      }
-      // reset readonly on load
-      if (v.type === LoginSessionType.PrivateKey && v.readonly) {
-        v.readonly = false;
-        didMigrate = true;
-      }
-    }
-
-    // move preferences to appdata
-    for (const [, v] of this.#accounts) {
-      if ("preferences" in v) {
-        v.appData.item.preferences = v.preferences as UserPreferences;
-        delete v["preferences"];
+    for (const [, acc] of this.#accounts) {
+      if ("item" in acc.appData) {
        didMigrate = true;
+        acc.appData = new JsonEventSync<SnortAppData>(acc.appData.item as SnortAppData, true);
      }
    }

@ -324,10 +313,14 @@ export class MultiAccountStore extends ExternalStore<LoginSession> {
      if (v.privateKeyData instanceof KeyStorage) {
        toSave.push({
          ...v,
+          appData: v.appData.json,
          privateKeyData: v.privateKeyData.toPayload(),
        });
      } else {
-        toSave.push({ ...v });
+        toSave.push({
+          ...v,
+          appData: v.appData.json,
+        });
      }
    }

--- a/packages/app/src/Utils/Upload/index.ts
+++ b/packages/app/src/Utils/Upload/index.ts
@ -65,7 +65,7 @@ export interface UploadProgress {
 export type UploadStage = "starting" | "hashing" | "uploading" | "done" | undefined;

 export default function useFileUpload(): Uploader {
-  const fileUploader = useLogin(s => s.appData.item.preferences.fileUploader);
+  const fileUploader = useLogin(s => s.appData.json.preferences.fileUploader);
  const { publisher } = useEventPublisher();
  const [progress, setProgress] = useState<Array<UploadProgress>>([]);
  const [stage, setStage] = useState<UploadStage>();
--- a/packages/app/src/Utils/index.ts
+++ b/packages/app/src/Utils/index.ts
@ -537,7 +537,7 @@ export function trackEvent(
  if (
    !import.meta.env.DEV &&
    CONFIG.features.analytics &&
-    (LoginStore.snapshot().appData.item.preferences.telemetry ?? true)
+    (LoginStore.snapshot().appData.json.preferences.telemetry ?? true)
  ) {
    fetch("https://pa.v0l.io/api/event", {
      method: "POST",
--- a/packages/system/src/index.ts
+++ b/packages/system/src/index.ts
@ -38,7 +38,7 @@ export * from "./pow-util";
 export * from "./query-optimizer";
 export * from "./encrypted";
 export * from "./outbox";
-export * from "./range-sync";
+export * from "./sync";

 export * from "./impl/nip4";
 export * from "./impl/nip44";
--- a/packages/system/src/sync/index.ts
+++ b/packages/system/src/sync/index.ts
@ -0,0 +1,7 @@
+export interface HasId {
+  id: string;
+}
+
+export * from "./safe-sync";
+export * from "./range-sync";
+export * from "./json-in-event-sync";
--- a/packages/system/src/sync/json-in-event-sync.ts
+++ b/packages/system/src/sync/json-in-event-sync.ts
@ -0,0 +1,76 @@
+import { SafeSync } from "./safe-sync";
+import { HasId } from ".";
+import { EventExt, EventSigner, NostrEvent, NostrLink, SystemInterface } from "..";
+import debug from "debug";
+import EventEmitter from "eventemitter3";
+import { unixNow } from "@snort/shared";
+
+export interface JsonSyncEvents {
+  change: () => void;
+}
+
+export class JsonEventSync<T extends HasId> extends EventEmitter<JsonSyncEvents> {
+  #log = debug("JsonEventSync");
+  #sync: SafeSync;
+  #json: T;
+
+  constructor(
+    initValue: T,
+    readonly encrypt: boolean,
+  ) {
+    super();
+    this.#sync = new SafeSync();
+    this.#json = initValue;
+
+    this.#sync.on("change", () => this.emit("change"));
+  }
+
+  get json(): Readonly<T> {
+    const ret = { ...this.#json };
+    return Object.freeze(ret);
+  }
+
+  async sync(link: NostrLink, signer: EventSigner, system: SystemInterface) {
+    const res = await this.#sync.sync(link, system);
+    this.#log("Sync result %O", res);
+    if (res) {
+      if (this.encrypt) {
+        this.#json = JSON.parse(await signer.nip4Decrypt(res.content, await signer.getPubKey())) as T;
+      } else {
+        this.#json = JSON.parse(res.content) as T;
+      }
+    }
+  }
+
+  /**
+   * Update the json content in the event
+   * @param val
+   * @param signer
+   */
+  async updateJson(val: T, signer: EventSigner, system: SystemInterface) {
+    this.#log("Updating: %O", val);
+    const next = this.#sync.value ? ({ ...this.#sync.value } as NostrEvent) : undefined;
+    if (!next) {
+      throw new Error("Cannot update with no previous value");
+    }
+
+    next.content = JSON.stringify(val);
+    next.created_at = unixNow();
+
+    const prevTag = next.tags.find(a => a[0] === "previous");
+    if (prevTag) {
+      prevTag[1] = next.id;
+    } else {
+      next.tags.push(["previous", next.id]);
+    }
+    if (this.encrypt) {
+      next.content = await signer.nip4Encrypt(next.content, await signer.getPubKey());
+    }
+    next.id = EventExt.createId(next);
+    const signed = await signer.sign(next);
+
+    await this.#sync.update(signed, system);
+    this.#json = val;
+    this.#json.id = next.id;
+  }
+}
--- a/packages/system/src/sync/range-sync.ts
+++ b/packages/system/src/sync/range-sync.ts
@ -1,6 +1,6 @@
 import { unixNow } from "@snort/shared";
 import EventEmitter from "eventemitter3";
-import { ReqFilter, RequestBuilder, SystemInterface, TaggedNostrEvent } from ".";
+import { ReqFilter, RequestBuilder, SystemInterface, TaggedNostrEvent } from "..";

 /**
 * When nostr was created
--- a/packages/system/src/sync/safe-sync.ts
+++ b/packages/system/src/sync/safe-sync.ts
@ -0,0 +1,101 @@
+import EventEmitter from "eventemitter3";
+import { EventExt, EventType, NostrEvent, NostrLink, RequestBuilder, SystemInterface } from "..";
+
+export interface SafeSyncEvents {
+  change: () => void;
+}
+
+/**
+ * Safely sync replacable events to nostr
+ *
+ * Usefule for the following critical kinds:
+ * 0 (Metadata)
+ * 3 (Contacts)
+ * 10002 (Relays)
+ * 30078 (AppData)
+ */
+export class SafeSync extends EventEmitter<SafeSyncEvents> {
+  #base: NostrEvent | undefined;
+
+  get value() {
+    return this.#base;
+  }
+
+  /**
+   * Fetch the latest version
+   * @param link A link to the kind
+   */
+  async sync(link: NostrLink, system: SystemInterface) {
+    if (link.kind === undefined) {
+      throw new Error("Kind must be set");
+    }
+
+    const rb = new RequestBuilder("sync");
+    const f = rb.withFilter().link(link);
+    if (this.#base) {
+      f.since(this.#base.created_at);
+    }
+    const results = await system.Fetch(rb);
+    const res = results.find(a => link.matchesEvent(a));
+    if (res && res.created_at > (this.#base?.created_at ?? 0)) {
+      this.#base = res;
+      this.emit("change");
+    }
+    return this.#base;
+  }
+
+  /**
+   * Set the base value
+   * @param ev
+   */
+  setBase(ev: NostrEvent) {
+    this.#checkForUpdate(ev, false);
+    this.#base = ev;
+    this.emit("change");
+  }
+
+  /**
+   * Publish an update for this event
+   * @param ev
+   */
+  async update(ev: NostrEvent, system: SystemInterface) {
+    console.debug(this.#base, ev);
+    this.#checkForUpdate(ev, true);
+
+    const link = NostrLink.fromEvent(ev);
+    // always attempt to get a newer version before broadcasting
+    await this.sync(link, system);
+    this.#checkForUpdate(ev, true);
+
+    system.BroadcastEvent(ev);
+    this.#base = ev;
+    this.emit("change");
+  }
+
+  #checkForUpdate(ev: NostrEvent, mustExist: boolean) {
+    if (!this.#base) {
+      if (mustExist) {
+        throw new Error("No previous version detected");
+      } else {
+        return;
+      }
+    }
+    const prevTag = ev.tags.find(a => a[0] === "previous");
+    if (prevTag && prevTag[1] !== this.#base.id) {
+      throw new Error("Previous tag does not match our version");
+    }
+    if (
+      EventExt.getType(ev.kind) !== EventType.Replaceable &&
+      EventExt.getType(ev.kind) !== EventType.ParameterizedReplaceable
+    ) {
+      throw new Error("Not a replacable event kind");
+    }
+    if (this.#base.created_at >= ev.created_at) {
+      throw new Error("Same version, cannot update");
+    }
+    const link = NostrLink.fromEvent(ev);
+    if (!link.matchesEvent(this.#base)) {
+      throw new Error("Invalid event");
+    }
+  }
+}