payment-kit 1.22.31 → 1.23.0

package/src/components/meter/form.tsx

@@ -1,23 +1,54 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput, FormLabel, Collapse } from '@blocklet/payment-react';
-import { FormControl, Select, MenuItem, Typography, Box, FormHelperText, Stack } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { FormInput, FormLabel, Collapse, usePaymentContext } from '@blocklet/payment-react';
+import {
+  FormControl,
+  Select,
+  MenuItem,
+  Typography,
+  Box,
+  FormHelperText,
+  Stack,
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  Switch,
+  Autocomplete,
+  TextField,
+} from '@mui/material';
+import { useFormContext, useWatch, Controller } from 'react-hook-form';
 import { InfoOutlined } from '@mui/icons-material';
+import { useRequest } from 'ahooks';
+import { useState, useMemo } from 'react';
+import GraphQLClient from '@ocap/client';
 
-import type { TMeter } from '@blocklet/payment-types';
+import type { TMeter, TPaymentCurrency } from '@blocklet/payment-types';
 import MetadataForm from '../metadata/form';
 
+export type TokenConfig = { name: string; symbol: string; tokenFactoryAddress: string };
+
 type Props = {
   mode?: 'create' | 'edit';
+  tokenConfig?: TokenConfig;
+  onTokenConfigChange?: (next: TokenConfig) => void;
+  paymentCurrency?: TPaymentCurrency;
+};
+
+type TMeterForm = TMeter & {
+  mode?: 'OffChain' | 'OnChain';
 };
 
-function MeterForm({ mode = 'create' }: Props) {
+function MeterForm({
+  mode = 'create',
+  tokenConfig = undefined,
+  onTokenConfigChange = undefined,
+  paymentCurrency = undefined,
+}: Props) {
   const { t } = useLocaleContext();
   const {
     register,
     control,
     formState: { errors },
-  } = useFormContext<TMeter>();
+  } = useFormContext<TMeterForm>();
 
   // 监听聚合方法的变化，用于显示动态帮助信息
   const aggregationMethod = useWatch({
@@ -26,20 +57,52 @@ function MeterForm({ mode = 'create' }: Props) {
     defaultValue: 'sum',
   });
 
-  const getAggregationDescription = (method: string) => {
-    switch (method) {
-      case 'sum':
-        return t('admin.meter.aggregationMethod.sumDescription');
-      case 'count':
-        return t('admin.meter.aggregationMethod.countDescription');
-      case 'last':
-        return t('admin.meter.aggregationMethod.lastDescription');
-      default:
-        return '';
-    }
-  };
+  const creditMode = useWatch({
+    control,
+    name: 'mode',
+    defaultValue: 'OffChain',
+  });
+
+  const [tokenType, setTokenType] = useState<'new' | 'existing'>(tokenConfig?.tokenFactoryAddress ? 'existing' : 'new');
 
   const isEditing = mode === 'edit';
+  const { settings } = usePaymentContext();
+
+  // Check if current currency already has token_config
+  const hasTokenConfig = !!paymentCurrency?.token_config;
+
+  // Get GraphQL client for arcblock chain
+  const arcblockClient = useMemo(() => {
+    const arcblockMethod = settings.paymentMethods?.find((m) => m.type === 'arcblock') as any;
+    const apiHost = arcblockMethod?.api_host;
+    return apiHost ? new GraphQLClient(apiHost) : null;
+  }, [settings.paymentMethods]);
+
+  // Fetch tokens created by blocklet owner
+  const { data: tokens = [] } = useRequest(
+    async () => {
+      if (!arcblockClient || !window.blocklet?.appId) {
+        return [];
+      }
+      const result = await arcblockClient.listTokens({
+        issuerAddress: window.blocklet.appId,
+      });
+      return result?.tokens || [];
+    },
+    {
+      refreshDeps: [creditMode, arcblockClient],
+      ready: creditMode === 'OnChain' && !hasTokenConfig && !!arcblockClient,
+    }
+  );
+
+  const getAggregationDescription = (method: string) => {
+    const map: Record<string, string> = {
+      sum: t('admin.meter.aggregationMethod.sumDescription'),
+      count: t('admin.meter.aggregationMethod.countDescription'),
+      last: t('admin.meter.aggregationMethod.lastDescription'),
+    };
+    return map[method] || '';
+  };
 
   return (
     <Box sx={{ maxWidth: 600 }}>
@@ -223,6 +286,116 @@ function MeterForm({ mode = 'create' }: Props) {
           </FormHelperText>
         </Box>
 
+        {/* On-chain token configuration */}
+        <Box sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
+          <Controller
+            name="mode"
+            control={control}
+            render={({ field }) => (
+              <Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Box>
+                  <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+                    {t('admin.meter.creditMode.onchain')}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+                    {t('admin.meter.creditMode.onChainDescription')}
+                  </Typography>
+                </Box>
+                <Switch
+                  checked={hasTokenConfig ? field.value !== 'OffChain' : field.value === 'OnChain'}
+                  onChange={(e) => field.onChange(e.target.checked ? 'OnChain' : 'OffChain')}
+                />
+              </Stack>
+            )}
+          />
+
+          {(hasTokenConfig || creditMode === 'OnChain') && (
+            <Box sx={{ mt: 3, pt: 3, borderTop: '1px solid', borderColor: 'divider' }}>
+              <Typography variant="subtitle2" sx={{ mb: 2 }}>
+                {t('admin.meter.creditMode.tokenConfiguration')}
+              </Typography>
+              {!hasTokenConfig && (
+                <RadioGroup
+                  value={tokenType}
+                  onChange={(e) => {
+                    setTokenType(e.target.value as any);
+                    onTokenConfigChange?.({ name: '', symbol: '', tokenFactoryAddress: '' });
+                  }}
+                  row>
+                  <FormControlLabel
+                    value="new"
+                    control={<Radio />}
+                    label={t('admin.meter.creditMode.createNewToken')}
+                  />
+                  <FormControlLabel
+                    value="existing"
+                    control={<Radio />}
+                    label={t('admin.meter.creditMode.useExistingToken')}
+                  />
+                </RadioGroup>
+              )}
+              {!hasTokenConfig && tokenType === 'new' && tokenConfig && onTokenConfigChange ? (
+                <Box sx={{ mt: 2 }}>
+                  <TextField
+                    value={tokenConfig.name}
+                    onChange={(e) => onTokenConfigChange({ ...tokenConfig, name: e.target.value })}
+                    fullWidth
+                    label={t('admin.meter.creditMode.tokenName')}
+                    inputProps={{ maxLength: 64 }}
+                    sx={{ mb: 2 }}
+                  />
+                  <TextField
+                    value={tokenConfig.symbol}
+                    onChange={(e) => onTokenConfigChange({ ...tokenConfig, symbol: e.target.value.toUpperCase() })}
+                    fullWidth
+                    label={t('admin.meter.creditMode.tokenSymbol')}
+                    inputProps={{ maxLength: 6, style: { textTransform: 'uppercase', fontFamily: 'monospace' } }}
+                  />
+                </Box>
+              ) : (
+                <Box sx={{ mt: 2 }}>
+                  {hasTokenConfig && paymentCurrency?.token_config ? (
+                    <TextField
+                      fullWidth
+                      label={t('admin.meter.creditMode.selectToken')}
+                      value={`${paymentCurrency.token_config.symbol} (${paymentCurrency.token_config.name})`}
+                      disabled
+                    />
+                  ) : (
+                    <Autocomplete
+                      options={tokens}
+                      getOptionLabel={(o: any) => (typeof o === 'string' ? o : `${o.symbol} (${o.name})`)}
+                      value={
+                        tokens.find((f: any) => f.tokenFactoryAddress === tokenConfig?.tokenFactoryAddress) || null
+                      }
+                      onChange={(_, v: any) =>
+                        onTokenConfigChange?.({
+                          name: v?.name || '',
+                          symbol: v?.symbol || '',
+                          tokenFactoryAddress: v?.tokenFactoryAddress || '',
+                        })
+                      }
+                      renderInput={(params) => (
+                        <TextField {...params} label={t('admin.meter.creditMode.selectToken')} />
+                      )}
+                      renderOption={(props, o: any) => (
+                        <li {...props}>
+                          <Box>
+                            <Typography variant="body1">{o.symbol}</Typography>
+                            <Typography variant="caption" color="text.secondary">
+                              {o.name}
+                            </Typography>
+                          </Box>
+                        </li>
+                      )}
+                    />
+                  )}
+                </Box>
+              )}
+            </Box>
+          )}
+        </Box>
+
         {/* Metadata Section */}
         <Collapse trigger={t('common.metadata.label')}>
           <Box sx={{ mb: 2 }}>

package/src/components/price/form.tsx

@@ -835,65 +835,77 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
               />
 
               {/* 可用时长配置 */}
-              <Box sx={{ width: '100%', mb: 2 }}>
-                <FormLabel tooltip={t('admin.creditProduct.validDuration.help')}>
-                  {t('admin.creditProduct.validDuration.label')}
-                </FormLabel>
-                <Stack
-                  direction="row"
-                  spacing={1}
-                  sx={{
-                    alignItems: 'center',
-                  }}>
-                  <Controller
-                    name={getFieldName('metadata.credit_config.valid_duration_value')}
-                    control={control}
-                    render={({ field }) => (
+              <Controller
+                name={getFieldName('metadata')}
+                control={control}
+                render={({ field }) => (
+                  <Box sx={{ width: '100%', mb: 2 }}>
+                    <FormLabel tooltip={t('admin.creditProduct.validDuration.help')}>
+                      {t('admin.creditProduct.validDuration.label')}
+                    </FormLabel>
+                    <Stack
+                      direction="row"
+                      spacing={1}
+                      sx={{
+                        alignItems: 'center',
+                      }}>
                       <TextField
-                        {...field}
                         size="small"
                         type="number"
                         sx={{ flex: 1 }}
-                        value={field.value ?? '0'}
+                        value={field.value?.credit_config?.valid_duration_value ?? '0'}
                         placeholder="0"
                         disabled={isLocked}
+                        onChange={(e) => {
+                          const metadata = field.value || {};
+                          const creditConfig = metadata.credit_config || {};
+                          const value = +e.target.value;
+                          if (!Number.isNaN(value) && value >= 0) {
+                            creditConfig.valid_duration_value = +value;
+                          } else {
+                            delete creditConfig.valid_duration_value;
+                          }
+                          metadata.credit_config = creditConfig;
+                          field.onChange(metadata);
+                        }}
                         slotProps={{
                           htmlInput: {
                             min: 0,
+                            step: 0.1,
                           },
                         }}
                       />
-                    )}
-                  />
-                  <Controller
-                    name={getFieldName('metadata.credit_config.valid_duration_unit')}
-                    control={control}
-                    render={({ field }) => (
                       <Select
-                        {...field}
                         size="small"
                         sx={{ minWidth: 120 }}
                         disabled={isLocked}
-                        value={field.value || 'days'}>
+                        value={field.value?.credit_config?.valid_duration_unit || 'days'}
+                        onChange={(e) => {
+                          const metadata = field.value || {};
+                          const creditConfig = metadata.credit_config || {};
+                          creditConfig.valid_duration_unit = e.target.value;
+                          metadata.credit_config = creditConfig;
+                          field.onChange(metadata);
+                        }}>
                         {!livemode && <MenuItem value="hours">{t('admin.creditProduct.validDuration.hours')}</MenuItem>}
                         <MenuItem value="days">{t('admin.creditProduct.validDuration.days')}</MenuItem>
                         <MenuItem value="weeks">{t('admin.creditProduct.validDuration.weeks')}</MenuItem>
                         <MenuItem value="months">{t('admin.creditProduct.validDuration.months')}</MenuItem>
                         <MenuItem value="years">{t('admin.creditProduct.validDuration.years')}</MenuItem>
                       </Select>
-                    )}
-                  />
-                </Stack>
-                <Typography
-                  variant="caption"
-                  sx={{
-                    color: 'text.secondary',
-                    display: 'block',
-                    mt: 0.5,
-                  }}>
-                  {t('admin.creditProduct.validDuration.description')}
-                </Typography>
-              </Box>
+                    </Stack>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        display: 'block',
+                        mt: 0.5,
+                      }}>
+                      {t('admin.creditProduct.validDuration.description')}
+                    </Typography>
+                  </Box>
+                )}
+              />
 
               {/* 关联特定价格 */}
               <Controller

package/src/locales/en.tsx

@@ -273,6 +273,30 @@ export default flat({
       edit: 'Edit meter',
       save: 'Save meter',
       saved: 'Meter successfully saved',
+      creditMode: {
+        onchain: 'OnChain',
+        onChainDescription: 'Once enabled, your credit will be published as a Token on the ArcBlock blockchain',
+        tokenConfiguration: 'Token Configuration',
+        createNewToken: 'Create New Token',
+        useExistingToken: 'Use Existing Token',
+        createTokenHint: 'Fill in the token name and symbol to create a new Token',
+        tokenName: 'Token Name',
+        tokenNamePlaceholder: 'Enter token name',
+        tokenNameRequired: 'Token name is required',
+        tokenSymbol: 'Token Symbol',
+        tokenSymbolPlaceholder: 'Enter token symbol',
+        tokenSymbolRequired: 'Token symbol is required',
+        tokenSymbolFormat: 'Symbol must be 1-6 uppercase letters or numbers',
+        createTokenButton: 'Create Token',
+        creatingToken: 'Creating...',
+        tokenCreated: 'Token created successfully',
+        tokenCreatedLabel: 'Token Created',
+        tokenAddress: 'Token Address',
+        selectToken: 'Select Token',
+        selectTokenPlaceholder: 'Select an existing token',
+        tokenAddressRequired: 'Token address is required',
+        enabled: 'Enabled',
+      },
       activate: 'Activate meter',
       activated: 'Meter activated successfully',
       deactivate: 'Deactivate meter',

package/src/locales/zh.tsx

@@ -283,6 +283,32 @@ export default flat({
       basicInfo: '基本信息',
       basicInfoDescription: '配置计量器的核心设置以跟踪使用事件。',
       editDescription: '更新计量器名称、描述和元数据。事件名称和聚合方法等核心设置无法更改。',
+
+      creditMode: {
+        onchain: 'OnChain',
+        onChainDescription:
+          '开启后你的 Credit 将作为 Token 发布在 ArcBlock 区块链上，用户的充值、退款和消费将在链上公开记录且不可篡改。',
+        tokenConfiguration: 'Token 配置',
+        createNewToken: '创建新 Token',
+        useExistingToken: '使用现有 Token',
+        createTokenHint: '填写 Token 名称和符号以创建新 Token',
+        tokenName: 'Token 名称',
+        tokenNamePlaceholder: '请输入 Token 名称',
+        tokenNameRequired: 'Token 名称不能为空',
+        tokenSymbol: 'Token 符号',
+        tokenSymbolPlaceholder: '请输入 Token 符号',
+        tokenSymbolRequired: 'Token 符号不能为空',
+        tokenSymbolFormat: '符号必须为 1-6 个大写字母或数字',
+        createTokenButton: '创建 Token',
+        creatingToken: '创建中...',
+        tokenCreated: 'Token 创建成功',
+        tokenCreatedLabel: 'Token 已创建',
+        tokenAddress: 'Token 地址',
+        selectToken: '选择 Token',
+        selectTokenPlaceholder: '请选择一个现有的 Token',
+        tokenAddressRequired: 'Token 地址不能为空',
+        enabled: '已启用',
+      },
       inactive: '计量器未激活',
       inactiveTip: '此计量器未收集使用数据。激活它以开始跟踪事件。',
       name: {

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>
       )}