payment-kit 1.17.4 → 1.17.5

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 { Switch, api, formatError, usePaymentContext } from '@blocklet/payment-react';
 import type { TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { AddOutlined, Check, Close, DeleteOutlined, EditOutlined } from '@mui/icons-material';
+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,15 @@ 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';
 
-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 +144,97 @@ const groupByType = (methods: TPaymentMethodExpanded[]) => {
 
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
-  const { loading, error, data, runAsync } = useRequest(() => getMethods({}));
+  const {
+    loading,
+    error,
+    data = { list: [], addresses: {} } as any,
+    runAsync,
+  } = useRequest(() =>
+    getMethods({
+      addresses: true,
+    })
+  );
   const [state, setState] = useSetState({ method: '' });
+  const [didDialog, setDidDialog] = useSetState({ open: false, chainId: '', did: '' });
+  const { refresh } = usePaymentContext();
 
-  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(() => setState({ 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 || '';
+  };
   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}
@@ -231,6 +311,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();