payment-kit 1.18.55 → 1.19.0

package/src/pages/admin/products/products/detail.tsx

@@ -134,12 +134,21 @@ export default function ProductDetail(props: { id: string }) {
             {t('admin.product.locked')}
           </Alert>
         )}
-        <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('/admin/products')}>
+            onClick={() => goBackOrFallback('/admin/products')}
+            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('admin.products')}
@@ -148,37 +157,64 @@ export default function ProductDetail(props: { id: string }) {
           <ProductActions data={data} onChange={onChange} variant="normal" />
         </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" spacing={1}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               {data.images.length > 0 && (
                 <Avatar src={data.images[0]} alt={data.name} variant="square" sx={{ width: '52px', height: '52px' }} />
               )}
-              <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Typography variant="h2" color="text.primary">
+              <Stack
+                direction="column"
+                sx={{
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-around',
+                }}>
+                <Typography
+                  variant="h2"
+                  sx={{
+                    color: 'text.primary',
+                  }}>
                   {data.name}
                 </Typography>
-                <Typography variant="subtitle1" color="text.lighter">
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    color: 'text.lighter',
+                  }}>
                   {formatProductPrice(data as any, defaultCurrency, locale)}
                 </Typography>
               </Stack>
@@ -186,18 +222,22 @@ export default function ProductDetail(props: { id: string }) {
           </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,
@@ -210,7 +250,6 @@ export default function ProductDetail(props: { id: string }) {
         </Box>
         <Divider />
       </Box>
-
       <Stack
         sx={{
           flexDirection: {
@@ -239,7 +278,14 @@ export default function ProductDetail(props: { id: string }) {
             },
           },
         }}>
-        <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" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')}>
               <Button
@@ -295,7 +341,11 @@ export default function ProductDetail(props: { id: string }) {
                       sx={{ width: '160px', height: '160px' }}
                     />
                   ) : (
-                    <Typography variant="body2" color="text.lighter">
+                    <Typography
+                      variant="body2"
+                      sx={{
+                        color: 'text.lighter',
+                      }}>
                       {t('empty.image')}
                     </Typography>
                   )
@@ -350,7 +400,12 @@ export default function ProductDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader
               title={
-                <Stack direction="row" alignItems="center" spacing={1}>
+                <Stack
+                  direction="row"
+                  spacing={1}
+                  sx={{
+                    alignItems: 'center',
+                  }}>
                   <Typography
                     variant="h3"
                     sx={{

package/src/pages/admin/settings/index.tsx

@@ -41,7 +41,14 @@ export default function SettingsIndex() {
 
   return (
     <>
-      <Stack direction="row" alignItems="flex-start" justifyContent="end" flexWrap="wrap" spacing={1}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+        }}>
         {/* @ts-ignore */}
         <Tabs
           // @ts-ignore

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -99,7 +99,13 @@ function EditApiHost({ method }: { method: TPaymentMethodExpanded }) {
     <InfoRow
       label={t('admin.paymentMethod.arcblock.api_host.label')}
       value={
-        <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: 'center',
+            flexWrap: 'wrap',
+          }}>
           {edit ? (
             <>
               <TextField
@@ -118,12 +124,14 @@ function EditApiHost({ method }: { method: TPaymentMethodExpanded }) {
                 sx={{ flex: 1 }}
                 placeholder={t('admin.paymentMethod.arcblock.api_host.tip')}
                 error={!!error}
-                InputProps={{
-                  endAdornment: error ? (
-                    <Typography color="error" sx={{ whiteSpace: 'nowrap' }}>
-                      {error}
-                    </Typography>
-                  ) : undefined,
+                slotProps={{
+                  input: {
+                    endAdornment: error ? (
+                      <Typography color="error" sx={{ whiteSpace: 'nowrap' }}>
+                        {error}
+                      </Typography>
+                    ) : undefined,
+                  },
                 }}
               />
               <IconButton onClick={handleSave} size="small">
@@ -168,7 +176,12 @@ function RpcStatus({ method }: { method: TPaymentMethodExpanded }) {
       return (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
           <CircularProgress size={14} />
-          <Typography color="text.secondary">{t('admin.paymentMethod.evm.checking')}</Typography>
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
+            {t('admin.paymentMethod.evm.checking')}
+          </Typography>
         </Box>
       );
     }
@@ -176,7 +189,12 @@ function RpcStatus({ method }: { method: TPaymentMethodExpanded }) {
       return (
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
           <CheckCircleOutline sx={{ fontSize: 14 }} color="success" />
-          <Typography color="text.secondary">{t('admin.paymentMethod.evm.connected')}</Typography>
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
+            {t('admin.paymentMethod.evm.connected')}
+          </Typography>
         </Box>
       );
     }
@@ -237,7 +255,12 @@ function Balance({
       <InfoRow label={t('admin.paymentMethod.props.explorer_host')} value={explorerHost} />
       <InfoRow
         label={
-          <Box display="flex" alignItems="center" gap={0.5}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}>
             {t('admin.paymentMethod.props.balance')}
             {['ethereum', 'base'].includes(method.type) && (
               <Tooltip
@@ -255,8 +278,8 @@ function Balance({
         value={
           <Stack
             direction="row"
-            alignItems="center"
             sx={{
+              alignItems: 'center',
               display: 'inline-flex',
               borderRadius: 1,
             }}>
@@ -302,8 +325,19 @@ function PaymentMethodSkeleton() {
   return (
     <>
       {[1].map((group) => (
-        <Box key={group} mt={3}>
-          <Stack direction="row" alignItems="center" mb={1} flexWrap="wrap" gap={1}>
+        <Box
+          key={group}
+          sx={{
+            mt: 3,
+          }}>
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              mb: 1,
+              flexWrap: 'wrap',
+              gap: 1,
+            }}>
             <Skeleton variant="text" width={120} height={32} />
           </Stack>
           <Box
@@ -314,8 +348,19 @@ function PaymentMethodSkeleton() {
               borderColor: 'divider',
               mb: 1,
             }}>
-            <Stack direction="row" justifyContent="space-between" alignItems="center">
-              <Stack direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
+            <Stack
+              direction="row"
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{
+                  alignItems: 'center',
+                  flex: 1,
+                }}>
                 <Skeleton variant="rectangular" width={40} height={40} />
                 <Box sx={{ flex: 1 }}>
                   <Skeleton variant="text" width="20%" height={24} />
@@ -419,8 +464,19 @@ export default function PaymentMethods() {
   return (
     <>
       {Object.keys(groups).map((x) => (
-        <Box key={x} mt={3}>
-          <Stack direction="row" alignItems="center" mb={1} flexWrap="wrap" gap={1}>
+        <Box
+          key={x}
+          sx={{
+            mt: 3,
+          }}>
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              mb: 1,
+              flexWrap: 'wrap',
+              gap: 1,
+            }}>
             <Typography variant="subtitle2" sx={{ textTransform: 'uppercase' }}>
               {x}
             </Typography>
@@ -453,8 +509,17 @@ export default function PaymentMethods() {
               expanded={expandedId === method.id}
               onChange={(value, expanded) => handleExpand(value, expanded)}
               lazy={false}>
-              <Grid container spacing={2} mt={0}>
-                <Grid item xs={12} md={6}>
+              <Grid
+                container
+                spacing={2}
+                sx={{
+                  mt: 0,
+                }}>
+                <Grid
+                  size={{
+                    xs: 12,
+                    md: 6,
+                  }}>
                   <InfoRow label={t('admin.paymentMethod.props.type')} value={method.type} />
                   {method.type === 'arcblock' && <EditApiHost method={method} />}
                   {['ethereum', 'base'].includes(method.type) && <RpcStatus method={method} />}

package/src/pages/admin/settings/vault-config/edit-form.tsx

@@ -109,7 +109,12 @@ function EditForm({ item, onClose, onSuccess, isOwner }: EditFormProps) {
   if (!item) return null;
 
   const renderLabelWithTooltip = (label: string, tooltip: string) => (
-    <Stack direction="row" spacing={1} alignItems="center">
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        alignItems: 'center',
+      }}>
       <Typography variant="subtitle2">{label}</Typography>
       <Tooltip title={tooltip}>
         <HelpOutlineIcon fontSize="small" sx={{ color: 'text.secondary' }} />
@@ -149,7 +154,12 @@ function EditForm({ item, onClose, onSuccess, isOwner }: EditFormProps) {
 
         <Stack spacing={3}>
           {/* 启用设置 */}
-          <Stack direction="row" alignItems="center" gap={2}>
+          <Stack
+            direction="row"
+            sx={{
+              alignItems: 'center',
+              gap: 2,
+            }}>
             <Typography variant="subtitle1">{t('admin.vaultConfig.enableVault')}</Typography>
             <Controller
               name="enabled"
@@ -195,21 +205,23 @@ function EditForm({ item, onClose, onSuccess, isOwner }: EditFormProps) {
                       type="number"
                       error={!!errors.deposit_threshold}
                       helperText={getDepositHelperText(errors.deposit_threshold)}
-                      InputProps={{
-                        endAdornment: (
-                          <InputAdornment position="end">
-                            <Box sx={{ display: 'flex', alignItems: 'center', ml: 1 }}>
-                              <Currency logo={item.logo} name={item.symbol} />
-                            </Box>
-                          </InputAdornment>
-                        ),
-                        inputProps: {
-                          min: 0,
-                          max: MAX_SAFE_AMOUNT,
-                        },
-                      }}
                       sx={{ mt: 1 }}
                       placeholder={VAULT_DEPOSIT_THRESHOLD}
+                      slotProps={{
+                        input: {
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              <Box sx={{ display: 'flex', alignItems: 'center', ml: 1 }}>
+                                <Currency logo={item.logo} name={item.symbol} />
+                              </Box>
+                            </InputAdornment>
+                          ),
+                          inputProps: {
+                            min: 0,
+                            max: MAX_SAFE_AMOUNT,
+                          },
+                        },
+                      }}
                     />
                   )}
                 />
@@ -246,21 +258,23 @@ function EditForm({ item, onClose, onSuccess, isOwner }: EditFormProps) {
                       type="number"
                       error={!!errors.buffer_threshold}
                       helperText={getBufferHelperText(errors.buffer_threshold)}
-                      InputProps={{
-                        endAdornment: (
-                          <InputAdornment position="end">
-                            <Box sx={{ display: 'flex', alignItems: 'center', ml: 1 }}>
-                              <Currency logo={item.logo} name={item.symbol} />
-                            </Box>
-                          </InputAdornment>
-                        ),
-                        inputProps: {
-                          min: 0,
-                          max: MAX_SAFE_AMOUNT,
-                        },
-                      }}
                       sx={{ mt: 1 }}
                       placeholder={VAULT_BUFFER_THRESHOLD}
+                      slotProps={{
+                        input: {
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              <Box sx={{ display: 'flex', alignItems: 'center', ml: 1 }}>
+                                <Currency logo={item.logo} name={item.symbol} />
+                              </Box>
+                            </InputAdornment>
+                          ),
+                          inputProps: {
+                            min: 0,
+                            max: MAX_SAFE_AMOUNT,
+                          },
+                        },
+                      }}
                     />
                   )}
                 />

package/src/pages/admin/settings/vault-config/index.tsx

@@ -110,12 +110,21 @@ export default function VaultConfig() {
             return '-';
           }
           return (
-            <Stack direction="row" spacing={1} alignItems="center">
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Avatar src={item.logo} alt={item.symbol} style={{ width: 24, height: 24 }} />
               <Box>
                 <Typography variant="body2">{item.symbol}</Typography>
                 {!isMobile && (
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: 'text.secondary',
+                    }}>
                     {item.payment_method?.name}
                   </Typography>
                 )}
@@ -153,7 +162,12 @@ export default function VaultConfig() {
           }
           const enabled = item.vault_config?.enabled;
           return (
-            <Stack direction="row" spacing={1} alignItems="center">
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Box
                 sx={{
                   width: 8,
@@ -181,7 +195,11 @@ export default function VaultConfig() {
           }
           if (!item?.vault_config) {
             return (
-              <Typography variant="body2" color="text.secondary">
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t('admin.vaultConfig.notConfig')}
               </Typography>
             );
@@ -194,7 +212,12 @@ export default function VaultConfig() {
         },
         customHeadLabelRender: () => {
           return (
-            <Box display="flex" alignItems="center" gap={1}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+              }}>
               {t('admin.vaultConfig.depositThreshold')}
               <Tooltip title={t('admin.vaultConfig.depositThresholdHelp')}>
                 <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
@@ -215,7 +238,11 @@ export default function VaultConfig() {
           }
           if (!item?.vault_config) {
             return (
-              <Typography variant="body2" color="text.secondary">
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t('admin.vaultConfig.notConfig')}
               </Typography>
             );
@@ -228,7 +255,12 @@ export default function VaultConfig() {
         },
         customHeadLabelRender: () => {
           return (
-            <Box display="flex" alignItems="center" gap={1}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+              }}>
               {t('admin.vaultConfig.bufferThreshold')}
               <Tooltip title={t('admin.vaultConfig.bufferThresholdHelp')}>
                 <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
@@ -317,7 +349,14 @@ export default function VaultConfig() {
     return (
       <Empty>
         <Typography variant="body1">{t('admin.vaultConfig.notConfigured')}</Typography>
-        <Typography variant="body2" mt={1} sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <Typography
+          variant="body2"
+          sx={{
+            mt: 1,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+          }}>
           {parsedParts.map((part: { type: 'text' | 'marked'; content: string }) =>
             part.type === 'text' ? (
               part.content
@@ -337,8 +376,16 @@ export default function VaultConfig() {
 
   return (
     <Root>
-      <Box mb={2}>
-        <Typography variant="body2" color="text.secondary" mt={1}>
+      <Box
+        sx={{
+          mb: 2,
+        }}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+            mt: 1,
+          }}>
           {t('admin.vaultConfig.description')}
           <Box
             component="a"