@arcblock/ux 2.11.9 → 2.11.10

package/lib/ErrorBoundary/fallback.d.ts

@@ -1,8 +1,3 @@
-export interface InternalErrorFallbackProps {
-    title?: string;
-    desc: string;
-    retryFunc?: (() => void) | null;
-}
 export interface ErrorFallbackProps {
     error: Error;
 }
@@ -12,3 +7,4 @@ export interface ErrorFallbackRetryProps {
     resetErrorBoundary: () => void;
 }
 export declare function ErrorFallbackRetry({ error, resetErrorBoundary }: ErrorFallbackRetryProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReactRouterErrorFallback(): import("react/jsx-runtime").JSX.Element;

package/lib/ErrorBoundary/fallback.js

@@ -1,24 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { red } from '@mui/material/colors';
+import { Alert, AlertTitle, Box, Typography } from '@mui/material';
+import { useRouteError } from 'react-router-dom';
 import Button from '../Button';
-import { styled } from '../Theme';
 function InternalErrorFallback({
   title = 'Something went wrong...',
   desc,
-  retryFunc = null
+  extraContent = null,
+  severity = 'error'
 }) {
-  return /*#__PURE__*/_jsxs(Root, {
-    role: "alert",
-    children: [/*#__PURE__*/_jsx("h3", {
+  const gotoHome = () => window.location.replace('/');
+  const refresh = () => window.location.reload();
+  return /*#__PURE__*/_jsxs(Alert, {
+    severity: severity,
+    variant: "outlined",
+    icon: false,
+    sx: {
+      justifyContent: 'center'
+    },
+    children: [title ? /*#__PURE__*/_jsx(AlertTitle, {
       children: title
-    }), /*#__PURE__*/_jsx("pre", {
+    }) : null, desc ? /*#__PURE__*/_jsx(Typography, {
+      variant: "body2",
+      mb: 1,
       children: desc
-    }), retryFunc && /*#__PURE__*/_jsx(Button, {
-      variant: "contained",
-      color: "error",
-      size: "small",
-      onClick: retryFunc,
-      children: "Try again"
+    }) : null, extraContent ?? /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        gap: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        color: severity,
+        size: "small",
+        onClick: gotoHome,
+        children: "Home"
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "contained",
+        color: severity,
+        size: "small",
+        onClick: refresh,
+        children: "Refresh"
+      })]
     })]
   });
 }
@@ -35,21 +59,19 @@ export function ErrorFallbackRetry({
 }) {
   return /*#__PURE__*/_jsx(InternalErrorFallback, {
     desc: error.message,
-    retryFunc: resetErrorBoundary
+    extraContent: /*#__PURE__*/_jsx(Button, {
+      variant: "contained",
+      color: "error",
+      size: "small",
+      onClick: resetErrorBoundary,
+      children: "Try again"
+    })
   });
 }
-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;
-  }
-`;
+export function ReactRouterErrorFallback() {
+  const error = useRouteError();
+  return /*#__PURE__*/_jsx(InternalErrorFallback, {
+    title: "Current route occurred an error",
+    desc: error.message
+  });
+}

package/lib/Util/index.d.ts

@@ -86,4 +86,5 @@ export declare const getTranslation: (translations: TranslationsObject, locale:
     fallbackLocale?: Locale;
     defaultValue?: string;
 }) => string;
+export declare const lazyRetry: (fn: () => Promise<any>) => import("react").LazyExoticComponent<import("react").ComponentType<any>>;
 export {};

package/lib/Util/index.js

@@ -1,7 +1,9 @@
 /* eslint-disable no-bitwise */
+import { lazy } from 'react';
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
+import pRetry from 'p-retry';
 import { DID_PREFIX, WELLKNOWN_SERVICE_PATH_PREFIX } from './constant';
 let dateTool = null;
 export function parseQuery(str) {
@@ -356,4 +358,22 @@ export const getTranslation = (translations, locale, options = {}) => {
     translation = defaultValue;
   }
   return translation;
-};
+};
+export const lazyRetry = fn => /*#__PURE__*/lazy(() => pRetry(async () => {
+  try {
+    return await fn();
+  } catch (error) {
+    // HACK: pRetry 不会对 TypeError 的错误进行重试，手动放行了部分 network error 的错误，但此处的错误是经过 react-router 包装过的，不适用于上述的判断，所以这里需要特殊逻辑来进行处理
+    if (error instanceof TypeError && !error.message.includes('Failed to fetch')) {
+      throw error;
+    }
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
+    throw new Error('Unknown error');
+  }
+},
+// 只需要重试两次，加上原本的一次，总共三次
+{
+  retries: 2
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.9",
+  "version": "2.11.10",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "cc71a9dd666287cb70d1a7bd487d1930294b9765",
+  "gitHead": "3c56d08b46485ae49fdfd32fc8c92df9c8ddf25e",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.9",
-    "@arcblock/nft-display": "^2.11.9",
-    "@arcblock/react-hooks": "^2.11.9",
+    "@arcblock/icons": "^2.11.10",
+    "@arcblock/nft-display": "^2.11.10",
+    "@arcblock/react-hooks": "^2.11.10",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -103,6 +103,7 @@
     "lodash": "^4.17.21",
     "mui-datatables": "^4.3.0",
     "notistack": "^2.0.5",
+    "p-retry": "^6.2.1",
     "pako": "^2.1.0",
     "qrcode.react": "^3.1.0",
     "react-cookie-consent": "^6.4.1",

package/src/ErrorBoundary/fallback.tsx

@@ -1,28 +1,51 @@
-import { red } from '@mui/material/colors';
+import { Alert, AlertTitle, Box, Typography, type AlertProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { useRouteError } from 'react-router-dom';
+
 import Button from '../Button';
-import { styled } from '../Theme';
 
-export interface InternalErrorFallbackProps {
+interface InternalErrorFallbackProps {
   title?: string;
   desc: string;
-  retryFunc?: (() => void) | null;
+  extraContent?: ReactNode;
+  severity?: AlertProps['severity'];
 }
 
 function InternalErrorFallback({
   title = 'Something went wrong...',
   desc,
-  retryFunc = null,
+  extraContent = null,
+  severity = 'error',
 }: InternalErrorFallbackProps) {
+  const gotoHome = () => window.location.replace('/');
+  const refresh = () => window.location.reload();
+
   return (
-    <Root role="alert">
-      <h3>{title}</h3>
-      <pre>{desc}</pre>
-      {retryFunc && (
-        <Button variant="contained" color="error" size="small" onClick={retryFunc}>
-          Try again
-        </Button>
+    <Alert
+      severity={severity}
+      variant="outlined"
+      icon={false}
+      sx={{
+        justifyContent: 'center',
+      }}>
+      {title ? <AlertTitle>{title}</AlertTitle> : null}
+      {desc ? (
+        <Typography variant="body2" mb={1}>
+          {desc}
+        </Typography>
+      ) : null}
+      {extraContent ?? (
+        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}>
+          <Button variant="outlined" color={severity} size="small" onClick={gotoHome}>
+            Home
+          </Button>
+
+          <Button variant="contained" color={severity} size="small" onClick={refresh}>
+            Refresh
+          </Button>
+        </Box>
       )}
-    </Root>
+    </Alert>
   );
 }
 
@@ -40,21 +63,19 @@ export interface ErrorFallbackRetryProps {
 }
 
 export function ErrorFallbackRetry({ error, resetErrorBoundary }: ErrorFallbackRetryProps) {
-  return <InternalErrorFallback desc={error.message} retryFunc={resetErrorBoundary} />;
+  return (
+    <InternalErrorFallback
+      desc={error.message}
+      extraContent={
+        <Button variant="contained" color="error" size="small" onClick={resetErrorBoundary}>
+          Try again
+        </Button>
+      }
+    />
+  );
 }
 
-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;
-  }
-`;
+export function ReactRouterErrorFallback() {
+  const error = useRouteError() as Error;
+  return <InternalErrorFallback title="Current route occurred an error" desc={error.message} />;
+}

package/src/Util/index.ts

@@ -1,7 +1,9 @@
 /* eslint-disable no-bitwise */
+import { lazy } from 'react';
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import isNil from 'lodash/isNil';
+import pRetry from 'p-retry';
 import { DID_PREFIX, WELLKNOWN_SERVICE_PATH_PREFIX } from './constant';
 import type { $TSFixMe, Locale } from '../type';
 
@@ -456,3 +458,25 @@ export const getTranslation = (
 
   return translation;
 };
+
+export const lazyRetry = (fn: () => Promise<any>) =>
+  lazy(() =>
+    pRetry(
+      async () => {
+        try {
+          return await fn();
+        } catch (error: unknown) {
+          // HACK: pRetry 不会对 TypeError 的错误进行重试，手动放行了部分 network error 的错误，但此处的错误是经过 react-router 包装过的，不适用于上述的判断，所以这里需要特殊逻辑来进行处理
+          if (error instanceof TypeError && !error.message.includes('Failed to fetch')) {
+            throw error;
+          }
+          if (error instanceof Error) {
+            throw new Error(error.message);
+          }
+          throw new Error('Unknown error');
+        }
+      },
+      // 只需要重试两次，加上原本的一次，总共三次
+      { retries: 2 }
+    )
+  );