payment-kit 1.18.56 → 1.19.0

package/.eslintrc.js

@@ -14,5 +14,11 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
     '@typescript-eslint/indent': 'off',
+    'react/require-default-props': [
+      'error',
+      {
+        functions: 'defaultArguments',
+      },
+    ],
   },
 };

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.18.56
+version: 1.19.0
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "payment-kit",
-  "version": "1.18.56",
+  "version": "1.19.0",
   "scripts": {
     "dev": "blocklet dev --open",
-    "eject": "vite eject",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
     "lint:fix": "pnpm run lint --fix",
     "format": "prettier -w src",
@@ -47,116 +46,116 @@
     "@abtnode/cron": "^1.16.44",
     "@arcblock/did": "^1.20.14",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.13.66",
+    "@arcblock/did-connect": "^3.0.1",
     "@arcblock/did-util": "^1.20.14",
     "@arcblock/jwt": "^1.20.14",
-    "@arcblock/ux": "^2.13.66",
+    "@arcblock/ux": "^3.0.1",
     "@arcblock/validator": "^1.20.14",
-    "@blocklet/did-space-js": "^1.0.60",
+    "@blocklet/did-space-js": "^1.0.62",
     "@blocklet/js-sdk": "^1.16.44",
     "@blocklet/logger": "^1.16.44",
-    "@blocklet/payment-react": "1.18.56",
+    "@blocklet/payment-react": "1.19.0",
     "@blocklet/sdk": "^1.16.44",
-    "@blocklet/ui-react": "^2.13.66",
-    "@blocklet/uploader": "^0.1.95",
+    "@blocklet/ui-react": "^3.0.1",
+    "@blocklet/uploader": "^0.1.97",
     "@blocklet/xss": "^0.1.36",
-    "@mui/icons-material": "^5.16.6",
-    "@mui/lab": "^5.0.0-alpha.173",
-    "@mui/material": "^5.16.6",
-    "@mui/system": "^5.16.6",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/lab": "7.0.0-beta.14",
+    "@mui/material": "^7.1.2",
+    "@mui/system": "^7.1.1",
     "@ocap/asset": "^1.20.14",
     "@ocap/client": "^1.20.14",
     "@ocap/mcrypto": "^1.20.14",
     "@ocap/util": "^1.20.14",
     "@ocap/wallet": "^1.20.14",
-    "@stripe/react-stripe-js": "^2.7.3",
+    "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
-    "ahooks": "^3.8.0",
-    "axios": "^1.7.5",
-    "body-parser": "^1.20.2",
+    "ahooks": "^3.8.5",
+    "axios": "^1.10.0",
+    "body-parser": "^1.20.3",
     "cls-hooked": "^4.2.2",
-    "cookie-parser": "^1.4.6",
+    "cookie-parser": "^1.4.7",
     "copy-to-clipboard": "^3.3.3",
     "cors": "^2.8.5",
     "date-fns": "^3.6.0",
-    "dayjs": "^1.11.12",
-    "debug": "^4.3.6",
+    "dayjs": "^1.11.13",
+    "debug": "^4.4.1",
     "dotenv-flow": "^3.3.0",
-    "ethers": "^6.13.5",
-    "express": "^4.19.2",
+    "ethers": "^6.14.4",
+    "express": "^4.21.2",
     "express-async-errors": "^3.1.1",
     "express-history-api-fallback": "^2.2.1",
-    "fastq": "^1.17.1",
+    "fastq": "^1.19.1",
     "flat": "^5.0.2",
-    "google-libphonenumber": "^3.2.38",
+    "google-libphonenumber": "^3.2.42",
     "html2canvas": "^1.4.1",
     "iframe-resizer-react": "^1.1.1",
-    "joi": "^17.12.2",
-    "json-stable-stringify": "^1.1.1",
+    "joi": "17.12.2",
+    "json-stable-stringify": "^1.3.0",
     "jspdf": "^2.5.2",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "mui-daterange-picker": "^1.0.5",
-    "nanoid": "3",
+    "nanoid": "^3.3.11",
     "p-all": "3.0.0",
-    "p-wait-for": "3",
+    "p-wait-for": "^3.2.0",
     "pretty-ms-i18n": "^1.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.52.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-error-boundary": "^4.1.2",
+    "react-hook-form": "^7.58.1",
     "react-international-phone": "^3.1.2",
-    "react-router-dom": "^6.25.1",
-    "recharts": "^2.12.7",
+    "react-router-dom": "^6.30.1",
+    "recharts": "^2.15.4",
     "rimraf": "^3.0.2",
-    "sequelize": "^6.37.3",
+    "sequelize": "^6.37.7",
     "sql-where-parser": "^2.2.1",
     "sqlite3": "^5.1.7",
     "stripe": "^13.11.0",
-    "typewriter-effect": "^2.21.0",
+    "typewriter-effect": "^2.22.0",
     "ufo": "^1.6.1",
-    "umzug": "^3.8.1",
+    "umzug": "^3.8.2",
     "use-bus": "^2.5.2",
-    "validator": "^13.12.0",
+    "validator": "^13.15.15",
     "web3": "^4.16.0"
   },
   "devDependencies": {
     "@abtnode/types": "^1.16.44",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.56",
-    "@types/cookie-parser": "^1.4.7",
-    "@types/cors": "^2.8.17",
+    "@blocklet/payment-types": "1.19.0",
+    "@types/cookie-parser": "^1.4.9",
+    "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
     "@types/dotenv-flow": "^3.3.3",
-    "@types/express": "^4.17.21",
-    "@types/node": "^18.19.42",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@types/express": "^4.17.23",
+    "@types/node": "^18.19.112",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.6.0",
     "babel-plugin-lodash": "^3.3.4",
     "bumpp": "^8.2.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
     "lint-staged": "^12.5.0",
     "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
+    "prettier": "^3.6.0",
     "prettier-plugin-import-sort": "^0.0.7",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "ts-jest": "^29.2.5",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
-    "tsx": "^4.19.2",
-    "type-fest": "^4.23.0",
-    "typescript": "^5.5.4",
-    "vite": "^5.3.5",
-    "vite-node": "^2.0.4",
+    "tsx": "^4.20.3",
+    "type-fest": "^4.41.0",
+    "typescript": "5.5.4",
+    "vite": "^7.0.0",
+    "vite-node": "^3.2.4",
     "vite-plugin-babel-import": "^2.0.5",
     "vite-plugin-blocklet": "^0.9.33",
-    "vite-plugin-node-polyfills": "^0.21.0",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
     "zx": "^7.2.3"
   },
   "importSort": {
@@ -169,5 +168,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "9fd0235186e07388337cf1a57b257f97de8dd4c3"
+  "gitHead": "2810263174bb900ebb5a431dc53930b08b4a8d6d"
 }

package/src/components/actions.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { stopEvent } from '@blocklet/payment-react';
 import { ExpandMoreOutlined, MoreHorizOutlined } from '@mui/icons-material';
@@ -21,13 +22,15 @@ export type ActionsProps = {
   onOpenCallback?: Function;
 };
 
-Actions.defaultProps = {
-  variant: 'compact',
-  sx: {},
-  onOpenCallback: null,
-};
-
-export default function Actions(props: ActionsProps) {
+export default function Actions(rawProps: ActionsProps) {
+  const props: ActionsProps = Object.assign(
+    {
+      variant: 'compact',
+      sx: {},
+      onOpenCallback: null,
+    },
+    rawProps
+  );
   const { t } = useLocaleContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -102,7 +105,12 @@ export default function Actions(props: ActionsProps) {
         {props.actions.map((action) =>
           openLoading ? (
             <MenuItem key={action.label} dense disabled>
-              <ListItemText primary={<Skeleton />} primaryTypographyProps={{ width: '56px' }} />
+              <ListItemText
+                primary={<Skeleton />}
+                slotProps={{
+                  primary: { width: '56px' },
+                }}
+              />
             </MenuItem>
           ) : (
             <MenuItem
@@ -111,7 +119,12 @@ export default function Actions(props: ActionsProps) {
               dense={!!action.dense}
               disabled={!!action.disabled}
               onClick={(e) => onClose(e, action.handler)}>
-              <ListItemText primary={action.label} primaryTypographyProps={{ color: action.color }} />
+              <ListItemText
+                primary={action.label}
+                slotProps={{
+                  primary: { color: action.color },
+                }}
+              />
             </MenuItem>
           )
         )}

package/src/components/balance-list.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { formatBNStr, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN } from '@blocklet/payment-types';
@@ -10,17 +11,36 @@ type Props = {
   showLogo?: boolean;
 };
 
-export default function BalanceList(props: Props) {
+export default function BalanceList(rawProps: Props) {
+  const props = Object.assign(
+    {
+      data: {},
+      showLogo: false,
+    },
+    rawProps
+  );
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
 
   if (isEmpty(props.data)) {
-    return <Typography color="text.secondary">{t('common.none')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('common.none')}
+      </Typography>
+    );
   }
 
   return (
-    <Stack direction="column" alignItems="flex-start" sx={{ width: '100%' }}>
+    <Stack
+      direction="column"
+      sx={{
+        alignItems: 'flex-start',
+        width: '100%',
+      }}>
       {Object.entries(props.data).map(([currencyId, amount]) => {
         const currency = currencies.find((c) => c.id === currencyId);
         if (!currency) {
@@ -29,17 +49,30 @@ export default function BalanceList(props: Props) {
         return (
           <Stack
             key={currencyId}
-            sx={{ width: '100%', maxWidth: '280px' }}
             direction="row"
             spacing={1}
-            alignItems="center">
+            sx={{
+              alignItems: 'center',
+              width: '100%',
+              maxWidth: '280px',
+            }}>
             {props?.showLogo && (
               <Avatar src={currency.logo} alt={currency.symbol} style={{ width: '18px', height: '18px' }} />
             )}
-            <Typography sx={{ width: '32px', minWidth: 100 }} color="text.secondary">
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                width: '32px',
+                minWidth: 100,
+              }}>
               {currency.symbol}
             </Typography>
-            <Typography sx={{ flex: 1, textAlign: 'right' }} color="text.primary">
+            <Typography
+              sx={{
+                color: 'text.primary',
+                flex: 1,
+                textAlign: 'right',
+              }}>
               {formatBNStr(amount, currency.decimal, 6, false)}
             </Typography>
           </Stack>
@@ -48,8 +81,3 @@ export default function BalanceList(props: Props) {
     </Stack>
   );
 }
-
-BalanceList.defaultProps = {
-  data: {},
-  showLogo: false,
-};

package/src/components/collapse.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { ExpandLessOutlined, ExpandMoreOutlined } from '@mui/icons-material';
 import { Box, Collapse, Stack } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -13,17 +14,19 @@ type Props = {
   lazy?: boolean;
 };
 
-IconCollapse.defaultProps = {
-  value: '',
-  onChange: () => {},
-  children: null,
-  expanded: false,
-  addons: null,
-  style: {},
-  lazy: true,
-};
-
-export default function IconCollapse(props: Props) {
+export default function IconCollapse(rawProps: Props) {
+  const props = Object.assign(
+    {
+      value: '',
+      onChange: () => {},
+      children: null,
+      expanded: false,
+      addons: null,
+      style: {},
+      lazy: true,
+    },
+    rawProps
+  );
   const [expanded, setExpanded] = useState(props.expanded || false);
   const toggleExpanded = () => {
     const newExpanded = !expanded;
@@ -38,14 +41,14 @@ export default function IconCollapse(props: Props) {
     <>
       <Stack
         direction="row"
-        alignItems="center"
-        justifyContent="space-between"
         onClick={(e) => {
           e.stopPropagation();
           props.onChange?.(props.value || '', !expanded);
           toggleExpanded();
         }}
         sx={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
           width: 1,
           cursor: 'pointer',
           fontWeight: 500,
@@ -54,7 +57,12 @@ export default function IconCollapse(props: Props) {
           ...props.style,
         }}>
         <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger}</Box>
-        <Stack direction="row" alignItems="center" spacing={2}>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+          }}>
           {props.addons} {expanded ? <ExpandLessOutlined /> : <ExpandMoreOutlined />}
         </Stack>
       </Stack>

package/src/components/copyable.tsx

@@ -9,7 +9,7 @@ interface CopyableProps {
   children?: ReactNode;
   style?: React.CSSProperties;
 }
-export default function Copyable({ text, children, style }: CopyableProps) {
+export default function Copyable({ text, children = null, style = {} }: CopyableProps) {
   const { locale } = useLocaleContext();
   return (
     /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
@@ -20,7 +20,13 @@ export default function Copyable({ text, children, style }: CopyableProps) {
       locale={locale}
       style={style}
       render={({ copyButton, containerRef }: any) => (
-        <Stack ref={containerRef} direction="row" alignItems="center" color="text.secondary">
+        <Stack
+          ref={containerRef}
+          direction="row"
+          sx={{
+            alignItems: 'center',
+            color: 'text.secondary',
+          }}>
           {children || (
             <Typography
               className="copyable-text"
@@ -41,8 +47,3 @@ export default function Copyable({ text, children, style }: CopyableProps) {
     />
   );
 }
-
-Copyable.defaultProps = {
-  style: {},
-  children: null,
-};

package/src/components/currency.tsx

@@ -6,17 +6,25 @@ type Props = {
   sx?: SxProps;
 };
 
-export default function Currency({ logo, name, sx }: Props) {
+export default function Currency({ logo, name, sx = {} }: Props) {
   return (
-    <Stack direction="row" alignItems="center" spacing={0.5} sx={sx}>
+    <Stack
+      direction="row"
+      spacing={0.5}
+      sx={[
+        {
+          alignItems: 'center',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}>
       <Avatar src={logo} alt={name} sx={{ width: 20, height: 20 }} />
-      <Typography color="text.primary" className="currency-name">
+      <Typography
+        className="currency-name"
+        sx={{
+          color: 'text.primary',
+        }}>
         {name}
       </Typography>
     </Stack>
   );
 }
-
-Currency.defaultProps = {
-  sx: {},
-};

package/src/components/customer/actions.tsx

@@ -15,11 +15,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-CustomerActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function CustomerActions({ data, onChange, variant }: Props) {
+export default function CustomerActions({ data, onChange, variant = 'compact' }: Props) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({
     action: '',

package/src/components/customer/form.tsx

@@ -86,7 +86,9 @@ export default function CustomerForm() {
       <Controller
         name="address.country"
         control={control}
-        render={({ field }) => <CountrySelect {...field} sx={{ pl: '6px' }} />}
+        render={({ field }) => (
+          <CountrySelect {...field} ref={field.ref as unknown as React.RefObject<HTMLDivElement>} sx={{ pl: '6px' }} />
+        )}
       />
       <FormInput
         name="address.state"

package/src/components/customer/link.tsx

@@ -6,10 +6,10 @@ import { InfoType, UserCardProps } from '@arcblock/ux/lib/UserCard/types';
 
 export default function CustomerLink({
   customer,
-  linked,
-  linkTo,
-  size,
-  cardProps,
+  linked = true,
+  linkTo = '',
+  size = 'default',
+  cardProps = {},
 }: {
   customer: TCustomer;
   linked?: boolean;
@@ -61,11 +61,3 @@ export default function CustomerLink({
 
   return CustomerCard;
 }
-
-CustomerLink.defaultProps = {
-  linked: true,
-  linkTo: '',
-  size: 'default',
-  tooltip: true,
-  cardProps: {},
-};

package/src/components/customer/notification-preference.tsx

@@ -92,14 +92,10 @@ function TimeSelector({
   );
 }
 
-DaySelector.defaultProps = {
-  onBlur: () => {},
-};
-
 function DaySelector({
   value,
   onChange,
-  onBlur,
+  onBlur = () => {},
 }: {
   value: number;
   onChange: (day: number) => void;
@@ -275,7 +271,12 @@ export function NotificationPreferenceDialog({ open, onClose }: NotificationPref
       onClose={onClose}
       disableEscapeKeyDown
       title={
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+          }}>
           <NotificationsOutlined fontSize="small" />
           <Typography variant="h6" component="span">
             {t('notification.preferences.title')}
@@ -301,7 +302,12 @@ export function NotificationPreferenceDialog({ open, onClose }: NotificationPref
         </Stack>
       }>
       {loading ? (
-        <Stack alignItems="center" justifyContent="center" height={200}>
+        <Stack
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 200,
+          }}>
           <CircularProgress />
         </Stack>
       ) : (
@@ -311,7 +317,10 @@ export function NotificationPreferenceDialog({ open, onClose }: NotificationPref
             <Typography id="frequency-label" sx={{ color: 'text.primary', mt: 2, mb: 1 }}>
               {t('notification.preferences.frequency.label')}
             </Typography>
-            <Stack flexDirection="row">
+            <Stack
+              sx={{
+                flexDirection: 'row',
+              }}>
               <Box
                 sx={{
                   display: 'flex',
@@ -371,8 +380,8 @@ export function NotificationPreferenceDialog({ open, onClose }: NotificationPref
             {selectedDate > 28 && frequency === 'monthly' && (
               <Typography
                 variant="caption"
-                color="text.secondary"
                 sx={{
+                  color: 'text.secondary',
                   fontStyle: 'italic',
                   display: 'flex',
                   alignItems: 'center',