payment-kit 1.17.7 → 1.17.8

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.7",
+  "version": "1.17.8",
   "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.7",
+    "@blocklet/payment-react": "1.17.8",
     "@blocklet/sdk": "^1.16.37",
     "@blocklet/ui-react": "^2.11.27",
     "@blocklet/uploader": "^0.1.64",
@@ -115,12 +115,13 @@
     "ufo": "^1.5.4",
     "umzug": "^3.8.1",
     "use-bus": "^2.5.2",
-    "validator": "^13.12.0"
+    "validator": "^13.12.0",
+    "web3": "^4.16.0"
   },
   "devDependencies": {
     "@abtnode/types": "^1.16.37",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.17.7",
+    "@blocklet/payment-types": "1.17.8",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "f2a439af19e405746a6663b4dbef8a96231a1076"
+  "gitHead": "3a896417b3beb364f8c986ea0b5b968810da9ef7"
 }

package/src/components/collapse.tsx

@@ -1,28 +1,49 @@
 import { ExpandLessOutlined, ExpandMoreOutlined } from '@mui/icons-material';
 import { Box, Collapse, Stack } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type Props = {
-  trigger: string | Function | React.ReactNode;
-  children: React.ReactNode;
+  trigger: string | ((expanded: boolean) => React.ReactNode) | React.ReactNode;
+  children?: React.ReactNode;
   expanded?: boolean;
   addons?: React.ReactNode;
   style?: Record<string, any>;
+  value?: string;
+  onChange?: (value: string, expanded: boolean) => void;
+  lazy?: boolean;
+};
+
+IconCollapse.defaultProps = {
+  value: '',
+  onChange: () => {},
+  children: null,
+  expanded: false,
+  addons: null,
+  style: {},
+  lazy: true,
 };
 
 export default function IconCollapse(props: Props) {
   const [expanded, setExpanded] = useState(props.expanded || false);
   const toggleExpanded = () => {
-    setExpanded((prev) => !prev);
+    const newExpanded = !expanded;
+    setExpanded(newExpanded);
   };
 
+  useEffect(() => {
+    setExpanded(props.expanded || false);
+  }, [props.expanded]);
+
   return (
     <>
       <Stack
         direction="row"
         alignItems="center"
         justifyContent="space-between"
-        onClick={toggleExpanded}
+        onClick={() => {
+          props.onChange?.(props.value || '', !expanded);
+          toggleExpanded();
+        }}
         sx={{
           width: 1,
           cursor: 'pointer',
@@ -31,20 +52,12 @@ export default function IconCollapse(props: Props) {
           '& :hover': { color: 'primary.main' },
           ...props.style,
         }}>
-        <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger} </Box>
+        <Box>{typeof props.trigger === 'function' ? props.trigger(expanded) : props.trigger}</Box>
         <Stack direction="row" alignItems="center" spacing={2}>
           {props.addons} {expanded ? <ExpandLessOutlined /> : <ExpandMoreOutlined />}
         </Stack>
       </Stack>
-      <Collapse in={expanded}>
-        <Box>{props.children}</Box>
-      </Collapse>
+      <Collapse in={expanded}>{expanded || props.lazy ? props.children : null}</Collapse>
     </>
   );
 }
-
-IconCollapse.defaultProps = {
-  expanded: false,
-  addons: null,
-  style: {},
-};

package/src/components/customer/edit.tsx

@@ -62,12 +62,7 @@ export default function EditCustomer({
       hideLiveMode
       onClose={onCancel}
       footer={
-        <Button
-          variant="contained"
-          color="primary"
-          disabled={loading}
-          onClick={onSubmit}
-          sx={{ width: '100%', mt: 2.5 }}>
+        <Button variant="contained" color="primary" disabled={loading} onClick={onSubmit} sx={{ width: '100%' }}>
           {loading && <CircularProgress size="small" />} {t('common.save')}
         </Button>
       }>

package/src/components/drawer-form.tsx

@@ -9,7 +9,7 @@ import useBus from 'use-bus';
 type Props = {
   icon: React.ReactNode;
   text: string;
-  addons: React.ReactNode;
+  addons?: React.ReactNode;
   children: React.ReactNode;
   width?: number;
   open?: boolean;
@@ -26,6 +26,7 @@ DrawerForm.defaultProps = {
   onClose: noop,
   hideLiveMode: false,
   footer: null,
+  addons: null,
 };
 
 export default function DrawerForm(props: Props) {
@@ -60,26 +61,52 @@ export default function DrawerForm(props: Props) {
           alignItems="center"
           justifyContent="space-between"
           className="drawer-form-header-wrapper"
-          sx={{ pl: 3, pr: 3, pb: 2, pt: 2, borderBottom: '1px solid var(--stroke-sep, #EFF1F5)' }}>
-          <Stack direction="row" alignItems="center">
-            <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
-              {props.text}
-            </Typography>
-            {!settings.livemode && !props.hideLiveMode && <Livemode />}
-          </Stack>
-          <Stack direction="row" alignItems="center" justifyContent="space-between">
-            <Close
-              sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
-              onClick={handleClose}
-            />
-            {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} />}
+          flexWrap="wrap"
+          sx={{
+            pl: 3,
+            pr: 3,
+            pb: 2,
+            pt: 2,
+            gap: 1,
+            borderBottom: '1px solid var(--stroke-sep, #EFF1F5)',
+            '@media (max-width: 600px)': {
+              '& > .addons-wrapper': {
+                width: '100%',
+                justifyContent: 'flex-end',
+                '& > .addons-divider': {
+                  display: 'none',
+                },
+              },
+            },
+          }}>
+          <Box flex={1} display="flex" alignItems="center" justifyContent="space-between">
+            <Stack direction="row" alignItems="center">
+              <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
+                {props.text}
+              </Typography>
+              {!settings.livemode && !props.hideLiveMode && <Livemode />}
+            </Stack>
+            <Stack direction="row" alignItems="center" justifyContent="space-between">
+              <Close
+                sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
+                onClick={handleClose}
+              />
+            </Stack>
+          </Box>
+          <Box display="flex" alignItems="center" className="addons-wrapper">
+            {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} className="addons-divider" />}
             {props.addons}
-          </Stack>
+          </Box>
         </Stack>
         <Box className="drawer-form-body" sx={{ mx: 3, my: 2 }}>
           {props.children}
         </Box>
-        <Box className="drawer-form-footer">{props.footer}</Box>
+        {props.footer && (
+          <Box className="drawer-form-footer">
+            <Divider sx={{ mb: 2 }} />
+            {props.footer}
+          </Box>
+        )}
       </Container>
     </>
   );

package/src/components/info-row.tsx

@@ -33,6 +33,7 @@ export default function InfoRow(props: Props) {
       alignItems={props.alignItems}
       justifyContent="space-between"
       flexWrap="wrap"
+      gap={1}
       sx={{
         mb: 2,
         ...props.sx,

package/src/components/payment-currency/add.tsx

@@ -121,9 +121,14 @@ export default function PaymentCurrencyAdd({
       onClose={onClose}
       text={t('admin.paymentCurrency.add')}
       width={640}
-      addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={state.loading}>
-          {state.loading ? <CircularProgress size={20} /> : t('admin.paymentCurrency.save')}
+      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}>

package/src/components/payment-currency/edit.tsx

@@ -60,9 +60,14 @@ export default function PaymentCurrencyEdit({
       onClose={onClose}
       text={t('admin.paymentCurrency.edit')}
       width={640}
-      addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={state.loading}>
-          {state.loading ? <CircularProgress size="small" /> : t('admin.paymentCurrency.save')}
+      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}>

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

@@ -5,6 +5,7 @@ import { Stack, Typography } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 
 import Uploader from '../uploader';
+import EvmRpcInput from './evm-rpc-input';
 
 export default function BaseMethodForm() {
   const { t } = useLocaleContext();
@@ -38,11 +39,8 @@ export default function BaseMethodForm() {
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
       />
-      <FormInput
-        key="api_host"
+      <EvmRpcInput
         name="settings.base.api_host"
-        type="text"
-        rules={{ required: true }}
         label={t('admin.paymentMethod.base.api_host.label')}
         placeholder={t('admin.paymentMethod.base.api_host.tip')}
       />

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

@@ -5,6 +5,7 @@ import { Stack, Typography } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 
 import Uploader from '../uploader';
+import EvmRpcInput from './evm-rpc-input';
 
 export default function EthereumMethodForm() {
   const { t } = useLocaleContext();
@@ -38,11 +39,8 @@ export default function EthereumMethodForm() {
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
       />
-      <FormInput
-        key="api_host"
+      <EvmRpcInput
         name="settings.ethereum.api_host"
-        type="text"
-        rules={{ required: true }}
         label={t('admin.paymentMethod.ethereum.api_host.label')}
         placeholder={t('admin.paymentMethod.ethereum.api_host.tip')}
       />

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

@@ -0,0 +1,66 @@
+/* eslint-disable no-nested-ternary */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormInput } from '@blocklet/payment-react';
+import { Box, Typography, CircularProgress } from '@mui/material';
+import { useWatch, useFormContext } from 'react-hook-form';
+import { CheckCircleOutline, ErrorOutline } from '@mui/icons-material';
+import { useRpcStatus } from '../../hooks/rpc-status';
+
+interface Props {
+  name: string; // 表单字段名
+  label: string;
+  placeholder: string;
+}
+
+export default function EvmRpcInput({ name, label, placeholder }: Props) {
+  const { t } = useLocaleContext();
+  const { control } = useFormContext();
+  const apiHost = useWatch({
+    control,
+    name,
+  });
+
+  const { status } = useRpcStatus(apiHost, { debounce: 500, pollInterval: 2000 });
+
+  return (
+    <FormInput
+      key="api_host"
+      name={name}
+      type="text"
+      rules={{ required: true }}
+      label={
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          {label}
+          {apiHost && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              {status.loading ? (
+                <>
+                  <CircularProgress size={14} />
+                  <Typography variant="caption" color="text.secondary">
+                    {t('admin.paymentMethod.evm.checking')}
+                  </Typography>
+                </>
+              ) : status.connected ? (
+                <>
+                  <CheckCircleOutline sx={{ fontSize: 14 }} color="success" />
+                  <Typography variant="caption" color="text.secondary">
+                    {t('admin.paymentMethod.evm.connected')} | {t('admin.paymentMethod.evm.blockHeight')}:{' '}
+                    {status.blockNumber?.toLocaleString()}
+                  </Typography>
+                </>
+              ) : status.error ? (
+                <>
+                  <ErrorOutline sx={{ fontSize: 14 }} color="error" />
+                  <Typography variant="caption" color="error">
+                    {t('admin.paymentMethod.evm.connectionError')}
+                  </Typography>
+                </>
+              ) : null}
+            </Box>
+          )}
+        </Box>
+      }
+      placeholder={placeholder}
+    />
+  );
+}

package/src/hooks/rpc-status.ts

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import debounce from 'lodash/debounce';
+
+interface NetworkStatus {
+  loading: boolean;
+  connected: boolean;
+  blockNumber?: bigint;
+  error?: string;
+}
+
+let cachedWeb3Promise: Promise<typeof import('web3').default> | null = null;
+
+const loadWeb3 = () => {
+  if (!cachedWeb3Promise) {
+    cachedWeb3Promise = import('web3')
+      .then((module) => module.default)
+      .catch((error) => {
+        cachedWeb3Promise = null;
+        throw error;
+      });
+  }
+  return cachedWeb3Promise;
+};
+
+/**
+ * Manages the network status of a Web3 connection with optional debouncing.
+ *
+ * @param apiHost - Optional URL of the Ethereum RPC endpoint
+ * @param options - Configuration options for connection checking
+ * @param options.debounce - Delay in milliseconds between connection checks (default: 500ms)
+ * @param options.pollInterval - Interval in milliseconds between connection checks (default: 2000ms)
+ *
+ * @returns An object containing the current network status and a manual connection check function
+ *
+ * @remarks
+ * This hook provides real-time monitoring of Web3 network connectivity, including:
+ * - Loading state tracking
+ * - Connection status detection
+ * - Block number retrieval
+ * - Error handling for connection attempts
+ *
+ * @example
+ * const { status, checkConnection } = useRpcStatus('https://mainnet.infura.io/v3/YOUR-PROJECT-ID');
+ * // status will contain { loading, connected, blockNumber?, error? }
+ */
+export function useRpcStatus(apiHost?: string, options = { debounce: 500, pollInterval: 2000 }) {
+  const [status, setStatus] = useState<NetworkStatus>({
+    loading: false,
+    connected: false,
+  });
+
+  const initializedRef = useRef(false);
+  const checkingRef = useRef(false);
+  const checkConnection = useCallback(
+    async (isPolling = false) => {
+      if (!apiHost) {
+        setStatus({ loading: false, connected: false });
+        return;
+      }
+
+      if (checkingRef.current) {
+        return;
+      }
+      checkingRef.current = true;
+
+      if (!isPolling && !initializedRef.current) {
+        setStatus((prev) => ({ ...prev, loading: true }));
+      }
+      try {
+        const Web3 = await loadWeb3();
+        const web3 = new Web3(apiHost);
+
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          setTimeout(() => reject(new Error('Connection timeout')), 5000);
+        });
+        const blockNumber = await Promise.race([web3.eth.getBlockNumber(), timeoutPromise]);
+
+        setStatus({
+          loading: false,
+          connected: true,
+          blockNumber,
+        });
+        initializedRef.current = true;
+      } catch (error) {
+        setStatus({
+          loading: false,
+          connected: false,
+          error: error.message,
+        });
+      } finally {
+        checkingRef.current = false;
+      }
+    },
+    [apiHost]
+  );
+
+  const debouncedCheck = useMemo(
+    () => debounce(checkConnection, options.debounce),
+    [checkConnection, options.debounce]
+  );
+
+  useEffect(() => {
+    const check = options.debounce > 0 ? debouncedCheck : checkConnection;
+    initializedRef.current = false;
+    check();
+
+    let pollTimer: NodeJS.Timeout | null = null;
+    if (options.pollInterval > 0) {
+      pollTimer = setInterval(() => checkConnection(true), options.pollInterval);
+    }
+
+    return () => {
+      if (options.debounce > 0) {
+        debouncedCheck.cancel();
+      }
+      if (pollTimer) {
+        clearInterval(pollTimer);
+      }
+      checkingRef.current = false;
+    };
+  }, [apiHost, options.debounce, options.pollInterval, checkConnection, debouncedCheck]);
+
+  return { status, checkConnection };
+}

package/src/locales/en.tsx

@@ -398,6 +398,13 @@ export default flat({
           tip: 'How many blocks since transaction execution',
         },
       },
+      evm: {
+        checking: 'Checking connection...',
+        connected: 'Connected',
+        connectionError: 'Connection failed',
+        blockHeight: 'Block Height',
+        rpcStatus: 'RPC Status',
+      },
       base: {
         chain_id: {
           label: 'Chain ID',

package/src/locales/zh.tsx

@@ -387,6 +387,13 @@ export default flat({
           tip: '交易标记为确认需要的区块数',
         },
       },
+      evm: {
+        checking: '正在检查连接...',
+        connected: '连接成功',
+        connectionError: '连接失败',
+        blockHeight: '区块高度',
+        rpcStatus: 'RPC 状态',
+      },
       base: {
         chain_id: {
           label: '链 ID',

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

@@ -77,9 +77,9 @@ export default function PaymentMethodCreate() {
       icon={<AddOutlined />}
       text={t('admin.paymentMethod.add')}
       width={640}
-      addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
-          {t('admin.paymentMethod.save')}
+      footer={
+        <Button variant="contained" size="large" onClick={handleSubmit(onSubmit)} sx={{ width: '100%' }}>
+          {t('common.save')}
         </Button>
       }>
       <FormProvider {...methods}>

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

@@ -9,6 +9,8 @@ import {
   EditOutlined,
   InfoOutlined,
   QrCodeOutlined,
+  CheckCircleOutline,
+  ErrorOutline,
 } from '@mui/icons-material';
 import {
   Alert,
@@ -26,7 +28,7 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import { useRequest, useSetState } from 'ahooks';
+import { useRequest, useSessionStorageState, useSetState } from 'ahooks';
 import useBus from 'use-bus';
 
 import { useState } from 'react';
@@ -37,6 +39,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 { useRpcStatus } from '../../../../hooks/rpc-status';
 
 const getMethods = (
   params: Record<string, any> = {}
@@ -143,8 +146,49 @@ const groupByType = (methods: TPaymentMethodExpanded[]) => {
   return groups;
 };
 
+function RpcStatus({ method }: { method: TPaymentMethodExpanded }) {
+  const { t } = useLocaleContext();
+  // @ts-ignore
+  const apiHost = method.settings?.[method.type]?.api_host;
+  const { status } = useRpcStatus(apiHost, { debounce: 0, pollInterval: 2000 });
+
+  const renderStatus = () => {
+    if (status.loading) {
+      return (
+        <Typography variant="caption" color="text.secondary">
+          {t('admin.paymentMethod.evm.checking')}
+        </Typography>
+      );
+    }
+    if (status.connected) {
+      return (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <CheckCircleOutline sx={{ fontSize: 14 }} color="success" />
+          <Typography color="text.secondary">{t('admin.paymentMethod.evm.connected')}</Typography>
+        </Box>
+      );
+    }
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <ErrorOutline sx={{ fontSize: 14 }} color="error" />
+        <Typography color="error">{t('admin.paymentMethod.evm.connectionError')}</Typography>
+      </Box>
+    );
+  };
+  return (
+    <>
+      <InfoRow label={t(`admin.paymentMethod.${method.type}.api_host.label`)} value={apiHost} />
+      <InfoRow label={t('admin.paymentMethod.evm.rpcStatus')} value={renderStatus()} />
+      <InfoRow label={t('admin.paymentMethod.evm.blockHeight')} value={status.blockNumber?.toLocaleString()} />
+    </>
+  );
+}
+
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
+  const [expandedId, setExpandedId] = useSessionStorageState('payment-method-expanded-id', {
+    defaultValue: '',
+  });
   const {
     loading,
     error,
@@ -155,6 +199,9 @@ export default function PaymentMethods() {
       addresses: true,
     })
   );
+  const handleExpand = (methodId: string, expanded: boolean) => {
+    setExpandedId(expanded ? methodId : '');
+  };
   const [didDialog, setDidDialog] = useSetState({ open: false, chainId: '', did: '' });
   const { refresh } = usePaymentContext();
   const [currencyDialog, setCurrencyDialog] = useSetState({ action: '', value: null, method: '' });
@@ -224,7 +271,7 @@ export default function PaymentMethods() {
     <>
       {Object.keys(groups).map((x) => (
         <Box key={x} mt={3}>
-          <Stack direction="row" alignItems="center" mb={1}>
+          <Stack direction="row" alignItems="center" mb={1} flexWrap="wrap" gap={1}>
             <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
               {x}
             </Typography>
@@ -234,7 +281,6 @@ export default function PaymentMethods() {
                 alignItems="center"
                 spacing={0.5}
                 sx={{
-                  ml: 1,
                   px: 0.5,
                   color: 'text.secondary',
                 }}>
@@ -273,11 +319,16 @@ export default function PaymentMethods() {
                 borderTop: '1px solid #eee',
                 borderBottom: '1px solid #eee',
                 '& :hover': { color: 'text.primary' },
-              }}>
+              }}
+              value={method.id}
+              expanded={expandedId === method.id}
+              onChange={(value, expanded) => handleExpand(value, expanded)}
+              lazy={false}>
               <Grid container spacing={2} mt={0}>
                 <Grid item xs={12} md={6}>
                   <InfoRow label={t('admin.paymentMethod.props.type')} value={method.type} />
                   {method.type === 'arcblock' && <EditApiHost method={method} />}
+                  {['ethereum', 'base'].includes(method.type) && <RpcStatus method={method} />}
                   <InfoRow label={t('admin.paymentMethod.props.confirmation')} value={method.confirmation.type} />
                   <InfoRow
                     label={t('admin.paymentMethod.props.recurring')}