@arcblock/ux 2.9.49 → 2.9.51

package/es/DID/index.js

@@ -1,10 +1,25 @@
-import React, { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { getDIDMotifInfo } from '@arcblock/did-motif';
+import QRCode from 'qrcode.react';
+import { Icon } from '@iconify/react';
+import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
+import { Box, Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
 import Address from '../Address';
 import Avatar from '../Avatar';
 import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const translations = {
+  en: {
+    scanQrcode: 'Scan with DID Wallet to transfer token to here'
+  },
+  zh: {
+    scanQrcode: '扫描此二维码，用 DID 钱包转账'
+  }
+};
 const DIDPropTypes = {
   did: PropTypes.string.isRequired,
   size: PropTypes.number,
@@ -13,12 +28,19 @@ const DIDPropTypes = {
   responsive: PropTypes.bool,
   showCopyButtonInTooltip: PropTypes.bool,
   showAvatar: PropTypes.bool,
+  showQrcode: PropTypes.bool,
   inline: PropTypes.bool,
   append: PropTypes.any,
   compact: PropTypes.bool,
   startChars: PropTypes.number,
   endChars: PropTypes.number,
-  locale: PropTypes.oneOf(['en', 'zh'])
+  locale: PropTypes.oneOf(['en', 'zh']),
+  chainId: PropTypes.string
+};
+const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
+const CHAIN_ID_MAP = {
+  'main.abtnetwork.io': DEFAULT_CHAIN_ID,
+  'beta.abtnetwork.io': 'beta'
 };
 const getFontColor = (did, didMotifInfo, isEthDid) => {
   if (isEthDid) {
@@ -52,8 +74,30 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
 const DID = /*#__PURE__*/forwardRef(({
   did,
   showAvatar,
+  showQrcode,
+  chainId,
+  locale,
   ...rest
 }, ref) => {
+  if (!translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  }
+  try {
+    if (!chainId) {
+      const chainHostUrl = window?.blocklet?.CHAIN_HOST;
+      if (chainHostUrl) {
+        const chainHost = new URL(chainHostUrl).hostname;
+        if (chainHost) {
+          // eslint-disable-next-line no-param-reassign
+          chainId = CHAIN_ID_MAP[chainHost];
+        }
+      }
+    }
+  } catch {
+    console.warn('Failed to parse chainHost');
+  }
+  const [open, setOpen] = useState(false);
   const isEthDid = isEthereumDid(did);
   const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
   const fontSize = getFontSize(rest.size);
@@ -82,11 +126,67 @@ const DID = /*#__PURE__*/forwardRef(({
     blockiesPadding: false,
     className: "did-address-avatar"
   }, "avatar")];
-  return /*#__PURE__*/_jsx(Address, {
-    ref: ref,
-    ...rest,
-    prepend: prepend,
-    children: did
+  const closeQrCode = useMemoizedFn(() => {
+    setOpen(false);
+  });
+  const openQrCode = useMemoizedFn(() => {
+    setOpen(true);
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Address, {
+      ref: ref,
+      locale: locale,
+      ...rest,
+      prepend: prepend,
+      append: showQrcode ? /*#__PURE__*/_jsx(Box, {
+        component: Icon,
+        icon: IconQrCode,
+        onClick: openQrCode,
+        sx: {
+          cursor: 'pointer',
+          ml: rest.copyable ? 0.5 : 0,
+          color: 'grey.500'
+        }
+      }) : null,
+      children: did
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      onClose: closeQrCode,
+      maxWidth: "sm",
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        align: "center",
+        children: /*#__PURE__*/_jsx(Box, {
+          display: "inline-block",
+          pt: 1.5,
+          fontSize: {
+            xs: 13,
+            sm: 'inherit'
+          },
+          component: "span",
+          children: translations[locale].scanQrcode
+        })
+      }), /*#__PURE__*/_jsxs(DialogContent, {
+        align: "center",
+        children: [/*#__PURE__*/_jsx(QRCode
+        // eslint-disable-next-line max-len
+        , {
+          value: `abt://abtwallet.io/i?did=did:abt:${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`,
+          size: 256,
+          renderAs: "svg",
+          level: "M"
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            marginTop: 1,
+            textAlign: 'center'
+          },
+          children: /*#__PURE__*/_jsx(Address, {
+            copyable: true,
+            locale: locale,
+            children: did
+          })
+        })]
+      })]
+    })]
   });
 });
 export default DID;
@@ -98,10 +198,12 @@ DID.defaultProps = {
   responsive: true,
   showCopyButtonInTooltip: false,
   showAvatar: true,
+  showQrcode: false,
   inline: false,
   append: null,
   compact: false,
   startChars: 6,
   endChars: 6,
-  locale: 'en'
+  locale: 'en',
+  chainId: ''
 };

package/lib/DID/index.js

@@ -4,17 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _didMotif = require("@arcblock/did-motif");
+var _qrcode = _interopRequireDefault(require("qrcode.react"));
+var _react2 = require("@iconify/react");
+var _qrCodeRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/qr-code-rounded"));
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
 var _Address = _interopRequireDefault(require("../Address"));
 var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Util = require("../Util");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["did", "showAvatar"];
+const _excluded = ["did", "showAvatar", "showQrcode", "chainId", "locale"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -22,6 +25,14 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; }
 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 translations = {
+  en: {
+    scanQrcode: 'Scan with DID Wallet to transfer token to here'
+  },
+  zh: {
+    scanQrcode: '扫描此二维码，用 DID 钱包转账'
+  }
+};
 const DIDPropTypes = {
   did: _propTypes.default.string.isRequired,
   size: _propTypes.default.number,
@@ -30,12 +41,19 @@ const DIDPropTypes = {
   responsive: _propTypes.default.bool,
   showCopyButtonInTooltip: _propTypes.default.bool,
   showAvatar: _propTypes.default.bool,
+  showQrcode: _propTypes.default.bool,
   inline: _propTypes.default.bool,
   append: _propTypes.default.any,
   compact: _propTypes.default.bool,
   startChars: _propTypes.default.number,
   endChars: _propTypes.default.number,
-  locale: _propTypes.default.oneOf(['en', 'zh'])
+  locale: _propTypes.default.oneOf(['en', 'zh']),
+  chainId: _propTypes.default.string
+};
+const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
+const CHAIN_ID_MAP = {
+  'main.abtnetwork.io': DEFAULT_CHAIN_ID,
+  'beta.abtnetwork.io': 'beta'
 };
 const getFontColor = (did, didMotifInfo, isEthDid) => {
   if (isEthDid) {
@@ -69,9 +87,32 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
 const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
       did,
-      showAvatar
+      showAvatar,
+      showQrcode,
+      chainId,
+      locale
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
+  if (!translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  }
+  try {
+    if (!chainId) {
+      var _window, _window$blocklet;
+      const chainHostUrl = (_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST;
+      if (chainHostUrl) {
+        const chainHost = new URL(chainHostUrl).hostname;
+        if (chainHost) {
+          // eslint-disable-next-line no-param-reassign
+          chainId = CHAIN_ID_MAP[chainHost];
+        }
+      }
+    }
+  } catch (_unused) {
+    console.warn('Failed to parse chainHost');
+  }
+  const [open, setOpen] = (0, _react.useState)(false);
   const isEthDid = (0, _Util.isEthereumDid)(did);
   const didMotifInfo = isEthDid ? undefined : (0, _didMotif.getDIDMotifInfo)(did);
   const fontSize = (0, _Util.getFontSize)(rest.size);
@@ -100,12 +141,68 @@ const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     blockiesPadding: false,
     className: "did-address-avatar"
   }, "avatar")];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, _objectSpread(_objectSpread({
-    ref: ref
-  }, rest), {}, {
-    prepend: prepend,
-    children: did
-  }));
+  const closeQrCode = (0, _ahooks.useMemoizedFn)(() => {
+    setOpen(false);
+  });
+  const openQrCode = (0, _ahooks.useMemoizedFn)(() => {
+    setOpen(true);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, _objectSpread(_objectSpread({
+      ref: ref,
+      locale: locale
+    }, rest), {}, {
+      prepend: prepend,
+      append: showQrcode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: _react2.Icon,
+        icon: _qrCodeRounded.default,
+        onClick: openQrCode,
+        sx: {
+          cursor: 'pointer',
+          ml: rest.copyable ? 0.5 : 0,
+          color: 'grey.500'
+        }
+      }) : null,
+      children: did
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Dialog, {
+      open: open,
+      onClose: closeQrCode,
+      maxWidth: "sm",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogTitle, {
+        align: "center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          display: "inline-block",
+          pt: 1.5,
+          fontSize: {
+            xs: 13,
+            sm: 'inherit'
+          },
+          component: "span",
+          children: translations[locale].scanQrcode
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.DialogContent, {
+        align: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_qrcode.default
+        // eslint-disable-next-line max-len
+        , {
+          value: "abt://abtwallet.io/i?did=did:abt:".concat(did, "&action=didRecognize&chainID=").concat(chainId || DEFAULT_CHAIN_ID),
+          size: 256,
+          renderAs: "svg",
+          level: "M"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            marginTop: 1,
+            textAlign: 'center'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+            copyable: true,
+            locale: locale,
+            children: did
+          })
+        })]
+      })]
+    })]
+  });
 });
 var _default = exports.default = DID;
 DID.propTypes = DIDPropTypes;
@@ -116,10 +213,12 @@ DID.defaultProps = {
   responsive: true,
   showCopyButtonInTooltip: false,
   showAvatar: true,
+  showQrcode: false,
   inline: false,
   append: null,
   compact: false,
   startChars: 6,
   endChars: 6,
-  locale: 'en'
+  locale: 'en',
+  chainId: ''
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.9.49",
+  "version": "2.9.51",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -358,12 +358,12 @@
     "@mui/material": "^5.15.0",
     "react": ">=18.2.0"
   },
-  "gitHead": "d4579f3d5648e2f935e5efe75380e574e119cc73",
+  "gitHead": "e89e3c3f37f0891ef91d1f9f6f864f29806c22b7",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.9.49",
-    "@arcblock/nft-display": "^2.9.49",
-    "@arcblock/react-hooks": "^2.9.49",
+    "@arcblock/icons": "^2.9.51",
+    "@arcblock/nft-display": "^2.9.51",
+    "@arcblock/react-hooks": "^2.9.51",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -392,6 +392,7 @@
     "mui-datatables": "^4.3.0",
     "notistack": "^2.0.5",
     "pako": "^2.1.0",
+    "qrcode.react": "^3.1.0",
     "react-cookie-consent": "^6.4.1",
     "react-error-boundary": "^3.1.4",
     "react-helmet": "^6.1.0",

package/src/DID/index.jsx

@@ -1,12 +1,26 @@
-import React, { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { getDIDMotifInfo } from '@arcblock/did-motif';
+import QRCode from 'qrcode.react';
+import { Icon } from '@iconify/react';
+import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
+import { Box, Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
 
 import Address from '../Address';
 import Avatar from '../Avatar';
 
 import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
 
+const translations = {
+  en: {
+    scanQrcode: 'Scan with DID Wallet to transfer token to here',
+  },
+  zh: {
+    scanQrcode: '扫描此二维码，用 DID 钱包转账',
+  },
+};
+
 const DIDPropTypes = {
   did: PropTypes.string.isRequired,
   size: PropTypes.number,
@@ -15,12 +29,21 @@ const DIDPropTypes = {
   responsive: PropTypes.bool,
   showCopyButtonInTooltip: PropTypes.bool,
   showAvatar: PropTypes.bool,
+  showQrcode: PropTypes.bool,
   inline: PropTypes.bool,
   append: PropTypes.any,
   compact: PropTypes.bool,
   startChars: PropTypes.number,
   endChars: PropTypes.number,
   locale: PropTypes.oneOf(['en', 'zh']),
+  chainId: PropTypes.string,
+};
+
+const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
+
+const CHAIN_ID_MAP = {
+  'main.abtnetwork.io': DEFAULT_CHAIN_ID,
+  'beta.abtnetwork.io': 'beta',
 };
 
 const getFontColor = (did, didMotifInfo, isEthDid) => {
@@ -53,7 +76,27 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
 /**
  * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
  */
-const DID = forwardRef(({ did, showAvatar, ...rest }, ref) => {
+const DID = forwardRef(({ did, showAvatar, showQrcode, chainId, locale, ...rest }, ref) => {
+  if (!translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  }
+
+  try {
+    if (!chainId) {
+      const chainHostUrl = window?.blocklet?.CHAIN_HOST;
+      if (chainHostUrl) {
+        const chainHost = new URL(chainHostUrl).hostname;
+        if (chainHost) {
+          // eslint-disable-next-line no-param-reassign
+          chainId = CHAIN_ID_MAP[chainHost];
+        }
+      }
+    }
+  } catch {
+    console.warn('Failed to parse chainHost');
+  }
+  const [open, setOpen] = useState(false);
   const isEthDid = isEthereumDid(did);
   const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
   const fontSize = getFontSize(rest.size);
@@ -75,11 +118,59 @@ const DID = forwardRef(({ did, showAvatar, ...rest }, ref) => {
       />
     ),
   ];
+  const closeQrCode = useMemoizedFn(() => {
+    setOpen(false);
+  });
+  const openQrCode = useMemoizedFn(() => {
+    setOpen(true);
+  });
 
   return (
-    <Address ref={ref} {...rest} prepend={prepend}>
-      {did}
-    </Address>
+    <>
+      <Address
+        ref={ref}
+        locale={locale}
+        {...rest}
+        prepend={prepend}
+        append={
+          showQrcode ? (
+            <Box
+              component={Icon}
+              icon={IconQrCode}
+              onClick={openQrCode}
+              sx={{
+                cursor: 'pointer',
+                ml: rest.copyable ? 0.5 : 0,
+                color: 'grey.500',
+              }}
+            />
+          ) : null
+        }>
+        {did}
+      </Address>
+
+      <Dialog open={open} onClose={closeQrCode} maxWidth="sm">
+        <DialogTitle align="center">
+          <Box display="inline-block" pt={1.5} fontSize={{ xs: 13, sm: 'inherit' }} component="span">
+            {translations[locale].scanQrcode}
+          </Box>
+        </DialogTitle>
+        <DialogContent align="center">
+          <QRCode
+            // eslint-disable-next-line max-len
+            value={`abt://abtwallet.io/i?did=did:abt:${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`}
+            size={256}
+            renderAs="svg"
+            level="M"
+          />
+          <Box sx={{ marginTop: 1, textAlign: 'center' }}>
+            <Address copyable locale={locale}>
+              {did}
+            </Address>
+          </Box>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 });
 
@@ -94,10 +185,12 @@ DID.defaultProps = {
   responsive: true,
   showCopyButtonInTooltip: false,
   showAvatar: true,
+  showQrcode: false,
   inline: false,
   append: null,
   compact: false,
   startChars: 6,
   endChars: 6,
   locale: 'en',
+  chainId: '',
 };