Link Channel to the stored contacts

views/Channels/Channel.tsx

@@ -5,7 +5,8 @@ import {
     ScrollView,
     StyleSheet,
     TouchableOpacity,
-    View
+    View,
+    Image
 } from 'react-native';
 
 import { Divider, Icon, ListItem } from 'react-native-elements';
@@ -34,10 +35,12 @@ import BackendUtils from '../../utils/BackendUtils';
 import { localeString } from '../../utils/LocaleUtils';
 import { themeColor } from '../../utils/ThemeUtils';
 import UrlUtils from '../../utils/UrlUtils';
+import { getPhoto } from '../../utils/PhotoUtils';
 
 import ChannelsStore from '../../stores/ChannelsStore';
 import SettingsStore from '../../stores/SettingsStore';
 import NodeInfoStore from '../../stores/NodeInfoStore';
+import ContactStore from '../../stores/ContactStore';
 
 import Edit from '../../assets/images/SVG/Edit.svg';
 import HourglassIcon from '../../assets/images/SVG/Hourglass.svg';
@@ -47,6 +50,7 @@ interface ChannelProps {
     ChannelsStore: ChannelsStore;
     SettingsStore: SettingsStore;
     NodeInfoStore: NodeInfoStore;
+    ContactStore: ContactStore;
     route: Route<'Channel', { channel: Channel }>;
 }
 
@@ -58,7 +62,7 @@ interface ChannelState {
     channel: Channel;
 }
 
-@inject('ChannelsStore', 'NodeInfoStore', 'SettingsStore')
+@inject('ChannelsStore', 'NodeInfoStore', 'SettingsStore', 'ContactStore')
 @observer
 export default class ChannelView extends React.Component<
     ChannelProps,
@@ -83,6 +87,51 @@ export default class ChannelView extends React.Component<
         }
     }
 
+    findContactByPubkey = (pubkey: string) => {
+        const { ContactStore } = this.props;
+        const { contacts } = ContactStore;
+        return contacts.find((contact) => contact.pubkey.includes(pubkey));
+    };
+
+    renderContactLink = (remotePubkey: string) => {
+        const contact = this.findContactByPubkey(remotePubkey);
+        if (contact) {
+            return (
+                <TouchableOpacity
+                    style={{
+                        ...styles.container,
+                        backgroundColor: themeColor('secondary')
+                    }}
+                    onPress={() => {
+                        this.props.navigation.navigate('ContactDetails', {
+                            contactId: contact.contactId || contact.id,
+                            isNostrContact: false
+                        });
+                    }}
+                >
+                    {contact.photo && (
+                        <Image
+                            source={{ uri: getPhoto(contact.photo) }}
+                            style={styles.image}
+                        />
+                    )}
+                    <View>
+                        <Text
+                            style={{
+                                fontSize: 18,
+                                color: themeColor('highlight'),
+                                fontFamily: 'PPNeueMontreal-Book'
+                            }}
+                        >
+                            {contact.name}
+                        </Text>
+                    </View>
+                </TouchableOpacity>
+            );
+        }
+        return null;
+    };
+
     closeChannel = async (
         channelPoint?: string,
         channelId?: string,
@@ -295,6 +344,7 @@ export default class ChannelView extends React.Component<
                                 </Text>
                             </TouchableOpacity>
                         )}
+                        {remotePubkey && this.renderContactLink(remotePubkey)}
                     </View>
                     <BalanceSlider
                         localBalance={lurkerMode ? 50 : localBalance}
@@ -770,11 +820,25 @@ const styles = StyleSheet.create({
         paddingBottom: 10
     },
     pubkey: {
-        paddingBottom: 30,
+        paddingBottom: 24,
         textAlign: 'center'
     },
     button: {
         paddingTop: 15,
         paddingBottom: 15
+    },
+    container: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 6,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    image: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        marginRight: 14
     }
 });