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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@redzone/taunt-logins-ui-react",
3
+ "version": "0.0.2",
4
+ "type": "module",
5
+ "main": "src/lib/exports.ts",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "tsc -b && vite build",
9
+ "lint": "eslint .",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "@redzone/taunt-logins": "^0.0.3",
14
+ "react": "^19.1.1",
15
+ "react-dom": "^19.1.1"
16
+ },
17
+ "devDependencies": {
18
+ "@eslint/js": "^9.36.0",
19
+ "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
20
+ "@types/node": "^24.6.0",
21
+ "@types/react": "^19.1.16",
22
+ "@types/react-dom": "^19.1.9",
23
+ "@vitejs/plugin-react-swc": "^4.1.0",
24
+ "eslint": "^9.36.0",
25
+ "eslint-plugin-react-hooks": "^5.2.0",
26
+ "eslint-plugin-react-refresh": "^0.4.22",
27
+ "globals": "^16.4.0",
28
+ "typescript": "~5.9.3",
29
+ "typescript-eslint": "^8.45.0",
30
+ "vite": "^7.1.7"
31
+ }
32
+ }
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@redzone/taunt-logins-ui-react",
3
+ "version": "0.0.3",
4
+ "type": "module",
5
+ "main": "src/lib/exports.ts",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "tsc -b && vite build",
9
+ "lint": "eslint .",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "@redzone/taunt-logins": "^0.0.3",
14
+ "react": "^19.1.1",
15
+ "react-dom": "^19.1.1"
16
+ },
17
+ "devDependencies": {
18
+ "@eslint/js": "^9.36.0",
19
+ "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
20
+ "@types/node": "^24.6.0",
21
+ "@types/react": "^19.1.16",
22
+ "@types/react-dom": "^19.1.9",
23
+ "@vitejs/plugin-react-swc": "^4.1.0",
24
+ "eslint": "^9.36.0",
25
+ "eslint-plugin-react-hooks": "^5.2.0",
26
+ "eslint-plugin-react-refresh": "^0.4.22",
27
+ "globals": "^16.4.0",
28
+ "typescript": "~5.9.3",
29
+ "typescript-eslint": "^8.45.0",
30
+ "vite": "^7.1.7"
31
+ }
32
+ }
@@ -0,0 +1,50 @@
1
+ import { useCallback, useMemo, useState } from "react"
2
+
3
+ import "./styling.css"
4
+
5
+ import { useTaunt } from "./tauntContext"
6
+
7
+ export const MagicEmailInput = ({
8
+ onEmail
9
+ }: {
10
+ onEmail?: (email: string) => void
11
+ }) => {
12
+ const { otpMagicLogin } = useTaunt()
13
+ const [email, setEmail] = useState<string>()
14
+
15
+ const initialised = useMemo(() => email !== undefined, [email])
16
+
17
+ const validEmail = useMemo(() => {
18
+ const validRegex =
19
+ /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
20
+ return email?.match(validRegex) ? email : undefined
21
+ }, [email])
22
+
23
+ const runMagic = useCallback(() => {
24
+ if (!validEmail) return
25
+
26
+ if (onEmail) {
27
+ onEmail(email!)
28
+ } else {
29
+ otpMagicLogin(email!)
30
+ }
31
+ }, [validEmail, onEmail])
32
+
33
+ return (
34
+ <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
35
+ {initialised && !validEmail && (
36
+ <div style={{ color: "red" }}>Please enter a valid email</div>
37
+ )}
38
+ <input
39
+ class="rdz-input"
40
+ onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
41
+ placeholder="Enter your email"
42
+ type="email"
43
+ value={email}
44
+ />
45
+ <button class="rdz-button" onClick={runMagic} type="button">
46
+ Send Magic Link
47
+ </button>
48
+ </div>
49
+ )
50
+ }
@@ -0,0 +1,27 @@
1
+ import { useCallback } from "react"
2
+
3
+ import "./styling.css"
4
+
5
+ import { useTaunt } from "./tauntContext"
6
+
7
+ export const MetaMaskButton = ({
8
+ openMetamask
9
+ }: {
10
+ openMetamask?: () => void
11
+ }) => {
12
+ const { metamaskLogin } = useTaunt()
13
+
14
+ const runMetamask = useCallback(() => {
15
+ if (openMetamask) {
16
+ openMetamask()
17
+ } else {
18
+ metamaskLogin()
19
+ }
20
+ }, [metamaskLogin, openMetamask])
21
+
22
+ return (
23
+ <button class="rdz-button" onClick={runMetamask}>
24
+ Login with Metamask
25
+ </button>
26
+ )
27
+ }
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@redzone/taunt-logins-ui-react",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "type": "module",
5
- "main": "lib/exports.ts",
5
+ "main": "src/lib/exports.ts",
6
6
  "scripts": {
7
7
  "dev": "vite",
8
8
  "build": "tsc -b && vite build",
package/src/lib/magic.tsx CHANGED
@@ -36,13 +36,13 @@ export const MagicEmailInput = ({
36
36
  <div style={{ color: "red" }}>Please enter a valid email</div>
37
37
  )}
38
38
  <input
39
- className="rdz-input"
39
+ class="rdz-input"
40
40
  onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
41
41
  placeholder="Enter your email"
42
42
  type="email"
43
43
  value={email}
44
44
  />
45
- <button className="rdz-button" onClick={runMagic} type="button">
45
+ <button class="rdz-button" onClick={runMagic} type="button">
46
46
  Send Magic Link
47
47
  </button>
48
48
  </div>
@@ -20,7 +20,7 @@ export const MetaMaskButton = ({
20
20
  }, [metamaskLogin, openMetamask])
21
21
 
22
22
  return (
23
- <button className="rdz-button" onClick={runMetamask}>
23
+ <button class="rdz-button" onClick={runMetamask}>
24
24
  Login with Metamask
25
25
  </button>
26
26
  )