Merge pull request #422 from xmtp-labs/dj/portable-consent-changes

Portable Consent Changes

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

@@ -1,7 +1,4 @@
-import {
-  ChevronLeftIcon,
-  InformationCircleIcon,
-} from "@heroicons/react/outline";
+import { ChevronLeftIcon, XCircleIcon } from "@heroicons/react/outline";
 import { useTranslation } from "react-i18next";
 import { Avatar } from "../Avatar/Avatar";
 import { classNames } from "../../../helpers";
@@ -41,10 +38,6 @@ interface AddressInputProps {
    * Upon submit, is something loading?
    */
   isLoading?: boolean;
-  /**
-   * Is there a tooltip click event that needs to be handled?
-   */
-  onTooltipClick?: () => void;
   /**
    * Input Value
    */
@@ -53,6 +46,10 @@ interface AddressInputProps {
    * Is there a left icon click event that needs to be handled?
    */
   onLeftIconClick?: () => void;
+  /**
+   * Is there a right icon click event that needs to be handled?
+   */
+  onRightIconClick?: () => void;
 }
 
 export const AddressInput = ({
@@ -61,9 +58,9 @@ export const AddressInput = ({
   avatarUrlProps,
   onChange,
   isError,
-  onTooltipClick,
   value,
   onLeftIconClick,
+  onRightIconClick,
 }: AddressInputProps) => {
   const { t } = useTranslation();
   const subtextColor = isError ? "text-red-600" : "text-gray-500";
@@ -127,8 +124,12 @@ export const AddressInput = ({
           </div>
         </div>
       </form>
-      {onTooltipClick && (
-        <InformationCircleIcon onClick={onTooltipClick} height="24" />
+      {onRightIconClick && (
+        <XCircleIcon
+          onClick={onRightIconClick}
+          height="24"
+          className="text-red-600 cursor-pointer"
+        />
       )}
     </div>
   );

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

@@ -35,7 +35,8 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
   const { t } = useTranslation();
   const { allow, deny } = useConsent();
   const activeTab = useXmtpStore((s) => s.activeTab);
-  const setActiveTab = useXmtpStore((s) => s.setActiveTab);
+  const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
+  const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount);
 
   const [modalOpen, setModalOpen] = useState(true);
 
@@ -51,8 +52,8 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           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]);
-            setActiveTab("messages");
             setModalOpen(false);
+            setChangedConsentCount(changedConsentCount + 1);
           }}>
           {t("consent.accept")}
         </button>
@@ -61,8 +62,8 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           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]);
-            setActiveTab("blocked");
             setModalOpen(false);
+            setChangedConsentCount(changedConsentCount + 1);
           }}>
           {t("consent.block")}
         </button>

src/controllers/AddressInputController.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useConversation } from "@xmtp/react-sdk";
+import { useConversation, useConsent } from "@xmtp/react-sdk";
 import { AddressInput } from "../component-library/components/AddressInput/AddressInput";
 import { getRecipientInputSubtext, shortAddress } from "../helpers";
 import useWindowSize from "../hooks/useWindowSize";
@@ -20,7 +20,11 @@ export const AddressInputController = () => {
   const setRecipientInput = useXmtpStore((s) => s.setRecipientInput);
   const setStartedFirstMessage = useXmtpStore((s) => s.setStartedFirstMessage);
   const setConversationTopic = useXmtpStore((s) => s.setConversationTopic);
+  const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
+  const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount);
+
   const { getCachedByPeerAddress, getCachedByTopic } = useConversation();
+  const { deny } = useConsent();
 
   // manage address input state
   useAddressInput();
@@ -100,6 +104,10 @@ export const AddressInputController = () => {
         setStartedFirstMessage(false);
         setConversationTopic("");
       }}
+      onRightIconClick={() => {
+        void deny([recipientAddress]);
+        setChangedConsentCount(changedConsentCount + 1);
+      }}
     />
   );
 };