payment-kit 1.18.56 → 1.19.1

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

@@ -30,6 +30,7 @@ export default function BitcoinMethodForm({ checkDisabled }: { checkDisabled: (k
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
         disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
       />
       <FormInput
         key="description"
@@ -39,6 +40,7 @@ export default function BitcoinMethodForm({ checkDisabled }: { checkDisabled: (k
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
         disabled={checkDisabled('description')}
+        inputProps={{ maxLength: 255 }}
       />
       <FormInput
         key="chain_id"
@@ -68,7 +70,12 @@ export default function BitcoinMethodForm({ checkDisabled }: { checkDisabled: (k
         disabled={checkDisabled('settings.bitcoin.explorer_host')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>

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

@@ -31,6 +31,7 @@ export default function EthereumMethodForm({ checkDisabled }: { checkDisabled: (
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
         disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
       />
       <FormInput
         key="description"
@@ -40,6 +41,7 @@ export default function EthereumMethodForm({ checkDisabled }: { checkDisabled: (
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
         disabled={checkDisabled('description')}
+        inputProps={{ maxLength: 255 }}
       />
       <EvmRpcInput
         name="settings.ethereum.api_host"
@@ -75,7 +77,12 @@ export default function EthereumMethodForm({ checkDisabled }: { checkDisabled: (
         disabled={checkDisabled('settings.ethereum.confirmation')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>

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

@@ -13,11 +13,7 @@ interface Props {
   disabled?: boolean;
 }
 
-EvmRpcInput.defaultProps = {
-  disabled: false,
-};
-
-export default function EvmRpcInput({ name, label, placeholder, disabled }: Props) {
+export default function EvmRpcInput({ name, label, placeholder, disabled = false }: Props) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   const apiHost = useWatch({
@@ -42,14 +38,22 @@ export default function EvmRpcInput({ name, label, placeholder, disabled }: Prop
               {status.loading ? (
                 <>
                   <CircularProgress size={14} />
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: 'text.secondary',
+                    }}>
                     {t('admin.paymentMethod.evm.checking')}
                   </Typography>
                 </>
               ) : status.connected ? (
                 <>
                   <CheckCircleOutline sx={{ fontSize: 14 }} color="success" />
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: 'text.secondary',
+                    }}>
                     {t('admin.paymentMethod.evm.connected')} | {t('admin.paymentMethod.evm.blockHeight')}:{' '}
                     {status.blockNumber?.toLocaleString()}
                   </Typography>

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

@@ -9,14 +9,9 @@ import EthereumMethodForm from './ethereum';
 import StripeMethodForm from './stripe';
 import BaseMethodForm from './base';
 
-PaymentMethodForm.defaultProps = {
-  action: 'create',
-  editableKeys: [],
-};
-
 export default function PaymentMethodForm({
-  action,
-  editableKeys,
+  action = 'create',
+  editableKeys = [],
 }: {
   action?: 'create' | 'edit';
   editableKeys?: string[];

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

@@ -14,6 +14,7 @@ export default function StripeMethodForm({ checkDisabled }: { checkDisabled: (ke
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
         disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
       />
       <FormInput
         name="description"
@@ -21,6 +22,7 @@ export default function StripeMethodForm({ checkDisabled }: { checkDisabled: (ke
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        inputProps={{ maxLength: 255 }}
       />
       <FormInput
         name="settings.stripe.dashboard"

package/src/components/payouts/actions.tsx

@@ -11,11 +11,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-PayoutActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function PayoutActions({ data, variant }: Props) {
+export default function PayoutActions({ data, variant = 'compact' }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const actions = [

package/src/components/payouts/list.tsx

@@ -10,7 +10,7 @@ import {
   useDefaultPageSize,
 } from '@blocklet/payment-react';
 import type { TPayoutExpanded } from '@blocklet/payment-types';
-import { CircularProgress, Typography } from '@mui/material';
+import { Avatar, CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -70,17 +70,15 @@ const getListKey = (props: ListProps) => {
   return 'payouts';
 };
 
-PayoutList.defaultProps = {
-  features: {
+export default function PayoutList({
+  customer_id = '',
+  payment_intent_id = '',
+  status = '',
+  features = {
     customer: true,
     filter: true,
   },
-  status: '',
-  customer_id: '',
-  payment_intent_id: '',
-};
-
-export default function PayoutList({ customer_id, payment_intent_id, status, features }: ListProps) {
+}: ListProps) {
   const { t } = useLocaleContext();
 
   const listKey = getListKey({ customer_id, payment_intent_id });
@@ -120,7 +118,11 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
           const item = data.list[index] as TPayoutExpanded;
           return (
             <Link to={`/admin/payments/${item.id}`}>
-              <Typography component="strong" fontWeight={600}>
+              <Typography
+                component="strong"
+                sx={{
+                  fontWeight: 600,
+                }}>
                 {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
                 &nbsp;
                 {item?.paymentCurrency.symbol}
@@ -130,6 +132,24 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return (
+            <Link to={`/admin/payments/${item.id}`}>
+              <Typography sx={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}>
+                <Avatar src={item.paymentMethod.logo} sx={{ width: 18, height: 18, mr: 1 }} />
+                {item.paymentMethod.name}
+              </Typography>
+            </Link>
+          );
+        },
+      },
+    },
     {
       label: t('common.status'),
       name: 'status',

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

@@ -57,14 +57,12 @@ const getListKey = (props: ListProps) => {
   return 'payouts-mine';
 };
 
-CustomerRevenueList.defaultProps = {
-  status: '',
-  currency_id: '',
-  customer_id: '',
-  setHasRevenues: () => {},
-};
-
-export default function CustomerRevenueList({ currency_id, status, customer_id, setHasRevenues }: ListProps) {
+export default function CustomerRevenueList({
+  currency_id = '',
+  status = '',
+  customer_id = '',
+  setHasRevenues = () => {},
+}: ListProps) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile('sm');
 
@@ -107,7 +105,11 @@ export default function CustomerRevenueList({ currency_id, status, customer_id,
           const item = data.list[index] as TPayoutExpanded;
           return (
             <Link to={`/customer/payout/${item.id}`}>
-              <Typography component="strong" fontWeight={600}>
+              <Typography
+                component="strong"
+                sx={{
+                  fontWeight: 600,
+                }}>
                 {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
                 &nbsp;
                 {item?.paymentCurrency.symbol}

package/src/components/price/currency-select.tsx

@@ -2,7 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { usePaymentContext } from '@blocklet/payment-react';
 import { AddOutlined, ArrowDropDown } from '@mui/icons-material';
 import { ListSubheader, MenuItem, Select, Stack, SxProps, Typography } from '@mui/material';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
 import { flatten } from 'lodash';
@@ -17,12 +17,7 @@ type Props = {
   width?: string;
   disabled?: boolean;
   selectSX?: SxProps;
-};
-
-CurrencySelect.defaultProps = {
-  width: '100%',
-  disabled: false,
-  selectSX: {},
+  currencyFilter?: (currency: any) => boolean;
 };
 
 export default function CurrencySelect({
@@ -30,14 +25,30 @@ export default function CurrencySelect({
   hasSelected,
   onSelect,
   value,
-  width,
-  disabled,
-  selectSX,
+  width = '100%',
+  disabled = false,
+  selectSX = {},
+  currencyFilter = () => true,
 }: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
 
+  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
+
+  useEffect(() => {
+    if (value && initialMode === 'selected' && currencies.length > 0) {
+      const currency = currencies.find((c) => c.id === value);
+      if (currency && !hasSelected(currency)) {
+        const timer = setTimeout(() => {
+          onSelect(value);
+        }, 0);
+        return () => clearTimeout(timer);
+      }
+    }
+    return undefined;
+  }, [value, initialMode]);
+
   const handleSelect = (e: any) => {
     if (disabled) {
       return;
@@ -46,8 +57,6 @@ export default function CurrencySelect({
     onSelect(e.target.value);
   };
 
-  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
-
   const selectedCurrency = currencies.find((x) => x.id === value);
 
   const selectedPaymentMethod = settings.paymentMethods.find((x) => x.payment_currencies.some((c) => c.id === value));
@@ -59,13 +68,18 @@ export default function CurrencySelect({
   if (mode === 'selected') {
     return (
       <Typography
-        fontSize="12px"
         onClick={() => {
           if (canSelect) {
             setMode('selecting');
           }
         }}
-        sx={{ cursor: canSelect ? 'pointer' : 'default', display: 'inline-flex' }}>
+        sx={{
+          cursor: canSelect ? 'pointer' : 'default',
+          display: 'inline-flex',
+          minWidth: '120px',
+          justifyContent: 'flex-end',
+          textAlign: 'right',
+        }}>
         {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
         {canSelect && <ArrowDropDown sx={{ color: 'text.secondary', fontSize: 21 }} />}
       </Typography>
@@ -91,21 +105,35 @@ export default function CurrencySelect({
         sx={{ width, ...selectSX }}
         disabled={disabled}
         onClose={() => setMode(initialMode)}>
-        {extraCurrencies.map((method) => [
-          <ListSubheader
-            key={method.id}
-            sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
-            {method.name}
-          </ListSubheader>,
-          ...method.payment_currencies.map((currency) => (
-            <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
-              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }} gap={2}>
-                <Currency logo={currency.logo} name={currency.name} />
-                <Typography fontWeight="bold">{currency.symbol}</Typography>
-              </Stack>
-            </MenuItem>
-          )),
-        ])}
+        {extraCurrencies
+          .map((method) => {
+            const filteredCurrencies = method.payment_currencies.filter(currencyFilter);
+            if (filteredCurrencies.length === 0) {
+              return null;
+            }
+
+            return [
+              <ListSubheader
+                key={method.id}
+                sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
+                {method.name}
+              </ListSubheader>,
+              ...filteredCurrencies.map((currency) => (
+                <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
+                  <Stack direction="row" sx={{ width: '100%', justifyContent: 'space-between', gap: 2 }}>
+                    <Currency logo={currency.logo} name={currency.name} />
+                    <Typography
+                      sx={{
+                        fontWeight: 'bold',
+                      }}>
+                      {currency.symbol}
+                    </Typography>
+                  </Stack>
+                </MenuItem>
+              )),
+            ];
+          })
+          .filter(Boolean)}
       </Select>
     );
   }
@@ -113,10 +141,13 @@ export default function CurrencySelect({
   return (
     <span>
       <Stack
-        sx={{ cursor: 'pointer', display: 'inline-flex' }}
         direction="row"
-        alignItems="center"
-        onClick={() => setMode('selecting')}>
+        onClick={() => setMode('selecting')}
+        sx={{
+          alignItems: 'center',
+          cursor: 'pointer',
+          display: 'inline-flex',
+        }}>
         <AddOutlined color="primary" />
         <Typography color="primary">{t('admin.price.currency.add')}</Typography>
       </Stack>