@redzone/taunt-logins-ui-react 0.0.4 → 0.0.6

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>
-  )
-}

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

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

@@ -1,41 +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>
-      <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_20251002142726.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/metamask_20251002152802.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/metamask_20251002153516.tsx

@@ -1,27 +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}>
-      Login with Metamask
-    </button>
-  )
-}

package/.history/src/lib/metamask_20251002154228.tsx

@@ -1,27 +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}>
-      Login with Metamask
-    </button>
-  )
-}

package/.history/src/lib/metamask_20251002154523.tsx

@@ -1,27 +0,0 @@
-import { useCallback } from "react"
-
-import "./styling.css"
-
-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="rdz-button" onClick={runMetamask}>
-      Login with Metamask
-    </button>
-  )
-}

package/.history/src/lib/metamask_20251002162122.tsx

@@ -1,27 +0,0 @@
-import { useCallback } from "react"
-
-import "./styling.css"
-
-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 class="rdz-button" onClick={runMetamask}>
-      Login with Metamask
-    </button>
-  )
-}

package/.history/src/lib/styling_20251002154523.css

@@ -1,19 +0,0 @@
-button.rdz-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-
-  &:hover {
-    border-color: #646cff;
-  }
-  &:focus,
-  &:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
-}

package/.history/src/lib/styling_20251002154531.css

@@ -1,19 +0,0 @@
-button.rdz-button {
-  border-radius: 80px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-
-  &:hover {
-    border-color: #646cff;
-  }
-  &:focus,
-  &:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
-}