'init'

app/components/PopoverLockIconAvatar/PopoverLockIconAvatar.tsx

@@ -0,0 +1,20 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { Popover, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconLock } from "@tabler/icons-react";
+
+export function PopoverLockIconAvatar() {
+    const [opened, { close, open }] = useDisclosure(false);
+    const colors = useRosettaColors();
+
+    return (
+        <Popover opened={opened} withArrow position="top">
+            <Popover.Target>
+                <IconLock onMouseEnter={open} onMouseLeave={close} size={12} stroke={2} color={colors.success}></IconLock>
+            </Popover.Target>
+            <Popover.Dropdown>
+                <Text size={'xs'} c={'dimmed'}>This avatar is end-to-end encrypted</Text>
+            </Popover.Dropdown>
+        </Popover>
+    )
+}