username tooltip on hover

components/Messages.tsx

@@ -1,8 +1,10 @@
+import ReactTooltip from 'react-tooltip';
 import { useState, useCallback, useContext, useEffect } from "react"
 import { Menu, Transition } from "@headlessui/react"
 import api from "next-rest/client"
 import moment from "moment"
 
+
 import { UserIcon } from "components/UserIcon"
 
 import type { Message, User, VKeys } from "utils/types"
@@ -16,6 +18,13 @@ function lookupTwitterProfileImage(
 	return users.find((u) => u.publicKey === publicKey)?.twitterProfileImage
 }
 
+function lookupTwitterHandle(
+	publicKey: string | null,
+	users: User[]
+): string | undefined {
+	return users.find((u) => u.publicKey === publicKey)?.twitterHandle
+}
+
 async function clickReveal(
 	vkeys: VKeys,
 	secret: string,
@@ -461,15 +470,18 @@ export default function Messages({
 									<UserIcon
 										key={message.reveal.userPublicKey}
 										url={message.reveal.userTwitterProfileImage!}
+										username={lookupTwitterHandle(message.reveal.userPublicKey, users)}
 									/>
 								) : (
 									message.group.map((u, index) => (
 										<UserIcon
 											key={index}
 											url={lookupTwitterProfileImage(u, users)!}
+											username={lookupTwitterHandle(u, users)!}
 										/>
 									))
 								)}
+								<ReactTooltip effect="solid" />
 							</div>
 						</div>
 						<div className="text-right text-gray-400">
@@ -478,8 +490,10 @@ export default function Messages({
 								<UserIcon
 									key={index}
 									url={lookupTwitterProfileImage(d.userPublicKey, users)!}
+									username={lookupTwitterHandle(d.userPublicKey, users)!}
 								/>
 							))}
+							<ReactTooltip effect="solid" />
 						</div>
 					</div>
 					<div className="flex">

components/UserIcon.tsx

@@ -1,6 +1,6 @@
-export function UserIcon({ url }: { url: string }) {
+export function UserIcon({ url, username }: { url: string, username?: string }) {
 	return (
-		<div className="inline-block relative h-6 w-6 bg-gray-200 rounded-full text-center text-gray-400 pt-1 ml-0.5 overflow-hidden border border-gray-200">
+		<div data-tip={username ? `@${username}` : null} className="inline-block relative h-6 w-6 bg-gray-200 rounded-full text-center text-gray-400 pt-1 ml-0.5 overflow-hidden border border-gray-200 cursor-pointer">
 			<img className="absolute w-full h-full top-0 left-0" src={url} />
 		</div>
 	)

package.json

@@ -31,6 +31,7 @@
 		"prisma": "^3.5.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-tooltip": "^4.2.21",
 		"snarkjs": "^0.4.10",
 		"uuid": "^8.3.2"
 	},