payment-kit 1.18.56 → 1.19.0

package/src/components/info-metric.tsx

@@ -10,15 +10,28 @@ type Props = {
   divider?: boolean;
 };
 
-export default function InfoMetric(props: Props) {
+export default function InfoMetric(rawProps: Props) {
+  const props = Object.assign(
+    {
+      tip: '',
+      divider: false,
+    },
+    rawProps
+  );
+
   const { t } = useLocaleContext();
+  // eslint-disable-next-line react/prop-types
   const isNone = isEmptyExceptNumber(props.value);
   return (
     <>
       <Stack direction="column" alignItems="flex-start">
         <Typography component="div" variant="subtitle2" mb={1} color="text.primary">
+          {/* eslint-disable-next-line react/prop-types */}
           {props.label}
+          {/* eslint-disable-next-line react/prop-types */}
+          {/* eslint-disable-next-line react/prop-types */}
           {!!props.tip && (
+            // eslint-disable-next-line react/prop-types
             <Tooltip title={props.tip}>
               <InfoOutlined fontSize="small" />
             </Tooltip>
@@ -29,15 +42,12 @@ export default function InfoMetric(props: Props) {
           variant="body1"
           color={isNone ? 'text.disabled' : 'text.secondary'}
           sx={{ width: '100%', minHeight: '24px' }}>
+          {/* eslint-disable-next-line react/prop-types */}
           {isNone ? t('common.none') : props.value}
         </Typography>
       </Stack>
+      {/* eslint-disable-next-line react/prop-types */}
       {props.divider && <Divider orientation="vertical" flexItem />}
     </>
   );
 }
-
-InfoMetric.defaultProps = {
-  tip: '',
-  divider: false,
-};

package/src/components/info-row-group.tsx

@@ -98,7 +98,7 @@ function InfoRowGroup({ children, loading = false, skeletonHeight = 24, sx = {}
             },
           },
         };
-        return cloneElement(child as ReactElement, childProps);
+        return cloneElement(child as ReactElement<any>, childProps);
       }
       return child;
     });
@@ -113,10 +113,4 @@ function InfoRowGroup({ children, loading = false, skeletonHeight = 24, sx = {}
   );
 }
 
-InfoRowGroup.defaultProps = {
-  loading: false,
-  skeletonHeight: 24,
-  sx: {},
-};
-
 export default InfoRowGroup;

package/src/components/info-row.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Stack, SxProps } from '@mui/material';
 import { useContext } from 'react';
@@ -16,16 +17,18 @@ type Props = {
   showLabel?: boolean;
 };
 
-InfoRow.defaultProps = {
-  value: undefined,
-  sizes: [1, 3],
-  alignItems: 'center',
-  direction: 'row',
-  sx: {},
-  showLabel: true,
-};
-
-export default function InfoRow(props: Props) {
+export default function InfoRow(rawProps: Props) {
+  const props = Object.assign(
+    {
+      value: undefined,
+      sizes: [1, 3],
+      alignItems: 'center',
+      direction: 'row',
+      sx: {},
+      showLabel: true,
+    },
+    rawProps
+  );
   const { t } = useLocaleContext();
   const isNone = isEmptyExceptNumber(props.value);
   const sizes = props.sizes || [1, 3];
@@ -33,31 +36,33 @@ export default function InfoRow(props: Props) {
   return (
     <Stack
       direction={props.direction || 'row'}
-      alignItems={props.alignItems}
-      justifyContent="space-between"
-      flexWrap="wrap"
-      gap={1}
+      className="info-row-wrapper"
       sx={{
+        alignItems: props.alignItems,
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        gap: 1,
         mb: 2,
         ...props.sx,
+
         a: {
           color: 'text.link',
         },
-      }}
-      className="info-row-wrapper">
+      }}>
       {props.showLabel && (
         <Box
-          flex={sizes[0]}
           className="info-row-label"
-          color="text.primary"
-          fontSize={14}
           sx={{
+            color: 'text.primary',
+            fontSize: 14,
             flex: props.direction === 'column' ? 'none' : sizes[0],
             mb: props.direction === 'column' ? 0.5 : 0,
+
             ...(inGroup && {
               flex: 'none',
               whiteSpace: 'nowrap',
             }),
+
             fontWeight: {
               xs: 500,
               md: 400,
@@ -66,13 +71,14 @@ export default function InfoRow(props: Props) {
           {props.label}
         </Box>
       )}
-
       <Box
-        flex={sizes[1]}
-        color={isNone ? 'text.disabled' : 'text.secondary'}
         className="info-row-value"
-        fontSize={14}
-        sx={{ wordBreak: getWordBreakStyle(props.value) }}>
+        sx={{
+          flex: sizes[1],
+          color: isNone ? 'text.disabled' : 'text.secondary',
+          fontSize: 14,
+          wordBreak: getWordBreakStyle(props.value),
+        }}>
         {isNone ? t('common.none') : props.value}
       </Box>
     </Stack>

package/src/components/invoice/action.tsx

@@ -17,17 +17,11 @@ type Props = {
   mode?: 'admin' | 'customer';
 };
 
-InvoiceActions.defaultProps = {
-  variant: 'compact',
-
-  mode: 'admin',
-};
-
 const fetchStakingData = (id: string): Promise<{ value: string }> => {
   return api.get(`/api/invoices/${id}/return-stake`).then((res: any) => res.data);
 };
 
-export default function InvoiceActions({ data, variant, onChange, mode }: Props) {
+export default function InvoiceActions({ data, variant = 'compact', onChange, mode = 'admin' }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const [state, setState] = useSetState({

package/src/components/invoice/list.tsx

@@ -73,21 +73,6 @@ const getListKey = (props: ListProps) => {
   return 'invoices';
 };
 
-InvoiceList.defaultProps = {
-  features: {
-    customer: true,
-    filter: true,
-  },
-  customer_id: '',
-  subscription_id: '',
-  status: '',
-  include_staking: false,
-  include_return_staking: false,
-  ignore_zero: false,
-
-  mode: 'admin',
-};
-
 const getInvoiceLink = (invoice: TInvoiceExpanded) => {
   if (invoice.id.startsWith('in_')) {
     return {
@@ -116,14 +101,17 @@ function InvoiceLink({ invoice, children }: { invoice: TInvoiceExpanded; childre
 }
 
 export default function InvoiceList({
-  customer_id,
-  subscription_id,
-  features,
-  status,
-  include_staking,
-  include_return_staking,
-  ignore_zero,
-  mode,
+  customer_id = '',
+  subscription_id = '',
+  features = {
+    customer: true,
+    filter: true,
+  },
+  status = '',
+  include_staking = false,
+  include_return_staking = false,
+  ignore_zero = false,
+  mode = 'admin',
 }: ListProps) {
   const listKey = getListKey({ customer_id, subscription_id });
 
@@ -176,8 +164,10 @@ export default function InvoiceList({
             <InvoiceLink invoice={item}>
               <Typography
                 component="strong"
-                fontWeight={600}
-                sx={{ textDecoration: item.status === 'void' ? 'line-through' : 'none' }}>
+                sx={{
+                  fontWeight: 600,
+                  textDecoration: item.status === 'void' ? 'line-through' : 'none',
+                }}>
                 {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
                 {item?.paymentCurrency.symbol}
               </Typography>

package/src/components/invoice/recharge.tsx

@@ -77,16 +77,14 @@ const getListKey = (props: ListProps) => {
   return 'invoices';
 };
 
-RechargeList.defaultProps = {
-  features: {
+export default function RechargeList({
+  currency_id = '',
+  subscription_id = '',
+  features = {
     customer: true,
     filter: true,
   },
-  currency_id: '',
-  subscription_id: '',
-};
-
-export default function RechargeList({ currency_id, subscription_id, features }: ListProps) {
+}: ListProps) {
   const listKey = getListKey({ currency_id, subscription_id });
 
   const { t, locale } = useLocaleContext();

package/src/components/invoice/table.tsx

@@ -119,7 +119,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
   };
 }
 
-export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props) {
+export default function InvoiceTable({ invoice, simple = false, emptyNodeText = '' }: Props) {
   const { t, locale } = useLocaleContext();
   const { detail, summary } = getInvoiceRows(invoice);
   const [state, setState] = useSetState({
@@ -163,15 +163,16 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
             <Stack
               direction="row"
               spacing={0.5}
-              alignItems="center"
+              onClick={() => onOpenUsageRecords(item)}
               sx={{
+                alignItems: 'center',
                 cursor: 'pointer',
+
                 justifyContent: {
                   xs: 'flex-start',
                   md: 'flex-end',
                 },
-              }}
-              onClick={() => onOpenUsageRecords(item)}>
+              }}>
               <Typography component="span">{item.quantity}</Typography>
               {!!item.rawQuantity && (
                 <Tooltip
@@ -268,17 +269,26 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
           }}>
           {summary.map((line) => (
             <Box key={line.key}>
-              <Typography component="span" variant="body1" color="text.secondary">
+              <Typography
+                component="span"
+                variant="body1"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t(line.key)}:&nbsp;
               </Typography>
-              <Typography component="span" variant="body1" color="text.primary">
+              <Typography
+                component="span"
+                variant="body1"
+                sx={{
+                  color: 'text.primary',
+                }}>
                 {line.value}
               </Typography>
             </Box>
           ))}
         </Stack>
       )}
-
       {state.subscriptionId && state.subscriptionItemId && (
         <UsageRecordDialog
           subscriptionId={state.subscriptionId}
@@ -294,11 +304,6 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
   );
 }
 
-InvoiceTable.defaultProps = {
-  simple: false,
-  emptyNodeText: '',
-};
-
 const Root = styled(Box)`
   .invoice-summary {
     padding-right: 16px;

package/src/components/layout/user.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { PaymentProvider } from '@blocklet/payment-react';
-import { UserCenter } from '@blocklet/ui-react';
+import { UserCenter } from '@blocklet/ui-react/lib/UserCenter';
 import { useEffect } from 'react';
 
 import { useSearchParams } from 'react-router-dom';

package/src/components/metadata/form.tsx

@@ -6,8 +6,8 @@ import { useEffect, useRef } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
 export default function MetadataForm({
-  title,
-  actions,
+  title = undefined,
+  actions = null,
   minHeight = 'auto',
 }: {
   title?: string;
@@ -60,11 +60,13 @@ export default function MetadataForm({
         {metadata.fields.map((meta, index) => (
           <Stack
             key={meta.id}
-            mt={2}
             spacing={2}
             direction="row"
-            alignItems="flex-end"
-            ref={index === metadata.fields.length - 1 ? lastItemRef : null}>
+            ref={index === metadata.fields.length - 1 ? lastItemRef : null}
+            sx={{
+              mt: 2,
+              alignItems: 'flex-end',
+            }}>
             <Stack direction="row" spacing={2} sx={{ flex: 1 }}>
               <FormInput
                 sx={{ flex: 1 }}
@@ -120,9 +122,13 @@ export default function MetadataForm({
           </Stack>
         ))}
       </Stack>
-
       <Divider />
-      <Stack mt={metadata.fields.length ? 2 : 1} direction="row" justifyContent="space-between">
+      <Stack
+        direction="row"
+        sx={{
+          mt: metadata.fields.length ? 2 : 1,
+          justifyContent: 'space-between',
+        }}>
         <Button size="small" variant="outlined" color="primary" onClick={() => metadata.append({ key: '', value: '' })}>
           <AddOutlined fontSize="small" /> {t('common.metadata.add')}
         </Button>
@@ -131,9 +137,3 @@ export default function MetadataForm({
     </Box>
   );
 }
-
-MetadataForm.defaultProps = {
-  title: true,
-  actions: null,
-  minHeight: 'auto',
-};

package/src/components/metadata/list.tsx

@@ -11,17 +11,25 @@ export default function MetadataList({
   handleEditMetadata = () => {},
 }: {
   data: any;
-  handleEditMetadata: () => void;
+  handleEditMetadata?: () => void;
 }) {
   const { t } = useLocaleContext();
 
   if (isEmpty(data)) {
     return (
       <Box sx={{ textAlign: 'center' }}>
-        <Typography variant="subtitle1" color="text.primary">
+        <Typography
+          variant="subtitle1"
+          sx={{
+            color: 'text.primary',
+          }}>
           {t('common.metadata.empty')}
         </Typography>
-        <Typography variant="body2" color="text.lighter">
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.lighter',
+          }}>
           {t('common.metadata.emptyTip')}
         </Typography>
         <Button sx={{ color: 'text.link' }} onClick={handleEditMetadata}>

package/src/components/passport/actions.tsx

@@ -11,11 +11,14 @@ type Props = {
   variant?: string;
 };
 
-PassportActions.defaultProps = {
-  variant: 'compact',
-};
+export default function PassportActions(rawProps: Props) {
+  const props = Object.assign(
+    {
+      variant: 'compact',
+    },
+    rawProps
+  );
 
-export default function PassportActions(props: Props) {
   const { t } = useLocaleContext();
 
   const [state, setState] = useSetState({
@@ -26,6 +29,7 @@ export default function PassportActions(props: Props) {
   const onUnassign = async () => {
     try {
       setState({ loading: true });
+      // eslint-disable-next-line react/prop-types
       await api.delete(`/api/passports/assign/${props.data.name}`).then((res) => res.data);
       Toast.success(t('common.saved'));
     } catch (err) {
@@ -46,6 +50,7 @@ export default function PassportActions(props: Props) {
 
   return (
     <ClickBoundary>
+      {/* eslint-disable-next-line react/prop-types */}
       <Actions variant={props.variant} actions={actions} />
       {state.action === 'unassign' && (
         <ConfirmDialog

package/src/components/payment-currency/add.tsx

@@ -179,8 +179,17 @@ export default function PaymentCurrencyAdd({
                     }}
                   />
                   <Stack>
-                    <Typography fontWeight={500}>{option.name}</Typography>
-                    <Typography variant="caption" color="text.secondary">
+                    <Typography
+                      sx={{
+                        fontWeight: 500,
+                      }}>
+                      {option.name}
+                    </Typography>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                      }}>
                       {option.symbol}
                     </Typography>
                   </Stack>
@@ -189,7 +198,11 @@ export default function PaymentCurrencyAdd({
               isOptionEqualToValue={(option, value) => option.address === value.address}
             />
             <Divider sx={{ my: 3 }}>
-              <Typography variant="caption" color="text.secondary">
+              <Typography
+                variant="caption"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t('admin.paymentCurrency.orManualInput')}
               </Typography>
             </Divider>

package/src/components/payment-currency/form.tsx

@@ -10,10 +10,6 @@ type TPaymentCurrencyFormProps = {
   disableKeys?: string[];
 };
 
-PaymentCurrencyForm.defaultProps = {
-  disableKeys: [],
-};
-
 export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurrencyFormProps) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
@@ -29,7 +25,12 @@ export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurren
   };
 
   return (
-    <Stack direction="column" alignItems="flex-start" spacing={2}>
+    <Stack
+      direction="column"
+      spacing={2}
+      sx={{
+        alignItems: 'flex-start',
+      }}>
       <FormInput
         key="name"
         name="name"
@@ -58,7 +59,12 @@ export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurren
         disabled={disableKeys.includes('contract')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} />
       </Stack>
     </Stack>

package/src/components/payment-intent/actions.tsx

@@ -27,13 +27,6 @@ type Props = {
   onChange: (action: string) => void;
 };
 
-PaymentIntentActionsInner.defaultProps = {
-  variant: 'compact',
-};
-PaymentIntentActions.defaultProps = {
-  variant: 'compact',
-};
-
 const fetchRefundData = (id: string) => {
   return api.get(`/api/payment-intents/${id}/refundable-amount`).then((res) => res.data);
 };
@@ -64,7 +57,13 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
     return true;
   };
   return (
-    <Stack direction="column" spacing={1} alignItems="flex-start" sx={{ width: 400 }}>
+    <Stack
+      direction="column"
+      spacing={1}
+      sx={{
+        alignItems: 'flex-start',
+        width: 400,
+      }}>
       <Controller
         name="refund.reason"
         control={control}
@@ -103,7 +102,6 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
           </RadioGroup>
         )}
       />
-
       <FormControl fullWidth component="fieldset" variant="outlined">
         <Controller
           name="refund.amount"
@@ -121,8 +119,10 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
               placeholder={t('admin.paymentIntent.refundForm.amount')}
               error={!!(errors as any)?.refund?.amount}
               helperText={(errors as any)?.refund?.amount?.message}
-              InputProps={{
-                endAdornment: <InputAdornment position="end">{data.paymentCurrency.symbol}</InputAdornment>,
+              slotProps={{
+                input: {
+                  endAdornment: <InputAdornment position="end">{data.paymentCurrency.symbol}</InputAdornment>,
+                },
               }}
             />
           )}
@@ -135,7 +135,6 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
           })}
         </FormHelperText>
       </FormControl>
-
       <Controller
         name="refund.description"
         control={control}
@@ -155,8 +154,10 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
             placeholder={t('admin.paymentIntent.refundForm.description')}
             error={!!(errors as any)?.refund?.description}
             helperText={(errors as any)?.refund?.description?.message}
-            inputProps={{
-              maxLength: 200,
+            slotProps={{
+              htmlInput: {
+                maxLength: 200,
+              },
             }}
           />
         )}
@@ -165,7 +166,7 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
   );
 }
 
-export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
+export function PaymentIntentActionsInner({ data, variant = 'compact', onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const { reset, getValues, setValue, handleSubmit } = useFormContext();
@@ -262,7 +263,14 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
   );
 }
 
-export default function PaymentIntentActions(props: Props) {
+export default function PaymentIntentActions(rawProps: Props) {
+  const props = Object.assign(
+    {
+      variant: 'compact',
+    },
+    rawProps
+  );
+
   const methods = useForm({
     mode: 'onChange',
     defaultValues: {

package/src/components/payment-intent/list.tsx

@@ -66,16 +66,14 @@ const getListKey = (props: ListProps) => {
   return 'payments';
 };
 
-PaymentList.defaultProps = {
-  features: {
+export default function PaymentList({
+  customer_id = '',
+  invoice_id = '',
+  features = {
     customer: true,
     filter: true,
   },
-  customer_id: '',
-  invoice_id: '',
-};
-
-export default function PaymentList({ customer_id, invoice_id, features }: ListProps) {
+}: ListProps) {
   const { t } = useLocaleContext();
 
   const listKey = getListKey({ customer_id, invoice_id });
@@ -120,7 +118,12 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
           const highlight = item.amount_received === '0' && item.status !== 'canceled';
           return (
             <Link to={`/admin/payments/${item.id}`}>
-              <Typography component="strong" sx={{ color: highlight ? 'warning.main' : 'inherit' }} fontWeight={600}>
+              <Typography
+                component="strong"
+                sx={{
+                  fontWeight: 600,
+                  color: highlight ? 'warning.main' : 'inherit',
+                }}>
                 {formatBNStr(
                   item.amount_received === '0' ? item.amount : item.amount_received,
                   item?.paymentCurrency.decimal