payment-kit 1.24.3 → 1.25.0

package/src/components/invoice/list.tsx

@@ -3,16 +3,21 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import {
   Status,
   api,
-  formatBNStr,
+  formatAmount,
+  formatExchangeRate,
+  formatUsdAmount,
   formatTime,
   getInvoiceStatusColor,
+  getUsdAmountFromTokenUnits,
   Table,
   useDefaultPageSize,
   getInvoiceDescriptionAndReason,
   getTxLink,
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
-import { Avatar, CircularProgress, Typography } from '@mui/material';
+import { Avatar, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import { BN } from '@ocap/util';
 import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { useCacheState } from '../../hooks/cache-state';
@@ -20,10 +25,22 @@ import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
 import InvoiceActions from './action';
 
+const getInvoiceQuoteInfo = (invoice: TInvoiceExpanded) => {
+  const lines = (invoice as any).lines || [];
+  for (const line of lines) {
+    const quote = (line.metadata as any)?.quote;
+    if (quote?.exchange_rate) {
+      return quote;
+    }
+  }
+  return null;
+};
+
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TInvoiceExpanded[]; count: number }> => {
   const search = new URLSearchParams();
-  Object.keys(params).forEach((key) => {
-    let v = params[key];
+  const mergedParams: Record<string, any> = { include_quote: true, ...params };
+  Object.keys(mergedParams).forEach((key) => {
+    let v = mergedParams[key];
     if (v === undefined || v === null || v === '') {
       return;
     }
@@ -195,17 +212,116 @@ export default function InvoiceList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
+          const quoteInfo = getInvoiceQuoteInfo(item);
+          const providers = quoteInfo?.providers || [];
+          const providerNames = providers.map((provider: any) => provider.provider_name).filter(Boolean);
+          // Unified provider display format: "provider_name (n sources)" for multiple, specific name for single
+          let providerDisplay = '—';
+          if (providers.length > 1) {
+            providerDisplay = `${providerNames[0] || providers[0]?.provider_id || 'data'} (${providers.length} sources)`;
+          } else if (providers.length === 1) {
+            providerDisplay = providerNames[0] || providers[0]?.provider_id || '—';
+          } else {
+            providerDisplay = quoteInfo?.rate_provider_name || quoteInfo?.rate_provider_id || '—';
+          }
+          const consensusMethod = quoteInfo?.consensus_method || (providers.length > 1 ? 'median' : 'single');
+          const rateTimestamp = quoteInfo?.rate_timestamp_ms ? formatTime(quoteInfo.rate_timestamp_ms) : '—';
+          const rateStatus = quoteInfo?.degraded ? t('customer.quote.degraded') : null;
+          const baseAmountLine = quoteInfo?.base_amount
+            ? `${quoteInfo.base_amount} ${quoteInfo.base_currency || 'USD'}`
+            : null;
+          const formattedRate = formatExchangeRate(quoteInfo?.exchange_rate || null);
+          const rateLine = formattedRate
+            ? (() => {
+                const currencyMap = {
+                  USD: '$',
+                  CNY: '¥',
+                };
+                const currencySymbol = currencyMap[quoteInfo?.base_currency as keyof typeof currencyMap];
+                return `1 ${item.paymentCurrency.symbol} ≈ ${
+                  currencySymbol
+                    ? `${currencySymbol}${formattedRate}`
+                    : `${formattedRate} ${quoteInfo?.base_currency || 'USD'}`
+                }`;
+              })()
+            : null;
+
+          let usdAmount: string | null = null;
+          if (quoteInfo?.base_amount) {
+            usdAmount = formatUsdAmount(quoteInfo.base_amount, locale);
+          } else if (quoteInfo?.exchange_rate && item.total) {
+            const calculatedUsd = getUsdAmountFromTokenUnits(
+              new BN(item.total),
+              item.paymentCurrency.decimal,
+              quoteInfo.exchange_rate
+            );
+            if (calculatedUsd) {
+              usdAmount = formatUsdAmount(calculatedUsd, locale);
+            }
+          }
+
+          const tooltipContent = quoteInfo ? (
+            <Stack spacing={0.5}>
+              <Typography variant="caption">
+                {t('customer.quote.provider')}: {providerDisplay || '—'}
+              </Typography>
+              {baseAmountLine && (
+                <Typography variant="caption">
+                  {t('customer.quote.baseAmount')}: {baseAmountLine}
+                </Typography>
+              )}
+              {rateLine && (
+                <Typography variant="caption">
+                  {t('customer.quote.exchangeRate')}: {rateLine}
+                </Typography>
+              )}
+              <Typography variant="caption">
+                {t('customer.quote.rateTimestamp')}: {rateTimestamp}
+              </Typography>
+              <Typography variant="caption">
+                {t('customer.quote.consensusMethod')}: {consensusMethod}
+              </Typography>
+              {rateStatus && (
+                <Typography variant="caption">
+                  {t('common.status')}: {rateStatus}
+                  {quoteInfo?.degraded_reason ? ` (${quoteInfo.degraded_reason})` : ''}
+                </Typography>
+              )}
+              {quoteInfo.slippage_percent !== null && quoteInfo.slippage_percent !== undefined && (
+                <Typography variant="caption">
+                  {t('customer.quote.slippage')}: {quoteInfo.slippage_percent}%
+                </Typography>
+              )}
+            </Stack>
+          ) : null;
+
           return (
             <InvoiceLink invoice={item}>
-              <Typography
-                component="strong"
-                sx={{
-                  fontWeight: 600,
-                  textDecoration: item.status === 'void' ? 'line-through' : 'none',
-                }}>
-                {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
-                {item?.paymentCurrency.symbol}
-              </Typography>
+              <Stack spacing={0.25} alignItems="flex-end">
+                <Typography
+                  component="strong"
+                  sx={{
+                    fontWeight: 600,
+                    textDecoration: item.status === 'void' ? 'line-through' : 'none',
+                  }}>
+                  {formatAmount(item?.total, item?.paymentCurrency.decimal)}&nbsp;
+                  {item?.paymentCurrency.symbol}
+                </Typography>
+                {usdAmount && (
+                  <Tooltip title={tooltipContent} placement="top" arrow>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        fontSize: '0.75rem',
+                        fontWeight: 400,
+                        lineHeight: 1.2,
+                      }}>
+                      ≈ ${usdAmount}
+                    </Typography>
+                  </Tooltip>
+                )}
+              </Stack>
             </InvoiceLink>
           );
         },
@@ -232,13 +348,27 @@ export default function InvoiceList({
     {
       label: t('common.status'),
       name: 'status',
-      width: 80,
+      width: 120,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
+          const isSlippageExceeded = item?.status === 'uncollectible' && item?.metadata?.slippage?.below_threshold;
           return (
             <InvoiceLink invoice={item}>
-              <Status label={item?.status} color={getInvoiceStatusColor(item?.status)} />
+              <Stack direction="row" spacing={0.5} alignItems="center">
+                <Status label={item?.status} color={getInvoiceStatusColor(item?.status)} />
+                {isSlippageExceeded && (
+                  <Tooltip
+                    title={t('payment.customer.invoice.slippageExceededDetail', {
+                      currentRate: item.metadata?.slippage?.rate_at_invoice || '—',
+                      minRate: item.metadata?.slippage?.min_acceptable_rate || '—',
+                    })}
+                    arrow
+                    placement="top">
+                    <WarningAmberIcon sx={{ fontSize: 16, color: 'warning.main', cursor: 'help' }} />
+                  </Tooltip>
+                )}
+              </Stack>
             </InvoiceLink>
           );
         },
@@ -322,7 +452,7 @@ export default function InvoiceList({
 
   if (features?.customer) {
     // @ts-ignore
-    columns.splice(3, 0, {
+    columns.splice(2, 0, {
       label: t('common.customer'),
       name: 'customer_id',
       options: {