diff --git a/design-system/Icon/Icon.tsx b/design-system/Icon/Icon.tsx index d75cfd0d7..4753617da 100644 --- a/design-system/Icon/Icon.tsx +++ b/design-system/Icon/Icon.tsx @@ -15,6 +15,7 @@ export const iconRegistry: Record = { link: "link", paperplane: "paperplane", account_circle: "person.circle", + pencil: "pencil", "square.and.pencil": "square.and.pencil", qrcode: "qrcode", "message.circle.fill": "message.circle.fill", @@ -55,6 +56,7 @@ export const iconRegistry: Record = { "arrowshape.turn.up.left": "arrowshape.turn.up.left", "arrowshape.turn.up.left.fill": "arrowshape.turn.up.left.fill", "person.crop.circle.badge.plus": "person.crop.circle.badge.plus", + "person.crop.circle.badge.xmark": "person.crop.circle.badge.xmark", tray: "tray", cloud: "cloud", "exclamationmark.triangle": "exclamationmark.triangle", @@ -98,8 +100,8 @@ export function Icon(props: IIconProps) { const iconName = icon ? iconRegistry[icon] : picto - ? iconRegistry[picto] - : null; + ? iconRegistry[picto] + : null; if (!iconName) { logger.warn( diff --git a/design-system/Icon/Icon.types.ts b/design-system/Icon/Icon.types.ts index 321779ebd..cfcdb0185 100644 --- a/design-system/Icon/Icon.types.ts +++ b/design-system/Icon/Icon.types.ts @@ -12,6 +12,7 @@ export type IIconName = | "link" | "paperplane" | "account_circle" + | "pencil" | "square.and.pencil" | "qrcode" | "message.circle.fill" @@ -52,6 +53,7 @@ export type IIconName = | "arrowshape.turn.up.left" | "arrowshape.turn.up.left.fill" | "person.crop.circle.badge.plus" + | "person.crop.circle.badge.xmark" | "tray" | "cloud" | "exclamationmark.triangle" diff --git a/screens/Profile.tsx b/screens/Profile.tsx index d02f062c7..68549e734 100644 --- a/screens/Profile.tsx +++ b/screens/Profile.tsx @@ -21,7 +21,6 @@ import { useHeader } from "@/navigation/use-header"; import { HeaderAction } from "@/design-system/Header/HeaderAction"; import { HStack } from "@/design-system/HStack"; import { navigate } from "@/utils/navigation"; -import { ContextMenuButton } from "react-native-ios-context-menu"; import { Haptics } from "@/utils/haptics"; import Clipboard from "@react-native-clipboard/clipboard"; import { StackActions } from "@react-navigation/native"; @@ -29,6 +28,8 @@ import { useDisconnectActionSheet } from "@/hooks/useDisconnectActionSheet"; import { getConfig } from "@/config"; import { consentToAddressesOnProtocolByAccount } from "@utils/xmtpRN/contacts"; import { showActionSheetWithOptions } from "@components/StateHandlers/ActionSheetStateHandler"; +import { DropdownMenu } from "@/design-system/dropdown-menu/dropdown-menu"; +import { iconRegistry } from "@/design-system/Icon/Icon"; export default function ProfileScreen() { const [editMode, setEditMode] = useState(false); @@ -63,6 +64,65 @@ export default function ProfileScreen() { (s) => s.peersStatus[peerAddress.toLowerCase()] === "blocked" ); + const handleContextMenuAction = useCallback( + (actionId: string) => { + Haptics.selectionAsync(); + if (actionId === "share") { + if (isMyProfile) { + navigate("ShareProfile"); + } else { + const profileUrl = `https://${ + getConfig().websiteDomain + }/dm/${userName}`; + Clipboard.setString(profileUrl); + Share.share({ + message: profileUrl, + }); + } + } else if (actionId === "edit") { + Alert.alert("Available soon"); + // TODO - Profile Edit + // handleEditProfile(); + } else if (actionId === "block") { + showActionSheetWithOptions( + { + options: [ + isBlockedPeer ? translate("unblock") : translate("block"), + translate("cancel"), + ], + cancelButtonIndex: 1, + destructiveButtonIndex: isBlockedPeer ? undefined : 0, + title: isBlockedPeer + ? translate("if_you_unblock_contact") + : translate("if_you_block_contact"), + }, + (selectedIndex?: number) => { + if (selectedIndex === 0 && peerAddress) { + const newStatus = isBlockedPeer ? "consented" : "blocked"; + const consentOnProtocol = isBlockedPeer ? "allow" : "deny"; + consentToAddressesOnProtocolByAccount({ + account: userAddress, + addresses: [peerAddress], + consent: consentOnProtocol, + }); + setPeersStatus({ [peerAddress]: newStatus }); + router.goBack(); + } + } + ); + } + }, + [ + isMyProfile, + userName, + isBlockedPeer, + peerAddress, + userAddress, + setPeersStatus, + router, + ] + ); + // Header configuration useHeader( { @@ -109,114 +169,46 @@ export default function ProfileScreen() { onPress={handleChatPress} /> )} - { - Haptics.selectionAsync(); - if (nativeEvent.actionKey === "share") { - if (isMyProfile) { - navigate("ShareProfile"); - } else { - const profileUrl = `https://${ - getConfig().websiteDomain - }/dm/${userName}`; - Clipboard.setString(profileUrl); - Share.share({ - message: profileUrl, - }); - } - } else if (nativeEvent.actionKey === "edit") { - Alert.alert("Available soon"); - // TODO - Profile Edit - // handleEditProfile(); - } else if (nativeEvent.actionKey === "block") { - showActionSheetWithOptions( - { - options: [ - isBlockedPeer + onPress={handleContextMenuAction} + actions={[ + ...(isMyProfile + ? [ + { + id: "edit", + title: translate("profile.edit"), + image: iconRegistry["pencil"], + }, + { + id: "share", + title: translate("share"), + image: iconRegistry["square.and.arrow.up"], + }, + ] + : [ + { + id: "share", + title: translate("share"), + image: iconRegistry["square.and.arrow.up"], + }, + { + id: "block", + title: isBlockedPeer ? translate("unblock") : translate("block"), - translate("cancel"), - ], - cancelButtonIndex: 1, - destructiveButtonIndex: isBlockedPeer ? undefined : 0, - title: isBlockedPeer - ? translate("if_you_unblock_contact") - : translate("if_you_block_contact"), - }, - (selectedIndex?: number) => { - if (selectedIndex === 0 && peerAddress) { - const newStatus = isBlockedPeer - ? "consented" - : "blocked"; - const consentOnProtocol = isBlockedPeer - ? "allow" - : "deny"; - consentToAddressesOnProtocolByAccount({ - account: userAddress, - addresses: [peerAddress], - consent: consentOnProtocol, - }); - setPeersStatus({ [peerAddress]: newStatus }); - router.goBack(); - } - } - ); - } - }} + image: isBlockedPeer + ? iconRegistry["person.crop.circle.badge.plus"] + : iconRegistry["person.crop.circle.badge.xmark"], + color: !isBlockedPeer + ? theme.colors.global.caution + : undefined, + }, + ]), + ]} > - + )} @@ -230,6 +222,9 @@ export default function ProfileScreen() { setPeersStatus, handleChatPress, editMode, + handleContextMenuAction, + isMyProfile, + isBlockedPeer, ] );