zigap-utils 0.0.492 → 0.0.494
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/README.md +66 -31
- package/dist/hooks/useZigap.d.ts +1 -0
- package/dist/index.cjs.js +12 -12
- package/dist/index.es.js +903 -903
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,12 +19,12 @@ const App = () => {
|
|
|
19
19
|
return (
|
|
20
20
|
<div>
|
|
21
21
|
<LoginQR
|
|
22
|
-
dapp='
|
|
23
|
-
url='http://
|
|
22
|
+
dapp='yourDappName'
|
|
23
|
+
url='http://sample.yours.io'
|
|
24
24
|
availableNetworks={['xphere']}
|
|
25
25
|
isShowLogo={false}
|
|
26
26
|
logoSize={25}
|
|
27
|
-
|
|
27
|
+
validSeconds={600}
|
|
28
28
|
sigMessage="hello world"
|
|
29
29
|
expire={{type: 'EXTEND', seconds: 3600}}
|
|
30
30
|
onReceive={({ isSuccess }) => {
|
|
@@ -44,36 +44,71 @@ const App = () => {
|
|
|
44
44
|
|
|
45
45
|
### `LoginQR` props
|
|
46
46
|
|
|
47
|
-
| prop |
|
|
48
|
-
| --- |
|
|
49
|
-
| `dapp` |
|
|
50
|
-
| `url` |
|
|
51
|
-
| `availableNetworks` |
|
|
52
|
-
| `sigMessage` |
|
|
53
|
-
| `validSeconds` |
|
|
54
|
-
| `onReceive` |
|
|
55
|
-
| `expire` |
|
|
56
|
-
| `size` | false | number | 128 | canvas width |
|
|
57
|
-
| `bgColor` | false | string | #fff | background color |
|
|
58
|
-
| `fgColor` | false | string | #000 | foreground color |
|
|
59
|
-
| `style` | false | CSSProperties | | custom css style |
|
|
60
|
-
| `isShowLogo` | false | boolean | false | Zigap logo in the middle of the QR code |
|
|
61
|
-
| `logoSize` | false | number | 30 | logo width & height |
|
|
47
|
+
| prop | type | description |
|
|
48
|
+
| --- | --- | --- |
|
|
49
|
+
| `dapp` | string | Name of the dapp to use |
|
|
50
|
+
| `url` | string | The url of dapp to connect |
|
|
51
|
+
| `availableNetworks` | string[] | List of connectable networks in dapp |
|
|
52
|
+
| `sigMessage` | string | Messages signed to verify the identity of the user |
|
|
53
|
+
| `validSeconds` | number | QR code valid time(minutes) |
|
|
54
|
+
| `onReceive` | (value) => void | Function called after login request |
|
|
55
|
+
| `expire` | {type: "NONE / FIX / EXTEND", seconds: number} | time and type for user login to expire |
|
|
62
56
|
|
|
63
57
|
<br>
|
|
64
58
|
|
|
65
59
|
### `AddressProvideQR` props
|
|
66
60
|
|
|
67
|
-
| prop
|
|
68
|
-
| ------------------- |
|
|
69
|
-
| `dapp` |
|
|
70
|
-
| `url` |
|
|
71
|
-
| `availableNetworks` |
|
|
72
|
-
| `validSeconds` |
|
|
73
|
-
| `onReceive` |
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
|
61
|
+
| prop type | default value | description |
|
|
62
|
+
| ------------------- | --------------- | ------------------------------------ |
|
|
63
|
+
| `dapp` | string | Name of the dapp to use |
|
|
64
|
+
| `url` | string | The url of dapp to connect |
|
|
65
|
+
| `availableNetworks` | string[] | List of connectable networks in dapp |
|
|
66
|
+
| `validSeconds` | number | QR code valid time(seconds) |
|
|
67
|
+
| `onReceive` | (value) => void | Function called after login request |
|
|
68
|
+
|
|
69
|
+
<br>
|
|
70
|
+
|
|
71
|
+
### `CommonStyle` props (optional)
|
|
72
|
+
|
|
73
|
+
| prop | type | default value | description |
|
|
74
|
+
| ------------ | ------------- | ------------- | --------------------------------------- |
|
|
75
|
+
| `size` | number | 128 | canvas width |
|
|
76
|
+
| `bgColor` | string | #fff | background color |
|
|
77
|
+
| `fgColor` | string | #000 | foreground color |
|
|
78
|
+
| `style` | CSSProperties | | custom css style |
|
|
79
|
+
| `isShowLogo` | boolean | false | Zigap logo in the middle of the QR code |
|
|
80
|
+
| `logoSize` | number | 30 | logo width & height |
|
|
81
|
+
|
|
82
|
+
<br>
|
|
83
|
+
|
|
84
|
+
### `useZigap`
|
|
85
|
+
|
|
86
|
+
useZigap is a hook that fetches the information of the logged-in user in the zigap app and provides a logout function.
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
import { useZigap } from 'zigap-utils';
|
|
90
|
+
|
|
91
|
+
...
|
|
92
|
+
|
|
93
|
+
const Component = () => {
|
|
94
|
+
const { userInfo, logout } = useZigap();
|
|
95
|
+
|
|
96
|
+
const handleLogout = () => {
|
|
97
|
+
logout();
|
|
98
|
+
window.location.reload();
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
return (
|
|
102
|
+
<div>
|
|
103
|
+
<p>Address: {userInfo.address}</p>
|
|
104
|
+
<p>Network: {userInfo.network}</p>
|
|
105
|
+
<p>Nickname: {userInfo.nickName}</p>
|
|
106
|
+
<p>Token: {userInfo.token}</p>
|
|
107
|
+
<p>Issued DateTime: {userInfo.issuedDateTime}</p>
|
|
108
|
+
<p>Expire DateTime: {userInfo.expireDateTime}</p>
|
|
109
|
+
|
|
110
|
+
<button onClick={handleLogout}> LOGOUT </button>
|
|
111
|
+
</div>
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
```
|