@arcblock/ux 2.1.11 → 2.1.15

package/lib/Datatable/CustomToolbar.js

@@ -120,7 +120,7 @@ function CustomToolbar(props) {
 
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
-      Icon: _CloudDownload.default,
+      icon: /*#__PURE__*/_react.default.createElement(_CloudDownload.default, null),
       title: downloadCsv,
       onClick: () => {
         (0, _utils.handleCSVDownload)(props);
@@ -130,7 +130,7 @@ function CustomToolbar(props) {
 
   if (!(options.viewColumns === false || options.viewColumns === 'false')) {
     defaultButtons.push({
-      Icon: _ViewColumn.default,
+      icon: /*#__PURE__*/_react.default.createElement(_ViewColumn.default, null),
       title: viewColumns,
 
       popRender() {
@@ -149,7 +149,7 @@ function CustomToolbar(props) {
 
   if (!(options.filter === false || options.filter === 'false')) {
     defaultButtons.push({
-      Icon: _FilterList.default,
+      icon: /*#__PURE__*/_react.default.createElement(_FilterList.default, null),
       title: filterTable,
 
       popRender() {
@@ -181,10 +181,10 @@ function CustomToolbar(props) {
 
     const popId = getPopId(index);
 
-    if (e.Icon) {
+    if (e.icon) {
       const {
-        Icon,
-        popRender
+        popRender,
+        icon
       } = e; // When popRender is present, clicking the button will bubble up the content returned by the popRender
 
       if (popRender) {
@@ -221,7 +221,9 @@ function CustomToolbar(props) {
             });
           }
         }
-      }, /*#__PURE__*/_react.default.createElement(Icon, null)));
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "custom-toolbar-icon"
+      }, icon)));
     }
 
     return e;
@@ -233,13 +235,11 @@ function CustomToolbar(props) {
 
     if ( /*#__PURE__*/(0, _react.isValidElement)(e)) {
       content = e;
-    } else if (e.Icon) {
+    } else if (e.icon) {
       const {
-        Icon
+        icon
       } = e;
-      content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(Icon, {
-        fontSize: "small"
-      })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, e.title));
+      content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, icon), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, e.title));
     }
 
     return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
@@ -314,7 +314,9 @@ function CustomToolbar(props) {
     })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, null, print));
   }), menuItems), allPops.map((e, index) => /*#__PURE__*/_react.default.createElement("div", {
     key: getPopId(index)
-  }, e)), loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, null));
+  }, e)), /*#__PURE__*/_react.default.createElement(ProgressContainer, null, loading && /*#__PURE__*/_react.default.createElement(_LinearProgress.default, {
+    className: "toolbar-progress"
+  })));
 }
 
 CustomToolbar.propTypes = {
@@ -347,4 +349,9 @@ CustomToolbar.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "CustomToolbar__Container",
   componentId: "sc-cvz3dp-0"
-})(["display:flex;align-items:center;height:56px;.custom-toobar-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;transition:all ease 0.3s;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}.custom-toobar-btns{display:flex;justify-content:center;align-items:center;&.toobar-btns-disabled{position:relative;opacity:0.5;&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}}.toobar-title-hidden{opacity:0;cursor:none;}"]);
+})(["display:flex;align-items:center;height:56px;.custom-toobar-title{position:relative;flex:1;font-size:18px;font-weight:800;height:56px;transition:all ease 0.3s;&-inner{line-height:56px;width:100%;height:56px;position:absolute;left:0;top:0;span{display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}}}.custom-toobar-btns{display:flex;justify-content:center;align-items:center;&.toobar-btns-disabled{position:relative;opacity:0.5;&:after{position:absolute;display:block;z-index:2;width:100%;height:100%;left:0;top:0;content:'';cursor:not-allowed;}}.custom-toolbar-icon{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:20px;overflow:hidden;}}.toobar-title-hidden{opacity:0;cursor:none;}"]);
+
+const ProgressContainer = _styledComponents.default.div.withConfig({
+  displayName: "CustomToolbar__ProgressContainer",
+  componentId: "sc-cvz3dp-1"
+})(["width:100%;height:2px;.toolbar-progress{height:2px;}"]);

package/lib/Datatable/index.js

@@ -21,7 +21,7 @@ var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
 var _DatatableContext = require("./DatatableContext");
 
-const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled"];
+const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -62,7 +62,8 @@ function ReDatatable(_ref2) {
     customButtons,
     onChange,
     loading,
-    disabled
+    disabled,
+    stripped
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
@@ -268,7 +269,8 @@ function ReDatatable(_ref2) {
     loading: _propTypes.default.bool,
     disabled: _propTypes.default.bool,
     customButtons: _propTypes.default.array,
-    onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+    onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+    stripped: _propTypes.default.bool
   };
   ReDatatable.defaultProps = {
     options: {},
@@ -277,10 +279,12 @@ function ReDatatable(_ref2) {
     loading: false,
     disabled: false,
     customButtons: [],
-    onChange: ''
+    onChange: '',
+    stripped: false
   };
   return /*#__PURE__*/_react.default.createElement(TableContainer, {
     ref: container,
+    className: stripped ? 'datatable-stripped' : '',
     style: style
   }, /*#__PURE__*/_react.default.createElement(_muiDatatables.default, Object.assign({
     data: data,
@@ -291,7 +295,7 @@ function ReDatatable(_ref2) {
 const TableContainer = _styledComponents.default.div.withConfig({
   displayName: "Datatable__TableContainer",
   componentId: "sc-1ju12vq-0"
-})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}}"], props => props.theme.breakpoints.down('md'));
+})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}}&.datatable-stripped{.MuiTableBody-root{tr:nth-of-type(odd){background-color:", ";}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.palette.action.hover);
 
 const FilterLine = _styledComponents.default.div.withConfig({
   displayName: "Datatable__FilterLine",

package/lib/ErrorBoundary/fallback.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorFallback = ErrorFallback;
+exports.ErrorFallbackRetry = ErrorFallbackRetry;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+
+var _colors = require("@mui/material/colors");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function InternalErrorFallback(_ref) {
+  let {
+    title,
+    desc,
+    retryFunc
+  } = _ref;
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    role: "alert",
+    $theme: theme
+  }, /*#__PURE__*/_react.default.createElement("h3", null, title), /*#__PURE__*/_react.default.createElement("pre", null, desc), retryFunc && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    color: "error",
+    size: "small",
+    onClick: retryFunc
+  }, "Try again"));
+}
+
+InternalErrorFallback.propTypes = {
+  title: _propTypes.default.string,
+  desc: _propTypes.default.string.isRequired,
+  retryFunc: _propTypes.default.func
+};
+InternalErrorFallback.defaultProps = {
+  title: 'Something went wrong...',
+  retryFunc: null
+};
+
+function ErrorFallback(_ref2) {
+  let {
+    error
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(InternalErrorFallback, {
+    desc: error.message
+  });
+}
+
+ErrorFallback.propTypes = {
+  error: _propTypes.default.instanceOf(Error).isRequired
+};
+
+function ErrorFallbackRetry(_ref3) {
+  let {
+    error,
+    resetErrorBoundary
+  } = _ref3;
+  return /*#__PURE__*/_react.default.createElement(InternalErrorFallback, {
+    desc: error.message,
+    retryFunc: resetErrorBoundary
+  });
+}
+
+ErrorFallbackRetry.propTypes = {
+  error: _propTypes.default.instanceOf(Error).isRequired,
+  resetErrorBoundary: _propTypes.default.func.isRequired
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "fallback__Root",
+  componentId: "sc-1ajge2q-0"
+})(["padding:16px;border:2px solid ", ";border-radius:4px;color:", ";background-color:", ";font-size:14px;h3{margin:0;font-size:16px;}pre{white-space:normal;}"], props => props.$theme.palette.error.main, props => props.$theme.palette.error.main, _colors.red[50]);

package/lib/ErrorBoundary/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _fallback = require("./fallback");
+
+Object.keys(_fallback).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fallback[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _fallback[key];
+    }
+  });
+});

package/lib/Header/header.js

@@ -90,7 +90,7 @@ Header.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;}.header-logo{display:inline-flex;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;> *:last-child{padding-right:0;}}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
 
 var _default = Header;
 exports.default = _default;

package/lib/Wallet/Open.js

@@ -22,7 +22,7 @@ function OpenInWallet(_ref) {
     locale,
     link
   } = _ref;
-  const buttonText = locale === 'zh' ? '在 ABT 钱包打开' : 'Open in DID Wallet';
+  const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
   const browser = (0, _useBrowser.default)();
 
   if (browser.mobile.any && !browser.wallet && !browser.wechat) {

package/lib/WechatPrompt/index.js

@@ -42,7 +42,7 @@ function WechatPrompt() {
       className: "wechat-tip"
     }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       className: "wechat-tip-text"
-    }, "2. \u70B9\u51FB\u201C\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 ABT \u94B1\u5305"), /*#__PURE__*/_react.default.createElement("img", {
+    }, "2. \u70B9\u51FB\u201C\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"), /*#__PURE__*/_react.default.createElement("img", {
       className: "wechat-tip-img",
       src: _android.default,
       alt: "Open in Android Browser"
@@ -58,7 +58,7 @@ function WechatPrompt() {
     className: "wechat-tip"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: "wechat-tip-text"
-  }, "2. \u70B9\u51FB\u201C\u5728Safari\u4E2D\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 ABT \u94B1\u5305"), /*#__PURE__*/_react.default.createElement("img", {
+  }, "2. \u70B9\u51FB\u201C\u5728Safari\u4E2D\u6253\u5F00\u201D\uFF0C\u624D\u80FD\u8C03\u8D77 DID \u94B1\u5305"), /*#__PURE__*/_react.default.createElement("img", {
     className: "wechat-tip-img",
     src: _ios.default,
     alt: "Open in Safari"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.11",
+  "version": "2.1.15",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "ce03cc62eb231442c6c2e29d262ea073925a8cb2",
+  "gitHead": "7cf6582840eac13158ecc4e25ec6ec13cdb97799",
   "dependencies": {
-    "@arcblock/icons": "^2.1.11",
-    "@arcblock/react-hooks": "^2.1.11",
+    "@arcblock/icons": "^2.1.15",
+    "@arcblock/react-hooks": "^2.1.15",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -78,6 +78,7 @@
     "mui-datatables": "^4.2.2",
     "notistack": "^2.0.5",
     "react-cookie-consent": "^6.4.1",
+    "react-error-boundary": "^3.1.4",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.31.1",
     "react-lottie-player": "^1.4.2",

package/src/Datatable/CustomToolbar.js

@@ -84,7 +84,7 @@ export default function CustomToolbar(props) {
   // download/viewColumns/filter button behaviours, rendered using custom button logic
   if (!(options.download === false || options.download === 'false')) {
     defaultButtons.push({
-      Icon: DownloadIcon,
+      icon: <DownloadIcon />,
       title: downloadCsv,
       onClick: () => {
         handleCSVDownload(props);
@@ -94,7 +94,7 @@ export default function CustomToolbar(props) {
 
   if (!(options.viewColumns === false || options.viewColumns === 'false')) {
     defaultButtons.push({
-      Icon: ViewColumnIcon,
+      icon: <ViewColumnIcon />,
       title: viewColumns,
       popRender() {
         return (
@@ -113,7 +113,7 @@ export default function CustomToolbar(props) {
 
   if (!(options.filter === false || options.filter === 'false')) {
     defaultButtons.push({
-      Icon: FilterIcon,
+      icon: <FilterIcon />,
       title: filterTable,
       popRender() {
         return (
@@ -148,8 +148,8 @@ export default function CustomToolbar(props) {
 
     const popId = getPopId(index);
 
-    if (e.Icon) {
-      const { Icon, popRender } = e;
+    if (e.icon) {
+      const { popRender, icon } = e;
       // When popRender is present, clicking the button will bubble up the content returned by the popRender
       if (popRender) {
         allPops.push(
@@ -187,7 +187,7 @@ export default function CustomToolbar(props) {
                 });
               }
             }}>
-            <Icon />
+            <div className="custom-toolbar-icon">{icon}</div>
           </IconButton>
         </Tooltip>
       );
@@ -204,14 +204,12 @@ export default function CustomToolbar(props) {
 
     if (isValidElement(e)) {
       content = e;
-    } else if (e.Icon) {
-      const { Icon } = e;
+    } else if (e.icon) {
+      const { icon } = e;
 
       content = (
         <>
-          <ListItemIcon>
-            <Icon fontSize="small" />
-          </ListItemIcon>
+          <ListItemIcon>{icon}</ListItemIcon>
           <ListItemText>{e.title}</ListItemText>
         </>
       );
@@ -319,7 +317,9 @@ export default function CustomToolbar(props) {
       {allPops.map((e, index) => (
         <div key={getPopId(index)}>{e}</div>
       ))}
-      {loading && <LinearProgress />}
+      <ProgressContainer>
+        {loading && <LinearProgress className="toolbar-progress" />}
+      </ProgressContainer>
     </div>
   );
 }
@@ -398,9 +398,26 @@ const Container = styled.div`
         cursor: not-allowed;
       }
     }
+    .custom-toolbar-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 24px;
+      height: 24px;
+      font-size: 20px;
+      overflow: hidden;
+    }
   }
   .toobar-title-hidden {
     opacity: 0;
     cursor: none;
   }
 `;
+
+const ProgressContainer = styled.div`
+  width: 100%;
+  height: 2px;
+  .toolbar-progress {
+    height: 2px;
+  }
+`;

package/src/Datatable/index.js

@@ -32,6 +32,7 @@ function ReDatatable({
   onChange,
   loading,
   disabled,
+  stripped,
   ...rest
 }) {
   const container = useRef(null);
@@ -202,6 +203,7 @@ function ReDatatable({
     disabled: PropTypes.bool,
     customButtons: PropTypes.array,
     onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    stripped: PropTypes.bool,
   };
 
   ReDatatable.defaultProps = {
@@ -212,10 +214,11 @@ function ReDatatable({
     disabled: false,
     customButtons: [],
     onChange: '',
+    stripped: false,
   };
 
   return (
-    <TableContainer ref={container} style={style}>
+    <TableContainer ref={container} className={stripped ? 'datatable-stripped' : ''} style={style}>
       <MUIDataTable data={data} columns={columns} {...props} />
     </TableContainer>
   );
@@ -237,6 +240,13 @@ const TableContainer = styled.div`
       text-align: center;
     }
   }
+  &.datatable-stripped {
+    .MuiTableBody-root {
+      tr:nth-of-type(odd) {
+        background-color: ${props => props.theme.palette.action.hover};
+      }
+    }
+  }
 `;
 
 const FilterLine = styled.div`

package/src/ErrorBoundary/fallback.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import { red } from '@mui/material/colors';
+import Button from '../Button';
+
+function InternalErrorFallback({ title, desc, retryFunc }) {
+  const theme = useTheme();
+  return (
+    <Root role="alert" $theme={theme}>
+      <h3>{title}</h3>
+      <pre>{desc}</pre>
+      {retryFunc && (
+        <Button variant="contained" color="error" size="small" onClick={retryFunc}>
+          Try again
+        </Button>
+      )}
+    </Root>
+  );
+}
+
+InternalErrorFallback.propTypes = {
+  title: PropTypes.string,
+  desc: PropTypes.string.isRequired,
+  retryFunc: PropTypes.func,
+};
+InternalErrorFallback.defaultProps = {
+  title: 'Something went wrong...',
+  retryFunc: null,
+};
+
+export function ErrorFallback({ error }) {
+  return <InternalErrorFallback desc={error.message} />;
+}
+
+ErrorFallback.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired,
+};
+
+export function ErrorFallbackRetry({ error, resetErrorBoundary }) {
+  return <InternalErrorFallback desc={error.message} retryFunc={resetErrorBoundary} />;
+}
+
+ErrorFallbackRetry.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired,
+  resetErrorBoundary: PropTypes.func.isRequired,
+};
+
+const Root = styled.div`
+  padding: 16px;
+  border: 2px solid ${props => props.$theme.palette.error.main};
+  border-radius: 4px;
+  color: ${props => props.$theme.palette.error.main};
+  background-color: ${red[50]};
+  font-size: 14px;
+  h3 {
+    margin: 0;
+    font-size: 16px;
+  }
+  pre {
+    white-space: normal;
+  }
+`;

package/src/ErrorBoundary/index.js

@@ -0,0 +1 @@
+export * from './fallback';

package/src/Header/header.js

@@ -68,7 +68,6 @@ const Root = styled.div`
   }
   .header-logo {
     display: inline-flex;
-    justify-content: center;
     position: relative;
     height: 40px;
     margin-right: 16px;
@@ -113,6 +112,9 @@ const Root = styled.div`
   .header-addons {
     display: flex;
     align-items: center;
+    > *:last-child {
+      padding-right: 0;
+    }
   }
   ${props => props.$theme.breakpoints.down('lg')} {
     .header-brand {

package/src/Wallet/Open.js

@@ -5,7 +5,7 @@ import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 
 export default function OpenInWallet({ locale, link }) {
-  const buttonText = locale === 'zh' ? '在 ABT 钱包打开' : 'Open in DID Wallet';
+  const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
   const browser = useBrowser();
 
   if (browser.mobile.any && !browser.wallet && !browser.wechat) {

package/src/WechatPrompt/index.js

@@ -26,7 +26,7 @@ export default function WechatPrompt() {
           <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
           <div className="wechat-tip">
             <Typography className="wechat-tip-text">
-              2. 点击“在浏览器打开”，才能调起 ABT 钱包
+              2. 点击“在浏览器打开”，才能调起 DID 钱包
             </Typography>
             <img className="wechat-tip-img" src={AndroidImage} alt="Open in Android Browser" />
           </div>
@@ -41,7 +41,7 @@ export default function WechatPrompt() {
         <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
         <div className="wechat-tip">
           <Typography className="wechat-tip-text">
-            2. 点击“在Safari中打开”，才能调起 ABT 钱包
+            2. 点击“在Safari中打开”，才能调起 DID 钱包
           </Typography>
           <img className="wechat-tip-img" src={IosImage} alt="Open in Safari" />
         </div>