@ic-reactor/react 0.4.1 → 0.4.2
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 -6
- package/dist/hooks/auth.js +4 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -37,11 +37,12 @@ import { createReActor } from "@ic-reactor/react"
|
|
|
37
37
|
|
|
38
38
|
type Actor = typeof actor
|
|
39
39
|
|
|
40
|
-
export const { useActorStore, useQueryCall } =
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
export const { useActorStore, useAuthClient, useQueryCall } =
|
|
41
|
+
createReActor<Actor>({
|
|
42
|
+
canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
|
|
43
|
+
idlFactory,
|
|
44
|
+
host: "https://localhost:4943",
|
|
45
|
+
})
|
|
45
46
|
```
|
|
46
47
|
|
|
47
48
|
Then, use the `useQueryCall` hook to call your canister method:
|
|
@@ -54,7 +55,11 @@ const Balance = ({ principal }) => {
|
|
|
54
55
|
const { call, data, loading, error } = useQueryCall({
|
|
55
56
|
functionName: "get_balance",
|
|
56
57
|
args: [principal],
|
|
57
|
-
|
|
58
|
+
refetchInterval: 1000,
|
|
59
|
+
refetchOnMount: true,
|
|
60
|
+
onLoading: () => console.log("Loading..."),
|
|
61
|
+
onSuccess: (data) => console.log("Success!", data),
|
|
62
|
+
onError: (error) => console.log("Error!", error),
|
|
58
63
|
})
|
|
59
64
|
|
|
60
65
|
return (
|
|
@@ -72,6 +77,61 @@ const Balance = ({ principal }) => {
|
|
|
72
77
|
export default Balance
|
|
73
78
|
```
|
|
74
79
|
|
|
80
|
+
## Authentication
|
|
81
|
+
|
|
82
|
+
`@ic-reactor/react` provides a custom hook for managing authentication with the IC blockchain. To use it, first create an authentication declaration file:
|
|
83
|
+
|
|
84
|
+
```jsx
|
|
85
|
+
// Login.tsx
|
|
86
|
+
import { useAuthClient } from "./store"
|
|
87
|
+
|
|
88
|
+
const Login = () => {
|
|
89
|
+
const {
|
|
90
|
+
login,
|
|
91
|
+
logout,
|
|
92
|
+
loginLoading,
|
|
93
|
+
loginError,
|
|
94
|
+
identity,
|
|
95
|
+
authenticating,
|
|
96
|
+
authenticated,
|
|
97
|
+
} = useAuthClient()
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
<div>
|
|
101
|
+
<h2>Login:</h2>
|
|
102
|
+
<div>
|
|
103
|
+
{loginLoading && <div>Loading...</div>}
|
|
104
|
+
{loginError ? <div>{JSON.stringify(loginError)}</div> : null}
|
|
105
|
+
{identity && <div>{identity.getPrincipal().toText()}</div>}
|
|
106
|
+
</div>
|
|
107
|
+
{authenticated ? (
|
|
108
|
+
<div>
|
|
109
|
+
<button onClick={() => logout()}>Logout</button>
|
|
110
|
+
</div>
|
|
111
|
+
) : (
|
|
112
|
+
<div>
|
|
113
|
+
<button
|
|
114
|
+
onClick={() =>
|
|
115
|
+
login({
|
|
116
|
+
identityProvider:
|
|
117
|
+
process.env.DFX_NETWORK === "ic"
|
|
118
|
+
? "https://identity.ic0.app/#authorize"
|
|
119
|
+
: "http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943/#authorize",
|
|
120
|
+
})
|
|
121
|
+
}
|
|
122
|
+
disabled={authenticating}
|
|
123
|
+
>
|
|
124
|
+
Login
|
|
125
|
+
</button>
|
|
126
|
+
</div>
|
|
127
|
+
)}
|
|
128
|
+
</div>
|
|
129
|
+
)
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
export default Login
|
|
133
|
+
```
|
|
134
|
+
|
|
75
135
|
## API Reference
|
|
76
136
|
|
|
77
137
|
The library provides various hooks and utilities for interacting with IC actors:
|
package/dist/hooks/auth.js
CHANGED
|
@@ -13,7 +13,7 @@ exports.getAuthHooks = void 0;
|
|
|
13
13
|
const react_1 = require("react");
|
|
14
14
|
const zustand_1 = require("zustand");
|
|
15
15
|
const getAuthHooks = (agentManager) => {
|
|
16
|
-
const { authenticate, authStore } = agentManager;
|
|
16
|
+
const { authenticate, authStore, isLocalEnv } = agentManager;
|
|
17
17
|
const useAgentManager = () => {
|
|
18
18
|
return agentManager;
|
|
19
19
|
};
|
|
@@ -29,7 +29,9 @@ const getAuthHooks = (agentManager) => {
|
|
|
29
29
|
setLoginLoading(true);
|
|
30
30
|
setLoginError(null);
|
|
31
31
|
try {
|
|
32
|
-
yield (authClient === null || authClient === void 0 ? void 0 : authClient.login(Object.assign(Object.assign({
|
|
32
|
+
yield (authClient === null || authClient === void 0 ? void 0 : authClient.login(Object.assign(Object.assign({ identityProvider: isLocalEnv
|
|
33
|
+
? "https://identity.ic0.app/#authorize"
|
|
34
|
+
: "http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943/#authorize" }, options), { onSuccess: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
33
35
|
var _a;
|
|
34
36
|
setLoginLoading(false);
|
|
35
37
|
yield authenticate();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ic-reactor/react",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "A React library for interacting with Dfinity actors",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"node": ">=10"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@ic-reactor/store": "^0.4.
|
|
38
|
+
"@ic-reactor/store": "^0.4.2",
|
|
39
39
|
"zustand-utils": "^1.3"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"react": ">=16.8",
|
|
49
49
|
"zustand": "4.4"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "d5817736d25a997a1b09f27f7546e8539cf5a6c2"
|
|
52
52
|
}
|