payment-kit 1.18.56 → 1.19.1

package/src/pages/customer/payout/detail.tsx

@@ -60,12 +60,21 @@ export default function PayoutDetail() {
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
-        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+        <Stack
+          className="page-header"
+          direction="row"
+          sx={{
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
           <Stack
             direction="row"
-            alignItems="center"
-            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
-            onClick={() => goBackOrFallback('/customer/payouts')}>
+            onClick={() => goBackOrFallback('/customer/payouts')}
+            sx={{
+              alignItems: 'center',
+              fontWeight: 'normal',
+              cursor: 'pointer',
+            }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
             <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
               {t('common.previous')}
@@ -82,37 +91,60 @@ export default function PayoutDetail() {
           )}
         </Stack>
         <Box
-          mt={4}
-          mb={3}
           sx={{
+            mt: 4,
+            mb: 3,
             display: 'flex',
+
             gap: {
               xs: 2,
               sm: 2,
               md: 5,
             },
+
             flexWrap: 'wrap',
+
             flexDirection: {
               xs: 'column',
               sm: 'column',
               md: 'row',
             },
+
             alignItems: {
               xs: 'flex-start',
               sm: 'flex-start',
               md: 'center',
             },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center">
-              <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Avatar
                   src={data.paymentCurrency.logo}
                   alt={data.paymentCurrency.symbol}
                   variant="square"
                   sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
                 />
-                <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
+                <Stack
+                  direction="column"
+                  sx={{
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-around',
+                  }}>
                   <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 </Stack>
               </Stack>
@@ -120,18 +152,22 @@ export default function PayoutDetail() {
           </Stack>
           <Stack
             className="section-body"
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
+
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
               },
+
               flexDirection: {
                 xs: 'column',
                 sm: 'column',
                 md: 'row',
               },
+
               alignItems: 'flex-start',
+
               gap: {
                 xs: 1,
                 sm: 1,
@@ -218,7 +254,14 @@ export default function PayoutDetail() {
             },
           },
         }}>
-        <Box flex={1} className="payment-link-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          className="payment-link-column-1"
+          sx={{
+            flex: 1,
+            gap: 2.5,
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
           <Box className="section">
             <SectionHeader title={t('common.detail')} />
             <InfoRowGroup

package/src/pages/customer/recharge/account.tsx

@@ -322,7 +322,13 @@ export default function BalanceRechargePage() {
 
   return (
     <Root>
-      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          position: 'relative',
+        }}>
         <Button
           startIcon={<ArrowBackOutlined />}
           variant="text"
@@ -332,19 +338,27 @@ export default function BalanceRechargePage() {
           {t('common.previous')}
         </Button>
       </Stack>
-
       <Typography variant="h2" gutterBottom>
         {currency?.symbol} {t('customer.recharge.title')}
       </Typography>
-
       {currency && (
         <Box ref={rechargeRef}>
           <Stack sx={{ maxWidth: '760px' }}>
             <Box sx={{ mb: 4 }}>
               <BalanceCard elevation={0}>
-                <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+                <Stack
+                  direction="row"
+                  spacing={2}
+                  sx={{
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}>
                   <Stack spacing={0.5}>
-                    <Typography variant="body2" color="text.secondary">
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: 'text.secondary',
+                      }}>
                       {t('customer.recharge.receiveAddress')}
                     </Typography>
                     <Typography variant="body1" sx={{ wordBreak: 'break-all', fontFamily: 'monospace' }}>
@@ -388,7 +402,12 @@ export default function BalanceRechargePage() {
                       }
                     : undefined,
                 }}>
-                <Stack direction="row" alignItems="center" justifyContent="space-between">
+                <Stack
+                  direction="row"
+                  sx={{
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}>
                   <Stack>
                     <Typography
                       variant="body1"
@@ -420,7 +439,12 @@ export default function BalanceRechargePage() {
             <Stack sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
               <Grid container spacing={2}>
                 {presetAmounts.map(({ amount: presetAmount, label, multiplier }) => (
-                  <Grid item xs={6} sm={3} key={presetAmount}>
+                  <Grid
+                    key={presetAmount}
+                    size={{
+                      xs: 6,
+                      sm: 3,
+                    }}>
                     <Card
                       variant="outlined"
                       sx={{
@@ -456,7 +480,12 @@ export default function BalanceRechargePage() {
                           {formatNumber(presetAmount)} {currency.symbol}
                         </Typography>
                         {multiplier > 0 && label && (
-                          <Typography variant="caption" align="center" color="text.secondary">
+                          <Typography
+                            variant="caption"
+                            align="center"
+                            sx={{
+                              color: 'text.secondary',
+                            }}>
                             {label}
                           </Typography>
                         )}
@@ -464,7 +493,11 @@ export default function BalanceRechargePage() {
                     </Card>
                   </Grid>
                 ))}
-                <Grid item xs={6} sm={3}>
+                <Grid
+                  size={{
+                    xs: 6,
+                    sm: 3,
+                  }}>
                   <Card
                     variant="outlined"
                     sx={{
@@ -488,7 +521,13 @@ export default function BalanceRechargePage() {
                         : {}),
                     }}>
                     <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 1 }}>
-                      <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
+                      <Stack
+                        direction="row"
+                        spacing={1}
+                        sx={{
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}>
                         <Typography
                           variant="h6"
                           align="center"
@@ -513,18 +552,26 @@ export default function BalanceRechargePage() {
                   error={!!amountError}
                   helperText={amountError}
                   onChange={handleAmountChange}
-                  InputProps={{
-                    endAdornment: <Typography>{currency.symbol}</Typography>,
-                    autoComplete: 'off',
-                    inputProps: {
+                  inputRef={customInputRef}
+                  autoComplete="off"
+                  slotProps={{
+                    input: {
+                      endAdornment: <Typography>{currency.symbol}</Typography>,
+                    },
+                    htmlInput: {
                       min: 0,
                       max: MAX_SAFE_AMOUNT,
                     },
                   }}
-                  inputRef={customInputRef}
                 />
                 {amount && Number(amount) > 0 && Number(unitCycle.amount) > 0 && !amountError && (
-                  <Typography variant="body2" sx={{ color: 'text.lighter', mt: 1 }} fontSize={12}>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontSize: 12,
+                      color: 'text.lighter',
+                      mt: 1,
+                    }}>
                     {t('common.estimatedDuration', {
                       duration: formatSmartDuration(
                         Math.floor(Number(amount) / Number(unitCycle.amount)) < 1
@@ -568,12 +615,25 @@ export default function BalanceRechargePage() {
 
               <Grid container spacing={2}>
                 {relatedSubscriptions.map((subscription) => (
-                  <Grid item xs={12} sm={6} md={4} lg={3} key={subscription.id}>
+                  <Grid
+                    key={subscription.id}
+                    size={{
+                      xs: 12,
+                      sm: 6,
+                      md: 4,
+                      lg: 3,
+                    }}>
                     <Stack
                       onClick={() => handleSubscriptionClick(subscription.id)}
                       className="base-card"
                       sx={{ height: '100%' }}>
-                      <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1 }}>
+                      <Stack
+                        direction="row"
+                        spacing={1.5}
+                        sx={{
+                          alignItems: 'center',
+                          mb: 1,
+                        }}>
                         <Typography
                           variant="subtitle1"
                           sx={{

package/src/pages/customer/recharge/subscription.tsx

@@ -254,12 +254,21 @@ export default function RechargePage() {
 
   return (
     <Root>
-      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          position: 'relative',
+        }}>
         <Stack
           direction="row"
           onClick={() => goBackOrFallback('/customer')}
-          alignItems="center"
-          sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
+          sx={{
+            alignItems: 'center',
+            fontWeight: 'normal',
+            cursor: 'pointer',
+          }}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
             {t('common.previous')}
@@ -269,7 +278,6 @@ export default function RechargePage() {
           {t('customer.recharge.view')}
         </Button>
       </Stack>
-
       <Box>
         <Box
           sx={{
@@ -279,15 +287,26 @@ export default function RechargePage() {
             flexDirection: { xs: 'column', sm: 'column', md: 'row' },
             alignItems: { xs: 'flex-start', sm: 'flex-start', md: 'center' },
           }}>
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <Stack direction="row" alignItems="center" flexWrap="wrap" gap={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               <SubscriptionDescription subscription={subscription} variant="h1" />
             </Stack>
           </Stack>
           <Stack
-            justifyContent="flex-start"
-            flexWrap="wrap"
             sx={{
+              justifyContent: 'flex-start',
+              flexWrap: 'wrap',
               flexDirection: { xs: 'column', sm: 'column', md: 'row' },
               alignItems: { xs: 'flex-start', sm: 'flex-start', md: 'center' },
               gap: { xs: 1, sm: 1, md: 3 },
@@ -341,7 +360,6 @@ export default function RechargePage() {
         </Box>
       </Box>
       <Divider />
-
       <Box sx={{ maxWidth: 600 }} ref={rechargeRef}>
         <Typography variant="h4" gutterBottom>
           {t('customer.recharge.title')}
@@ -373,8 +391,16 @@ export default function RechargePage() {
                     }
                   : undefined,
               }}>
-              <Stack direction="row" alignItems="center" spacing={1}>
-                <Stack flex={1}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
+                <Stack
+                  sx={{
+                    flex: 1,
+                  }}>
                   <Typography
                     variant="body1"
                     color="inherit"
@@ -402,7 +428,12 @@ export default function RechargePage() {
             <Stack sx={{ mb: 2, mt: 2, backgroundColor: 'background.default' }}>
               <Grid container spacing={2}>
                 {presetAmounts.map(({ amount: presetAmount, cycles }) => (
-                  <Grid item xs={6} sm={4} key={presetAmount}>
+                  <Grid
+                    key={presetAmount}
+                    size={{
+                      xs: 6,
+                      sm: 4,
+                    }}>
                     <Card
                       variant="outlined"
                       sx={{
@@ -421,7 +452,14 @@ export default function RechargePage() {
                           : {}),
                       }}>
                       <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%' }}>
-                        <Stack direction="column" sx={{ p: 1 }} spacing={1} alignItems="center" justifyContent="center">
+                        <Stack
+                          direction="column"
+                          spacing={1}
+                          sx={{
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            p: 1,
+                          }}>
                           <Typography
                             variant="h6"
                             sx={{
@@ -430,7 +468,11 @@ export default function RechargePage() {
                             }}>
                             {presetAmount} {subscription.paymentCurrency.symbol}
                           </Typography>
-                          <Typography variant="caption" color="text.secondary">
+                          <Typography
+                            variant="caption"
+                            sx={{
+                              color: 'text.secondary',
+                            }}>
                             {formatEstimatedDuration(cycles)}
                           </Typography>
                         </Stack>
@@ -438,7 +480,11 @@ export default function RechargePage() {
                     </Card>
                   </Grid>
                 ))}
-                <Grid item xs={6} sm={4}>
+                <Grid
+                  size={{
+                    xs: 6,
+                    sm: 4,
+                  }}>
                   <Card
                     variant="outlined"
                     sx={{
@@ -455,7 +501,14 @@ export default function RechargePage() {
                       ...(customAmount ? { borderColor: 'primary.main', borderWidth: 1 } : {}),
                     }}>
                     <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%' }}>
-                      <Stack direction="column" sx={{ p: 1 }} spacing={1} alignItems="center" justifyContent="center">
+                      <Stack
+                        direction="column"
+                        spacing={1}
+                        sx={{
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          p: 1,
+                        }}>
                         <Typography
                           variant="h6"
                           sx={{ fontWeight: 600, color: customAmount ? 'primary.main' : 'text.primary' }}>
@@ -479,19 +532,27 @@ export default function RechargePage() {
                   error={!!amountError}
                   helperText={amountError}
                   onChange={handleAmountChange}
-                  InputProps={{
-                    endAdornment: <Typography>{subscription.paymentCurrency.symbol}</Typography>,
-                    autoComplete: 'off',
-                    inputProps: {
-                      min: 0,
-                      max: MAX_SAFE_AMOUNT,
-                    },
-                  }}
                   sx={{ mt: 1 }}
                   inputRef={customInputRef}
+                  slotProps={{
+                    input: {
+                      endAdornment: <Typography>{subscription.paymentCurrency.symbol}</Typography>,
+                      autoComplete: 'off',
+                      inputProps: {
+                        min: 0,
+                        max: MAX_SAFE_AMOUNT,
+                      },
+                    },
+                  }}
                 />
                 {amount && Number(amount) > 0 && Number(cycleAmount) > 0 && !amountError && (
-                  <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontSize: 12,
+                      color: 'text.lighter',
+                      mt: '8px !important',
+                    }}>
                     {formatEstimatedDuration(
                       Math.floor(Number(amount) / Number(cycleAmount)) < 1
                         ? parseFloat((Number(amount) / Number(cycleAmount)).toFixed(1))

package/src/pages/customer/refund/list.tsx

@@ -72,8 +72,12 @@ const RefundTable = memo(({ invoice_id }: Props) => {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
           return (
-            <Typography component="strong" fontWeight={600}>
-              {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
+            <Typography
+              component="strong"
+              sx={{
+                fontWeight: 600,
+              }}>
+              {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}
               {item?.paymentCurrency.symbol}
             </Typography>
           );
@@ -228,7 +232,14 @@ const RefundList = memo(({ invoice_id }: Props) => {
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.refund.empty')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('payment.customer.refund.empty')}
+      </Typography>
+    );
   }
 
   const hasMore = data && data.list.length < data.count;
@@ -236,7 +247,12 @@ const RefundList = memo(({ invoice_id }: Props) => {
   const grouped = groupByDate(data.list);
 
   return (
-    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+    <Stack
+      direction="column"
+      sx={{
+        gap: 1,
+        mt: 1,
+      }}>
       {Object.entries(grouped).map(([date, payments]) => (
         <Box key={date}>
           <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
@@ -248,31 +264,53 @@ const RefundList = memo(({ invoice_id }: Props) => {
                   xs: 'column',
                   sm: 'row',
                 }}
-                sx={{ my: 1 }}
-                gap={{
-                  xs: 0.5,
-                  sm: 1.5,
-                  md: 3,
-                }}
-                flexWrap="nowrap">
-                <Box flex={3}>
+                sx={{
+                  gap: {
+                    xs: 0.5,
+                    sm: 1.5,
+                    md: 3,
+                  },
+
+                  flexWrap: 'nowrap',
+                  my: 1,
+                }}>
+                <Box
+                  sx={{
+                    flex: 3,
+                  }}>
                   <Typography>{formatToDate(item.created_at)}</Typography>
                 </Box>
-                <Box flex={2}>
-                  <Typography textAlign="right">
+                <Box
+                  sx={{
+                    flex: 2,
+                  }}>
+                  <Typography
+                    sx={{
+                      textAlign: 'right',
+                    }}>
                     {formatBNStr(item.amount, item.paymentCurrency.decimal)}&nbsp;
                     {item.paymentCurrency.symbol}
                   </Typography>
                 </Box>
-                <Box flex={3}>
+                <Box
+                  sx={{
+                    flex: 3,
+                  }}>
                   <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
                 </Box>
-                <Box flex={3}>
+                <Box
+                  sx={{
+                    flex: 3,
+                  }}>
                   <Typography>
                     {item.description ? capitalize(toLower(item.description.replace(/_/g, ' '))) : '-'}
                   </Typography>
                 </Box>
-                <Box flex={3} sx={{ minWidth: '220px' }}>
+                <Box
+                  sx={{
+                    flex: 3,
+                    minWidth: '220px',
+                  }}>
                   {(item.payment_details?.arcblock?.tx_hash ||
                     item.payment_details?.ethereum?.tx_hash ||
                     item.payment_details?.base?.tx_hash) && (
@@ -293,7 +331,10 @@ const RefundList = memo(({ invoice_id }: Props) => {
           </Button>
         )}
         {!hasMore && data.count > pageSize && (
-          <Typography color="text.secondary">
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
             {t('common.noMore', { resource: t('payment.customer.payments') })}
           </Typography>
         )}
@@ -302,14 +343,9 @@ const RefundList = memo(({ invoice_id }: Props) => {
   );
 });
 
-export default function CustomerRefundList(props: Props & { type?: 'table' | 'list' }) {
-  const { type, ...restProps } = props;
+export default function CustomerRefundList({ type = 'list', ...restProps }: Props & { type?: 'table' | 'list' }) {
   if (type === 'table') {
     return <RefundTable {...restProps} />;
   }
   return <RefundList {...restProps} />;
 }
-
-CustomerRefundList.defaultProps = {
-  type: 'list',
-};