@arcblock/ux 2.5.48 → 2.5.49

package/lib/ClickToCopy/hook.js

@@ -52,6 +52,6 @@ function useCopy(_ref) {
     containerRef,
     copied,
     copy,
-    texts: translations[locale]
+    texts: translations[locale] || translations.en
   };
 }

package/lib/ContactForm/index.js

@@ -34,7 +34,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 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; }
 
-async function submitContactForm(_ref, fields, context) {
+function submitContactForm(_ref, fields, context) {
   let {
     formId,
     portalId

package/lib/Locale/context.js

@@ -10,12 +10,16 @@ exports.useLocaleContext = useLocaleContext;
 
 var _react = require("react");
 
+var _get = _interopRequireDefault(require("lodash/get"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsCookie = _interopRequireDefault(require("js-cookie"));
 
 var _browserLang = _interopRequireDefault(require("./browser-lang"));
 
+var _util = require("./util");
+
 var _Util = require("../Util");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -40,7 +44,7 @@ const getLocaleFromSearchParams = function getLocaleFromSearchParams(languages)
   let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.href;
   const locale = new URL(url).searchParams.get('locale');
 
-  if (languages.find(x => x.value === locale)) {
+  if (languages.find(x => x.code === locale)) {
     return locale;
   }
 
@@ -63,9 +67,9 @@ const getLocale = function getLocale() {
 
   let languages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const langParams = {
-    languages: languages.map(item => item.value),
-    // 取 languages 首个元素的 value 值, 如果不存在则取 'en'
-    fallback: (languages === null || languages === void 0 ? void 0 : (_languages$ = languages[0]) === null || _languages$ === void 0 ? void 0 : _languages$.value) || 'en'
+    languages: languages.map(item => item.code),
+    // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
+    fallback: (languages === null || languages === void 0 ? void 0 : (_languages$ = languages[0]) === null || _languages$ === void 0 ? void 0 : _languages$.code) || 'en'
   };
   return getLocaleFromSearchParams(languages) || _jsCookie.default.get(cookieName) || (0, _browserLang.default)(langParams);
 };
@@ -80,7 +84,25 @@ const setLocale = locale => {
 
 exports.setLocale = setLocale;
 
-const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+const getLanguages = arg => {
+  const env = (0, _get.default)(window, 'blocklet.languages');
+
+  if (Array.isArray(env) && env.length) {
+    return env;
+  }
+
+  if (Array.isArray(arg) && arg.length) {
+    return arg;
+  }
+
+  return [{
+    code: 'en',
+    name: 'English'
+  }, {
+    code: 'zh',
+    name: '简体中文'
+  }];
+};
 
 const LocaleContext = /*#__PURE__*/(0, _react.createContext)();
 exports.LocaleContext = LocaleContext;
@@ -100,7 +122,8 @@ function LocaleProvider(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const [currentLocale, setCurrentLocale] = (0, _react.useState)(locale || getLocale(languages));
+  const langs = getLanguages(languages);
+  const [currentLocale, setCurrentLocale] = (0, _react.useState)(locale || getLocale(langs));
 
   const changeLocale = newLocale => {
     setCurrentLocale(newLocale);
@@ -108,7 +131,7 @@ function LocaleProvider(_ref) {
   };
 
   (0, _react.useEffect)(() => {
-    const tmpLocale = locale || getLocale(languages);
+    const tmpLocale = locale || getLocale(langs);
 
     if (tmpLocale !== currentLocale) {
       changeLocale(locale);
@@ -116,30 +139,14 @@ function LocaleProvider(_ref) {
 
   }, [locale]);
 
-  const translate = (key, data) => {
-    if (!translations[currentLocale] || !translations[currentLocale][key]) {
-      var _translations$fallbac;
-
-      console.warn("Warning: no ".concat(key, " translation of ").concat(currentLocale));
-
-      if (fallbackLocale && (_translations$fallbac = translations[fallbackLocale]) !== null && _translations$fallbac !== void 0 && _translations$fallbac[key]) {
-        var _translations$fallbac2;
-
-        return replace((_translations$fallbac2 = translations[fallbackLocale]) === null || _translations$fallbac2 === void 0 ? void 0 : _translations$fallbac2[key], data);
-      }
-
-      return key;
-    }
-
-    return replace(translations[currentLocale][key], data);
-  };
+  const t = (key, data) => (0, _util.translate)(translations, key, currentLocale, fallbackLocale, data);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
     value: _objectSpread({
       locale: currentLocale,
       changeLocale,
-      t: translate,
-      languages
+      t,
+      languages: langs
     }, rest),
     children: children
   });
@@ -157,18 +164,12 @@ LocaleProvider.propTypes = {
   // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
   fallbackLocale: _propTypes.default.string,
   languages: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.string,
-    text: _propTypes.default.string
+    code: _propTypes.default.string,
+    name: _propTypes.default.string
   }))
 };
 LocaleProvider.defaultProps = {
   locale: '',
   fallbackLocale: '',
-  languages: [{
-    value: 'en',
-    text: 'English'
-  }, {
-    value: 'zh',
-    text: '简体中文'
-  }]
+  languages: []
 };

package/lib/Locale/languages.js

@@ -58,12 +58,12 @@ const languages = {
     nativeName: 'Русский'
   },
   zh: {
-    name: 'Chinese',
+    name: 'Simplified Chinese',
     nativeName: '简体中文'
   },
   tw: {
-    name: 'Chinese',
-    nativeName: '繁体中文'
+    name: 'Traditional Chinese',
+    nativeName: '繁體中文'
   }
 };
 exports.map = languages;

package/lib/Locale/selector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = LocaleSelector;
 
 var _react = require("react");
 
@@ -86,12 +86,15 @@ function LocaleSelector(props) {
     }
   };
 
-  function onClose(e) {
+  const onClose = e => {
     var _anchorEl$current;
 
-    if ((_anchorEl$current = anchorEl.current) !== null && _anchorEl$current !== void 0 && _anchorEl$current.contains(e.target)) return;
+    if ((_anchorEl$current = anchorEl.current) !== null && _anchorEl$current !== void 0 && _anchorEl$current.contains(e.target)) {
+      return;
+    }
+
     setOpen(false);
-  }
+  };
 
   const ButtonComponent = showText ? _Button.default : _IconButton.default;
   const handleEventProps = popperType === 'hover' ? {
@@ -133,7 +136,7 @@ function LocaleSelector(props) {
         children: [renderIcon, showText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           component: "strong",
           className: "trigger-text",
-          children: languages.find(x => x.value === locale).text
+          children: languages.find(x => x.code === locale).name
         }) : '']
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, _objectSpread(_objectSpread({
@@ -148,17 +151,17 @@ function LocaleSelector(props) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
             children: languages.map(_ref => {
               let {
-                value,
-                text
+                code,
+                name
               } = _ref;
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
                 className: "locale-item",
-                onClick: () => onSelect(value, text),
+                onClick: () => onSelect(code, name),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
-                  className: value === locale ? 'check-icon check-icon-visible' : 'check-icon',
+                  className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
                   fontSize: "small"
-                }), text]
-              }, value);
+                }), name]
+              }, code);
             })
           })
         })
@@ -183,8 +186,6 @@ LocaleSelector.defaultProps = {
   popperType: 'click',
   icon: null
 };
-var _default = LocaleSelector;
-exports.default = _default;
 const Div = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'dark'
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  .trigger {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    font-size: 14px;\n    white-space: nowrap;\n\n    .trigger-text {\n      margin-left: 5px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n\n  .locales {\n    background: ", ";\n    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);\n  }\n\n  .locale-item {\n    font-size: 16px;\n    font-style: normal;\n    font-stretch: normal;\n    line-height: normal;\n    letter-spacing: 2px;\n    text-align: center;\n    color: ", ";\n    cursor: pointer;\n    display: flex;\n    padding: 16px;\n    align-items: center;\n    .check-icon {\n      visibility: hidden;\n      margin-right: 4px;\n    }\n    .check-icon-visible {\n      visibility: visible;\n    }\n  }\n"])), props => (0, _Util.getColor)(props), props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/lib/Locale/util.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translate = exports.t = exports.replace = void 0;
+
+/* eslint-disable no-prototype-builtins */
+const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+
+exports.replace = replace;
+
+const translate = function translate(translations, key, locale) {
+  let fallbackLocale = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'en';
+  let data = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+
+  if (!translations[locale] || !translations[locale][key]) {
+    var _translations$fallbac;
+
+    console.warn("Warning: no ".concat(key, " translation of ").concat(locale));
+
+    if (fallbackLocale && (_translations$fallbac = translations[fallbackLocale]) !== null && _translations$fallbac !== void 0 && _translations$fallbac[key]) {
+      var _translations$fallbac2;
+
+      return replace((_translations$fallbac2 = translations[fallbackLocale]) === null || _translations$fallbac2 === void 0 ? void 0 : _translations$fallbac2[key], data);
+    }
+
+    return key;
+  }
+
+  return replace(translations[locale][key], data);
+};
+
+exports.translate = translate;
+const t = translate;
+exports.t = t;

package/lib/Result/common.js

@@ -52,7 +52,8 @@ const useLocale = locale => {
   } = (0, _context.useLocaleContext)() || {
     locale: 'en'
   };
-  return locale || localeFromContext;
+  const result = locale || localeFromContext;
+  return _translations.default[result] ? result : 'en';
 }; // 404
 
 
@@ -145,12 +146,12 @@ function ComingSoon(_ref6) {
   locale = useLocale(locale);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_result.default, _objectSpread({
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInfoIcon, {}),
-    title: _translations.default[locale]['coming-soon'].title,
-    description: _translations.default[locale]['coming-soon'].description
+    title: _translations.default[locale].comingSoon.title,
+    description: _translations.default[locale].comingSoon.description
   }, rest));
 }
 
-ComingSoon.status = 'coming-soon'; // info, 与其它 status 不同, title/description 需要使用方自己传入
+ComingSoon.status = 'comingSoon'; // info, 与其它 status 不同, title/description 需要使用方自己传入
 
 function Info(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_result.default, _objectSpread({

package/lib/Result/translations.js

@@ -16,7 +16,7 @@ var _default = {
     },
     500: {
       title: '500 - Internal Server Error',
-      description: 'An internal server error has occured. Please try again later.'
+      description: 'An internal server error has occurred. Please try again later.'
     },
     error: {
       title: 'Application Error',
@@ -26,7 +26,7 @@ var _default = {
       title: 'Offline for maintenance',
       description: 'This app is undergoing maintenance right now. Please check back later.'
     },
-    'coming-soon': {
+    comingSoon: {
       title: 'Coming Soon',
       description: "Our website is under construction. We'll be here soon with our new website."
     }
@@ -52,7 +52,7 @@ var _default = {
       title: '维护中',
       description: '应用程序正在进行维护。请稍后再查看。'
     },
-    'coming-soon': {
+    comingSoon: {
       title: '即将上线',
       description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。'
     }

package/lib/SessionManager/index.js

@@ -60,31 +60,25 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-const messages = {
-  zh: {
-    switchDid: '切换账户',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包'
-  },
+const translations = {
   en: {
     switchDid: 'Switch DID',
     switchProfile: 'Switch Profile',
     switchPassport: 'Switch Passport',
     disconnect: 'Disconnect',
     connect: 'Connect',
-    openInWallet: 'Open DID Wallet'
-  }
-};
-const translations = {
-  en: {
+    openInWallet: 'Open DID Wallet',
     alreadyBindOAuth: 'Already bind Auth0',
     bind: 'Bind ',
     thirdParty: 'Third Party Login'
   },
   zh: {
+    switchDid: '切换账户',
+    switchProfile: '切换用户信息',
+    switchPassport: '切换通行证',
+    disconnect: '退出',
+    connect: '登录',
+    openInWallet: '打开 DID 钱包',
     // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
     alreadyBindOAuth: '已绑定 Auth0 账号',
     bind: '绑定',
@@ -129,6 +123,7 @@ function SessionManager(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  const translation = translations[locale] || translations.en;
   const userAnchorRef = (0, _react.useRef)(null);
   const {
     logoutOAuth,
@@ -190,7 +185,7 @@ function SessionManager(_ref) {
         style: {
           lineHeight: '25px'
         },
-        children: messages[locale].connect
+        children: translation.connect
       })]
     })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
       onClick: _onLogin,
@@ -283,7 +278,6 @@ function SessionManager(_ref) {
     }
   }
 
-  const message = messages[locale] || messages.en;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
       ref: userAnchorRef,
@@ -404,7 +398,7 @@ function SessionManager(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
                 component: _OpenIn.default,
                 className: "session-manager-menu-icon"
-              }), message.openInWallet]
+              }), translation.openInWallet]
             }), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
               className: "session-manager-menu-item",
               onClick: _onSwitchDid,
@@ -412,7 +406,7 @@ function SessionManager(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
                 component: _Switch.default,
                 className: "session-manager-menu-icon"
-              }), message.switchDid]
+              }), translation.switchDid]
             }), !!switchProfile && hasBindWallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
               className: "session-manager-menu-item",
               onClick: _onSwitchProfile,
@@ -420,7 +414,7 @@ function SessionManager(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
                 component: _PersonOutline.default,
                 className: "session-manager-menu-icon"
-              }), message.switchProfile]
+              }), translation.switchProfile]
             }), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
               className: "session-manager-menu-item",
               onClick: _onSwitchPassport,
@@ -428,7 +422,7 @@ function SessionManager(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
                 component: _VpnKeyOutlined.default,
                 className: "session-manager-menu-icon"
-              }), message.switchPassport]
+              }), translation.switchPassport]
             }), oauthConfigList.length > 0 && !hasBindAccount && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
               className: "session-manager-menu-item",
               onClick: _onBindWallet,
@@ -436,7 +430,7 @@ function SessionManager(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
                 component: _Link.default,
                 className: "session-manager-menu-icon"
-              }), isRawWalletAccount ? "".concat(translations[locale].bind).concat(translations[locale].thirdParty) : "".concat(translations[locale].bind, "DID Wallet")]
+              }), isRawWalletAccount ? "".concat(translation.bind).concat(translation.thirdParty) : "".concat(translation.bind, "DID Wallet")]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
               className: "session-manager-menu-item",
               onClick: _onLogout,
@@ -445,7 +439,7 @@ function SessionManager(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
                 component: _Disconnect.default,
                 className: "session-manager-menu-icon"
-              }), message.disconnect]
+              }), translation.disconnect]
             })]
           })
         })

package/lib/Toast/index.js

@@ -41,7 +41,8 @@ let _info = noop;
  * @returns {import('notistack').ProviderContext['enqueueSnackbar']}
  */
 
-const genFn = (enqueueSnackbar, variant) => (message, opts) => {
+const genFn = (enqueueSnackbar, variant) => function (message) {
+  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   enqueueSnackbar(message, _objectSpread({
     autoHideDuration: 3000,
     variant
@@ -99,7 +100,9 @@ var _default = {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  success: function success(message, options) {
+  success: function success(message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
       args[_key - 2] = arguments[_key];
     }
@@ -113,7 +116,9 @@ var _default = {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  error: function error(message, options) {
+  error: function error(message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }
@@ -127,7 +132,9 @@ var _default = {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  warning: function warning(message, options) {
+  warning: function warning(message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     for (var _len3 = arguments.length, args = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
       args[_key3 - 2] = arguments[_key3];
     }
@@ -141,7 +148,9 @@ var _default = {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  info: function info(message, options) {
+  info: function info(message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
       args[_key4 - 2] = arguments[_key4];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.48",
+  "version": "2.5.49",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -17,6 +17,7 @@
   },
   "scripts": {
     "lint": "eslint src tests",
+    "lint:fix": "npm run lint -- --fix",
     "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
     "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
     "precommit": "CI=1 npm run lint",
@@ -40,16 +41,17 @@
     "babel-plugin-inline-react-svg": "^1.1.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3",
+    "jest-environment-jsdom": "^29.5.0",
     "moment-timezone": "^0.5.37"
   },
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "79c5d91c07cd0d7c76286b9865d902a27acc163f",
+  "gitHead": "984f01cb1503cac77e52885893a9f50269f3da91",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.48",
-    "@arcblock/react-hooks": "^2.5.48",
+    "@arcblock/icons": "^2.5.49",
+    "@arcblock/react-hooks": "^2.5.49",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -58,6 +60,7 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.8",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
+    "@testing-library/react": "^14.0.0",
     "axios": "^0.27.2",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.3.2",

package/src/Address/did-address.jsx

@@ -60,6 +60,7 @@ const DidAddress = forwardRef(
       // eslint-disable-next-line no-param-reassign
       locale = 'en';
     }
+
     // 避免 unmounted 后 setTimeout handler 依然改变 state
     const isMounted = useMountedState();
 

package/src/ClickToCopy/hook.js

@@ -36,6 +36,6 @@ export default function useCopy({ content, locale = 'en' }) {
     containerRef,
     copied,
     copy,
-    texts: translations[locale],
+    texts: translations[locale] || translations.en,
   };
 }

package/src/ContactForm/index.js

@@ -11,7 +11,7 @@ import { warn as deprecatedWarn } from '../Util/deprecate';
 import Button from '../Button';
 import { styled } from '../Theme';
 
-export async function submitContactForm({ formId, portalId }, fields, context) {
+export function submitContactForm({ formId, portalId }, fields, context) {
   const url = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
   return axios
     .post(url, {

package/src/Locale/context.js

@@ -1,9 +1,12 @@
 /* eslint-disable no-prototype-builtins */
 import { createContext, useState, useEffect, useContext } from 'react';
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import Cookie from 'js-cookie';
 
 import browserLang from './browser-lang';
+import { translate } from './util';
+
 import { getCookieOptions } from '../Util';
 
 const cookieName = 'nf_lang';
@@ -11,7 +14,7 @@ const cookieName = 'nf_lang';
 // 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
 const getLocaleFromSearchParams = (languages, url = window.location.href) => {
   const locale = new URL(url).searchParams.get('locale');
-  if (languages.find((x) => x.value === locale)) {
+  if (languages.find((x) => x.code === locale)) {
     return locale;
   }
   return null;
@@ -28,24 +31,39 @@ const setLocaleParam = (locale, url = window.location.href) => {
 
 const getLocale = (languages = []) => {
   const langParams = {
-    languages: languages.map((item) => item.value),
-    // 取 languages 首个元素的 value 值, 如果不存在则取 'en'
-    fallback: languages?.[0]?.value || 'en',
+    languages: languages.map((item) => item.code),
+    // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
+    fallback: languages?.[0]?.code || 'en',
   };
   return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams);
 };
+
 const setLocale = (locale) => {
   Cookie.set(cookieName, locale, getCookieOptions());
   setLocaleParam(locale);
 };
 
-const replace = (template, data) =>
-  template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+const getLanguages = (arg) => {
+  const env = get(window, 'blocklet.languages');
+  if (Array.isArray(env) && env.length) {
+    return env;
+  }
+
+  if (Array.isArray(arg) && arg.length) {
+    return arg;
+  }
+
+  return [
+    { code: 'en', name: 'English' },
+    { code: 'zh', name: '简体中文' },
+  ];
+};
 
 const LocaleContext = createContext();
 const { Provider, Consumer } = LocaleContext;
 function LocaleProvider({ children, locale, fallbackLocale, translations, languages, ...rest }) {
-  const [currentLocale, setCurrentLocale] = useState(locale || getLocale(languages));
+  const langs = getLanguages(languages);
+  const [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
 
   const changeLocale = (newLocale) => {
     setCurrentLocale(newLocale);
@@ -53,28 +71,16 @@ function LocaleProvider({ children, locale, fallbackLocale, translations, langua
   };
 
   useEffect(() => {
-    const tmpLocale = locale || getLocale(languages);
+    const tmpLocale = locale || getLocale(langs);
     if (tmpLocale !== currentLocale) {
       changeLocale(locale);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [locale]);
 
-  const translate = (key, data) => {
-    if (!translations[currentLocale] || !translations[currentLocale][key]) {
-      console.warn(`Warning: no ${key} translation of ${currentLocale}`);
-      if (fallbackLocale && translations[fallbackLocale]?.[key]) {
-        return replace(translations[fallbackLocale]?.[key], data);
-      }
-      return key;
-    }
-
-    return replace(translations[currentLocale][key], data);
-  };
+  const t = (key, data) => translate(translations, key, currentLocale, fallbackLocale, data);
 
-  return (
-    <Provider value={{ locale: currentLocale, changeLocale, t: translate, languages, ...rest }}>{children}</Provider>
-  );
+  return <Provider value={{ locale: currentLocale, changeLocale, t, languages: langs, ...rest }}>{children}</Provider>;
 }
 
 function useLocaleContext() {
@@ -88,16 +94,13 @@ LocaleProvider.propTypes = {
   locale: PropTypes.string,
   // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
   fallbackLocale: PropTypes.string,
-  languages: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })),
+  languages: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string, name: PropTypes.string })),
 };
 
 LocaleProvider.defaultProps = {
   locale: '',
   fallbackLocale: '',
-  languages: [
-    { value: 'en', text: 'English' },
-    { value: 'zh', text: '简体中文' },
-  ],
+  languages: [],
 };
 
 export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/src/Locale/languages.js

@@ -45,12 +45,12 @@ const languages = {
     nativeName: 'Русский',
   },
   zh: {
-    name: 'Chinese',
+    name: 'Simplified Chinese',
     nativeName: '简体中文',
   },
   tw: {
-    name: 'Chinese',
-    nativeName: '繁体中文',
+    name: 'Traditional Chinese',
+    nativeName: '繁體中文',
   },
 };
 

package/src/Locale/selector.js

@@ -17,7 +17,7 @@ import { getColor, getBackground } from '../Util';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 
-function LocaleSelector(props) {
+export default function LocaleSelector(props) {
   const { showText, popperProps, popperType, icon: Icon, size, ...rest } = props;
   const { locale, changeLocale, languages } = useContext(LocaleContext);
   const anchorEl = useRef(null);
@@ -33,10 +33,12 @@ function LocaleSelector(props) {
     }
   };
 
-  function onClose(e) {
-    if (anchorEl.current?.contains(e.target)) return;
+  const onClose = (e) => {
+    if (anchorEl.current?.contains(e.target)) {
+      return;
+    }
     setOpen(false);
-  }
+  };
 
   const ButtonComponent = showText ? Button : IconButton;
 
@@ -72,7 +74,7 @@ function LocaleSelector(props) {
 
           {showText ? (
             <Typography component="strong" className="trigger-text">
-              {languages.find((x) => x.value === locale).text}
+              {languages.find((x) => x.code === locale).name}
             </Typography>
           ) : (
             ''
@@ -84,13 +86,13 @@ function LocaleSelector(props) {
         <div className="locales">
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
-              {languages.map(({ value, text }) => (
-                <MenuItem key={value} className="locale-item" onClick={() => onSelect(value, text)}>
+              {languages.map(({ code, name }) => (
+                <MenuItem key={code} className="locale-item" onClick={() => onSelect(code, name)}>
                   <CheckIcon
-                    className={value === locale ? 'check-icon check-icon-visible' : 'check-icon'}
+                    className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
                     fontSize="small"
                   />
-                  {text}
+                  {name}
                 </MenuItem>
               ))}
             </MenuList>
@@ -119,8 +121,6 @@ LocaleSelector.defaultProps = {
   icon: null,
 };
 
-export default LocaleSelector;
-
 const Div = styled('div', {
   shouldForwardProp: (prop) => prop !== 'dark',
 })`

package/src/Locale/util.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-prototype-builtins */
+export const replace = (template, data) =>
+  template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+
+export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
+  if (!translations[locale] || !translations[locale][key]) {
+    console.warn(`Warning: no ${key} translation of ${locale}`);
+    if (fallbackLocale && translations[fallbackLocale]?.[key]) {
+      return replace(translations[fallbackLocale]?.[key], data);
+    }
+    return key;
+  }
+
+  return replace(translations[locale][key], data);
+};
+
+export const t = translate;

package/src/Result/common.js

@@ -11,7 +11,8 @@ import { useTheme } from '../Theme';
 const useLocale = (locale) => {
   locale = ['zh', 'en'].includes(locale) ? locale : '';
   const { locale: localeFromContext } = useLocaleContext() || { locale: 'en' };
-  return locale || localeFromContext;
+  const result = locale || localeFromContext;
+  return translations[result] ? result : 'en';
 };
 
 // 404
@@ -90,13 +91,13 @@ export function ComingSoon({ locale, ...rest }) {
   return (
     <Result
       icon={<StyledInfoIcon />}
-      title={translations[locale]['coming-soon'].title}
-      description={translations[locale]['coming-soon'].description}
+      title={translations[locale].comingSoon.title}
+      description={translations[locale].comingSoon.description}
       {...rest}
     />
   );
 }
-ComingSoon.status = 'coming-soon';
+ComingSoon.status = 'comingSoon';
 
 // info, 与其它 status 不同, title/description 需要使用方自己传入
 export function Info(props) {

package/src/Result/translations.js

@@ -10,7 +10,7 @@ export default {
     },
     500: {
       title: '500 - Internal Server Error',
-      description: 'An internal server error has occured. Please try again later.',
+      description: 'An internal server error has occurred. Please try again later.',
     },
     error: {
       title: 'Application Error',
@@ -20,7 +20,7 @@ export default {
       title: 'Offline for maintenance',
       description: 'This app is undergoing maintenance right now. Please check back later.',
     },
-    'coming-soon': {
+    comingSoon: {
       title: 'Coming Soon',
       description: "Our website is under construction. We'll be here soon with our new website.",
     },
@@ -47,7 +47,7 @@ export default {
       title: '维护中',
       description: '应用程序正在进行维护。请稍后再查看。',
     },
-    'coming-soon': {
+    comingSoon: {
       title: '即将上线',
       description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。',
     },

package/src/SessionManager/index.jsx

@@ -19,15 +19,7 @@ import { styled } from '../Theme';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
 
-const messages = {
-  zh: {
-    switchDid: '切换账户',
-    switchProfile: '切换用户信息',
-    switchPassport: '切换通行证',
-    disconnect: '退出',
-    connect: '登录',
-    openInWallet: '打开 DID 钱包',
-  },
+const translations = {
   en: {
     switchDid: 'Switch DID',
     switchProfile: 'Switch Profile',
@@ -35,15 +27,17 @@ const messages = {
     disconnect: 'Disconnect',
     connect: 'Connect',
     openInWallet: 'Open DID Wallet',
-  },
-};
-const translations = {
-  en: {
     alreadyBindOAuth: 'Already bind Auth0',
     bind: 'Bind ',
     thirdParty: 'Third Party Login',
   },
   zh: {
+    switchDid: '切换账户',
+    switchProfile: '切换用户信息',
+    switchPassport: '切换通行证',
+    disconnect: '退出',
+    connect: '登录',
+    openInWallet: '打开 DID 钱包',
     // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
     alreadyBindOAuth: '已绑定 Auth0 账号',
     bind: '绑定',
@@ -75,6 +69,7 @@ function SessionManager({
   size,
   ...rest
 }) {
+  const translation = translations[locale] || translations.en;
   const userAnchorRef = useRef(null);
   const { logoutOAuth, bindOAuth, configs: oauthConfigs, switchOAuthPassport } = useOAuth();
   const [userOpen, setUserOpen] = useState(false);
@@ -118,7 +113,7 @@ function SessionManager({
         {...rest}
         data-cy="sessionManager-login">
         <AccountIcon />
-        <span style={{ lineHeight: '25px' }}>{messages[locale].connect}</span>
+        <span style={{ lineHeight: '25px' }}>{translation.connect}</span>
       </Button>
     ) : (
       <IconButton {...rest} onClick={_onLogin} data-cy="sessionManager-login" size="medium">
@@ -192,8 +187,6 @@ function SessionManager({
     }
   }
 
-  const message = messages[locale] || messages.en;
-
   return (
     <>
       <IconButton
@@ -301,7 +294,7 @@ function SessionManager({
                     href="https://www.abtwallet.io/"
                     target="_blank">
                     <SvgIcon component={OpenInIcon} className="session-manager-menu-icon" />
-                    {message.openInWallet}
+                    {translation.openInWallet}
                   </MenuItem>
                 )}
                 {!!switchDid && (
@@ -310,7 +303,7 @@ function SessionManager({
                     onClick={_onSwitchDid}
                     data-cy="sessionManager-switch-trigger">
                     <SvgIcon component={SwitchDidIcon} className="session-manager-menu-icon" />
-                    {message.switchDid}
+                    {translation.switchDid}
                   </MenuItem>
                 )}
                 {!!switchProfile && hasBindWallet && (
@@ -319,7 +312,7 @@ function SessionManager({
                     onClick={_onSwitchProfile}
                     data-cy="sessionManager-switch-profile-trigger">
                     <SvgIcon component={SwitchProfileIcon} className="session-manager-menu-icon" />
-                    {message.switchProfile}
+                    {translation.switchProfile}
                   </MenuItem>
                 )}
                 {!!switchPassport && (
@@ -328,7 +321,7 @@ function SessionManager({
                     onClick={_onSwitchPassport}
                     data-cy="sessionManager-switch-passport-trigger">
                     <SvgIcon component={SwitchPassportIcon} className="session-manager-menu-icon" />
-                    {message.switchPassport}
+                    {translation.switchPassport}
                   </MenuItem>
                 )}
                 {oauthConfigList.length > 0 && !hasBindAccount && (
@@ -338,8 +331,8 @@ function SessionManager({
                     data-cy="sessionManager-bind-trigger">
                     <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
                     {isRawWalletAccount
-                      ? `${translations[locale].bind}${translations[locale].thirdParty}`
-                      : `${translations[locale].bind}DID Wallet`}
+                      ? `${translation.bind}${translation.thirdParty}`
+                      : `${translation.bind}DID Wallet`}
                   </MenuItem>
                 )}
 
@@ -349,7 +342,7 @@ function SessionManager({
                   disabled={disableLogout}
                   data-cy="sessionManager-logout-trigger">
                   <SvgIcon component={DisconnectIcon} className="session-manager-menu-icon" />
-                  {message.disconnect}
+                  {translation.disconnect}
                 </MenuItem>
               </MenuList>
             </ClickAwayListener>

package/src/Toast/index.js

@@ -19,13 +19,15 @@ let info = noop;
  * @param {import('notistack').VariantType} variant
  * @returns {import('notistack').ProviderContext['enqueueSnackbar']}
  */
-const genFn = (enqueueSnackbar, variant) => (message, opts) => {
-  enqueueSnackbar(message, {
-    autoHideDuration: 3000,
-    variant,
-    ...opts,
-  });
-};
+const genFn =
+  (enqueueSnackbar, variant) =>
+  (message, opts = {}) => {
+    enqueueSnackbar(message, {
+      autoHideDuration: 3000,
+      variant,
+      ...opts,
+    });
+  };
 
 // eslint-disable-next-line react/prop-types
 function ToastProvider({ children }) {
@@ -73,7 +75,7 @@ export default {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  success: (message, options, ...args) => success(message, options, ...args),
+  success: (message, options = {}, ...args) => success(message, options, ...args),
 
   /**
    *
@@ -81,7 +83,7 @@ export default {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  error: (message, options, ...args) => error(message, options, ...args),
+  error: (message, options = {}, ...args) => error(message, options, ...args),
 
   /**
    *
@@ -89,7 +91,7 @@ export default {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  warning: (message, options, ...args) => warning(message, options, ...args),
+  warning: (message, options = {}, ...args) => warning(message, options, ...args),
 
   /**
    *
@@ -97,5 +99,5 @@ export default {
    * @param {import('notistack').OptionsObject} options
    * @returns {import('notistack').SnackbarKey}
    */
-  info: (message, options, ...args) => info(message, options, ...args),
+  info: (message, options = {}, ...args) => info(message, options, ...args),
 };