@arcblock/ux 1.16.14 → 1.16.18
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/lib/Locale/context.js +72 -56
- package/lib/NFTDisplay/index.js +30 -12
- package/lib/Result/common.js +36 -25
- package/lib/Result/result.js +1 -1
- package/package.json +4 -4
- package/src/Locale/context.js +42 -36
- package/src/NFTDisplay/index.js +23 -8
- package/src/Result/common.js +21 -16
- package/src/Result/result.js +1 -0
- package/lib/Result/html/index.js +0 -123
- package/lib/Result/html/template.js +0 -25
- package/src/Result/html/index.js +0 -61
- package/src/Result/html/template.js +0 -71
package/lib/Locale/context.js
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.LocaleProvider =
|
|
7
|
-
exports.useLocaleContext = useLocaleContext;
|
|
8
|
-
exports.languages = exports.getLocale = exports.setLocale = exports.LocaleContext = exports.LocaleConsumer = void 0;
|
|
6
|
+
exports.create = exports.languages = exports.getLocale = exports.setLocale = exports.useLocaleContext = exports.LocaleContext = exports.LocaleConsumer = exports.LocaleProvider = void 0;
|
|
9
7
|
|
|
10
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
9
|
|
|
@@ -70,60 +68,78 @@ exports.setLocale = setLocale;
|
|
|
70
68
|
|
|
71
69
|
const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
|
|
72
70
|
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
} = LocaleContext;
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
71
|
+
const create = () => {
|
|
72
|
+
const LocaleContext = /*#__PURE__*/_react.default.createContext();
|
|
73
|
+
|
|
74
|
+
const {
|
|
75
|
+
Provider,
|
|
76
|
+
Consumer
|
|
77
|
+
} = LocaleContext;
|
|
78
|
+
|
|
79
|
+
function LocaleProvider(_ref) {
|
|
80
|
+
let {
|
|
81
|
+
children,
|
|
82
|
+
locale,
|
|
83
|
+
translations
|
|
84
|
+
} = _ref,
|
|
85
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
86
|
+
|
|
87
|
+
const [currentLocale, setCurrentLocale] = (0, _react.useState)(getLocale(locale));
|
|
88
|
+
(0, _react.useEffect)(() => {
|
|
89
|
+
setLocale(currentLocale);
|
|
90
|
+
}, [currentLocale]);
|
|
91
|
+
|
|
92
|
+
const changeLocale = newLocale => {
|
|
93
|
+
setCurrentLocale(newLocale);
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const translate = (key, data) => {
|
|
97
|
+
if (!translations[currentLocale] || !translations[currentLocale][key]) {
|
|
98
|
+
console.warn("Warning: no ".concat(key, " translation of ").concat(currentLocale));
|
|
99
|
+
return key;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return replace(translations[currentLocale][key], data);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
return /*#__PURE__*/_react.default.createElement(Provider, {
|
|
106
|
+
value: _objectSpread({
|
|
107
|
+
locale: currentLocale,
|
|
108
|
+
changeLocale,
|
|
109
|
+
t: translate
|
|
110
|
+
}, rest)
|
|
111
|
+
}, children);
|
|
112
|
+
}
|
|
98
113
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
114
|
+
function useLocaleContext() {
|
|
115
|
+
const context = (0, _react.useContext)(LocaleContext);
|
|
116
|
+
return context;
|
|
117
|
+
}
|
|
104
118
|
|
|
105
|
-
|
|
119
|
+
LocaleProvider.propTypes = {
|
|
120
|
+
children: _propTypes.default.any.isRequired,
|
|
121
|
+
translations: _propTypes.default.object.isRequired,
|
|
122
|
+
locale: _propTypes.default.string
|
|
123
|
+
};
|
|
124
|
+
LocaleProvider.defaultProps = {
|
|
125
|
+
locale: ''
|
|
126
|
+
};
|
|
127
|
+
return {
|
|
128
|
+
Consumer,
|
|
129
|
+
LocaleProvider,
|
|
130
|
+
LocaleContext,
|
|
131
|
+
useLocaleContext
|
|
106
132
|
};
|
|
107
|
-
|
|
108
|
-
return /*#__PURE__*/_react.default.createElement(Provider, {
|
|
109
|
-
value: _objectSpread({
|
|
110
|
-
locale: currentLocale,
|
|
111
|
-
changeLocale,
|
|
112
|
-
t: translate
|
|
113
|
-
}, rest)
|
|
114
|
-
}, children);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
function useLocaleContext() {
|
|
118
|
-
const context = (0, _react.useContext)(LocaleContext);
|
|
119
|
-
return context;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
LocaleProvider.propTypes = {
|
|
123
|
-
children: _propTypes.default.any.isRequired,
|
|
124
|
-
translations: _propTypes.default.object.isRequired,
|
|
125
|
-
locale: _propTypes.default.string
|
|
126
133
|
};
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
134
|
+
|
|
135
|
+
exports.create = create;
|
|
136
|
+
const {
|
|
137
|
+
Consumer,
|
|
138
|
+
LocaleProvider,
|
|
139
|
+
LocaleContext,
|
|
140
|
+
useLocaleContext
|
|
141
|
+
} = create();
|
|
142
|
+
exports.useLocaleContext = useLocaleContext;
|
|
143
|
+
exports.LocaleContext = LocaleContext;
|
|
144
|
+
exports.LocaleProvider = LocaleProvider;
|
|
145
|
+
exports.LocaleConsumer = Consumer;
|
package/lib/NFTDisplay/index.js
CHANGED
|
@@ -56,11 +56,10 @@ function fromBase64(v) {
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
return Buffer.from(_base64Url.default.unescape(v), 'base64');
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}; // 仅针对非 url type 的情况
|
|
59
|
+
} // const isVC = type => {
|
|
60
|
+
// return String(type).includes('VerifiableCredential');
|
|
61
|
+
// };
|
|
62
|
+
// 仅针对非 url type 的情况
|
|
64
63
|
|
|
65
64
|
|
|
66
65
|
const getSvgEmbedder = preferredSvgEmbedder => {
|
|
@@ -111,8 +110,7 @@ function NFTDisplay(_ref) {
|
|
|
111
110
|
}
|
|
112
111
|
|
|
113
112
|
const {
|
|
114
|
-
vcId
|
|
115
|
-
type: assetType
|
|
113
|
+
vcId
|
|
116
114
|
} = parsed.current;
|
|
117
115
|
const display = (0, _get.default)(parsed.current, 'credentialSubject.display');
|
|
118
116
|
const {
|
|
@@ -142,10 +140,9 @@ function NFTDisplay(_ref) {
|
|
|
142
140
|
if (!state.loading && minimumLoadingReady || state.error) {
|
|
143
141
|
onCompleted();
|
|
144
142
|
}
|
|
145
|
-
}, [state, minimumLoadingReady]);
|
|
146
|
-
|
|
143
|
+
}, [state, minimumLoadingReady]);
|
|
147
144
|
|
|
148
|
-
if (state.error
|
|
145
|
+
if (state.error) {
|
|
149
146
|
throw new Error('Failed to render NFT Display.');
|
|
150
147
|
}
|
|
151
148
|
|
|
@@ -155,8 +152,15 @@ function NFTDisplay(_ref) {
|
|
|
155
152
|
case 'url':
|
|
156
153
|
{
|
|
157
154
|
const urlObj = new URL(content);
|
|
158
|
-
|
|
159
|
-
urlObj.searchParams.
|
|
155
|
+
|
|
156
|
+
if (!urlObj.searchParams.has('assetId')) {
|
|
157
|
+
urlObj.searchParams.append('assetId', address);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
if (!urlObj.searchParams.has('vcId')) {
|
|
161
|
+
urlObj.searchParams.append('vcId', vcId);
|
|
162
|
+
}
|
|
163
|
+
|
|
160
164
|
const url = urlObj.href;
|
|
161
165
|
return /*#__PURE__*/_react.default.createElement("img", {
|
|
162
166
|
src: url,
|
|
@@ -170,6 +174,20 @@ function NFTDisplay(_ref) {
|
|
|
170
174
|
});
|
|
171
175
|
}
|
|
172
176
|
|
|
177
|
+
case 'uri':
|
|
178
|
+
{
|
|
179
|
+
return /*#__PURE__*/_react.default.createElement("img", {
|
|
180
|
+
src: content,
|
|
181
|
+
onError: () => setState(_objectSpread(_objectSpread({}, state), {}, {
|
|
182
|
+
error: true
|
|
183
|
+
})),
|
|
184
|
+
onLoad: () => setState(_objectSpread(_objectSpread({}, state), {}, {
|
|
185
|
+
loading: false
|
|
186
|
+
})),
|
|
187
|
+
alt: "NFT Display"
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
|
|
173
191
|
case 'svg_gzipped':
|
|
174
192
|
{
|
|
175
193
|
const buffer = _pako.default.ungzip(fromBase64(content), {});
|
package/lib/Result/common.js
CHANGED
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ComingSoon = exports.Maintenance = exports.Error = exports.InternalServerError = exports.Forbidden = exports.PageNotFound = void 0;
|
|
6
|
+
exports.Info = exports.ComingSoon = exports.Maintenance = exports.Error = exports.InternalServerError = exports.Forbidden = exports.PageNotFound = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
-
|
|
12
10
|
var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
|
|
13
11
|
|
|
12
|
+
var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
|
|
13
|
+
|
|
14
|
+
var _CancelRounded = _interopRequireDefault(require("@material-ui/icons/CancelRounded"));
|
|
15
|
+
|
|
14
16
|
var _result = _interopRequireDefault(require("./result"));
|
|
15
17
|
|
|
16
18
|
var _translations = _interopRequireDefault(require("./translations"));
|
|
17
19
|
|
|
18
|
-
var _Logo = _interopRequireDefault(require("../Logo"));
|
|
19
|
-
|
|
20
20
|
var _context = require("../Locale/context");
|
|
21
21
|
|
|
22
22
|
const _excluded = ["locale"],
|
|
@@ -52,7 +52,7 @@ const PageNotFound = _ref => {
|
|
|
52
52
|
|
|
53
53
|
locale = useLocale(locale);
|
|
54
54
|
return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
|
|
55
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
55
|
+
icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
|
|
56
56
|
title: _translations.default[locale][404].title,
|
|
57
57
|
description: _translations.default[locale][404].description
|
|
58
58
|
}, rest));
|
|
@@ -69,7 +69,7 @@ const Forbidden = _ref2 => {
|
|
|
69
69
|
|
|
70
70
|
locale = useLocale(locale);
|
|
71
71
|
return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
|
|
72
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
72
|
+
icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
|
|
73
73
|
title: _translations.default[locale][403].title,
|
|
74
74
|
description: _translations.default[locale][403].description
|
|
75
75
|
}, rest));
|
|
@@ -86,7 +86,7 @@ const InternalServerError = _ref3 => {
|
|
|
86
86
|
|
|
87
87
|
locale = useLocale(locale);
|
|
88
88
|
return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
|
|
89
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
89
|
+
icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
|
|
90
90
|
title: _translations.default[locale][500].title,
|
|
91
91
|
description: _translations.default[locale][500].description
|
|
92
92
|
}, rest));
|
|
@@ -103,7 +103,7 @@ const Error = _ref4 => {
|
|
|
103
103
|
|
|
104
104
|
locale = useLocale(locale);
|
|
105
105
|
return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
|
|
106
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
106
|
+
icon: /*#__PURE__*/_react.default.createElement(StyledErrorIcon, null),
|
|
107
107
|
title: _translations.default[locale].error.title,
|
|
108
108
|
description: _translations.default[locale].error.description
|
|
109
109
|
}, rest));
|
|
@@ -120,7 +120,7 @@ const Maintenance = _ref5 => {
|
|
|
120
120
|
|
|
121
121
|
locale = useLocale(locale);
|
|
122
122
|
return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
|
|
123
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
123
|
+
icon: /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null),
|
|
124
124
|
title: _translations.default[locale].maintenance.title,
|
|
125
125
|
description: _translations.default[locale].maintenance.description
|
|
126
126
|
}, rest));
|
|
@@ -137,29 +137,40 @@ const ComingSoon = _ref6 => {
|
|
|
137
137
|
|
|
138
138
|
locale = useLocale(locale);
|
|
139
139
|
return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
|
|
140
|
-
icon: /*#__PURE__*/_react.default.createElement(
|
|
140
|
+
icon: /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null),
|
|
141
141
|
title: _translations.default[locale]['coming-soon'].title,
|
|
142
142
|
description: _translations.default[locale]['coming-soon'].description
|
|
143
143
|
}, rest));
|
|
144
144
|
};
|
|
145
145
|
|
|
146
146
|
exports.ComingSoon = ComingSoon;
|
|
147
|
-
ComingSoon.status = 'coming-soon'; //
|
|
147
|
+
ComingSoon.status = 'coming-soon'; // info, 与其它 status 不同, title/description 需要使用方自己传入
|
|
148
|
+
|
|
149
|
+
const Info = props => {
|
|
150
|
+
return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
|
|
151
|
+
icon: /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null)
|
|
152
|
+
}, props));
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
exports.Info = Info;
|
|
156
|
+
Info.status = 'info';
|
|
148
157
|
|
|
149
|
-
const
|
|
158
|
+
const StyledErrorIcon = props => {
|
|
150
159
|
const theme = (0, _useTheme.default)();
|
|
151
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
152
|
-
|
|
153
|
-
|
|
160
|
+
return /*#__PURE__*/_react.default.createElement(_CancelRounded.default, Object.assign({
|
|
161
|
+
style: {
|
|
162
|
+
color: theme.palette.error.main,
|
|
163
|
+
fontSize: 72
|
|
164
|
+
}
|
|
154
165
|
}, props));
|
|
155
166
|
};
|
|
156
167
|
|
|
157
|
-
const
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
168
|
+
const StyledInfoIcon = props => {
|
|
169
|
+
const theme = (0, _useTheme.default)();
|
|
170
|
+
return /*#__PURE__*/_react.default.createElement(_Info.default, Object.assign({
|
|
171
|
+
style: {
|
|
172
|
+
color: theme.palette.info.main,
|
|
173
|
+
fontSize: 72
|
|
174
|
+
}
|
|
175
|
+
}, props));
|
|
176
|
+
};
|
package/lib/Result/result.js
CHANGED
|
@@ -63,7 +63,7 @@ Result.defaultProps = {
|
|
|
63
63
|
const Root = _styledComponents.default.div.withConfig({
|
|
64
64
|
displayName: "result__Root",
|
|
65
65
|
componentId: "sc-1ttf6c9-0"
|
|
66
|
-
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:16px;background-color:#f7f8fb;"]);
|
|
66
|
+
})(["box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:16px;background-color:#f7f8fb;"]);
|
|
67
67
|
|
|
68
68
|
var _default = Result;
|
|
69
69
|
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.18",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
"react": ">=16.12.0",
|
|
54
54
|
"react-ga": "^2.7.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "d558b1c877b8ea29fc1719ca91bd7506344a6b23",
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@arcblock/icons": "^1.16.
|
|
59
|
-
"@arcblock/react-hooks": "^1.16.
|
|
58
|
+
"@arcblock/icons": "^1.16.18",
|
|
59
|
+
"@arcblock/react-hooks": "^1.16.18",
|
|
60
60
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
61
61
|
"@material-ui/core": "^4.12.3",
|
|
62
62
|
"@material-ui/icons": "4.11.2",
|
package/src/Locale/context.js
CHANGED
|
@@ -32,50 +32,55 @@ const setLocale = locale => Cookie.set(cookieName, locale, getCookieOptions());
|
|
|
32
32
|
const replace = (template, data) =>
|
|
33
33
|
template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
|
|
34
34
|
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
function LocaleProvider({ children, locale, translations, ...rest }) {
|
|
39
|
-
|
|
35
|
+
const create = () => {
|
|
36
|
+
const LocaleContext = React.createContext();
|
|
37
|
+
const { Provider, Consumer } = LocaleContext;
|
|
38
|
+
function LocaleProvider({ children, locale, translations, ...rest }) {
|
|
39
|
+
const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
|
|
40
|
+
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
setLocale(currentLocale);
|
|
43
|
+
}, [currentLocale]);
|
|
44
|
+
|
|
45
|
+
const changeLocale = newLocale => {
|
|
46
|
+
setCurrentLocale(newLocale);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const translate = (key, data) => {
|
|
50
|
+
if (!translations[currentLocale] || !translations[currentLocale][key]) {
|
|
51
|
+
console.warn(`Warning: no ${key} translation of ${currentLocale}`);
|
|
52
|
+
return key;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return replace(translations[currentLocale][key], data);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>
|
|
60
|
+
{children}
|
|
61
|
+
</Provider>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
40
64
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
65
|
+
function useLocaleContext() {
|
|
66
|
+
const context = useContext(LocaleContext);
|
|
67
|
+
return context;
|
|
68
|
+
}
|
|
44
69
|
|
|
45
|
-
|
|
46
|
-
|
|
70
|
+
LocaleProvider.propTypes = {
|
|
71
|
+
children: PropTypes.any.isRequired,
|
|
72
|
+
translations: PropTypes.object.isRequired,
|
|
73
|
+
locale: PropTypes.string,
|
|
47
74
|
};
|
|
48
75
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
console.warn(`Warning: no ${key} translation of ${currentLocale}`);
|
|
52
|
-
return key;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return replace(translations[currentLocale][key], data);
|
|
76
|
+
LocaleProvider.defaultProps = {
|
|
77
|
+
locale: '',
|
|
56
78
|
};
|
|
57
79
|
|
|
58
|
-
return
|
|
59
|
-
<Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>
|
|
60
|
-
{children}
|
|
61
|
-
</Provider>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function useLocaleContext() {
|
|
66
|
-
const context = useContext(LocaleContext);
|
|
67
|
-
return context;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
LocaleProvider.propTypes = {
|
|
71
|
-
children: PropTypes.any.isRequired,
|
|
72
|
-
translations: PropTypes.object.isRequired,
|
|
73
|
-
locale: PropTypes.string,
|
|
80
|
+
return { Consumer, LocaleProvider, LocaleContext, useLocaleContext };
|
|
74
81
|
};
|
|
75
82
|
|
|
76
|
-
LocaleProvider
|
|
77
|
-
locale: '',
|
|
78
|
-
};
|
|
83
|
+
const { Consumer, LocaleProvider, LocaleContext, useLocaleContext } = create();
|
|
79
84
|
|
|
80
85
|
export {
|
|
81
86
|
LocaleProvider,
|
|
@@ -85,4 +90,5 @@ export {
|
|
|
85
90
|
setLocale,
|
|
86
91
|
getLocale,
|
|
87
92
|
languages,
|
|
93
|
+
create,
|
|
88
94
|
};
|
package/src/NFTDisplay/index.js
CHANGED
|
@@ -19,9 +19,9 @@ function fromBase64(v) {
|
|
|
19
19
|
return Buffer.from(base64.unescape(v), 'base64');
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
const isVC = type => {
|
|
23
|
-
|
|
24
|
-
};
|
|
22
|
+
// const isVC = type => {
|
|
23
|
+
// return String(type).includes('VerifiableCredential');
|
|
24
|
+
// };
|
|
25
25
|
|
|
26
26
|
// 仅针对非 url type 的情况
|
|
27
27
|
const getSvgEmbedder = preferredSvgEmbedder => {
|
|
@@ -65,7 +65,7 @@ function NFTDisplay({
|
|
|
65
65
|
parsed.current = JSON.parse(data);
|
|
66
66
|
// console.log('[debug] parse data')
|
|
67
67
|
}
|
|
68
|
-
const { vcId
|
|
68
|
+
const { vcId } = parsed.current;
|
|
69
69
|
const display = get(parsed.current, 'credentialSubject.display');
|
|
70
70
|
const { content, type } = display;
|
|
71
71
|
const isUrlType = type === 'url';
|
|
@@ -90,8 +90,7 @@ function NFTDisplay({
|
|
|
90
90
|
}
|
|
91
91
|
}, [state, minimumLoadingReady]);
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
if (state.error || !isVC(assetType)) {
|
|
93
|
+
if (state.error) {
|
|
95
94
|
throw new Error('Failed to render NFT Display.');
|
|
96
95
|
}
|
|
97
96
|
|
|
@@ -100,8 +99,14 @@ function NFTDisplay({
|
|
|
100
99
|
switch (type) {
|
|
101
100
|
case 'url': {
|
|
102
101
|
const urlObj = new URL(content);
|
|
103
|
-
urlObj.searchParams.
|
|
104
|
-
|
|
102
|
+
if (!urlObj.searchParams.has('assetId')) {
|
|
103
|
+
urlObj.searchParams.append('assetId', address);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
if (!urlObj.searchParams.has('vcId')) {
|
|
107
|
+
urlObj.searchParams.append('vcId', vcId);
|
|
108
|
+
}
|
|
109
|
+
|
|
105
110
|
const url = urlObj.href;
|
|
106
111
|
return (
|
|
107
112
|
<img
|
|
@@ -112,6 +117,16 @@ function NFTDisplay({
|
|
|
112
117
|
/>
|
|
113
118
|
);
|
|
114
119
|
}
|
|
120
|
+
case 'uri': {
|
|
121
|
+
return (
|
|
122
|
+
<img
|
|
123
|
+
src={content}
|
|
124
|
+
onError={() => setState({ ...state, error: true })}
|
|
125
|
+
onLoad={() => setState({ ...state, loading: false })}
|
|
126
|
+
alt="NFT Display"
|
|
127
|
+
/>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
115
130
|
case 'svg_gzipped': {
|
|
116
131
|
const buffer = pako.ungzip(fromBase64(content), {});
|
|
117
132
|
const svg = Buffer.from(buffer).toString('utf8');
|
package/src/Result/common.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/* eslint-disable react/prop-types */
|
|
2
2
|
/* eslint-disable no-param-reassign */
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import styled from 'styled-components';
|
|
5
4
|
import useTheme from '@material-ui/core/styles/useTheme';
|
|
5
|
+
import InfoIcon from '@material-ui/icons/Info';
|
|
6
|
+
import CancelRoundedIcon from '@material-ui/icons/CancelRounded';
|
|
6
7
|
import Result from './result';
|
|
7
8
|
import translations from './translations';
|
|
8
|
-
import Logo from '../Logo';
|
|
9
9
|
import { useLocaleContext } from '../Locale/context';
|
|
10
10
|
|
|
11
11
|
// 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
|
|
@@ -20,7 +20,7 @@ export const PageNotFound = ({ locale, ...rest }) => {
|
|
|
20
20
|
locale = useLocale(locale);
|
|
21
21
|
return (
|
|
22
22
|
<Result
|
|
23
|
-
icon={<
|
|
23
|
+
icon={<StyledErrorIcon />}
|
|
24
24
|
title={translations[locale][404].title}
|
|
25
25
|
description={translations[locale][404].description}
|
|
26
26
|
{...rest}
|
|
@@ -34,7 +34,7 @@ export const Forbidden = ({ locale, ...rest }) => {
|
|
|
34
34
|
locale = useLocale(locale);
|
|
35
35
|
return (
|
|
36
36
|
<Result
|
|
37
|
-
icon={<
|
|
37
|
+
icon={<StyledErrorIcon />}
|
|
38
38
|
title={translations[locale][403].title}
|
|
39
39
|
description={translations[locale][403].description}
|
|
40
40
|
{...rest}
|
|
@@ -48,7 +48,7 @@ export const InternalServerError = ({ locale, ...rest }) => {
|
|
|
48
48
|
locale = useLocale(locale);
|
|
49
49
|
return (
|
|
50
50
|
<Result
|
|
51
|
-
icon={<
|
|
51
|
+
icon={<StyledErrorIcon />}
|
|
52
52
|
title={translations[locale][500].title}
|
|
53
53
|
description={translations[locale][500].description}
|
|
54
54
|
{...rest}
|
|
@@ -62,7 +62,7 @@ export const Error = ({ locale, ...rest }) => {
|
|
|
62
62
|
locale = useLocale(locale);
|
|
63
63
|
return (
|
|
64
64
|
<Result
|
|
65
|
-
icon={<
|
|
65
|
+
icon={<StyledErrorIcon />}
|
|
66
66
|
title={translations[locale].error.title}
|
|
67
67
|
description={translations[locale].error.description}
|
|
68
68
|
{...rest}
|
|
@@ -76,7 +76,7 @@ export const Maintenance = ({ locale, ...rest }) => {
|
|
|
76
76
|
locale = useLocale(locale);
|
|
77
77
|
return (
|
|
78
78
|
<Result
|
|
79
|
-
icon={<
|
|
79
|
+
icon={<StyledInfoIcon />}
|
|
80
80
|
title={translations[locale].maintenance.title}
|
|
81
81
|
description={translations[locale].maintenance.description}
|
|
82
82
|
{...rest}
|
|
@@ -90,7 +90,7 @@ export const ComingSoon = ({ locale, ...rest }) => {
|
|
|
90
90
|
locale = useLocale(locale);
|
|
91
91
|
return (
|
|
92
92
|
<Result
|
|
93
|
-
icon={<
|
|
93
|
+
icon={<StyledInfoIcon />}
|
|
94
94
|
title={translations[locale]['coming-soon'].title}
|
|
95
95
|
description={translations[locale]['coming-soon'].description}
|
|
96
96
|
{...rest}
|
|
@@ -99,13 +99,18 @@ export const ComingSoon = ({ locale, ...rest }) => {
|
|
|
99
99
|
};
|
|
100
100
|
ComingSoon.status = 'coming-soon';
|
|
101
101
|
|
|
102
|
-
//
|
|
103
|
-
const
|
|
102
|
+
// info, 与其它 status 不同, title/description 需要使用方自己传入
|
|
103
|
+
export const Info = props => {
|
|
104
|
+
return <Result icon={<StyledInfoIcon />} {...props} />;
|
|
105
|
+
};
|
|
106
|
+
Info.status = 'info';
|
|
107
|
+
|
|
108
|
+
const StyledErrorIcon = props => {
|
|
109
|
+
const theme = useTheme();
|
|
110
|
+
return <CancelRoundedIcon style={{ color: theme.palette.error.main, fontSize: 72 }} {...props} />;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
const StyledInfoIcon = props => {
|
|
104
114
|
const theme = useTheme();
|
|
105
|
-
return <
|
|
115
|
+
return <InfoIcon style={{ color: theme.palette.info.main, fontSize: 72 }} {...props} />;
|
|
106
116
|
};
|
|
107
|
-
const StyledLogoRoot = styled(Logo)`
|
|
108
|
-
* {
|
|
109
|
-
stroke: ${({ theme }) => theme.palette.grey[500]};
|
|
110
|
-
}
|
|
111
|
-
`;
|
package/src/Result/result.js
CHANGED
package/lib/Result/html/index.js
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = render;
|
|
7
|
-
|
|
8
|
-
var _template = _interopRequireDefault(require("./template"));
|
|
9
|
-
|
|
10
|
-
var _translations = _interopRequireDefault(require("../translations"));
|
|
11
|
-
|
|
12
|
-
const _excluded = ["locale"],
|
|
13
|
-
_excluded2 = ["locale"],
|
|
14
|
-
_excluded3 = ["locale"],
|
|
15
|
-
_excluded4 = ["locale"],
|
|
16
|
-
_excluded5 = ["locale"],
|
|
17
|
-
_excluded6 = ["locale"],
|
|
18
|
-
_excluded7 = ["status", "locale"];
|
|
19
|
-
|
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
-
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
25
|
-
|
|
26
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
|
-
|
|
28
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
29
|
-
|
|
30
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
31
|
-
|
|
32
|
-
const renderers = {
|
|
33
|
-
404: _ref => {
|
|
34
|
-
let {
|
|
35
|
-
locale = 'en'
|
|
36
|
-
} = _ref,
|
|
37
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
-
|
|
39
|
-
return _template.default.render(_objectSpread({
|
|
40
|
-
title: _translations.default[locale][404].title,
|
|
41
|
-
description: _translations.default[locale][404].description
|
|
42
|
-
}, rest));
|
|
43
|
-
},
|
|
44
|
-
403: _ref2 => {
|
|
45
|
-
let {
|
|
46
|
-
locale = 'en'
|
|
47
|
-
} = _ref2,
|
|
48
|
-
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
49
|
-
|
|
50
|
-
return _template.default.render(_objectSpread({
|
|
51
|
-
title: _translations.default[locale][403].title,
|
|
52
|
-
description: _translations.default[locale][403].description
|
|
53
|
-
}, rest));
|
|
54
|
-
},
|
|
55
|
-
500: _ref3 => {
|
|
56
|
-
let {
|
|
57
|
-
locale = 'en'
|
|
58
|
-
} = _ref3,
|
|
59
|
-
rest = _objectWithoutProperties(_ref3, _excluded3);
|
|
60
|
-
|
|
61
|
-
return _template.default.render(_objectSpread({
|
|
62
|
-
title: _translations.default[locale][500].title,
|
|
63
|
-
description: _translations.default[locale][500].description
|
|
64
|
-
}, rest));
|
|
65
|
-
},
|
|
66
|
-
error: _ref4 => {
|
|
67
|
-
let {
|
|
68
|
-
locale = 'en'
|
|
69
|
-
} = _ref4,
|
|
70
|
-
rest = _objectWithoutProperties(_ref4, _excluded4);
|
|
71
|
-
|
|
72
|
-
return _template.default.render(_objectSpread({
|
|
73
|
-
title: _translations.default[locale].error.title,
|
|
74
|
-
description: _translations.default[locale].error.description
|
|
75
|
-
}, rest));
|
|
76
|
-
},
|
|
77
|
-
maintenance: _ref5 => {
|
|
78
|
-
let {
|
|
79
|
-
locale = 'en'
|
|
80
|
-
} = _ref5,
|
|
81
|
-
rest = _objectWithoutProperties(_ref5, _excluded5);
|
|
82
|
-
|
|
83
|
-
return _template.default.render(_objectSpread({
|
|
84
|
-
title: _translations.default[locale].maintenance.title,
|
|
85
|
-
description: _translations.default[locale].maintenance.description
|
|
86
|
-
}, rest));
|
|
87
|
-
},
|
|
88
|
-
'coming-soon': _ref6 => {
|
|
89
|
-
let {
|
|
90
|
-
locale = 'en'
|
|
91
|
-
} = _ref6,
|
|
92
|
-
rest = _objectWithoutProperties(_ref6, _excluded6);
|
|
93
|
-
|
|
94
|
-
return _template.default.render(_objectSpread({
|
|
95
|
-
title: _translations.default[locale]['coming-soon'].title,
|
|
96
|
-
description: _translations.default[locale]['coming-soon'].description
|
|
97
|
-
}, rest));
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
function render() {
|
|
102
|
-
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
103
|
-
|
|
104
|
-
const {
|
|
105
|
-
status,
|
|
106
|
-
locale = 'en'
|
|
107
|
-
} = options,
|
|
108
|
-
rest = _objectWithoutProperties(options, _excluded7);
|
|
109
|
-
|
|
110
|
-
if (status) {
|
|
111
|
-
const renderer = renderers[status];
|
|
112
|
-
|
|
113
|
-
if (!renderer) {
|
|
114
|
-
throw new Error("Please provide a valid status. Valid values are: ".concat(Object.keys(renderers).join(', ')));
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
return renderer(_objectSpread({
|
|
118
|
-
locale
|
|
119
|
-
}, rest));
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
return _template.default.render(_objectSpread({}, rest));
|
|
123
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
const arcblockLogoSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"></path><path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"></path></g></svg>';
|
|
8
|
-
|
|
9
|
-
function render(_ref) {
|
|
10
|
-
let {
|
|
11
|
-
pageTitle,
|
|
12
|
-
title,
|
|
13
|
-
icon,
|
|
14
|
-
description,
|
|
15
|
-
extra
|
|
16
|
-
} = _ref;
|
|
17
|
-
// eslint-disable-next-line no-param-reassign
|
|
18
|
-
pageTitle = pageTitle || "".concat(title, " - Blocklet Server");
|
|
19
|
-
return "\n <!DOCTYPE html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>".concat(pageTitle, "</title>\n <style>\n html {\n box-sizing: border-box;\n font-size: 16px;\n }\n *, *::before, *::after {\n box-sizing: inherit;\n }\n html, body {\n height: 100%;\n }\n body {\n margin: 0;\n }\n .container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n padding: 16px;\n background-color: #f7f8fb;\n }\n .svg-wrapper *{\n stroke: #9e9e9e;\n }\n .title {\n margin-top: 24px;\n font-size: 22px;\n font-weight: 400;\n color: #47494E;\n text-align: center;\n }\n .description {\n margin-top: 8px;\n font-size: 14px;\n color: #7F828B;\n text-align: center;\n }\n .extra {\n margin-top: 24px;\n }\n </style>\n </head>\n <body>\n <div class=\"container\">\n ").concat(icon ? "<img src=\"".concat(icon, "\" />") : "<span class=\"svg-wrapper\">".concat(arcblockLogoSvg, "</span>"), "\n <div class=\"title\">\n ").concat(title, "\n </div>\n ").concat(description ? "<div class=\"description\">".concat(description, "</div>") : '', "\n ").concat(extra ? "<div class=\"extra\">".concat(extra, "</div>") : '', "\n </div>\n </body>\n </html>");
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
var _default = {
|
|
23
|
-
render
|
|
24
|
-
};
|
|
25
|
-
exports.default = _default;
|
package/src/Result/html/index.js
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import template from './template';
|
|
2
|
-
import translations from '../translations';
|
|
3
|
-
|
|
4
|
-
const renderers = {
|
|
5
|
-
404: ({ locale = 'en', ...rest }) => {
|
|
6
|
-
return template.render({
|
|
7
|
-
title: translations[locale][404].title,
|
|
8
|
-
description: translations[locale][404].description,
|
|
9
|
-
...rest,
|
|
10
|
-
});
|
|
11
|
-
},
|
|
12
|
-
403: ({ locale = 'en', ...rest }) => {
|
|
13
|
-
return template.render({
|
|
14
|
-
title: translations[locale][403].title,
|
|
15
|
-
description: translations[locale][403].description,
|
|
16
|
-
...rest,
|
|
17
|
-
});
|
|
18
|
-
},
|
|
19
|
-
500: ({ locale = 'en', ...rest }) => {
|
|
20
|
-
return template.render({
|
|
21
|
-
title: translations[locale][500].title,
|
|
22
|
-
description: translations[locale][500].description,
|
|
23
|
-
...rest,
|
|
24
|
-
});
|
|
25
|
-
},
|
|
26
|
-
error: ({ locale = 'en', ...rest }) => {
|
|
27
|
-
return template.render({
|
|
28
|
-
title: translations[locale].error.title,
|
|
29
|
-
description: translations[locale].error.description,
|
|
30
|
-
...rest,
|
|
31
|
-
});
|
|
32
|
-
},
|
|
33
|
-
maintenance: ({ locale = 'en', ...rest }) => {
|
|
34
|
-
return template.render({
|
|
35
|
-
title: translations[locale].maintenance.title,
|
|
36
|
-
description: translations[locale].maintenance.description,
|
|
37
|
-
...rest,
|
|
38
|
-
});
|
|
39
|
-
},
|
|
40
|
-
'coming-soon': ({ locale = 'en', ...rest }) => {
|
|
41
|
-
return template.render({
|
|
42
|
-
title: translations[locale]['coming-soon'].title,
|
|
43
|
-
description: translations[locale]['coming-soon'].description,
|
|
44
|
-
...rest,
|
|
45
|
-
});
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export default function render(options = {}) {
|
|
50
|
-
const { status, locale = 'en', ...rest } = options;
|
|
51
|
-
if (status) {
|
|
52
|
-
const renderer = renderers[status];
|
|
53
|
-
if (!renderer) {
|
|
54
|
-
throw new Error(
|
|
55
|
-
`Please provide a valid status. Valid values are: ${Object.keys(renderers).join(', ')}`
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
return renderer({ locale, ...rest });
|
|
59
|
-
}
|
|
60
|
-
return template.render({ ...rest });
|
|
61
|
-
}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
const arcblockLogoSvg =
|
|
2
|
-
'<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"></path><path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"></path></g></svg>';
|
|
3
|
-
|
|
4
|
-
function render({ pageTitle, title, icon, description, extra }) {
|
|
5
|
-
// eslint-disable-next-line no-param-reassign
|
|
6
|
-
pageTitle = pageTitle || `${title} - Blocklet Server`;
|
|
7
|
-
return `
|
|
8
|
-
<!DOCTYPE html>
|
|
9
|
-
<html lang="en">
|
|
10
|
-
<head>
|
|
11
|
-
<meta charset="UTF-8">
|
|
12
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
13
|
-
<title>${pageTitle}</title>
|
|
14
|
-
<style>
|
|
15
|
-
html {
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
font-size: 16px;
|
|
18
|
-
}
|
|
19
|
-
*, *::before, *::after {
|
|
20
|
-
box-sizing: inherit;
|
|
21
|
-
}
|
|
22
|
-
html, body {
|
|
23
|
-
height: 100%;
|
|
24
|
-
}
|
|
25
|
-
body {
|
|
26
|
-
margin: 0;
|
|
27
|
-
}
|
|
28
|
-
.container {
|
|
29
|
-
display: flex;
|
|
30
|
-
flex-direction: column;
|
|
31
|
-
justify-content: center;
|
|
32
|
-
align-items: center;
|
|
33
|
-
height: 100%;
|
|
34
|
-
padding: 16px;
|
|
35
|
-
background-color: #f7f8fb;
|
|
36
|
-
}
|
|
37
|
-
.svg-wrapper *{
|
|
38
|
-
stroke: #9e9e9e;
|
|
39
|
-
}
|
|
40
|
-
.title {
|
|
41
|
-
margin-top: 24px;
|
|
42
|
-
font-size: 22px;
|
|
43
|
-
font-weight: 400;
|
|
44
|
-
color: #47494E;
|
|
45
|
-
text-align: center;
|
|
46
|
-
}
|
|
47
|
-
.description {
|
|
48
|
-
margin-top: 8px;
|
|
49
|
-
font-size: 14px;
|
|
50
|
-
color: #7F828B;
|
|
51
|
-
text-align: center;
|
|
52
|
-
}
|
|
53
|
-
.extra {
|
|
54
|
-
margin-top: 24px;
|
|
55
|
-
}
|
|
56
|
-
</style>
|
|
57
|
-
</head>
|
|
58
|
-
<body>
|
|
59
|
-
<div class="container">
|
|
60
|
-
${icon ? `<img src="${icon}" />` : `<span class="svg-wrapper">${arcblockLogoSvg}</span>`}
|
|
61
|
-
<div class="title">
|
|
62
|
-
${title}
|
|
63
|
-
</div>
|
|
64
|
-
${description ? `<div class="description">${description}</div>` : ''}
|
|
65
|
-
${extra ? `<div class="extra">${extra}</div>` : ''}
|
|
66
|
-
</div>
|
|
67
|
-
</body>
|
|
68
|
-
</html>`;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
export default { render };
|