Dm deeplink (#800)

* dm deeplink

* deeplink

* Re-org dev tool app

* Re-org error modal

* Re-org redirects

* Refactor navbar state

* Fix redirects

* Add LoadingMessage component

* Adjust no convos message styling

* Add messages to load DM route

* Remove build artifact

* Fix type

* deeplink

---------

Co-authored-by: Ry Racherbaumer <ry@xmtp.com>

Author: humanagent

apps/xmtp.chat/package.json

@@ -48,6 +48,7 @@
     "postcss-simple-vars": "^7.0.1",
     "tsconfig": "workspace:*",
     "typescript": "^5.7.3",
-    "vite": "^6.0.7"
+    "vite": "^6.0.7",
+    "vite-tsconfig-paths": "npm:^5.1.4"
   }
 }

apps/xmtp.chat/src/components/AddressBadge.tsx

@@ -1,6 +1,6 @@
 import { Badge, Flex, Text, Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
-import { shortAddress } from "../helpers/address";
+import { shortAddress } from "@/helpers/address";
 
 export type AddressTooltipLabelProps = {
   address: string;

apps/xmtp.chat/src/components/App.tsx

@@ -1,9 +1,9 @@
 import { Button, Flex, useMatches } from "@mantine/core";
 import { useEffect, useRef } from "react";
 import { useNavigate } from "react-router";
-import { useClient } from "../hooks/useClient";
-import { IconMessagePlus } from "../icons/IconMessagePlus";
-import { useRefManager } from "./RefManager";
+import { useRefManager } from "@/contexts/RefManager";
+import { useClient } from "@/hooks/useClient";
+import { IconMessagePlus } from "@/icons/IconMessagePlus";
 
 export const Actions: React.FC = () => {
   const { client } = useClient();

apps/xmtp.chat/src/components/Actions.tsx apps/xmtp.chat/src/components/App/Actions.tsx

@@ -0,0 +1,48 @@
+import { AppShell } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { AppFooter } from "@/components/App/AppFooter";
+import { AppHeader } from "@/components/App/AppHeader";
+import { ErrorModal } from "@/components/App/ErrorModal";
+import { useAppState } from "@/contexts/AppState";
+import { useAnalytics } from "@/hooks/useAnalytics";
+import { useRedirects } from "@/hooks/useRedirects";
+import { Main } from "@/routes/Main";
+import { Navbar } from "@/routes/Navbar";
+import classes from "./App.module.css";
+
+export const App: React.FC = () => {
+  useRedirects();
+  useAnalytics();
+  const [opened, { toggle }] = useDisclosure();
+  const { navbar } = useAppState();
+
+  return (
+    <>
+      <ErrorModal />
+      <AppShell
+        header={{ height: 68 }}
+        footer={{
+          height: 64,
+        }}
+        navbar={{
+          width: { base: 300, lg: 420 },
+          breakpoint: "sm",
+          collapsed: { desktop: !navbar, mobile: !opened },
+        }}
+        padding="md">
+        <AppShell.Header>
+          <AppHeader opened={opened} toggle={toggle} collapsed={!navbar} />
+        </AppShell.Header>
+        <AppShell.Navbar className={classes.navbar}>
+          <Navbar />
+        </AppShell.Navbar>
+        <AppShell.Main className={classes.main}>
+          <Main />
+        </AppShell.Main>
+        <AppShell.Footer display="flex" className={classes.footer}>
+          <AppFooter />
+        </AppShell.Footer>
+      </AppShell>
+    </>
+  );
+};

apps/xmtp.chat/src/components/App.module.css apps/xmtp.chat/src/components/App/App.module.css

@@ -1,5 +1,5 @@
 import { Anchor, Box, Flex, Group, Image, Text } from "@mantine/core";
-import logo from "../assets/xmtp-icon.png";
+import logo from "@/assets/xmtp-icon.png";
 
 export const AppFooter: React.FC = () => {
   return (

apps/xmtp.chat/src/components/App/App.tsx

@@ -1,7 +1,7 @@
 import { Burger, Button, Flex } from "@mantine/core";
 import { useNavigate } from "react-router";
-import { shortAddress } from "../helpers/address";
-import { useClient } from "../hooks/useClient";
+import { shortAddress } from "@/helpers/address";
+import { useClient } from "@/hooks/useClient";
 import { Actions } from "./Actions";
 import classes from "./AppHeader.module.css";
 import { Connection } from "./Connection";

apps/xmtp.chat/src/components/AppFooter.tsx apps/xmtp.chat/src/components/App/AppFooter.tsx

@@ -7,12 +7,12 @@ import { type Hex } from "viem";
 import { generatePrivateKey } from "viem/accounts";
 import { useConnect, useDisconnect, useWalletClient } from "wagmi";
 import { injected } from "wagmi/connectors";
-import { createEphemeralSigner, createSigner } from "../helpers/createSigner";
-import { useClient } from "../hooks/useClient";
-import { IconLogout } from "../icons/IconLogout";
-import { IconUser } from "../icons/IconUser";
-import { useRefManager } from "./RefManager";
-import { Settings } from "./Settings";
+import { Settings } from "@/components/Settings/Settings";
+import { useRefManager } from "@/contexts/RefManager";
+import { createEphemeralSigner, createSigner } from "@/helpers/createSigner";
+import { useClient } from "@/hooks/useClient";
+import { IconLogout } from "@/icons/IconLogout";
+import { IconUser } from "@/icons/IconUser";
 
 export const Disconnect: React.FC = () => {
   const { disconnect } = useDisconnect();

apps/xmtp.chat/src/components/AppHeader.module.css apps/xmtp.chat/src/components/App/AppHeader.module.css

@@ -0,0 +1,58 @@
+import { Button, Group, Modal, ScrollArea, Stack, Title } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { CodeWithCopy } from "@/components/CodeWithCopy";
+
+export const ErrorModal: React.FC = () => {
+  const [unhandledRejectionError, setUnhandledRejectionError] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+      setUnhandledRejectionError(
+        (event.reason as Error).message || "Unknown error",
+      );
+    };
+    window.addEventListener("unhandledrejection", handleUnhandledRejection);
+    return () => {
+      window.removeEventListener(
+        "unhandledrejection",
+        handleUnhandledRejection,
+      );
+    };
+  }, []);
+
+  return unhandledRejectionError ? (
+    <Modal
+      opened={!!unhandledRejectionError}
+      onClose={() => {
+        setUnhandledRejectionError(null);
+      }}
+      withCloseButton={false}
+      centered>
+      <Stack gap="md">
+        <Title order={4}>Application error</Title>
+        <ScrollArea>
+          <CodeWithCopy
+            code={JSON.stringify(unhandledRejectionError, null, 2)}
+          />
+        </ScrollArea>
+        <Group justify="space-between">
+          <Button
+            variant="default"
+            component="a"
+            href="https://github.com/xmtp/xmtp-js/issues/new/choose"
+            target="_blank">
+            Report issue
+          </Button>
+          <Button
+            onClick={() => {
+              setUnhandledRejectionError(null);
+            }}>
+            OK
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  ) : null;
+};

apps/xmtp.chat/src/components/AppHeader.tsx apps/xmtp.chat/src/components/App/AppHeader.tsx

@@ -1,5 +1,5 @@
 import { Button, Stack, Text, Title, useMatches } from "@mantine/core";
-import { useRefManager } from "./RefManager";
+import { useRefManager } from "@/contexts/RefManager";
 
 export const SelectConversation = () => {
   const { getRef } = useRefManager();

apps/xmtp.chat/src/components/Connection.tsx apps/xmtp.chat/src/components/App/Connection.tsx

@@ -10,9 +10,16 @@ import {
 } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import type { XmtpEnv } from "@xmtp/browser-sdk";
-import { useRefManager } from "./RefManager";
+import { useEffect } from "react";
+import { useAppState } from "@/contexts/AppState";
+import { useRefManager } from "@/contexts/RefManager";
 
 export const Welcome = () => {
+  const { setNavbar } = useAppState();
+  useEffect(() => {
+    setNavbar(false);
+  }, []);
+
   const { getRef } = useRefManager();
   const [network] = useLocalStorage<XmtpEnv>({
     key: "XMTP_NETWORK",

apps/xmtp.chat/src/components/App/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import { Badge, Button, Text, Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
-import { IconCopy } from "../icons/IconCopy";
+import { IconCopy } from "@/icons/IconCopy";
 import classes from "./BadgeWithCopy.module.css";
 
 type CopyIconProps = {

apps/xmtp.chat/src/components/SelectConversation.tsx apps/xmtp.chat/src/components/App/SelectConversation.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex, TextInput } from "@mantine/core";
 import type { Conversation } from "@xmtp/browser-sdk";
 import { useState } from "react";
-import { useConversation } from "../hooks/useConversation";
+import { useConversation } from "@/hooks/useConversation";
 
 export type ComposerProps = {
   conversation: Conversation;

apps/xmtp.chat/src/components/Welcome.tsx apps/xmtp.chat/src/components/App/Welcome.tsx

@@ -11,11 +11,10 @@ import {
 import type { Conversation as XmtpConversation } from "@xmtp/browser-sdk";
 import { useEffect } from "react";
 import { Link, Outlet } from "react-router";
-import { useBodyClass } from "../hooks/useBodyClass";
-import { useConversation } from "../hooks/useConversation";
+import { Messages } from "@/components/Messages/Messages";
+import { useBodyClass } from "@/hooks/useBodyClass";
+import { useConversation } from "@/hooks/useConversation";
 import { Composer } from "./Composer";
-import { Messages } from "./Messages";
-import classes from "./ScrollFade.module.css";
 
 export type ConversationProps = {
   conversation?: XmtpConversation;
@@ -88,7 +87,7 @@ export const Conversation: React.FC<ConversationProps> = ({
                   {messages.length === 0 && <Text>No messages</Text>}
                 </Stack>
               ) : (
-                <ScrollArea type="scroll" className={classes.root}>
+                <ScrollArea type="scroll" className="scrollfade">
                   <Messages messages={messages} />
                 </ScrollArea>
               )}

apps/xmtp.chat/src/components/BadgeWithCopy.tsx

@@ -1,8 +1,8 @@
 import type { Conversation as XmtpConversation } from "@xmtp/browser-sdk";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router";
-import { useBodyClass } from "../hooks/useBodyClass";
-import { useConversations } from "../hooks/useConversations";
+import { useBodyClass } from "@/hooks/useBodyClass";
+import { useConversations } from "@/hooks/useConversations";
 import { Conversation } from "./Conversation";
 
 export const LoadConversation: React.FC = () => {