feat: header consent changes

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

@@ -1,7 +1,9 @@
-import { ChevronLeftIcon, XCircleIcon } from "@heroicons/react/outline";
+import { ChevronLeftIcon } from "@heroicons/react/outline";
 import { useTranslation } from "react-i18next";
+import { TAILWIND_MD_BREAKPOINT, classNames } from "../../../helpers";
+import useWindowSize from "../../../hooks/useWindowSize";
+import type { ActiveTab } from "../../../store/xmtp";
 import { Avatar } from "../Avatar/Avatar";
-import { classNames } from "../../../helpers";
 
 interface AddressInputProps {
   /**
@@ -50,6 +52,10 @@ interface AddressInputProps {
    * Is there a right icon click event that needs to be handled?
    */
   onRightIconClick?: () => void;
+  /**
+   * Currently Active Tab
+   */
+  activeTab: ActiveTab;
 }
 
 export const AddressInput = ({
@@ -61,9 +67,12 @@ export const AddressInput = ({
   value,
   onLeftIconClick,
   onRightIconClick,
+  activeTab,
 }: AddressInputProps) => {
   const { t } = useTranslation();
   const subtextColor = isError ? "text-red-600" : "text-gray-500";
+  const [width] = useWindowSize();
+  const isMobileView = width <= TAILWIND_MD_BREAKPOINT;
   return (
     <div
       className={classNames(
@@ -124,12 +133,22 @@ export const AddressInput = ({
           </div>
         </div>
       </form>
-      {onRightIconClick && (
-        <XCircleIcon
-          onClick={onRightIconClick}
-          height="24"
-          className="text-red-600 cursor-pointer"
-        />
+      {onRightIconClick && activeTab === "messages" && (
+        <button
+          type="button"
+          className="text-indigo-600 font-bold text-md"
+          onClick={onRightIconClick}>
+          {t("consent.block")}
+        </button>
+      )}
+      {/* Check for mobile view to avoid having multiple block elements visible on Desktop */}
+      {isMobileView && onRightIconClick && activeTab === "blocked" && (
+        <button
+          type="button"
+          className="text-indigo-600 font-bold text-md"
+          onClick={onRightIconClick}>
+          {t("consent.unblock")}
+        </button>
       )}
     </div>
   );

src/controllers/AddressInputController.tsx

@@ -22,9 +22,10 @@ export const AddressInputController = () => {
   const setConversationTopic = useXmtpStore((s) => s.setConversationTopic);
   const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
   const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount);
+  const activeTab = useXmtpStore((s) => s.activeTab);
 
   const { getCachedByPeerAddress, getCachedByTopic } = useConversation();
-  const { deny } = useConsent();
+  const { deny, allow } = useConsent();
 
   // manage address input state
   useAddressInput();
@@ -105,9 +106,15 @@ export const AddressInputController = () => {
         setConversationTopic("");
       }}
       onRightIconClick={() => {
-        void deny([recipientAddress]);
-        setChangedConsentCount(changedConsentCount + 1);
+        if (activeTab === "messages") {
+          void deny([recipientAddress]);
+          setChangedConsentCount(changedConsentCount + 1);
+        } else if (activeTab === "blocked") {
+          void allow([recipientAddress]);
+          setChangedConsentCount(changedConsentCount + 1);
+        }
       }}
+      activeTab={activeTab}
     />
   );
 };

src/locales/en_US.json

@@ -86,9 +86,7 @@
     "share_code": "Share the power of the XMTP network with your friends, family and colleagues",
     "share_link": "Copy your share link",
     "share_qr_code": "Share QR Code",
-    "report_bug": "Report a bug",
-    "allow": "Allow",
-    "deny": "Deny"
+    "report_bug": "Report a bug"
   },
   "consent": {
     "accept": "Accept",

src/locales/hi_IN.json

@@ -62,9 +62,17 @@
     "share_code": "XMTP नेटवर्क की शक्ति को अपने मित्रों, परिवार और सहकर्मियों के साथ साझा करें",
     "share_link": "अपने शेयर लिंक को कॉपी करें",
     "share_qr_code": "क्यूआर कोड साझा करें",
-    "report_bug": "बग रिपोर्ट करो",
-    "allow": "स्वीकार करना",
-    "deny": "अस्वीकार करना"
+    "report_bug": "बग रिपोर्ट करो"
+  },
+  "consent": {
+    "accept": "लेना",
+    "block": "खंड",
+    "unblock": "खुलना",
+    "messages": "संदेशों",
+    "requests": "अनुरोध",
+    "blocked": "अवरोधित",
+    "new_message_request": "नया संदेश अनुरोध",
+    "new_message_request_description": "आपने पहले कभी इस वॉलेट पते से बातचीत नहीं की है। आप क्या करना चाहेंगे?"
   },
   "aria_labels": {
     "address_input": "पता इनपुट",