const handleSignUp = useCallback(() => {
  console.log("generating a new secret key")
  const array = new Uint8Array(32)
  crypto.getRandomValues(array)
  const v = Buffer.from(array).toString("hex")
  localStorage.setItem(LOCAL_STORAGE_SECRET_KEY_UNVERIFIED, v)
  setUnverifiedSecretKey(v)
  router.push("/backup")
}, [])

<div className="mt-16 max-w-lg m-auto font-mono">
  <div className="m-2 border border-gray-300 rounded-xl p-6">
    <div>
      This is your ZK CHAT login token. Keep it secret and save it somewhere
      safe:
    </div>
    <textarea
      className="block w-full outline-none py-5 px-6 my-6 rounded-xl border focus:border-blue-300 resize-none text-gray-800"
      rows={3}
      readOnly
      value={unverifiedSecretKey || ""}
    />
    <input
      className="block w-full cursor-pointer bg-gray-300 text-gray-800 rounded-xl px-4 py-2 my-4"
      type="button"
      value={copied ? "Copied!" : "Copy"}
      onClick={handleCopy}
    />
    <Link href="/connect">
      <a className="block cursor-pointer bg-pink hover:bg-midpink text-white text-center rounded-xl px-4 py-2">
        Next
      </a>
    </Link>
  </div>
</div>

const createUser = useCallback(async () => {
  if (unverifiedSecretKey === null || publicKey === null || waiting) {
    return
  }
console.log("CONNECT- createUser");
  const res = await fetch(`/api/users?publicKey=${publicKey}`, {
    method: "POST",
  })
  if (res.status === 200) {
    const user = await res.json()
    localStorage.setItem(LOCAL_STORAGE_SECRET_KEY, unverifiedSecretKey)
    setSecretKey(unverifiedSecretKey)
    setUser(user)
    router.push("/")
  }
  else {
   console.error("CONNECT- createUser\n" + res);
   alert("Could not verify user! Did you post the tweet?")
  }
}, [unverifiedSecretKey, publicKey, waiting])

const handleLogin = useCallback(async () => {
  console.log("loggin......Demian")
  console.log("loggin in", valid, value)
  if (valid) {
    // if login is successful then this value will get set to
    // LOCAL_STORAGE_SECRET_KEY in the first effect callback in _app.tsx
    localStorage.setItem(LOCAL_STORAGE_SECRET_KEY_UNVERIFIED, value)
    const publicKey = derivePublicKey(value)
    // set the cookie client side and reload the page.
    // if the public key is registered on the server then
    // the server will redirect us to the homepage.
    // if the public key is not registsered then the server
    // will clear the publicKey cookie.
    // setCookie(null, "publicKey", publicKey, {
    //   maxAge: 30 * 24 * 60 * 60,
    //   path: "/",
    //   secure: true,
    // })

    const res = await fetch(`/api/login?publicKey=${publicKey}`, {
      method: "POST",
    })

    if (res.status === 200) {
      const { user } = await res.json()
      localStorage.setItem(LOCAL_STORAGE_SECRET_KEY, value)
      setSecretKey(value)
      setUser(user)
      router.push("/")
      // window.location.href = "/"
    } else {
      setUser(null)
      router.push(`/login?error=${accountNotFoundError}`)
      // window.location.href = `/login?error=${accountNotFoundError}`
    }
  }
}, [value, valid])

const user = await prisma.user.findUnique({
  where: { publicKey },
  select: userProps,
})

if (user !== null) {
  nookies.set({ res }, "publicKey", user.publicKey, {
    maxAge: 30 * 24 * 60 * 60,
    path: "/",
    httpOnly: true,
  })
  return res.status(200).json({ user })
} else {
  return res.status(404).end()
}

export function CreateMessage(props: CreateMessageProps) {
  const { user, secretKey } = useContext(PageContext)
  const [value, setValue] = useState("")

  const router = useRouter()

  const handleSubmit = useCallback(async () => {
  if (secretKey === null) {
    return
  }

  const hash = hashMessage(value).toString(16)

const { proof, publicSignals } = await sign(secretKey, props.group, value)

<input
  className={
    isUserInGroup
      ? "rounded-lg px-4 py-3 flex-1 bg-white"
      : "rounded-lg px-4 py-3 flex-1 bg-white placeholder-light"
  }
  disabled={!isUserInGroup}
  type="text"
  placeholder={
    isUserInGroup
      ? "Reply"
      : "You must be logged in as a group member to reply"
  }
  value={value}
  onChange={(event) => setValue(event.target.value)}
/>

export async function verifyMessage(
  vKeys: VKeys,
  message: Message
): Promise<boolean> {
  const verified = await snarkjs.groth16.verify(
  vKeys.sign,
  message.publicSignals,
  message.proof
   )