payment-kit 1.18.56 → 1.19.0

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

@@ -153,7 +153,11 @@ export default function SubscriptionEmbed() {
     {
       name: t('payment.customer.subscriptions.plan'),
       value: (
-        <Typography fontWeight={600} sx={{ marginRight: '10px' }}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+            marginRight: '10px',
+          }}>
           {formatSubscriptionProduct(subscription.items)}
         </Typography>
       ),
@@ -278,12 +282,22 @@ export default function SubscriptionEmbed() {
           <Box sx={{ flex: 1, overflow: 'hidden' }}>
             <List sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} className="mini-invoice-list">
               <ListSubheader disableGutters sx={{ padding: 0 }}>
-                <Typography component="h2" variant="h6" fontSize="16px">
+                <Typography
+                  component="h2"
+                  variant="h6"
+                  sx={{
+                    fontSize: '16px',
+                  }}>
                   {t('payment.customer.invoices')}
                 </Typography>
               </ListSubheader>
               {(invoices as any).length === 0 ? (
-                <Typography color="text.lighter">{t('payment.customer.invoice.empty')}</Typography>
+                <Typography
+                  sx={{
+                    color: 'text.lighter',
+                  }}>
+                  {t('payment.customer.invoice.empty')}
+                </Typography>
               ) : (
                 <Box sx={{ flex: 1, overflow: 'auto' }}>
                   {(invoices as any).map((item: any) => {
@@ -309,7 +323,13 @@ export default function SubscriptionEmbed() {
               )}
             </List>
           </Box>
-          <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{
+              justifyContent: 'center',
+              mt: 2,
+            }}>
             {subscription.service_actions
               ?.filter((x: any) => x?.type !== 'notification')
               ?.map((x) => (

package/src/pages/home.tsx

@@ -15,17 +15,39 @@ function Home() {
         hideNavMenu={undefined}
         maxWidth={false}
       />
-      <Stack alignItems="center" justifyContent="center" sx={{ height: '60vh', width: '100vw' }}>
-        <Stack maxWidth="sm" direction="column" alignItems="center" spacing={3}>
+      <Stack
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '60vh',
+          width: '100vw',
+        }}>
+        <Stack
+          direction="column"
+          spacing={3}
+          sx={{
+            maxWidth: 'sm',
+            alignItems: 'center',
+          }}>
           <Avatar
             src={window.blocklet.appLogo}
             sx={{ width: 80, height: 80 }}
             variant="square"
             alt={window.blocklet.appName || 'Payment Kit'}
           />
-          <Stack direction="column" alignItems="center" spacing={1}>
+          <Stack
+            direction="column"
+            spacing={1}
+            sx={{
+              alignItems: 'center',
+            }}>
             <Typography variant="h4">Payment Kit</Typography>
-            <Typography variant="h5" color="text.secondary" fontWeight="normal">
+            <Typography
+              variant="h5"
+              sx={{
+                color: 'text.secondary',
+                fontWeight: 'normal',
+              }}>
               <Typewriter
                 options={{
                   strings: ['The decentralized stripe alike payment solution for blocklets'],

package/src/pages/integrations/donations/edit-form.tsx

@@ -157,11 +157,12 @@ export default function EditDonationForm({
               minHeight: 0,
             }}>
             <Grid
-              item
-              xs={12}
-              md={6}
               sx={{
                 height: '100%',
+              }}
+              size={{
+                xs: 12,
+                md: 6,
               }}>
               <Paper
                 elevation={0}
@@ -173,7 +174,13 @@ export default function EditDonationForm({
                 }}>
                 <Stack spacing={4}>
                   <Box>
-                    <Typography variant="h6" gutterBottom color="text.primary" sx={{ mb: 3 }}>
+                    <Typography
+                      variant="h6"
+                      gutterBottom
+                      sx={{
+                        color: 'text.primary',
+                        mb: 3,
+                      }}>
                       {t('admin.donate.buttonSettings')}
                     </Typography>
                     <Stack spacing={3}>
@@ -190,7 +197,10 @@ export default function EditDonationForm({
                         )}
                       />
 
-                      <Stack gap={1}>
+                      <Stack
+                        sx={{
+                          gap: 1,
+                        }}>
                         <Typography variant="subtitle2" gutterBottom>
                           {t('admin.donate.historyType.title')}
                         </Typography>
@@ -219,7 +229,13 @@ export default function EditDonationForm({
                   <Divider />
 
                   <Box>
-                    <Typography variant="h6" gutterBottom color="text.primary" sx={{ mb: 3 }}>
+                    <Typography
+                      variant="h6"
+                      gutterBottom
+                      sx={{
+                        color: 'text.primary',
+                        mb: 3,
+                      }}>
                       {t('admin.donate.amountSettings')}
                     </Typography>
                     <Stack spacing={3}>
@@ -297,11 +313,12 @@ export default function EditDonationForm({
             </Grid>
 
             <Grid
-              item
-              md={6}
               sx={{
                 display: { xs: 'none', md: 'block' },
                 height: '100%',
+              }}
+              size={{
+                md: 6,
               }}>
               <Paper
                 elevation={0}
@@ -317,7 +334,6 @@ export default function EditDonationForm({
           </Grid>
         </FormProvider>
       </Box>
-
       <Box
         sx={{
           mt: 2,

package/src/pages/integrations/donations/index.tsx

@@ -26,8 +26,8 @@ function YourComponent() {
           settings={{
             target: "post-123", // required, unique identifier for the donation instance
             title: "Support Author", // required, title of the donation modal
-            description: "If you find this article helpful, feel free to buy me a coffee", // required, description of the donation 
-            reference: "https://your-site.com/posts/123", // required, reference link of the donation 
+            description: "If you find this article helpful, feel free to buy me a coffee", // required, description of the donation
+            reference: "https://your-site.com/posts/123", // required, reference link of the donation
             beneficiaries: [
               {
                 address: "tip user did", // required, address of the beneficiary
@@ -194,7 +194,12 @@ export default function DonationList() {
             return data[index]?.component_did || t('common.none');
           }
           return (
-            <Stack direction="row" alignItems="center" gap={1}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                gap: 1,
+              }}>
               <Avatar
                 src={joinURL(getPrefix(), `.well-known/service/blocklet/logo-bundle/${componentInfo.did}`)}
                 alt={componentInfo?.title}
@@ -269,7 +274,13 @@ export default function DonationList() {
 
   return (
     <>
-      <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: 'center',
+          gap: 1,
+          flexWrap: 'wrap',
+        }}>
         <Typography variant="body2">{t('admin.donate.intro')}</Typography>
         <Button variant="text" size="small" onClick={() => setShowExample(true)} sx={{ color: 'text.link' }}>
           {t('admin.donate.usage.viewExample')}
@@ -307,7 +318,6 @@ export default function DonationList() {
         }}
         onChange={onTableChange}
       />
-
       {showExample && (
         <Dialog
           open
@@ -317,17 +327,25 @@ export default function DonationList() {
           sx={{ '.MuiDialogContent-root': { padding: 0 } }}
           fullWidth>
           <Box sx={{ p: 3 }}>
-            <Typography variant="body2" paragraph>
+            <Typography
+              variant="body2"
+              sx={{
+                marginBottom: '16px',
+              }}>
               {t('admin.donate.usage.description')}
             </Typography>
             <CodeExample code={exampleCode} />
-            <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+                mt: 2,
+              }}>
               {t('admin.donate.usage.note')}
             </Typography>
           </Box>
         </Dialog>
       )}
-
       {editingItem && (
         <Dialog
           open
@@ -346,7 +364,6 @@ export default function DonationList() {
           />
         </Dialog>
       )}
-
       {confirmDialog.open && (
         <ConfirmDialog
           title={t('admin.donate.status.inactiveTitle')}

package/src/pages/integrations/donations/preview.tsx

@@ -5,7 +5,12 @@ import type { TSetting } from '@blocklet/payment-types';
 
 function PreviewAvatars({ count }: { count: number }) {
   return (
-    <Stack flexDirection="row" justifyContent="center" alignItems="center">
+    <Stack
+      sx={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
       {/* Avatar Group */}
       <Box sx={{ display: 'flex', position: 'relative' }}>
         {Array(Math.min(count, 5))
@@ -28,7 +33,6 @@ function PreviewAvatars({ count }: { count: number }) {
             />
           ))}
       </Box>
-
       {/* Counter Box */}
       <Box
         sx={{
@@ -68,10 +72,14 @@ export default function DonationPreview({ config }: { config: TSetting['settings
 
   return (
     <Stack spacing={3}>
-      <Typography variant="h6" gutterBottom color="text.primary">
+      <Typography
+        variant="h6"
+        gutterBottom
+        sx={{
+          color: 'text.primary',
+        }}>
         {t('admin.donate.previewTitle')}
       </Typography>
-
       {/* Button Preview */}
       <Paper
         elevation={0}
@@ -82,10 +90,21 @@ export default function DonationPreview({ config }: { config: TSetting['settings
           borderColor: 'divider',
           borderRadius: 1,
         }}>
-        <Typography variant="caption" display="block" gutterBottom color="text.secondary" mb={1}>
+        <Typography
+          variant="caption"
+          gutterBottom
+          sx={{
+            display: 'block',
+            color: 'text.secondary',
+            mb: 1,
+          }}>
           {t('admin.donate.btn.preview')}
         </Typography>
-        <Stack spacing={2} alignItems="center">
+        <Stack
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+          }}>
           <Button variant="outlined" color="primary">
             {config.settings.btnText}
           </Button>
@@ -116,7 +135,13 @@ export default function DonationPreview({ config }: { config: TSetting['settings
                         width: '100%',
                         maxWidth: 240,
                       }}>
-                      <Box display="flex" alignItems="center" gap={0.5} width="75%">
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 0.5,
+                          width: '75%',
+                        }}>
                         <Box
                           // eslint-disable-next-line react/no-array-index-key
                           key={i}
@@ -155,7 +180,6 @@ export default function DonationPreview({ config }: { config: TSetting['settings
           </Box>
         </Stack>
       </Paper>
-
       {/* Dialog Preview */}
       <Paper
         elevation={0}
@@ -166,11 +190,23 @@ export default function DonationPreview({ config }: { config: TSetting['settings
           borderColor: 'divider',
           borderRadius: 1,
         }}>
-        <Typography variant="caption" display="block" gutterBottom color="text.secondary" mb={1}>
+        <Typography
+          variant="caption"
+          gutterBottom
+          sx={{
+            display: 'block',
+            color: 'text.secondary',
+            mb: 1,
+          }}>
           {t('admin.donate.dialog.preview')}
         </Typography>
         <Stack spacing={3}>
-          <Box display="flex" gap={1} flexWrap="wrap">
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              flexWrap: 'wrap',
+            }}>
             {config.settings.amount.presets?.map((amount: string) => (
               <Button
                 key={amount}
@@ -211,19 +247,27 @@ export default function DonationPreview({ config }: { config: TSetting['settings
                 const { value } = e.target;
                 setCustomAmount(value);
               }}
-              InputProps={{
-                endAdornment: <Typography sx={{ ml: 1 }}>ABT</Typography>,
-                autoComplete: 'off',
-              }}
               helperText={t('admin.donate.amountRange', {
                 min: config.settings.amount.minimum,
                 max: config.settings.amount.maximum,
               })}
+              slotProps={{
+                input: {
+                  endAdornment: <Typography sx={{ ml: 1 }}>ABT</Typography>,
+                },
+              }}
+              autoComplete="off"
             />
           )}
         </Stack>
         <Divider sx={{ my: 2 }} />
-        <Box display="flex" justifyContent="flex-end" alignItems="center" gap={1}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: 1,
+          }}>
           <Box
             sx={{
               px: 2,

package/src/pages/integrations/index.tsx

@@ -35,7 +35,16 @@ function Integrations() {
   return (
     <>
       <ProgressBar pending={isPending} />
-      <Stack direction="row" alignItems="center" justifyContent="end" flexWrap="wrap" spacing={1} sx={{ mt: 1, pb: 2 }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'center',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+          mt: 1,
+          pb: 2,
+        }}>
         <Tabs
           tabs={tabs}
           current={group}

package/src/pages/integrations/overview.tsx

@@ -67,21 +67,51 @@ export default function Overview() {
 
   return (
     <Box>
-      <Box mb={4}>
-        <Typography variant="h2" gutterBottom fontWeight="bold" mb={1}>
+      <Box
+        sx={{
+          mb: 4,
+        }}>
+        <Typography
+          variant="h2"
+          gutterBottom
+          sx={{
+            fontWeight: 'bold',
+            mb: 1,
+          }}>
           {t('common.welcome')}
         </Typography>
-        <Typography variant="body2" color="text.secondary" mb={2}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+            mb: 2,
+          }}>
           {t('common.welcomeDesc')}
         </Typography>
       </Box>
-
-      <Typography variant="h3" gutterBottom mb={2}>
+      <Typography
+        variant="h3"
+        gutterBottom
+        sx={{
+          mb: 2,
+        }}>
         {t('integrations.basicFeatures')} 🚀
       </Typography>
-      <Grid container spacing={2} mb={4} sx={{ maxWidth: 1200 }}>
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          mb: 4,
+          maxWidth: 1200,
+        }}>
         {basicFeatures.map((item) => (
-          <Grid item xs={12} sm={6} md={4} key={item.path}>
+          <Grid
+            key={item.path}
+            size={{
+              xs: 12,
+              sm: 6,
+              md: 4,
+            }}>
             <Box
               className="base-card"
               onClick={() => handleClick(item)}
@@ -92,28 +122,48 @@ export default function Overview() {
                   boxShadow: 2,
                 },
               }}>
-              <Box mb={1}>
+              <Box
+                sx={{
+                  mb: 1,
+                }}>
                 {item.icon}
-                <Typography variant="h4" mt={1.5}>
+                <Typography
+                  variant="h4"
+                  sx={{
+                    mt: 1.5,
+                  }}>
                   {t(item.title)}
                 </Typography>
               </Box>
-              <Typography variant="body2" color="text.secondary">
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t(item.description)}
               </Typography>
             </Box>
           </Grid>
         ))}
       </Grid>
-
       <Divider sx={{ my: 4 }} />
-
-      <Typography variant="h3" gutterBottom mb={2}>
+      <Typography
+        variant="h3"
+        gutterBottom
+        sx={{
+          mb: 2,
+        }}>
         {t('integrations.advancedFeatures')} 🔥
       </Typography>
       <Grid container spacing={2} sx={{ maxWidth: 1200 }}>
         {advancedFeatures.map((item) => (
-          <Grid item xs={12} sm={6} md={4} key={item.path}>
+          <Grid
+            key={item.path}
+            size={{
+              xs: 12,
+              sm: 6,
+              md: 4,
+            }}>
             <Box
               className="base-card"
               onClick={() => handleClick(item)}
@@ -124,13 +174,24 @@ export default function Overview() {
                   boxShadow: 2,
                 },
               }}>
-              <Box mb={1}>
+              <Box
+                sx={{
+                  mb: 1,
+                }}>
                 {item.icon}
-                <Typography variant="h4" mt={1.5}>
+                <Typography
+                  variant="h4"
+                  sx={{
+                    mt: 1.5,
+                  }}>
                   {t(item.title)}
                 </Typography>
               </Box>
-              <Typography variant="body2" color="text.secondary">
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t(item.description)}
               </Typography>
             </Box>

package/vite.config.ts

@@ -10,14 +10,27 @@ import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const isProduction = mode === 'production';
+  const isDevelopment = mode === 'development';
+  const alias: Record<string, string> = {};
+
+  if (isDevelopment) {
+    alias['@blocklet/payment-react'] = path.resolve(__dirname, '../../packages/react/src');
+    alias['@blocklet/payment-js'] = path.resolve(__dirname, '../../packages/client/src');
+  }
+
+  if (isProduction) {
+    // mui-datatable
+    alias['lodash.assign'] = 'lodash/assign';
+    alias['lodash.clonedeep'] = 'lodash/cloneDeep';
+    alias['lodash.isequal'] = 'lodash/isEqual';
+    alias['lodash.merge'] = 'lodash/merge';
+    alias['lodash.find'] = 'lodash/find';
+  }
+
   return {
     plugins: [
       tsconfigPaths(),
-      react({
-        babel: {
-          plugins: isProduction ? [['lodash']] : [],
-        },
-      }),
+      react({ babel: { plugins: isProduction ? [['lodash']] : [] } }),
       createBlockletPlugin(),
       svgr(),
       process.env.ANALYZE && visualizer({ open: true, gzipSize: true, brotliSize: true }),
@@ -26,46 +39,63 @@ export default defineConfig(({ mode }) => {
     build: {
       cssCodeSplit: false,
       minify: 'terser',
-      terserOptions: {
-        compress: {
-          drop_debugger: true,
-          pure_funcs: ['assert', 'debug'],
-        },
-      },
+      terserOptions: { compress: { drop_debugger: true, pure_funcs: ['assert', 'debug'] } },
       reportCompressedSize: false,
       chunkSizeWarningLimit: 1000,
-      commonjsOptions: {
-        include: [/node_modules/],
-        transformMixedEsModules: true,
-      },
+      commonjsOptions: { include: [/node_modules/], transformMixedEsModules: true },
       rollupOptions: {
         external: [],
         output: {
           manualChunks: {
             'vendor-react': ['react', 'react-dom', 'react-router-dom'],
-            'vendor-mui': ['@mui/material', '@mui/system', '@mui/icons-material'],
+            'vendor-mui': [
+              '@mui/material',
+              '@mui/icons-material',
+              '@mui/system',
+              '@mui/lab',
+              // '@mui/material-nextjs',
+              '@mui/styled-engine',
+              // '@mui/styled-engine-sc',
+              '@mui/utils',
+              // '@mui/x-data-grid',
+              // '@mui/x-data-grid-pro',
+              // '@mui/x-data-grid-premium',
+              // '@mui/x-date-pickers',
+              // '@mui/x-date-pickers-pro',
+              // '@mui/x-charts',
+              // '@mui/x-tree-view',
+              // '@mui/x-tree-view-pro',
+            ],
+            moment: ['moment', 'moment-timezone'],
             utils: ['dayjs', 'numbro', 'bn.js'],
             hooks: ['ahooks', 'use-bus'],
-            'vendor-arcblock': ['@arcblock/did-connect'],
+            lottie: ['lottie-web', 'react-lottie-player', '@lottiefiles/react-lottie-player'],
+            'vendor-arcblock': ['@arcblock/did-connect', '@arcblock/ux'],
+            'vendor-blocklet': ['@blocklet/ui-react'],
           },
         },
       },
     },
     optimizeDeps: {
       include: ['react', 'react-dom', 'react/jsx-runtime'],
-      esbuildOptions: {
-        mainFields: ['module', 'main'],
-        resolveExtensions: ['.ts', '.tsx', '.js', '.jsx'],
-      },
-      exclude: mode === 'development' ? ['@blocklet/payment-react', '@blocklet/payment-js'] : [],
+      esbuildOptions: { mainFields: ['module', 'main'], resolveExtensions: ['.ts', '.tsx', '.js', '.jsx'] },
+      exclude: isDevelopment ? ['@blocklet/payment-react', '@blocklet/payment-js'] : [],
+    },
+    resolve: {
+      alias,
+      dedupe: [
+        //
+        '@blocklet/ui-react',
+        '@arcblock/ux',
+        '@arcblock/did-connect',
+        '@mui/material',
+        // '@mui/utils',
+        '@mui/icons-material',
+        'react',
+        'react-dom',
+        'lodash',
+        'bn.js',
+      ],
     },
-    ...(mode === 'development' && {
-      resolve: {
-        alias: [
-          { find: '@blocklet/payment-react', replacement: path.resolve(__dirname, '../../packages/react/src') },
-          { find: '@blocklet/payment-js', replacement: path.resolve(__dirname, '../../packages/client/src') },
-        ],
-      },
-    }),
   };
 });