diff --git a/app/mobile/src/session/contact/Contact.jsx b/app/mobile/src/session/contact/Contact.jsx index 1460c5d4..cf995dae 100644 --- a/app/mobile/src/session/contact/Contact.jsx +++ b/app/mobile/src/session/contact/Contact.jsx @@ -11,6 +11,22 @@ export function Contact({ contact, closeContact }) { const { state, actions } = useContact(contact); + const getStatusText = (status) => { + if (status === 'confirmed') { + return 'Saved'; + } + if (status === 'pending') { + return 'Request Reveived'; + } + if (status === 'connecting') { + return 'Request Sent'; + } + if (status === 'connected') { + return 'Connected'; + } + return 'Unsaved'; + } + return ( @@ -24,6 +40,7 @@ export function Contact({ contact, closeContact }) { { `${state.handle}@${state.node}` } + { getStatusText(state.status) } @@ -40,6 +57,41 @@ export function Contact({ contact, closeContact }) { { state.description } + + { state.status === 'connected' && ( + <> + + Disconnect + + + Delete Contact + + + Block Contact + + + )} + { state.status === 'connecting' && ( + + Block + + )} + { state.status === 'confirmed' && ( + + Block + + )} + { state.status === 'pending' && ( + + Block + + )} + { state.status === 'requested' && ( + + Block + + )} + ) diff --git a/app/mobile/src/session/contact/Contact.styled.js b/app/mobile/src/session/contact/Contact.styled.js index 463af786..06c51032 100644 --- a/app/mobile/src/session/contact/Contact.styled.js +++ b/app/mobile/src/session/contact/Contact.styled.js @@ -18,13 +18,15 @@ export const styles = StyleSheet.create({ paddingRight: 32, }, header: { - paddingBottom: 32, - paddingTop: 16, display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'center', }, + status: { + color: Colors.grey, + paddingBottom: 24, + }, headerText: { fontSize: 16, paddingRight: 4, @@ -73,5 +75,18 @@ export const styles = StyleSheet.create({ fontSize: 16, paddingLeft: 8 }, + button: { + width: 192, + padding: 6, + backgroundColor: Colors.primary, + borderRadius: 4, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + marginTop: 16, + }, + buttonText: { + color: Colors.white, + }, }) diff --git a/app/mobile/src/session/contact/useContact.hook.js b/app/mobile/src/session/contact/useContact.hook.js index 7e8316a2..bada43ce 100644 --- a/app/mobile/src/session/contact/useContact.hook.js +++ b/app/mobile/src/session/contact/useContact.hook.js @@ -41,7 +41,7 @@ export function useContact(contact) { const { profile, detail, cardId } = selected; const { name, handle, node, location, description, imageSet, revision } = profile; const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar'; - updateState({ name, handle, node, location, description, logo, status: detail.state }); + updateState({ name, handle, node, location, description, logo, status: detail.status }); stateSet = true; } } @@ -52,7 +52,7 @@ export function useContact(contact) { const { cardId, profile, detail } = selected; const { name, handle, node, location, description, imageSet, revision } = profile; const logo = imageSet ? card.actions.getCardLogo(cardId, revision) : 'avatar'; - updateState({ name, handle, node, location, description, logo, status: detail.state }); + updateState({ name, handle, node, location, description, logo, status: detail.status }); stateSet = true; } else { diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js index 634ca3d8..156e71d2 100644 --- a/app/mobile/src/session/profile/Profile.styled.js +++ b/app/mobile/src/session/profile/Profile.styled.js @@ -13,7 +13,7 @@ export const styles = StyleSheet.create({ }, header: { paddingBottom: 32, - paddingTop: 16, + paddingTop: 24, display: 'flex', flexDirection: 'row', alignItems: 'flex-end',