Merge pull request #422 from arkin0x/social-graph

implement basic reputation visualization in chats

app/components/RelayProvider.tsx

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

app/components/User.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext } 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,9 +18,11 @@ export const User = memo(function User({ pubkey, reverse, blinded }: UserProp) {
   const queryClient = useQueryClient()
   const navigation = useNavigation<any>()
 
-  const { pool } = useContext(RelayContext)
+  const { pool, social } = useContext(RelayContext)
   const { userStore } = useStores()
 
+  const [reputation, setReputation] = React.useState(null)
+
   const { data: profile } = useQuery({
     queryKey: ["user", pubkey],
     queryFn: async () => {
@@ -42,6 +44,14 @@ export const User = memo(function User({ pubkey, reverse, blinded }: UserProp) {
     }
   }
 
+  useEffect(() => {
+    const getReputation = async () => {
+      const rep = await social.getReputation(pubkey)
+      setReputation(rep)
+    }
+    getReputation()
+  }, [])
+
   return (
     <>
       <Pressable onPress={() => redirect()} style={$user}>
@@ -57,12 +67,12 @@ export const User = memo(function User({ pubkey, reverse, blinded }: UserProp) {
       </Pressable>
       <View style={reverse ? $userTitleReverse : $userTitle}>
         <Text
-          text={profile?.username || profile?.display_name || shortenKey(pubkey)}
           preset="bold"
           size="xs"
           style={$userName}
-          numberOfLines={1}
-        />
+          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>
     </>
   )