@matchain/matchid-sdk-react 0.1.7 → 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.
- package/dist/index.d.mts +116 -19
- package/dist/index.d.ts +116 -19
- package/dist/index.js +314 -158
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +326 -171
- package/dist/index.mjs.map +1 -1
- package/example/package-lock.json +1 -1
- package/example/package.json +1 -1
- package/example/src/App.tsx +2 -2
- package/example/src/pages/Home.tsx +1 -1
- package/example/src/pages/Login.tsx +102 -67
- package/example/vite.config.ts +1 -1
- package/example/yarn.lock +3 -1
- package/package.json +2 -2
package/example/package.json
CHANGED
package/example/src/App.tsx
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, {useState} from "react";
|
|
2
|
-
import {MatchProvider} from "@matchain/
|
|
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/
|
|
7
|
+
import "@matchain/matchid-sdk-react/index.css"
|
|
8
8
|
|
|
9
9
|
const getState = () => {
|
|
10
10
|
if (window.localStorage.getItem('match-local')) {
|
|
@@ -1,33 +1,43 @@
|
|
|
1
|
-
import {Hooks, Components} from "@matchain/
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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={
|
|
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={
|
|
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
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/
|
|
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.
|
|
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.
|
|
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",
|