Mobile messaging base, adds indexed db to mobile

packages/app-extension/src/app/Router.tsx

@@ -25,6 +25,7 @@ import {
   useEnabledBlockchains,
   useKeyringStoreState,
 } from "@coral-xyz/recoil";
+import { AuthenticatedSync } from "@coral-xyz/tamagui";
 import { styles, useCustomTheme } from "@coral-xyz/themes";
 import { Block as BlockIcon } from "@mui/icons-material";
 import { AnimatePresence, motion } from "framer-motion";
@@ -38,7 +39,6 @@ import {
   ApproveAllTransactions,
   ApproveTransaction,
 } from "../components/Unlocked/Approvals/ApproveTransaction";
-import { AuthenticatedSync } from "../components/Unlocked/AuthenticatedSync";
 import { WithAuth } from "../components/Unlocked/WithAuth";
 import { refreshFeatureGates } from "../gates/FEATURES";
 import { sanitizeTransactionWithFeeConfig } from "../utils/solana";

packages/app-extension/src/components/Unlocked/Balances/Notifications.tsx

@@ -16,7 +16,6 @@ import {
   ProxyImage,
   useBreakpoints,
   UserAction,
-  useUserMetadata,
 } from "@coral-xyz/react-common";
 import {
   unreadCount,
@@ -26,6 +25,7 @@ import {
   useUpdateFriendships,
   useUser,
 } from "@coral-xyz/recoil";
+import { useUserMetadata } from "@coral-xyz/tamagui";
 import { styles, useCustomTheme } from "@coral-xyz/themes";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import { IconButton, List, ListItem, Typography } from "@mui/material";

packages/app-extension/src/components/common/Layout/Router.tsx

@@ -18,7 +18,7 @@ import {
   ProfileScreen,
   RequestsScreen,
 } from "@coral-xyz/message-sdk";
-import { useBreakpoints, useUsersMetadata } from "@coral-xyz/react-common";
+import { useBreakpoints } from "@coral-xyz/react-common";
 import type { SearchParamsFor } from "@coral-xyz/recoil";
 import {
   useDarkMode,
@@ -27,6 +27,7 @@ import {
   useRedirectUrl,
   useUser,
 } from "@coral-xyz/recoil";
+import { useUsersMetadata } from "@coral-xyz/tamagui";
 import { useCustomTheme } from "@coral-xyz/themes";
 import { Typography } from "@mui/material";
 import { AnimatePresence } from "framer-motion";
@@ -418,16 +419,16 @@ function useNavBar() {
           {pathname.startsWith("/balances")
             ? "Balances"
             : pathname.startsWith("/apps")
-              ? "Applications"
-              : pathname.startsWith("/messages") && !isXs
-                ? ""
-                : pathname.startsWith("/messages")
-                  ? "Messages"
-                  : pathname.startsWith("/nfts")
-                    ? "Collectibles"
-                    : pathname.startsWith("/notifications")
-                      ? "Notifications"
-                      : "Recent Activity"}
+            ? "Applications"
+            : pathname.startsWith("/messages") && !isXs
+            ? ""
+            : pathname.startsWith("/messages")
+            ? "Messages"
+            : pathname.startsWith("/nfts")
+            ? "Collectibles"
+            : pathname.startsWith("/notifications")
+            ? "Notifications"
+            : "Recent Activity"}
         </Typography>
       </div>
     );
@@ -454,7 +455,7 @@ function useNavBar() {
 
   const notchViewComponent =
     pathname === "/nfts/chat" || pathname === "/messages/groupchat" ? (
-      <ChatDrawer setOpenDrawer={() => { }} />
+      <ChatDrawer setOpenDrawer={() => {}} />
     ) : null;
 
   return {
@@ -466,8 +467,8 @@ function useNavBar() {
       pathname === "/messages/chat"
         ? image
         : pathname === "/messages/groupchat" && props.id === "backpack-chat"
-          ? "https://user-images.githubusercontent.com/321395/206757416-a80e662a-0ccc-41cc-a20f-ff397755d47f.png"
-          : undefined,
+        ? "https://user-images.githubusercontent.com/321395/206757416-a80e662a-0ccc-41cc-a20f-ff397755d47f.png"
+        : undefined,
     isVerified:
       (pathname === "/messages/groupchat" && props.id === "backpack-chat") ||
       (pathname === "/messages/chat" && BACKPACK_TEAM.includes(props.userId)),

packages/app-mobile/src/components/messaging/Inbox.tsx

@@ -0,0 +1,228 @@
+import { useState } from "react";
+import { Button, Image, ScrollView, Text, TextInput, View } from "react-native";
+
+import { CHAT_MESSAGES, SubscriptionType } from "@coral-xyz/common";
+import { createEmptyFriendship } from "@coral-xyz/db";
+import {
+  useFriendships,
+  useGroupCollections,
+  useRequestsCount,
+  useUser,
+} from "@coral-xyz/recoil";
+import { SignalingManager, useChatsWithMetadata } from "@coral-xyz/tamagui";
+import { v4 as uuidv4 } from "uuid";
+
+export const Inbox = () => {
+  const { uuid } = useUser();
+  const activeChats = useFriendships({ uuid });
+  const requestCount = useRequestsCount({ uuid });
+  const groupCollections = useGroupCollections({ uuid });
+  const [selectedChat, setSelectedChat] = useState<{
+    image: string;
+    name: string;
+    id: string;
+    remoteUserId: string;
+    remoteUsername: string;
+  } | null>(null);
+  const [selectedGroup, setSelectedGroup] = useState<{
+    image: string;
+    name: string;
+    id: string;
+  } | null>(null);
+
+  if (selectedGroup) {
+    return (
+      <View style={{ paddingTop: 100 }}>
+        <Text
+          onPress={() => {
+            setSelectedGroup(null);
+          }}
+        >
+          Back
+        </Text>
+        <View>
+          <Text>{selectedGroup.name}</Text>
+          <Image
+            src={selectedGroup.image || ""}
+            style={{ height: 20, width: 20, borderRadius: 10 }}
+          />
+        </View>
+        <ChatMessages roomId={selectedGroup.id} type="collection" />
+      </View>
+    );
+  }
+
+  if (selectedChat) {
+    return (
+      <View style={{ paddingTop: 100 }}>
+        <Text
+          onPress={() => {
+            setSelectedChat(null);
+          }}
+        >
+          Back
+        </Text>
+        <View>
+          <Text>{selectedChat.name}</Text>
+          <Image
+            src={selectedChat.image || ""}
+            style={{ height: 20, width: 20, borderRadius: 10 }}
+            remoteUserId={selectedChat.remoteUserId}
+          />
+        </View>
+        <ChatMessages roomId={selectedChat.id} type="individual" />
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={{ padding: 20, paddingTop: 100 }}>
+      <Text>Messaging inbox</Text>
+      {groupCollections
+        .filter((x) => x.image && x.name)
+        .map((x) => (
+          <View
+            onTouchEnd={() => {
+              setSelectedGroup({
+                name: x.name || "",
+                image: x.image || "",
+                id: x.collectionId,
+              });
+            }}
+            key={x.collectionId}
+            style={{
+              display: "flex",
+              borderStyle: "solid",
+              borderColor: "black",
+            }}
+          >
+            <View>
+              <Image
+                src={x.image || ""}
+                style={{ height: 20, width: 20, borderRadius: 10 }}
+              />
+            </View>
+            <View>
+              <Text>{x.name}</Text>
+            </View>
+          </View>
+        ))}
+      {activeChats.map((x) => (
+        <View
+          onTouchEnd={() => {
+            setSelectedChat({
+              name: x.remoteUsername || "",
+              image: x.remoteUserImage || "",
+              id: x.friendshipId,
+              remoteUserId: x.remoteUserId,
+              remoteUsername: x.remoteUsername,
+            });
+          }}
+          key={x.friendshipId}
+          style={{ display: "flex" }}
+        >
+          <View>
+            <Image
+              src={x.remoteUserImage || ""}
+              style={{ height: 20, width: 20, borderRadius: 10 }}
+            />
+          </View>
+          <View>
+            <Text>{x.remoteUsername}</Text>
+          </View>
+        </View>
+      ))}
+    </ScrollView>
+  );
+};
+
+function ChatMessages({
+  roomId,
+  type,
+  remoteUserId,
+  remoteUsername,
+}: {
+  roomId: string;
+  type: SubscriptionType;
+  remoteUserId?: string;
+  remoteUsername?: string;
+}) {
+  const { chats, usersMetadata } = useChatsWithMetadata({
+    room: roomId.toString(),
+    type,
+  });
+  const [messageText, setMessageText] = useState("");
+  const { uuid } = useUser();
+
+  return (
+    <View>
+      <View style={{ height: "70%" }}>
+        <ScrollView>
+          {chats.map((c) => (
+            <ChatMessage image={c.image} message={c.message} />
+          ))}
+        </ScrollView>
+      </View>
+
+      <View>
+        <TextInput
+          style={{
+            borderWidth: 1,
+            padding: 10,
+          }}
+          onChangeText={setMessageText}
+          value={messageText}
+        />
+        <Button
+          title="Send"
+          onPress={async () => {
+            const client_generated_uuid = uuidv4();
+
+            if (chats.length === 0 && type === "individual") {
+              // If it's the first time the user is interacting,
+              // create an in memory friendship
+              await createEmptyFriendship(uuid, remoteUserId || "", {
+                last_message_sender: uuid,
+                last_message_timestamp: new Date().toISOString(),
+                last_message: messageText,
+                last_message_client_uuid: client_generated_uuid,
+                remoteUsername,
+                id: roomId,
+              });
+              SignalingManager.getInstance().onUpdateRecoil({
+                type: "friendship",
+              });
+            }
+
+            SignalingManager.getInstance()?.send({
+              type: CHAT_MESSAGES,
+              payload: {
+                messages: [
+                  {
+                    client_generated_uuid,
+                    message: messageText,
+                    message_kind: "text",
+                  },
+                ],
+                type,
+                room: roomId.toString(),
+              },
+            });
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+function ChatMessage({ image, message }: { image: string; message: string }) {
+  return (
+    <View>
+      <Image
+        src={image || ""}
+        style={{ height: 20, width: 20, borderRadius: 10 }}
+      />
+      <Text>{message}</Text>
+    </View>
+  );
+}

packages/app-mobile/src/navigation/RootNavigator.tsx

@@ -14,6 +14,8 @@ import {
 } from "./OnboardingNavigator";
 import { UnlockedNavigator } from "./UnlockedNavigator";
 import { NotFoundScreen } from "../screens/NotFoundScreen";
+// import {AuthenticatedSync} from "@coral-xyz/tamagui";
+// import {Inbox} from "~components/messaging/Inbox";
 
 export function RootNavigation({
   colorScheme,
@@ -33,6 +35,12 @@ function RootNavigator(): JSX.Element {
   const [status, setStatus] = useState(null);
   const keyringStoreState = useKeyringStoreState();
 
+  /* Uncomment to see user inbox.
+  return <>
+    <AuthenticatedSync />
+    <Inbox />
+  </>
+   */
   switch (keyringStoreState) {
     case KeyringStoreStateEnum.NeedsOnboarding:
       return <OnboardingNavigator onStart={setStatus} />;

packages/chat-sdk/package.json

@@ -15,6 +15,7 @@
     "@coral-xyz/db": "*",
     "@coral-xyz/recoil": "*",
     "@coral-xyz/react-common": "*",
+    "@coral-xyz/tamagui": "*",
     "@coral-xyz/themes": "*",
     "@giphy/js-fetch-api": "^4.4.0",
     "@giphy/react-components": "^6.2.0",

packages/chat-sdk/src/components/ChatRoom.tsx

@@ -6,13 +6,13 @@ import type {
 } from "@coral-xyz/common";
 import { CHAT_MESSAGES, SUBSCRIBE } from "@coral-xyz/common";
 import { createEmptyFriendship } from "@coral-xyz/db";
+import { useUser } from "@coral-xyz/recoil";
 import {
   refreshChatsFor,
   refreshUpdatesFor,
   SignalingManager,
   useChatsWithMetadata,
-} from "@coral-xyz/react-common";
-import { useUser } from "@coral-xyz/recoil";
+} from "@coral-xyz/tamagui";
 import { v4 as uuidv4 } from "uuid";
 
 import { MessagePluginRenderer } from "../MessagePluginRenderer";

packages/chat-sdk/src/components/FullScreenChat.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import type { EnrichedMessageWithMetadata } from "@coral-xyz/common";
 import { BACKEND_API_URL } from "@coral-xyz/common";
-import { fetchMoreChatsFor } from "@coral-xyz/react-common";
+import { fetchMoreChatsFor } from "@coral-xyz/tamagui";
 import { useCustomTheme } from "@coral-xyz/themes";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import FileUploadIcon from "@mui/icons-material/FileUploadRounded";