Merge branch 'main' of github.com:joeltg/zk-group-sigs-server into main

.gitignore

@@ -1,4 +1,3 @@
-*.min.js
 *.sqlite
 .env.Local
 prisma/.env

components/Header.tsx

@@ -1,8 +1,16 @@
 import React, { useState, useEffect } from "react"
 import Link from "next/link"
 import { LOCAL_STORAGE_SECRET_KEY } from "utils/localStorage"
+import { User } from "utils/types"
 
-export function Header() {
+export function Header({
+	users,
+	publicKey,
+}: {
+	users?: User[] | null
+	publicKey?: string | null
+}) {
+	const user = users?.find((u) => u.publicKey === publicKey)
 	const [secret, setSecret] = useState("")
 	useEffect(() => {
 		const secret = localStorage.getItem(LOCAL_STORAGE_SECRET_KEY)
@@ -22,14 +30,33 @@ export function Header() {
 			</div>
 			<div>
 				{secret ? (
-					<div
-						className="cursor-pointer hover:underline mt-16"
-						onClick={() => {
-							localStorage.clear()
-							document.location = "/"
-						}}
-					>
-						Logout
+					<div className="mt-16">
+						<div className="inline mr-6">
+							{user ? (
+								<a
+									className="cursor-pointer hover:underline"
+									href={`https://twitter.com/${user.twitterHandle}`}
+									target="_blank"
+								>
+									{user.twitterHandle}
+								</a>
+							) : (
+								<Link href="/connect">
+									<div className="inline cursor-pointer hover:underline">
+										Connect Twitter
+									</div>
+								</Link>
+							)}
+						</div>
+						<div
+							className="inline cursor-pointer hover:underline"
+							onClick={() => {
+								localStorage.clear()
+								document.location = "/"
+							}}
+						>
+							Logout
+						</div>
 					</div>
 				) : (
 					<Link href="/login">

components/Messages.tsx

@@ -216,13 +216,14 @@ interface MessagesProps {
 	users: User[]
 }
 
-function VerifyButton({ vKeys, message }) {
+function VerifyButton({ vKeys, message }: { vKeys: any; message: Message }) {
 	const [text, setText] = useState<null | string>(null)
 
 	const handleClick = useCallback(async () => {
 		const text = await onMessageVerify(vKeys, message)
 		setText(text)
 	}, [])
+
 	return (
 		<div>
 			{text ? (
@@ -442,13 +443,13 @@ export default function Messages({
 								{message.reveal ? (
 									<UserIcon
 										key={message.reveal.userPublicKey}
-										url={message.reveal.userTwitterProfileImage}
+										url={message.reveal.userTwitterProfileImage!}
 									/>
 								) : (
-									message.group.map((u) => (
+									message.group.map((u, index) => (
 										<UserIcon
-											key={u}
-											url={lookupTwitterProfileImage(u, users) || ""}
+											key={index}
+											url={lookupTwitterProfileImage(u, users)!}
 										/>
 									))
 								)}
@@ -456,10 +457,10 @@ export default function Messages({
 						</div>
 						<div className="text-right text-gray-400">
 							{message.deny.length > 0 && "Not from "}
-							{message.deny?.map((d) => (
+							{message.deny?.map((d, index) => (
 								<UserIcon
-									key={d.userPublicKey}
-									url={lookupTwitterProfileImage(d.userPublicKey, users)}
+									key={index}
+									url={lookupTwitterProfileImage(d.userPublicKey, users)!}
 								/>
 							))}
 						</div>

components/SelectUsers.tsx

@@ -68,12 +68,15 @@ export function SelectUsers({
 							onChange={() => {
 								if (selectedUsers.indexOf(user.publicKey) === -1) {
 									setSelectedUsers(selectedUsers.concat(user.publicKey))
+									updateSelectedUsers(selectedUsers.concat(user.publicKey))
 								} else {
 									setSelectedUsers(
 										selectedUsers.filter((h) => h !== user.publicKey)
 									)
+									updateSelectedUsers(
+										selectedUsers.filter((h) => h !== user.publicKey)
+									)
 								}
-								updateSelectedUsers(selectedUsers)
 							}}
 						/>
 					)}

pages/index.tsx

@@ -125,8 +125,8 @@ export default function IndexPage({
 	return (
 		<AppContext.Provider value={{ vkeys }}>
 			<div className="max-w-4xl m-auto font-mono">
-				<Header />
-				<div className="grid grid-cols-4 gap-6 pt-2">
+				<Header users={users} publicKey={publicKey} />
+				<div className="grid grid-cols-4 gap-6 pt-2 pb-14">
 					<div className="col-span-3">
 						<Messages
 							publicKey={publicKey}