refactor: improve whitelabel config

packages/app/src/Pages/DonatePage.tsx

@@ -12,6 +12,7 @@ import Modal from "@/Components/Modal/Modal";
 import QrCode from "@/Components/QrCode";
 import ProfilePreview from "@/Components/User/ProfilePreview";
 import SnortApi, { RevenueSplit, RevenueToday } from "@/External/SnortApi";
+import useLogin from "@/Hooks/useLogin";
 import { bech32ToHex, unwrap } from "@/Utils";
 import { ApiHost, DeveloperAccounts, SnortPubKey } from "@/Utils/Const";
 import { ZapPoolController, ZapPoolRecipientType } from "@/Utils/ZapPoolController";
@@ -67,6 +68,7 @@ const DonatePage = () => {
   const [onChain, setOnChain] = useState("");
   const api = new SnortApi(ApiHost);
   const navigate = useNavigate();
+  const login = useLogin();
 
   async function getOnChainAddress() {
     const { address } = await api.onChainDonation();
@@ -153,9 +155,10 @@ const DonatePage = () => {
                   return (
                     <AsyncButton
                       onClick={() => {
-                        navigate(`/messages/${Nip28ChatSystem.chatId(a.value)}`);
+                        const id = Nip28ChatSystem.chatId(a.value);
+                        navigate(`/messages/${id}`);
                       }}>
-                      <img src={CONFIG.appleTouchIconUrl} width={24} height={24} className="rounded-full" />
+                      <img src={CONFIG.icon} width={24} height={24} className="rounded-full" />
                       <FormattedMessage defaultMessage="Nostr Public Chat" id="whSrs+" />
                     </AsyncButton>
                   );

packages/app/src/Pages/Messages/DmWindow.tsx

@@ -1,19 +1,18 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Chat, createEmptyChatObject, useChatSystem } from "@/chat";
+import { Chat, useChat } from "@/chat";
 import ProfileImage from "@/Components/User/ProfileImage";
-import useLogin from "@/Hooks/useLogin";
 import DM from "@/Pages/Messages/DM";
 import WriteMessage from "@/Pages/Messages/WriteMessage";
 
 import { ChatParticipantProfile } from "./ChatParticipant";
 
 export default function DmWindow({ id }: { id: string }) {
-  const dms = useChatSystem();
-  const chat = dms.find(a => a.id === id) ?? createEmptyChatObject(id);
+  const chat = useChat(id);
 
   function sender() {
+    if (!chat) return;
     if (chat.participants.length === 1) {
       return <ChatParticipantProfile participant={chat.participants[0]} />;
     } else {
@@ -29,63 +28,28 @@ export default function DmWindow({ id }: { id: string }) {
   }
 
   return (
-    <div className="flex flex-1 flex-col h-[calc(100vh-62px)] md:h-screen">
+    <div className="flex flex-1 flex-col h-full w-full md:h-screen">
       <div className="p-3">{sender()}</div>
-      <div className="overflow-y-auto hide-scrollbar p-2.5 flex-grow">
-        <div className="flex flex-col">{chat && <DmChatSelected chat={chat} />}</div>
-      </div>
-      <div className="flex items-center gap-2.5 p-2.5">
-        <WriteMessage chat={chat} />
-      </div>
+      <div className="overflow-y-auto hide-scrollbar p-2.5 flex-grow">{chat && <DmChatSelected chat={chat} />}</div>
+      <div className="flex items-center gap-2.5 p-2.5">{chat && <WriteMessage chat={chat} />}</div>
     </div>
   );
 }
 
 function DmChatSelected({ chat }: { chat: Chat }) {
-  const { publicKey: myPubKey } = useLogin(s => ({ publicKey: s.publicKey }));
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
   const sortedDms = useMemo(() => {
     const myDms = chat?.messages;
-    if (myPubKey && myDms) {
-      // filter dms in this chat, or dms to self
-      return [...myDms].sort((a, b) => a.created_at - b.created_at);
+    if (myDms) {
+      return [...myDms].sort((a, b) => (a.created_at > b.created_at ? -1 : 1));
     }
     return [];
-  }, [chat, myPubKey]);
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
-  };
-
-  useEffect(() => {
-    const observer = new ResizeObserver(() => {
-      scrollToBottom();
-    });
-
-    // Start observing the element that you want to keep in view
-    if (messagesContainerRef.current) {
-      observer.observe(messagesContainerRef.current);
-    }
-
-    // Make sure to scroll to bottom on initial load
-    scrollToBottom();
-
-    // Clean up the observer on component unmount
-    return () => {
-      if (messagesContainerRef.current) {
-        observer.unobserve(messagesContainerRef.current);
-      }
-    };
-  }, [sortedDms]);
+  }, [chat]);
 
   return (
-    <div className="flex flex-col" ref={messagesContainerRef}>
+    <div className="flex flex-col-reverse">
       {sortedDms.map(a => (
         <DM data={a} key={a.id} chat={chat} />
       ))}
-      <div ref={messagesEndRef} />
     </div>
   );
 }

packages/app/src/Pages/Messages/MessagesPage.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -13,7 +13,6 @@ import { ChatParticipantProfile } from "@/Pages/Messages/ChatParticipant";
 import DmWindow from "@/Pages/Messages/DmWindow";
 import NewChatWindow from "@/Pages/Messages/NewChatWindow";
 import UnreadCount from "@/Pages/Messages/UnreadCount";
-import { parseId } from "@/Utils";
 
 const TwoCol = 768;
 
@@ -22,13 +21,8 @@ export default function MessagesPage() {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
   const { id } = useParams();
-  const [chat, setChat] = useState<string>();
   const pageWidth = usePageWidth();
 
-  useEffect(() => {
-    const parsedId = parseId(id ?? "");
-    setChat(id ? parsedId : undefined);
-  }, [id]);
   const chats = useChatSystem();
 
   const unreadCount = useMemo(() => chats.reduce((p, c) => p + c.unread, 0), [chats]);
@@ -67,7 +61,7 @@ export default function MessagesPage() {
     const participants = cx.participants.map(a => a.id);
     if (participants.length === 1 && participants[0] === login.publicKey) return noteToSelf(cx);
 
-    const isActive = cx.id === chat;
+    const isActive = cx.id === id;
     return (
       <div
         className={classNames("flex items-center p cursor-pointer justify-between", { active: isActive })}
@@ -89,7 +83,7 @@ export default function MessagesPage() {
 
   return (
     <div className="flex flex-1 md:h-screen md:overflow-hidden">
-      {(pageWidth >= TwoCol || !chat) && (
+      {pageWidth >= TwoCol && !id && (
         <div className="overflow-y-auto md:h-screen p-1 w-full md:w-1/3 flex-shrink-0">
           <div className="flex items-center justify-between p-2">
             <button disabled={unreadCount <= 0} type="button" className="text-sm font-semibold">
@@ -109,7 +103,7 @@ export default function MessagesPage() {
             .map(conversation)}
         </div>
       )}
-      {chat ? <DmWindow id={chat} /> : pageWidth >= TwoCol && <div className="flex-1 rt-border"></div>}
+      {id ? <DmWindow id={id} /> : pageWidth >= TwoCol && <div className="flex-1 rt-border"></div>}
     </div>
   );
 }

packages/app/src/Pages/onboarding/start.tsx

@@ -71,7 +71,7 @@ export function SignIn() {
   const nip7Login = hasNip7 && !useKey;
   return (
     <div className="flex flex-col g24">
-      <img src={CONFIG.appleTouchIconUrl} width={48} height={48} className="br mr-auto ml-auto" />
+      <img src={CONFIG.icon} width={48} height={48} className="br mr-auto ml-auto" />
       <div className="flex flex-col g16 items-center">
         <h1>
           <FormattedMessage defaultMessage="Sign In" id="Ub+AGc" />
@@ -152,7 +152,7 @@ export function SignUp() {
 
   return (
     <div className="flex flex-col g24">
-      <img src={CONFIG.appleTouchIconUrl} width={48} height={48} className="br mr-auto ml-auto" />
+      <img src={CONFIG.icon} width={48} height={48} className="br mr-auto ml-auto" />
       <div className="flex flex-col g16 items-center">
         <h1>
           <FormattedMessage defaultMessage="Sign Up" id="39AHJm" />