@redzone/taunt-logins-ui-react 0.0.2 → 0.0.3

package/.history/package_20251002162139.json

@@ -0,0 +1,32 @@
+{
+  "name": "@redzone/taunt-logins-ui-react",
+  "version": "0.0.3",
+  "type": "module",
+  "main": "src/lib/exports.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@redzone/taunt-logins": "^0.0.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react-swc": "^4.1.0",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7"
+  }
+}

package/.history/src/lib/magic_20251002162134.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
+        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_20251002162122.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 class="rdz-button" onClick={runMetamask}>
+      Login with Metamask
+    </button>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redzone/taunt-logins-ui-react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "src/lib/exports.ts",
   "scripts": {

package/src/lib/magic.tsx

@@ -36,13 +36,13 @@ export const MagicEmailInput = ({
         <div style={{ color: "red" }}>Please enter a valid email</div>
       )}
       <input
-        className="rdz-input"
+        class="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">
+      <button class="rdz-button" onClick={runMagic} type="button">
         Send Magic Link
       </button>
     </div>

package/src/lib/metamask.tsx

@@ -20,7 +20,7 @@ export const MetaMaskButton = ({
   }, [metamaskLogin, openMetamask])
 
   return (
-    <button className="rdz-button" onClick={runMetamask}>
+    <button class="rdz-button" onClick={runMetamask}>
       Login with Metamask
     </button>
   )