payment-kit 1.19.4 → 1.19.5

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.19.4
+version: 1.19.5
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.19.4",
+  "version": "1.19.5",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -46,17 +46,17 @@
     "@abtnode/cron": "^1.16.46",
     "@arcblock/did": "^1.20.15",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^3.0.24",
+    "@arcblock/did-connect": "^3.0.26",
     "@arcblock/did-util": "^1.20.15",
     "@arcblock/jwt": "^1.20.15",
-    "@arcblock/ux": "^3.0.24",
+    "@arcblock/ux": "^3.0.26",
     "@arcblock/validator": "^1.20.15",
-    "@blocklet/did-space-js": "^1.1.5",
+    "@blocklet/did-space-js": "^1.1.6",
     "@blocklet/js-sdk": "^1.16.46",
     "@blocklet/logger": "^1.16.46",
-    "@blocklet/payment-react": "1.19.4",
+    "@blocklet/payment-react": "1.19.5",
     "@blocklet/sdk": "^1.16.46",
-    "@blocklet/ui-react": "^3.0.24",
+    "@blocklet/ui-react": "^3.0.26",
     "@blocklet/uploader": "^0.2.4",
     "@blocklet/xss": "^0.2.2",
     "@mui/icons-material": "^7.1.2",
@@ -122,7 +122,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.46",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.19.4",
+    "@blocklet/payment-types": "1.19.5",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -168,5 +168,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "ced79cc9e205a344b6fdce2f43ac8d27bb37f5f4"
+  "gitHead": "b2cb3888b7efa2cc71591f75240616c36e945b09"
 }

package/src/components/currency.tsx

@@ -4,12 +4,14 @@ type Props = {
   logo: string;
   name: string;
   sx?: SxProps;
+  size?: number;
 };
 
-export default function Currency({ logo, name, sx = {} }: Props) {
+export default function Currency({ logo, name, sx = {}, size = 20 }: Props) {
   return (
     <Stack
       direction="row"
+      alignItems="center"
       spacing={0.5}
       sx={[
         {
@@ -17,7 +19,7 @@ export default function Currency({ logo, name, sx = {} }: Props) {
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}>
-      <Avatar src={logo} alt={name} sx={{ width: 20, height: 20 }} />
+      <Avatar src={logo} alt={name} sx={{ width: size, height: size }} />
       <Typography
         className="currency-name"
         sx={{

package/src/components/info-metric.tsx

@@ -19,13 +19,19 @@ export default function InfoMetric(rawProps: Props) {
     rawProps
   );
 
+  const stackSx = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  };
+
   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">
+      <Stack sx={stackSx}>
+        <Typography className="info-metric-label" 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 */}
@@ -38,6 +44,7 @@ export default function InfoMetric(rawProps: Props) {
           )}
         </Typography>
         <Typography
+          className="info-metric-value"
           component="div"
           variant="body1"
           color={isNone ? 'text.disabled' : 'text.secondary'}

package/src/components/subscription/items/index.tsx

@@ -2,7 +2,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { formatPrice, Table, TruncatedText, useMobile } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TSubscriptionItemExpanded } from '@blocklet/payment-types';
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, Box } from '@mui/material';
+import { styled } from '@mui/system';
 
 import { Link } from 'react-router-dom';
 import Copyable from '../../copyable';
@@ -41,59 +42,74 @@ export default function SubscriptionItemList({ data, currency, mode = 'customer'
                   sm: 2,
                 },
               }}>
-              {item.price.product.images.length > 0 ? (
-                // @ts-ignore
-                <Avatar
-                  key={item.price.product_id}
-                  src={item.price.product.images[0]}
-                  alt={item.price.product.name}
-                  variant="rounded"
-                  sx={size}
-                />
-              ) : (
-                <Avatar key={item.price.product_id} variant="rounded" sx={size}>
-                  {item.price.product.name.slice(0, 1)}
-                </Avatar>
-              )}
-              {isAdmin ? (
-                <>
-                  <Typography
-                    sx={{
-                      color: 'text.primary',
-                      fontWeight: 600,
-                    }}>
-                    <Link to={`/admin/products/${item?.price.product_id}`}>
+              <Box order={isMobile ? 2 : 1}>
+                {item.price.product.images.length > 0 ? (
+                  // @ts-ignore
+                  <Avatar
+                    key={item.price.product_id}
+                    src={item.price.product.images[0]}
+                    alt={item.price.product.name}
+                    variant="rounded"
+                    sx={size}
+                  />
+                ) : (
+                  <Avatar key={item.price.product_id} variant="rounded" sx={size}>
+                    {item.price.product.name.slice(0, 1)}
+                  </Avatar>
+                )}
+              </Box>
+              <Box order={isMobile ? 1 : 2}>
+                {isAdmin ? (
+                  <>
+                    <Typography
+                      sx={{
+                        color: 'text.primary',
+                        fontWeight: 600,
+                      }}>
+                      <Link to={`/admin/products/${item?.price.product_id}`}>
+                        <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
+                      </Link>
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        whiteSpace: 'nowrap',
+                      }}>
+                      <Link to={`/admin/products/${item?.price.id}`}>
+                        {formatPrice(item.price, currency, item?.price.product.unit_label)}
+                      </Link>
+                    </Typography>
+                  </>
+                ) : (
+                  <Box
+                    sx={
+                      isMobile
+                        ? {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'flex-end',
+                            gap: 0.5,
+                            flex: 1,
+                          }
+                        : {}
+                    }>
+                    <Typography
+                      sx={{
+                        color: 'text.primary',
+                        fontWeight: 600,
+                      }}>
                       <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
-                    </Link>
-                  </Typography>
-                  <Typography
-                    sx={{
-                      color: 'text.secondary',
-                      whiteSpace: 'nowrap',
-                    }}>
-                    <Link to={`/admin/products/${item?.price.id}`}>
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        whiteSpace: 'nowrap',
+                      }}>
                       {formatPrice(item.price, currency, item?.price.product.unit_label)}
-                    </Link>
-                  </Typography>
-                </>
-              ) : (
-                <>
-                  <Typography
-                    sx={{
-                      color: 'text.primary',
-                      fontWeight: 600,
-                    }}>
-                    <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
-                  </Typography>
-                  <Typography
-                    sx={{
-                      color: 'text.secondary',
-                      whiteSpace: 'nowrap',
-                    }}>
-                    {formatPrice(item.price, currency, item?.price.product.unit_label)}
-                  </Typography>
-                </>
-              )}
+                    </Typography>
+                  </Box>
+                )}
+              </Box>
             </Stack>
           );
         },
@@ -153,22 +169,42 @@ export default function SubscriptionItemList({ data, currency, mode = 'customer'
   ].filter(Boolean);
 
   return (
-    <Table
-      data={data}
-      columns={columns}
-      loading={false}
-      footer={false}
-      toolbar={false}
-      components={{
-        TableToolbar: () => null,
-        TableFooter: () => null,
-      }}
-      options={{
-        count: data.length,
-        page: 0,
-        rowsPerPage: 100,
-      }}
-      emptyNodeText={t('customer.product.empty')}
-    />
+    <InvoiceTableRoot>
+      <Table
+        data={data}
+        columns={columns}
+        loading={false}
+        footer={false}
+        toolbar={false}
+        components={{
+          TableToolbar: () => null,
+          TableFooter: () => null,
+        }}
+        mobileTDFlexDirection="row"
+        options={{
+          count: data.length,
+          page: 0,
+          rowsPerPage: 100,
+        }}
+        emptyNodeText={t('customer.product.empty')}
+      />
+    </InvoiceTableRoot>
   );
 }
+
+const InvoiceTableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      align-items: center;
+      padding: 4px 0;
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;

package/src/components/subscription/metrics.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatBNStr, formatTime } from '@blocklet/payment-react';
+import { api, formatBNStr, formatTime, useMobile } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded, CreditGrantSummary } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 
@@ -41,6 +41,8 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
   const { data: upcoming, loading: upcomingLoading } = useRequest(() => fetchUpcoming(subscription.id));
   const navigate = useNavigate();
 
+  const { isMobile } = useMobile();
+
   const { data: payerValue, loading: payerLoading } = useRequest(() => fetchPayer(subscription.id), {
     ready: showBalance,
   });
@@ -83,9 +85,15 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
         <Button
           component="a"
           color="error"
+          sx={{
+            height: 24,
+            pt: 0,
+            pb: 0,
+            ...(isMobile ? { textAlign: 'right', maxWidth: 160 } : {}),
+          }}
           onClick={() => navigate(`/customer/subscription/${subscription.id}/recharge`)}>
           {t('admin.subscription.insufficientBalance')}
-          <ArrowForward sx={{ fontSize: '14px' }} />
+          <ArrowForward sx={{ fontSize: 14 }} />
         </Button>
       );
     }
@@ -113,7 +121,7 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
             alignItems: 'baseline',
           }}>
           {formatBNStr(balance, subscription.paymentCurrency.decimal)}
-          <Typography sx={{ fontSize: '14px', ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
+          <Typography sx={{ fontSize: 14, ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
         </Box>
       </Stack>
     );
@@ -136,6 +144,8 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
                 display: 'flex',
                 alignItems: 'center',
                 gap: 0.5,
+                fontSize: 14,
+                fontWeight: 500,
               }}>
               {t('admin.subscription.nextInvoiceAmount')}
               <Tooltip title={t('admin.subscription.nextInvoiceAmountTip')} placement="top" arrow>
@@ -157,8 +167,11 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
               spacing={1}
               sx={{
                 alignItems: 'center',
+                fontWeight: 500,
               }}>
-              <Typography>{t('admin.subscription.currentBalance')}</Typography>
+              <Typography fontWeight={500} sx={{ fontSize: 14 }}>
+                {t('admin.subscription.currentBalance')}
+              </Typography>
               <Tooltip
                 title={
                   <Typography sx={{ fontFamily: 'monospace', fontSize: '13px' }}>

package/src/pages/customer/index.tsx

@@ -488,6 +488,7 @@ export default function CustomerHome() {
         </Box>
         <CreditOverview customerId={data?.id || ''} settings={settings} />
       </Box>
+      <Divider />
     </ConditionalSection>
   );
 
@@ -585,7 +586,6 @@ export default function CustomerHome() {
         {SummaryCard}
         {SummaryCard && <Divider />}
         {CreditCard}
-        {CreditCard && <Divider />}
         {SubscriptionCard}
         {SubscriptionCard && <Divider />}
         {InvoiceCard}

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

@@ -18,7 +18,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TCheckoutSession, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
@@ -51,6 +51,7 @@ export default function CustomerInvoiceDetail() {
   const { isMobile } = useMobile();
   const { connect } = usePaymentContext();
   const params = useParams<{ id: string }>();
+  const muiTheme = useTheme();
   const [state, setState] = useSetState({
     downloading: false,
     paying: false,
@@ -179,8 +180,11 @@ export default function CustomerInvoiceDetail() {
       </Stack>
       <Box
         sx={{
-          mt: 4,
+          mt: isMobile ? '0 !important' : 4,
           display: 'flex',
+          border: isMobile ? `1px solid ${muiTheme.palette.divider}` : 'none',
+          borderRadius: isMobile ? 1 : 0,
+          p: isMobile ? 2 : 0,
 
           gap: {
             xs: 2,
@@ -227,6 +231,9 @@ export default function CustomerInvoiceDetail() {
             'hr.MuiDivider-root:last-child': {
               display: 'none',
             },
+            '.info-metric-label': {
+              mb: isMobile ? 0.5 : 1,
+            },
 
             flexDirection: {
               xs: 'column',
@@ -288,7 +295,14 @@ export default function CustomerInvoiceDetail() {
         </Stack>
       </Box>
       <Divider />
-      <Box className="section" sx={{ containerType: 'inline-size' }}>
+      <Box
+        className="section"
+        sx={{
+          containerType: 'inline-size',
+          border: isMobile ? (theme) => `1px solid ${theme.palette.divider}` : 'none',
+          borderRadius: isMobile ? 1 : 0,
+          p: isMobile ? 2 : 0,
+        }}>
         <Typography
           variant="h3"
           className="section-header"
@@ -300,6 +314,7 @@ export default function CustomerInvoiceDetail() {
         <InfoRowGroup
           sx={{
             display: 'grid',
+            columnGap: 16,
             gridTemplateColumns: {
               xs: 'repeat(1, 1fr)',
               lg: 'repeat(2, 1fr)',
@@ -308,7 +323,7 @@ export default function CustomerInvoiceDetail() {
               gridTemplateColumns: 'repeat(2, 1fr)',
             },
             '.info-row-wrapper': {
-              gap: 1,
+              gap: isMobile ? 0.5 : 1,
               flexDirection: {
                 xs: 'column',
                 lg: 'row',
@@ -324,11 +339,17 @@ export default function CustomerInvoiceDetail() {
             },
             '.currency-name': {
               color: 'text.secondary',
+              fontSize: 14,
+              lineHeight: 1,
+            },
+            '.tx-link-text': {
+              fontSize: 14,
+              lineHeight: 1,
             },
           }}>
           <InfoRow
             label={t('admin.invoice.billTo')}
-            value={<CustomerLink customer={data.customer} linked={false} size={isMobile ? 'default' : 'small'} />}
+            value={<CustomerLink customer={data.customer} linked={false} size="small" />}
           />
           <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
           <InfoRow

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

@@ -30,6 +30,7 @@ import {
   Link as MuiLink,
   IconButton,
   Tooltip,
+  useTheme,
 } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -86,6 +87,8 @@ export default function CustomerSubscriptionDetail() {
     ready: overdraftProtectionReady,
   });
 
+  const muiTheme = useTheme();
+
   const {
     data: cycleAmount = {
       amount: '0',
@@ -170,6 +173,9 @@ export default function CustomerSubscriptionDetail() {
             size="small"
             sx={{
               fontSize: '13px',
+              pt: 0,
+              pb: 0,
+              height: 3,
               color: 'text.link',
               '&:hover': { backgroundColor: 'primary.lighter' },
             }}
@@ -208,34 +214,32 @@ export default function CustomerSubscriptionDetail() {
         direction="row"
         sx={{
           alignItems: 'center',
+          flexWrap: 'wrap',
+          justifyContent: 'flex-end',
+          columnGap: 0.5,
         }}>
         <Stack
           direction="row"
-          spacing={1}
+          spacing={0.5}
           sx={{
             alignItems: 'center',
           }}>
-          <Stack
-            direction="row"
-            spacing={0.5}
+          <CheckCircle
             sx={{
-              alignItems: 'center',
+              fontSize: '16px',
+              color: 'success.main',
+              verticalAlign: 'middle',
+            }}
+          />
+          <Typography
+            sx={{
+              color: 'success.main',
+              fontWeight: 500,
             }}>
-            <CheckCircle
-              sx={{
-                fontSize: '16px',
-                color: 'success.main',
-                verticalAlign: 'middle',
-              }}
-            />
-            <Typography
-              sx={{
-                color: 'success.main',
-                fontWeight: 500,
-              }}>
-              {t('customer.overdraftProtection.enabled')}
-            </Typography>
-          </Stack>
+            {t('customer.overdraftProtection.enabled')}
+          </Typography>
+        </Stack>
+        {!isMobile && (
           <Divider
             orientation="vertical"
             flexItem
@@ -244,36 +248,32 @@ export default function CustomerSubscriptionDetail() {
               borderColor: 'divider',
             }}
           />
-          <Typography
+        )}
+        <Typography
+          sx={{
+            color: 'text.primary',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            fontWeight: 500,
+          }}>
+          <Avatar src={data.paymentCurrency?.logo} sx={{ width: 16, height: 16 }} alt={data.paymentCurrency?.symbol} />
+          <Box
             sx={{
-              color: 'text.primary',
               display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-              fontWeight: 500,
+              alignItems: 'baseline',
             }}>
-            <Avatar
-              src={data.paymentCurrency?.logo}
-              sx={{ width: 16, height: 16 }}
-              alt={data.paymentCurrency?.symbol}
-            />
-            <Box
+            {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
+            <Typography
               sx={{
-                display: 'flex',
-                alignItems: 'baseline',
+                color: 'text.secondary',
+                fontSize: '14px',
+                ml: 0.5,
               }}>
-              {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
-              <Typography
-                sx={{
-                  color: 'text.secondary',
-                  fontSize: '14px',
-                  ml: 0.5,
-                }}>
-                {data.paymentCurrency.symbol}（{formatEstimatedDuration(Math.ceil(remainingStake / estimateAmount))}）
-              </Typography>
-            </Box>
-          </Typography>
-        </Stack>
+              {data.paymentCurrency.symbol}({formatEstimatedDuration(Math.ceil(remainingStake / estimateAmount))})
+            </Typography>
+          </Box>
+        </Typography>
         {data?.overdraft_protection?.enabled && (
           <Tooltip title={t('customer.overdraftProtection.setting')} placement="top">
             <IconButton
@@ -377,8 +377,11 @@ export default function CustomerSubscriptionDetail() {
         </Stack>
         <Box
           sx={{
-            mt: 4,
+            mt: isMobile ? 2 : 4,
             display: 'flex',
+            border: isMobile ? `1px solid ${muiTheme.palette.divider}` : 'none',
+            borderRadius: isMobile ? 1 : 0,
+            p: isMobile ? 2 : 0,
 
             gap: {
               xs: 2,
@@ -421,6 +424,8 @@ export default function CustomerSubscriptionDetail() {
             sx={{
               justifyContent: 'flex-start',
               flexWrap: 'wrap',
+              flex: 1,
+              width: '100%',
 
               'hr.MuiDivider-root:last-child': {
                 display: 'none',
@@ -450,7 +455,9 @@ export default function CustomerSubscriptionDetail() {
                     sx={{
                       alignItems: 'center',
                     }}>
-                    <Typography component="span">{t('customer.overdraftProtection.title')}</Typography>
+                    <Typography component="span" fontSize={14} fontWeight={500}>
+                      {t('customer.overdraftProtection.title')}
+                    </Typography>
                     <MuiLink
                       href="https://www.arcblock.io/content/blog/en/payment-kit-v117-sub-guard#listen-to-the-audio-overview"
                       target="_blank"
@@ -517,8 +524,15 @@ export default function CustomerSubscriptionDetail() {
           </Stack>
         </Box>
       </Box>
-      <Divider />
-      <Box className="section" sx={{ containerType: 'inline-size' }}>
+      {!isMobile ? <Divider /> : null}
+      <Box
+        className="section"
+        sx={{
+          containerType: 'inline-size',
+          border: isMobile ? `1px solid ${muiTheme.palette.divider}` : 'none',
+          borderRadius: isMobile ? 1 : 0,
+          p: isMobile ? 2 : 0,
+        }}>
         <Typography
           variant="h3"
           className="section-header"
@@ -538,7 +552,7 @@ export default function CustomerSubscriptionDetail() {
               gridTemplateColumns: 'repeat(2, 1fr)',
             },
             '.info-row-wrapper': {
-              gap: 1,
+              gap: isMobile ? 0.5 : 1,
               flexDirection: {
                 xs: 'column',
                 xl: 'row',
@@ -554,11 +568,17 @@ export default function CustomerSubscriptionDetail() {
             },
             '.currency-name': {
               color: 'text.secondary',
+              lineHeight: 1,
+              fontSize: 14,
+            },
+            '.tx-link-text': {
+              fontSize: 14,
+              lineHeight: 1,
             },
           }}>
           <InfoRow
             label={t('common.customer')}
-            value={<CustomerLink customer={data.customer} linked={false} size={isMobile ? 'default' : 'small'} />}
+            value={<CustomerLink customer={data.customer} linked={false} size="small" />}
           />
           <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
 
@@ -585,17 +605,17 @@ export default function CustomerSubscriptionDetail() {
 
           <InfoRow
             label={t('admin.paymentMethod._name')}
-            value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} />}
+            value={<Currency logo={data.paymentMethod?.logo} name={data.paymentMethod?.name} size={16} />}
           />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
             value={
               <Stack direction="row" spacing={2}>
-                <Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />
+                <Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} size={16} />
                 {canChangePaymentMethod(data) && (
                   <Button
                     variant="text"
-                    sx={{ color: 'text.link' }}
+                    sx={{ color: 'text.link', fontSize: 14 }}
                     size="small"
                     onClick={async () => {
                       // only check unpaid invoices when overdraft protection is enabled
@@ -617,7 +637,7 @@ export default function CustomerSubscriptionDetail() {
           {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
             <InfoRow
               label={t('common.delegateTxHash')}
-              value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
+              value={<TxLink details={data.payment_details} method={data.paymentMethod} size={16} />}
             />
           )}
           {data.paymentMethod?.type === 'arcblock' && data.payment_details?.arcblock?.staking?.tx_hash && (
@@ -633,6 +653,7 @@ export default function CustomerSubscriptionDetail() {
                   <TxLink
                     details={{ arcblock: { tx_hash: data.payment_details?.arcblock?.staking?.tx_hash, payer: '' } }}
                     method={data.paymentMethod}
+                    size={16}
                   />
                 </Box>
               }

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

@@ -27,7 +27,6 @@ import {
   Box,
   Button,
   CircularProgress,
-  Divider,
   Link,
   List,
   ListItem,
@@ -35,6 +34,7 @@ import {
   Stack,
   Tooltip,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import SplitButton from '@arcblock/ux/lib/SplitButton';
@@ -111,6 +111,7 @@ export default function SubscriptionEmbed() {
       refreshDeps: [subscriptionId, authToken, subscription?.customer_id],
     }
   );
+  const muiTheme = useTheme();
 
   const subscriptionPageUrl: string = useMemo(() => {
     if (!subscription) {
@@ -256,7 +257,7 @@ export default function SubscriptionEmbed() {
           <Typography component="h2" sx={{ textAlign: 'center' }} variant="h3" gutterBottom>
             {t('payment.customer.subscriptions.current')}
           </Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
             {infoList.map(({ name, value }) => {
               return (
                 <InfoRow
@@ -264,6 +265,8 @@ export default function SubscriptionEmbed() {
                   value={value}
                   sx={{
                     mb: 0,
+                    py: 1.5,
+                    borderBottom: `1px solid ${muiTheme.palette.divider}`,
                     '.info-row-label': {
                       whiteSpace: 'nowrap',
                     },
@@ -278,7 +281,6 @@ export default function SubscriptionEmbed() {
               );
             })}
           </Box>
-          <Divider />
           <Box sx={{ flex: 1, overflow: 'hidden' }}>
             <List sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} className="mini-invoice-list">
               <ListSubheader disableGutters sx={{ padding: 0 }}>
@@ -286,7 +288,8 @@ export default function SubscriptionEmbed() {
                   component="h2"
                   variant="h6"
                   sx={{
-                    fontSize: '16px',
+                    fontSize: 14,
+                    color: 'text.primary',
                   }}>
                   {t('payment.customer.invoices')}
                 </Typography>
@@ -329,10 +332,11 @@ export default function SubscriptionEmbed() {
             sx={{
               justifyContent: 'center',
               mt: 2,
+              width: '100%',
             }}>
             {subscription.service_actions
               ?.filter((x: any) => x?.type !== 'notification')
-              ?.map((x) => (
+              ?.map((x: any) => (
                 // @ts-ignore
                 <Button
                   component={Link}
@@ -342,7 +346,11 @@ export default function SubscriptionEmbed() {
                   href={x.link}
                   size="small"
                   target="_blank"
-                  sx={{ textDecoration: 'none !important' }}>
+                  sx={{
+                    textDecoration: 'none !important',
+                    flex: 1,
+                    minWidth: 0,
+                  }}>
                   {x.text[locale] || x.text.en || x.name}
                 </Button>
               ))}
@@ -351,6 +359,10 @@ export default function SubscriptionEmbed() {
                 size="small"
                 color="error"
                 variant="contained"
+                sx={{
+                  flex: 1,
+                  minWidth: 0,
+                }}
                 menu={[
                   <SplitButton.Item key="view-subscription" component={Link} target="_blank" href={subscriptionPageUrl}>
                     {t('payment.customer.subscriptions.view')}
@@ -365,7 +377,10 @@ export default function SubscriptionEmbed() {
             ) : (
               <Button
                 variant="contained"
-                sx={{ width: subscription.service_actions?.length ? 'auto' : '100%' }}
+                sx={{
+                  flex: 1,
+                  minWidth: 0,
+                }}
                 target="_blank"
                 href={subscriptionPageUrl}>
                 {t('payment.customer.subscriptions.view')}