payment-kit 1.18.56 → 1.19.1

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} />}
@@ -484,6 +549,9 @@ export default function PaymentMethods() {
                           if (!currency) {
                             return null;
                           }
+                          if (currency.type === 'credit') {
+                            return null;
+                          }
                           return (
                             <ListItem
                               key={currency.id}

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"