@redzone/taunt-logins-ui-react 0.0.1

package/.history/src/lib/metamask_20251002142726.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/metamask_20251002152802.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/metamask_20251002153516.tsx

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

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

@@ -0,0 +1,27 @@
+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/styling_20251002154523.css

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

@@ -0,0 +1,19 @@
+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;
+  }
+}

package/.history/src/lib/styling_20251002154544.css

@@ -0,0 +1,20 @@
+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;
+  color: red;
+
+  &:hover {
+    border-color: #646cff;
+  }
+  &:focus,
+  &:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+}

package/.history/src/lib/styling_20251002154548.css

@@ -0,0 +1,19 @@
+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_20251002160446.css

@@ -0,0 +1,20 @@
+button.rdz-button {
+  color: lightgray;
+  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_20251002160511.css

@@ -0,0 +1,23 @@
+button.rdz-button {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color: lightgray;
+  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_20251002160515.css

@@ -0,0 +1,24 @@
+button.rdz-button {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: lightgray;
+  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_20251002160815.css

@@ -0,0 +1,24 @@
+button.rdz-button {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: lightgray;
+  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_20251002160910.css

@@ -0,0 +1,24 @@
+button.rdz-button {
+  font-family: Roboto;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: lightgray;
+  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_20251002160915.css

@@ -0,0 +1,24 @@
+button.rdz-button {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: lightgray;
+  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_20251002160952.css

@@ -0,0 +1,24 @@
+.rdz-button {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: lightgray;
+  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_20251002161001.css

@@ -0,0 +1,24 @@
+.rdz-button {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: lightgray;
+  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_20251002161011.css

@@ -0,0 +1,24 @@
+.rdz-button {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400 !important;
+
+  color: lightgray;
+  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_20251002161016.css

@@ -0,0 +1,24 @@
+.rdz-button {
+  font-family: Avenir, Helvetica, Arial, sans-serif !important;
+  line-height: 1.5;
+  font-weight: 400 !important;
+
+  color: lightgray;
+  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_20251002161036.css

@@ -0,0 +1,25 @@
+.rdz-button,
+.rdz-input {
+  font-family: Avenir, Helvetica, Arial, sans-serif !important;
+  line-height: 1.5;
+  font-weight: 400 !important;
+
+  color: lightgray;
+  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/tauntContext_20251002142622.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react"
+
+type ContextProps = {
+  tauntServiceEndpoint: string
+}
+
+export const TauntContext = createContext<ContextProps>({
+  tauntServiceEndpoint: ""
+})
+
+export function useTaunt() {
+  const ctx = useContext(TauntContext)
+  if (!ctx) {
+    throw new Error("useTaunt must be used within a TauntProvider")
+  }
+  return ctx
+}

package/.history/src/lib/tauntContext_20251002152540.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "react"
+
+type ContextProps = {
+  tauntServiceEndpoint: string
+  deets?: { accessToken: string; refreshToken: string }
+  metamaskLogin: () => void
+  otpLogin: (email: string) => void
+}
+
+export const TauntContext = createContext<ContextProps>({
+  tauntServiceEndpoint: "",
+  metamaskLogin: () => {},
+  otpLogin: () => {}
+})
+
+export function useTaunt() {
+  const ctx = useContext(TauntContext)
+  if (!ctx) {
+    throw new Error("useTaunt must be used within a TauntProvider")
+  }
+  return ctx
+}

package/.history/src/lib/tauntContext_20251002152802.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from "react"
+
+type ContextProps = {
+  tauntServiceEndpoint: string
+  deets?: { accessToken: string; refreshToken: string }
+  metamaskLogin: () => void
+  otpMagicLogin: (email: string) => void
+}
+
+export const TauntContext = createContext<ContextProps>({
+  tauntServiceEndpoint: "",
+  metamaskLogin: () => {},
+  otpMagicLogin: () => {}
+})
+
+export function useTaunt() {
+  const ctx = useContext(TauntContext)
+  if (!ctx) {
+    throw new Error("useTaunt must be used within a TauntProvider")
+  }
+  return ctx
+}

package/.history/src/lib/tauntProvider_20251002142622.tsx

@@ -0,0 +1,15 @@
+import { TauntContext } from "./tauntContext"
+
+export const TauntProvider = ({
+  children,
+  tauntServiceEndpoint
+}: {
+  children: React.ReactNode
+  tauntServiceEndpoint: string
+}) => {
+  return (
+    <TauntContext.Provider value={{ tauntServiceEndpoint }}>
+      {children}
+    </TauntContext.Provider>
+  )
+}

package/.history/src/lib/tauntProvider_20251002143158.tsx

@@ -0,0 +1,19 @@
+import { TauntContext } from "./tauntContext"
+
+export const TauntProvider = ({
+  children,
+  tauntServiceEndpoint
+}: {
+  children: React.ReactNode
+  tauntServiceEndpoint?: string
+}) => {
+  if (!tauntServiceEndpoint) {
+    throw new Error("tauntServiceEndpoint is required")
+  }
+
+  return (
+    <TauntContext.Provider value={{ tauntServiceEndpoint }}>
+      {children}
+    </TauntContext.Provider>
+  )
+}

package/.history/src/lib/tauntProvider_20251002144018.tsx

@@ -0,0 +1,19 @@
+import { TauntContext } from "./tauntContext"
+
+export const TauntProvider = ({
+  children,
+  tauntServiceEndpoint
+}: {
+  children: React.ReactNode
+  tauntServiceEndpoint?: string
+}) => {
+  if (!tauntServiceEndpoint) {
+    return <div>tauntServiceEndpoint is required</div>
+  }
+
+  return (
+    <TauntContext.Provider value={{ tauntServiceEndpoint }}>
+      {children}
+    </TauntContext.Provider>
+  )
+}

package/.history/src/lib/tauntProvider_20251002152234.tsx

@@ -0,0 +1,40 @@
+import { tauntMagicDidLogin, tauntMetamaskLogin } from "@redzone/taunt-logins"
+import { useCallback, useState } from "react"
+
+import { TauntContext } from "./tauntContext"
+
+export const TauntProvider = ({
+  children,
+  tauntServiceEndpoint
+}: {
+  children: React.ReactNode
+  tauntServiceEndpoint?: string
+}) => {
+  const [deets, setDeets] = useState<{
+    accessToken: string
+    refreshToken: string
+  }>()
+
+  const otpLogin = useCallback(
+    (email: string) => {
+      tauntMagicDidLogin(tauntServiceEndpoint!, email!).then(setDeets)
+    },
+    [tauntServiceEndpoint]
+  )
+
+  const metamaskLogin = useCallback(
+    () => tauntMetamaskLogin(tauntServiceEndpoint!).then(setDeets),
+    [tauntServiceEndpoint]
+  )
+
+  if (!tauntServiceEndpoint) {
+    return <div>tauntServiceEndpoint is required</div>
+  }
+
+  return (
+    <TauntContext.Provider
+      value={{ tauntServiceEndpoint, deets, otpLogin, metamaskLogin }}>
+      {children}
+    </TauntContext.Provider>
+  )
+}