Dev --> Main

package.json

@@ -42,6 +42,7 @@
     "@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/frames-client": "0.2.0",
     "@xmtp/react-sdk": "^5.0.1",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
@@ -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",

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

@@ -2,6 +2,7 @@
 import { Virtuoso } from "react-virtuoso";
 import { EmptyMessage } from "../EmptyMessage/EmptyMessage";
 import { MessagePreviewCard } from "../MessagePreviewCard/MessagePreviewCard";
+import type { ActiveTab } from "../../../store/xmtp";
 
 interface ConversationListProps {
   /**
@@ -20,23 +21,30 @@
    * Has a value been entered for the recipient?
    */
   hasRecipientEnteredValue?: boolean;
+  /**
+   * Which tab are we on?
+   */
+  activeTab: ActiveTab;
 }
 
 export const ConversationList = ({
   messages = [],
   isLoading,
   setStartedFirstMessage,
   hasRecipientEnteredValue,
+  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 ? (
     <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>
   ) : (
     <Virtuoso

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>
+);