@redzone/taunt-logins-ui-react 0.0.1

package/.history/src/App_20251002154841.tsx

@@ -0,0 +1,47 @@
+import "./App.css"
+
+import { MagicEmailInput } from "./lib/magic"
+import { MetaMaskButton } from "./lib/metamask"
+import { useTaunt } from "./lib/tauntContext"
+import { TauntProvider } from "./lib/tauntProvider"
+
+function App() {
+  return (
+    <TauntProvider
+      tauntServiceEndpoint={import.meta.env.VITE_TAUNT_SERVICE_ENDPOINT}
+      magicKey={import.meta.env.VITE_MAGIC_KEY}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          alignItems: "center"
+        }}>
+        <MagicEmailInput />
+        <MetaMaskButton />
+        <LogoutButton />
+        <TauntDeets />
+      </div>
+    </TauntProvider>
+  )
+}
+
+function LogoutButton() {
+  const { deets } = useTaunt()
+  if (!deets) return null
+
+  return (
+    <button
+      className="ml-2 p-2 bg-blue-500 text-white rounded-md"
+      type="button">
+      Logout
+    </button>
+  )
+}
+
+function TauntDeets() {
+  const { deets } = useTaunt()
+  return <textarea value={JSON.stringify(deets, null, 2)} readOnly />
+}
+
+export default App

package/.history/src/App_20251002154915.tsx

@@ -0,0 +1,54 @@
+import "./App.css"
+
+import { MagicEmailInput } from "./lib/magic"
+import { MetaMaskButton } from "./lib/metamask"
+import { useTaunt } from "./lib/tauntContext"
+import { TauntProvider } from "./lib/tauntProvider"
+
+function App() {
+  return (
+    <TauntProvider
+      tauntServiceEndpoint={import.meta.env.VITE_TAUNT_SERVICE_ENDPOINT}
+      magicKey={import.meta.env.VITE_MAGIC_KEY}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          alignItems: "center"
+        }}>
+        <MagicEmailInput />
+        <MetaMaskButton />
+        <LogoutButton />
+        <TauntDeets />
+      </div>
+    </TauntProvider>
+  )
+}
+
+function LogoutButton() {
+  const { deets } = useTaunt()
+  if (!deets) return null
+
+  return (
+    <button
+      className="ml-2 p-2 bg-blue-500 text-white rounded-md"
+      type="button">
+      Logout
+    </button>
+  )
+}
+
+function TauntDeets() {
+  const { deets } = useTaunt()
+  return (
+    <textarea
+      rows={5}
+      cols={50}
+      value={JSON.stringify(deets, null, 2)}
+      readOnly
+    />
+  )
+}
+
+export default App

package/.history/src/App_20251002160347.tsx

@@ -0,0 +1,54 @@
+// import "./App.css"
+
+import { MagicEmailInput } from "./lib/magic"
+import { MetaMaskButton } from "./lib/metamask"
+import { useTaunt } from "./lib/tauntContext"
+import { TauntProvider } from "./lib/tauntProvider"
+
+function App() {
+  return (
+    <TauntProvider
+      tauntServiceEndpoint={import.meta.env.VITE_TAUNT_SERVICE_ENDPOINT}
+      magicKey={import.meta.env.VITE_MAGIC_KEY}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          alignItems: "center"
+        }}>
+        <MagicEmailInput />
+        <MetaMaskButton />
+        <LogoutButton />
+        <TauntDeets />
+      </div>
+    </TauntProvider>
+  )
+}
+
+function LogoutButton() {
+  const { deets } = useTaunt()
+  if (!deets) return null
+
+  return (
+    <button
+      className="ml-2 p-2 bg-blue-500 text-white rounded-md"
+      type="button">
+      Logout
+    </button>
+  )
+}
+
+function TauntDeets() {
+  const { deets } = useTaunt()
+  return (
+    <textarea
+      rows={5}
+      cols={50}
+      value={JSON.stringify(deets, null, 2)}
+      readOnly
+    />
+  )
+}
+
+export default App

package/.history/src/lib/exports_20251002160045.ts

@@ -0,0 +1,3 @@
+export * from "./magic"
+export * from "./metamask"
+export * from "./taunt"

package/.history/src/lib/magic_20251002142848.tsx

@@ -0,0 +1,44 @@
+import { tauntMagicDidLogin } from "@redzone/taunt-logins"
+import { useCallback, useMemo, useState } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const Emailer = ({ onEmail }: { onEmail?: (email: string) => void }) => {
+  const { tauntServiceEndpoint } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      tauntMagicDidLogin(tauntServiceEndpoint, email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div>
+      {initialised && !validEmail && (
+        <div style={{ color: "red" }}>Please enter a valid email</div>
+      )}
+      <input
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/magic_20251002152540.tsx

@@ -0,0 +1,28 @@
+import { tauntMagicDidLogin } from "@redzone/taunt-logins"
+import { useCallback, useMemo, useState } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const MetaMaskButton = ({openMetamask}: {openMetamask?: () => void}) => {
+  const { metamaskLogin } = useTaunt()
+  
+  const runMetamask = useCallback(() => {
+    if(openMetamask) {
+      openMetamask()
+    } else {
+
+      metamaskLogin()
+      }
+  }, [metamaskLogin, openMetamask])
+
+  return (
+
+        <button
+          className="ml-2 p-2 bg-blue-500 text-white rounded-md"
+          onClick={runMetamask}
+          type="button">
+          Login with Metamask
+        </button>
+  )
+}
+}

package/.history/src/lib/magic_20251002152543.tsx

@@ -0,0 +1,28 @@
+import { tauntMagicDidLogin } from "@redzone/taunt-logins"
+import { useCallback, useMemo, useState } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const MetaMaskButton = ({openMetamask}: {openMetamask?: () => void}) => {
+  const { metamaskLogin } = useTaunt()
+  
+  const runMetamask = useCallback(() => {
+    if(openMetamask) {
+      openMetamask()
+    } else {
+
+      metamaskLogin()
+      }
+  }, [metamaskLogin, openMetamask])
+
+  return (
+
+        <button
+          className="ml-2 p-2 bg-blue-500 text-white rounded-md"
+          onClick={runMetamask}
+          type="button">
+          Login with Metamask
+        </button>
+  )
+}
+}

package/.history/src/lib/magic_20251002152546.tsx

@@ -0,0 +1,28 @@
+import { useCallback } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const MetaMaskButton = ({
+  openMetamask
+}: {
+  openMetamask?: () => void
+}) => {
+  const { metamaskLogin } = useTaunt()
+
+  const runMetamask = useCallback(() => {
+    if (openMetamask) {
+      openMetamask()
+    } else {
+      metamaskLogin()
+    }
+  }, [metamaskLogin, openMetamask])
+
+  return (
+    <button
+      className="ml-2 p-2 bg-blue-500 text-white rounded-md"
+      onClick={runMetamask}
+      type="button">
+      Login with Metamask
+    </button>
+  )
+}

package/.history/src/lib/magic_20251002152802.tsx

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, useState } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const MagicEmailInput = ({
+  onEmail
+}: {
+  onEmail?: (email: string) => void
+}) => {
+  const { otpMagicLogin } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      otpMagicLogin(email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div>
+      {initialised && !validEmail && (
+        <div style={{ color: "red" }}>Please enter a valid email</div>
+      )}
+      <input
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/magic_20251002154740.tsx

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, useState } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const MagicEmailInput = ({
+  onEmail
+}: {
+  onEmail?: (email: string) => void
+}) => {
+  const { otpMagicLogin } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      otpMagicLogin(email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+      {initialised && !validEmail && (
+        <div style={{ color: "red" }}>Please enter a valid email</div>
+      )}
+      <input
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/magic_20251002155035.tsx

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, useState } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const MagicEmailInput = ({
+  onEmail
+}: {
+  onEmail?: (email: string) => void
+}) => {
+  const { otpMagicLogin } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      otpMagicLogin(email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+      {initialised && !validEmail && (
+        <div style={{ color: "red" }}>Please enter a valid email</div>
+      )}
+      <input
+        onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/magic_20251002160411.tsx

@@ -0,0 +1,49 @@
+import { useCallback, useMemo, useState } from "react"
+
+import "./styling.css"
+
+import { useTaunt } from "./tauntContext"
+
+export const MagicEmailInput = ({
+  onEmail
+}: {
+  onEmail?: (email: string) => void
+}) => {
+  const { otpMagicLogin } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      otpMagicLogin(email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+      {initialised && !validEmail && (
+        <div style={{ color: "red" }}>Please enter a valid email</div>
+      )}
+      <input
+        onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/magic_20251002160428.tsx

@@ -0,0 +1,49 @@
+import { useCallback, useMemo, useState } from "react"
+
+import "./styling.css"
+
+import { useTaunt } from "./tauntContext"
+
+export const MagicEmailInput = ({
+  onEmail
+}: {
+  onEmail?: (email: string) => void
+}) => {
+  const { otpMagicLogin } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      otpMagicLogin(email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+      {initialised && !validEmail && (
+        <div style={{ color: "red" }}>Please enter a valid email</div>
+      )}
+      <input
+        onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button className="rdz-button" onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/magic_20251002161028.tsx

@@ -0,0 +1,50 @@
+import { useCallback, useMemo, useState } from "react"
+
+import "./styling.css"
+
+import { useTaunt } from "./tauntContext"
+
+export const MagicEmailInput = ({
+  onEmail
+}: {
+  onEmail?: (email: string) => void
+}) => {
+  const { otpMagicLogin } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      otpMagicLogin(email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+      {initialised && !validEmail && (
+        <div style={{ color: "red" }}>Please enter a valid email</div>
+      )}
+      <input
+        className="rdz-input"
+        onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button className="rdz-button" onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/metamask_20251002142622.tsx

@@ -0,0 +1,38 @@
+import { tauntMagicDidLogin } from "@redzone/taunt-logins"
+import { useCallback, useMemo, useState } from "react"
+
+export const Emailer = ({ onEmail }: { onEmail?: (email: string) => void }) => {
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      tauntMagicDidLogin(email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div>
+      <input
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}

package/.history/src/lib/metamask_20251002142654.tsx

@@ -0,0 +1,41 @@
+import { tauntMagicDidLogin } from "@redzone/taunt-logins"
+import { useCallback, useMemo, useState } from "react"
+
+import { useTaunt } from "./tauntContext"
+
+export const Emailer = ({ onEmail }: { onEmail?: (email: string) => void }) => {
+  const { tauntServiceEndpoint } = useTaunt()
+  const [email, setEmail] = useState<string>()
+
+  const initialised = useMemo(() => email !== undefined, [email])
+
+  const validEmail = useMemo(() => {
+    const validRegex =
+      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    return email?.match(validRegex) ? email : undefined
+  }, [email])
+
+  const runMagic = useCallback(() => {
+    if (!validEmail) return
+
+    if (onEmail) {
+      onEmail(email!)
+    } else {
+      tauntMagicDidLogin(tauntServiceEndpoint, email!)
+    }
+  }, [validEmail, onEmail])
+
+  return (
+    <div>
+      <input
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+      />
+      <button onClick={runMagic} type="button">
+        Send Magic Link
+      </button>
+    </div>
+  )
+}