payment-kit 1.23.0 → 1.23.1

package/api/src/libs/util.ts

@@ -97,6 +97,40 @@ export function createCodeGenerator(prefix: string, size: number = 24) {
   return prefix ? () => `${prefix}_${generator()}` : generator;
 }
 
+export function hasObjectChanged<T extends Record<string, any>>(
+  updates: Partial<T>,
+  original: T,
+  options?: {
+    deepCompare?: string[];
+  }
+): boolean {
+  const deepFields = options?.deepCompare || [];
+
+  for (const [key, newValue] of Object.entries(updates)) {
+    if (newValue !== undefined) {
+      const oldValue = original[key];
+
+      if (deepFields.includes(key)) {
+        if (typeof newValue === 'object' && newValue !== null && typeof oldValue === 'object' && oldValue !== null) {
+          const newObj = newValue as Record<string, any>;
+          const oldObj = (oldValue || {}) as Record<string, any>;
+          for (const subKey of Object.keys(newObj)) {
+            if (newObj[subKey] !== oldObj[subKey]) {
+              return true;
+            }
+          }
+        } else if (newValue !== oldValue) {
+          return true;
+        }
+      } else if (newValue !== oldValue) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
 export function stringToStream(str: string): Readable {
   const stream = new Readable();
   stream.push(str);

package/api/src/routes/checkout-sessions.ts

@@ -54,6 +54,7 @@ import {
   getConnectQueryParam,
   getDataObjectFromQuery,
   getUserOrAppInfo,
+  hasObjectChanged,
   isUserInBlocklist,
 } from '../libs/util';
 import {
@@ -387,7 +388,13 @@ export async function calculateAndUpdateAmount(
 
   logger.info('Amount calculated', {
     checkoutSessionId: checkoutSession.id,
-    amount,
+    amount: {
+      subtotal: amount.subtotal,
+      total: amount.total,
+      discount: amount.discount,
+      shipping: amount.shipping,
+      tax: amount.tax,
+    },
   });
 
   if (checkoutSession.mode === 'payment' && new BN(amount.total || '0').lt(new BN('0'))) {
@@ -1190,8 +1197,11 @@ export async function startCheckoutSessionFromPaymentLink(id: string, req: Reque
           item.upsell_price_id = item.price.upsell.upsells_to_id;
         }
       });
-      await doc.update({ line_items: updatedItems });
-      await doc.update(await getCheckoutSessionAmounts(doc));
+      const amounts = await getCheckoutSessionAmounts(doc);
+      await doc.update({
+        line_items: updatedItems,
+        ...amounts,
+      });
       doc.line_items = await Price.expand(updatedItems, { upsell: true });
     }
 
@@ -1534,29 +1544,43 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
         updates.invoice_prefix = Customer.getInvoicePrefix();
       }
 
-      await customer.update(updates);
-      try {
-        await blocklet.updateUserAddress(
-          {
-            did: customer.did,
-            address: Customer.formatAddressFromCustomer(customer),
-            // @ts-ignore
-            phone: customer.phone,
-          },
-          {
-            headers: {
-              cookie: req.headers.cookie || '',
-            },
-          }
-        );
-        logger.info('updateUserAddress success', {
+      if (!hasObjectChanged(updates, customer, { deepCompare: ['address'] })) {
+        logger.info('customer update skipped (no changes)', {
           did: customer.did,
         });
-      } catch (err) {
-        logger.error('updateUserAddress failed', {
-          error: err,
-          customerId: customer.id,
+      } else {
+        await customer.update(updates);
+        logger.info('customer updated', {
+          did: customer.did,
         });
+
+        try {
+          // eslint-disable-next-line no-console
+          console.time('updateUserAddress');
+          await blocklet.updateUserAddress(
+            {
+              did: customer.did,
+              address: Customer.formatAddressFromCustomer(customer),
+              // @ts-ignore
+              phone: customer.phone,
+            },
+            {
+              headers: {
+                cookie: req.headers.cookie || '',
+              },
+            }
+          );
+          // eslint-disable-next-line no-console
+          console.timeEnd('updateUserAddress');
+          logger.info('updateUserAddress success', {
+            did: customer.did,
+          });
+        } catch (err) {
+          logger.error('updateUserAddress failed', {
+            error: err,
+            customerId: customer.id,
+          });
+        }
       }
     }
 
@@ -3027,10 +3051,27 @@ router.delete('/:id/remove-promotion', user, ensureCheckoutSessionOpen, async (r
   }
 });
 
+const amountSchema = Joi.object({
+  amount: Joi.string()
+    .pattern(/^\d+(\.\d+)?$/)
+    .required()
+    .messages({
+      'string.pattern.base': 'Amount must be a valid number',
+      'any.required': 'Amount is required',
+    }),
+  priceId: Joi.string().required(),
+});
 // change payment amount
 router.put('/:id/amount', ensureCheckoutSessionOpen, async (req, res) => {
   try {
-    const { amount, priceId } = req.body;
+    const { error, value } = amountSchema.validate(req.body, {
+      stripUnknown: true,
+    });
+    if (error) {
+      return res.status(400).json({ error: error.message });
+    }
+
+    const { amount, priceId } = value;
     const checkoutSession = req.doc as CheckoutSession;
     const items = await Price.expand(checkoutSession.line_items);
     const item = items.find((x) => x.price_id === priceId);
@@ -3090,7 +3131,7 @@ router.put('/:id/amount', ensureCheckoutSessionOpen, async (req, res) => {
       newItem.custom_amount = amount;
     }
     await checkoutSession.update({ line_items: newItems.map((x) => omit(x, ['price'])) as LineItem[] });
-    logger.info('CheckoutSession updated on amount', { id: req.params.id, ...req.body, newItem });
+    logger.info('CheckoutSession updated on amount', { id: req.params.id, amount, priceId });
 
     // recalculate amount
     await checkoutSession.update(await getCheckoutSessionAmounts(checkoutSession));
@@ -3185,11 +3226,35 @@ router.get('/', auth, async (req, res) => {
       include: [],
     });
 
-    const condition = { where: { livemode: !!req.livemode } };
-    const products = (await Product.findAll(condition)).map((x) => x.toJSON());
-    const prices = (await Price.findAll(condition)).map((x) => x.toJSON());
     const docs = list.map((x) => x.toJSON());
 
+    const productIds = new Set<string>();
+    const priceIds = new Set<string>();
+    docs.forEach((x) => {
+      x.line_items?.forEach((item: any) => {
+        if (item.price_id) {
+          priceIds.add(item.price_id);
+        }
+        if (item.product_id) {
+          productIds.add(item.product_id);
+        }
+      });
+    });
+
+    const condition = { where: { livemode: !!req.livemode } };
+    const products =
+      productIds.size > 0
+        ? (await Product.findAll({ ...condition, where: { ...condition.where, id: Array.from(productIds) } })).map(
+            (x) => x.toJSON()
+          )
+        : [];
+    const prices =
+      priceIds.size > 0
+        ? (await Price.findAll({ ...condition, where: { ...condition.where, id: Array.from(priceIds) } })).map((x) =>
+            x.toJSON()
+          )
+        : [];
+
     docs.forEach((x) => {
       // @ts-ignore
       expandLineItems(x.line_items, products, prices);

package/api/src/routes/credit-grants.ts

@@ -355,19 +355,25 @@ router.get('/verify-availability', authMine, async (req, res) => {
 });
 
 router.get('/:id', authPortal, async (req, res) => {
-  const creditGrant = await CreditGrant.findByPk(req.params.id, {
+  const creditGrant = (await CreditGrant.findByPk(req.params.id, {
     include: [
       { model: Customer, as: 'customer' },
       { model: PaymentCurrency, as: 'paymentCurrency' },
     ],
-  });
+  })) as CreditGrant & { paymentCurrency?: PaymentCurrency };
   if (!creditGrant) {
     return res.status(404).json({ error: `Credit grant ${req.params.id} not found` });
   }
+
+  let paymentMethod = null;
+  if (creditGrant.paymentCurrency) {
+    paymentMethod = await PaymentMethod.findByPk(creditGrant.paymentCurrency.payment_method_id);
+  }
   const expandedPrices = await expandScopePrices(creditGrant);
   return res.json({
     ...creditGrant.toJSON(),
     items: expandedPrices,
+    paymentMethod,
   });
 });
 

package/api/src/routes/credit-transactions.ts

@@ -14,6 +14,8 @@ import {
   MeterEvent,
   Subscription,
   PaymentCurrency,
+  PaymentMethod,
+  TCreditTransactionExpanded,
 } from '../store/models';
 
 const router = Router();
@@ -303,7 +305,7 @@ router.get('/summary', authMine, async (req, res) => {
 
 router.get('/:id', authPortal, async (req, res) => {
   try {
-    const transaction = await CreditTransaction.findByPk(req.params.id, {
+    const transaction = (await CreditTransaction.findByPk(req.params.id, {
       include: [
         {
           model: Customer,
@@ -339,14 +341,29 @@ router.get('/:id', authPortal, async (req, res) => {
           ],
           required: false,
         },
+        {
+          model: MeterEvent,
+          as: 'meterEvent',
+          attributes: ['id', 'source_data'],
+          required: false,
+        },
       ],
-    });
+    })) as CreditTransaction &
+      TCreditTransactionExpanded & { creditGrant?: CreditGrant & { paymentCurrency?: PaymentCurrency } };
 
     if (!transaction) {
       return res.status(404).json({ error: 'Credit transaction not found' });
     }
 
-    return res.json(transaction);
+    let paymentMethod = null;
+    if (transaction.creditGrant?.paymentCurrency?.payment_method_id) {
+      paymentMethod = await PaymentMethod.findByPk(transaction.creditGrant.paymentCurrency.payment_method_id);
+    }
+
+    return res.json({
+      ...transaction.toJSON(),
+      paymentMethod,
+    });
   } catch (err) {
     logger.error('get credit transaction failed', err);
     return res.status(400).json({ error: err.message });

package/api/src/routes/meter-events.ts

@@ -335,7 +335,11 @@ router.get('/pending-amount', authMine, async (req, res) => {
       }
       params.customerId = customer.id;
     }
+    // eslint-disable-next-line no-console
+    console.time('pending-amount: getPendingAmounts');
     const [summary] = await MeterEvent.getPendingAmounts(params);
+    // eslint-disable-next-line no-console
+    console.timeEnd('pending-amount: getPendingAmounts');
     return res.json(summary);
   } catch (err) {
     logger.error('Error getting meter event pending amount', err);

package/api/src/routes/payment-links.ts

@@ -260,10 +260,12 @@ router.get('/', auth, async (req, res) => {
     const priceIds: string[] = list.reduce((acc: string[], x) => acc.concat(x.line_items.map((i) => i.price_id)), []);
     const prices = await Price.findAll({ where: { id: priceIds }, include: [{ model: Product, as: 'product' }] });
 
+    const priceMap = new Map(prices.map((p) => [p.id, p]));
+
     list.forEach((x) => {
       x.line_items.forEach((i) => {
         // @ts-ignore
-        i.price = prices.find((p) => p.id === i.price_id);
+        i.price = priceMap.get(i.price_id);
       });
     });
 

package/api/src/store/migrations/20251211-optimize-slow-queries.ts

@@ -0,0 +1,33 @@
+/* eslint-disable no-console */
+import { createIndexIfNotExists, type Migration } from '../migrate';
+
+export const up: Migration = async ({ context }) => {
+  await createIndexIfNotExists(
+    context,
+    'meter_events',
+    ['livemode', 'event_name', 'timestamp'],
+    'idx_meter_events_livemode_event_timestamp'
+  );
+
+  await createIndexIfNotExists(
+    context,
+    'payment_currencies',
+    ['is_base_currency', 'livemode'],
+    'idx_payment_currencies_base_livemode'
+  );
+
+  await createIndexIfNotExists(context, 'jobs', ['queue', 'id'], 'idx_jobs_queue_id');
+  await createIndexIfNotExists(
+    context,
+    'jobs',
+    ['queue', 'cancelled', 'will_run_at', 'delay'],
+    'idx_jobs_queue_cancelled_run_at_delay'
+  );
+};
+
+export const down: Migration = async ({ context }) => {
+  await context.removeIndex('meter_events', 'idx_meter_events_livemode_event_timestamp');
+  await context.removeIndex('payment_currencies', 'idx_payment_currencies_base_livemode');
+  await context.removeIndex('jobs', 'idx_jobs_queue_id');
+  await context.removeIndex('jobs', 'idx_jobs_queue_cancelled_run_at_delay');
+};

package/api/src/store/models/index.ts

@@ -305,9 +305,10 @@ export type TCreditTransactionExpanded = TCreditTransaction & {
   customer: TCustomer;
   paymentCurrency: TPaymentCurrency;
   paymentMethod?: TPaymentMethod;
-  creditGrant: TCreditGrant;
+  creditGrant: TCreditGrant & { paymentCurrency?: TPaymentCurrency };
   meter: TMeter;
   subscription: TSubscription;
+  meterEvent?: TMeterEvent;
 };
 
 export type TMeterEventExpanded = TMeterEvent & {

package/api/src/store/sequelize.ts

@@ -17,6 +17,7 @@ Sequelize.useCLS(namespace);
 export const sequelize = new Sequelize({
   dialect: 'sqlite',
   logging: process.env.SQL_LOG === '1',
+  benchmark: process.env.SQL_LOG === '1' && process.env.SQL_BENCHMARK === '1',
   storage: join(env.dataDir, 'payment-kit.db'),
   pool: {
     min: sequelizeOptionsPoolMin,

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.23.0
+version: 1.23.1
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.23.0",
+  "version": "1.23.1",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -58,9 +58,9 @@
     "@blocklet/error": "^0.3.4",
     "@blocklet/js-sdk": "^1.17.4",
     "@blocklet/logger": "^1.17.4",
-    "@blocklet/payment-broker-client": "1.23.0",
-    "@blocklet/payment-react": "1.23.0",
-    "@blocklet/payment-vendor": "1.23.0",
+    "@blocklet/payment-broker-client": "1.23.1",
+    "@blocklet/payment-react": "1.23.1",
+    "@blocklet/payment-vendor": "1.23.1",
     "@blocklet/sdk": "^1.17.4",
     "@blocklet/ui-react": "^3.2.11",
     "@blocklet/uploader": "^0.3.14",
@@ -130,7 +130,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.17.4",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.23.0",
+    "@blocklet/payment-types": "1.23.1",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -177,5 +177,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d791ace5b095ff78f4b7328dac8a9575e6b2e265"
+  "gitHead": "393e83d16adecbe9aa9d145732c45b2198a2e8b9"
 }

package/src/app.tsx

@@ -28,6 +28,7 @@ const CustomerSubscriptionEmbed = React.lazy(() => import('./pages/customer/subs
 const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
 const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
 const CustomerCreditGrantDetail = React.lazy(() => import('./pages/customer/credit-grant/detail'));
+const CustomerCreditTransactionDetail = React.lazy(() => import('./pages/customer/credit-transaction/detail'));
 const CustomerRecharge = React.lazy(() => import('./pages/customer/recharge/subscription'));
 const CustomerPayoutDetail = React.lazy(() => import('./pages/customer/payout/detail'));
 const IntegrationsPage = React.lazy(() => import('./pages/integrations'));
@@ -161,6 +162,15 @@ function App() {
                 </UserLayout>
               }
             />
+            <Route
+              key="customer-credit-transaction"
+              path="/customer/credit-transaction/:id"
+              element={
+                <UserLayout>
+                  <CustomerCreditTransactionDetail />
+                </UserLayout>
+              }
+            />
             <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
             <Route path="*" element={<Navigate to="/" />} />
           </Routes>

package/src/components/customer/credit-overview.tsx

@@ -136,7 +136,7 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
     const grantData = creditSummary?.grants?.[currencyId];
     const pendingAmount = creditSummary?.pendingAmount?.[currencyId] || '0';
 
-    if (!grantData) {
+    if (!grantData || grantData.status === 'inactive') {
       return null;
     }
 
@@ -145,6 +145,8 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
     const totalAmount = grantData.totalAmount || '0';
     const remainingAmount = grantData.remainingAmount || '0';
 
+    const cardTitle = grantData.meter?.name || currency.name;
+
     return (
       <Card
         key={currency.id}
@@ -173,7 +175,7 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
                 pb: 2,
               }}>
               <Typography variant="h6" component="div">
-                {grantData.meter?.name || currency.name} ({currency.symbol})
+                {cardTitle}
               </Typography>
               {showRecharge && (
                 <SplitButton
@@ -217,7 +219,15 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
                 {totalAmount === '0' && remainingAmount === '0' ? (
                   <>0 </>
                 ) : (
-                  <>{formatBNStr(remainingAmount, currency.decimal, 6, true)}</>
+                  <>
+                    {formatBNStr(remainingAmount, currency.decimal, 6, true)}
+                    {currency.symbol !== cardTitle && (
+                      <Typography variant="body2" component="span">
+                        {' '}
+                        {currency.symbol}
+                      </Typography>
+                    )}
+                  </>
                 )}
               </Typography>
             </Box>
@@ -239,6 +249,12 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
                     color: 'error.main',
                   }}>
                   {formatBNStr(pendingAmount, currency.decimal, 6, true)}
+                  {currency.symbol !== cardTitle && (
+                    <Typography variant="body2" component="span">
+                      {' '}
+                      {currency.symbol}
+                    </Typography>
+                  )}
                 </Typography>
               </Box>
             )}

package/src/locales/en.tsx

@@ -317,7 +317,7 @@ export default flat({
         label: 'Meter name',
         required: 'Meter name is required',
         placeholder: 'API requests',
-        help: 'A descriptive name for this meter that will be displayed in your dashboard.',
+        help: "A descriptive name for this meter that will be displayed in your dashboard and user's personal bill.",
       },
       eventName: {
         label: 'Event name',

package/src/locales/zh.tsx

@@ -315,7 +315,7 @@ export default flat({
         label: '计量器名称',
         required: '计量器名称为必填项',
         placeholder: 'API 请求',
-        help: '此计量器的描述性名称，将在您的仪表板中显示。',
+        help: '此计量器的描述性名称，将在您的仪表板以及用户个人账单中显示。',
       },
       eventName: {
         label: '事件名称',

package/src/pages/admin/customers/customers/credit-grant/detail.tsx

@@ -9,6 +9,7 @@ import {
   CreditTransactionsList,
   CreditStatusChip,
   getCustomerAvatar,
+  TxLink,
 } from '@blocklet/payment-react';
 import type { TCreditGrantExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -325,6 +326,18 @@ export default function AdminCreditGrantDetail({ id }: { id: string }) {
               {data.expires_at && (
                 <InfoRow label={t('common.expirationDate')} value={formatTime(data.expires_at * 1000)} />
               )}
+              {data.chain_detail?.mint?.hash && data.paymentMethod?.type === 'arcblock' && (
+                <InfoRow
+                  label={t('common.mintTxHash')}
+                  value={
+                    <TxLink
+                      details={{ arcblock: { tx_hash: data.chain_detail.mint.hash, payer: '' } }}
+                      method={data.paymentMethod}
+                      mode="dashboard"
+                    />
+                  }
+                />
+              )}
             </InfoRowGroup>
           </Box>
 

package/src/pages/admin/customers/customers/credit-transaction/detail.tsx

@@ -0,0 +1,324 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, formatBNStr, formatError, getCustomerAvatar, TxLink, SourceDataViewer } from '@blocklet/payment-react';
+import type { TCreditTransactionExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Avatar, Box, Button, Chip, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { styled } from '@mui/system';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import InfoMetric from '../../../../../components/info-metric';
+import InfoRow from '../../../../../components/info-row';
+import InfoRowGroup from '../../../../../components/info-row-group';
+import Copyable from '../../../../../components/copyable';
+import SectionHeader from '../../../../../components/section/header';
+import MetadataList from '../../../../../components/metadata/list';
+import { goBackOrFallback } from '../../../../../libs/util';
+import EventList from '../../../../../components/event/list';
+
+const fetchData = (id: string | undefined): Promise<TCreditTransactionExpanded> => {
+  return api.get(`/api/credit-transactions/${id}`).then((res) => res.data);
+};
+
+export default function AdminCreditTransactionDetail({ id }: { id: string }) {
+  const { t } = useLocaleContext();
+  const navigate = useNavigate();
+
+  const { loading, error, data } = useRequest(() => fetchData(id));
+
+  const handleBack = useCallback(() => {
+    goBackOrFallback('/admin/customers');
+  }, []);
+
+  if (error) {
+    return <Alert severity="error">{formatError(error)}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const getTransferStatusChip = (status: string | null | undefined) => {
+    if (!status) return null;
+
+    const statusConfig = {
+      pending: { label: t('common.pending'), color: 'warning' as const },
+      completed: { label: t('common.completed'), color: 'success' as const },
+      failed: { label: t('common.failed'), color: 'error' as const },
+    };
+
+    const config = statusConfig[status as keyof typeof statusConfig] || {
+      label: status,
+      color: 'default' as const,
+    };
+
+    return <Chip label={config.label} size="small" color={config.color} />;
+  };
+
+  return (
+    <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Stack
+            direction="row"
+            alignItems="center"
+            sx={{ fontWeight: 'normal', cursor: 'pointer' }}
+            onClick={handleBack}>
+            <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+            <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+              {t('admin.creditTransactions.title')}
+            </Typography>
+          </Stack>
+          <Stack direction="row" spacing={1}>
+            {data.creditGrant && (
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={() => navigate(`/admin/customers/${data.credit_grant_id}`)}>
+                {t('common.viewGrant')}
+              </Button>
+            )}
+            {data.subscription && (
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={() => navigate(`/admin/billing/${data.subscription_id}`)}>
+                {t('common.viewSubscription')}
+              </Button>
+            )}
+          </Stack>
+        </Stack>
+
+        <Box
+          mt={4}
+          mb={3}
+          sx={{
+            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="column" spacing={0.5}>
+              <Typography variant="h2" sx={{ fontWeight: 600 }}>
+                {data.description || t('common.creditTransaction')}
+              </Typography>
+              <Copyable text={data.id} />
+            </Stack>
+          </Stack>
+
+          <Stack
+            className="section-body"
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+              alignItems: 'flex-start',
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
+            <InfoMetric
+              label={t('common.creditAmount')}
+              value={
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Typography variant="body2" sx={{ color: 'error.main' }}>
+                    -{formatBNStr(data.credit_amount, data.creditGrant?.paymentCurrency?.decimal || 0)}{' '}
+                    {data.creditGrant?.paymentCurrency?.symbol}
+                  </Typography>
+                </Stack>
+              }
+              divider={!!data.transfer_status}
+            />
+            {data.transfer_status && (
+              <InfoMetric label={t('common.transferStatus')} value={getTransferStatusChip(data.transfer_status)} />
+            )}
+          </Stack>
+        </Box>
+        <Divider />
+      </Box>
+
+      <Stack
+        sx={{
+          flexDirection: {
+            xs: 'column',
+            lg: 'row',
+          },
+          gap: {
+            xs: 2.5,
+            md: 4,
+          },
+          '.transaction-column-1': {
+            minWidth: {
+              xs: '100%',
+              lg: '600px',
+            },
+          },
+          '.transaction-column-2': {
+            width: {
+              xs: '100%',
+              md: '100%',
+              lg: '320px',
+            },
+            maxWidth: {
+              xs: '100%',
+              md: '33%',
+            },
+          },
+        }}>
+        <Box flex={1} className="transaction-column-1" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section" sx={{ containerType: 'inline-size' }}>
+            <SectionHeader title={t('admin.details')} />
+            <InfoRowGroup
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: 'repeat(1, 1fr)',
+                  xl: 'repeat(2, 1fr)',
+                },
+                '@container (min-width: 1000px)': {
+                  gridTemplateColumns: 'repeat(2, 1fr)',
+                },
+                '.info-row-wrapper': {
+                  gap: 1,
+                  flexDirection: {
+                    xs: 'column',
+                    xl: 'row',
+                  },
+                  alignItems: {
+                    xs: 'flex-start',
+                    xl: 'center',
+                  },
+                  '@container (min-width: 1000px)': {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  },
+                },
+              }}>
+              <InfoRow
+                label={t('common.customer')}
+                value={
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <Avatar
+                      src={getCustomerAvatar(
+                        data.customer?.did,
+                        data.customer?.updated_at ? new Date(data.customer.updated_at).toISOString() : '',
+                        24
+                      )}
+                      alt={data.customer?.name}
+                      sx={{ width: 24, height: 24 }}
+                    />
+                    <Typography>{data.customer?.name}</Typography>
+                  </Stack>
+                }
+              />
+              <InfoRow
+                label={t('common.creditGrant')}
+                value={
+                  <Typography
+                    component="span"
+                    onClick={() => navigate(`/admin/customers/${data.credit_grant_id}`)}
+                    sx={{ color: 'text.link', cursor: 'pointer' }}>
+                    {data.creditGrant?.name || data.credit_grant_id}
+                  </Typography>
+                }
+              />
+              {data.meter && (
+                <InfoRow
+                  label={t('common.meterEvent')}
+                  value={
+                    <Typography
+                      component="span"
+                      onClick={() => navigate(`/admin/billing/${data.meter_id}`)}
+                      sx={{ color: 'text.link', cursor: 'pointer' }}>
+                      {data.meter.name || data.meter.event_name}
+                    </Typography>
+                  }
+                />
+              )}
+              {data.subscription && (
+                <InfoRow
+                  label={t('admin.subscription.name')}
+                  value={
+                    <Typography
+                      component="span"
+                      onClick={() => navigate(`/admin/billing/${data.subscription_id}`)}
+                      sx={{ color: 'text.link', cursor: 'pointer' }}>
+                      {data.subscription.description || data.subscription_id}
+                    </Typography>
+                  }
+                />
+              )}
+              {data.transfer_hash && data.paymentMethod && (
+                <InfoRow
+                  label={t('common.transferTxHash')}
+                  value={
+                    <TxLink
+                      details={{ arcblock: { tx_hash: data.transfer_hash, payer: '' } }}
+                      method={data.paymentMethod}
+                      mode="dashboard"
+                    />
+                  }
+                />
+              )}
+            </InfoRowGroup>
+          </Box>
+
+          {data.meterEvent?.source_data && (
+            <>
+              <Divider />
+              <Box className="section">
+                <SectionHeader title={t('common.sourceData')} />
+                <Box className="section-body">
+                  <SourceDataViewer data={data.meterEvent.source_data} />
+                </Box>
+              </Box>
+            </>
+          )}
+
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('admin.events.title')} />
+            <Box className="section-body">
+              <EventList features={{ toolbar: false }} object_id={data.id} />
+            </Box>
+          </Box>
+        </Box>
+
+        <Box className="transaction-column-2" sx={{ gap: 2.5, display: 'flex', flexDirection: 'column' }}>
+          <Box className="section">
+            <SectionHeader title={t('common.metadata.label')} />
+            <Box className="section-body">
+              <MetadataList data={data.metadata} />
+            </Box>
+          </Box>
+        </Box>
+      </Stack>
+    </Root>
+  );
+}
+
+const Root = styled(Stack)``;

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

@@ -7,6 +7,7 @@ import { useTransitionContext } from '../../../components/progress-bar';
 
 const CustomerDetail = React.lazy(() => import('./customers/detail'));
 const CreditGrantDetail = React.lazy(() => import('./customers/credit-grant/detail'));
+const CreditTransactionDetail = React.lazy(() => import('./customers/credit-transaction/detail'));
 
 const pages = {
   overview: React.lazy(() => import('./customers')),
@@ -26,6 +27,10 @@ export default function CustomerIndex() {
     return <CreditGrantDetail id={page} />;
   }
 
+  if (page.startsWith('cbtxn_')) {
+    return <CreditTransactionDetail id={page} />;
+  }
+
   const onTabChange = (newTab: string) => {
     startTransition(() => {
       navigate(`/admin/customers/${newTab}`);

package/src/pages/customer/credit-grant/detail.tsx

@@ -7,6 +7,7 @@ import {
   CreditTransactionsList,
   CreditStatusChip,
   getCustomerAvatar,
+  TxLink,
 } from '@blocklet/payment-react';
 import type { TCreditGrantExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -40,7 +41,7 @@ export default function CustomerCreditGrantDetail() {
   }, [navigate]);
 
   if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
-    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+    return <Alert severity="error">{t('common.accessDenied')}</Alert>;
   }
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
@@ -271,6 +272,18 @@ export default function CustomerCreditGrantDetail() {
           />
           <InfoRow label={t('admin.creditProduct.priority.label')} value={<Typography>{data.priority}</Typography>} />
           <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          {data.chain_detail?.mint?.hash && data.paymentMethod?.type === 'arcblock' && (
+            <InfoRow
+              label={t('common.mintTxHash')}
+              value={
+                <TxLink
+                  details={{ arcblock: { tx_hash: data.chain_detail.mint.hash, payer: '' } }}
+                  method={data.paymentMethod}
+                  mode="customer"
+                />
+              }
+            />
+          )}
         </InfoRowGroup>
       </Box>
 

package/src/pages/customer/credit-transaction/detail.tsx

@@ -0,0 +1,289 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, formatBNStr, formatTime, getCustomerAvatar, TxLink, SourceDataViewer } from '@blocklet/payment-react';
+import type { TCreditTransactionExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Avatar, Box, Button, Chip, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { useRequest } from 'ahooks';
+import { useNavigate, useParams } from 'react-router-dom';
+import { styled } from '@mui/system';
+import { useCallback } from 'react';
+import InfoMetric from '../../../components/info-metric';
+import { useSessionContext } from '../../../contexts/session';
+import SectionHeader from '../../../components/section/header';
+import InfoRow from '../../../components/info-row';
+import InfoRowGroup from '../../../components/info-row-group';
+import { useArcsphere } from '../../../hooks/browser';
+
+const fetchData = (id: string | undefined): Promise<TCreditTransactionExpanded> => {
+  return api.get(`/api/credit-transactions/${id}`).then((res: any) => res.data);
+};
+
+export default function CustomerCreditTransactionDetail() {
+  const { id } = useParams() as { id: string };
+  const navigate = useNavigate();
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const inArcsphere = useArcsphere();
+  const { loading, error, data } = useRequest(() => fetchData(id));
+
+  const handleBack = useCallback(() => {
+    navigate('/customer', { replace: true });
+  }, [navigate]);
+
+  if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
+    return <Alert severity="error">{t('common.accessDenied')}</Alert>;
+  }
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  if (loading || !data) {
+    return <CircularProgress />;
+  }
+
+  const getTransferStatusChip = (status: string | null | undefined) => {
+    if (!status) return null;
+
+    const statusConfig = {
+      pending: { label: t('common.pending'), color: 'warning' as const },
+      completed: { label: t('common.completed'), color: 'success' as const },
+      failed: { label: t('common.failed'), color: 'error' as const },
+    };
+
+    const config = statusConfig[status as keyof typeof statusConfig] || {
+      label: status,
+      color: 'default' as const,
+    };
+
+    return <Chip label={config.label} size="small" color={config.color} />;
+  };
+
+  return (
+    <Root>
+      <Box>
+        <Stack
+          className="page-header"
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ position: 'relative' }}>
+          {!inArcsphere ? (
+            <Stack
+              direction="row"
+              onClick={handleBack}
+              alignItems="center"
+              sx={{ 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.creditTransactions.title')}
+              </Typography>
+            </Stack>
+          ) : (
+            <Box />
+          )}
+          <Stack direction="row" spacing={1}>
+            {data.creditGrant && (
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={() => navigate(`/customer/credit-grant/${data.credit_grant_id}`)}>
+                {t('common.viewGrant')}
+              </Button>
+            )}
+            {data.subscription && (
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={() => navigate(`/customer/subscription/${data.subscription_id}`)}>
+                {t('common.viewSubscription')}
+              </Button>
+            )}
+          </Stack>
+        </Stack>
+
+        <Box
+          mt={4}
+          sx={{
+            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="column" alignItems="flex-start" justifyContent="space-around">
+              <Typography variant="h2" color="text.primary">
+                {data.description || t('common.creditTransaction')}
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+                {data.id}
+              </Typography>
+            </Stack>
+          </Stack>
+
+          <Stack
+            className="section-body"
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{
+              'hr.MuiDivider-root:last-child': {
+                display: 'none',
+              },
+              flexDirection: {
+                xs: 'column',
+                sm: 'column',
+                md: 'row',
+              },
+              alignItems: 'flex-start',
+              gap: {
+                xs: 1,
+                sm: 1,
+                md: 3,
+              },
+            }}>
+            <InfoMetric
+              label={t('common.creditAmount')}
+              value={
+                <Stack direction="row" alignItems="center" spacing={0.5}>
+                  <Typography variant="body2" sx={{ color: 'error.main' }}>
+                    -{formatBNStr(data.credit_amount, data.creditGrant?.paymentCurrency?.decimal || 0)}{' '}
+                    {data.creditGrant?.paymentCurrency?.symbol}
+                  </Typography>
+                </Stack>
+              }
+              divider
+            />
+            {data.transfer_status && (
+              <InfoMetric
+                label={t('common.transferStatus')}
+                value={getTransferStatusChip(data.transfer_status)}
+                divider
+              />
+            )}
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          </Stack>
+        </Box>
+      </Box>
+
+      <Box className="section" sx={{ containerType: 'inline-size' }}>
+        <SectionHeader title={t('admin.details')} />
+        <InfoRowGroup
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: {
+              xs: 'repeat(1, 1fr)',
+              xl: 'repeat(2, 1fr)',
+            },
+            '@container (min-width: 1000px)': {
+              gridTemplateColumns: 'repeat(2, 1fr)',
+            },
+            '.info-row-wrapper': {
+              gap: 1,
+              flexDirection: {
+                xs: 'column',
+                xl: 'row',
+              },
+              alignItems: {
+                xs: 'flex-start',
+                xl: 'center',
+              },
+              '@container (min-width: 1000px)': {
+                flexDirection: 'row',
+                alignItems: 'center',
+              },
+            },
+          }}>
+          <InfoRow
+            label={t('common.customer')}
+            value={
+              <Stack direction="row" alignItems="center" spacing={1}>
+                <Avatar
+                  src={getCustomerAvatar(
+                    data.customer?.did,
+                    data.customer?.updated_at ? new Date(data.customer.updated_at).toISOString() : '',
+                    24
+                  )}
+                  alt={data.customer?.name}
+                  sx={{ width: 24, height: 24 }}
+                />
+                <Typography>{data.customer?.name}</Typography>
+              </Stack>
+            }
+          />
+          <InfoRow
+            label={t('common.creditGrant')}
+            value={
+              <Typography
+                component="span"
+                onClick={() => navigate(`/customer/credit-grant/${data.credit_grant_id}`)}
+                sx={{ color: 'text.link', cursor: 'pointer' }}>
+                {data.creditGrant?.name || data.credit_grant_id}
+              </Typography>
+            }
+          />
+          {data.subscription && (
+            <InfoRow
+              label={t('admin.subscription.name')}
+              value={
+                <Typography
+                  component="span"
+                  onClick={() => navigate(`/customer/subscription/${data.subscription_id}`)}
+                  sx={{ color: 'text.link', cursor: 'pointer' }}>
+                  {data.subscription.description || data.subscription_id}
+                </Typography>
+              }
+            />
+          )}
+          {data.transfer_hash && data.paymentMethod && (
+            <InfoRow
+              label={t('common.transferTxHash')}
+              value={
+                <TxLink
+                  details={{ arcblock: { tx_hash: data.transfer_hash, payer: '' } }}
+                  method={data.paymentMethod}
+                  mode="customer"
+                />
+              }
+            />
+          )}
+        </InfoRowGroup>
+      </Box>
+
+      {data.meterEvent?.source_data && (
+        <>
+          <Divider />
+          <Box className="section">
+            <SectionHeader title={t('common.sourceData')} />
+            <Box className="section-body">
+              <SourceDataViewer data={data.meterEvent.source_data} />
+            </Box>
+          </Box>
+        </>
+      )}
+    </Root>
+  );
+}
+
+const Root = styled(Stack)`
+  margin-bottom: 24px;
+  gap: 24px;
+  flex-direction: column;
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .section-header {
+      font-size: 18px;
+    }
+  }
+`;

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

@@ -122,7 +122,7 @@ export default function CustomerInvoiceDetail() {
   }, [error]);
 
   if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
-    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+    return <Alert severity="error">{t('common.accessDenied')}</Alert>;
   }
 
   if (error) {

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

@@ -228,7 +228,7 @@ export default function RechargePage() {
   }
 
   if (subscription?.customer?.did && session?.user?.did && subscription.customer.did !== session.user.did) {
-    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+    return <Alert severity="error">{t('common.accessDenied')}</Alert>;
   }
   const currentBalance = formatBNStr(payerValue?.token || '0', paymentCurrency?.decimal, 6, false);
 

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

@@ -119,7 +119,7 @@ export default function CustomerSubscriptionDetail() {
   }, []);
 
   if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
-    return <Alert severity="error">You do not have permission to access other customer data</Alert>;
+    return <Alert severity="error">{t('common.accessDenied')}</Alert>;
   }
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;