payment-kit 1.17.4 → 1.17.6

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

@@ -85,7 +85,7 @@ function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentM
 export default function CustomerDetail(props: { id: string }) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
-  const { settings } = usePaymentContext();
+  const { settings, livemode } = usePaymentContext();
   const [state, setState] = useSetState({
     adding: {
       price: false,
@@ -282,7 +282,7 @@ export default function CustomerDetail(props: { id: string }) {
             <Stack>
               <InfoRow
                 label={t('common.did')}
-                value={<DidAddress did={data.customer.did} showQrcode />}
+                value={<DidAddress did={data.customer.did} chainId={livemode ? 'main' : 'beta'} showQrcode />}
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />

package/src/pages/admin/overview.tsx

@@ -79,7 +79,7 @@ export const groupData = (data: TPaymentStat[], currencies: { [key: string]: any
 
 export default function Overview() {
   const { t, locale } = useLocaleContext();
-  const { settings } = usePaymentContext();
+  const { settings, livemode } = usePaymentContext();
   const maxDate = dayjs().endOf('day').toDate();
   const [state, setState] = useSetState({
     anchorEl: null,
@@ -200,6 +200,13 @@ export default function Overview() {
     });
   }
 
+  const getChainId = (type: string) => {
+    if (type === 'arcblock') {
+      return livemode ? 'main' : 'beta';
+    }
+    return '';
+  };
+
   return (
     <Grid container gap={{ xs: 2, sm: 5, md: 8 }} sx={{ mb: 4 }}>
       <Grid item xs={12} sm={12} md={8}>
@@ -244,7 +251,13 @@ export default function Overview() {
               </Stack>
               <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
                 {Object.keys(summary.data.addresses).map((chain) => (
-                  <DID key={chain} did={summary.data?.addresses?.[chain] as string} copyable showQrcode />
+                  <DID
+                    key={chain}
+                    did={summary.data?.addresses?.[chain] as string}
+                    chainId={getChainId(chain)}
+                    copyable
+                    showQrcode
+                  />
                 ))}
               </Stack>
             </Box>

package/src/pages/admin/payments/intents/detail.tsx

@@ -330,7 +330,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
-              {!!data.payment_details?.ethereum && (
+              {(!!data.payment_details?.ethereum || !!data.payment_details?.base) && (
                 <InfoRow
                   label={t('common.txGas')}
                   value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}

package/src/pages/admin/payments/payouts/detail.tsx

@@ -299,7 +299,7 @@ export default function PayoutDetail(props: { id: string }) {
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
-              {!!data.payment_details?.ethereum && (
+              {(!!data.payment_details?.ethereum || !!data.payment_details?.base) && (
                 <InfoRow
                   label={t('common.txGas')}
                   value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}

package/src/pages/admin/payments/refunds/detail.tsx

@@ -317,7 +317,7 @@ export default function RefundDetail(props: { id: string }) {
                     direction={InfoDirection}
                     alignItems={InfoAlignItems}
                   />
-                  {!!data.payment_details?.ethereum && (
+                  {(!!data.payment_details?.ethereum || !!data.payment_details?.base) && (
                     <InfoRow
                       label={t('common.txGas')}
                       value={<TxGas details={data.payment_details as any} method={data.paymentMethod} />}

package/src/pages/admin/products/links/detail.tsx

@@ -82,6 +82,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
       setState((prev) => ({ loading: { ...prev.loading, price: false } }));
     }

package/src/pages/admin/products/prices/actions.tsx

@@ -47,8 +47,9 @@ export default function PriceActions({ data, onChange, variant, setAsDefault }:
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
-      setState({ loading: false, action: '' });
+      setState({ loading: false });
     }
   };
   const onArchivePrice = async () => {

package/src/pages/admin/products/prices/detail.tsx

@@ -65,6 +65,7 @@ export default function PriceDetail(props: { id: string }) {
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
       setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
     }

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

@@ -99,6 +99,7 @@ export default function ProductDetail(props: { id: string }) {
     } catch (err) {
       console.error(err);
       Toast.error(formatError(err));
+      throw err;
     } finally {
       setState((prev) => ({ loading: { ...prev.loading, price: false } }));
     }

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

@@ -39,6 +39,13 @@ export default function PaymentMethodCreate() {
           confirmation: 1,
           logo: '',
         },
+        base: {
+          api_host: '',
+          explorer_host: '',
+          native_symbol: 'ETH',
+          confirmation: 1,
+          logo: '',
+        },
         bitcoin: {
           chain_id: 0,
           api_host: '',

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

@@ -1,7 +1,15 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Switch, api, formatError } from '@blocklet/payment-react';
-import type { TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { AddOutlined, Check, Close, DeleteOutlined, EditOutlined } from '@mui/icons-material';
+import { ConfirmDialog, Switch, api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import {
+  AddOutlined,
+  Check,
+  Close,
+  DeleteOutlined,
+  EditOutlined,
+  InfoOutlined,
+  QrCodeOutlined,
+} from '@mui/icons-material';
 import {
   Alert,
   Avatar,
@@ -15,6 +23,7 @@ import {
   ListItemText,
   Stack,
   TextField,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
@@ -22,12 +31,16 @@ import useBus from 'use-bus';
 
 import { useState } from 'react';
 import Toast from '@arcblock/ux/lib/Toast';
+import { DIDDialog } from '@arcblock/ux/lib/DID';
 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';
 
-const getMethods = (params: Record<string, any> = {}): Promise<TPaymentMethodExpanded[]> => {
+const getMethods = (
+  params: Record<string, any> = {}
+): Promise<{ list: TPaymentMethodExpanded[]; addresses: { arcblock: string; ethereum: string } }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     search.set(key, String(params[key]));
@@ -132,29 +145,124 @@ const groupByType = (methods: TPaymentMethodExpanded[]) => {
 
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
-  const { loading, error, data, runAsync } = useRequest(() => getMethods({}));
-  const [state, setState] = useSetState({ method: '' });
+  const {
+    loading,
+    error,
+    data = { list: [], addresses: {} } as any,
+    runAsync,
+  } = useRequest(() =>
+    getMethods({
+      addresses: true,
+    })
+  );
+  const [didDialog, setDidDialog] = useSetState({ open: false, chainId: '', did: '' });
+  const { refresh } = usePaymentContext();
+  const [currencyDialog, setCurrencyDialog] = useSetState({ action: '', value: null, method: '' });
 
-  useBus('paymentMethod.created', runAsync, []);
-  useBus('paymentCurrency.added', () => runAsync().then(() => setState({ method: '' })), []);
+  const { list: methods, addresses } = data;
+  useBus(
+    'paymentMethod.created',
+    () => {
+      runAsync();
+      refresh(true);
+    },
+    []
+  );
+  useBus(
+    'paymentCurrency.added',
+    () => {
+      runAsync().then(() => {
+        setCurrencyDialog({ action: '', method: '' });
+      });
+      refresh(true);
+    },
+    []
+  );
+  useBus(
+    'paymentCurrency.updated',
+    () => {
+      runAsync().then(() => {
+        setCurrencyDialog({ action: '', method: '' });
+      });
+      refresh(true);
+    },
+    []
+  );
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  if (loading || !data) {
+  if (loading || !data || methods?.length === 0) {
     return <CircularProgress />;
   }
 
-  const groups = groupByType(data);
+  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}`);
+      runAsync();
+      refresh(true);
+      Toast.success(t('admin.paymentCurrency.deleted'));
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      // @ts-ignore
+      setCurrencyDialog({ action: '', method: '' });
+    }
+  };
 
   return (
     <>
       {Object.keys(groups).map((x) => (
         <Box key={x} mt={3}>
-          <Typography variant="h6" sx={{ mb: 1, textTransform: 'uppercase' }}>
-            {x}
-          </Typography>
+          <Stack direction="row" alignItems="center" mb={1}>
+            <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
+              {x}
+            </Typography>
+            {['ethereum', 'base'].includes(x) && (
+              <Stack
+                direction="row"
+                alignItems="center"
+                spacing={0.5}
+                sx={{
+                  ml: 1,
+                  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}
@@ -189,14 +297,38 @@ export default function PaymentMethods() {
                     value={
                       <List>
                         {method.payment_currencies.map((currency) => {
+                          if (!currency) {
+                            return null;
+                          }
                           return (
                             <ListItem
                               key={currency.id}
                               disablePadding
                               secondaryAction={
-                                <IconButton edge="end" disabled>
-                                  <DeleteOutlined />
-                                </IconButton>
+                                currency.locked || method.default_currency_id === currency.id ? null : (
+                                  <>
+                                    <IconButton
+                                      edge="end"
+                                      onClick={() => {
+                                        setCurrencyDialog({
+                                          action: 'edit',
+                                          // @ts-ignore
+                                          value: currency,
+                                          method: method.id,
+                                        });
+                                      }}>
+                                      <EditOutlined />
+                                    </IconButton>
+                                    <IconButton
+                                      edge="end"
+                                      onClick={() => {
+                                        // @ts-ignore
+                                        setCurrencyDialog({ action: 'delete', value: currency, method: method.id });
+                                      }}>
+                                      <DeleteOutlined />
+                                    </IconButton>
+                                  </>
+                                )
                               }>
                               <ListItemAvatar>
                                 <Avatar src={currency.logo} alt={currency.name} />
@@ -210,17 +342,37 @@ export default function PaymentMethods() {
                             key="add-currency"
                             disablePadding
                             sx={{ cursor: 'pointer' }}
-                            onClick={() => setState({ method: method.id })}>
+                            onClick={() => {
+                              setCurrencyDialog({ action: 'create', method: method.id });
+                            }}>
                             <ListItemAvatar>
                               <Avatar>
                                 <AddOutlined fontSize="small" />
                               </Avatar>
                             </ListItemAvatar>
-                            <ListItemText primary="Add Currency" />
+                            <ListItemText primary={t('admin.paymentCurrency.add')} />
                           </ListItem>
                         )}
-                        {state.method === method.id && (
-                          <PaymentCurrencyAdd method={method} onClose={() => setState({ method: '' })} />
+                        {currencyDialog.method === method.id && currencyDialog.action === 'create' && (
+                          <PaymentCurrencyAdd
+                            method={method}
+                            onClose={() => setCurrencyDialog({ action: '', method: '' })}
+                          />
+                        )}
+                        {currencyDialog.method === method.id && currencyDialog.action === 'edit' && (
+                          <PaymentCurrencyEdit
+                            method={method}
+                            onClose={() => setCurrencyDialog({ action: '', method: '' })}
+                            value={currencyDialog.value!}
+                          />
+                        )}
+                        {currencyDialog.method === method.id && currencyDialog.action === 'delete' && (
+                          <ConfirmDialog
+                            onConfirm={() => handleDeleteCurrency(currencyDialog.value!)}
+                            onCancel={() => setCurrencyDialog({ action: '', method: '' })}
+                            title={t('admin.paymentCurrency.delete')}
+                            message={t('admin.paymentCurrency.deleteConfirm')}
+                          />
                         )}
                       </List>
                     }
@@ -231,6 +383,14 @@ export default function PaymentMethods() {
           ))}
         </Box>
       ))}
+      {didDialog.open && didDialog.did && (
+        <DIDDialog
+          open={didDialog.open}
+          onClose={() => setDidDialog({ open: false, chainId: '', did: '' })}
+          did={didDialog.did}
+          chainId={didDialog.chainId}
+        />
+      )}
     </>
   );
 }

package/src/pages/customer/index.tsx

@@ -360,7 +360,7 @@ export default function CustomerHome() {
             {data.name}
           </Typography>
           <Typography variant="body2" color="text.secondary">
-            <DID did={data.did} copyable showQrcode />
+            <DID did={data.did} copyable showQrcode chainId={livemode ? 'main' : 'beta'} />
           </Typography>
         </Box>
       </Box>

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

@@ -268,7 +268,7 @@ export default function CustomerInvoiceDetail() {
             direction={InfoDirection}
             alignItems={InfoAlignItems}
           />
-          {!!data.paymentIntent?.payment_details?.ethereum && (
+          {(!!data.paymentIntent?.payment_details?.ethereum || !!data.paymentIntent?.payment_details?.base) && (
             <InfoRow
               label={t('common.txGas')}
               value={<TxGas details={data.paymentIntent.payment_details as any} method={data.paymentMethod} />}

package/src/pages/customer/recharge.tsx

@@ -217,7 +217,7 @@ export default function RechargePage() {
   }
   const currentBalance = formatBNStr(payerValue?.token || '0', paymentCurrency?.decimal, 6, false);
 
-  const supportRecharge = ['arcblock', 'ethereum'].includes(paymentMethod?.type || '');
+  const supportRecharge = ['arcblock', 'ethereum', 'base'].includes(paymentMethod?.type || '');
 
   const formatEstimatedDuration = (cycles: number) => {
     const { interval, interval_count: intervalCount } = subscription.pending_invoice_item_interval;

package/src/pages/customer/refund/list.tsx

@@ -142,14 +142,16 @@ const RefundTable = memo(({ invoice_id }: Props) => {
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
-          return item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash ? (
+          const paymentDetails = item.payment_details as Record<string, { tx_hash?: string }>;
+          const txHash = ['arcblock', 'ethereum', 'base'].map((key) => !!paymentDetails?.[key]?.tx_hash).find(Boolean);
+          return txHash ? (
             <Box
               sx={{
                 '.MuiTypography-root': {
                   color: 'text.link',
                 },
               }}>
-              <TxLink details={item.payment_details} method={item.paymentMethod} mode="customer" />
+              <TxLink details={paymentDetails} method={item.paymentMethod} mode="customer" />
             </Box>
           ) : (
             t('common.none')
@@ -271,7 +273,9 @@ const RefundList = memo(({ invoice_id }: Props) => {
                   </Typography>
                 </Box>
                 <Box flex={3} sx={{ minWidth: '220px' }}>
-                  {(item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash) && (
+                  {(item.payment_details?.arcblock?.tx_hash ||
+                    item.payment_details?.ethereum?.tx_hash ||
+                    item.payment_details?.base?.tx_hash) && (
                     <TxLink details={item.payment_details} method={item.paymentMethod} mode="customer" />
                   )}
                 </Box>

package/src/pages/customer/subscription/change-payment.tsx

@@ -153,7 +153,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
         submitting: false,
       });
 
-      if (['arcblock', 'ethereum'].includes(method.type)) {
+      if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
         setState({ paying: true });
         if (result.data.delegation?.sufficient) {
           await handleConnected();