@arcblock/ux 2.10.45 → 2.10.47

package/lib/DID/index.d.ts

@@ -17,6 +17,7 @@ interface IDIDPropTypes extends IDidAddressWrapper {
     endChars?: number;
     locale?: 'en' | 'zh';
     chainId?: string;
+    roleType?: number;
 }
 export interface HTMLDIDElement extends HTMLDidAddressElement {
     openQRCode: () => void;

package/lib/DID/index.js

@@ -15,7 +15,7 @@ import { translate } from '../Locale/util';
 import { getDIDColor, isEthereumDid } from '../Util';
 const translations = {
   en: {
-    scanQrcode: 'Scan with DID Wallet to view this {role}',
+    scanQrcode: 'Scan with DID Wallet to view the {role}',
     download: 'Download',
     downloadTips: "Don't have DID Wallet ?"
   },
@@ -47,6 +47,9 @@ const isSquareMotif = roleType => {
   return !roles[roleType];
 };
 const getRoleName = roleType => {
+  if (roleType === types.RoleType.ROLE_ANY) {
+    return 'DID';
+  }
   const [roleName] = Object.entries(types.RoleType).find(item => item[1] === roleType) || [];
   if (roleName) {
     // UpperCase first word, example:
@@ -54,7 +57,7 @@ const getRoleName = roleType => {
     // ROLE_APPLICATION -> Application
     return roleName.toLowerCase().replace(/role_(\S)/g, (_, $1) => $1.toUpperCase());
   }
-  return 'Address';
+  return 'DID';
 };
 const getAvatarSize = (didMotifInfo, isEthDid, size) => {
   if (isEthDid) {
@@ -223,7 +226,7 @@ const DID = /*#__PURE__*/forwardRef((props, ref) => {
             fontSize: 18
           },
           children: t('scanQrcode', {
-            role: getRoleName(didMotifInfo?.roleType)
+            role: getRoleName(props.roleType || didMotifInfo?.roleType)
           })
         }), /*#__PURE__*/_jsx(QRCode
         // eslint-disable-next-line max-len

package/lib/withTracker/README.md

@@ -1,13 +1,13 @@
 # withTracker
 
-Add arcblock analytics, google analytics and sentry error reporting to your application.
+Add google analytics reporting to your application.
 
 ## Usage
 
 ### Installation
 
 ```bash
-yarn add react-ga @arcblock/analytics-js @sentry/browser @arcblock/ux
+yarn add @arcblock/ux
 ```
 
 ### Configuration & Usage
@@ -16,19 +16,22 @@ In your application entry file
 
 ```javascript
 import React from 'react';
-import ReactDOM from 'react-dom';
 import withTracker from '@arcblock/ux/lib/withTracker';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-function App() {
-  return <p>My awesome application</p>;
-}
+const App = () => <p>My awesome application</p>;
+const TrackedApp = withTracker(App);
 
-const Wrapped = withTracker(App, {
-  appName: 'my-awesome-app',
-  appVersion: '0.1.0',
-  gaAccount: '',
-  sentryDSN: '',
-});
+export default function WrappedApp() {
+  // While the blocklet is deploy to a sub path, this will be work properly.
+  const basename = window?.blocklet?.prefix || '/';
 
-ReactDOM.render(<Wrapped />, document.getElementById('root'));
+  return (
+    <Router basename={basename}>
+      <TrackedApp />
+    </Router>
+  );
+}
 ```
+
+Then you can use `window.trackPage(path, title)` and `window.trackEvent(category, action, label, value)` to track page views and events.

package/lib/withTracker/index.d.ts

@@ -1,2 +1,2 @@
-declare function _default(WrappedComponent: any, options?: {}): (props: any) => import("react/jsx-runtime").JSX.Element;
+declare function _default(WrappedComponent: any): (props: any) => import("react/jsx-runtime").JSX.Element;
 export default _default;

package/lib/withTracker/index.js

@@ -1,38 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable import/no-unresolved */
-import ReactGA from 'react-ga';
-import * as Sentry from '@sentry/browser';
-import { useMount, useDeepCompareEffect } from 'ahooks';
 import { useLocation } from 'react-router-dom';
-import ErrorBoundary from './error_boundary';
-export default (WrappedComponent, options = {}) => {
-  const {
-    appVersion,
-    gaAccount,
-    sentryDSN
-  } = options;
-  if (gaAccount) {
-    ReactGA.initialize(gaAccount);
-  }
-  if (sentryDSN) {
-    Sentry.init({
-      dsn: sentryDSN,
-      release: appVersion || 'unknown',
-      environment: process.env.NODE_ENV || 'development'
-    });
-  }
-  const trackPage = page => {
+import { useMount, useDeepCompareEffect } from 'ahooks';
+import ReactGA from 'react-ga4';
+export default WrappedComponent => {
+  const trackingId = window.blocklet?.GA_MEASUREMENT_ID || '';
+  const trackPage = (page, title = document.title) => {
     if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
       return;
     }
-    if (gaAccount) {
-      ReactGA.set({
+    if (trackingId) {
+      ReactGA.send({
+        hitType: 'pageview',
         page,
-        ...options
+        title
       });
-      ReactGA.pageview(page);
     }
   };
+  const trackEvent = (category, action, label, value) => {
+    if (trackingId) {
+      ReactGA.event({
+        category,
+        action,
+        label,
+        value,
+        transport: 'beacon'
+      });
+    }
+  };
+  if (trackingId) {
+    ReactGA.initialize(trackingId);
+  }
+  window.trackPage = trackPage;
+  window.trackEvent = trackEvent;
   return function TrackedComponent(props) {
     const location = useLocation();
     useMount(() => {
@@ -41,13 +40,6 @@ export default (WrappedComponent, options = {}) => {
     useDeepCompareEffect(() => {
       trackPage(location.pathname);
     }, [location.pathname]);
-    if (process.env.NODE_ENV === 'production') {
-      return /*#__PURE__*/_jsx(ErrorBoundary, {
-        children: /*#__PURE__*/_jsx(WrappedComponent, {
-          ...props
-        })
-      });
-    }
     return /*#__PURE__*/_jsx(WrappedComponent, {
       ...props
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.10.45",
+  "version": "2.10.47",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -64,12 +64,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "f4387cd434dcdf0bab88973b014575613dcb3611",
+  "gitHead": "21ff7984142d0a17cdb695c3bcec18c096d9bbf6",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.10.45",
-    "@arcblock/nft-display": "^2.10.45",
-    "@arcblock/react-hooks": "^2.10.45",
+    "@arcblock/icons": "^2.10.47",
+    "@arcblock/nft-display": "^2.10.47",
+    "@arcblock/react-hooks": "^2.10.47",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -101,6 +101,7 @@
     "qrcode.react": "^3.1.0",
     "react-cookie-consent": "^6.4.1",
     "react-error-boundary": "^3.1.4",
+    "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.34.0",
     "react-lottie-player": "^1.4.3",

package/src/DID/index.tsx

@@ -18,7 +18,7 @@ import { getDIDColor, isEthereumDid } from '../Util';
 
 const translations = {
   en: {
-    scanQrcode: 'Scan with DID Wallet to view this {role}',
+    scanQrcode: 'Scan with DID Wallet to view the {role}',
     download: 'Download',
     downloadTips: "Don't have DID Wallet ?",
   },
@@ -45,6 +45,7 @@ interface IDIDPropTypes extends IDidAddressWrapper {
   endChars?: number;
   locale?: 'en' | 'zh';
   chainId?: string;
+  roleType?: number;
 }
 
 const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
@@ -72,8 +73,11 @@ const isSquareMotif = (roleType: number) => {
 };
 
 const getRoleName = (roleType: number) => {
-  const [roleName] = Object.entries(types.RoleType).find((item) => item[1] === roleType) || [];
+  if (roleType === types.RoleType.ROLE_ANY) {
+    return 'DID';
+  }
 
+  const [roleName] = Object.entries(types.RoleType).find((item) => item[1] === roleType) || [];
   if (roleName) {
     // UpperCase first word, example:
     // ROLE_ACCOUNT -> Account
@@ -81,7 +85,7 @@ const getRoleName = (roleType: number) => {
     return roleName.toLowerCase().replace(/role_(\S)/g, (_, $1) => $1.toUpperCase());
   }
 
-  return 'Address';
+  return 'DID';
 };
 
 const getAvatarSize = (didMotifInfo: any, isEthDid: boolean, size: number) => {
@@ -268,7 +272,7 @@ const DID = forwardRef<HTMLDIDElement, IDIDPropTypes>((props, ref) => {
         {/* @ts-ignore */}
         <DialogContent align="center" sx={{ p: 3 }}>
           <Typography sx={{ mb: 2, fontWeight: 500, fontSize: 18 }}>
-            {t('scanQrcode', { role: getRoleName(didMotifInfo?.roleType) })}
+            {t('scanQrcode', { role: getRoleName(props.roleType || didMotifInfo?.roleType) })}
           </Typography>
           <QRCode
             // eslint-disable-next-line max-len

package/src/withTracker/README.md

@@ -1,13 +1,13 @@
 # withTracker
 
-Add arcblock analytics, google analytics and sentry error reporting to your application.
+Add google analytics reporting to your application.
 
 ## Usage
 
 ### Installation
 
 ```bash
-yarn add react-ga @arcblock/analytics-js @sentry/browser @arcblock/ux
+yarn add @arcblock/ux
 ```
 
 ### Configuration & Usage
@@ -16,19 +16,22 @@ In your application entry file
 
 ```javascript
 import React from 'react';
-import ReactDOM from 'react-dom';
 import withTracker from '@arcblock/ux/lib/withTracker';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-function App() {
-  return <p>My awesome application</p>;
-}
+const App = () => <p>My awesome application</p>;
+const TrackedApp = withTracker(App);
 
-const Wrapped = withTracker(App, {
-  appName: 'my-awesome-app',
-  appVersion: '0.1.0',
-  gaAccount: '',
-  sentryDSN: '',
-});
+export default function WrappedApp() {
+  // While the blocklet is deploy to a sub path, this will be work properly.
+  const basename = window?.blocklet?.prefix || '/';
 
-ReactDOM.render(<Wrapped />, document.getElementById('root'));
+  return (
+    <Router basename={basename}>
+      <TrackedApp />
+    </Router>
+  );
+}
 ```
+
+Then you can use `window.trackPage(path, title)` and `window.trackEvent(category, action, label, value)` to track page views and events.

package/src/withTracker/index.js

@@ -1,37 +1,32 @@
-/* eslint-disable import/no-unresolved */
-import ReactGA from 'react-ga';
-import * as Sentry from '@sentry/browser';
-
-import { useMount, useDeepCompareEffect } from 'ahooks';
 import { useLocation } from 'react-router-dom';
+import { useMount, useDeepCompareEffect } from 'ahooks';
+import ReactGA from 'react-ga4';
 
-import ErrorBoundary from './error_boundary';
-
-export default (WrappedComponent, options = {}) => {
-  const { appVersion, gaAccount, sentryDSN } = options;
-
-  if (gaAccount) {
-    ReactGA.initialize(gaAccount);
-  }
-  if (sentryDSN) {
-    Sentry.init({
-      dsn: sentryDSN,
-      release: appVersion || 'unknown',
-      environment: process.env.NODE_ENV || 'development',
-    });
-  }
-
-  const trackPage = (page) => {
+export default (WrappedComponent) => {
+  const trackingId = window.blocklet?.GA_MEASUREMENT_ID || '';
+  const trackPage = (page, title = document.title) => {
     if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
       return;
     }
 
-    if (gaAccount) {
-      ReactGA.set({ page, ...options });
-      ReactGA.pageview(page);
+    if (trackingId) {
+      ReactGA.send({ hitType: 'pageview', page, title });
     }
   };
 
+  const trackEvent = (category, action, label, value) => {
+    if (trackingId) {
+      ReactGA.event({ category, action, label, value, transport: 'beacon' });
+    }
+  };
+
+  if (trackingId) {
+    ReactGA.initialize(trackingId);
+  }
+
+  window.trackPage = trackPage;
+  window.trackEvent = trackEvent;
+
   return function TrackedComponent(props) {
     const location = useLocation();
 
@@ -43,14 +38,6 @@ export default (WrappedComponent, options = {}) => {
       trackPage(location.pathname);
     }, [location.pathname]);
 
-    if (process.env.NODE_ENV === 'production') {
-      return (
-        <ErrorBoundary>
-          <WrappedComponent {...props} />
-        </ErrorBoundary>
-      );
-    }
-
     return <WrappedComponent {...props} />;
   };
 };