payment-kit 1.17.11 → 1.18.0

package/api/src/integrations/arcblock/stake.ts

@@ -4,7 +4,6 @@ import assert from 'assert';
 
 import { isEthereumDid } from '@arcblock/did';
 import { toStakeAddress } from '@arcblock/did-util';
-import env from '@blocklet/sdk/lib/env';
 import { BN, fromUnitToToken, toBN } from '@ocap/util';
 
 import { Op } from 'sequelize';
@@ -26,10 +25,6 @@ export async function ensureStakedForGas() {
 
       try {
         const { state: account } = await client.getAccountState({ address: wallet.address });
-        if (!account) {
-          const hash = await client.declare({ moniker: env.appNameSlug, wallet });
-          logger.info(`declared app on chain ${host}`, { hash });
-        }
 
         const address = toStakeAddress(wallet.address, wallet.address);
         const { state: stake } = await client.getStakeState({ address });

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

@@ -6,6 +6,7 @@ import pick from 'lodash/pick';
 import { InferAttributes, Op, WhereOptions } from 'sequelize';
 import cloneDeep from 'lodash/cloneDeep';
 import merge from 'lodash/merge';
+import { Joi } from '@arcblock/validator';
 import { ensureWebhookRegistered } from '../integrations/stripe/setup';
 import logger from '../libs/logger';
 import { authenticate } from '../libs/security';
@@ -14,6 +15,7 @@ import { PaymentMethod, TPaymentMethod } from '../store/models/payment-method';
 import type { EVMChainType, PaymentMethodSettings } from '../store/models/types';
 import { ethWallet, wallet } from '../libs/auth';
 import { EVM_CHAIN_TYPES } from '../libs/constants';
+import { getTokenSummaryByDid } from '../integrations/arcblock/stake';
 
 const router = Router();
 
@@ -114,7 +116,7 @@ router.post('/', auth, async (req, res) => {
         blockNumber,
       });
     } catch (err) {
-      logger.error('verify ethereum api endpoint failed', err);
+      logger.error(`verify ${paymentType} api endpoint failed`, err);
       return res.status(400).json({ error: err.message });
     }
 
@@ -179,15 +181,28 @@ router.get('/', auth, async (req, res) => {
   if (typeof query.livemode === 'string') {
     where.livemode = JSON.parse(query.livemode);
   }
-  const list = await PaymentMethod.findAll({
-    where,
-    order: [['created_at', 'ASC']],
-    include: [{ model: PaymentCurrency, as: 'payment_currencies', order: [['created_at', 'ASC']] }],
-  });
-  if (query.addresses === 'true') {
-    res.json({ list, addresses: { arcblock: wallet.address, ethereum: ethWallet.address } });
-  } else {
-    res.json(list);
+  try {
+    const list = await PaymentMethod.findAll({
+      where,
+      order: [['created_at', 'ASC']],
+      include: [{ model: PaymentCurrency, as: 'payment_currencies', order: [['created_at', 'ASC']] }],
+    });
+    if (query.addresses === 'true') {
+      const [arcblock, ethereum] = await Promise.all([
+        getTokenSummaryByDid(wallet.address, !!req.livemode, 'arcblock'),
+        getTokenSummaryByDid(ethWallet.address, !!req.livemode, EVM_CHAIN_TYPES),
+      ]);
+      res.json({
+        list,
+        addresses: { arcblock: wallet.address, ethereum: ethWallet.address },
+        balances: { ...arcblock, ...ethereum },
+      });
+    } else {
+      res.json(list);
+    }
+  } catch (err) {
+    logger.error('get payment methods failed', err);
+    res.status(400).json({ error: err.message });
   }
 });
 
@@ -255,4 +270,63 @@ router.put('/:id/settings', auth, async (req, res) => {
   }
 });
 
+const updateMethodSchema = Joi.object({
+  name: Joi.string().empty('').optional(),
+  description: Joi.string().empty('').optional(),
+  logo: Joi.string().empty('').optional(),
+}).unknown(true);
+router.put('/:id', auth, async (req, res) => {
+  const { id } = req.params;
+  const { error, value: raw } = updateMethodSchema.validate(pick(req.body, ['name', 'description', 'logo']));
+  if (error) {
+    return res.status(400).json({ error: error.message });
+  }
+
+  try {
+    const method = await PaymentMethod.findByPk(id);
+    if (!method) {
+      return res.status(404).json({ error: 'Payment method not found' });
+    }
+    const updateData: Partial<TPaymentMethod> = {
+      name: raw.name ?? method.name,
+      description: raw.description ?? method.description,
+    };
+
+    if ('logo' in method.dataValues || raw.logo !== undefined) {
+      updateData.logo = raw.logo ?? method.logo;
+    }
+    const updateSettings = 'settings' in req.body ? req.body.settings : null;
+    if (EVM_CHAIN_TYPES.includes(method.type as string) && updateSettings) {
+      const paymentType = method.type as EVMChainType;
+      if (!updateSettings[paymentType]?.api_host) {
+        return res.status(400).json({ error: `${paymentType} api_host is required` });
+      }
+      if (!updateSettings[paymentType]?.explorer_host) {
+        return res.status(400).json({ error: `${paymentType} explorer_host is required` });
+      }
+      if (!updateSettings[paymentType]?.native_symbol) {
+        return res.status(400).json({ error: `${paymentType} native_symbol is required` });
+      }
+      try {
+        const provider = new ethers.JsonRpcProvider(updateSettings[paymentType]?.api_host);
+        const [network, blockNumber] = await Promise.all([provider.getNetwork(), provider.getBlockNumber()]);
+        updateSettings[paymentType]!.chain_id = network.chainId.toString();
+        logger.info(`${paymentType} api endpoint verified`, {
+          settings: updateSettings[paymentType],
+          network,
+          blockNumber,
+        });
+      } catch (err) {
+        logger.error(`verify ${paymentType} api endpoint failed`, err);
+        return res.status(400).json({ error: err.message });
+      }
+      updateData.settings = pick(PaymentMethod.encryptSettings(updateSettings), [paymentType]) as PaymentMethodSettings;
+    }
+    const updatedMethod = await method.update(updateData);
+    return res.json(updatedMethod);
+  } catch (err) {
+    return res.status(400).json({ error: err.message });
+  }
+});
+
 export default router;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.11",
+  "version": "1.18.0",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.19.3",
     "@blocklet/js-sdk": "^1.16.37",
     "@blocklet/logger": "^1.16.37",
-    "@blocklet/payment-react": "1.17.11",
+    "@blocklet/payment-react": "1.18.0",
     "@blocklet/sdk": "^1.16.37",
     "@blocklet/ui-react": "^2.11.27",
     "@blocklet/uploader": "^0.1.64",
@@ -121,7 +121,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.37",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.17.11",
+    "@blocklet/payment-types": "1.18.0",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -167,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "286c7709d37515078269b963b1e7381f599111cc"
+  "gitHead": "052c301e1f565558766c9346ba355f2fd072108e"
 }

package/src/components/collapse.tsx

@@ -40,7 +40,8 @@ export default function IconCollapse(props: Props) {
         direction="row"
         alignItems="center"
         justifyContent="space-between"
-        onClick={() => {
+        onClick={(e) => {
+          e.stopPropagation();
           props.onChange?.(props.value || '', !expanded);
           toggleExpanded();
         }}

package/src/components/payment-method/arcblock.tsx

@@ -6,7 +6,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 
 import Uploader from '../uploader';
 
-export default function ArcBlockMethodForm() {
+export default function ArcBlockMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
   const logo = useWatch({ control, name: 'logo' });
@@ -29,6 +29,7 @@ export default function ArcBlockMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={checkDisabled('name')}
       />
       <FormInput
         key="description"
@@ -37,6 +38,7 @@ export default function ArcBlockMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        disabled={checkDisabled('description')}
       />
       <FormInput
         key="secret_key"
@@ -45,6 +47,7 @@ export default function ArcBlockMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.arcblock.chain_id.label')}
         placeholder={t('admin.paymentMethod.arcblock.chain_id.tip')}
+        disabled={checkDisabled('settings.arcblock.chain_id')}
       />
       <FormInput
         key="api_host"
@@ -53,6 +56,7 @@ export default function ArcBlockMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.arcblock.api_host.label')}
         placeholder={t('admin.paymentMethod.arcblock.api_host.tip')}
+        disabled={checkDisabled('settings.arcblock.api_host')}
       />
       <FormInput
         key="explorer_host"
@@ -61,10 +65,11 @@ export default function ArcBlockMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.arcblock.explorer_host.label')}
         placeholder={t('admin.paymentMethod.arcblock.explorer_host.tip')}
+        disabled={checkDisabled('settings.arcblock.explorer_host')}
       />
       <Stack direction="column">
         <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
-        <Uploader onUploaded={onUploaded} preview={logo} />
+        <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>
   );

package/src/components/payment-method/base.tsx

@@ -7,7 +7,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import Uploader from '../uploader';
 import EvmRpcInput from './evm-rpc-input';
 
-export default function BaseMethodForm() {
+export default function BaseMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
   const logo = useWatch({ control, name: 'logo' });
@@ -30,6 +30,7 @@ export default function BaseMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={checkDisabled('name')}
       />
       <FormInput
         key="description"
@@ -38,11 +39,13 @@ export default function BaseMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        disabled={checkDisabled('description')}
       />
       <EvmRpcInput
         name="settings.base.api_host"
         label={t('admin.paymentMethod.base.api_host.label')}
         placeholder={t('admin.paymentMethod.base.api_host.tip')}
+        disabled={checkDisabled('settings.base.api_host')}
       />
       <FormInput
         key="explorer_host"
@@ -51,6 +54,7 @@ export default function BaseMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.base.explorer_host.label')}
         placeholder={t('admin.paymentMethod.base.explorer_host.tip')}
+        disabled={checkDisabled('settings.base.explorer_host')}
       />
       <FormInput
         key="native_symbol"
@@ -59,6 +63,7 @@ export default function BaseMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.base.native_symbol.label')}
         placeholder={t('admin.paymentMethod.base.native_symbol.tip')}
+        disabled={checkDisabled('settings.base.native_symbol')}
       />
       <FormInput
         key="confirmation"
@@ -67,10 +72,11 @@ export default function BaseMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.base.confirmation.label')}
         placeholder={t('admin.paymentMethod.base.confirmation.tip')}
+        disabled={checkDisabled('settings.base.confirmation')}
       />
       <Stack direction="column">
         <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
-        <Uploader onUploaded={onUploaded} preview={logo} />
+        <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>
   );

package/src/components/payment-method/bitcoin.tsx

@@ -6,7 +6,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 
 import Uploader from '../uploader';
 
-export default function BitcoinMethodForm() {
+export default function BitcoinMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
   const logo = useWatch({ control, name: 'logo' });
@@ -29,6 +29,7 @@ export default function BitcoinMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={checkDisabled('name')}
       />
       <FormInput
         key="description"
@@ -37,6 +38,7 @@ export default function BitcoinMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        disabled={checkDisabled('description')}
       />
       <FormInput
         key="chain_id"
@@ -45,6 +47,7 @@ export default function BitcoinMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.bitcoin.chain_id.label')}
         placeholder={t('admin.paymentMethod.bitcoin.chain_id.tip')}
+        disabled={checkDisabled('settings.bitcoin.chain_id')}
       />
       <FormInput
         key="api_host"
@@ -53,6 +56,7 @@ export default function BitcoinMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.bitcoin.api_host.label')}
         placeholder={t('admin.paymentMethod.bitcoin.api_host.tip')}
+        disabled={checkDisabled('settings.bitcoin.api_host')}
       />
       <FormInput
         key="explorer_host"
@@ -61,10 +65,11 @@ export default function BitcoinMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.bitcoin.explorer_host.label')}
         placeholder={t('admin.paymentMethod.bitcoin.explorer_host.tip')}
+        disabled={checkDisabled('settings.bitcoin.explorer_host')}
       />
       <Stack direction="column">
         <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
-        <Uploader onUploaded={onUploaded} preview={logo} />
+        <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>
   );

package/src/components/payment-method/ethereum.tsx

@@ -7,7 +7,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import Uploader from '../uploader';
 import EvmRpcInput from './evm-rpc-input';
 
-export default function EthereumMethodForm() {
+export default function EthereumMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
   const logo = useWatch({ control, name: 'logo' });
@@ -30,6 +30,7 @@ export default function EthereumMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={checkDisabled('name')}
       />
       <FormInput
         key="description"
@@ -38,11 +39,13 @@ export default function EthereumMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        disabled={checkDisabled('description')}
       />
       <EvmRpcInput
         name="settings.ethereum.api_host"
         label={t('admin.paymentMethod.ethereum.api_host.label')}
         placeholder={t('admin.paymentMethod.ethereum.api_host.tip')}
+        disabled={checkDisabled('settings.ethereum.api_host')}
       />
       <FormInput
         key="explorer_host"
@@ -51,6 +54,7 @@ export default function EthereumMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.ethereum.explorer_host.label')}
         placeholder={t('admin.paymentMethod.ethereum.explorer_host.tip')}
+        disabled={checkDisabled('settings.ethereum.explorer_host')}
       />
       <FormInput
         key="native_symbol"
@@ -59,6 +63,7 @@ export default function EthereumMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.ethereum.native_symbol.label')}
         placeholder={t('admin.paymentMethod.ethereum.native_symbol.tip')}
+        disabled={checkDisabled('settings.ethereum.native_symbol')}
       />
       <FormInput
         key="confirmation"
@@ -67,10 +72,11 @@ export default function EthereumMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.ethereum.confirmation.label')}
         placeholder={t('admin.paymentMethod.ethereum.confirmation.tip')}
+        disabled={checkDisabled('settings.ethereum.confirmation')}
       />
       <Stack direction="column">
         <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
-        <Uploader onUploaded={onUploaded} preview={logo} />
+        <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>
   );

package/src/components/payment-method/evm-rpc-input.tsx

@@ -10,9 +10,14 @@ interface Props {
   name: string; // 表单字段名
   label: string;
   placeholder: string;
+  disabled?: boolean;
 }
 
-export default function EvmRpcInput({ name, label, placeholder }: Props) {
+EvmRpcInput.defaultProps = {
+  disabled: false,
+};
+
+export default function EvmRpcInput({ name, label, placeholder, disabled }: Props) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   const apiHost = useWatch({
@@ -28,6 +33,7 @@ export default function EvmRpcInput({ name, label, placeholder }: Props) {
       name={name}
       type="text"
       rules={{ required: true }}
+      disabled={disabled}
       label={
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           {label}

package/src/components/payment-method/form.tsx

@@ -9,12 +9,30 @@ import EthereumMethodForm from './ethereum';
 import StripeMethodForm from './stripe';
 import BaseMethodForm from './base';
 
-export default function PaymentMethodForm() {
+PaymentMethodForm.defaultProps = {
+  action: 'create',
+  editableKeys: [],
+};
+
+export default function PaymentMethodForm({
+  action,
+  editableKeys,
+}: {
+  action?: 'create' | 'edit';
+  editableKeys?: string[];
+}) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
 
   const type = useWatch({ control, name: 'type' });
 
+  const checkDisabled = (key: string) => {
+    if (action === 'edit') {
+      return !editableKeys?.includes(key);
+    }
+    return false;
+  };
+
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
       <Controller
@@ -23,6 +41,7 @@ export default function PaymentMethodForm() {
         render={({ field }) => (
           <ToggleButtonGroup
             {...field}
+            disabled={checkDisabled(field.name)}
             onChange={(_, value: string) => {
               if (value !== null) {
                 setValue(field.name, value);
@@ -42,11 +61,11 @@ export default function PaymentMethodForm() {
       <Typography variant="h6" sx={{ mb: 3, fontWeight: 600 }}>
         {t('admin.paymentMethod.settings')}
       </Typography>
-      {type === 'stripe' && <StripeMethodForm />}
-      {type === 'arcblock' && <ArcBlockMethodForm />}
-      {type === 'ethereum' && <EthereumMethodForm />}
-      {type === 'base' && <BaseMethodForm />}
-      {type === 'bitcoin' && <BitcoinMethodForm />}
+      {type === 'stripe' && <StripeMethodForm checkDisabled={checkDisabled} />}
+      {type === 'arcblock' && <ArcBlockMethodForm checkDisabled={checkDisabled} />}
+      {type === 'ethereum' && <EthereumMethodForm checkDisabled={checkDisabled} />}
+      {type === 'base' && <BaseMethodForm checkDisabled={checkDisabled} />}
+      {type === 'bitcoin' && <BitcoinMethodForm checkDisabled={checkDisabled} />}
     </Root>
   );
 }

package/src/components/payment-method/stripe.tsx

@@ -2,7 +2,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { FormInput } from '@blocklet/payment-react';
 
-export default function StripeMethodForm() {
+export default function StripeMethodForm({ checkDisabled }: { checkDisabled: (key: string) => boolean }) {
   const { t } = useLocaleContext();
 
   return (
@@ -13,6 +13,7 @@ export default function StripeMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
+        disabled={checkDisabled('name')}
       />
       <FormInput
         name="description"
@@ -27,6 +28,7 @@ export default function StripeMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.stripe.dashboard.label')}
         placeholder={t('admin.paymentMethod.stripe.dashboard.tip')}
+        disabled={checkDisabled('settings.stripe.dashboard')}
       />
       <FormInput
         name="settings.stripe.publishable_key"
@@ -34,6 +36,7 @@ export default function StripeMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.stripe.publishable_key.label')}
         placeholder={t('admin.paymentMethod.stripe.publishable_key.tip')}
+        disabled={checkDisabled('settings.stripe.publishable_key')}
       />
       <FormInput
         name="settings.stripe.secret_key"
@@ -41,6 +44,7 @@ export default function StripeMethodForm() {
         rules={{ required: true }}
         label={t('admin.paymentMethod.stripe.secret_key.label')}
         placeholder={t('admin.paymentMethod.stripe.secret_key.tip')}
+        disabled={checkDisabled('settings.stripe.secret_key')}
       />
     </>
   );

package/src/components/uploader.tsx

@@ -16,9 +16,17 @@ type Props = {
   maxFileSize?: number;
   maxNumberOfFiles?: number;
   allowedFileExts?: string[];
+  disabled?: boolean;
 };
 
-export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOfFiles, allowedFileExts }: Props) {
+export default function Uploader({
+  onUploaded,
+  preview,
+  maxFileSize,
+  maxNumberOfFiles,
+  allowedFileExts,
+  disabled,
+}: Props) {
   const uploaderRef = useRef<any>(null);
   const handleOpen = useCallback(() => {
     if (!uploaderRef.current) return;
@@ -74,7 +82,7 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
           display="flex"
           alignItems="center"
           justifyContent="center"
-          onClick={handleOpen}
+          onClick={disabled ? undefined : handleOpen}
           sx={{
             position: 'relative',
             cursor: 'pointer',
@@ -117,10 +125,15 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
               },
             }}>
             <Stack direction="row">
-              <Button variant="text" onClick={handleOpen} startIcon={<Edit />} sx={{ minWidth: 20, color: '#fff' }} />
               <Button
                 variant="text"
-                onClick={handleRemove}
+                onClick={disabled ? undefined : handleOpen}
+                startIcon={<Edit />}
+                sx={{ minWidth: 20, color: '#fff' }}
+              />
+              <Button
+                variant="text"
+                onClick={disabled ? undefined : handleRemove}
                 startIcon={<Delete />}
                 sx={{ minWidth: 20, color: '#fff' }}
               />
@@ -138,7 +151,8 @@ Uploader.defaultProps = {
   preview: '',
   maxFileSize: undefined,
   maxNumberOfFiles: 1,
-  allowedFileExts: ['.png', '.jpeg', '.webp'],
+  allowedFileExts: ['.png', '.jpeg', '.webp', '.svg', '.jpg'],
+  disabled: false,
 };
 
 const Div = styled(Box)`

package/src/locales/en.tsx

@@ -322,12 +322,13 @@ export default flat({
       _name: 'Payment Method',
       type: 'Type',
       add: 'Add payment method',
+      edit: 'Edit payment method',
       save: 'Save payment method',
       saved: 'Payment method successfully saved',
       settings: 'Settings',
       gasTip:
         'Ensure your account on the {chain} network has sufficient balance to cover transaction fees when using {method}.',
-      showQR: 'Show QR Code',
+      recharge: 'Scan to add balance',
       props: {
         type: 'Type',
         confirmation: 'Confirmation',
@@ -335,6 +336,8 @@ export default flat({
         refund: 'Refund support',
         dispute: 'Dispute support',
         currencies: 'Currency support',
+        explorer_host: 'Explorer Host',
+        balance: 'Balance',
       },
       name: {
         label: 'Name',

package/src/locales/zh.tsx

@@ -312,11 +312,12 @@ export default flat({
       _name: '支付方式',
       type: '类型',
       add: '添加支付方式',
+      edit: '编辑支付方式',
       save: '保存支付方式',
       saved: '支付方式已成功保存',
       settings: '设置',
       gasTip: '使用 {method} 支付需保证账户在 {chain} 链上有余额支付手续费',
-      showQR: '显示二维码',
+      recharge: '扫码充值',
       props: {
         type: '类型',
         confirmation: '确认',
@@ -324,6 +325,8 @@ export default flat({
         refund: '退款支持',
         dispute: '纠纷支持',
         currencies: '货币支持',
+        explorer_host: '区块浏览器',
+        balance: '余额',
       },
       name: {
         label: '名称',

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

@@ -209,6 +209,7 @@ export default function CustomerDetail(props: { id: string }) {
                   data.customer?.updated_at ? new Date(data.customer.updated_at).toISOString() : '',
                   52
                 )}
+                alt={data.customer.name}
                 variant="square"
                 sx={{ width: 52, height: 52, borderRadius: 'var(--radius-s, 4px)' }}
               />

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

@@ -66,6 +66,7 @@ export default function CustomersList() {
                     48
                   )}
                   variant="square"
+                  alt={item?.name}
                   sx={{ borderRadius: 'var(--radius-m, 8px)' }}
                 />
                 <Typography sx={{ wordBreak: 'break-all' }}>{item.name}</Typography>

package/src/pages/admin/overview.tsx

@@ -10,6 +10,7 @@ import omit from 'lodash/omit';
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
+import { ArrowForward } from '@mui/icons-material';
 import Chart, { TCurrencyMap } from '../../components/chart';
 import dayjs from '../../libs/dayjs';
 import { stringToColor } from '../../libs/util';
@@ -277,14 +278,26 @@ export default function Overview() {
                     href={summary.data?.links[currencyId] as string}
                     target="_blank"
                     variant="outlined"
-                    sx={{ padding: 1 }}>
-                    <Stack direction="row" alignItems="center">
+                    sx={{
+                      padding: 1,
+                      transition: 'all 0.2s ease-in-out',
+                      position: 'relative',
+                      '&:hover': {
+                        backgroundColor: 'action.hover',
+                        boxShadow: 1,
+                        '& .MuiSvgIcon-root': {
+                          opacity: 1,
+                          transform: 'translateX(0)',
+                        },
+                      },
+                    }}>
+                    <Stack direction="row" alignItems="center" spacing={1}>
                       <Avatar
                         src={currencies[currencyId]?.logo}
-                        alt={currencies[currencyId]?.name}
-                        sx={{ width: 36, height: 36, marginRight: 1 }}
+                        alt={currencies[currencyId]?.symbol}
+                        sx={{ width: 36, height: 36 }}
                       />
-                      <Box>
+                      <Box flex={1}>
                         <Typography variant="h5" component="div" sx={{ fontSize: '2rem' }}>
                           {formatBNStr(
                             summary.data?.balances?.[currencyId] as string,
@@ -295,6 +308,14 @@ export default function Overview() {
                           {currencies[currencyId]?.symbol} on {currencies[currencyId]?.method.name}
                         </Typography>
                       </Box>
+                      <ArrowForward
+                        sx={{
+                          opacity: 0,
+                          transform: 'translateX(-10px)',
+                          transition: 'all 0.2s ease-in-out',
+                          color: 'text.secondary',
+                        }}
+                      />
                     </Stack>
                   </Card>
                 ))}

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

@@ -0,0 +1,81 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { api, formatError } from '@blocklet/payment-react';
+import type { TPaymentMethod } from '@blocklet/payment-types';
+import { AddOutlined } from '@mui/icons-material';
+import { Button, CircularProgress } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { FormProvider, useForm } from 'react-hook-form';
+import { dispatch } from 'use-bus';
+
+import DrawerForm from '../../../../components/drawer-form';
+import PaymentMethodForm from '../../../../components/payment-method/form';
+
+export default function PaymentMethodEdit({ onClose, value }: { onClose: () => void; value: TPaymentMethod | null }) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({ loading: false });
+
+  const methods = useForm<TPaymentMethod>({
+    defaultValues: {
+      type: value?.type,
+      name: value?.name,
+      description: value?.description,
+      logo: value?.logo,
+      settings: value?.settings,
+    },
+  });
+  const { handleSubmit } = methods;
+
+  const onSubmit = (data: TPaymentMethod) => {
+    setState({ loading: true });
+    api
+      .put(`/api/payment-methods/${value?.id}`, data)
+      .then(() => {
+        setState({ loading: false });
+        Toast.success(t('admin.paymentMethod.saved'));
+        methods.reset();
+        dispatch('drawer.submitted');
+        dispatch('paymentMethod.updated');
+      })
+      .catch((err) => {
+        setState({ loading: false });
+        console.error(err);
+        Toast.error(formatError(err));
+      });
+  };
+
+  return (
+    <DrawerForm
+      open
+      icon={<AddOutlined />}
+      onClose={onClose}
+      text={t('admin.paymentMethod.edit')}
+      width={640}
+      footer={
+        <Button
+          variant="contained"
+          size="large"
+          onClick={handleSubmit(onSubmit)}
+          disabled={state.loading}
+          sx={{ width: '100%' }}>
+          {state.loading && <CircularProgress size={20} />} {t('common.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <PaymentMethodForm
+          action="edit"
+          editableKeys={[
+            'name',
+            'description',
+            'logo',
+            'settings.base.api_host',
+            'settings.base.explorer_host',
+            'settings.ethereum.api_host',
+            'settings.ethereum.explorer_host',
+          ]}
+        />
+      </FormProvider>
+    </DrawerForm>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ConfirmDialog, Switch, api, formatError, usePaymentContext } from '@blocklet/payment-react';
-import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { ChainType, TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import {
   AddOutlined,
   Check,
@@ -11,12 +11,14 @@ import {
   QrCodeOutlined,
   CheckCircleOutline,
   ErrorOutline,
+  OpenInNewOutlined,
 } from '@mui/icons-material';
 import {
   Alert,
   Avatar,
   Box,
   CircularProgress,
+  Divider,
   Grid,
   IconButton,
   List,
@@ -34,16 +36,23 @@ 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';
+import { joinURL } from 'ufo';
 import IconCollapse from '../../../../components/collapse';
 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 { useRpcStatus } from '../../../../hooks/rpc-status';
+import PaymentMethodEdit from './edit';
 
 const getMethods = (
   params: Record<string, any> = {}
-): Promise<{ list: TPaymentMethodExpanded[]; addresses: { arcblock: string; ethereum: string } }> => {
+): Promise<{
+  list: TPaymentMethodExpanded[];
+  addresses: { arcblock: string; ethereum: string };
+  balances: { [currencyId: string]: string };
+}> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     search.set(key, String(params[key]));
@@ -155,9 +164,10 @@ function RpcStatus({ method }: { method: TPaymentMethodExpanded }) {
   const renderStatus = () => {
     if (status.loading) {
       return (
-        <Typography variant="caption" color="text.secondary">
-          {t('admin.paymentMethod.evm.checking')}
-        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <CircularProgress size={14} />
+          <Typography color="text.secondary">{t('admin.paymentMethod.evm.checking')}</Typography>
+        </Box>
       );
     }
     if (status.connected) {
@@ -184,6 +194,108 @@ function RpcStatus({ method }: { method: TPaymentMethodExpanded }) {
   );
 }
 
+function Balance({
+  method,
+  balances,
+  addresses,
+  setDidDialog,
+}: {
+  method: TPaymentMethodExpanded;
+  balances: { [currencyId: string]: string };
+  addresses: { arcblock: string; ethereum: string };
+  setDidDialog: (value: any) => void;
+}) {
+  const { t } = useLocaleContext();
+  const defaultCurrency = (method.payment_currencies || [])?.find(
+    (x) => x.id === method.default_currency_id
+  ) as TPaymentCurrency;
+  const balance = fromUnitToToken(balances?.[defaultCurrency?.id] || '0', defaultCurrency?.decimal);
+  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
+  const getLink = () => {
+    if (method.type === 'arcblock' && addresses?.arcblock) {
+      return joinURL(explorerHost, 'accounts', addresses?.arcblock, 'tokens');
+    }
+    if (['ethereum', 'base'].includes(method.type) && addresses?.ethereum) {
+      return joinURL(explorerHost, 'address', addresses?.ethereum);
+    }
+    return '';
+  };
+  const insufficientBalance =
+    ['ethereum', 'base'].includes(method.type) &&
+    balances?.[defaultCurrency?.id] &&
+    balances?.[defaultCurrency?.id] === '0';
+  const getAddress = (type: string) => {
+    if (['ethereum', 'base'].includes(type)) {
+      return addresses?.ethereum || '';
+    }
+    return addresses?.arcblock || '';
+  };
+  return (
+    <>
+      <InfoRow label={t('admin.paymentMethod.props.explorer_host')} value={explorerHost} />
+      <InfoRow
+        label={
+          <Box display="flex" alignItems="center" gap={0.5}>
+            {t('admin.paymentMethod.props.balance')}
+            {['ethereum', 'base'].includes(method.type) && (
+              <Tooltip
+                title={t('admin.paymentMethod.gasTip', {
+                  method: method.type,
+                  chain: method.name,
+                })}>
+                <InfoOutlined
+                  sx={{ fontSize: 16, cursor: 'pointer', color: insufficientBalance ? 'error.main' : 'text.secondary' }}
+                />
+              </Tooltip>
+            )}
+          </Box>
+        }
+        value={
+          <Stack
+            direction="row"
+            alignItems="center"
+            sx={{
+              display: 'inline-flex',
+              borderRadius: 1,
+            }}>
+            <Typography
+              component="a"
+              href={getLink()}
+              target="_blank"
+              rel="noreferrer"
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+                '&.MuiTypography-root': {
+                  color: insufficientBalance ? 'error.main' : 'text.link',
+                },
+              }}>
+              {balance} {defaultCurrency?.symbol}
+              <OpenInNewOutlined sx={{ fontSize: 14 }} />
+            </Typography>
+            <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+            <Tooltip title={t('admin.paymentMethod.recharge')}>
+              <IconButton
+                size="small"
+                onClick={() =>
+                  setDidDialog({
+                    open: true,
+                    chainId: (method.settings?.[method.type as ChainType] as any)?.chain_id,
+                    did: getAddress(method.type),
+                  })
+                }
+                sx={{ p: 0.5 }}>
+                <QrCodeOutlined sx={{ fontSize: 16 }} />
+              </IconButton>
+            </Tooltip>
+          </Stack>
+        }
+      />
+    </>
+  );
+}
+
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
   const [expandedId, setExpandedId] = useSessionStorageState('payment-method-expanded-id', {
@@ -192,7 +304,7 @@ export default function PaymentMethods() {
   const {
     loading,
     error,
-    data = { list: [], addresses: {} } as any,
+    data = { list: [], addresses: {}, balances: {} } as any,
     runAsync,
   } = useRequest(() =>
     getMethods({
@@ -203,10 +315,11 @@ export default function PaymentMethods() {
     setExpandedId(expanded ? methodId : '');
   };
   const [didDialog, setDidDialog] = useSetState({ open: false, chainId: '', did: '' });
+  const [methodDialog, setMethodDialog] = useSetState({ open: false, value: null });
   const { refresh } = usePaymentContext();
   const [currencyDialog, setCurrencyDialog] = useSetState({ action: '', value: null, method: '' });
 
-  const { list: methods, addresses } = data;
+  const { list: methods, addresses, balances } = data;
   useBus(
     'paymentMethod.created',
     () => {
@@ -215,6 +328,14 @@ export default function PaymentMethods() {
     },
     []
   );
+  useBus(
+    'paymentMethod.updated',
+    () => {
+      runAsync();
+      refresh(true);
+    },
+    []
+  );
   useBus(
     'paymentCurrency.added',
     () => {
@@ -246,13 +367,6 @@ export default function PaymentMethods() {
 
   const groups = groupByType(methods);
 
-  const getAddress = (type: string) => {
-    if (['ethereum', 'base'].includes(type)) {
-      return addresses?.ethereum || '';
-    }
-    return addresses?.arcblock || '';
-  };
-
   const handleDeleteCurrency = async (currency: TPaymentCurrency) => {
     try {
       await api.delete(`/api/payment-currencies/${currency.id}`);
@@ -275,45 +389,25 @@ export default function PaymentMethods() {
             <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
               {x}
             </Typography>
-            {['ethereum', 'base'].includes(x) && (
-              <Stack
-                direction="row"
-                alignItems="center"
-                spacing={0.5}
-                sx={{
-                  px: 0.5,
-                  color: 'text.secondary',
-                }}>
-                <InfoOutlined sx={{ fontSize: 16 }} color="warning" />
-                <Typography variant="body2">
-                  {t('admin.paymentMethod.gasTip', {
-                    method: x,
-                    address: '222',
-                    chain: groups[x]?.[0]?.name || x,
-                  })}
-                </Typography>
-                <Tooltip title={t('admin.paymentMethod.showQR')}>
-                  <IconButton
-                    size="small"
-                    onClick={() =>
-                      setDidDialog({
-                        open: true,
-                        chainId: groups[x]?.[0]?.id || '',
-                        did: getAddress(x),
-                      })
-                    }
-                    sx={{ p: 0.5 }}>
-                    <QrCodeOutlined sx={{ fontSize: 16 }} />
-                  </IconButton>
-                </Tooltip>
-              </Stack>
-            )}
           </Stack>
           {(groups[x] as TPaymentMethodExpanded[]).map((method) => (
             <IconCollapse
               key={method.id}
               trigger={<InfoCard {...method} />}
-              addons={<Switch checked={method.active} />}
+              addons={
+                <>
+                  <Switch checked={method.active} disabled sx={{ cursor: 'default' }} />
+                  {method.type !== 'arcblock' && (
+                    <IconButton
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setMethodDialog({ open: true, value: method as any });
+                      }}>
+                      <EditOutlined />
+                    </IconButton>
+                  )}
+                </>
+              }
               style={{
                 py: 1,
                 borderTop: '1px solid #eee',
@@ -329,6 +423,10 @@ export default function PaymentMethods() {
                   <InfoRow label={t('admin.paymentMethod.props.type')} value={method.type} />
                   {method.type === 'arcblock' && <EditApiHost method={method} />}
                   {['ethereum', 'base'].includes(method.type) && <RpcStatus method={method} />}
+                  {['arcblock', 'ethereum', 'base'].includes(method.type) && (
+                    <Balance method={method} balances={balances} addresses={addresses} setDidDialog={setDidDialog} />
+                  )}
+
                   <InfoRow label={t('admin.paymentMethod.props.confirmation')} value={method.confirmation.type} />
                   <InfoRow
                     label={t('admin.paymentMethod.props.recurring')}
@@ -382,7 +480,7 @@ export default function PaymentMethods() {
                                 )
                               }>
                               <ListItemAvatar>
-                                <Avatar src={currency.logo} alt={currency.name} />
+                                <Avatar src={currency.logo} alt={currency.symbol} />
                               </ListItemAvatar>
                               <ListItemText primary={currency.name} secondary={currency.description} />
                             </ListItem>
@@ -442,6 +540,9 @@ export default function PaymentMethods() {
           chainId={didDialog.chainId}
         />
       )}
+      {methodDialog.open && methodDialog.value && (
+        <PaymentMethodEdit value={methodDialog.value} onClose={() => setMethodDialog({ open: false, value: null })} />
+      )}
     </>
   );
 }

package/src/pages/customer/index.tsx

@@ -94,7 +94,14 @@ export default function CustomerHome() {
   const { settings } = usePaymentContext();
   const [currency, setCurrency] = useState(settings?.baseCurrency);
   const [subscriptionLoading, setSubscriptionLoading] = useState(false);
-  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
+  const currencies = flatten(
+    settings.paymentMethods.map((method) =>
+      (method.payment_currencies || []).map((c) => ({
+        ...c,
+        methodName: method.name,
+      }))
+    )
+  );
 
   const { livemode, setLivemode } = usePaymentContext();
   const [state, setState] = useSetState({
@@ -249,18 +256,17 @@ export default function CustomerHome() {
             {currencies.map((c) => (
               <MenuItem key={c.id} value={c.id}>
                 <Box alignItems="center" display="flex" gap={1}>
-                  <Avatar src={c?.logo} alt={c?.name} sx={{ width: 18, height: 18 }} />
+                  <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
                   <Typography
                     variant="h5"
                     component="div"
                     sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
-                    {c?.name}
+                    {c?.symbol}
                   </Typography>
                   <Typography sx={{ fontSize: 12 }} color="text.lighter">
-                    {c?.symbol}
+                    {c?.methodName}
                   </Typography>
                 </Box>
-                {/* {c.symbol} */}
               </MenuItem>
             ))}
           </Select>

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

@@ -209,7 +209,7 @@ export default function CustomerSubscriptionDetail() {
             gap: 0.5,
             fontWeight: 500,
           }}>
-          <Avatar src={data.paymentCurrency?.logo} sx={{ width: 16, height: 16 }} alt={data.paymentCurrency?.name} />
+          <Avatar src={data.paymentCurrency?.logo} sx={{ width: 16, height: 16 }} alt={data.paymentCurrency?.symbol} />
           <Box display="flex" alignItems="baseline">
             {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
             <Typography

package/src/pages/home.tsx

@@ -17,7 +17,12 @@ function Home() {
       />
       <Stack alignItems="center" justifyContent="center" sx={{ height: '60vh', width: '100vw' }}>
         <Stack maxWidth="sm" direction="column" alignItems="center" spacing={3}>
-          <Avatar src={window.blocklet.appLogo} sx={{ width: 80, height: 80 }} variant="square" />
+          <Avatar
+            src={window.blocklet.appLogo}
+            sx={{ width: 80, height: 80 }}
+            variant="square"
+            alt={window.blocklet.appName || 'Payment Kit'}
+          />
           <Stack direction="column" alignItems="center" spacing={1}>
             <Typography variant="h4">Payment Kit</Typography>
             <Typography variant="h5" color="text.secondary" fontWeight="normal">