@blocklet/payment-react 1.13.179 → 1.13.180

package/es/history/invoice/list.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
-import { fromUnitToToken } from "@ocap/util";
 import { useInfiniteScroll } from "ahooks";
 import { joinURL } from "ufo";
 import api from "../../api.js";
 import Status from "../../components/status.js";
-import { formatToDate, getInvoiceStatusColor, getPrefix } from "../../util.js";
+import { formatBNStr, formatToDate, getInvoiceStatusColor, getPrefix } from "../../util.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -87,7 +86,7 @@ export default function CustomerInvoiceList({
             ) }),
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at) }) }),
             /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
-              fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal),
+              formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
               "\xA0",
               invoice.paymentCurrency.symbol
             ] }) }),

package/es/history/mini-invoice/list.js

@@ -12,12 +12,12 @@ import {
   Stack,
   Typography
 } from "@mui/material";
-import { fromUnitToToken } from "@ocap/util";
 import { useRequest } from "ahooks";
 import { joinURL } from "ufo";
 import api from "../../api.js";
 import Status from "../../components/status.js";
 import {
+  formatBNStr,
   formatSubscriptionProduct,
   formatTime,
   formatToDate,
@@ -102,7 +102,7 @@ export default function MiniInvoiceList() {
               return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, sx: { display: "flex", justifyContent: "space-between" }, children: [
                 /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: formatToDate(item.created_at) }),
                 /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { flex: 1, textAlign: "right" }, children: [
-                  fromUnitToToken(item.total, item.paymentCurrency.decimal),
+                  formatBNStr(item.total, item.paymentCurrency.decimal),
                   "\xA0",
                   item.paymentCurrency.symbol
                 ] }),

package/es/history/payment/list.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
-import { fromUnitToToken } from "@ocap/util";
 import { useInfiniteScroll } from "ahooks";
 import api from "../../api.js";
 import TxLink from "../../components/blockchain/tx.js";
 import Status from "../../components/status.js";
-import { formatToDate, getPaymentIntentStatusColor } from "../../util.js";
+import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from "../../util.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -65,7 +64,7 @@ export default function CustomerPaymentList({ customer_id }) {
           children: [
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) }) }),
             /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
-              fromUnitToToken(item.amount_received, item.paymentCurrency.decimal),
+              formatBNStr(item.amount_received, item.paymentCurrency.decimal),
               "\xA0",
               item.paymentCurrency.symbol
             ] }) }),

package/es/util.d.ts

@@ -9,6 +9,8 @@ export declare function formatDateTime(date: Date | string | number, locale?: st
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number): any;
+export declare function formatNumber(n: number | string, precision?: number): any;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/es/util.js

@@ -1,4 +1,6 @@
 import { BN, fromUnitToToken } from "@ocap/util";
+import trimEnd from "lodash/trimEnd";
+import numbro from "numbro";
 import { defaultCountries } from "react-international-phone";
 import dayjs from "./dayjs.js";
 import { t } from "./locales/index.js";
@@ -60,6 +62,20 @@ export const formatError = (err) => {
   }
   return err.message;
 };
+export function formatBNStr(str = "", decimals = 18, precision = 6) {
+  return formatNumber(fromUnitToToken(str, decimals), precision);
+}
+export function formatNumber(n, precision = 6) {
+  if (!n || n === "0") {
+    return "0";
+  }
+  const num = numbro(n);
+  const options = {
+    thousandSeparated: true,
+    ...(precision || precision === 0) && { mantissa: precision }
+  };
+  return trimEnd(num.format(options), "0.");
+}
 export const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? fromUnitToToken(new BN(unit).mul(new BN(quantity)), currency.decimal).toString() : +unit * quantity;

package/lib/history/invoice/list.js

@@ -7,12 +7,11 @@ module.exports = CustomerInvoiceList;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
-var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
-var _util2 = require("../../util");
+var _util = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const groupByDate = items => {
   const grouped = {};
@@ -108,7 +107,7 @@ function CustomerInvoiceList({
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-            href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`),
+            href: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`),
             target,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               component: "span",
@@ -118,19 +117,19 @@ function CustomerInvoiceList({
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: (0, _util2.formatToDate)(invoice.created_at)
+            children: (0, _util.formatToDate)(invoice.created_at)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 2,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             textAlign: "right",
-            children: [(0, _util.fromUnitToToken)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
+            children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 2,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: invoice.status,
-            color: (0, _util2.getInvoiceStatusColor)(invoice.status)
+            color: (0, _util.getInvoiceStatusColor)(invoice.status)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 4,

package/lib/history/mini-invoice/list.js

@@ -7,12 +7,11 @@ module.exports = MiniInvoiceList;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
-var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
-var _util2 = require("../../util");
+var _util = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fetchInvoiceData = (params = {}) => {
   const search = new URLSearchParams();
@@ -54,13 +53,13 @@ function MiniInvoiceList() {
       sx: {
         marginRight: "10px"
       },
-      children: (0, _util2.formatSubscriptionProduct)(subscription.items)
+      children: (0, _util.formatSubscriptionProduct)(subscription.items)
     })
   }, {
     name: t("common.status"),
     value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
       label: subscription.status,
-      color: (0, _util2.getSubscriptionStatusColor)(subscription.status)
+      color: (0, _util.getSubscriptionStatusColor)(subscription.status)
     })
   }];
   if (subscription.status === "active" || subscription.status === "trialing") {
@@ -72,7 +71,7 @@ function MiniInvoiceList() {
           fontWeight: "bold",
           marginRight: "10px"
         },
-        children: (0, _util2.formatTime)(subscription.current_period_end * 1e3)
+        children: (0, _util.formatTime)(subscription.current_period_end * 1e3)
       })
     });
   }
@@ -159,14 +158,14 @@ function MiniInvoiceList() {
                 sx: {
                   flex: 3
                 },
-                children: (0, _util2.formatToDate)(item.created_at)
+                children: (0, _util.formatToDate)(item.created_at)
               }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                 component: "span",
                 sx: {
                   flex: 1,
                   textAlign: "right"
                 },
-                children: [(0, _util.fromUnitToToken)(item.total, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
+                children: [(0, _util.formatBNStr)(item.total, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
               }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "span",
                 sx: {
@@ -175,7 +174,7 @@ function MiniInvoiceList() {
                 },
                 children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
                   label: item.status,
-                  color: (0, _util2.getInvoiceStatusColor)(item.status),
+                  color: (0, _util.getInvoiceStatusColor)(item.status),
                   sx: {
                     flex: 2
                   }
@@ -211,7 +210,7 @@ function MiniInvoiceList() {
             color: "#fff!important",
             width: subscription.service_actions?.length ? "auto" : "100%"
           },
-          href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/subscription/${subscription.id}`),
+          href: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/subscription/${subscription.id}`),
           children: t("payment.customer.subscriptions.title")
         })]
       })]

package/lib/history/payment/list.js

@@ -7,12 +7,11 @@ module.exports = CustomerPaymentList;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
-var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _api = _interopRequireDefault(require("../../api"));
 var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
 var _status = _interopRequireDefault(require("../../components/status"));
-var _util2 = require("../../util");
+var _util = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const groupByDate = items => {
   const grouped = {};
@@ -97,19 +96,19 @@ function CustomerPaymentList({
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: (0, _util2.formatToDate)(item.created_at)
+            children: (0, _util.formatToDate)(item.created_at)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 2,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             textAlign: "right",
-            children: [(0, _util.fromUnitToToken)(item.amount_received, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
+            children: [(0, _util.formatBNStr)(item.amount_received, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: item.status,
-            color: (0, _util2.getPaymentIntentStatusColor)(item.status)
+            color: (0, _util.getPaymentIntentStatusColor)(item.status)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,

package/lib/util.d.ts

@@ -9,6 +9,8 @@ export declare function formatDateTime(date: Date | string | number, locale?: st
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number): any;
+export declare function formatNumber(n: number | string, precision?: number): any;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/lib/util.js

@@ -7,11 +7,14 @@ exports.PAYMENT_KIT_DID = void 0;
 exports.findCurrency = findCurrency;
 exports.flattenPaymentMethods = void 0;
 exports.formatAmount = formatAmount;
+exports.formatBNStr = formatBNStr;
 exports.formatCheckoutHeadlines = formatCheckoutHeadlines;
 exports.formatDateTime = formatDateTime;
 exports.formatError = void 0;
 exports.formatLineItemPricing = formatLineItemPricing;
-exports.formatPriceAmount = exports.formatPrice = exports.formatPrettyMsLocale = exports.formatLocale = void 0;
+exports.formatLocale = void 0;
+exports.formatNumber = formatNumber;
+exports.formatPriceAmount = exports.formatPrice = exports.formatPrettyMsLocale = void 0;
 exports.formatRecurring = formatRecurring;
 exports.formatSubscriptionProduct = formatSubscriptionProduct;
 exports.formatTime = formatTime;
@@ -36,6 +39,8 @@ exports.mergeExtraParams = void 0;
 exports.sleep = sleep;
 exports.stopEvent = stopEvent;
 var _util = require("@ocap/util");
+var _trimEnd = _interopRequireDefault(require("lodash/trimEnd"));
+var _numbro = _interopRequireDefault(require("numbro"));
 var _reactInternationalPhone = require("react-international-phone");
 var _dayjs = _interopRequireDefault(require("./dayjs"));
 var _locales = require("./locales");
@@ -106,6 +111,22 @@ const formatError = err => {
   return err.message;
 };
 exports.formatError = formatError;
+function formatBNStr(str = "", decimals = 18, precision = 6) {
+  return formatNumber((0, _util.fromUnitToToken)(str, decimals), precision);
+}
+function formatNumber(n, precision = 6) {
+  if (!n || n === "0") {
+    return "0";
+  }
+  const num = (0, _numbro.default)(n);
+  const options = {
+    thousandSeparated: true,
+    ...((precision || precision === 0) && {
+      mantissa: precision
+    })
+  };
+  return (0, _trimEnd.default)(num.format(options), "0.");
+}
 const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? (0, _util.fromUnitToToken)(new _util.BN(unit).mul(new _util.BN(quantity)), currency.decimal).toString() : +unit * quantity;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.179",
+  "version": "1.13.180",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -69,6 +69,7 @@
     "flat": "^5.0.2",
     "google-libphonenumber": "^3.2.34",
     "lodash": "^4.17.21",
+    "numbro": "^2.4.0",
     "p-wait-for": "3",
     "react-error-boundary": "^4.0.12",
     "react-hook-form": "^7.50.1",
@@ -89,7 +90,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.179",
+    "@blocklet/payment-types": "1.13.180",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -118,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "af9641f902cee200c23acf73bb38511b8105fba4"
+  "gitHead": "515023c9584f424628a3e291cdeb9ad5ff8420aa"
 }

package/src/history/invoice/list.tsx

@@ -2,13 +2,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
 import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
-import { formatToDate, getInvoiceStatusColor, getPrefix } from '../../util';
+import { formatBNStr, formatToDate, getInvoiceStatusColor, getPrefix } from '../../util';
 
 const groupByDate = (items: TInvoiceExpanded[]) => {
   const grouped: { [key: string]: TInvoiceExpanded[] } = {};
@@ -111,7 +110,7 @@ export default function CustomerInvoiceList({
               </Box>
               <Box flex={2}>
                 <Typography textAlign="right">
-                  {fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                  {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                   {invoice.paymentCurrency.symbol}
                 </Typography>
               </Box>

package/src/history/mini-invoice/list.tsx

@@ -13,13 +13,13 @@ import {
   Stack,
   Typography,
 } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
 import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
 import {
+  formatBNStr,
   formatSubscriptionProduct,
   formatTime,
   formatToDate,
@@ -138,7 +138,7 @@ export default function MiniInvoiceList() {
                       {formatToDate(item.created_at)}
                     </Typography>
                     <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
-                      {fromUnitToToken(item.total, item.paymentCurrency.decimal)}&nbsp;
+                      {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
                       {item.paymentCurrency.symbol}
                     </Typography>
                     <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>

package/src/history/payment/list.tsx

@@ -2,13 +2,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
 
 import api from '../../api';
 import TxLink from '../../components/blockchain/tx';
 import Status from '../../components/status';
-import { formatToDate, getPaymentIntentStatusColor } from '../../util';
+import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from '../../util';
 
 const groupByDate = (items: TPaymentIntentExpanded[]) => {
   const grouped: { [key: string]: TPaymentIntentExpanded[] } = {};
@@ -85,7 +84,7 @@ export default function CustomerPaymentList({ customer_id }: Props) {
               </Box>
               <Box flex={2}>
                 <Typography textAlign="right">
-                  {fromUnitToToken(item.amount_received, item.paymentCurrency.decimal)}&nbsp;
+                  {formatBNStr(item.amount_received, item.paymentCurrency.decimal)}&nbsp;
                   {item.paymentCurrency.symbol}
                 </Typography>
               </Box>

package/src/util.ts

@@ -11,6 +11,8 @@ import type {
   TSubscriptionItemExpanded,
 } from '@blocklet/payment-types';
 import { BN, fromUnitToToken } from '@ocap/util';
+import trimEnd from 'lodash/trimEnd';
+import numbro from 'numbro';
 import { defaultCountries } from 'react-international-phone';
 
 import dayjs from './dayjs';
@@ -96,6 +98,22 @@ export const formatError = (err: any) => {
   return err.message;
 };
 
+export function formatBNStr(str: string = '', decimals: number = 18, precision: number = 6) {
+  return formatNumber(fromUnitToToken(str, decimals), precision);
+}
+
+export function formatNumber(n: number | string, precision: number = 6) {
+  if (!n || n === '0') {
+    return '0';
+  }
+  const num = numbro(n);
+  const options = {
+    thousandSeparated: true,
+    ...((precision || precision === 0) && { mantissa: precision }),
+  };
+  return trimEnd(num.format(options), '0.');
+}
+
 export const formatPrice = (
   price: TPrice,
   currency: TPaymentCurrency,