payment-kit 1.22.32 → 1.23.1

package/src/pages/admin/billing/meters/create.tsx

@@ -5,15 +5,24 @@ import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
 import { useForm, FormProvider } from 'react-hook-form';
 import Toast from '@arcblock/ux/lib/Toast';
 import { dispatch } from 'use-bus';
+import { useLocalStorageState } from 'ahooks';
 
 import type { TMeter } from '@blocklet/payment-types';
-import MeterForm from '../../../../components/meter/form';
+import MeterForm, { type TokenConfig } from '../../../../components/meter/form';
 import DrawerForm from '../../../../components/drawer-form';
 
+type TMeterForm = TMeter & {
+  mode?: 'OffChain' | 'OnChain';
+  tokenFactoryAddress?: string;
+};
+
 export default function MeterCreate() {
   const { t } = useLocaleContext();
   const { refresh } = usePaymentContext();
-  const methods = useForm<TMeter>({
+  const [tokenConfig, setTokenConfig] = useLocalStorageState<TokenConfig>('payment_kit_token_config', {
+    defaultValue: { name: '', symbol: '', tokenFactoryAddress: '' },
+  });
+  const methods = useForm<TMeterForm>({
     defaultValues: {
       name: '',
       event_name: '',
@@ -21,22 +30,38 @@ export default function MeterCreate() {
       unit: '',
       description: '',
       metadata: {},
+      mode: 'OffChain',
     },
   });
 
-  const { handleSubmit, reset, clearErrors } = methods;
-
-  const onSubmit = async (data: TMeter) => {
+  const onSubmit = async (data: TMeterForm) => {
     try {
-      await api.post('/api/meters', data);
+      const submitData: any = { ...data };
+      delete submitData.mode;
+
+      if (data.mode === 'OnChain') {
+        let tokenFactoryAddress = tokenConfig?.tokenFactoryAddress;
+        // Create new token if no existing token selected
+        if (!tokenFactoryAddress && tokenConfig?.symbol) {
+          const { data: factory } = await api.post('/api/credit-tokens', {
+            name: tokenConfig.name,
+            symbol: tokenConfig.symbol,
+          });
+          tokenFactoryAddress = factory.address;
+        }
+        if (tokenFactoryAddress) {
+          submitData.token = { tokenFactoryAddress };
+        }
+      }
+
+      await api.post('/api/meters', submitData);
       Toast.success(t('admin.meter.saved'));
-      reset();
-      clearErrors();
+      setTokenConfig({ name: '', symbol: '', tokenFactoryAddress: '' });
+      methods.reset();
       dispatch('meter.created');
       dispatch('drawer.submitted');
       refresh(true);
-    } catch (err) {
-      console.error(err);
+    } catch (err: any) {
       Toast.error(formatError(err));
     }
   };
@@ -45,15 +70,19 @@ export default function MeterCreate() {
     <DrawerForm
       icon={<AddOutlined />}
       text={t('admin.meter.add')}
-      onClose={() => clearErrors()}
+      onClose={methods.clearErrors}
       width={640}
       addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
+        <Button
+          variant="contained"
+          size="small"
+          disabled={methods.formState.isSubmitting}
+          onClick={methods.handleSubmit(onSubmit as any)}>
           {t('admin.meter.save')}
         </Button>
       }>
       <FormProvider {...methods}>
-        <MeterForm />
+        <MeterForm tokenConfig={tokenConfig!} onTokenConfigChange={setTokenConfig} />
       </FormProvider>
     </DrawerForm>
   );

package/src/pages/admin/billing/meters/detail.tsx

@@ -20,7 +20,7 @@ import SectionHeader from '../../../../components/section/header';
 import { goBackOrFallback } from '../../../../libs/util';
 import MeterEventsList from '../../../../components/meter/events-list';
 import MeterProducts from '../../../../components/meter/products';
-import MeterForm from '../../../../components/meter/form';
+import MeterForm, { type TokenConfig } from '../../../../components/meter/form';
 import DrawerForm from '../../../../components/drawer-form';
 
 const getMeter = (id: string): Promise<TMeter & { paymentCurrency: TPaymentCurrency }> => {
@@ -58,9 +58,14 @@ export default function MeterDetail(props: { id: string }) {
       product: false,
       creditProduct: false,
     },
+    tokenConfig: { name: '', symbol: '', tokenFactoryAddress: '' } as TokenConfig,
   });
 
-  const methods = useForm<TMeter>({
+  type TMeterForm = TMeter & {
+    mode?: 'OffChain' | 'OnChain';
+  };
+
+  const methods = useForm<TMeterForm>({
     defaultValues: {
       name: '',
       event_name: '',
@@ -68,6 +73,7 @@ export default function MeterDetail(props: { id: string }) {
       unit: '',
       description: '',
       metadata: {},
+      mode: 'OffChain',
     },
   });
 
@@ -108,6 +114,7 @@ export default function MeterDetail(props: { id: string }) {
   };
 
   const handleEditMeter = () => {
+    const hasTokenConfig = !!data.paymentCurrency?.token_config;
     // 设置表单默认值
     methods.reset({
       name: data.name,
@@ -116,14 +123,53 @@ export default function MeterDetail(props: { id: string }) {
       unit: data.unit,
       description: data.description || '',
       metadata: data.metadata || {},
+      mode: hasTokenConfig ? 'OnChain' : 'OffChain',
     });
-    setState((prev) => ({ editing: { ...prev.editing, meter: true } }));
+    setState((prev) => ({
+      editing: { ...prev.editing, meter: true },
+      tokenConfig: { name: '', symbol: '', tokenFactoryAddress: '' },
+    }));
   };
 
-  const onUpdateMeter = async (formData: TMeter) => {
+  const onUpdateMeter = async (formData: TMeterForm) => {
     try {
       setState((prev) => ({ loading: { ...prev.loading, meter: true } }));
+
+      const currencyId = data.paymentCurrency?.id;
+      const hasTokenConfig = !!data.paymentCurrency?.token_config;
+
+      // If enabling on-chain and no token_config yet
+      if (currencyId && !hasTokenConfig && formData.mode === 'OnChain') {
+        let { tokenFactoryAddress } = state.tokenConfig;
+
+        // Create new token if not using existing
+        if (!tokenFactoryAddress && state.tokenConfig.symbol) {
+          const { data: factory } = await api.post('/api/credit-tokens', {
+            name: state.tokenConfig.name,
+            symbol: state.tokenConfig.symbol,
+          });
+          tokenFactoryAddress = factory.address;
+        }
+
+        // Update currency with token_config
+        if (tokenFactoryAddress) {
+          await api.put(`/api/payment-currencies/${currencyId}/token-config`, {
+            token_factory_address: tokenFactoryAddress,
+          });
+        }
+      }
+
+      // If disabling on-chain and has token_config, remove it
+      if (currencyId && hasTokenConfig && formData.mode === 'OffChain') {
+        await api.delete(`/api/payment-currencies/${currencyId}/token-config`);
+      }
+
+      // Clean up frontend-only fields before sending
+      delete formData.mode;
+
+      // Update meter basic info
       await api.put(`/api/meters/${props.id}`, formData);
+
       Toast.success(t('admin.meter.saved'));
       setState((prev) => ({ editing: { ...prev.editing, meter: false } }));
       runAsync();
@@ -442,7 +488,12 @@ export default function MeterDetail(props: { id: string }) {
             </Button>
           }>
           <FormProvider {...methods}>
-            <MeterForm mode="edit" />
+            <MeterForm
+              mode="edit"
+              paymentCurrency={data.paymentCurrency}
+              tokenConfig={state.tokenConfig}
+              onTokenConfigChange={(next) => setState({ tokenConfig: next })}
+            />
           </FormProvider>
         </DrawerForm>
       )}

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>