payment-kit 1.13.179 → 1.13.181

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.179
+version: 1.13.181
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.179",
+  "version": "1.13.181",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.110",
     "@arcblock/ux": "^2.9.39",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.179",
+    "@blocklet/payment-react": "1.13.181",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.39",
     "@blocklet/uploader": "^0.0.74",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.179",
+    "@blocklet/payment-types": "1.13.181",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "af9641f902cee200c23acf73bb38511b8105fba4"
+  "gitHead": "41ae4de4f5af08670937d5328ea809623afeab87"
 }

package/src/components/invoice/list.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -121,7 +120,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
           const item = data.list[index];
           return (
             <Typography component="strong" fontWeight={600}>
-              {fromUnitToToken(item?.total, item?.paymentCurrency.decimal)}&nbsp;
+              {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
               {item?.paymentCurrency.symbol}
             </Typography>
           );

package/src/components/invoice/table.tsx

@@ -53,7 +53,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
           <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 120 }} align="right">
             {t('payment.customer.invoice.unitPrice')}
           </TableCell>
-          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 100 }} align="right">
+          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 110 }} align="right">
             {t('common.amount')}
           </TableCell>
           {!simple && (

package/src/components/payment-intent/list.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatTime, getPaymentIntentStatusColor } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -114,7 +113,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
               component="strong"
               sx={{ color: item.amount_received === '0' ? 'warning.main' : 'inherit' }}
               fontWeight={600}>
-              {fromUnitToToken(
+              {formatBNStr(
                 item.amount_received === '0' ? item.amount : item.amount_received,
                 item?.paymentCurrency.decimal
               )}

package/src/components/refund/list.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatTime, getPaymentIntentStatusColor } from '@blocklet/payment-react';
 import type { TRefundExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -114,7 +113,7 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
           const item = data.list[index] as TRefundExpanded;
           return (
             <Typography component="strong" fontWeight={600}>
-              {fromUnitToToken(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
+              {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
               {item?.paymentCurrency.symbol}
             </Typography>
           );

package/src/pages/admin/billing/invoices/detail.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { Status, api, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
 import type { TInvoice, TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
@@ -92,7 +91,7 @@ export default function InvoiceDetail(props: { id: string }) {
               </Typography>
               <Typography sx={{ mx: 1 }}>for</Typography>
               <Typography variant="h5" sx={{ fontWeight: 600 }}>
-                {fromUnitToToken(data.total, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
+                {formatBNStr(data.total, data.paymentCurrency.decimal)} {data.paymentCurrency.symbol}
               </Typography>
               <Status label={data.status} color={getInvoiceStatusColor(data.status)} sx={{ ml: 1 }} />
             </Stack>

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

@@ -2,12 +2,11 @@
 import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
+import { api, formatBNStr, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { isEmpty } from 'lodash';
 import { FlagEmoji } from 'react-international-phone';
@@ -48,7 +47,7 @@ function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentM
   if (customer.balance) {
     tokens.push({
       currency: 'USD',
-      balance: fromUnitToToken(customer.balance, 2),
+      balance: formatBNStr(customer.balance, 2),
     });
   }
 
@@ -61,7 +60,7 @@ function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentM
           // @ts-ignore
           currency: currency.symbol,
           // @ts-ignore
-          balance: fromUnitToToken(customer.token_balance[currencyId], currency.decimal),
+          balance: formatBNStr(customer.token_balance[currencyId], currency.decimal),
         });
       }
     });

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

@@ -6,6 +6,7 @@ import {
   Status,
   TxLink,
   api,
+  formatBNStr,
   formatError,
   formatTime,
   getPaymentIntentStatusColor,
@@ -14,7 +15,6 @@ import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit, InfoOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
@@ -77,8 +77,8 @@ export default function PaymentIntentDetail(props: { id: string }) {
   const onUpdateMetadata = createUpdater('metadata');
 
   const currency = data.paymentCurrency;
-  const received = [fromUnitToToken(data?.amount_received, currency.decimal), currency.symbol].join(' ');
-  const total = [fromUnitToToken(data?.amount, currency.decimal), currency.symbol].join(' ');
+  const received = [formatBNStr(data?.amount_received, currency.decimal), currency.symbol].join(' ');
+  const total = [formatBNStr(data?.amount, currency.decimal), currency.symbol].join(' ');
 
   return (
     <Root direction="column" spacing={4} mb={4}>

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

@@ -1,12 +1,20 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { Amount, Status, TxLink, api, formatError, formatTime, getRefundStatusColor } from '@blocklet/payment-react';
+import {
+  Amount,
+  Status,
+  TxLink,
+  api,
+  formatBNStr,
+  formatError,
+  formatTime,
+  getRefundStatusColor,
+} from '@blocklet/payment-react';
 import type { TRefundExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit, InfoOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
@@ -69,7 +77,7 @@ export default function RefundDetail(props: { id: string }) {
   const onUpdateMetadata = createUpdater('metadata');
 
   const currency = data.paymentCurrency;
-  const amount = [fromUnitToToken(data?.amount, currency.decimal), currency.symbol].join(' ');
+  const amount = [formatBNStr(data?.amount, currency.decimal), currency.symbol].join(' ');
 
   return (
     <Root direction="column" spacing={4} mb={4}>

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

@@ -142,16 +142,14 @@ export default function CustomerInvoiceDetail() {
             label={t('admin.paymentCurrency.name')}
             value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
           />
-          <InfoRow
-            label={t(`common.${data.paymentIntent.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
-            value={
-              data.paymentIntent?.payment_details ? (
+          {data.paymentIntent && data.paymentIntent.payment_details && (
+            <InfoRow
+              label={t(`common.${data.paymentIntent.payment_details?.arcblock?.type || 'transfer'}TxHash`)}
+              value={
                 <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
-              ) : (
-                ''
-              )
-            }
-          />
+              }
+            />
+          )}
           {data.subscription && (
             <InfoRow
               label={t('admin.subscription.name')}

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

@@ -1,9 +1,8 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, TxLink, api, formatToDate, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import { Status, TxLink, api, formatBNStr, formatToDate, getPaymentIntentStatusColor } from '@blocklet/payment-react';
 import type { Paginated, PaymentDetails, TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
 
 const groupByDate = (items: TPaymentIntentExpanded[]) => {
@@ -82,7 +81,7 @@ export default function CustomerRefundList({ invoice_id }: Props) {
                 </Box>
                 <Box flex={2}>
                   <Typography textAlign="right">
-                    {fromUnitToToken(item.amount, item.paymentCurrency.decimal)}&nbsp;
+                    {formatBNStr(item.amount, item.paymentCurrency.decimal)}&nbsp;
                     {item.paymentCurrency.symbol}
                   </Typography>
                 </Box>

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

@@ -1,12 +1,11 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { PricingTable, api, formatError, formatPrice, formatTime } from '@blocklet/payment-react';
+import { PricingTable, api, formatBNStr, formatError, formatPrice, formatTime } from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
 import { Alert, CircularProgress, Divider, Stack, Typography } from '@mui/material';
-import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 
@@ -206,7 +205,7 @@ export default function CustomerSubscriptionChangePlan() {
         </Typography>
         <Typography component="p" style={{ fontWeight: 'bold' }}>
           {prefix}
-          {fromUnitToToken(value, data.subscription.paymentCurrency.decimal)} {data.subscription.paymentCurrency.symbol}
+          {formatBNStr(value, data.subscription.paymentCurrency.decimal)} {data.subscription.paymentCurrency.symbol}
         </Typography>
       </Stack>
     );