chore: grab most upstream changes

package.json

@@ -42,7 +42,8 @@
     "@xmtp/content-type-remote-attachment": "^1.1.4",
     "@xmtp/content-type-reply": "^1.1.5",
     "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
-    "@xmtp/react-sdk": "3.1.1",
+    "@xmtp/frames-client": "0.2.0",
+    "@xmtp/react-sdk": "^3.1.1",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
     "dexie": "^3.2.4",
@@ -63,6 +64,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-media-recorder-2": "^1.6.23",
     "react-medium-image-zoom": "^5.1.6",
+    "react-modal": "^3.16.1",
     "react-qrcode-logo": "^2.9.0",
     "react-router-dom": "^6.12.0",
     "react-timer-hook": "^3.0.6",
@@ -116,7 +118,6 @@
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.4",
     "vite": "^4.3.9",
-    "vite-plugin-rewrite-all": "^1.0.1",
     "vitest": "^0.32.0",
     "walletlink": "^2.4.6"
   }

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/ConversationList/ConversationList.tsx

@@ -1,10 +1,8 @@
-import type { ConsentState } from "@xmtp/react-sdk";
 import type React from "react";
 import { Virtuoso } from "react-virtuoso";
-import { EmptyBlocked } from "../EmptyBlocked/EmptyBlocked";
 import { EmptyMessage } from "../EmptyMessage/EmptyMessage";
-import { EmptyRequest } from "../EmptyRequest/EmptyRequest";
 import { MessagePreviewCard } from "../MessagePreviewCard/MessagePreviewCard";
+import type { ActiveTab } from "../../../store/xmtp";
 
 interface ConversationListProps {
   /**
@@ -24,35 +22,30 @@
    */
   hasRecipientEnteredValue?: boolean;
   /**
-   * Active consentFilter
+   * Which tab are we on?
    */
-  consentFilter: ConsentState;
+  activeTab: ActiveTab;
 }
 
 export const ConversationList = ({
   messages = [],
   isLoading,
   setStartedFirstMessage,
   hasRecipientEnteredValue,
-  consentFilter,
+  activeTab,
 }: ConversationListProps) =>
   !messages?.length && isLoading ? (
     <div className="w-full overflow-hidden h-full flex flex-col justify-start sm:w-full bg-gray-100">
       {Array.from({ length: 12 }).map((_, idx) => (
-        <MessagePreviewCard key={idx} isLoading />
+        <MessagePreviewCard key={idx} isLoading activeTab={activeTab} />
       ))}
     </div>
-  ) : !messages.length &&
-    !isLoading &&
-    !hasRecipientEnteredValue &&
-    consentFilter === "allowed" ? (
+  ) : !messages.length && !isLoading && !hasRecipientEnteredValue ? (
     <div className="w-full overflow-hidden sm:w-full sm:p-4 md:p-8 border border-gray-100 h-full">
-      <EmptyMessage setStartedFirstMessage={setStartedFirstMessage} />
+      {activeTab === "messages" ? (
+        <EmptyMessage setStartedFirstMessage={setStartedFirstMessage} />
+      ) : null}
     </div>
-  ) : !messages.length && !isLoading && consentFilter === "denied" ? (
-    <EmptyBlocked />
-  ) : !messages.length && !isLoading && consentFilter === "unknown" ? (
-    <EmptyRequest />
   ) : (
     <Virtuoso
       className="sm:w-full flex flex-col h-full bg-gray-100 border-x"

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

@@ -0,0 +1,40 @@
+import { GhostButton } from "../GhostButton/GhostButton";
+
+type FrameProps = {
+  image: string;
+  title: string;
+  buttons: string[];
+  handleClick: (buttonNumber: number) => Promise<void>;
+  frameButtonUpdating: number;
+};
+
+export const Frame = ({
+  image,
+  title,
+  buttons,
+  handleClick,
+  frameButtonUpdating,
+}: FrameProps) => (
+  <div className="px-4 md:px-8">
+    <img src={image} className="max-h-80 rounded-lg" alt={title} />
+    <div className="flex flex-col items-center">
+      {buttons?.map((button, index) => {
+        if (!button) {
+          return null;
+        }
+        const handlePress = () => {
+          void handleClick(index + 1);
+        };
+        return (
+          <GhostButton
+            key={button}
+            label={button}
+            onClick={handlePress}
+            isLoading={frameButtonUpdating === index + 1}
+            isDisabled={frameButtonUpdating > 0}
+          />
+        );
+      })}
+    </div>
+  </div>
+);

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

@@ -1,11 +1,14 @@
 import { useTranslation } from "react-i18next";
 import type { VirtuosoHandle } from "react-virtuoso";
 import { Virtuoso } from "react-virtuoso";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
+import { useConsent } from "@xmtp/react-sdk";
+import { useXmtpStore } from "../../../store/xmtp";
 
 interface FullConversationProps {
   messages?: Array<JSX.Element | null>;
   isLoading?: boolean;
+  address: string;
 }
 
 const LoadingMessage: React.FC = () => {
@@ -28,9 +31,51 @@ 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(() => {
@@ -42,8 +87,9 @@ export const FullConversation = ({
         <BeginningMessage key="beginning" />
       ),
       ...filtered,
+      <AcceptOrDeny key={address} address={address} />,
     ];
-  }, [isLoading, messages]);
+  }, [isLoading, messages, address]);
 
   return (
     <Virtuoso