@matchain/matchid-sdk-react 0.1.8 → 0.1.9

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.
Files changed (14) hide show
  1. package/dist/index.d.mts +116 -19
  2. package/dist/index.d.ts +116 -19
  3. package/dist/index.js +313 -157
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +325 -170
  6. package/dist/index.mjs.map +1 -1
  7. package/example/package-lock.json +1 -1
  8. package/example/package.json +1 -1
  9. package/example/src/App.tsx +2 -2
  10. package/example/src/pages/Home.tsx +1 -1
  11. package/example/src/pages/Login.tsx +102 -67
  12. package/example/vite.config.ts +1 -1
  13. package/example/yarn.lock +3 -1
  14. package/package.json +2 -2
package/example/package-lock.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "version": "1.0.0",
10
10
  "license": "ISC",
11
11
  "dependencies": {
12
- "@matchain/mid": "../dist"
12
+ "@matchain/matchid-sdk-react": "../dist"
13
13
  },
14
14
  "devDependencies": {
15
15
  "@types/node": "^22.9.0",
package/example/package.json CHANGED
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@zerodev/webauthn-key": "5.3.3",
24
- "@matchain/mid": "../dist"
24
+ "@matchain/matchid-sdk-react": "../dist"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@types/node": "^22.9.0",
package/example/src/App.tsx CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, {useState} from "react";
2
- import {MatchProvider} from "@matchain/mid";
2
+ import {MatchProvider} from "@matchain/matchid-sdk-react";
3
3
  import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
4
4
  import Home from "./pages/Home";
5
5
  import './app.css'
6
6
  import Login from "./pages/Login";
7
- import "@matchain/mid/index.css"
7
+ import "@matchain/matchid-sdk-react/index.css"
8
8
 
9
9
  const getState = () => {
10
10
  if (window.localStorage.getItem('match-local')) {
package/example/src/pages/Home.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import {useMatch} from "@matchain/mid";
1
+ import {useMatch} from "@matchain/matchid-sdk-react";
2
2
  import {useMemo} from "react";
3
3
  function DisplayConfig({
4
4
  label,
package/example/src/pages/Login.tsx CHANGED
@@ -1,33 +1,43 @@
1
- import {Hooks, Components} from "@matchain/mid"
1
+ import {Hooks, Components, Api} from "@matchain/matchid-sdk-react"
2
2
  import React from "react";
3
3
 
4
4
  const {useMatchEvents, useUserInfo, useWallet} = Hooks
5
- const {LoginButton, LoginBox, LoginPanel, EmailModal, LoginModal, UsernameModal, PasswordModal} = Components
5
+ const {LoginButton, LoginBox, LoginPanel, EmailModal, LoginModal, UsernameModal, PasswordModal, Button,Modal} = Components
6
6
 
7
+ function QueryDisplay(
8
+ {
9
+ name,
10
+ query
11
+ }: {
12
+ name: string
13
+ query: any
14
+ }
15
+ ) {
16
+ const keys = Object.keys(query)
17
+ return <div>
18
+ <div className={`font-bold text-lg`}>{name}</div>
19
+ {keys.map((key) => {
20
+ return <div key={key} className={`flex gap-[20px]`}>
21
+ <div className={"w-[200px]"}>{key}</div>
22
+ <div className={`flex-1`}>{
23
+ typeof query[key] === 'function' ? <Button size="sm" onClick={() => {
24
+ query[key]()
25
+ }}>Run</Button> :
26
+ JSON.stringify(query[key])}</div>
27
+ </div>
28
+ })}
29
+ </div>
30
+
31
+ }
7
32
 
8
33
  function LoginContent() {
9
- useMatchEvents({
10
- onLogin: (data) => {
11
- console.log('useMatchEvents.onLogin', data)
12
- },
13
- onLogout: () => {
14
- console.log('useMatchEvents.onLogout')
15
- },
16
- onBind: (data) => {
17
- console.log('useMatchEvents.onBind', data)
18
- }
19
- })
34
+ const bindListQuery = Api.bind.useBindList()
35
+ const pohListQuery = Api.poh.usePohList()
36
+
20
37
  const {
21
- loginByWallet,
22
- isLogin,
23
38
  token,
24
39
  logout,
25
40
  username,
26
- loginByTwitter,
27
- loginByGoogle,
28
- loginByEmail,
29
- getLoginEmailCode,
30
- loginByTelegram,
31
41
  refreshOverview,
32
42
  did,
33
43
  address,
@@ -35,10 +45,6 @@ function LoginContent() {
35
45
  bindTelegram,
36
46
  } = useUserInfo();
37
47
  const {signMessage} = useWallet()
38
- const [email, setEmail] = React.useState('')
39
- const [code, setCode] = React.useState('')
40
- const [emailOpen, setEmailOpen] = React.useState(false)
41
- const [loginOpen, setLoginOpen] = React.useState(false)
42
48
  const [usernameOpen, setUsernameOpen] = React.useState(false)
43
49
  const [passwordOpen, setPasswordOpen] = React.useState(false)
44
50
  const refreshOv = async () => {
@@ -49,53 +55,70 @@ function LoginContent() {
49
55
  const res = await signMessage('hello')
50
56
  alert(res)
51
57
  }
52
- if (isLogin) {
53
- return <div>
54
- <h1 className={`text-2xl`}>You are already logged in</h1>
55
- <div className={`text-ellipsis break-words`}>token:{token}</div>
56
- <div className={`text-ellipsis break-words`}>username:{username}</div>
57
- <div className={`text-ellipsis break-words`}>did:{did}</div>
58
- <div className={`text-ellipsis break-words`}>address:{address}</div>
59
- <div className={`flex gap-[20px]`}>
60
- <button className={`bg-gray-300 p-1 rounded mr-5`}
61
- onClick={bindWallet}>Bind wallet
62
- </button>
63
- <button className={`bg-gray-300 p-1 rounded mr-5`}
64
- onClick={() => setUsernameOpen(true)}>Set username
65
- </button>
66
- <UsernameModal isOpen={usernameOpen} onClose={() => setUsernameOpen(false)} onBack={() => {
67
- console.log('set username modal back event')
68
- setUsernameOpen(false)
69
- }} onSuccess={() => {
70
- alert('set username success')
71
- setUsernameOpen(false)
72
- }}/>
73
- <button className={`bg-gray-300 p-1 rounded mr-5`}
74
- onClick={() => setPasswordOpen(true)}>Set Password
75
- </button>
76
- <PasswordModal isOpen={passwordOpen} onClose={() => setPasswordOpen(false)} onBack={() => {
77
- console.log('set password modal back event')
78
- setPasswordOpen(false)
79
- }} onSuccess={() => {
80
- alert('set password success')
81
- setPasswordOpen(false)
82
- }}/>
83
- <button className={`bg-gray-300 p-1 rounded mr-5`}
84
- onClick={bindTelegram}>Bind telegram
85
- </button>
86
- <button className={`bg-gray-300 p-1 rounded`}
87
- onClick={onSign}>Sign message
88
- </button>
89
- </div>
58
+ return <div>
59
+ <h1 className={`text-2xl`}>You are already logged in</h1>
60
+ <div className={`text-ellipsis break-words`}>token:{token}</div>
61
+ <div className={`text-ellipsis break-words`}>username:{username}</div>
62
+ <div className={`text-ellipsis break-words`}>did:{did}</div>
63
+ <div className={`text-ellipsis break-words`}>address:{address}</div>
64
+ <div className={`flex gap-[20px]`}>
90
65
  <button className={`bg-gray-300 p-1 rounded mr-5`}
91
- onClick={refreshOv}>Refresh Overview
66
+ onClick={bindWallet}>Bind wallet
67
+ </button>
68
+ <button className={`bg-gray-300 p-1 rounded mr-5`}
69
+ onClick={() => setUsernameOpen(true)}>Set username
70
+ </button>
71
+ <UsernameModal isOpen={usernameOpen} onClose={() => setUsernameOpen(false)} onBack={() => {
72
+ console.log('set username modal back event')
73
+ setUsernameOpen(false)
74
+ }} onSuccess={() => {
75
+ alert('set username success')
76
+ setUsernameOpen(false)
77
+ }}/>
78
+ <button className={`bg-gray-300 p-1 rounded mr-5`}
79
+ onClick={() => setPasswordOpen(true)}>Set Password
80
+ </button>
81
+ <PasswordModal isOpen={passwordOpen} onClose={() => setPasswordOpen(false)} onBack={() => {
82
+ console.log('set password modal back event')
83
+ setPasswordOpen(false)
84
+ }} onSuccess={() => {
85
+ alert('set password success')
86
+ setPasswordOpen(false)
87
+ }}/>
88
+ <button className={`bg-gray-300 p-1 rounded mr-5`}
89
+ onClick={bindTelegram}>Bind telegram
92
90
  </button>
93
91
  <button className={`bg-gray-300 p-1 rounded`}
94
- onClick={logout}>Logout
92
+ onClick={onSign}>Sign message
95
93
  </button>
96
-
97
94
  </div>
98
- }
95
+ <button className={`bg-gray-300 p-1 rounded mr-5`}
96
+ onClick={refreshOv}>Refresh Overview
97
+ </button>
98
+ <button className={`bg-gray-300 p-1 rounded`}
99
+ onClick={logout}>Logout
100
+ </button>
101
+
102
+ <QueryDisplay query={bindListQuery} name={"BindListQuery"}/>
103
+ <QueryDisplay query={pohListQuery} name={"PohListQuery"}/>
104
+ </div>
105
+
106
+ }
107
+
108
+ function UnLogin() {
109
+ const {
110
+ loginByWallet,
111
+ loginByTwitter,
112
+ loginByGoogle,
113
+ loginByEmail,
114
+ getLoginEmailCode,
115
+ loginByTelegram,
116
+ } = useUserInfo();
117
+ const [email, setEmail] = React.useState('')
118
+ const [code, setCode] = React.useState('')
119
+ const [emailOpen, setEmailOpen] = React.useState(false)
120
+ const [loginOpen, setLoginOpen] = React.useState(false)
121
+
99
122
  return (
100
123
  <div className={`flex flex-col gap-10`}>
101
124
  <div className={`flex gap-5`}>
@@ -153,8 +176,20 @@ function LoginContent() {
153
176
  }
154
177
 
155
178
  export default function Login() {
179
+ useMatchEvents({
180
+ onLogin: (data) => {
181
+ console.log('useMatchEvents.onLogin', data)
182
+ },
183
+ onLogout: () => {
184
+ console.log('useMatchEvents.onLogout')
185
+ },
186
+ onBind: (data) => {
187
+ console.log('useMatchEvents.onBind', data)
188
+ }
189
+ })
190
+ const {isLogin} = useUserInfo()
156
191
  return <div>
157
- <LoginContent/>
192
+ {isLogin ? <LoginContent/> : <UnLogin/>}
158
193
  <div className={`font-bold text-lg`}>LoginButton</div>
159
194
 
160
195
  <div className={`bg-gray-100 p-5 mt-5`}>
package/example/vite.config.ts CHANGED
@@ -7,7 +7,7 @@ export default defineConfig({
7
7
  plugins: [react()],
8
8
  resolve: {
9
9
  alias: {
10
- '@matchain/mid': path.resolve(__dirname, '../dist'),
10
+ '@matchain/matchid-sdk-react': path.resolve(__dirname, '../dist'),
11
11
  },
12
12
  },
13
13
  });
package/example/yarn.lock CHANGED
@@ -327,7 +327,7 @@
327
327
  "@jridgewell/resolve-uri" "^3.1.0"
328
328
  "@jridgewell/sourcemap-codec" "^1.4.14"
329
329
 
330
- "@matchain/mid@../dist":
330
+ "@matchain/matchid-sdk-react@../dist":
331
331
  version "0.0.0"
332
332
 
333
333
  "@noble/curves@^1.3.0":
@@ -1205,6 +1205,7 @@ source-map-js@^1.2.1:
1205
1205
  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
1206
1206
 
1207
1207
  "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
1208
+ name string-width-cjs
1208
1209
  version "4.2.3"
1209
1210
  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
1210
1211
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -1223,6 +1224,7 @@ string-width@^5.0.1, string-width@^5.1.2:
1223
1224
  strip-ansi "^7.0.1"
1224
1225
 
1225
1226
  "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
1227
+ name strip-ansi-cjs
1226
1228
  version "6.0.1"
1227
1229
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
1228
1230
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@matchain/matchid-sdk-react",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "exports": {
@@ -34,7 +34,7 @@
34
34
  "react-dom": "^18.0.0"
35
35
  },
36
36
  "dependencies": {
37
- "@tanstack/react-query": "^5.59.20",
37
+ "@tanstack/react-query": "^5.62.11",
38
38
  "axios": "^1.7.0",
39
39
  "ethers": "^5.7.2",
40
40
  "react-router-dom": "^6.0.0",