Remove mobile logic, redirect mobile users

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

@@ -70,9 +70,9 @@ export const AddressInput = ({
         !resolvedAddress?.displayAddress
           ? "bg-indigo-50 border-b border-indigo-500"
           : "border-b border-gray-200",
-        "flex items-center px-2 md:px-4 py-3 border-l-0 z-10 max-md:h-fit md:max-h-sm w-full h-16",
+        "flex items-center px-2 md:px-4 py-3 border-l-0 z-10 max-h-sm w-full h-16",
       )}>
-      <div className="max-md:w-fit md:hidden flex w-24 p-0 justify-start">
+      <div className="hidden flex w-24 p-0 justify-start">
         <ChevronLeftIcon onClick={onLeftIconClick} width={24} />
       </div>
       <form
@@ -91,7 +91,7 @@ export const AddressInput = ({
             <input
               data-testid="message-to-input"
               tabIndex={0}
-              className="bg-transparent text-gray-900 px-0 h-4 m-1 ml-0 font-mono max-md:text-[16px] md:text-sm w-full leading-tight border border-2 border-transparent focus:border-transparent focus:ring-0 cursor-text"
+              className="bg-transparent text-gray-900 px-0 h-4 m-1 ml-0 font-mono text-sm w-full leading-tight border border-2 border-transparent focus:border-transparent focus:ring-0 cursor-text"
               id="address"
               type="search"
               spellCheck="false"
@@ -108,13 +108,7 @@ export const AddressInput = ({
             />
           )}
           <div
-            className={classNames(
-              "font-mono",
-              "text-sm",
-              "max-md:text-xs",
-              "h-5",
-              subtextColor,
-            )}
+            className={classNames("font-mono", "text-sm", "h-5", subtextColor)}
             data-testid="message-to-subtext">
             {subtext
               ? t(subtext)

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

@@ -14,16 +14,11 @@ interface HeaderDropdownProps {
    * What is the recipient input?
    */
   recipientInput: string;
-  /**
-   * Boolean to determine if screen width is mobile size
-   */
-  isMobileView?: boolean;
 }
 
 export const HeaderDropdown = ({
   onClick,
   recipientInput,
-  isMobileView,
 }: HeaderDropdownProps) => {
   const { t } = useTranslation();
 
@@ -61,7 +56,7 @@ export const HeaderDropdown = ({
             {t(`consent.${name}`)}
           </button>
         ))}
-        {(recipientInput || isMobileView) && (
+        {recipientInput && (
           <IconButton
             onClick={() => onClick?.()}
             label={<PlusIcon color="white" width="20" />}

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

@@ -9,14 +9,11 @@ interface LearnMoreProps {
     description: string;
     tags: React.ReactNode;
   }>;
-  version: string;
   setStartedFirstMessage: () => void;
 }
 
 export const LearnMore = ({
   highlightedCompanies = [],
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  version,
   setStartedFirstMessage,
 }: LearnMoreProps) => {
   const { t } = useTranslation();

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

@@ -31,15 +31,14 @@ import { ContentTypeScreenEffect } from "@xmtp/experimental-content-type-screen-
 import { IconButton } from "../IconButton/IconButton";
 import { useAttachmentChange } from "../../../hooks/useAttachmentChange";
 import { typeLookup, type contentTypes } from "../../../helpers/attachments";
-import { TAILWIND_MD_BREAKPOINT, classNames } from "../../../helpers";
+import { classNames } from "../../../helpers";
 import type { RecipientAddress } from "../../../store/xmtp";
 import { useXmtpStore } from "../../../store/xmtp";
 import { useVoiceRecording } from "../../../hooks/useVoiceRecording";
 import { useRecordingTimer } from "../../../hooks/useRecordingTimer";
 import "react-tooltip/dist/react-tooltip.css";
 import { useLongPress } from "../../../hooks/useLongPress";
 import { EffectDialog } from "../EffectDialog/EffectDialog";
-import useWindowSize from "../../../hooks/useWindowSize";
 
 type InputProps = {
   /**
@@ -96,8 +95,6 @@ export const MessageInput = ({
   setAttachmentPreview,
   setIsDragActive,
 }: InputProps) => {
-  const [width] = useWindowSize();
-
   const { getCachedByPeerAddress } = useConversation();
   // For effects
   const { sendMessage: _sendMessage } = _useSendMessage();
@@ -126,7 +123,7 @@ export const MessageInput = ({
     textAreaRef?.current?.scrollHeight <= 32
       ? "max-h-8"
       : "max-h-40"
-  } min-h-8 outline-none border-none focus:ring-0 resize-none mx-2 p-1 w-full max-md:text-[16px] md:text-md text-gray-900`;
+  } min-h-8 outline-none border-none focus:ring-0 resize-none mx-2 p-1 w-full text-md text-gray-900`;
 
   useLayoutEffect(() => {
     const MIN_TEXTAREA_HEIGHT = 32;
@@ -246,10 +243,7 @@ export const MessageInput = ({
   ]);
 
   const handleLongPress = () => {
-    // Don't run effect on mobile
-    if (width > TAILWIND_MD_BREAKPOINT) {
-      setOpenEffectDialog(true);
-    }
+    setOpenEffectDialog(true);
   };
 
   const handleSendEffect = (effectType: string) => {

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

@@ -0,0 +1,28 @@
+import { DeviceMobileIcon } from "@heroicons/react/solid";
+import { useTranslation } from "react-i18next";
+
+export const Mobile = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col items-center justify-center h-screen p-4 text-center">
+      <DeviceMobileIcon width="100" className="text-indigo-600" />
+      <h1 className="text-2xl font-bold">{t("mobile.mobile_detected")}</h1>
+      <p className="mt-8">{t("mobile.group_chat_cta")}</p>
+      <a
+        href="https://testflight.apple.com/join/xEJOvzEx"
+        target="_blank"
+        className="flex justify-center text-blue-600 text-center cursor-pointer"
+        rel="noreferrer">
+        https://testflight.apple.com/join/xEJOvzEx
+      </a>
+      <p className="mt-8">{t("mobile.reference_app_cta")}</p>
+      <a
+        href="https://github.com/xmtp-labs/xmtp-inbox-mobile"
+        target="_blank"
+        className="flex justify-center text-blue-600 cursor-pointer"
+        rel="noreferrer">
+        https://github.com/xmtp-labs/xmtp-inbox-mobile
+      </a>
+    </div>
+  );
+};

src/controllers/AddressInputController.tsx

@@ -1,8 +1,7 @@
 import { useEffect } from "react";
 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";
+import { getRecipientInputSubtext } from "../helpers";
 import { useXmtpStore } from "../store/xmtp";
 import { useAddressInput } from "../hooks/useAddressInput";
 
@@ -29,8 +28,6 @@ export const AddressInputController = () => {
   // manage address input state
   useAddressInput();
 
-  const size = useWindowSize();
-
   useEffect(() => {
     const selectConversation = async () => {
       // if there's a valid network address, look for an existing conversation
@@ -80,13 +77,7 @@ export const AddressInputController = () => {
           : ""
       }
       resolvedAddress={{
-        displayAddress:
-          recipientName ??
-          (size[0] < 700
-            ? recipientAddress
-              ? shortAddress(recipientAddress)
-              : ""
-            : recipientAddress ?? ""),
+        displayAddress: recipientName ?? recipientAddress ?? "",
         walletAddress: recipientName
           ? recipientAddress ?? undefined
           : undefined,

src/controllers/ConversationListController.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import { useClient, useConsent, useDb } from "@xmtp/react-sdk";
+import { useConsent, useDb } from "@xmtp/react-sdk";
 import type { CachedConversation } from "@xmtp/react-sdk";
 import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
@@ -27,11 +27,8 @@ export const ConversationListController = ({
   const { isAllowed, isDenied } = useConsent();
 
   const { db } = useDb();
-  // const [messages, setMessages] = useState<CachedMessage[]>([]);
-  // const messagesDb = db.table("messages");
 
   useStreamAllMessages();
-  const { client: walletAddress } = useClient();
   const recipientInput = useXmtpStore((s) => s.recipientInput);
   const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
 
@@ -45,50 +42,19 @@ export const ConversationListController = ({
       }
     };
     void runUpdate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoaded, activeTab, changedConsentCount]);
-
-  // To-do: remove if not needed after consent goes out
-  // useEffect(() => {
-  //   // This may make more sense to come from the React SDK, but we're pulling from here for now
-  //   const fetchMessages = async () =>
-  //     messagesDb
-  //       .where("senderAddress")
-  //       .equals(walletAddress?.address as string)
-  //       .toArray()
-  //       .then((dbMessages: CachedMessage[]) => {
-  //         setMessages(dbMessages);
-  //       })
-  //       .catch((error: Error) => {
-  //         console.error("Error querying messages:", error);
-  //       });
-
-  //   void fetchMessages();
-  // }, [conversations.length, messagesDb, walletAddress?.address]);
+  }, [isLoaded, activeTab, changedConsentCount, conversations, db]);
 
   const messagesToPass = useMemo(() => {
     const conversationsWithTab = conversations.map(
-      (conversation: CachedConversation) => {
-        const tab = isAllowed(conversation.peerAddress)
-          ? "messages"
-          : isDenied(conversation.peerAddress)
-          ? "blocked"
-          : "requests";
-        return (
-          <MessagePreviewCardController
-            key={conversation.topic}
-            convo={conversation}
-            tab={tab}
-          />
-        );
-      },
+      (conversation: CachedConversation) => (
+        <MessagePreviewCardController
+          key={conversation.topic}
+          convo={conversation}
+        />
+      ),
     );
     const sortedConvos = conversationsWithTab.filter(
       (item: NodeWithConsent) => {
-        // To-do: remove commented out code in this block if not needed after consent goes out
-        // const hasSentMessages = messages.find(
-        //   (message) => message?.conversationTopic === item.props.convo.topic,
-        // );
         const isAddressBlocked = isDenied(item.props.convo.peerAddress);
         const isAddressAllowed = isAllowed(item.props.convo.peerAddress);
 
@@ -105,17 +71,7 @@ export const ConversationListController = ({
       },
     );
     return sortedConvos;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    conversations,
-    // messages,
-    isLoading,
-    walletAddress,
-    db,
-    changedConsentCount,
-    isAllowed,
-    isDenied,
-  ]);
+  }, [activeTab, conversations, isAllowed, isDenied]);
 
   return (
     <ConversationList

src/controllers/HeaderDropdownController.tsx

@@ -1,14 +1,11 @@
 import { HeaderDropdown } from "../component-library/components/HeaderDropdown/HeaderDropdown";
-import { TAILWIND_MD_BREAKPOINT } from "../helpers";
-import useWindowSize from "../hooks/useWindowSize";
 import { useXmtpStore } from "../store/xmtp";
 
 export const HeaderDropdownController = () => {
   const resetRecipient = useXmtpStore((s) => s.resetRecipient);
   const setConversationTopic = useXmtpStore((s) => s.setConversationTopic);
   const recipientInput = useXmtpStore((s) => s.recipientInput);
   const setStartedFirstMessage = useXmtpStore((s) => s.setStartedFirstMessage);
-  const [width] = useWindowSize();
 
   return (
     <HeaderDropdown
@@ -18,7 +15,6 @@ export const HeaderDropdownController = () => {
         setConversationTopic();
         setStartedFirstMessage(true);
       }}
-      isMobileView={width <= TAILWIND_MD_BREAKPOINT}
     />
   );
 };

src/controllers/MessagePreviewCardController.tsx

@@ -19,7 +19,6 @@ import { ContentTypeScreenEffect } from "@xmtp/experimental-content-type-screen-
 import { MessagePreviewCard } from "../component-library/components/MessagePreviewCard/MessagePreviewCard";
 import type { ETHAddress } from "../helpers";
 import { shortAddress } from "../helpers";
-import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
 import {
   getCachedPeerAddressAvatar,
@@ -28,13 +27,10 @@ import {
 
 interface MessagePreviewCardControllerProps {
   convo: CachedConversation;
-  tab: ActiveTab;
 }
 
 export const MessagePreviewCardController = ({
   convo,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  tab,
 }: MessagePreviewCardControllerProps) => {
   const { t } = useTranslation();
   const { allow } = useConsent();

src/locales/en_US.json

@@ -62,6 +62,11 @@
     "collapse_header": "Collapse",
     "messages_header": "Messages"
   },
+  "mobile": {
+    "mobile_detected": "It looks like you may be on a mobile device!",
+    "group_chat_cta": "Download the Converse TestFlight to try group chat:",
+    "reference_app_cta": "In addition, please note that our React Native XMTP Reference Application is now live:"
+  },
   "status_messaging": {
     "error_1_header": "Sorry, the app encountered an error",
     "error_1_subheader": "Not to worry. Let’s try again. If the error persists, <0>we're here to help!</0>",

src/pages/inbox.tsx

@@ -23,6 +23,7 @@ import { ConversationListController } from "../controllers/ConversationListContr
 import { useAttachmentChange } from "../hooks/useAttachmentChange";
 import useSelectedConversation from "../hooks/useSelectedConversation";
 import { ReplyThread } from "../component-library/components/ReplyThread/ReplyThread";
+import { Mobile } from "../component-library/components/Mobile/Mobile";
 
 const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
   const navigate = useNavigate();
@@ -118,7 +119,9 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
     }
   };
 
-  return (
+  return size[0] < TAILWIND_MD_BREAKPOINT ? (
+    <Mobile />
+  ) : (
     // Controller for drag-and-drop area
     <div
       className={isDragActive ? "bg-slate-100" : "bg-white"}
@@ -128,28 +131,20 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
       onDrop={onAttachmentChange}>
       <div className="w-full md:h-full overflow-auto flex flex-col md:flex-row">
         <div className="flex">
-          {size[0] > TAILWIND_MD_BREAKPOINT ||
-          (!recipientAddress && !startedFirstMessage) ? (
-            <>
-              <SideNavController />
-              <div className="flex flex-col w-full h-screen overflow-y-auto md:min-w-[350px]">
-                <HeaderDropdownController />
-                <ConversationListController
-                  setStartedFirstMessage={setStartedFirstMessage}
-                />
-              </div>
-            </>
-          ) : null}
+          <SideNavController />
+          <div className="flex flex-col w-full h-screen overflow-y-auto md:min-w-[350px]">
+            <HeaderDropdownController />
+            <ConversationListController
+              setStartedFirstMessage={setStartedFirstMessage}
+            />
+          </div>
         </div>
-        {size[0] > TAILWIND_MD_BREAKPOINT ||
-        recipientAddress ||
-        startedFirstMessage ? (
+        {recipientAddress || startedFirstMessage ? (
           <div className="flex w-full flex-col h-screen overflow-hidden">
             {!conversations.length &&
             !loadingConversations &&
             !startedFirstMessage ? (
               <LearnMore
-                version="replace"
                 setStartedFirstMessage={() => setStartedFirstMessage(true)}
               />
             ) : (