payment-kit 1.16.17 → 1.16.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.17",
+  "version": "1.16.18",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,30 +43,30 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.33",
-    "@arcblock/did": "^1.18.161",
+    "@abtnode/cron": "^1.16.36",
+    "@arcblock/did": "^1.18.165",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.88",
-    "@arcblock/did-util": "^1.18.161",
-    "@arcblock/jwt": "^1.18.161",
-    "@arcblock/ux": "^2.10.88",
-    "@arcblock/validator": "^1.18.161",
-    "@blocklet/js-sdk": "^1.16.33",
-    "@blocklet/logger": "^1.16.33",
-    "@blocklet/payment-react": "1.16.17",
-    "@blocklet/sdk": "^1.16.33",
-    "@blocklet/ui-react": "^2.10.88",
-    "@blocklet/uploader": "^0.1.58",
-    "@blocklet/xss": "^0.1.15",
+    "@arcblock/did-connect": "^2.11.15",
+    "@arcblock/did-util": "^1.18.165",
+    "@arcblock/jwt": "^1.18.165",
+    "@arcblock/ux": "^2.11.15",
+    "@arcblock/validator": "^1.18.165",
+    "@blocklet/js-sdk": "^1.16.36",
+    "@blocklet/logger": "^1.16.36",
+    "@blocklet/payment-react": "1.16.18",
+    "@blocklet/sdk": "^1.16.36",
+    "@blocklet/ui-react": "^2.11.15",
+    "@blocklet/uploader": "^0.1.60",
+    "@blocklet/xss": "^0.1.17",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.18.161",
-    "@ocap/client": "^1.18.161",
-    "@ocap/mcrypto": "^1.18.161",
-    "@ocap/util": "^1.18.161",
-    "@ocap/wallet": "^1.18.161",
+    "@ocap/asset": "^1.18.165",
+    "@ocap/client": "^1.18.165",
+    "@ocap/mcrypto": "^1.18.165",
+    "@ocap/util": "^1.18.165",
+    "@ocap/wallet": "^1.18.165",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -118,9 +118,9 @@
     "validator": "^13.12.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.33",
+    "@abtnode/types": "^1.16.36",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.16.17",
+    "@blocklet/payment-types": "1.16.18",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "38b1da1771951e6a30f3cb643fadb108aceed5b6"
+  "gitHead": "ea644d08efdbfba6034a3ec09eac4d7160bcba66"
 }

package/src/components/customer/overdraft-protection.tsx

@@ -0,0 +1,367 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useForm } from 'react-hook-form';
+import {
+  Button,
+  CircularProgress,
+  Stack,
+  TextField,
+  Typography,
+  FormControlLabel,
+  Alert,
+  Box,
+  Card,
+  CardActionArea,
+  Grid,
+  Tooltip,
+  FormControl,
+  RadioGroup,
+  Radio,
+} from '@mui/material';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { EventHandler, useState } from 'react';
+import { api, Switch, useMobile } from '@blocklet/payment-react';
+import { useRequest } from 'ahooks';
+import { BN, fromUnitToToken } from '@ocap/util';
+import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
+import Currency from '../currency';
+
+const fetchCycleAmount = (
+  subscriptionId: string,
+  params: { overdraftProtection: boolean }
+): Promise<{ amount: string; gas: string; currency: TPaymentCurrency }> => {
+  return api.get(`/api/subscriptions/${subscriptionId}/cycle-amount`, { params }).then((res) => res.data);
+};
+
+type OverdraftProtectionDialogProps = {
+  value: {
+    enabled: boolean;
+    remaining: string;
+    unused: string;
+    used: string;
+  };
+  loading: boolean;
+  onSave: (data: { enabled: boolean; additionalCount?: number; returnRemaining?: boolean }) => Promise<void>;
+  onCancel: EventHandler<any>;
+  open: boolean;
+  paymentAddress?: string;
+  currency: {
+    symbol: string;
+    logo: string;
+    decimal: number;
+  };
+  subscription: TSubscriptionExpanded;
+};
+
+OverdraftProtectionDialog.defaultProps = {
+  paymentAddress: '',
+};
+
+export default function OverdraftProtectionDialog({
+  value,
+  loading,
+  onSave,
+  onCancel,
+  open,
+  paymentAddress,
+  currency,
+  subscription,
+}: OverdraftProtectionDialogProps) {
+  const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
+  const [customAmount, setCustomAmount] = useState(false);
+  const [presetAmounts, setPresetAmounts] = useState<{ amount: string; cycles: number }[]>([]);
+
+  const {
+    data: cycleAmount = {
+      amount: '0',
+      gas: '0',
+    },
+  } = useRequest(
+    () =>
+      fetchCycleAmount(subscription.id, {
+        overdraftProtection: true,
+      }),
+    {
+      refreshDeps: [subscription.id],
+      onSuccess: (data) => {
+        const presets = [1, 2, 5, 10];
+        const getCycleAmount = (cycles: number) =>
+          fromUnitToToken(new BN(data.amount).mul(new BN(cycles)).toString(), data?.currency?.decimal);
+        setPresetAmounts(presets.map((cycles) => ({ amount: getCycleAmount(cycles), cycles })));
+      },
+    }
+  );
+
+  const methods = useForm<{
+    enabled: boolean;
+    return_stake: boolean;
+    amount: string;
+  }>({
+    defaultValues: {
+      enabled: !!subscription.overdraft_protection?.enabled,
+      return_stake: false,
+      amount: '0',
+    },
+    mode: 'onChange',
+  });
+
+  const isEnabled = methods.watch('enabled');
+  const amount = methods.watch('amount');
+
+  const estimateAmount = fromUnitToToken(cycleAmount.amount, currency?.decimal);
+  const availableAmount = fromUnitToToken(value.unused, currency?.decimal);
+  const dueAmount = fromUnitToToken(value.used, currency?.decimal);
+  const minStake = fromUnitToToken(new BN(cycleAmount.amount).sub(new BN(value.unused)).toString(), currency?.decimal);
+
+  const handleCustomSelect = () => {
+    setCustomAmount(true);
+    methods.setValue('amount', Number(minStake) < 0 ? estimateAmount : minStake);
+  };
+
+  const onSubmit = () => {
+    methods.handleSubmit(async (formData) => {
+      await onSave(formData);
+      methods.reset();
+    })();
+  };
+
+  const formatEstimatedDuration = (cycles: number) => {
+    const { interval, interval_count: intervalCount } = subscription.pending_invoice_item_interval;
+    const totalIntervals = cycles * intervalCount;
+    const availableUnitKeys = ['hour', 'day', 'week', 'month', 'year'];
+
+    const unitKey = availableUnitKeys.includes(interval)
+      ? `common.${interval}${totalIntervals > 1 ? 's' : ''}`
+      : 'customer.overdraftProtection.intervals';
+
+    return t('customer.overdraftProtection.estimatedDuration', {
+      duration: totalIntervals,
+      unit: t(unitKey).toLowerCase(),
+    });
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onCancel}
+      maxWidth="sm"
+      fullWidth
+      title={t('customer.overdraftProtection.setting')}
+      actions={
+        <Stack direction="row" spacing={2}>
+          <Button variant="outlined" onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button variant="contained" color="primary" disabled={loading} onClick={onSubmit}>
+            {loading && <CircularProgress size={20} sx={{ mr: 1 }} />}
+            {t('common.submit')}
+          </Button>
+        </Stack>
+      }>
+      <Stack gap={2}>
+        <Alert severity="info">
+          {value.used !== '0' && !isEnabled ? (
+            <>{t('customer.overdraftProtection.disableConfirm')}</>
+          ) : (
+            <Box>
+              {t('customer.overdraftProtection.tip')}
+              <Tooltip
+                title={t('customer.overdraftProtection.ruleTip', {
+                  gas: fromUnitToToken(cycleAmount.gas, currency?.decimal),
+                  symbol: currency.symbol,
+                })}
+                placement="top">
+                <Typography variant="body2" sx={{ color: 'text.link', cursor: 'pointer', mt: 1 }}>
+                  {t('customer.overdraftProtection.rule')}
+                </Typography>
+              </Tooltip>
+            </Box>
+          )}
+        </Alert>
+
+        <Stack spacing={2} direction="row" alignItems="center">
+          <Typography variant="subtitle1" color="text.secondary">
+            {t('customer.overdraftProtection.title')}
+          </Typography>
+          <FormControlLabel
+            control={<Switch checked={isEnabled} onChange={(e) => methods.setValue('enabled', e.target.checked)} />}
+            label=""
+          />
+        </Stack>
+
+        {isEnabled ? (
+          <Stack gap={1} sx={{ mt: '-8px' }}>
+            {paymentAddress && (
+              <Stack direction="row" alignItems="center" gap={isMobile ? 1 : 2} flexWrap="wrap">
+                <Typography variant="subtitle2" color="text.secondary">
+                  {t('customer.overdraftProtection.address')}
+                </Typography>
+                <Typography variant="body2" sx={{ wordBreak: 'break-all', fontFamily: 'monospace', fontWeight: '700' }}>
+                  {paymentAddress}
+                </Typography>
+              </Stack>
+            )}
+            <Typography variant="body2" color="text.secondary">
+              {(() => {
+                if (Number(dueAmount) > 0 && !value.enabled) {
+                  return t('customer.overdraftProtection.remainingNotEnough', {
+                    due: dueAmount,
+                    symbol: currency.symbol,
+                    min: Number(minStake) < 0 ? estimateAmount : minStake,
+                    unused: availableAmount,
+                  });
+                }
+                if (value.remaining === '0') {
+                  return t('customer.overdraftProtection.noRemaining', {
+                    estimateAmount,
+                    symbol: currency.symbol,
+                  });
+                }
+                return t('customer.overdraftProtection.remaining', {
+                  amount: availableAmount,
+                  symbol: currency.symbol,
+                  estimateAmount,
+                });
+              })()}
+            </Typography>
+
+            <Grid container spacing={2} ml={-2} sx={{ mt: -1 }}>
+              {presetAmounts.map(({ amount: presetAmount, cycles }) => (
+                <Grid item xs={6} sm={4} key={presetAmount}>
+                  <Card
+                    variant="outlined"
+                    sx={{
+                      height: '100%',
+                      transition: 'all 0.3s',
+                      cursor: 'pointer',
+                      '&:hover': {
+                        transform: 'translateY(-4px)',
+                        boxShadow: 3,
+                      },
+                      ...(amount === presetAmount && !customAmount
+                        ? { borderColor: 'primary.main', borderWidth: 2 }
+                        : {}),
+                    }}>
+                    <CardActionArea
+                      onClick={() => {
+                        methods.setValue('amount', presetAmount);
+                        setCustomAmount(false);
+                      }}
+                      sx={{ height: '100%', p: 1 }}>
+                      <Stack spacing={1} alignItems="center">
+                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                          {presetAmount} {currency.symbol}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {formatEstimatedDuration(cycles)}
+                        </Typography>
+                      </Stack>
+                    </CardActionArea>
+                  </Card>
+                </Grid>
+              ))}
+              <Grid item xs={6} sm={4}>
+                <Card
+                  variant="outlined"
+                  sx={{
+                    height: '100%',
+                    transition: 'all 0.3s',
+                    cursor: 'pointer',
+                    '&:hover': {
+                      transform: 'translateY(-4px)',
+                      boxShadow: 3,
+                    },
+                    ...(customAmount ? { borderColor: 'primary.main', borderWidth: 2 } : {}),
+                  }}>
+                  <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 2 }}>
+                    <Stack spacing={1} alignItems="center">
+                      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                        {t('common.custom')}
+                      </Typography>
+                    </Stack>
+                  </CardActionArea>
+                </Card>
+              </Grid>
+            </Grid>
+
+            {customAmount && (
+              <Stack spacing={2} sx={{ mt: 1 }}>
+                <FormControl fullWidth>
+                  <TextField
+                    {...methods.register('amount', {
+                      required: true,
+                      validate: (val) => {
+                        const required = Number(minStake) < 0 ? Number(estimateAmount) : Number(minStake);
+                        if (Number(val) < required) {
+                          return t('customer.overdraftProtection.min', {
+                            min: required,
+                            symbol: currency.symbol,
+                          });
+                        }
+                        return true;
+                      },
+                    })}
+                    label={t('common.amount')}
+                    type="number"
+                    error={!!methods.formState.errors.amount}
+                    helperText={methods.formState.errors.amount?.message}
+                    fullWidth
+                    variant="outlined"
+                    InputProps={{
+                      endAdornment: (
+                        <Box sx={{ ml: 1, display: 'flex', alignItems: 'center' }}>
+                          <Currency logo={currency.logo} name={currency.symbol} />
+                        </Box>
+                      ),
+                      inputProps: {
+                        min: 0,
+                        step: Number(estimateAmount),
+                      },
+                    }}
+                  />
+                </FormControl>
+              </Stack>
+            )}
+            {amount && Number(amount) > 0 && !methods.formState.errors.amount && (
+              <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
+                {t('customer.overdraftProtection.total', {
+                  total: Number(amount) + Number(availableAmount),
+                  symbol: currency.symbol,
+                })}
+                {formatEstimatedDuration(
+                  Math.floor((Number(amount) + Number(availableAmount)) / Number(estimateAmount))
+                )}
+              </Typography>
+            )}
+          </Stack>
+        ) : (
+          Number(availableAmount) > 0 && (
+            <Stack direction="row" alignItems="flex-start" gap={2}>
+              <Typography
+                variant="subtitle2"
+                color="text.secondary"
+                sx={{ height: 39, display: 'flex', alignItems: 'center', width: 56 }}>
+                {t('customer.overdraftProtection.stake')}
+              </Typography>
+              <RadioGroup
+                aria-labelledby="return-stake-group-label"
+                value={methods.watch('return_stake')}
+                onChange={(e) => methods.setValue('return_stake', e.target.value === 'true')}>
+                <FormControlLabel
+                  value={false}
+                  control={<Radio />}
+                  label={t('customer.overdraftProtection.keepStake')}
+                />
+                <FormControlLabel
+                  value
+                  control={<Radio color="warning" />}
+                  label={t('customer.overdraftProtection.returnStake')}
+                />
+              </RadioGroup>
+            </Stack>
+          )
+        )}
+      </Stack>
+    </Dialog>
+  );
+}

package/src/components/event/list.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatTime, Table, useDefaultPageSize } from '@blocklet/payment-react';
+import { api, formatTime, getPrefix, Table, useDefaultPageSize } from '@blocklet/payment-react';
 import type { TEventExpanded } from '@blocklet/payment-types';
 import { Alert, Box, CircularProgress, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { styled } from '@mui/system';
+import { joinURL } from 'ufo';
 import { useTransitionContext } from '../progress-bar';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TEventExpanded[]; count: number }> => {
@@ -134,7 +134,6 @@ export default function EventList({ type, object_id, features }: ListProps) {
 
   const { t } = useLocaleContext();
   const defaultPageSize = useDefaultPageSize(persisted.rowsPerPage || 50);
-  const navigate = useNavigate();
   const [search, setSearch] = useState<SearchProps>({
     type,
     object_id,
@@ -212,7 +211,7 @@ export default function EventList({ type, object_id, features }: ListProps) {
           onRowClick: (_: any, { dataIndex }: any) => {
             const item = data.list[dataIndex] as TEventExpanded;
             startTransition(() => {
-              navigate(`/admin/developers/${item.id}`);
+              window.open(joinURL(getPrefix(), `/admin/developers/${item.id}`), '_blank');
             });
           },
         }}

package/src/components/subscription/actions/cancel.tsx

@@ -220,5 +220,8 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
 const Root = styled(Box)`
   .form-title {
     width: 60px;
+    height: 39px;
+    display: flex;
+    align-items: center;
   }
 `;