payment-kit 1.27.2 → 1.28.0

package/src/components/layout/user-cf.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { PaymentProvider } from '@blocklet/payment-react';
+import { useEffect } from 'react';
+import { Header } from '@blocklet/ui-react';
+import { Box, CircularProgress } from '@mui/material';
+import { useSessionContext } from '../../contexts/session';
+
+function LayoutLoading() {
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <CircularProgress />
+    </Box>
+  );
+}
+
+// window.blocklet is bootstrapped synchronously in public/index.html but the
+// full payload is overlaid from /__blocklet__.js. Treat the layout as "not
+// ready" until the overlay has populated the fields the downstream components
+// (Header, PaymentProvider) rely on, so we never render children against a
+// half-initialized blocklet config.
+function isBlockletReady() {
+  const b = (window as any).blocklet;
+  return !!(b && b.appPid && b.prefix);
+}
+
+/**
+ * CF Workers layout for customer pages.
+ * Uses Dashboard component for consistent header + SessionUser dropdown.
+ * Adds "My Billing" to the user dropdown via sessionManagerProps.menu.
+ */
+export default function UserLayoutCF(props: any) {
+  const { session, connectApi } = useSessionContext();
+
+  useEffect(() => {
+    if (session.initialized && !session.user) {
+      session.login(() => {});
+    }
+  }, [session.initialized]);
+
+  // Show a loading state (not a blank page, not a redirect) while either
+  // window.blocklet or the session is still being resolved. Any child that
+  // fires API calls on mount (useRequest / useEffect) must not run until
+  // both are in place — otherwise the request goes out without the right
+  // auth cookies/headers and may cascade into a redirect.
+  if (!isBlockletReady() || !session.initialized) {
+    return <LayoutLoading />;
+  }
+
+  // Session initialized but not logged in: the effect above will trigger the
+  // DID Connect login modal. Keep showing the loading state instead of a
+  // blank screen so the user doesn't perceive it as "bounced to home".
+  if (!session.user) {
+    return <LayoutLoading />;
+  }
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <Header
+        meta={undefined}
+        addons={undefined}
+        sessionManagerProps={undefined}
+        homeLink={undefined}
+        theme={undefined}
+        hideNavMenu={undefined}
+        maxWidth={false}
+        sx={{ borderBottom: '1px solid', borderColor: 'divider' }}
+      />
+      <Box sx={{ flex: 1, maxWidth: 1200, mx: 'auto', px: 3, py: 3, width: '100%' }}>{props.children}</Box>
+    </PaymentProvider>
+  );
+}

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

@@ -1,7 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { ConfirmDialog, api, formatAmountPrecisionLimit, formatBNStr, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatAmountPrecisionLimit, formatError } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
+import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
 import type { LiteralUnion } from 'type-fest';
@@ -21,6 +22,25 @@ import { useState } from 'react';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 
+/**
+ * Format the refundable amount the server returned (raw BN string) into a human-readable
+ * token string by **flooring** to `precision` decimal places — never rounding up.
+ *
+ * `formatBNStr` rounds (via toLocaleString / toFixed), which can produce a value whose
+ * `fromTokenToUnit` round-trip exceeds the original raw amount by sub-cent dust and gets
+ * rejected by the server with "refund amount exceeds the available amount". Flooring keeps
+ * the round-trip ≤ original. The trailing-zero trim mirrors `formatBNStr` so the input
+ * field looks identical for amounts that don't get truncated.
+ */
+function formatRefundableAmount(raw: string | undefined, decimals: number, precision: number = 6): string {
+  if (!raw) return '0';
+  const tokenAmount = fromUnitToToken(raw, decimals);
+  const [whole = '0', frac = ''] = tokenAmount.split('.');
+  if (precision <= 0) return whole;
+  const truncated = frac.substring(0, precision).replace(/0+$/, '');
+  return truncated ? `${whole}.${truncated}` : whole;
+}
+
 type Props = {
   data: TPaymentIntentExpanded;
   variant?: LiteralUnion<'compact' | 'normal', string>;
@@ -185,7 +205,7 @@ export function PaymentIntentActionsInner({ data, variant = 'compact', onChange
     },
     {
       onSuccess: (res: any) => {
-        const amount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
+        const amount = formatRefundableAmount(res?.amount, data.paymentCurrency.decimal);
         setRefundMaxAmount(amount);
       },
       manual: true,
@@ -218,7 +238,7 @@ export function PaymentIntentActionsInner({ data, variant = 'compact', onChange
       handler: () => {
         runRefundAmountAsync().then((res) => {
           reset();
-          const curAmount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
+          const curAmount = formatRefundableAmount(res?.amount, data.paymentCurrency.decimal);
           if (Number(curAmount) <= 0) {
             Toast.info(t('admin.paymentIntent.refundForm.empty'));
             return;

package/src/components/safe-did-address.tsx

@@ -0,0 +1,75 @@
+import DidAddress from '@arcblock/ux/lib/DID';
+import { Typography } from '@mui/material';
+import { Component, type ReactNode } from 'react';
+
+/**
+ * Matches DIDs that @arcblock/did-motif can parse:
+ *   z-prefixed base58 DID (z1..., z2..., zNK...) — standard ArcBlock format
+ *   did:method:identifier — W3C DID format
+ */
+function isValidDid(did: unknown): did is string {
+  return typeof did === 'string' && /^(z[0-9a-zA-Z]{20,}|did:[a-z]+:[A-Za-z0-9]+)/.test(did);
+}
+
+interface ErrorBoundaryProps {
+  fallback: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Inline error boundary — catches DIDParsingError (or any render error) from DidAddress
+ * and shows a fallback instead of crashing the whole page.
+ */
+class DidErrorBoundary extends Component<ErrorBoundaryProps, { hasError: boolean }> {
+  // eslint-disable-next-line react/state-in-constructor
+  override state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  override componentDidCatch() {
+    // Swallow — DIDParsingError is non-fatal, we just show a fallback
+  }
+
+  override render() {
+    if (this.state.hasError) return this.props.fallback;
+    return this.props.children;
+  }
+}
+
+export interface SafeDidAddressProps {
+  did?: string | null;
+  [key: string]: any;
+}
+
+/**
+ * SafeDidAddress — drop-in replacement for `@arcblock/ux/lib/DID` that:
+ *   1. Shows an em-dash placeholder for empty/null DIDs
+ *   2. Pre-validates the DID format before rendering
+ *   3. Catches any render errors from did-motif via an error boundary
+ *
+ * Use this anywhere the backing data may have invalid/missing DIDs (e.g. migrated
+ * customer records with empty did fields).
+ */
+// eslint-disable-next-line react/require-default-props
+export default function SafeDidAddress({ did, ...rest }: SafeDidAddressProps) {
+  if (!did || !isValidDid(did)) {
+    return (
+      <Typography variant="body2" color="text.secondary" component="span">
+        {did || '—'}
+      </Typography>
+    );
+  }
+
+  return (
+    <DidErrorBoundary
+      fallback={
+        <Typography variant="body2" color="text.secondary" component="span">
+          {did}
+        </Typography>
+      }>
+      <DidAddress did={did} {...rest} />
+    </DidErrorBoundary>
+  );
+}

package/src/libs/patch-user-card.ts

@@ -0,0 +1,25 @@
+// UserCard (@arcblock/ux) calls sdk.user.getUserPublicInfo per mount without
+// in-flight dedup. Pages that render many rows with the same DID fire N
+// concurrent requests before the first response warms sessionStorage.
+// Patch the bundled SDK singleton so concurrent calls with the same args
+// share one Promise.
+// Deep import into ux's nested js-sdk copy (intentional; that bundle exposes
+// the SDK singleton UserCard actually calls into — patching any other copy
+// of @blocklet/js-sdk doesn't affect UserCard).
+// eslint-disable-next-line import/extensions
+import { getBlockletSDK } from '@arcblock/ux/lib/node_modules/@blocklet/js-sdk/dist/index.js';
+
+type PublicInfoArgs = { did?: string; name?: string };
+
+const sdk = getBlockletSDK() as { user: { getUserPublicInfo: (args: PublicInfoArgs) => Promise<unknown> } };
+const original = sdk.user.getUserPublicInfo.bind(sdk.user);
+const inflight = new Map<string, Promise<unknown>>();
+
+sdk.user.getUserPublicInfo = (args: PublicInfoArgs) => {
+  const key = `${args?.did || ''}|${args?.name || ''}`;
+  const pending = inflight.get(key);
+  if (pending) return pending;
+  const promise = original(args).finally(() => inflight.delete(key));
+  inflight.set(key, promise);
+  return promise;
+};

package/src/libs/util.ts

@@ -14,8 +14,6 @@ import type {
   TProductExpanded,
   TSubscriptionExpanded,
 } from '@blocklet/payment-types';
-import { Hasher } from '@ocap/mcrypto';
-import { hexToNumber } from '@ocap/util';
 import { isEmpty, isObject } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
@@ -249,11 +247,11 @@ export function getCategoricalColors(specifier: string = '4e79a7f28e2ce1575976b7
 
 export function stringToColor(str: string) {
   const colors = getCategoricalColors();
-
-  // @ts-ignore
-  const hash = Hasher.SHA3.hash256(str).slice(-12);
-  // @ts-ignore
-  const index = Math.abs(hexToNumber(hash)) % colors.length;
+  let hash = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    hash = (hash * 31 + str.charCodeAt(i)) | 0;
+  }
+  const index = Math.abs(hash) % colors.length;
   return colors[index];
 }
 

package/src/pages/admin/billing/meter-events/index.tsx

@@ -473,6 +473,10 @@ function CustomerFilter({
               e.stopPropagation();
             }}
             onClick={(e) => e.stopPropagation()}
+            // Stop MUI <Menu>'s built-in letter-key navigation from stealing keystrokes
+            // (it jumps to a MenuItem starting with the typed letter, which makes the
+            // search field appear to "swallow" inputs like 'a'/'w'). See #1357.
+            onKeyDown={(e) => e.stopPropagation()}
           />
         </Box>
         {customers.map((customer) => (

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-unstable-nested-components */
-import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import {
@@ -19,6 +18,7 @@ import { useRequest, useSetState } from 'ahooks';
 import { defaultCountries, FlagEmoji, parseCountry } from 'react-international-phone';
 
 import { useMemo } from 'react';
+import SafeDidAddress from '../../../../components/safe-did-address';
 import BalanceList from '../../../../components/balance-list';
 import Copyable from '../../../../components/copyable';
 import EditCustomer from '../../../../components/customer/edit';
@@ -343,7 +343,7 @@ export default function CustomerDetail(props: { id: string }) {
               }}>
               <InfoRow
                 label={t('common.did')}
-                value={<DidAddress did={data.customer.did} chainId={livemode ? 'main' : 'beta'} showQrcode />}
+                value={<SafeDidAddress did={data.customer.did} chainId={livemode ? 'main' : 'beta'} showQrcode />}
               />
               <InfoRow label={t('admin.customer.name')} value={data.customer.name} />
               <InfoRow label={t('common.createdAt')} value={formatTime(data.customer.created_at)} />

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

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
-import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatTime, getCustomerAvatar, Table } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
@@ -8,6 +7,7 @@ import { Avatar, CircularProgress, Stack, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import SafeDidAddress from '../../../../components/safe-did-address';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
   const search = new URLSearchParams();
@@ -98,7 +98,7 @@ export default function CustomersList() {
           const item = data.list[index] as TCustomer;
           return (
             <Link to={`/admin/customers/${item.id}`}>
-              <DidAddress did={item.did} />
+              <SafeDidAddress did={item.did} />
             </Link>
           );
         },

package/src/pages/admin/overview.tsx

@@ -328,7 +328,9 @@ export default function Overview() {
   const summaryLoading = summary.loading;
   const trendLoading = trend.loading;
   const overdueLoading = overdueSummary.loading;
-  const overdueList = overdueSummary.data?.list || [];
+  // Filter out items with missing currency data — overdue API may return items whose
+  // referenced currency was deleted or failed to expand
+  const overdueList = (overdueSummary.data?.list || []).filter((item: any) => item?.currency?.id);
   const hasOverdue = overdueList.length > 0;
   const summaryData = summary.data;
   const summarySummary = summaryData?.summary;

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

@@ -284,13 +284,13 @@ export default function CustomerSubscriptionDetail() {
 
   const renderOverdraftProtectionLabel = () => {
     const enabled = data?.overdraft_protection?.enabled;
+    const upcomingAmount = overdraftProtection?.upcoming?.amount || '0';
+    const gasAmount = overdraftProtection?.gas || '0';
     const insufficient =
       !enableOverdraftProtection ||
       overdraftProtection.unused === '0' ||
-      new BN(overdraftProtection.unused).lt(
-        new BN(overdraftProtection.upcoming?.amount).add(new BN(overdraftProtection.gas))
-      );
-    const estimateAmount = +fromUnitToToken(cycleAmount.amount, data.paymentCurrency?.decimal);
+      new BN(overdraftProtection.unused).lt(new BN(upcomingAmount).add(new BN(gasAmount)));
+    const estimateAmount = +fromUnitToToken(cycleAmount.amount || '0', data.paymentCurrency?.decimal);
 
     const remainingStake = +fromUnitToToken(overdraftProtection?.unused || '0', data.paymentCurrency?.decimal);
     const formatEstimatedDuration = (cycles: number) => {

package/tsconfig.api.json

@@ -3,12 +3,7 @@
   "compilerOptions": {
     "outDir": "api/dist",
     "noEmit": false,
-    "noEmitOnError": true,
-    "typeRoots": [
-      "./node_modules/@types",
-      "env.d.ts",
-      "pretty-ms-i18n.d.ts"
-    ],     
+    "noEmitOnError": true
   },
   "include": ["api/*.d.ts", "api/src"]
 }

package/tsconfig.json

@@ -31,11 +31,9 @@
     "module": "commonjs" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    "types": ["node", "react", "react-dom", "express", "cookie-parser", "cors", "debug", "dotenv-flow", "jest"],  /* Only include types explicitly used by this package */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "resolveJsonModule": true,                        /* Enable importing .json files. */
@@ -98,5 +96,6 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true, /* Skip type checking all .d.ts files. */
-  }
+  },
+  "exclude": ["node_modules", "cloudflare"]
 }

package/tsconfig.types.json

@@ -5,7 +5,8 @@
     "noEmit": false,
     "declaration": true,
     "emitDeclarationOnly": true,
-    "noEmitOnError": true
+    "noEmitOnError": true,
+    "types": ["node"]
   },
   "include": ["api/*.d.ts", "api/src/store/models"]
 }

package/vite.config.ts

@@ -56,6 +56,7 @@ export default defineConfig(({ mode }) => {
       createBlockletPlugin({
         disableDynamicAssetHost: false,
         chunkSizeLimit: 3500,
+        disableNodePolyfills: true,
       }),
       svgr(),
       process.env.ANALYZE && visualizer({ open: true, gzipSize: true, brotliSize: true }),
@@ -106,6 +107,10 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    define: {
+      global: 'globalThis',
+      'process.env': {},
+    },
     optimizeDeps: {
       include: ['react', 'react-dom', 'react/jsx-runtime'],
       esbuildOptions: { mainFields: ['module', 'main'], resolveExtensions: ['.ts', '.tsx', '.js', '.jsx'] },
@@ -128,4 +133,4 @@ export default defineConfig(({ mode }) => {
       ],
     },
   };
-});
+});