payment-kit 1.18.55 → 1.19.0

package/src/components/customer/overdraft-protection.tsx

@@ -90,23 +90,17 @@ type OverdraftProtectionDialogProps = {
   } | null;
 };
 
-OverdraftProtectionDialog.defaultProps = {
-  payerAddress: '',
-  stakingAddress: '',
-  initValues: null,
-};
-
 export default function OverdraftProtectionDialog({
   value,
   loading,
   onSave,
   onCancel,
   open,
-  stakingAddress,
-  payerAddress,
+  stakingAddress = '',
+  payerAddress = '',
   currency,
   subscription,
-  initValues,
+  initValues = null,
 }: OverdraftProtectionDialogProps) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -251,7 +245,12 @@ export default function OverdraftProtectionDialog({
       fullWidth
       className="base-dialog"
       title={
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+          }}>
           <Typography variant="h6" component="span">
             {t('customer.overdraftProtection.setting')}
           </Typography>
@@ -296,7 +295,10 @@ export default function OverdraftProtectionDialog({
           </Button>
         </Stack>
       }>
-      <Stack gap={2}>
+      <Stack
+        sx={{
+          gap: 2,
+        }}>
         <Alert severity="info">
           {value.used !== '0' && !isEnabled ? (
             <>{t('customer.overdraftProtection.disableConfirm')}</>
@@ -317,8 +319,17 @@ export default function OverdraftProtectionDialog({
           )}
         </Alert>
 
-        <Stack spacing={2} direction="row" alignItems="center">
-          <Typography variant="subtitle1" color="text.secondary">
+        <Stack
+          spacing={2}
+          direction="row"
+          sx={{
+            alignItems: 'center',
+          }}>
+          <Typography
+            variant="subtitle1"
+            sx={{
+              color: 'text.secondary',
+            }}>
             {t('customer.overdraftProtection.title')}
           </Typography>
           <FormControlLabel
@@ -328,7 +339,11 @@ export default function OverdraftProtectionDialog({
         </Stack>
 
         {isEnabled ? (
-          <Stack gap={1} sx={{ mt: '-8px' }}>
+          <Stack
+            sx={{
+              gap: 1,
+              mt: '-8px',
+            }}>
             {payerAddress && (
               <Stack
                 sx={
@@ -343,7 +358,11 @@ export default function OverdraftProtectionDialog({
                         gap: 2,
                       }
                 }>
-                <Typography variant="subtitle2" color="text.secondary">
+                <Typography
+                  variant="subtitle2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
                   {t('customer.overdraftProtection.payerAddress')}
                 </Typography>
                 <Typography variant="body2" sx={{ wordBreak: 'break-all', fontFamily: 'monospace', fontWeight: '700' }}>
@@ -366,7 +385,11 @@ export default function OverdraftProtectionDialog({
                         gap: 2,
                       }
                 }>
-                <Typography variant="subtitle2" color="text.secondary">
+                <Typography
+                  variant="subtitle2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
                   {t('customer.overdraftProtection.stakingAddress')}
                 </Typography>
                 <Link
@@ -390,7 +413,11 @@ export default function OverdraftProtectionDialog({
               </Stack>
             )}
 
-            <Typography variant="body2" color="text.secondary">
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
               {(() => {
                 if (Number(dueAmount) > 0 && !value.enabled) {
                   return t('customer.overdraftProtection.remainingNotEnough', {
@@ -414,15 +441,25 @@ export default function OverdraftProtectionDialog({
               })()}
             </Typography>
 
-            <Grid container spacing={2} ml={-2} sx={{ mt: -1 }}>
+            <Grid
+              container
+              spacing={2}
+              sx={{
+                ml: -2,
+                mt: -1,
+              }}>
               {cycleAmountLoading ? (
                 // 加载状态的占位
                 <>
                   {[1, 2, 3, 4, 5].map((key) => (
-                    <Grid item xs={6} sm={4} key={key}>
+                    <Grid size={{ xs: 6, sm: 4 }} key={key}>
                       <Card variant="outlined" sx={{ height: '100%' }}>
                         <CardActionArea sx={{ height: '100%', p: 1 }}>
-                          <Stack spacing={1} alignItems="center">
+                          <Stack
+                            spacing={1}
+                            sx={{
+                              alignItems: 'center',
+                            }}>
                             <Skeleton variant="rectangular" width={80} height={32} />
                             <Skeleton width={100} />
                           </Stack>
@@ -430,10 +467,14 @@ export default function OverdraftProtectionDialog({
                       </Card>
                     </Grid>
                   ))}
-                  <Grid item xs={6} sm={4}>
+                  <Grid size={{ xs: 6, sm: 4 }}>
                     <Card variant="outlined" sx={{ height: '100%' }}>
                       <CardActionArea sx={{ height: '100%', p: 2 }}>
-                        <Stack spacing={1} alignItems="center">
+                        <Stack
+                          spacing={1}
+                          sx={{
+                            alignItems: 'center',
+                          }}>
                           <Skeleton variant="rectangular" width={80} height={24} />
                         </Stack>
                       </CardActionArea>
@@ -443,7 +484,7 @@ export default function OverdraftProtectionDialog({
               ) : (
                 <>
                   {presetAmounts.map(({ amount: presetAmount, cycles }) => (
-                    <Grid item xs={6} sm={4} key={presetAmount}>
+                    <Grid size={{ xs: 6, sm: 4 }} key={presetAmount}>
                       <Card
                         variant="outlined"
                         sx={{
@@ -464,11 +505,19 @@ export default function OverdraftProtectionDialog({
                             setCustomAmount(false);
                           }}
                           sx={{ height: '100%', p: 1 }}>
-                          <Stack spacing={1} alignItems="center">
+                          <Stack
+                            spacing={1}
+                            sx={{
+                              alignItems: 'center',
+                            }}>
                             <Typography variant="h6" sx={{ fontWeight: 600 }}>
                               {presetAmount} {currency.symbol}
                             </Typography>
-                            <Typography variant="caption" color="text.secondary">
+                            <Typography
+                              variant="caption"
+                              sx={{
+                                color: 'text.secondary',
+                              }}>
                               {formatEstimatedDuration(cycles)}
                             </Typography>
                           </Stack>
@@ -476,7 +525,7 @@ export default function OverdraftProtectionDialog({
                       </Card>
                     </Grid>
                   ))}
-                  <Grid item xs={6} sm={4}>
+                  <Grid size={{ xs: 6, sm: 4 }}>
                     <Card
                       variant="outlined"
                       sx={{
@@ -490,7 +539,11 @@ export default function OverdraftProtectionDialog({
                         ...(customAmount ? { borderColor: 'primary.main', borderWidth: 1 } : {}),
                       }}>
                       <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 2 }}>
-                        <Stack spacing={1} alignItems="center">
+                        <Stack
+                          spacing={1}
+                          sx={{
+                            alignItems: 'center',
+                          }}>
                           <Typography variant="h6" sx={{ fontWeight: 600 }}>
                             {t('common.custom')}
                           </Typography>
@@ -538,16 +591,18 @@ export default function OverdraftProtectionDialog({
                     helperText={methods.formState.errors.amount?.message}
                     fullWidth
                     variant="outlined"
-                    InputProps={{
-                      endAdornment: (
-                        <Box sx={{ ml: 1, display: 'flex', alignItems: 'center' }}>
-                          <Currency logo={currency.logo} name={currency.symbol} />
-                        </Box>
-                      ),
-                      inputProps: {
-                        min: 0,
-                        max: MAX_SAFE_AMOUNT,
-                        step: Number(estimateAmount),
+                    slotProps={{
+                      input: {
+                        endAdornment: (
+                          <Box sx={{ ml: 1, display: 'flex', alignItems: 'center' }}>
+                            <Currency logo={currency.logo} name={currency.symbol} />
+                          </Box>
+                        ),
+                        inputProps: {
+                          min: 0,
+                          max: MAX_SAFE_AMOUNT,
+                          step: Number(estimateAmount),
+                        },
                       },
                     }}
                   />
@@ -555,7 +610,13 @@ export default function OverdraftProtectionDialog({
               </Stack>
             )}
             {amount && Number(amount) > 0 && Number(estimateAmount) > 0 && !methods.formState.errors.amount && (
-              <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontSize: 12,
+                  color: 'text.lighter',
+                  mt: '8px !important',
+                }}>
                 {t('customer.overdraftProtection.total', {
                   total: safeAdd(currency, amount, availableAmount),
                   symbol: currency.symbol,
@@ -568,11 +629,21 @@ export default function OverdraftProtectionDialog({
           </Stack>
         ) : (
           Number(availableAmount) > 0 && (
-            <Stack direction="row" alignItems="flex-start" gap={2}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'flex-start',
+                gap: 2,
+              }}>
               <Typography
                 variant="subtitle2"
-                color="text.secondary"
-                sx={{ height: 39, display: 'flex', alignItems: 'center', width: 56 }}>
+                sx={{
+                  color: 'text.secondary',
+                  height: 39,
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: 56,
+                }}>
                 {t('customer.overdraftProtection.stake')}
               </Typography>
               <RadioGroup

package/src/components/drawer-form.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { Livemode, usePaymentContext } from '@blocklet/payment-react';
 import { Close } from '@mui/icons-material';
 import { Box, Button, Divider, Drawer, Stack, Typography } from '@mui/material';
@@ -19,17 +20,19 @@ type Props = {
   footer?: React.ReactNode;
 };
 
-DrawerForm.defaultProps = {
-  style: {},
-  open: false,
-  width: 960,
-  onClose: noop,
-  hideLiveMode: false,
-  footer: null,
-  addons: null,
-};
-
-export default function DrawerForm(props: Props) {
+export default function DrawerForm(rawProps: Props) {
+  const props = Object.assign(
+    {
+      style: {},
+      open: false,
+      width: 960,
+      onClose: noop,
+      hideLiveMode: false,
+      footer: null,
+      addons: null,
+    },
+    rawProps
+  );
   const [open, setOpen] = useState(props.open);
   const settings = usePaymentContext();
   const handleClose = () => {
@@ -58,11 +61,11 @@ export default function DrawerForm(props: Props) {
         disableEscapeKeyDown>
         <Stack
           direction="row"
-          alignItems="center"
-          justifyContent="space-between"
           className="drawer-form-header-wrapper"
-          flexWrap="wrap"
           sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
             pl: 3,
             pr: 3,
             pb: 2,
@@ -70,6 +73,7 @@ export default function DrawerForm(props: Props) {
             gap: 1,
             borderBottom: '1px solid',
             borderColor: 'grey.200',
+
             '@media (max-width: 600px)': {
               '& > .addons-wrapper': {
                 width: '100%',
@@ -80,21 +84,41 @@ export default function DrawerForm(props: Props) {
               },
             },
           }}>
-          <Box flex={1} display="flex" alignItems="center" justifyContent="space-between">
-            <Stack direction="row" alignItems="center">
+          <Box
+            sx={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+              }}>
               <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
                 {props.text}
               </Typography>
               {!settings.livemode && !props.hideLiveMode && <Livemode />}
             </Stack>
-            <Stack direction="row" alignItems="center" justifyContent="space-between">
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}>
               <Close
                 sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
                 onClick={handleClose}
               />
             </Stack>
           </Box>
-          <Box display="flex" alignItems="center" className="addons-wrapper">
+          <Box
+            className="addons-wrapper"
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}>
             {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} className="addons-divider" />}
             {props.addons}
           </Box>

package/src/components/error.tsx

@@ -24,7 +24,7 @@ const Content = styled(Box)`
   text-align: center;
 `;
 
-export default function Error({ error }: { error?: Error }) {
+export default function Error({ error = undefined }: { error?: Error }) {
   const { t } = useLocaleContext();
 
   return (
@@ -34,7 +34,3 @@ export default function Error({ error }: { error?: Error }) {
     </Container>
   );
 }
-
-Error.defaultProps = {
-  error: {},
-};

package/src/components/event/list.tsx

@@ -120,15 +120,7 @@ const getEventDescription = (event: TEventExpanded) => {
   }
 };
 
-EventList.defaultProps = {
-  features: {
-    toolbar: true,
-  },
-  type: '',
-  object_id: '',
-};
-
-export default function EventList({ type, object_id, features }: ListProps) {
+export default function EventList({ type = '', object_id = '', features = { toolbar: true } }: ListProps) {
   const listKey = getListKey({ type, object_id });
   const persisted = getDurableData(listKey);
 
@@ -156,7 +148,14 @@ export default function EventList({ type, object_id, features }: ListProps) {
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('admin.event.empty')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('admin.event.empty')}
+      </Typography>
+    );
   }
 
   const columns = [

package/src/components/filter-toolbar.tsx

@@ -51,7 +51,9 @@ type Props = {
   formatStatus?: (x: string) => string;
 };
 
-export default function FilterToolbar(props: Props) {
+export default function FilterToolbar(rawProps: Props) {
+  const props = Object.assign({}, defaultProps, rawProps);
+  // eslint-disable-next-line react/prop-types
   const { setSearch, search, status, currency, donation, formatStatus = (v) => v } = props;
   const { isMobile } = useMobile();
   const isProduct = window.location.pathname.includes('product');
@@ -74,7 +76,8 @@ export default function FilterToolbar(props: Props) {
         <SearchStatus setSearch={handleSearch} search={search} status={status} formatStatus={formatStatus} />
         {!isMobile && (
           <>
-            {Array.isArray(donation) && donation.length > 0 && (
+            {/* eslint-disable-next-line react/prop-types */}
+            {Array.isArray(donation) && donation?.length > 0 && (
               <SearchDonation setSearch={handleSearch} search={search} donation={donation} />
             )}
             {isProduct ? null : (
@@ -96,26 +99,20 @@ export default function FilterToolbar(props: Props) {
   );
 }
 
-const defaultProps = {
+const defaultProps: Props = {
   search: {},
   status: [],
   currency: false,
   donation: [],
   formatStatus: (v: string) => v,
+  setSearch: () => {},
 };
 
-FilterToolbar.defaultProps = defaultProps;
-SearchStatus.defaultProps = defaultProps;
-SearchCurrency.defaultProps = defaultProps;
-SearchProducts.defaultProps = defaultProps;
-SearchCustomers.defaultProps = defaultProps;
-SearchDonation.defaultProps = defaultProps;
-
 function SearchStatus({
-  status = [],
-  search,
+  status = defaultProps.status,
+  search = defaultProps.search,
   setSearch,
-  formatStatus,
+  formatStatus = defaultProps.formatStatus,
 }: Pick<Props, 'status' | 'search' | 'setSearch' | 'formatStatus'>) {
   const [show, setShow] = useState(null);
   const { t } = useLocaleContext();
@@ -150,7 +147,7 @@ function SearchStatus({
           setShow(null);
         }}
         className="status-options">
-        {status.map((x: any) => (
+        {status?.map((x: any) => (
           <MenuItem
             onClick={(e) => {
               e.stopPropagation();
@@ -179,7 +176,7 @@ function filterCurrency(methods: any) {
   return out;
 }
 
-function SearchCurrency({ setSearch, search }: Pick<Props, 'setSearch' | 'search'>) {
+function SearchCurrency({ setSearch, search = defaultProps.search }: Pick<Props, 'setSearch' | 'search'>) {
   const [show, setShow] = useState(null);
   const { settings } = usePaymentContext();
   const currencies = filterCurrency(settings.paymentMethods);
@@ -234,7 +231,7 @@ function SearchCurrency({ setSearch, search }: Pick<Props, 'setSearch' | 'search
   );
 }
 
-function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'search'>) {
+function SearchCustomers({ setSearch, search = defaultProps.search }: Pick<Props, 'setSearch' | 'search'>) {
   const [customers, setCustomers] = useState<TCustomer[]>([]);
   const [show, setShow] = useState(null);
   const [searchText, setSearchText] = useState('');
@@ -337,7 +334,7 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
   );
 }
 
-function SearchProducts({ setSearch, search }: Pick<Props, 'setSearch' | 'search'>) {
+function SearchProducts({ setSearch, search = defaultProps.search }: Pick<Props, 'setSearch' | 'search'>) {
   const [show, setShow] = useState(null);
   const { products } = useProductsContext();
   const { settings } = usePaymentContext();
@@ -427,7 +424,11 @@ function SearchProducts({ setSearch, search }: Pick<Props, 'setSearch' | 'search
   );
 }
 
-function SearchDonation({ donation = [], search, setSearch }: Pick<Props, 'donation' | 'search' | 'setSearch'>) {
+function SearchDonation({
+  donation = defaultProps.donation,
+  search = defaultProps.search,
+  setSearch,
+}: Pick<Props, 'donation' | 'search' | 'setSearch'>) {
   const [show, setShow] = useState(null);
   const { t } = useLocaleContext();
   return (
@@ -461,7 +462,7 @@ function SearchDonation({ donation = [], search, setSearch }: Pick<Props, 'donat
           setShow(null);
         }}
         className="status-options">
-        {donation.map((x: any) => (
+        {donation?.map((x: any) => (
           <MenuItem
             onClick={(e) => {
               e.stopPropagation();

package/src/components/info-card.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { getWordBreakStyle } from '@blocklet/payment-react';
 import { Avatar, Stack, SxProps, Typography, Tooltip } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
@@ -14,17 +15,31 @@ type Props = {
   tooltip?: string | React.ReactNode;
 };
 
-export default function InfoCard(props: Props) {
+export default function InfoCard(rawProps: Props) {
+  const props = Object.assign(
+    {
+      logo: '',
+      size: 40,
+      variant: 'rounded',
+      sx: {},
+      className: '',
+      logoName: '',
+      tooltip: false,
+    },
+    rawProps
+  );
   const dimensions = { width: props.size, height: props.size, ...props.sx };
   const avatarName = typeof props.name === 'string' ? props.name : props.logo;
 
   const cardContent = (
     <Stack
       direction="row"
-      alignItems="center"
       spacing={1}
       className={`info-card-wrapper ${props.className}`}
-      sx={{ cursor: props.tooltip ? 'pointer' : 'default' }}>
+      sx={{
+        alignItems: 'center',
+        cursor: props.tooltip ? 'pointer' : 'default',
+      }}>
       {props.logo ? (
         <Avatar src={props.logo} alt={props.logoName ?? avatarName} variant={props.variant as any} sx={dimensions} />
       ) : (
@@ -34,18 +49,27 @@ export default function InfoCard(props: Props) {
       )}
       <Stack
         direction="column"
-        alignItems="flex-start"
-        justifyContent="space-around"
         className="info-card"
         sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'space-around',
           wordBreak: getWordBreakStyle(props.name),
           minWidth: 140,
         }}>
-        <Typography variant="body2" color="text.primary" component="div">
+        <Typography
+          variant="body2"
+          component="div"
+          sx={{
+            color: 'text.primary',
+          }}>
           {props.name}
         </Typography>
         {props.description && (
-          <Typography variant="subtitle2" color="text.secondary">
+          <Typography
+            variant="subtitle2"
+            sx={{
+              color: 'text.secondary',
+            }}>
             {props.description}
           </Typography>
         )}
@@ -58,7 +82,7 @@ export default function InfoCard(props: Props) {
       <Tooltip
         title={props.tooltip}
         placement="top-start"
-        componentsProps={{
+        slotProps={{
           tooltip: {
             sx: {
               bgcolor: 'background.paper',
@@ -90,13 +114,3 @@ export default function InfoCard(props: Props) {
 
   return cardContent;
 }
-
-InfoCard.defaultProps = {
-  logo: '',
-  size: 40,
-  variant: 'rounded',
-  sx: {},
-  className: '',
-  logoName: '',
-  tooltip: false,
-};