@blocklet/did-domain-react 0.3.51 → 0.3.52
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/es/buy.js +55 -28
- package/lib/buy.js +54 -32
- package/package.json +2 -2
- package/src/buy.tsx +65 -34
package/es/buy.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import LoadingButton from "@mui/lab/LoadingButton";
|
|
3
3
|
import Dialog from "@arcblock/ux/lib/Dialog";
|
|
4
4
|
import { LocaleProvider, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
|
|
5
5
|
import CheckCircle from "@mui/icons-material/CheckCircle";
|
|
@@ -20,12 +20,50 @@ var BuyState = /* @__PURE__ */ ((BuyState2) => {
|
|
|
20
20
|
BuyState2[BuyState2["Completed"] = 8] = "Completed";
|
|
21
21
|
return BuyState2;
|
|
22
22
|
})(BuyState || {});
|
|
23
|
+
const preFetch = async ({
|
|
24
|
+
didDomainURL,
|
|
25
|
+
delegatee,
|
|
26
|
+
delegateePk
|
|
27
|
+
}) => {
|
|
28
|
+
const serviceURL = await getDidDomainServiceURL(didDomainURL);
|
|
29
|
+
if (!serviceURL) {
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
const apiRequest = create({ baseURL: serviceURL.api });
|
|
33
|
+
const { data } = await apiRequest.post("/payment/session", {
|
|
34
|
+
delegatee,
|
|
35
|
+
delegateePk
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
sessionId: data.sessionId,
|
|
39
|
+
baseURL: serviceURL.base
|
|
40
|
+
};
|
|
41
|
+
};
|
|
23
42
|
function Component({ delegatee, delegateePk, didDomainURL, locale, title, onSuccess, ...props }) {
|
|
24
43
|
const { t } = useLocaleContext();
|
|
25
44
|
const [state, setState] = useSetState({
|
|
26
45
|
currentState: 1 /* Prepare */
|
|
27
46
|
});
|
|
28
47
|
const popup = useRef(null);
|
|
48
|
+
const sessionRequest = useAHooksRequest(
|
|
49
|
+
async () => {
|
|
50
|
+
const data = await preFetch({ didDomainURL, delegatee, delegateePk });
|
|
51
|
+
if (!data) {
|
|
52
|
+
return data;
|
|
53
|
+
}
|
|
54
|
+
return data;
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
debounceWait: 500,
|
|
58
|
+
debounceLeading: true,
|
|
59
|
+
debounceTrailing: false,
|
|
60
|
+
debounceMaxWait: 3e3,
|
|
61
|
+
refreshDeps: [],
|
|
62
|
+
onError(error) {
|
|
63
|
+
console.error(error);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
);
|
|
29
67
|
const onMessage = useMemoizedFn((event) => {
|
|
30
68
|
if (event.data.type === "didDomain.success") {
|
|
31
69
|
onSuccess?.({ nftDid: event.data?.nftDid, domain: event.data?.domain, chainHost: event.data?.chainHost });
|
|
@@ -51,7 +89,11 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, title, onSucc
|
|
|
51
89
|
});
|
|
52
90
|
const handleOpenDialog = useMemoizedFn(() => {
|
|
53
91
|
setState({ currentState: 2 /* InProgress */ });
|
|
54
|
-
sessionRequest.
|
|
92
|
+
if (!sessionRequest.data) {
|
|
93
|
+
console.error("Failed to create session");
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
handleCreatedSession({ sessionId: sessionRequest.data.sessionId, baseURL: sessionRequest.data.baseURL });
|
|
55
97
|
});
|
|
56
98
|
const handleCreatedSession = useMemoizedFn(({ sessionId, baseURL }) => {
|
|
57
99
|
window.addEventListener("message", onMessage);
|
|
@@ -67,33 +109,18 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, title, onSucc
|
|
|
67
109
|
}, 1e3);
|
|
68
110
|
return () => clearInterval(timer);
|
|
69
111
|
});
|
|
70
|
-
const sessionRequest = useAHooksRequest(
|
|
71
|
-
async () => {
|
|
72
|
-
const serviceURL = await getDidDomainServiceURL(didDomainURL);
|
|
73
|
-
if (!serviceURL) {
|
|
74
|
-
return null;
|
|
75
|
-
}
|
|
76
|
-
const apiRequest = create({ baseURL: serviceURL.api });
|
|
77
|
-
const { data } = await apiRequest.post("/payment/session", {
|
|
78
|
-
delegatee,
|
|
79
|
-
delegateePk
|
|
80
|
-
});
|
|
81
|
-
return handleCreatedSession({ sessionId: data.sessionId, baseURL: serviceURL.base });
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
manual: true,
|
|
85
|
-
debounceWait: 500,
|
|
86
|
-
debounceLeading: true,
|
|
87
|
-
debounceTrailing: false,
|
|
88
|
-
debounceMaxWait: 3e3,
|
|
89
|
-
refreshDeps: [],
|
|
90
|
-
onError(error) {
|
|
91
|
-
console.error(error);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
);
|
|
95
112
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
96
|
-
/* @__PURE__ */ jsx(
|
|
113
|
+
/* @__PURE__ */ jsx(
|
|
114
|
+
LoadingButton,
|
|
115
|
+
{
|
|
116
|
+
loading: sessionRequest.loading,
|
|
117
|
+
onClick: handleOpenDialog,
|
|
118
|
+
variant: "contained",
|
|
119
|
+
startIcon: /* @__PURE__ */ jsx(ShoppingCart, {}),
|
|
120
|
+
...props,
|
|
121
|
+
children: title || t("buy.button.title")
|
|
122
|
+
}
|
|
123
|
+
),
|
|
97
124
|
/* @__PURE__ */ jsxs(
|
|
98
125
|
Dialog,
|
|
99
126
|
{
|
package/lib/buy.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
module.exports = Buy;
|
|
7
7
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
8
|
-
var
|
|
8
|
+
var _LoadingButton = _interopRequireDefault(require("@mui/lab/LoadingButton"));
|
|
9
9
|
var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
|
|
10
10
|
var _context = require("@arcblock/ux/lib/Locale/context");
|
|
11
11
|
var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
|
|
@@ -27,6 +27,29 @@ var BuyState = /* @__PURE__ */(BuyState2 => {
|
|
|
27
27
|
BuyState2[BuyState2["Completed"] = 8] = "Completed";
|
|
28
28
|
return BuyState2;
|
|
29
29
|
})(BuyState || {});
|
|
30
|
+
const preFetch = async ({
|
|
31
|
+
didDomainURL,
|
|
32
|
+
delegatee,
|
|
33
|
+
delegateePk
|
|
34
|
+
}) => {
|
|
35
|
+
const serviceURL = await (0, _util.getDidDomainServiceURL)(didDomainURL);
|
|
36
|
+
if (!serviceURL) {
|
|
37
|
+
return null;
|
|
38
|
+
}
|
|
39
|
+
const apiRequest = (0, _api.create)({
|
|
40
|
+
baseURL: serviceURL.api
|
|
41
|
+
});
|
|
42
|
+
const {
|
|
43
|
+
data
|
|
44
|
+
} = await apiRequest.post("/payment/session", {
|
|
45
|
+
delegatee,
|
|
46
|
+
delegateePk
|
|
47
|
+
});
|
|
48
|
+
return {
|
|
49
|
+
sessionId: data.sessionId,
|
|
50
|
+
baseURL: serviceURL.base
|
|
51
|
+
};
|
|
52
|
+
};
|
|
30
53
|
function Component({
|
|
31
54
|
delegatee,
|
|
32
55
|
delegateePk,
|
|
@@ -43,6 +66,26 @@ function Component({
|
|
|
43
66
|
currentState: 1 /* Prepare */
|
|
44
67
|
});
|
|
45
68
|
const popup = (0, _react.useRef)(null);
|
|
69
|
+
const sessionRequest = (0, _ahooks.useRequest)(async () => {
|
|
70
|
+
const data = await preFetch({
|
|
71
|
+
didDomainURL,
|
|
72
|
+
delegatee,
|
|
73
|
+
delegateePk
|
|
74
|
+
});
|
|
75
|
+
if (!data) {
|
|
76
|
+
return data;
|
|
77
|
+
}
|
|
78
|
+
return data;
|
|
79
|
+
}, {
|
|
80
|
+
debounceWait: 500,
|
|
81
|
+
debounceLeading: true,
|
|
82
|
+
debounceTrailing: false,
|
|
83
|
+
debounceMaxWait: 3e3,
|
|
84
|
+
refreshDeps: [],
|
|
85
|
+
onError(error) {
|
|
86
|
+
console.error(error);
|
|
87
|
+
}
|
|
88
|
+
});
|
|
46
89
|
const onMessage = (0, _ahooks.useMemoizedFn)(event => {
|
|
47
90
|
if (event.data.type === "didDomain.success") {
|
|
48
91
|
onSuccess?.({
|
|
@@ -80,7 +123,14 @@ function Component({
|
|
|
80
123
|
setState({
|
|
81
124
|
currentState: 2 /* InProgress */
|
|
82
125
|
});
|
|
83
|
-
sessionRequest.
|
|
126
|
+
if (!sessionRequest.data) {
|
|
127
|
+
console.error("Failed to create session");
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
handleCreatedSession({
|
|
131
|
+
sessionId: sessionRequest.data.sessionId,
|
|
132
|
+
baseURL: sessionRequest.data.baseURL
|
|
133
|
+
});
|
|
84
134
|
});
|
|
85
135
|
const handleCreatedSession = (0, _ahooks.useMemoizedFn)(({
|
|
86
136
|
sessionId,
|
|
@@ -99,37 +149,9 @@ function Component({
|
|
|
99
149
|
}, 1e3);
|
|
100
150
|
return () => clearInterval(timer);
|
|
101
151
|
});
|
|
102
|
-
const sessionRequest = (0, _ahooks.useRequest)(async () => {
|
|
103
|
-
const serviceURL = await (0, _util.getDidDomainServiceURL)(didDomainURL);
|
|
104
|
-
if (!serviceURL) {
|
|
105
|
-
return null;
|
|
106
|
-
}
|
|
107
|
-
const apiRequest = (0, _api.create)({
|
|
108
|
-
baseURL: serviceURL.api
|
|
109
|
-
});
|
|
110
|
-
const {
|
|
111
|
-
data
|
|
112
|
-
} = await apiRequest.post("/payment/session", {
|
|
113
|
-
delegatee,
|
|
114
|
-
delegateePk
|
|
115
|
-
});
|
|
116
|
-
return handleCreatedSession({
|
|
117
|
-
sessionId: data.sessionId,
|
|
118
|
-
baseURL: serviceURL.base
|
|
119
|
-
});
|
|
120
|
-
}, {
|
|
121
|
-
manual: true,
|
|
122
|
-
debounceWait: 500,
|
|
123
|
-
debounceLeading: true,
|
|
124
|
-
debounceTrailing: false,
|
|
125
|
-
debounceMaxWait: 3e3,
|
|
126
|
-
refreshDeps: [],
|
|
127
|
-
onError(error) {
|
|
128
|
-
console.error(error);
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
152
|
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
132
|
-
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(
|
|
153
|
+
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_LoadingButton.default, {
|
|
154
|
+
loading: sessionRequest.loading,
|
|
133
155
|
onClick: handleOpenDialog,
|
|
134
156
|
variant: "contained",
|
|
135
157
|
startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ShoppingCart.default, {}),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/did-domain-react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.52",
|
|
4
4
|
"description": "Reusable react components for DID Domain",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"vite-plugin-babel": "^1.3.0",
|
|
103
103
|
"vite-plugin-node-polyfills": "^0.21.0"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "a3d2f41791be7006f142f0f7edf471937988f5cf"
|
|
106
106
|
}
|
package/src/buy.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import LoadingButton from '@mui/lab/LoadingButton';
|
|
2
2
|
import Dialog from '@arcblock/ux/lib/Dialog';
|
|
3
3
|
import { LocaleProvider, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
|
|
4
4
|
import type { Locale } from '@arcblock/ux/lib/type';
|
|
@@ -32,13 +32,63 @@ interface Props {
|
|
|
32
32
|
onSuccess?: (data: { nftDid: string; domain: string; chainHost: string }) => void;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
const preFetch = async ({
|
|
36
|
+
didDomainURL,
|
|
37
|
+
delegatee,
|
|
38
|
+
delegateePk,
|
|
39
|
+
}: {
|
|
40
|
+
didDomainURL: string;
|
|
41
|
+
delegatee: string;
|
|
42
|
+
delegateePk: string;
|
|
43
|
+
}) => {
|
|
44
|
+
const serviceURL = await getDidDomainServiceURL(didDomainURL);
|
|
45
|
+
if (!serviceURL) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const apiRequest = create({ baseURL: serviceURL.api });
|
|
50
|
+
|
|
51
|
+
const { data } = await apiRequest.post('/payment/session', {
|
|
52
|
+
delegatee,
|
|
53
|
+
delegateePk,
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
return {
|
|
57
|
+
sessionId: data.sessionId,
|
|
58
|
+
baseURL: serviceURL.base,
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
|
|
35
62
|
function Component({ delegatee, delegateePk, didDomainURL, locale, title, onSuccess, ...props }: Props & ButtonProps) {
|
|
36
63
|
const { t } = useLocaleContext();
|
|
37
|
-
const [state, setState] = useSetState<{
|
|
64
|
+
const [state, setState] = useSetState<{
|
|
65
|
+
currentState: BuyState;
|
|
66
|
+
}>({
|
|
38
67
|
currentState: BuyState.Prepare,
|
|
39
68
|
});
|
|
40
69
|
const popup = useRef<Window | null>(null);
|
|
41
70
|
|
|
71
|
+
const sessionRequest = useAHooksRequest(
|
|
72
|
+
async () => {
|
|
73
|
+
const data = await preFetch({ didDomainURL, delegatee, delegateePk });
|
|
74
|
+
if (!data) {
|
|
75
|
+
return data;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return data;
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
debounceWait: 500,
|
|
82
|
+
debounceLeading: true,
|
|
83
|
+
debounceTrailing: false,
|
|
84
|
+
debounceMaxWait: 3000,
|
|
85
|
+
refreshDeps: [],
|
|
86
|
+
onError(error: Error) {
|
|
87
|
+
console.error(error);
|
|
88
|
+
},
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
|
|
42
92
|
const onMessage = useMemoizedFn((event: MessageEvent) => {
|
|
43
93
|
if (event.data.type === 'didDomain.success') {
|
|
44
94
|
onSuccess?.({ nftDid: event.data?.nftDid, domain: event.data?.domain, chainHost: event.data?.chainHost });
|
|
@@ -68,7 +118,12 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, title, onSucc
|
|
|
68
118
|
|
|
69
119
|
const handleOpenDialog = useMemoizedFn(() => {
|
|
70
120
|
setState({ currentState: BuyState.InProgress });
|
|
71
|
-
sessionRequest.
|
|
121
|
+
if (!sessionRequest.data) {
|
|
122
|
+
console.error('Failed to create session');
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
handleCreatedSession({ sessionId: sessionRequest.data.sessionId, baseURL: sessionRequest.data.baseURL });
|
|
72
127
|
});
|
|
73
128
|
|
|
74
129
|
const handleCreatedSession = useMemoizedFn(({ sessionId, baseURL }: { sessionId: string; baseURL: string }) => {
|
|
@@ -89,40 +144,16 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, title, onSucc
|
|
|
89
144
|
return () => clearInterval(timer);
|
|
90
145
|
});
|
|
91
146
|
|
|
92
|
-
const sessionRequest = useAHooksRequest(
|
|
93
|
-
async () => {
|
|
94
|
-
const serviceURL = await getDidDomainServiceURL(didDomainURL);
|
|
95
|
-
if (!serviceURL) {
|
|
96
|
-
return null;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const apiRequest = create({ baseURL: serviceURL.api });
|
|
100
|
-
|
|
101
|
-
const { data } = await apiRequest.post('/payment/session', {
|
|
102
|
-
delegatee,
|
|
103
|
-
delegateePk,
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
return handleCreatedSession({ sessionId: data.sessionId, baseURL: serviceURL.base });
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
manual: true,
|
|
110
|
-
debounceWait: 500,
|
|
111
|
-
debounceLeading: true,
|
|
112
|
-
debounceTrailing: false,
|
|
113
|
-
debounceMaxWait: 3000,
|
|
114
|
-
refreshDeps: [],
|
|
115
|
-
onError(error: Error) {
|
|
116
|
-
console.error(error);
|
|
117
|
-
},
|
|
118
|
-
}
|
|
119
|
-
);
|
|
120
|
-
|
|
121
147
|
return (
|
|
122
148
|
<>
|
|
123
|
-
<
|
|
149
|
+
<LoadingButton
|
|
150
|
+
loading={sessionRequest.loading}
|
|
151
|
+
onClick={handleOpenDialog}
|
|
152
|
+
variant="contained"
|
|
153
|
+
startIcon={<ShoppingCart />}
|
|
154
|
+
{...props}>
|
|
124
155
|
{title || t('buy.button.title')}
|
|
125
|
-
</
|
|
156
|
+
</LoadingButton>
|
|
126
157
|
<Dialog
|
|
127
158
|
fullWidth
|
|
128
159
|
maxWidth="xs"
|