payment-kit 1.13.250 → 1.13.251

package/api/src/integrations/ethereum/token.ts

@@ -1,11 +1,8 @@
 import { JsonRpcProvider, TransactionReceipt, ethers } from 'ethers';
 
 import { ethWallet } from '../../libs/auth';
-import logger from '../../libs/logger';
-import type { PaymentMethod } from '../../store/models/payment-method';
 import { getApproveFunction } from './contract';
 import erc20Abi from './erc20-abi.json';
-import { waitForEvmTxReceipt } from './tx';
 
 export async function fetchErc20Meta(provider: JsonRpcProvider, contractAddress: string) {
   const contract = new ethers.Contract(contractAddress, erc20Abi, provider);
@@ -125,27 +122,3 @@ export async function sendErc20ToUser(
   const receipt = await res.wait();
   return receipt;
 }
-
-export async function executeEvmTransaction(
-  type: string,
-  userDid: string,
-  claims: any[],
-  paymentMethod: PaymentMethod
-) {
-  const client = paymentMethod.getEvmClient();
-  const claim = claims.find((x) => x.type === 'signature');
-  logger.info('executeEvmTransaction', { type, userDid, claim });
-  const receipt = await waitForEvmTxReceipt(client, claim.hash);
-  if (!receipt.status) {
-    throw new Error(`EVM Transaction failed: ${claim.hash}`);
-  }
-
-  return {
-    type,
-    tx_hash: claim.hash,
-    payer: userDid,
-    block_height: receipt.blockNumber.toString(),
-    gas_used: receipt.gasUsed.toString(),
-    gas_price: receipt.gasPrice.toString(),
-  };
-}

package/api/src/integrations/ethereum/tx.ts

@@ -2,6 +2,8 @@ import type { JsonRpcProvider, TransactionReceipt, TransactionResponse } from 'e
 import waitFor from 'p-wait-for';
 
 import logger from '../../libs/logger';
+import { broadcast } from '../../libs/ws';
+import type { PaymentMethod } from '../../store/models/payment-method';
 
 export async function waitForEvmTxReceipt(provider: JsonRpcProvider, txHash: string) {
   let mined: TransactionResponse;
@@ -41,3 +43,38 @@ export async function waitForEvmTxConfirm(provider: JsonRpcProvider, height: num
     { interval: 3000, timeout: 30 * 60 * 1000 }
   );
 }
+
+export async function executeEvmTransaction(
+  type: string,
+  userDid: string,
+  claims: any[],
+  paymentMethod: PaymentMethod
+) {
+  const client = paymentMethod.getEvmClient();
+  const claim = claims.find((x) => x.type === 'signature');
+  logger.info('executeEvmTransaction', { type, userDid, claim });
+  const receipt = await waitForEvmTxReceipt(client, claim.hash);
+  if (!receipt.status) {
+    throw new Error(`EVM Transaction failed: ${claim.hash}`);
+  }
+
+  return {
+    type,
+    tx_hash: claim.hash,
+    payer: userDid,
+    block_height: receipt.blockNumber.toString(),
+    gas_used: receipt.gasUsed.toString(),
+    gas_price: receipt.gasPrice.toString(),
+  };
+}
+
+export function broadcastEvmTransaction(checkoutSessionId: string, status: string, claims: any[]) {
+  const claim = claims.find((x) => x.type === 'signature');
+  if (claim?.hash) {
+    broadcast('checkout.session.evm_transaction', {
+      id: checkoutSessionId,
+      txHash: claim.hash,
+      status,
+    });
+  }
+}

package/api/src/libs/ws.ts

@@ -3,23 +3,23 @@ import { sendToRelay } from '@blocklet/sdk/service/notification';
 import type { CheckoutSession, Invoice, PaymentIntent } from '../store/models';
 import { events } from './event';
 
-export function broadcast(channel: string, eventName: string, data: any) {
-  sendToRelay(channel, eventName, data).catch((err: any) => {
-    console.error(`Failed to broadcast info: ${channel}.${eventName}`, err);
+export function broadcast(eventName: string, data: any) {
+  sendToRelay('events', eventName, data).catch((err: any) => {
+    console.error(`Failed to broadcast event: ${eventName}`, err);
   });
 }
 
 export function initEventBroadcast() {
   events.on('payment_intent.succeeded', (data: PaymentIntent) => {
-    broadcast('events', 'payment_intent.succeeded', data);
+    broadcast('payment_intent.succeeded', data);
   });
   events.on('checkout.session.completed', (data: CheckoutSession) => {
-    broadcast('events', 'checkout.session.completed', data);
+    broadcast('checkout.session.completed', data);
   });
   events.on('checkout.session.nft_minted', (data: CheckoutSession) => {
-    broadcast('events', 'checkout.session.nft_minted', data);
+    broadcast('checkout.session.nft_minted', data);
   });
   events.on('invoice.paid', (data: Invoice) => {
-    broadcast('events', 'invoice.paid', data);
+    broadcast('invoice.paid', data);
   });
 }

package/api/src/routes/checkout-sessions.ts

@@ -1107,6 +1107,7 @@ const schema = Joi.object<{
   customer_id?: string;
   customer_did?: string;
   payment_intent_id?: string;
+  payment_link_id?: string;
   subscription_id?: string;
   livemode?: boolean;
 }>({
@@ -1118,6 +1119,7 @@ const schema = Joi.object<{
   customer_id: Joi.string().empty(''),
   customer_did: Joi.string().empty(''),
   payment_intent_id: Joi.string().empty(''),
+  payment_link_id: Joi.string().empty(''),
   subscription_id: Joi.string().empty(''),
   livemode: Joi.boolean().empty(''),
 });
@@ -1141,6 +1143,9 @@ router.get('/', auth, async (req, res) => {
   if (query.payment_intent_id) {
     where.payment_intent_id = query.payment_intent_id;
   }
+  if (query.payment_link_id) {
+    where.payment_link_id = query.payment_link_id;
+  }
   if (query.subscription_id) {
     where.subscription_id = query.subscription_id;
   }
@@ -1191,4 +1196,20 @@ router.get('/', auth, async (req, res) => {
   }
 });
 
+router.put('/:id', auth, async (req, res) => {
+  const doc = await CheckoutSession.findByPk(req.params.id);
+
+  if (!doc) {
+    return res.status(404).json({ error: 'CheckoutSession not found' });
+  }
+
+  const raw = pick(req.body, ['metadata']);
+  if (raw.metadata) {
+    raw.metadata = formatMetadata(raw.metadata);
+  }
+
+  await doc.update(raw);
+  res.json(doc);
+});
+
 export default router;

package/api/src/routes/connect/change-payment.ts

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';

package/api/src/routes/connect/change-plan.ts

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';

package/api/src/routes/connect/pay.ts

@@ -2,8 +2,8 @@ import type { Transaction, TransferV3Tx } from '@ocap/client';
 import { toBase58 } from '@ocap/util';
 import { fromAddress } from '@ocap/wallet';
 
-import { encodeTransferItx, executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { encodeTransferItx } from '../../integrations/ethereum/token';
+import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import { CallbackArgs, ethWallet } from '../../libs/auth';
 import logger from '../../libs/logger';
 import { getGasPayerExtra } from '../../libs/payment';

package/api/src/routes/connect/setup.ts

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { broadcastEvmTransaction, executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
@@ -182,10 +181,12 @@ export default {
 
     if (paymentMethod.type === 'ethereum') {
       await prepareTxExecution();
+      broadcastEvmTransaction(checkoutSessionId, 'pending', claims);
       const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
       waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
         .then(async () => {
           await afterTxExecution(paymentDetails);
+          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claims);
         })
         .catch(console.error);
 

package/api/src/routes/connect/subscribe.ts

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { broadcastEvmTransaction, executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
@@ -165,6 +164,7 @@ export default {
     if (paymentMethod.type === 'ethereum') {
       await prepareTxExecution();
       const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, subscription });
+      broadcastEvmTransaction(checkoutSessionId, 'pending', claims);
 
       const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
       waitForEvmTxConfirm(
@@ -174,6 +174,7 @@ export default {
       )
         .then(async () => {
           await afterTxExecution(invoice!, paymentDetails);
+          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claims);
         })
         .catch(console.error);
 

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.250
+version: 1.13.251
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.250",
+  "version": "1.13.251",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.77",
     "@arcblock/validator": "^1.18.116",
     "@blocklet/logger": "1.16.26",
-    "@blocklet/payment-react": "1.13.250",
+    "@blocklet/payment-react": "1.13.251",
     "@blocklet/sdk": "1.16.26",
     "@blocklet/ui-react": "^2.9.77",
     "@blocklet/uploader": "^0.1.6",
@@ -116,7 +116,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.26",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.250",
+    "@blocklet/payment-types": "1.13.251",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "a75495162255f5182866532b3b7f2373340774a5"
+  "gitHead": "46caad7baca15f2ba3876018589f78ba11179f59"
 }

package/src/components/product/form.tsx

@@ -25,8 +25,13 @@ export default function ProductForm(props: Props) {
   const images = useWatch({ control, name: 'images' });
 
   const onUploaded = (result: any) => {
-    const tmp = new URL(result.url);
-    setValue('images', [tmp.pathname]);
+    console.warn('onUploaded', result);
+    if (result.url) {
+      const tmp = new URL(result.url);
+      setValue('images', [tmp.pathname]);
+    } else {
+      setValue('images', []);
+    }
   };
 
   return (

package/src/components/subscription/metrics.tsx

@@ -38,7 +38,7 @@ export default function SubscriptionMetrics({ subscription }: Props) {
           divider
         />
       )}
-      {upcoming && upcoming.amount !== '0' && (
+      {upcoming?.amount && upcoming.amount !== '0' && (
         <InfoMetric
           label={t('admin.subscription.nextInvoiceAmount')}
           value={`${formatBNStr(upcoming.amount, subscription.paymentCurrency.decimal)} ${

package/src/components/uploader.tsx

@@ -1,4 +1,4 @@
-import { UploadFileOutlined } from '@mui/icons-material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Button, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { lazy, useCallback, useEffect, useRef } from 'react';
@@ -14,12 +14,17 @@ type Props = {
 };
 
 export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOfFiles, allowedFileExts }: Props) {
+  const { t } = useLocaleContext();
   const uploaderRef = useRef<any>(null);
   const handleOpen = useCallback(() => {
     if (!uploaderRef.current) return;
     uploaderRef.current.open();
   }, []);
 
+  const handleRemove = () => {
+    onUploaded({ url: '' });
+  };
+
   useEffect(() => {
     if (uploaderRef.current) {
       const uploader = uploaderRef.current.getUploader();
@@ -33,17 +38,20 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
         display="flex"
         alignItems={preview ? 'flex-end' : 'center'}
         justifyContent="center"
-        onClick={handleOpen}
         style={{
           backgroundImage: preview ? `url(${preview})` : 'none',
           backgroundRepeat: 'no-repeat',
           backgroundSize: 'contain',
           backgroundPosition: 'center',
         }}>
-        <Button fullWidth variant={preview ? 'contained' : 'text'} color="inherit" size="small">
-          <UploadFileOutlined sx={{ mr: 1 }} fontSize="small" />
-          <Typography>{preview ? 'Change' : 'Upload'}</Typography>
+        <Button variant={preview ? 'contained' : 'text'} color="inherit" size="small" onClick={handleOpen}>
+          <Typography>{t(`common.${preview ? 'change' : 'upload'}`)}</Typography>
         </Button>
+        {preview && (
+          <Button variant="contained" color="error" size="small" onClick={handleRemove}>
+            <Typography>{t('common.remove')}</Typography>
+          </Button>
+        )}
       </Div>
       <UploaderComponent
         // @ts-ignore

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

@@ -1,7 +1,16 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { Status, TxGas, TxLink, api, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
+import {
+  Status,
+  TxGas,
+  TxLink,
+  api,
+  formatError,
+  formatTime,
+  getInvoiceStatusColor,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -16,7 +25,6 @@ import InfoRow from '../../../components/info-row';
 import { Download } from '../../../components/invoice-pdf/pdf';
 import InvoiceTable from '../../../components/invoice/table';
 import SectionHeader from '../../../components/section/header';
-import { useSessionContext } from '../../../contexts/session';
 import { goBackOrFallback } from '../../../libs/util';
 import CustomerRefundList from '../refund/list';
 
@@ -27,7 +35,7 @@ const fetchData = (id: string): Promise<TInvoiceExpanded> => {
 export default function CustomerInvoiceDetail() {
   const { t } = useLocaleContext();
   const [searchParams] = useSearchParams();
-  const { connectApi } = useSessionContext();
+  const { connect } = usePaymentContext();
   const params = useParams<{ id: string }>();
   const [state, setState] = useSetState({
     downloading: false,
@@ -39,8 +47,9 @@ export default function CustomerInvoiceDetail() {
 
   const onPay = () => {
     setState({ paying: true });
-    connectApi.open({
+    connect.open({
       action: 'collect',
+      saveConnect: false,
       messages: {
         scan: '',
         title: t(`payment.customer.invoice.${action || 'pay'}`),
@@ -50,11 +59,11 @@ export default function CustomerInvoiceDetail() {
       } as any,
       extraParams: { invoiceId: params.id, action },
       onSuccess: async () => {
-        connectApi.close();
+        connect.close();
         await runAsync();
       },
       onClose: () => {
-        connectApi.close();
+        connect.close();
         setState({ paying: false });
       },
       onError: (err: any) => {
@@ -66,7 +75,7 @@ export default function CustomerInvoiceDetail() {
 
   const closePay = () => {
     setState({ paying: true });
-    connectApi.close();
+    connect.close();
   };
 
   useEffect(() => {

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

@@ -1,7 +1,15 @@
 /* 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, formatBNStr, formatError, formatPrice, formatTime } from '@blocklet/payment-react';
+import {
+  PricingTable,
+  api,
+  formatBNStr,
+  formatError,
+  formatPrice,
+  formatTime,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
@@ -12,7 +20,6 @@ import { useNavigate, useParams } from 'react-router-dom';
 import InfoCard from '../../../components/info-card';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
-import { useSessionContext } from '../../../contexts/session';
 import { goBackOrFallback } from '../../../libs/util';
 
 const fetchData = async (
@@ -45,7 +52,7 @@ export default function CustomerSubscriptionChangePlan() {
   const navigate = useNavigate();
   const { id } = useParams() as { id: string };
   const { t, locale } = useLocaleContext();
-  const { connectApi } = useSessionContext();
+  const { connect } = usePaymentContext();
 
   const { loading, error, data } = useRequest(() => fetchData(id));
   const [state, setState] = useSetState({
@@ -142,7 +149,7 @@ export default function CustomerSubscriptionChangePlan() {
         setState({ paying: true });
         try {
           setState({ paying: true });
-          connectApi.open({
+          connect.open({
             action: result.data.connectAction,
             saveConnect: false,
             messages: {
@@ -156,12 +163,12 @@ export default function CustomerSubscriptionChangePlan() {
             onSuccess: () => {
               setState({ paid: true, paying: false });
               setTimeout(() => {
-                connectApi.close();
+                connect.close();
                 handleBack();
               }, 2000);
             },
             onClose: () => {
-              connectApi.close();
+              connect.close();
               setState({ paying: false });
             },
             onError: (err: any) => {