Update for more stable (#433)

app/components/ChannelMessageForm.tsx

@@ -167,6 +167,7 @@ export const ChannelMessageForm = observer(function ChannelMessageForm({
             autoCapitalize="none"
             autoCorrect={true}
             autoComplete="name"
+            multiline={true}
             LeftAccessory={() => (
               <Button
                 onPress={() => imagePicker()}
@@ -217,15 +218,16 @@ const $inputWrapper: ViewStyle = {
   paddingVertical: spacing.extraSmall,
   paddingHorizontal: spacing.large,
   gap: spacing.small,
+  minHeight: 40,
 }
 
 const $input: ViewStyle = {
-  height: 40,
+  minHeight: 40,
   borderWidth: 0,
-  borderRadius: 100,
+  borderRadius: 20,
   backgroundColor: colors.palette.overlay20,
   paddingHorizontal: spacing.medium,
-  paddingVertical: 0,
+  paddingVertical: spacing.tiny,
   marginVertical: 0,
   marginHorizontal: 0,
   alignSelf: "center",

app/components/DirectMessageForm.tsx

@@ -153,6 +153,7 @@ export const DirectMessageForm = observer(function DirectMessageForm({
         value={value}
         autoCapitalize="none"
         autoCorrect={false}
+        multiline={true}
         LeftAccessory={() => (
           <View style={$leftAccessory}>
             <Button
@@ -199,15 +200,16 @@ const $inputWrapper: ViewStyle = {
   paddingVertical: spacing.extraSmall,
   paddingHorizontal: spacing.large,
   gap: spacing.small,
+  minHeight: 40,
 }
 
 const $input: ViewStyle = {
-  height: 40,
+  minHeight: 40,
   borderWidth: 0,
-  borderRadius: 100,
+  borderRadius: 20,
   backgroundColor: colors.palette.overlay20,
   paddingHorizontal: spacing.medium,
-  paddingVertical: 0,
+  paddingVertical: spacing.tiny,
   marginVertical: 0,
   marginHorizontal: 0,
   alignSelf: "center",

app/components/RelayProvider.tsx

@@ -5,7 +5,7 @@ import {
   ArcadeIdentity,
   NostrPool,
   ArcadeDb,
-  ArcadeSocial,
+  // ArcadeSocial,
   ChannelManager,
   PrivateMessageManager,
 } from "app/arclib/src"
@@ -19,7 +19,7 @@ export const RelayContext = createContext({
   contactManager: null as ContactManager,
   profileManager: null as ProfileManager,
   privMessageManager: null as PrivateMessageManager,
-  social: null as ArcadeSocial,
+  // social: null as ArcadeSocial,
 })
 const db: ArcadeDb = connectDb()
 
@@ -38,7 +38,7 @@ export const RelayProvider = observer(function RelayProvider({
   const [pool, _setPool] = useState<NostrPool>(
     () => new NostrPool(ident, db, { skipVerification: true }),
   )
-  const social = useMemo(() => new ArcadeSocial(pool, ident), [pool, ident])
+  // const social = useMemo(() => new ArcadeSocial(pool, ident), [pool, ident])
   const channelManager = useMemo(() => new ChannelManager(pool), [pool])
   const contactManager = useMemo(() => new ContactManager(pool), [pool])
   const profileManager = useMemo(() => new ProfileManager(pool), [pool])
@@ -61,7 +61,7 @@ export const RelayProvider = observer(function RelayProvider({
 
   return (
     <RelayContext.Provider
-      value={{ pool, channelManager, contactManager, profileManager, privMessageManager, social }}
+      value={{ pool, channelManager, contactManager, profileManager, privMessageManager }}
     >
       {children}
     </RelayContext.Provider>

app/components/ScreenWithSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef, useState } from "react"
+import React, { FC, useCallback, useRef, useState } from "react"
 import { Platform, Pressable, View, ViewStyle } from "react-native"
 import { DrawerLayout, DrawerState } from "react-native-gesture-handler"
 import { useSharedValue, withTiming } from "react-native-reanimated"
@@ -8,7 +8,7 @@ import { colors, spacing } from "../theme"
 import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle"
 import { DrawerIconButton } from "./DrawerIconButton"
 import { CompassIcon, LayoutListIcon, PlusIcon } from "lucide-react-native"
-import { useNavigation } from "@react-navigation/native"
+import { useFocusEffect, useNavigation } from "@react-navigation/native"
 
 interface ScreenWithSidebarProps {
   title: string
@@ -17,22 +17,14 @@ interface ScreenWithSidebarProps {
 
 export const ScreenWithSidebar: FC<ScreenWithSidebarProps> = ({ title, children }) => {
   const [open, setOpen] = useState(false)
+
   const drawerRef = useRef<DrawerLayout>()
-  // const listRef = useRef<SectionList>()
   const progress = useSharedValue(0)
+  const $drawerInsets = useSafeAreaInsetsStyle(["top"])
+  // const listRef = useRef<SectionList>()
 
   const { navigate } = useNavigation<any>()
 
-  const toggleDrawer = () => {
-    if (!open) {
-      setOpen(true)
-      drawerRef.current?.openDrawer({ speed: 2 })
-    } else {
-      setOpen(false)
-      drawerRef.current?.closeDrawer({ speed: 2 })
-    }
-  }
-
   /*
   const handleScroll = (sectionIndex: number, itemIndex = 0) => {
     listRef.current.scrollToLocation({
@@ -44,7 +36,17 @@ export const ScreenWithSidebar: FC<ScreenWithSidebarProps> = ({ title, children
   }
   */
 
-  const $drawerInsets = useSafeAreaInsetsStyle(["top"])
+  const toggleDrawer = () => {
+    if (!open) {
+      setOpen(true)
+      drawerRef.current?.openDrawer({ speed: 2 })
+    } else {
+      setOpen(false)
+      drawerRef.current?.closeDrawer({ speed: 2 })
+    }
+  }
+
+  useFocusEffect(useCallback(() => () => drawerRef.current?.closeDrawer({ speed: 2 }), []))
 
   return (
     <DrawerLayout

app/components/User.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, useEffect } from "react"
+import React, { memo, useContext /* useEffect */ } from "react"
 import { AutoImage, RelayContext, Text } from "app/components"
 import { ImageStyle, Pressable, TextStyle, View, ViewStyle } from "react-native"
 import { colors, spacing } from "app/theme"
@@ -18,14 +18,15 @@ export const User = memo(function User({ pubkey, reverse, blinded }: UserProp) {
   const queryClient = useQueryClient()
   const navigation = useNavigation<any>()
 
-  const { pool, social } = useContext(RelayContext)
+  const { pool } = useContext(RelayContext)
   const { userStore } = useStores()
 
-  const [reputation, setReputation] = React.useState(null)
+  // const [reputation, setReputation] = React.useState(NaN)
 
   const { data: profile } = useQuery({
     queryKey: ["user", pubkey],
     queryFn: async () => {
+      if (userStore.pubkey === pubkey) return userStore.metadata
       const list = await pool.list([{ kinds: [0], authors: [pubkey] }], true)
       const latest = list.slice(-1)[0]
       if (latest) {
@@ -44,13 +45,15 @@ export const User = memo(function User({ pubkey, reverse, blinded }: UserProp) {
     }
   }
 
+  /*
   useEffect(() => {
     const getReputation = async () => {
       const rep = await social.getReputation(pubkey)
       setReputation(rep)
     }
     getReputation()
   }, [])
+  */
 
   return (
     <>
@@ -66,12 +69,17 @@ export const User = memo(function User({ pubkey, reverse, blinded }: UserProp) {
         )}
       </Pressable>
       <View style={reverse ? $userTitleReverse : $userTitle}>
-        <Text
-          preset="bold"
-          size="xs"
-          style={$userName}
-          numberOfLines={1} >
-          {profile?.username || profile?.display_name || shortenKey(pubkey)} { reputation === null ? <Text size="xxs">(loading)</Text> : isNaN(reputation) ? <Text size="xxs">(no reputation)</Text> : <Text size="xs">{(reputation * 100).toFixed(2)}%</Text> }
+        <Text preset="bold" size="xs" style={$userName} numberOfLines={1}>
+          {profile?.username || profile?.display_name || shortenKey(pubkey)}{" "}
+          {/*
+          {reputation === null ? (
+            <Text size="xxs">(loading)</Text>
+          ) : isNaN(reputation) ? (
+            <Text size="xxs">(no reputation)</Text>
+          ) : (
+            <Text size="xs">{(reputation * 100).toFixed(2)}%</Text>
+          )}
+          */}
         </Text>
       </View>
     </>

app/models/Channel.ts

@@ -12,8 +12,6 @@ import { withSetPropAction } from "./helpers/withSetPropAction"
 import { MessageModel } from "./Message"
 import { QueryClient } from "@tanstack/react-query"
 
-const nHoursAgo = (hrs: number): number => Math.floor((Date.now() - hrs * 60 * 60 * 1000) / 1000)
-
 /**
  * Model description here for TypeScript hints.
  */
@@ -54,7 +52,7 @@ export const ChannelModel = types
     ) {
       const events = yield channel.list({
         channel_id: self.id,
-        filter: { since: nHoursAgo(72), limit: 200 },
+        filter: { limit: 500 },
         db_only: self.db,
         privkey: self.privkey,
       })
@@ -72,18 +70,12 @@ export const ChannelModel = types
       const uniqueEvents = events.filter(
         (obj, index) => events.findIndex((item) => item.id === obj.id) === index,
       )
-      const lastMessage = uniqueEvents.slice(-1)[0]
-      if (lastMessage) {
-        self.setProp("lastMessage", lastMessage.content)
-        self.setProp("lastMessagePubkey", lastMessage.pubkey)
-        self.setProp("lastMessageAt", lastMessage.created_at)
-      }
       self.setProp("loading", false)
       self.setProp("db", true)
       self.messages = cast(uniqueEvents)
     }),
     updateLastMessage() {
-      const lastMessage = self.messages.slice(-1)[0]
+      const lastMessage = self.messages.sort((a, b) => b.created_at - a.created_at)[0]
       if (lastMessage) {
         self.setProp("lastMessage", lastMessage.content)
         self.setProp("lastMessagePubkey", lastMessage.pubkey)

app/models/UserStore.ts

@@ -123,7 +123,7 @@ export const UserStoreModel = types
       const chats = getSnapshot(self.privMessages)
       chats.forEach((chat) => {
         if (chat.pubkey === self.pubkey) {
-          chat.pubkey = chat.tags.find((el) => el[0] === "p")[1]
+          chat.pubkey = chat.tags.find((el) => el[0] === "p")?.[1] ?? chat.pubkey
         }
       })
       return [...new Map(chats.map((item) => [item.pubkey, item])).values()]

app/screens/AddContactScreen.tsx

@@ -118,14 +118,18 @@ export const AddContactScreen: FC<AddContactScreenProps> = observer(function Add
         <View style={$item}>
           <ContactItem pubkey={item.pubkey} fallback={item.profile?.content} />
           {added ? (
-            <Pressable onPress={() => removeContact(item.pubkey, contactManager)}>
+            <Pressable
+              onPress={() => removeContact(item.pubkey, contactManager)}
+              style={$addButton}
+            >
               <Text text="Remove" size="xs" />
             </Pressable>
           ) : (
             <Pressable
               onPress={() =>
                 addContact({ pubkey: item.pubkey, legacy: true, secret: false }, contactManager)
               }
+              style={$addButton}
             >
               <Text text="Add" size="xs" />
             </Pressable>
@@ -189,12 +193,14 @@ export const AddContactScreen: FC<AddContactScreenProps> = observer(function Add
                 style={[$formInput, $formInputText]}
               />
             </View>
-            <Button
-              text="Add"
-              style={$formButton}
-              pressedStyle={$formButtonActive}
-              onPress={() => addCustomContact()}
-            />
+            {customContact.length > 0 && (
+              <Button
+                text="Add"
+                style={$formButton}
+                pressedStyle={$formButtonActive}
+                onPress={() => addCustomContact()}
+              />
+            )}
           </View>
         </BottomSheetView>
       </BottomSheetModal>
@@ -280,3 +286,7 @@ const $formButtonActive: ViewStyle = {
 const $errorText: TextStyle = {
   color: colors.error,
 }
+
+const $addButton: ViewStyle = {
+  paddingRight: spacing.small,
+}

app/screens/ChannelsScreen.tsx

@@ -125,7 +125,7 @@ export const ChannelsScreen: FC<ChannelsScreenProps> = observer(function Channel
               ) : (
                 <Button
                   onPress={() => navigation.navigate("Chat", item)}
-                  text="View channel"
+                  text="Joined"
                   style={$itemButton}
                 />
               )}

app/screens/DirectMessageScreen.tsx

@@ -59,7 +59,7 @@ export const DirectMessageScreen: FC<DirectMessageScreenProps> = observer(
         headerShown: true,
         header: () => (
           <Header
-            title={name || "Direct Message"}
+            title={name.length > 20 ? name.substring(0, 20) + "..." : name || "Direct Message"}
             titleStyle={{ color: colors.palette.white }}
             leftIcon="back"
             leftIconColor={colors.palette.cyan400}

app/screens/EditProfileScreen.tsx

@@ -13,20 +13,22 @@ import { Profile } from "app/arclib/src/profile"
 import { ImagePlusIcon } from "lucide-react-native"
 import { launchImageLibrary } from "react-native-image-picker"
 import { PrivateSettings } from "app/utils/profile"
+import { useQueryClient } from "@tanstack/react-query"
 
 interface EditProfileScreenProps
   extends NativeStackScreenProps<AppStackScreenProps<"EditProfile">> {}
 
 export const EditProfileScreen: FC<EditProfileScreenProps> = observer(function EditProfileScreen() {
   const { profileManager } = useContext(RelayContext)
   const {
-    userStore: { metadata, updateMetadata },
+    userStore: { pubkey, metadata, updateMetadata },
   } = useStores()
 
   const [picture, setPicture] = useState(null)
   const [loading, setLoading] = useState(false)
 
   const formikRef = useRef(null)
+  const queryClient = useQueryClient()
 
   // Pull in navigation via hook
   const navigation = useNavigation<any>()
@@ -73,7 +75,9 @@ export const EditProfileScreen: FC<EditProfileScreenProps> = observer(function E
 
   const updateSettings = async (data: Profile & PrivateSettings) => {
     try {
-      updateMetadata(data, profileManager).then(() => navigation.navigate("Profile"))
+      await updateMetadata(data, profileManager)
+      queryClient.setQueryData(["user", pubkey], data)
+      navigation.navigate("Profile")
     } catch (e) {
       alert(`Failed to save settings: ${e}`)
     }
@@ -167,8 +171,8 @@ export const EditProfileScreen: FC<EditProfileScreenProps> = observer(function E
               label="NIP-05"
               style={$input}
               inputWrapperStyle={$inputWrapper}
-              onChangeText={handleChange("displayName")}
-              onBlur={handleBlur("displayName")}
+              onChangeText={handleChange("nip05")}
+              onBlur={handleBlur("nip05")}
               value={values.nip05}
               autoCapitalize="none"
               autoFocus={false}