payment-kit 1.19.2 → 1.19.4

package/api/src/libs/security.ts

@@ -17,6 +17,7 @@ type PermissionSpec<T extends Model> = {
     // allow record owner
     model: T;
     field: string;
+    findById?: (id: string) => Promise<T | null>;
   };
   mine?: boolean;
   embed?: boolean;
@@ -105,9 +106,11 @@ export function authenticate<T extends Model>({ component, roles, record, mine,
 
       // authenticate by record owner
       if (record) {
-        const { model, field = 'customer_id' } = record;
-        // @ts-ignore
-        const doc: T | null = await model.findByPk(req.params.id);
+        const { model, field = 'customer_id', findById } = record;
+        const doc: T | null =
+          findById && typeof findById === 'function'
+            ? await findById(req.params.id as string)
+            : await (model as any).findByPk(req.params.id);
         if (doc && doc[field as keyof T]) {
           const customer = await Customer.findOne({ where: { did: req.user.did } });
           req.doc = doc;

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

@@ -1010,7 +1010,6 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
     }
 
     const checkoutSession = req.doc as CheckoutSession;
-    logger.info('---checkoutSession---', checkoutSession.line_items);
     if (checkoutSession.line_items) {
       try {
         await validateInventory(checkoutSession.line_items);
@@ -1091,9 +1090,15 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
     } else {
       const updates: Record<string, any> = {};
       if (checkoutSession.customer_update?.name) {
-        updates.name = req.body.customer_name;
-        updates.email = req.body.customer_email;
-        updates.phone = req.body.customer_phone;
+        if (req.body.customer_name) {
+          updates.name = req.body.customer_name;
+        }
+        if (req.body.customer_email) {
+          updates.email = req.body.customer_email;
+        }
+        if (req.body.customer_phone) {
+          updates.phone = req.body.customer_phone;
+        }
       }
       if (checkoutSession.customer_update?.address) {
         updates.address = Customer.formatUpdateAddress(req.body.billing_address, customer);

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

@@ -10,6 +10,7 @@ import { authenticate } from '../libs/security';
 import { CreditGrant, Customer, PaymentCurrency, Price, Subscription } from '../store/models';
 import { createCreditGrant } from '../libs/credit-grant';
 import { getMeterPriceIdsFromSubscription } from '../libs/subscription';
+import { blocklet } from '../libs/auth';
 
 const router = Router();
 const auth = authenticate<CreditGrant>({ component: true, roles: ['owner', 'admin'] });
@@ -179,9 +180,30 @@ router.post('/', auth, async (req, res) => {
       return res.status(404).json({ error: `PaymentCurrency ${currencyId} not found` });
     }
 
-    const customer = await Customer.findByPkOrDid(req.body.customer_id);
+    let customer = await Customer.findByPkOrDid(req.body.customer_id);
     if (!customer) {
-      return res.status(404).json({ error: `Customer ${req.body.customer_id} not found` });
+      const { user: userInfo } = await blocklet.getUser(req.body.customer_id);
+      if (!userInfo) {
+        return res.status(404).json({ error: `User ${req.body.customer_id} not found` });
+      }
+      customer = await Customer.create({
+        livemode: true,
+        did: userInfo.did,
+        name: userInfo.fullName,
+        email: userInfo.email || '',
+        phone: userInfo.phone || '',
+        address: Customer.formatAddressFromUser(userInfo),
+        description: userInfo.remark || '',
+        metadata: {},
+        balance: '0',
+        next_invoice_sequence: 1,
+        delinquent: false,
+        invoice_prefix: Customer.getInvoicePrefix(),
+      });
+      logger.info('Customer created on credit grant', {
+        customerId: customer.id,
+        customer: customer.toJSON(),
+      });
     }
 
     const unitAmount = fromTokenToUnit(req.body.amount, paymentCurrency.decimal).toString();

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

@@ -23,6 +23,7 @@ const listSchema = createListParamSchema<{
   customer_id?: string;
   subscription_id?: string;
   credit_grant_id?: string;
+  meter_id?: string;
   start?: number;
   end?: number;
   source?: string;
@@ -30,6 +31,7 @@ const listSchema = createListParamSchema<{
   customer_id: Joi.string().empty(''),
   subscription_id: Joi.string().empty(''),
   credit_grant_id: Joi.string().empty(''),
+  meter_id: Joi.string().empty(''),
   start: Joi.number().integer().optional(),
   end: Joi.number().integer().optional(),
   source: Joi.string().empty(''),
@@ -40,6 +42,9 @@ router.get('/', authMine, async (req, res) => {
     const { page, pageSize, ...query } = await listSchema.validateAsync(req.query, { stripUnknown: true });
     const where = getWhereFromKvQuery(query.q);
 
+    if (query.meter_id) {
+      where.meter_id = query.meter_id;
+    }
     if (query.customer_id) {
       where.customer_id = query.customer_id;
     }
@@ -123,6 +128,7 @@ const summarySchema = Joi.object({
   customer_id: Joi.string().optional(),
   subscription_id: Joi.string().optional(),
   currency_id: Joi.string().optional(),
+  meter_id: Joi.string().optional(),
   start: Joi.number().integer().optional(),
   end: Joi.number().integer().optional(),
 }).unknown(true);
@@ -134,6 +140,7 @@ router.get('/summary', authMine, async (req, res) => {
       customer_id: customerId,
       subscription_id: subscriptionId,
       currency_id: currencyId,
+      meter_id: meterId,
       start,
       end,
     } = await summarySchema.validateAsync(req.query, { stripUnknown: true });
@@ -142,6 +149,7 @@ router.get('/summary', authMine, async (req, res) => {
       customerId,
       subscriptionId,
       currencyId,
+      meterId,
       startTime: start ? new Date(start * 1000) : undefined,
       endTime: end ? new Date(end * 1000) : undefined,
     });

package/api/src/routes/customers.ts

@@ -37,6 +37,7 @@ const authPortal = authenticate<Customer>({
     // @ts-ignore
     model: Customer,
     field: 'id',
+    findById: (id: string) => Customer.findByPkOrDid(id),
   },
 });
 
@@ -217,18 +218,12 @@ router.post('/sync-to-space', sessionMiddleware(), async (req, res) => {
 });
 
 // get overdue invoices
-router.get('/:id/overdue/invoices', sessionMiddleware(), async (req, res) => {
-  if (!req.user) {
-    return res.status(403).json({ error: 'Unauthorized' });
-  }
+router.get('/:id/overdue/invoices', authPortal, async (req, res) => {
   try {
     const doc = await Customer.findByPkOrDid(req.params.id as string);
     if (!doc) {
       return res.status(404).json({ error: 'Customer not found' });
     }
-    if (doc.did !== req.user.did && !['admin', 'owner'].includes(req.user?.role)) {
-      return res.status(403).json({ error: 'You are not allowed to access this customer invoices' });
-    }
     const { rows: invoices, count } = await Invoice.findAndCountAll({
       where: {
         customer_id: doc.id,

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

@@ -84,6 +84,7 @@ router.post('/', auth, async (req, res) => {
         symbol: info.symbol,
         decimal: info.decimal,
         type: 'standard',
+        maximum_precision: 6,
 
         // FIXME: make these configurable
         minimum_payment_amount: fromTokenToUnit(0.000001, info.decimal).toString(),
@@ -121,6 +122,7 @@ router.post('/', auth, async (req, res) => {
         symbol: state.symbol,
         decimal: state.decimal,
         type: 'standard',
+        maximum_precision: 6,
 
         // FIXME: make these configurable
         minimum_payment_amount: fromTokenToUnit(0.000001, state.decimal).toString(),

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

@@ -173,6 +173,7 @@ router.post('/', auth, async (req, res) => {
       decimal: 18,
 
       minimum_payment_amount: fromTokenToUnit(0.000001, 18).toString(),
+      maximum_precision: 6,
       maximum_payment_amount: fromTokenToUnit(100000000, 18).toString(),
 
       contract: '',

package/api/src/store/migrations/20250610-billing-credit.ts

@@ -21,9 +21,6 @@ export const up: Migration = async ({ context }) => {
       },
     ],
   });
-  await context.sequelize.query(`
-    UPDATE payment_currencies SET maximum_precision = 2 WHERE type = 'standard';
-  `);
 
   await context.sequelize.query(`
     UPDATE payment_currencies 

package/api/src/store/migrations/20250708-currency-precision.ts

@@ -0,0 +1,14 @@
+import { Migration } from '../migrate';
+
+export const up: Migration = async ({ context }) => {
+  await context.sequelize.query(`
+    UPDATE payment_currencies 
+    SET maximum_precision = 6
+    WHERE payment_method_id IN (
+      SELECT id FROM payment_methods WHERE type IN ('arcblock', 'ethereum', 'base')
+    )
+    AND type != 'credit';
+  `);
+};
+
+export const down = () => {};

package/api/src/store/models/credit-transaction.ts

@@ -142,6 +142,7 @@ export class CreditTransaction extends Model<
     subscriptionId,
     meterEventName,
     currencyId,
+    meterId,
     startTime,
     endTime,
   }: {
@@ -149,6 +150,7 @@ export class CreditTransaction extends Model<
     subscriptionId?: string;
     meterEventName?: string;
     currencyId?: string;
+    meterId?: string;
     startTime?: Date;
     endTime?: Date;
   }) {
@@ -169,6 +171,10 @@ export class CreditTransaction extends Model<
       whereClause['$creditGrant.currency_id$'] = currencyId;
     }
 
+    if (meterId) {
+      whereClause.meter_id = meterId;
+    }
+
     if (startTime || endTime) {
       whereClause.created_at = {};
       if (startTime) {
@@ -212,6 +218,7 @@ export class CreditTransaction extends Model<
         customer_id: customerId,
         subscription_id: subscriptionId,
         meter_event_name: meterEventName,
+        meter_id: meterId,
         currency_id: currencyId,
         start_time: startTime?.toISOString(),
         end_time: endTime?.toISOString(),

package/api/src/store/models/webhook-attempt.ts

@@ -42,7 +42,7 @@ export class WebhookAttempt extends Model<InferAttributes<WebhookAttempt>, Infer
       allowNull: false,
     },
     status: {
-      type: DataTypes.ENUM('enabled', 'disabled'),
+      type: DataTypes.ENUM('succeeded', 'failed'),
       allowNull: false,
     },
     response_status: {

package/blocklet.yml

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.19.2",
+  "version": "1.19.4",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -43,31 +43,31 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.44",
-    "@arcblock/did": "^1.20.14",
+    "@abtnode/cron": "^1.16.46",
+    "@arcblock/did": "^1.20.15",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^3.0.1",
-    "@arcblock/did-util": "^1.20.14",
-    "@arcblock/jwt": "^1.20.14",
-    "@arcblock/ux": "^3.0.1",
-    "@arcblock/validator": "^1.20.14",
-    "@blocklet/did-space-js": "^1.0.62",
-    "@blocklet/js-sdk": "^1.16.44",
-    "@blocklet/logger": "^1.16.44",
-    "@blocklet/payment-react": "1.19.2",
-    "@blocklet/sdk": "^1.16.44",
-    "@blocklet/ui-react": "^3.0.1",
-    "@blocklet/uploader": "^0.1.97",
-    "@blocklet/xss": "^0.1.36",
+    "@arcblock/did-connect": "^3.0.24",
+    "@arcblock/did-util": "^1.20.15",
+    "@arcblock/jwt": "^1.20.15",
+    "@arcblock/ux": "^3.0.24",
+    "@arcblock/validator": "^1.20.15",
+    "@blocklet/did-space-js": "^1.1.5",
+    "@blocklet/js-sdk": "^1.16.46",
+    "@blocklet/logger": "^1.16.46",
+    "@blocklet/payment-react": "1.19.4",
+    "@blocklet/sdk": "^1.16.46",
+    "@blocklet/ui-react": "^3.0.24",
+    "@blocklet/uploader": "^0.2.4",
+    "@blocklet/xss": "^0.2.2",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.20.14",
-    "@ocap/client": "^1.20.14",
-    "@ocap/mcrypto": "^1.20.14",
-    "@ocap/util": "^1.20.14",
-    "@ocap/wallet": "^1.20.14",
+    "@ocap/asset": "^1.20.15",
+    "@ocap/client": "^1.20.15",
+    "@ocap/mcrypto": "^1.20.15",
+    "@ocap/util": "^1.20.15",
+    "@ocap/wallet": "^1.20.15",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -120,9 +120,9 @@
     "web3": "^4.16.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.44",
+    "@abtnode/types": "^1.16.46",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.19.2",
+    "@blocklet/payment-types": "1.19.4",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -152,7 +152,7 @@
     "vite": "^7.0.0",
     "vite-node": "^3.2.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.9.33",
+    "vite-plugin-blocklet": "^0.10.1",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
@@ -168,5 +168,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "741c897204afc412721a942201516932bff59235"
+  "gitHead": "ced79cc9e205a344b6fdce2f43ac8d27bb37f5f4"
 }

package/src/components/edit-in-line.tsx

@@ -0,0 +1,197 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { formatError } from '@blocklet/payment-react';
+import { Check, Close, EditOutlined } from '@mui/icons-material';
+import { IconButton, Stack, TextField, Typography } from '@mui/material';
+import { useState, useEffect } from 'react';
+
+interface EditInLineProps {
+  value: string;
+  onSave: (newValue: string) => Promise<void>;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  multiline?: boolean;
+  maxLength?: number;
+  validate?: (value: string) => string | null;
+  successMessage?: string;
+  autoFocus?: boolean;
+  onEdit?: () => void;
+  onCancel?: () => void;
+  hideSuccessToast?: boolean;
+}
+
+export default function EditInLine({
+  value,
+  onSave,
+  placeholder = '',
+  required = true,
+  disabled = false,
+  multiline = false,
+  maxLength = 255,
+  validate = () => null,
+  successMessage = '',
+  autoFocus = false,
+  onEdit = () => {},
+  onCancel = () => {},
+  hideSuccessToast = false,
+}: EditInLineProps) {
+  const [edit, setEdit] = useState(false);
+  const [tempValue, setTempValue] = useState(value);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { t } = useLocaleContext();
+
+  // 当外部 value 变化时同步更新
+  useEffect(() => {
+    if (!edit) {
+      setTempValue(value);
+    }
+  }, [value, edit]);
+
+  const validateValue = (val: string): string => {
+    if (required && !val.trim()) {
+      return t('common.required');
+    }
+    if (maxLength && val.length > maxLength) {
+      return t('common.maxLength', { len: maxLength });
+    }
+    if (validate) {
+      const customError = validate(val);
+      if (customError) {
+        return customError;
+      }
+    }
+    return '';
+  };
+
+  const handleSave = async () => {
+    const validationError = validateValue(tempValue);
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await onSave(tempValue);
+      if (!hideSuccessToast) {
+        Toast.success(successMessage || t('common.saved'));
+      }
+      setEdit(false);
+      setError('');
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setTempValue(value);
+    setEdit(false);
+    setError('');
+    onCancel?.();
+  };
+
+  const handleChange = (newValue: string) => {
+    setTempValue(newValue);
+    const validationError = validateValue(newValue);
+    setError(validationError);
+  };
+
+  const handleEdit = () => {
+    setEdit(true);
+    setTempValue(value);
+    setError('');
+    onEdit?.();
+  };
+
+  if (disabled) {
+    return (
+      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+        {value || <span style={{ fontStyle: 'italic' }}>{placeholder}</span>}
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        alignItems: multiline ? 'flex-start' : 'center',
+        flexWrap: 'wrap',
+        width: '100%',
+      }}>
+      {edit ? (
+        <>
+          <TextField
+            value={tempValue}
+            onChange={(e) => handleChange(e.target.value)}
+            variant="outlined"
+            size="small"
+            multiline={multiline}
+            rows={multiline ? 3 : 1}
+            sx={{ flex: 1, minWidth: '200px' }}
+            placeholder={placeholder}
+            error={!!error}
+            disabled={loading}
+            autoFocus={autoFocus}
+            slotProps={{
+              input: {
+                endAdornment: error ? (
+                  <Typography color="error" sx={{ whiteSpace: 'nowrap' }}>
+                    {error}
+                  </Typography>
+                ) : undefined,
+              },
+              htmlInput: {
+                maxLength,
+              },
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !multiline && !e.shiftKey) {
+                e.preventDefault();
+                handleSave();
+              }
+              if (e.key === 'Escape') {
+                e.preventDefault();
+                handleCancel();
+              }
+            }}
+          />
+          <Stack direction="row" spacing={0.5}>
+            <IconButton
+              onClick={handleSave}
+              size="small"
+              disabled={!!error || loading}
+              color="primary"
+              title={t('common.save')}>
+              <Check />
+            </IconButton>
+            <IconButton onClick={handleCancel} size="small" disabled={loading} title={t('common.cancel')}>
+              <Close />
+            </IconButton>
+          </Stack>
+        </>
+      ) : (
+        <>
+          <Typography
+            variant="body2"
+            sx={{
+              wordBreak: 'break-word',
+              whiteSpace: multiline ? 'pre-wrap' : 'nowrap',
+              overflow: multiline ? 'visible' : 'hidden',
+              textOverflow: multiline ? 'clip' : 'ellipsis',
+            }}>
+            {value || <span style={{ color: '#999', fontStyle: 'italic' }}>{placeholder}</span>}
+          </Typography>
+          <IconButton onClick={handleEdit} size="small" title={t('common.edit')}>
+            <EditOutlined fontSize="small" />
+          </IconButton>
+        </>
+      )}
+    </Stack>
+  );
+}

package/src/components/subscription/portal/list.tsx

@@ -138,7 +138,6 @@ export default function CurrentSubscriptions({
                   sx={{
                     flexWrap: 'wrap',
                     padding: 2,
-                    height: '100%',
                     borderRadius: 1,
                     border: '1px solid',
                     borderColor: 'divider',

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -3,8 +3,6 @@ import { ConfirmDialog, Switch, api, formatError, usePaymentContext } from '@blo
 import type { ChainType, TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import {
   AddOutlined,
-  Check,
-  Close,
   DeleteOutlined,
   EditOutlined,
   InfoOutlined,
@@ -27,7 +25,6 @@ import {
   ListItemText,
   Skeleton,
   Stack,
-  TextField,
   Tooltip,
   Typography,
   useTheme,
@@ -35,7 +32,6 @@ import {
 import { useRequest, useSessionStorageState, useSetState } from 'ahooks';
 import useBus from 'use-bus';
 
-import { useState } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
 import { DIDDialog } from '@arcblock/ux/lib/DID';
 import { fromUnitToToken } from '@ocap/util';
@@ -45,6 +41,7 @@ import InfoCard from '../../../../components/info-card';
 import InfoRow from '../../../../components/info-row';
 import PaymentCurrencyAdd from '../../../../components/payment-currency/add';
 import PaymentCurrencyEdit from '../../../../components/payment-currency/edit';
+import EditInLine from '../../../../components/edit-in-line';
 import { useRpcStatus } from '../../../../hooks/rpc-status';
 import PaymentMethodEdit from './edit';
 
@@ -62,94 +59,51 @@ const getMethods = (
   return api.get(`/api/payment-methods?${search.toString()}`).then((res) => res.data);
 };
 
-const updateApiHost = (id: string, apiHost: string) => {
-  return api.put(`/api/payment-methods/${id}/settings`, { arcblock: { api_host: apiHost } }).then((res) => res.data);
+const updateApiHost = (id: string, params: Record<string, any>) => {
+  return api.put(`/api/payment-methods/${id}/settings`, { arcblock: params }).then((res) => res.data);
 };
 
-function EditApiHost({ method }: { method: TPaymentMethodExpanded }) {
-  const [edit, setEdit] = useState(false);
+function EditApiHost({ method, refresh }: { method: TPaymentMethodExpanded; refresh: () => void }) {
   const { t } = useLocaleContext();
-  const [value, setValue] = useState(method.settings?.arcblock?.api_host || '');
-  const [tempValue, setTempValue] = useState(value);
-  const [error, setError] = useState('');
 
-  const handleSave = async () => {
-    if (!tempValue.trim()) {
-      setError(t('common.required'));
-      return;
-    }
-    try {
-      await updateApiHost(method.id, tempValue);
-      Toast.success(t('common.saved'));
-      setValue(tempValue);
-      setEdit(false);
-      setError('');
-    } catch (err) {
-      Toast.error(formatError(err));
-    }
+  const handleSave = async (newValue: string) => {
+    await updateApiHost(method.id, { api_host: newValue });
+    refresh();
   };
 
-  const handleCancel = () => {
-    setTempValue(value);
-    setEdit(false);
-    setError('');
+  return (
+    <InfoRow
+      label={t('admin.paymentMethod.arcblock.api_host.label')}
+      value={
+        <EditInLine
+          value={method.settings?.arcblock?.api_host || ''}
+          onSave={handleSave}
+          placeholder={t('admin.paymentMethod.arcblock.api_host.tip')}
+          required
+        />
+      }
+    />
+  );
+}
+
+function EditApiExplorerHost({ method, refresh }: { method: TPaymentMethodExpanded; refresh: () => void }) {
+  const { t } = useLocaleContext();
+
+  const handleSave = async (newValue: string) => {
+    await updateApiHost(method.id, { explorer_host: newValue });
+    refresh();
   };
 
   return (
     <InfoRow
-      label={t('admin.paymentMethod.arcblock.api_host.label')}
+      label={t('admin.paymentMethod.arcblock.explorer_host.label')}
       value={
-        <Stack
-          direction="row"
-          spacing={1}
-          sx={{
-            alignItems: 'center',
-            flexWrap: 'wrap',
-          }}>
-          {edit ? (
-            <>
-              <TextField
-                value={tempValue}
-                onChange={(e) => {
-                  const val = e.target.value;
-                  if (!val) {
-                    setError(t('common.required'));
-                  } else {
-                    setError('');
-                  }
-                  setTempValue(val);
-                }}
-                variant="outlined"
-                size="small"
-                sx={{ flex: 1 }}
-                placeholder={t('admin.paymentMethod.arcblock.api_host.tip')}
-                error={!!error}
-                slotProps={{
-                  input: {
-                    endAdornment: error ? (
-                      <Typography color="error" sx={{ whiteSpace: 'nowrap' }}>
-                        {error}
-                      </Typography>
-                    ) : undefined,
-                  },
-                }}
-              />
-              <IconButton onClick={handleSave} size="small">
-                <Check />
-              </IconButton>
-              <IconButton onClick={handleCancel} size="small">
-                <Close />
-              </IconButton>
-            </>
-          ) : (
-            <>
-              <Typography variant="body2">{value}</Typography>
-              <IconButton onClick={() => setEdit(true)} size="small">
-                <EditOutlined fontSize="small" />
-              </IconButton>
-            </>
-          )}
-        </Stack>
+        <EditInLine
+          value={method.settings?.arcblock?.explorer_host || ''}
+          onSave={handleSave}
+          placeholder={t('admin.paymentMethod.arcblock.explorer_host.tip')}
+          required
+        />
       }
     />
   );
@@ -219,11 +173,13 @@ function Balance({
   balances,
   addresses,
   setDidDialog,
+  refresh,
 }: {
   method: TPaymentMethodExpanded;
   balances: { [currencyId: string]: string };
   addresses: { arcblock: string; ethereum: string };
   setDidDialog: (value: any) => void;
+  refresh: () => void;
 }) {
   const { t } = useLocaleContext();
   const defaultCurrency = (method.payment_currencies || [])?.find(
@@ -252,7 +208,11 @@ function Balance({
   };
   return (
     <>
-      <InfoRow label={t('admin.paymentMethod.props.explorer_host')} value={explorerHost} />
+      {method.type === 'arcblock' ? (
+        <EditApiExplorerHost method={method} refresh={refresh} />
+      ) : (
+        <InfoRow label={t('admin.paymentMethod.props.explorer_host')} value={explorerHost} />
+      )}
       <InfoRow
         label={
           <Box
@@ -461,6 +421,11 @@ export default function PaymentMethods() {
     }
   };
 
+  const handleRefresh = () => {
+    runAsync();
+    refresh(true);
+  };
+
   return (
     <>
       {Object.keys(groups).map((x) => (
@@ -513,7 +478,7 @@ export default function PaymentMethods() {
                 container
                 spacing={2}
                 sx={{
-                  mt: 0,
+                  mt: 1,
                 }}>
                 <Grid
                   size={{
@@ -521,10 +486,16 @@ export default function PaymentMethods() {
                     md: 6,
                   }}>
                   <InfoRow label={t('admin.paymentMethod.props.type')} value={method.type} />
-                  {method.type === 'arcblock' && <EditApiHost method={method} />}
+                  {method.type === 'arcblock' && <EditApiHost method={method} refresh={handleRefresh} />}
                   {['ethereum', 'base'].includes(method.type) && <RpcStatus method={method} />}
                   {['arcblock', 'ethereum', 'base'].includes(method.type) && (
-                    <Balance method={method} balances={balances} addresses={addresses} setDidDialog={setDidDialog} />
+                    <Balance
+                      method={method}
+                      balances={balances}
+                      addresses={addresses}
+                      setDidDialog={setDidDialog}
+                      refresh={handleRefresh}
+                    />
                   )}
 
                   <InfoRow label={t('admin.paymentMethod.props.confirmation')} value={method.confirmation.type} />

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

@@ -260,7 +260,7 @@ export default function BalanceRechargePage() {
     if (Number(value) > MAX_SAFE_AMOUNT) {
       return;
     }
-    const precision = currency.decimal;
+    const precision = currency.maximum_precision;
     const errorMessage = formatAmountPrecisionLimit(value, locale, precision || 6);
     setAmountError(errorMessage || '');
     setAmount(value);