Reposition AcceptOrDeny component

src/component-library/components/FullConversation/AcceptOrDeny.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { useConsent } from "@xmtp/react-sdk";
+import { useXmtpStore } from "../../../store/xmtp";
+
+export const AcceptOrDeny = ({ address }: { address: string }) => {
+  const { t } = useTranslation();
+  const { allow, deny } = useConsent();
+  const activeTab = useXmtpStore((s) => s.activeTab);
+  const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
+  const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount);
+
+  const [modalOpen, setModalOpen] = useState(true);
+
+  return activeTab === "requests" && modalOpen ? (
+    <div
+      className="bg-gray-100 p-4 w-full flex flex-col justify-center items-center text-gray-500 border-2 border-gray-300"
+      data-testid="accept_or_deny_container">
+      <h3 className="font-bold">{t("consent.new_message_request")}</h3>
+      <p>{t("consent.new_message_request_description")}</p>
+      <div className="flex w-full justify-between p-3 gap-2">
+        <button
+          type="button"
+          className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
+          onClick={() => {
+            void allow([address]);
+            setModalOpen(false);
+            setChangedConsentCount(changedConsentCount + 1);
+          }}>
+          {t("consent.accept")}
+        </button>
+        <button
+          type="button"
+          className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
+          onClick={() => {
+            void deny([address]);
+            setModalOpen(false);
+            setChangedConsentCount(changedConsentCount + 1);
+          }}>
+          {t("consent.block")}
+        </button>
+      </div>
+    </div>
+  ) : null;
+};

src/component-library/components/FullConversation/FullConversation.tsx

@@ -1,14 +1,11 @@
 import { useTranslation } from "react-i18next";
 import type { VirtuosoHandle } from "react-virtuoso";
 import { Virtuoso } from "react-virtuoso";
-import { useMemo, useRef, useState } from "react";
-import { useConsent } from "@xmtp/react-sdk";
-import { useXmtpStore } from "../../../store/xmtp";
+import { useMemo, useRef } from "react";
 
 interface FullConversationProps {
   messages?: Array<JSX.Element | null>;
   isLoading?: boolean;
-  address: string;
 }
 
 const LoadingMessage: React.FC = () => {
@@ -31,51 +28,9 @@ const BeginningMessage: React.FC = () => {
   );
 };
 
-const AcceptOrDeny = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { allow, deny } = useConsent();
-  const activeTab = useXmtpStore((s) => s.activeTab);
-  const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
-  const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount);
-
-  const [modalOpen, setModalOpen] = useState(true);
-
-  return activeTab === "requests" && modalOpen ? (
-    <div
-      className="bg-gray-100 p-4 w-full flex flex-col justify-center items-center text-gray-500 border-2 border-gray-300"
-      data-testid="accept_or_deny_container">
-      <h3 className="font-bold">{t("consent.new_message_request")}</h3>
-      <p>{t("consent.new_message_request_description")}</p>
-      <div className="flex w-full justify-between p-3 gap-2">
-        <button
-          type="button"
-          className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
-          onClick={() => {
-            void allow([address]);
-            setModalOpen(false);
-            setChangedConsentCount(changedConsentCount + 1);
-          }}>
-          {t("consent.accept")}
-        </button>
-        <button
-          type="button"
-          className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
-          onClick={() => {
-            void deny([address]);
-            setModalOpen(false);
-            setChangedConsentCount(changedConsentCount + 1);
-          }}>
-          {t("consent.block")}
-        </button>
-      </div>
-    </div>
-  ) : null;
-};
-
 export const FullConversation = ({
   messages = [],
   isLoading = false,
-  address,
 }: FullConversationProps) => {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const filteredMessages = useMemo(() => {
@@ -87,9 +42,8 @@ export const FullConversation = ({
         <BeginningMessage key="beginning" />
       ),
       ...filtered,
-      <AcceptOrDeny key={address} address={address} />,
     ];
-  }, [isLoading, messages, address]);
+  }, [isLoading, messages]);
 
   return (
     <Virtuoso

src/controllers/FullConversationController.tsx

@@ -18,6 +18,7 @@ import { updateConversationIdentity } from "../helpers/conversation";
 import SnowEffect from "../component-library/components/ScreenEffects/SnowEffect";
 import RainEffect from "../component-library/components/ScreenEffects/RainEffect";
 import { useXmtpStore } from "../store/xmtp";
+import { AcceptOrDeny } from "../component-library/components/FullConversation/AcceptOrDeny";
 
 type FullConversationControllerProps = {
   conversation: CachedConversation;
@@ -112,11 +113,8 @@ export const FullConversationController: React.FC<
       ) : effect === "RAIN" ? (
         <RainEffect messageId={messageId} key={messageId} />
       ) : null}
-      <FullConversation
-        isLoading={isLoading}
-        messages={messagesWithDates}
-        address={conversation.peerAddress}
-      />
+      <FullConversation isLoading={isLoading} messages={messagesWithDates} />
+      <AcceptOrDeny address={conversation.peerAddress} />
     </div>
   );
 };