@redzone/taunt-logins-ui-react 0.0.5 → 0.0.7

package/.history/src/App_20251002154915.tsx

@@ -1,54 +0,0 @@
-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

@@ -1,54 +0,0 @@
-// 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_20251002205122.tsx

@@ -1,54 +0,0 @@
-// 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={process.env.VITE_TAUNT_SERVICE_ENDPOINT}
-      magicKey={process.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

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

package/.history/src/lib/index_20251002162712.ts

@@ -1 +0,0 @@
-export * from "./exports"

package/.history/src/lib/index_20251002182429.ts

@@ -1,4 +0,0 @@
-export * from "./magic"
-export * from "./metamask"
-export * from "./tauntContext"
-export * from "./tauntProvider"

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

@@ -1,44 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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/magic_20251002162134.tsx

@@ -1,50 +0,0 @@
-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
-        class="rdz-input"
-        onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
-        placeholder="Enter your email"
-        type="email"
-        value={email}
-      />
-      <button class="rdz-button" onClick={runMagic} type="button">
-        Send Magic Link
-      </button>
-    </div>
-  )
-}