payment-kit 1.18.13 → 1.18.15

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

@@ -25,6 +25,7 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Skeleton,
   Stack,
   TextField,
   Tooltip,
@@ -296,6 +297,37 @@ function Balance({
   );
 }
 
+function PaymentMethodSkeleton() {
+  return (
+    <>
+      {[1].map((group) => (
+        <Box key={group} mt={3}>
+          <Stack direction="row" alignItems="center" mb={1} flexWrap="wrap" gap={1}>
+            <Skeleton variant="text" width={120} height={32} />
+          </Stack>
+          <Box
+            sx={{
+              py: 1,
+              borderTop: '1px solid #eee',
+              borderBottom: '1px solid #eee',
+              mb: 1,
+            }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Stack direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
+                <Skeleton variant="rectangular" width={40} height={40} />
+                <Box sx={{ flex: 1 }}>
+                  <Skeleton variant="text" width="20%" height={24} />
+                  <Skeleton variant="text" width="40%" height={20} />
+                </Box>
+              </Stack>
+            </Stack>
+          </Box>
+        </Box>
+      ))}
+    </>
+  );
+}
+
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
   const [expandedId, setExpandedId] = useSessionStorageState('payment-method-expanded-id', {
@@ -362,7 +394,7 @@ export default function PaymentMethods() {
   }
 
   if (loading || !data || methods?.length === 0) {
-    return <CircularProgress />;
+    return <PaymentMethodSkeleton />;
   }
 
   const groups = groupByType(methods);

package/src/pages/admin/settings/vault-config/edit-form.tsx

@@ -0,0 +1,253 @@
+import { useForm, Controller } from 'react-hook-form';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { api, formatBNStr, Switch, formatAmountPrecisionLimit, LoadingButton } from '@blocklet/payment-react';
+import { Box, Button, Stack, TextField, Typography, Alert, Tooltip, InputAdornment, Divider } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { useRequest } from 'ahooks';
+import type { TPaymentCurrencyExpanded } from '@blocklet/payment-types';
+import Currency from '../../../../components/currency';
+
+type EditFormProps = {
+  item: TPaymentCurrencyExpanded | null;
+  onClose: () => void;
+  onSuccess: () => void;
+  isOwner: boolean;
+};
+
+type VaultConfigFormData = {
+  enabled: boolean;
+  deposit_threshold: string;
+  withdraw_threshold: string;
+};
+
+const DEFAULT_DEPOSIT_THRESHOLD = '100';
+
+const updateVaultConfig = async (currencyId: string, data: VaultConfigFormData) => {
+  const res = await api.put(`/api/payment-currencies/${currencyId}/vault-config`, data);
+  return res.data;
+};
+
+function EditForm({ item, onClose, onSuccess, isOwner }: EditFormProps) {
+  const { t, locale } = useLocaleContext();
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<VaultConfigFormData>({
+    defaultValues: {
+      enabled: true,
+      deposit_threshold:
+        item?.vault_config?.deposit_threshold && item?.vault_config?.deposit_threshold !== '0'
+          ? formatBNStr(item.vault_config.deposit_threshold, item?.decimal || 18)
+          : DEFAULT_DEPOSIT_THRESHOLD,
+      withdraw_threshold: item?.vault_config?.withdraw_threshold
+        ? formatBNStr(item.vault_config.withdraw_threshold, item?.decimal || 18)
+        : '0',
+    },
+    mode: 'onChange',
+  });
+
+  const enabled = watch('enabled');
+  // const withdrawThreshold = watch('withdraw_threshold');
+
+  const getDepositHelperText = (error?: { message?: string }) => {
+    if (error) return error.message;
+    return t('admin.vaultConfig.depositThresholdHelp');
+  };
+
+  // const getWithdrawHelperText = (error?: { message?: string }, threshold?: string) => {
+  //   if (error) return error.message;
+  //   return Number(threshold) === 0
+  //     ? t('admin.vaultConfig.withdrawThresholdNoLimit')
+  //     : t('admin.vaultConfig.withdrawThresholdHelp');
+  // };
+
+  const { runAsync: runUpdateVaultConfig, loading } = useRequest(updateVaultConfig, {
+    manual: true,
+  });
+
+  const onSubmit = (data: VaultConfigFormData) => {
+    if (!item) return;
+
+    const getSuccessMessage = () => {
+      const originalEnabled = item.vault_config?.enabled;
+      if (!originalEnabled && data.enabled) {
+        return t('admin.vaultConfig.enableSuccess', {
+          currency: item.symbol,
+        });
+      }
+      if (originalEnabled && !data.enabled) {
+        return t('admin.vaultConfig.disableSuccess', {
+          currency: item.symbol,
+        });
+      }
+      return t('admin.vaultConfig.updateSuccess', {
+        currency: item.symbol,
+      });
+    };
+
+    runUpdateVaultConfig(item.id, data).then(() => {
+      Toast.success(getSuccessMessage());
+      onSuccess();
+    });
+  };
+
+  if (!item) return null;
+
+  const renderLabelWithTooltip = (label: string, tooltip: string) => (
+    <Stack direction="row" spacing={1} alignItems="center">
+      <Typography variant="subtitle2">{label}</Typography>
+      <Tooltip title={tooltip}>
+        <HelpOutlineIcon fontSize="small" sx={{ color: 'text.secondary' }} />
+      </Tooltip>
+    </Stack>
+  );
+
+  return (
+    <Dialog
+      open
+      fullWidth
+      onClose={onClose}
+      className="base-dialog"
+      title={
+        item.vault_config?.enabled
+          ? t('admin.vaultConfig.editTitle', { currency: item.symbol })
+          : t('admin.vaultConfig.enableTitle', { currency: item.symbol })
+      }
+      actions={
+        <Stack direction="row" spacing={2}>
+          <Button variant="outlined" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <LoadingButton
+            variant="contained"
+            color="primary"
+            disabled={loading || !isOwner}
+            onClick={handleSubmit(onSubmit)}>
+            {t('common.save')}
+          </LoadingButton>
+        </Stack>
+      }>
+      <Box sx={{ pb: 2 }}>
+        <Alert severity="info" sx={{ mb: 3 }}>
+          {t('admin.vaultConfig.enableVaultHelp')}
+        </Alert>
+
+        <Stack spacing={3}>
+          {/* 启用设置 */}
+          <Stack direction="row" alignItems="center" gap={2}>
+            <Typography variant="subtitle1">{t('admin.vaultConfig.enableVault')}</Typography>
+            <Controller
+              name="enabled"
+              control={control}
+              render={({ field }) => (
+                <Switch checked={field.value} onChange={(e) => field.onChange(e.target.checked)} />
+              )}
+            />
+          </Stack>
+
+          {enabled && (
+            <>
+              <Divider sx={{ my: 1 }} />
+
+              {/* 存入阈值设置 */}
+              <Box>
+                {renderLabelWithTooltip(
+                  t('admin.vaultConfig.depositThreshold'),
+                  t('admin.vaultConfig.depositThresholdHelp')
+                )}
+                <Controller
+                  name="deposit_threshold"
+                  control={control}
+                  rules={{
+                    required: true,
+                    validate: (value) => {
+                      if (Number(value) <= 0) {
+                        return t('admin.vaultConfig.depositThresholdRequired');
+                      }
+                      const validPrecision = formatAmountPrecisionLimit(value.toString(), locale, item.decimal || 6);
+                      return validPrecision || true;
+                    },
+                  }}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      type="number"
+                      error={!!errors.deposit_threshold}
+                      helperText={getDepositHelperText(errors.deposit_threshold)}
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <Box sx={{ display: 'flex', alignItems: 'center', ml: 1 }}>
+                              <Currency logo={item.logo} name={item.symbol} />
+                            </Box>
+                          </InputAdornment>
+                        ),
+                        inputProps: {
+                          min: 0,
+                        },
+                      }}
+                      sx={{ mt: 1 }}
+                      placeholder={DEFAULT_DEPOSIT_THRESHOLD}
+                    />
+                  )}
+                />
+              </Box>
+
+              {/* 提取阈值设置 */}
+              {/* <Box>
+                {renderLabelWithTooltip(
+                  t('admin.vaultConfig.withdrawThreshold'),
+                  t('admin.vaultConfig.withdrawThresholdHelp')
+                )}
+                <Controller
+                  name="withdraw_threshold"
+                  control={control}
+                  rules={{
+                    required: true,
+                    validate: (value) => {
+                      if (Number(value) < 0) {
+                        return t('admin.vaultConfig.withdrawThresholdInvalid');
+                      }
+                      const validPrecision = formatAmountPrecisionLimit(value.toString(), locale, item.decimal || 6);
+                      return validPrecision || true;
+                    },
+                  }}
+                  render={({ field }) => (
+                    <TextField
+                      {...field}
+                      fullWidth
+                      type="number"
+                      error={!!errors.withdraw_threshold}
+                      helperText={getWithdrawHelperText(errors.withdraw_threshold, withdrawThreshold)}
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <Box sx={{ display: 'flex', alignItems: 'center', ml: 1 }}>
+                              <Currency logo={item.logo} name={item.symbol} />
+                            </Box>
+                          </InputAdornment>
+                        ),
+                        inputProps: {
+                          min: 0,
+                        },
+                      }}
+                      sx={{ mt: 1 }}
+                      placeholder="0"
+                    />
+                  )}
+                />
+              </Box> */}
+            </>
+          )}
+        </Stack>
+      </Box>
+    </Dialog>
+  );
+}
+
+export default EditForm;

package/src/pages/admin/settings/vault-config/index.tsx

@@ -0,0 +1,367 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, ConfirmDialog, formatBNStr, Link, parseMarkedText, Table, useMobile } from '@blocklet/payment-react';
+import { Alert, Avatar, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+import Empty from '@arcblock/ux/lib/Empty';
+import { HelpOutline } from '@mui/icons-material';
+import type { TPaymentCurrencyExpanded } from '@blocklet/payment-types';
+import { Toast } from '@arcblock/ux';
+import { styled } from '@mui/system';
+import { useSessionContext } from '../../../../contexts/session';
+
+import EditForm from './edit-form';
+
+export const getVaultConfigs = async () => {
+  const res = await api.get('/api/payment-currencies/vault-config');
+  return res.data;
+};
+
+export const checkDepositVault = async (currencyId: string) => {
+  const res = await api.get(`/api/payment-currencies/${currencyId}/deposit-vault`);
+  return res.data;
+};
+
+export const depositToVault = async (currencyId: string) => {
+  const res = await api.put(`/api/payment-currencies/${currencyId}/deposit-vault`);
+  return res.data;
+};
+
+export default function VaultConfig() {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const { isMobile } = useMobile();
+  const isOwner = session?.user?.role === 'owner';
+
+  const [state, setState] = useSetState({
+    item: null as TPaymentCurrencyExpanded | null,
+    edit: false,
+    confirm: false,
+  });
+
+  const {
+    data = {
+      list: [],
+      balances: {},
+    },
+    loading,
+    error,
+    refresh,
+  } = useRequest(getVaultConfigs, {
+    onSuccess: (res) => {
+      if (res.error) {
+        Toast.error(res.error);
+      }
+    },
+  });
+
+  const { runAsync: runCheckDepositVault } = useRequest(checkDepositVault, {
+    manual: true,
+    onSuccess: (result) => {
+      if (result.depositAmount && result.depositAmount !== '0') {
+        setState({
+          confirm: true,
+        });
+      }
+    },
+  });
+  const handleEditClick = (item: TPaymentCurrencyExpanded) => {
+    setState({
+      item,
+      edit: true,
+    });
+  };
+
+  const handleFormClose = () => {
+    setState({
+      edit: false,
+    });
+  };
+
+  // 确认转入冷钱包
+  const handleDepositConfirm = async () => {
+    if (!state.item) return;
+    try {
+      setState({ confirm: false });
+      await depositToVault(state.item.id);
+      Toast.success(t('admin.vaultConfig.depositQueued'));
+    } catch (err) {
+      Toast.error(t('admin.vaultConfig.depositFailed'));
+    }
+  };
+
+  const handleFormSuccess = () => {
+    if (state.item) {
+      runCheckDepositVault(state.item.id);
+    }
+    refresh();
+    handleFormClose();
+  };
+
+  const columns = [
+    {
+      label: t('common.currency'),
+      name: 'symbol',
+      options: {
+        customBodyRenderLite: (dataIndex: number) => {
+          const item = data.list?.[dataIndex];
+          if (!item) {
+            return '-';
+          }
+          return (
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Avatar src={item.logo} alt={item.symbol} style={{ width: 24, height: 24 }} />
+              <Box>
+                <Typography variant="body2">{item.symbol}</Typography>
+                {!isMobile && (
+                  <Typography variant="caption" color="text.secondary">
+                    {item.payment_method?.name}
+                  </Typography>
+                )}
+              </Box>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.vaultConfig.appBalance'),
+      name: 'id',
+      options: {
+        customBodyRenderLite: (dataIndex: number) => {
+          const item = data.list?.[dataIndex];
+          if (!item) {
+            return '-';
+          }
+          return (
+            <Typography variant="body1">
+              {formatBNStr(data.balances?.[item.id] || '0', item.decimal)} {item.symbol}
+            </Typography>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.vaultConfig.enabled'),
+      name: 'vault_enabled',
+      options: {
+        customBodyRenderLite: (dataIndex: number) => {
+          const item = data.list?.[dataIndex];
+          if (!item) {
+            return '-';
+          }
+          const enabled = item.vault_config?.enabled;
+          return (
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Box
+                sx={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: '50%',
+                  bgcolor: enabled ? 'success.main' : 'text.lighter',
+                }}
+              />
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {enabled ? t('admin.vaultConfig.enabledYes') : t('admin.vaultConfig.enabledNo')}
+              </Typography>
+            </Stack>
+          );
+        },
+      },
+    },
+    {
+      label: t('admin.vaultConfig.depositThreshold'),
+      name: 'deposit_threshold',
+      options: {
+        customBodyRenderLite: (dataIndex: number) => {
+          const item = data.list?.[dataIndex];
+          if (!item) {
+            return '-';
+          }
+          if (!item?.vault_config) {
+            return (
+              <Typography variant="body2" color="text.secondary">
+                {t('admin.vaultConfig.notConfig')}
+              </Typography>
+            );
+          }
+          return (
+            <Typography variant="body1">
+              {formatBNStr(item.vault_config?.deposit_threshold || '0', item.decimal)} {item.symbol}
+            </Typography>
+          );
+        },
+        customHeadLabelRender: () => {
+          return (
+            <Box display="flex" alignItems="center" gap={1}>
+              {t('admin.vaultConfig.depositThreshold')}
+              <Tooltip title={t('admin.vaultConfig.depositThresholdHelp')}>
+                <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
+              </Tooltip>
+            </Box>
+          );
+        },
+      },
+    },
+    // {
+    //   label: t('admin.vaultConfig.withdrawThreshold'),
+    //   name: 'withdraw_threshold',
+    //   options: {
+    //     customBodyRenderLite: (dataIndex: number) => {
+    //       const item = data.list[dataIndex];
+    //       if (!item.vault_config) {
+    //         return (
+    //           <Typography variant="body2" color="text.secondary">
+    //             {t('admin.vaultConfig.notConfig')}
+    //           </Typography>
+    //         );
+    //       }
+    //       return (
+    //         <Typography variant="body1">
+    //           {item.vault_config?.withdraw_threshold === '0'
+    //             ? t('admin.vaultConfig.noLimit')
+    //             : `${formatBNStr(item.vault_config?.withdraw_threshold || '0', item.decimal)} ${item.symbol}`}
+    //         </Typography>
+    //       );
+    //     },
+    //     customHeadLabelRender: () => {
+    //       return (
+    //         <Box display="flex" alignItems="center" gap={1}>
+    //           {t('admin.vaultConfig.withdrawThreshold')}
+    //           <Tooltip title={t('admin.vaultConfig.withdrawThresholdHelp')}>
+    //             <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
+    //           </Tooltip>
+    //         </Box>
+    //       );
+    //     },
+    //   },
+    // },
+    ...(isOwner
+      ? [
+          {
+            label: t('common.actions'),
+            name: 'actions',
+            options: {
+              customBodyRenderLite: (dataIndex: number) => {
+                const item = data.list?.[dataIndex];
+                if (!item) {
+                  return null;
+                }
+                const enabled = item.vault_config?.enabled;
+                return (
+                  <Button
+                    size="small"
+                    variant="text"
+                    onClick={() => handleEditClick(item)}
+                    sx={{
+                      color: 'text.link',
+                      minWidth: 'fit-content',
+                    }}>
+                    {enabled ? t('common.edit') : t('admin.vaultConfig.enable')}
+                  </Button>
+                );
+              },
+            },
+          },
+        ]
+      : []),
+  ];
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  const renderEmpty = () => {
+    const configFirst = t('admin.vaultConfig.configureFirst');
+    const parsedParts = parseMarkedText(configFirst);
+
+    return (
+      <Empty>
+        <Typography variant="body1">{t('admin.vaultConfig.notConfigured')}</Typography>
+        <Typography variant="body2" mt={1} sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          {parsedParts.map((part: { type: 'text' | 'marked'; content: string }) =>
+            part.type === 'text' ? (
+              part.content
+            ) : (
+              <Link
+                key={part.content}
+                to={`${window.location.origin}/.well-known/service/admin/configuration`}
+                style={{ color: '#3b82f6' }}>
+                {part.content}
+              </Link>
+            )
+          )}
+        </Typography>
+      </Empty>
+    );
+  };
+
+  return (
+    <Root>
+      <Box mb={2}>
+        <Typography variant="body2" color="text.secondary" mt={1}>
+          {t('admin.vaultConfig.description')}
+          <Box
+            component="a"
+            href="https://www.arcblock.io/docs/arcblock-payment-kit/en/vault-config"
+            target="_blank"
+            rel="noopener noreferrer"
+            sx={{ color: 'text.link', textDecoration: 'none', ml: 0.5 }}>
+            {t('admin.vaultConfig.learnMore')}
+          </Box>
+        </Typography>
+
+        {!isOwner && (
+          <Alert severity="warning" sx={{ mt: 2 }}>
+            {t('admin.vaultConfig.ownerOnly')}
+          </Alert>
+        )}
+      </Box>
+      <Table
+        data={Array.isArray(data.list) ? data.list : []}
+        columns={columns}
+        options={{
+          pagination: false,
+          selectableRows: 'none',
+        }}
+        mobileTDFlexDirection="row"
+        toolbar={false}
+        footer={false}
+        emptyNode={renderEmpty()}
+      />
+      {state.edit && state.item && (
+        <EditForm item={state.item} onClose={handleFormClose} onSuccess={handleFormSuccess} isOwner={isOwner} />
+      )}
+      {state.confirm && state.item && (
+        <ConfirmDialog
+          title={t('admin.vaultConfig.depositConfirmTitle')}
+          message={t('admin.vaultConfig.depositConfirmMessage', {
+            currency: state.item.symbol,
+          })}
+          onCancel={() => setState({ confirm: false })}
+          onConfirm={handleDepositConfirm}
+          color="primary"
+        />
+      )}
+    </Root>
+  );
+}
+
+const Root = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;

package/src/pages/integrations/donations/edit-form.tsx

@@ -136,7 +136,6 @@ export default function EditDonationForm({
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
-        minHeight: '100vh',
       }}>
       <Box
         sx={{