Memo improvements

apps/web/src/api/mutations/sign-transfer.ts

@@ -8,6 +8,8 @@ import { DEFAULT_DYNAMIC_PROPS } from "@/consts/default-dynamic-props";
 import { getDynamicPropsQueryOptions } from "@ecency/sdk";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 import { invalidateWalletQueries } from "@/features/wallet/utils/invalidate-wallet-queries";
+import { encryptMemo } from "@/utils/memo-crypto";
+import { getLoginType } from "@/utils/user-token";
 import {
   useTransferMutation,
   useTransferPointMutation,
@@ -81,31 +83,38 @@ export function useSignTransfer(mode: TransferMode, asset: TransferAsset) {
   return {
     isPending,
     mutateAsync: async ({ to, amount, memo }: SignTransferPayload) => {
+      // Encrypt memo if it starts with #
+      let processedMemo = memo;
+      if (memo.startsWith("#") && to) {
+        const loginType = getLoginType(activeUser?.username ?? "");
+        processedMemo = await encryptMemo(loginType, activeUser!.username, to, memo.slice(1));
+      }
+
       const fullAmount = `${(+amount).toFixed(3)} ${asset}`;
       const requestId = Date.now() >>> 0;
 
       switch (mode) {
         case "transfer":
           if (asset === "POINT") {
-            await transferPoint.mutateAsync({ to, amount: fullAmount, memo });
+            await transferPoint.mutateAsync({ to, amount: fullAmount, memo: processedMemo });
           } else if (asset === "SPK") {
             await transferSpk.mutateAsync({ to, amount: parseFloat(amount) * 1000 });
           } else if (asset === "LARYNX") {
             await transferLarynx.mutateAsync({ to, amount: parseFloat(amount) * 1000 });
           } else if (asset !== "HIVE" && asset !== "HBD") {
             // Hive Engine token
-            await transferEngine.mutateAsync({ to, quantity: amount, symbol: asset, memo });
+            await transferEngine.mutateAsync({ to, quantity: amount, symbol: asset, memo: processedMemo });
           } else {
-            await transfer.mutateAsync({ to, amount: fullAmount, memo });
+            await transfer.mutateAsync({ to, amount: fullAmount, memo: processedMemo });
           }
           break;
 
         case "transfer-saving":
-          await toSavings.mutateAsync({ to, amount: fullAmount, memo });
+          await toSavings.mutateAsync({ to, amount: fullAmount, memo: processedMemo });
           break;
 
         case "withdraw-saving":
-          await fromSavings.mutateAsync({ to, amount: fullAmount, memo, requestId });
+          await fromSavings.mutateAsync({ to, amount: fullAmount, memo: processedMemo, requestId });
           break;
 
         case "convert":
@@ -117,7 +126,7 @@ export function useSignTransfer(mode: TransferMode, asset: TransferAsset) {
           break;
 
         case "claim-interest":
-          await claimInterest.mutateAsync({ to, amount: fullAmount, memo, requestId });
+          await claimInterest.mutateAsync({ to, amount: fullAmount, memo: processedMemo, requestId });
           break;
 
         case "power-up":

apps/web/src/app/(dynamicPages)/profile/[username]/wallet/(token)/hbd/_components/hive-transaction-row.tsx

@@ -6,6 +6,7 @@ import { formattedNumber, parseAsset } from "@/utils";
 import { UilArrowRight, UilRefresh } from "@tooni/iconscout-unicons-react";
 import { ProfileWalletTokenHistoryHiveItem } from "../../_components";
 import { Badge } from "@/features/ui";
+import { MemoDisplay } from "@/features/shared/memo-display";
 
 interface Props {
   transaction: Transaction;
@@ -78,7 +79,11 @@ export function HiveTransactionRow({ entry, transaction: tr }: Props) {
       <div className="space-y-2">
         <TransferParticipants from={tr.from} to={tr.to} />
         {tr.memo ? (
-          <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          tr.memo.startsWith("#") ? (
+            <MemoDisplay memo={tr.memo} />
+          ) : (
+            <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          )
         ) : null}
       </div>
     );
@@ -107,7 +112,11 @@ export function HiveTransactionRow({ entry, transaction: tr }: Props) {
     details = (
       <div className="space-y-2">
         {tr.memo ? (
-          <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          tr.memo.startsWith("#") ? (
+            <MemoDisplay memo={tr.memo} />
+          ) : (
+            <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          )
         ) : null}
         <div className="text-sm text-gray-600 dark:text-gray-400">{recurrentDescription}</div>
         <TransferParticipants from={tr.from} to={tr.to} />
@@ -145,7 +154,11 @@ export function HiveTransactionRow({ entry, transaction: tr }: Props) {
       <div className="space-y-2">
         <TransferParticipants from={tr.from} to={tr.to} />
         {tr.memo ? (
-          <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          tr.memo.startsWith("#") ? (
+            <MemoDisplay memo={tr.memo} />
+          ) : (
+            <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          )
         ) : null}
       </div>
     );

apps/web/src/app/(dynamicPages)/profile/[username]/wallet/(token)/hive/_components/hive-transaction-row.tsx

@@ -16,6 +16,7 @@ import { formattedNumber, parseAsset } from "@/utils";
 import { UilArrowRight, UilRefresh } from "@tooni/iconscout-unicons-react";
 import { ProfileWalletTokenHistoryHiveItem } from "../../_components";
 import { Badge } from "@/features/ui";
+import { MemoDisplay } from "@/features/shared/memo-display";
 
 interface Props {
   transaction: Transaction;
@@ -123,7 +124,11 @@ export function HiveTransactionRow({ entry, transaction: tr }: Props) {
       <div className="space-y-2">
         <TransferParticipants from={tr.from} to={tr.to} />
         {tr.memo ? (
-          <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          tr.memo.startsWith("#") ? (
+            <MemoDisplay memo={tr.memo} />
+          ) : (
+            <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          )
         ) : null}
       </div>
     );
@@ -153,7 +158,11 @@ export function HiveTransactionRow({ entry, transaction: tr }: Props) {
     details = (
       <div className="space-y-2">
         {tr.memo ? (
-          <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          tr.memo.startsWith("#") ? (
+            <MemoDisplay memo={tr.memo} />
+          ) : (
+            <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          )
         ) : null}
         <div className="text-sm text-gray-600 dark:text-gray-400">{recurrentDescription}</div>
         <TransferParticipants from={tr.from} to={tr.to} />

apps/web/src/app/(dynamicPages)/profile/[username]/wallet/(token)/hp/_components/hive-transaction-row.tsx

@@ -11,6 +11,7 @@ import { UilArrowRight, UilRefresh } from "@tooni/iconscout-unicons-react";
 import { useMemo } from "react";
 import { ProfileWalletTokenHistoryHiveItem } from "../../_components";
 import { Badge } from "@/features/ui";
+import { MemoDisplay } from "@/features/shared/memo-display";
 
 interface Props {
   transaction: Transaction;
@@ -124,7 +125,11 @@ export function HiveTransactionRow({ entry, transaction: tr }: Props) {
       <div className="space-y-2">
         <TransferParticipants from={tr.from} to={tr.to} />
         {tr.memo ? (
-          <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          tr.memo.startsWith("#") ? (
+            <MemoDisplay memo={tr.memo} />
+          ) : (
+            <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          )
         ) : null}
       </div>
     );
@@ -168,7 +173,11 @@ export function HiveTransactionRow({ entry, transaction: tr }: Props) {
     details = (
       <div className="space-y-2">
         {tr.memo ? (
-          <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          tr.memo.startsWith("#") ? (
+            <MemoDisplay memo={tr.memo} />
+          ) : (
+            <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{tr.memo}</div>
+          )
         ) : null}
         <div className="text-sm text-gray-600 dark:text-gray-400">{recurrentDescription}</div>
         <TransferParticipants from={tr.from} to={tr.to} />

apps/web/src/app/client-providers.tsx

@@ -8,6 +8,7 @@ import { getQueryClient } from "@/core/react-query";
 import { Announcements } from "@/features/announcement";
 import { Tracker } from "@/features/monitoring";
 import { AuthUpgradeDialog } from "@/features/shared/auth-upgrade";
+import { MemoKeyDialog } from "@/features/shared/memo-key";
 import { PushNotificationsProvider } from "@/features/push-notifications";
 import { UserActivityRecorder } from "@/features/user-activity";
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -45,6 +46,7 @@ export function ClientProviders(props: PropsWithChildren) {
           {/* Defer non-critical components for LCP optimization */}
           <DeferredRender>
             <AuthUpgradeDialog />
+            <MemoKeyDialog />
             <EcencyConfigManager.Conditional
               condition={({ visionFeatures }) => visionFeatures.userActivityTracking.enabled}
             >

apps/web/src/features/i18n/locales/en-US.json

@@ -1463,6 +1463,13 @@
     "memo": "Memo",
     "memo-placeholder": "enter your notes here",
     "memo-help": "This memo is public",
+    "memo-encrypted": "This memo will be encrypted",
+    "memo-decrypt": "Decrypt",
+    "memo-decrypt-error": "Could not decrypt memo. Check your memo key.",
+    "memo-encrypted-label": "Encrypted memo",
+    "memo-key-title": "Enter Memo Key",
+    "memo-key-subtitle-encrypt": "Your memo key is needed to encrypt this message.",
+    "memo-key-subtitle-decrypt": "Your memo key is needed to decrypt this message.",
     "memo-error": "Never put private keys into a memo field, it is publicly visible to everyone.",
     "memo-required": "Transfer to an exchange must have a memo.",
     "invalid-asset": "You can only send HIVE to an exchange account.",

apps/web/src/features/polls/components/poll-widget.tsx

@@ -196,7 +196,7 @@ export function PollWidget({ poll, isReadOnly, entry, compact = false }: Props)
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 items-center mt-4">
           {showVote && (
             <Button
-              disabled={isReadOnly || activeChoices.size === 0 || isVoting}
+              disabled={isReadOnly || !activeUser || activeChoices.size === 0 || isVoting}
               icon={<UilPanelAdd />}
               iconPlacement="left"
               size="lg"

apps/web/src/features/shared/memo-display.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Button } from "@ui/button";
+import i18next from "i18next";
+import { useActiveAccount } from "@/core/hooks/use-active-account";
+import { getLoginType } from "@/utils/user-token";
+import { decryptMemo } from "@/utils/memo-crypto";
+import { error } from "@/features/shared";
+
+interface Props {
+  memo: string;
+}
+
+/**
+ * Heuristic to detect if a #-prefixed memo is actually encrypted.
+ *
+ * Encrypted memos on Hive are `#` followed by a long base58-encoded string
+ * (typically 150+ chars, no spaces, no punctuation outside base58 alphabet).
+ * Plain text memos starting with `#` will have spaces and regular text.
+ */
+function isLikelyEncryptedMemo(memo: string): boolean {
+  if (!memo.startsWith("#")) return false;
+  const content = memo.slice(1);
+  // Encrypted memos are long base58 strings with no whitespace
+  return content.length > 50 && !/\s/.test(content);
+}
+
+export function MemoDisplay({ memo }: Props) {
+  const { activeUser } = useActiveAccount();
+  const [decryptedText, setDecryptedText] = useState<string | null>(null);
+  const [isDecrypting, setIsDecrypting] = useState(false);
+
+  const encrypted = isLikelyEncryptedMemo(memo);
+
+  const handleDecrypt = useCallback(async () => {
+    if (!activeUser) return;
+
+    setIsDecrypting(true);
+    try {
+      const loginType = getLoginType(activeUser.username);
+      const result = await decryptMemo(loginType, activeUser.username, memo);
+      setDecryptedText(result);
+    } catch (e) {
+      error(i18next.t("transfer.memo-decrypt-error"));
+    } finally {
+      setIsDecrypting(false);
+    }
+  }, [activeUser, memo]);
+
+  if (decryptedText !== null) {
+    return (
+      <div className="text-sm text-gray-600 dark:text-gray-400 break-words">
+        <span className="text-xs text-gray-500">🔓 </span>
+        {decryptedText}
+      </div>
+    );
+  }
+
+  if (!encrypted) {
+    // Plain text memo that happens to start with #
+    return (
+      <div className="text-sm text-gray-600 dark:text-gray-400 break-words">{memo}</div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+      <span>🔒 {i18next.t("transfer.memo-encrypted-label")}</span>
+      {activeUser && (
+        <Button
+          size="xs"
+          appearance="secondary"
+          outline={true}
+          disabled={isDecrypting}
+          onClick={handleDecrypt}
+        >
+          {i18next.t("transfer.memo-decrypt")}
+        </Button>
+      )}
+    </div>
+  );
+}

apps/web/src/features/shared/memo-key/index.ts

@@ -0,0 +1,2 @@
+export { requestMemoKey, getTempMemoKey, clearTempMemoKey } from "./memo-key-events";
+export { MemoKeyDialog } from "./memo-key-dialog";

apps/web/src/features/shared/memo-key/memo-key-dialog.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
+import { KeyInput } from "@ui/input";
+import i18next from "i18next";
+import { PrivateKey } from "@hiveio/dhive";
+import { resolveMemoKey } from "./memo-key-events";
+
+interface MemoKeyRequest {
+  purpose: "encrypt" | "decrypt";
+}
+
+export function MemoKeyDialog() {
+  const [request, setRequest] = useState<MemoKeyRequest | null>(null);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<MemoKeyRequest>).detail;
+      setRequest(detail);
+    };
+    window.addEventListener("ecency-memo-key", handler);
+    return () => window.removeEventListener("ecency-memo-key", handler);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setRequest(null);
+    resolveMemoKey(false);
+  }, []);
+
+  const handleKeySign = useCallback((privateKey: PrivateKey) => {
+    setRequest(null);
+    resolveMemoKey(privateKey.toString());
+  }, []);
+
+  if (!request) return null;
+
+  const subtitle =
+    request.purpose === "encrypt"
+      ? i18next.t("transfer.memo-key-subtitle-encrypt")
+      : i18next.t("transfer.memo-key-subtitle-decrypt");
+
+  return (
+    <Modal show={true} centered={true} onHide={handleClose}>
+      <ModalHeader closeButton={true}>
+        <ModalTitle>{i18next.t("transfer.memo-key-title")}</ModalTitle>
+      </ModalHeader>
+      <ModalBody>
+        <p className="text-sm text-gray-600 mb-4">{subtitle}</p>
+        <KeyInput onSign={handleKeySign} keyType="memo" />
+      </ModalBody>
+    </Modal>
+  );
+}