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

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/metamask_20251002171636.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/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;
-  }
-}

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

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

package/.history/src/lib/styling_20251002154548.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_20251002160446.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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