@blocklet/payment-react 1.13.239 → 1.13.241

package/es/payment/header.js

@@ -3,7 +3,7 @@ import { useTheme } from "@arcblock/ux/lib/Theme";
 import { Avatar, Stack, Typography } from "@mui/material";
 import { useCreation, useLocalStorageState, useSize } from "ahooks";
 import Livemode from "../components/livemode.js";
-import { getStatementDescriptor } from "../util.js";
+import { getStatementDescriptor } from "../libs/util.js";
 import UserButtons from "./form/addon.js";
 export default function PaymentHeader({ checkoutSession }) {
   const [livemode] = useLocalStorageState("livemode", { defaultValue: true });

package/es/payment/index.js

@@ -8,9 +8,9 @@ import { fromTokenToUnit } from "@ocap/util";
 import { useSetState } from "ahooks";
 import { useEffect, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
-import api from "../api.js";
 import { usePaymentContext } from "../contexts/payment.js";
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../util.js";
+import api from "../libs/api.js";
+import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
 import PaymentForm from "./form/index.js";
@@ -332,6 +332,13 @@ export const Root = styled(Box)`
     margin-top: ${(props) => props.mode === "standalone" ? "64px" : "0"};
   }
   .cko-product-summary {
+    width: 100%;
+  }
+  .cko-ellipsis {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .cko-payment {

package/es/payment/product-card.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, Stack, Typography } from "@mui/material";
 export default function ProductCard({ size, variant, name, logo, description, extra }) {
   const s = { width: size, height: size };
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "flex-start", spacing: 1, flex: 2, children: [
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "flex-start", spacing: 1, flex: 2, sx: { width: "100%" }, children: [
     logo ? (
       // @ts-ignore
       /* @__PURE__ */ jsx(Avatar, { src: logo, alt: name, variant, sx: s })
@@ -10,19 +10,39 @@ export default function ProductCard({ size, variant, name, logo, description, ex
       // @ts-ignore
       /* @__PURE__ */ jsx(Avatar, { variant, sx: s, children: name.slice(0, 1) })
     ),
-    /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", justifyContent: "space-around", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontWeight: 500, mb: 0.5, lineHeight: 1 }, color: "text.primary", children: name }),
-      description && /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "body1",
-          sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1, textAlign: "left" },
-          color: "text.secondary",
-          children: description
-        }
-      ),
-      extra && /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "0.85rem" }, color: "text.secondary", children: extra })
-    ] })
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "column",
+        alignItems: "flex-start",
+        justifyContent: "space-around",
+        sx: { flexShrink: 1, overflow: "hidden" },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              className: "cko-ellipsis",
+              variant: "body1",
+              title: name,
+              sx: { fontWeight: 500, mb: 0.5, lineHeight: 1 },
+              color: "text.primary",
+              children: name
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body1",
+              title: description,
+              sx: { fontSize: "0.85rem", mb: 0.5, lineHeight: 1, textAlign: "left" },
+              color: "text.secondary",
+              children: description
+            }
+          ),
+          extra && /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "0.85rem" }, color: "text.secondary", children: extra })
+        ]
+      }
+    )
   ] });
 }
 ProductCard.defaultProps = {

package/es/payment/product-item.js

@@ -3,7 +3,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Stack, Typography } from "@mui/material";
 import Status from "../components/status.js";
 import Switch from "../components/switch-button.js";
-import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from "../util.js";
+import { formatLineItemPricing, formatPrice, formatRecurring, formatUpsellSaving } from "../libs/util.js";
 import ProductCard from "./product-card.js";
 ProductItem.defaultProps = {
   mode: "normal",
@@ -26,21 +26,31 @@ export default function ProductItem({
   const canUpsell = mode === "normal" && items.length === 1;
   return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", spacing: 1, sx: { width: "100%" }, children: [
     /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", sx: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [
-        /* @__PURE__ */ jsx(
-          ProductCard,
-          {
-            logo: item.price.product?.images[0],
-            name: item.price.product?.name,
-            description: item.price.product?.description,
-            extra: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity
-          }
-        ),
-        /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [
-          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500 }, gutterBottom: true, children: pricing.primary }),
-          pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.85rem", color: "text.secondary" }, children: pricing.secondary })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          alignItems: "flex-start",
+          spacing: 0.5,
+          justifyContent: "space-between",
+          sx: { width: "100%" },
+          children: [
+            /* @__PURE__ */ jsx(
+              ProductCard,
+              {
+                logo: item.price.product?.images[0],
+                name: item.price.product?.name,
+                description: item.price.product?.description,
+                extra: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}` })].filter(Boolean).join(", ") : pricing.quantity
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-end", flex: 1, children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 500 }, gutterBottom: true, children: pricing.primary }),
+              pricing.secondary && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.85rem", color: "text.secondary" }, children: pricing.secondary })
+            ] })
+          ]
+        }
+      ),
       children
     ] }),
     canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: "100%" }, children: [

package/es/payment/summary.js

@@ -7,9 +7,9 @@ import { BN, fromTokenToUnit } from "@ocap/util";
 import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
 import useBus from "use-bus";
-import api from "../api.js";
 import Status from "../components/status.js";
-import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from "../util.js";
+import api from "../libs/api.js";
+import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from "../libs/util.js";
 import PaymentAmount from "./amount.js";
 import ProductDonation from "./product-donation.js";
 import ProductItem from "./product-item.js";
@@ -143,7 +143,16 @@ export default function PaymentSummary({
   };
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
     /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: { xs: 1, sm: 3 } }, children: [
-      /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" }, children: action || headlines.action }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          className: "cko-ellipsis",
+          component: "div",
+          title: action || headlines.action,
+          sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" },
+          children: action || headlines.action
+        }
+      ),
       /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
       headlines.then && /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
     ] }),

package/es/types/shims.d.ts

@@ -13,6 +13,4 @@ declare module '@blocklet/*';
 
 declare module 'pretty-ms-i18n';
 
-declare interface Window {
-  blocklet: any;
-}
+declare var blocklet: import('@blocklet/sdk').WindowBlocklet;

package/lib/checkout/donate.js

@@ -12,9 +12,9 @@ var _ahooks = require("ahooks");
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _unionBy = _interopRequireDefault(require("lodash/unionBy"));
 var _react = require("react");
-var _api = _interopRequireDefault(require("../api"));
 var _tx = _interopRequireDefault(require("../components/blockchain/tx"));
-var _util = require("../util");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const donationCache = {};
@@ -29,11 +29,12 @@ const createOrUpdateDonation = (settings, livemode = true) => {
   return donationCache[settings.target];
 };
 const supporterCache = {};
-const fetchSupporters = target => {
+const fetchSupporters = (target, livemode = true) => {
   if (!supporterCache[target]) {
     supporterCache[target] = _api.default.get("/api/donations", {
       params: {
-        target
+        target,
+        livemode
       }
     }).then(res => res.data).finally(() => {
       setTimeout(() => {
@@ -198,7 +199,7 @@ function CheckoutDonate({
     exist: false
   });
   const donation = (0, _ahooks.useRequest)(() => createOrUpdateDonation(settings, livemode));
-  const supporters = (0, _ahooks.useRequest)(() => donation.data ? fetchSupporters(donation.data.id) : Promise.resolve({}));
+  const supporters = (0, _ahooks.useRequest)(() => donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({}));
   (0, _react.useEffect)(() => {
     if (donation.data && state.supporterLoaded === false) {
       setState({

package/lib/checkout/form.js

@@ -9,9 +9,9 @@ var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _react = require("react");
 var _ufo = require("ufo");
-var _api = _interopRequireDefault(require("../api"));
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
 var _payment = _interopRequireDefault(require("../payment"));
-var _util = require("../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const promises = {};
 const startFromPaymentLink = (id, params) => {

package/lib/checkout/table.js

@@ -11,10 +11,10 @@ var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
-var _api = _interopRequireDefault(require("../api"));
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _pricingTable = _interopRequireDefault(require("../components/pricing-table"));
-var _util = require("../util");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
 var _form = _interopRequireDefault(require("./form"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fetchData = async id => {

package/lib/components/blockchain/gas.js

@@ -9,7 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _payment = require("../../contexts/payment");
-var _util2 = require("../../util");
+var _util2 = require("../../libs/util");
 TxGas.defaultProps = {};
 function TxGas(props) {
   const {

package/lib/components/blockchain/tx.js

@@ -8,7 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
-var _util = require("../../util");
+var _util = require("../../libs/util");
 TxLink.defaultProps = {
   mode: "dashboard",
   align: "left"

package/lib/components/confirm.d.ts

@@ -1,11 +1,12 @@
 import type { EventHandler } from 'react';
-declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, cancel, loading, }: {
+declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, color, cancel, loading, }: {
     onConfirm: EventHandler<any>;
     onCancel: EventHandler<any>;
     title: string | React.ReactNode;
     message: string | React.ReactNode;
     confirm?: string | React.ReactNode;
-    cancel?: string | React.ReactNode;
+    color?: string;
+    cancel?: boolean | string | React.ReactNode;
     loading?: boolean;
 }): import("react").JSX.Element;
 declare namespace ConfirmDialog {
@@ -13,6 +14,7 @@ declare namespace ConfirmDialog {
         loading: boolean;
         confirm: string;
         cancel: string;
+        color: string;
     };
 }
 export default ConfirmDialog;

package/lib/components/confirm.js

@@ -14,6 +14,7 @@ function ConfirmDialog({
   title,
   message,
   confirm,
+  color,
   cancel,
   loading
 }) {
@@ -28,7 +29,7 @@ function ConfirmDialog({
     confirmButton: {
       text: confirm || t("common.confirm"),
       props: {
-        color: "error",
+        color,
         size: "small",
         variant: "contained",
         disabled: !!loading
@@ -41,6 +42,7 @@ function ConfirmDialog({
         size: "small"
       }
     },
+    showCancelButton: typeof cancel !== "boolean" || !!cancel,
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       children: message
     })
@@ -49,5 +51,6 @@ function ConfirmDialog({
 ConfirmDialog.defaultProps = {
   loading: false,
   confirm: "",
-  cancel: ""
+  cancel: "",
+  color: "error"
 };

package/lib/components/pricing-table.js

@@ -13,8 +13,8 @@ var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
+var _util = require("../libs/util");
 var _amount = _interopRequireDefault(require("../payment/amount"));
-var _util = require("../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const groupItemsByRecurring = items => {
   const grouped = {};

package/lib/components/safe-guard.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 module.exports = SafeGuard;
-var _util = require("../util");
+var _util = require("../libs/util");
 function SafeGuard({
   children
 }) {

package/lib/contexts/payment.js

@@ -11,8 +11,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _react = require("react");
-var _api = _interopRequireDefault(require("../api"));
-var _util = require("../util");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const prefix = (0, _util.getPrefix)();
 const PaymentContext = exports.PaymentContext = (0, _react.createContext)({

package/lib/history/invoice/list.js

@@ -6,14 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = CustomerInvoiceList;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
+var _react = require("react");
 var _ufo = require("ufo");
-var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
-var _util = require("../../util");
+var _payment = require("../../contexts/payment");
+var _subscription = require("../../hooks/subscription");
+var _api = _interopRequireDefault(require("../../libs/api"));
+var _util = require("../../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const groupByDate = items => {
   const grouped = {};
@@ -39,11 +43,13 @@ const getInvoiceLink = (invoice, action) => {
   if (invoice.id.startsWith("in_")) {
     return {
       external: false,
+      connect: invoice.status === "uncollectible",
       url: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`)
     };
   }
   return {
     external: true,
+    connect: false,
     url: (0, _util.getTxLink)(invoice.paymentMethod, invoice.metadata?.payment_details).link
   };
 };
@@ -57,16 +63,24 @@ function CustomerInvoiceList({
   target,
   action
 }) {
+  const size = pageSize || 10;
+  const subscription = (0, _subscription.useSubscription)("events");
   const {
     t,
     locale
   } = (0, _context.useLocaleContext)();
-  const size = pageSize || 10;
+  const {
+    connect
+  } = (0, _payment.usePaymentContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    paying: ""
+  });
   const {
     data,
     loadMore,
     loadingMore,
-    loading
+    loading,
+    reloadAsync
   } = (0, _ahooks.useInfiniteScroll)(d => {
     const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
     return fetchData({
@@ -80,8 +94,59 @@ function CustomerInvoiceList({
       ignore_zero: true
     });
   }, {
-    reloadDeps: [customer_id, subscription_id, status]
+    reloadDeps: [customer_id, subscription_id, status, include_staking]
   });
+  (0, _react.useEffect)(() => {
+    if (subscription && customer_id) {
+      subscription.on("invoice.paid", async ({
+        response
+      }) => {
+        if (response.customer_id === customer_id) {
+          await reloadAsync();
+        }
+      });
+    }
+  }, [subscription]);
+  const onPay = invoiceId => {
+    if (state.paying) {
+      return;
+    }
+    setState({
+      paying: invoiceId
+    });
+    connect.open({
+      action: "collect",
+      messages: {
+        scan: "",
+        title: t(`payment.customer.invoice.${action || "pay"}`),
+        success: t(`payment.customer.invoice.${action || "pay"}Success`),
+        error: t(`payment.customer.invoice.${action || "pay"}Error`),
+        confirm: ""
+      },
+      extraParams: {
+        invoiceId,
+        action
+      },
+      onSuccess: () => {
+        connect.close();
+        setState({
+          paying: ""
+        });
+      },
+      onClose: () => {
+        connect.close();
+        setState({
+          paying: ""
+        });
+      },
+      onError: err => {
+        setState({
+          paying: ""
+        });
+        _Toast.default.error((0, _util.formatError)(err));
+      }
+    });
+  };
   if (loading || !data) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
   }
@@ -185,7 +250,13 @@ function CustomerInvoiceList({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
             textAlign: "right",
-            children: action ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            children: action ? link.connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "contained",
+              color: "primary",
+              size: "small",
+              onClick: () => onPay(invoice.id),
+              children: t("payment.customer.invoice.pay")
+            }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
               component: "a",
               variant: "contained",
               color: "primary",
@@ -237,9 +308,6 @@ const Root = (0, _system.styled)(_material.Stack)`
     .invoice-description {
       display: none !important;
     }
-    svg[data-testid='OpenInNewOutlinedIcon'] {
-      display: none !important;
-    }
   }
 
   a.MuiButton-root {

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

@@ -8,10 +8,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
+var _react = require("react");
 var _ufo = require("ufo");
-var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
-var _util = require("../../util");
+var _api = _interopRequireDefault(require("../../libs/api"));
+var _didConnect = require("../../libs/did-connect");
+var _util = require("../../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fetchInvoiceData = (params = {}) => {
   const search = new URLSearchParams();
@@ -50,6 +52,18 @@ function MiniInvoiceList() {
     ignore_zero: true,
     include_staking: true
   }));
+  const subscriptionPageUrl = (0, _react.useMemo)(() => {
+    if (!subscription) {
+      return "#";
+    }
+    const pageUrl = (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/subscription/${subscription.id}`);
+    return (0, _ufo.withQuery)(pageUrl, {
+      source: "embed",
+      ...(0, _didConnect.getDidConnectQueryParams)({
+        forceConnected: subscription.customer.did
+      })
+    });
+  }, [subscription]);
   if (error) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
@@ -226,7 +240,7 @@ function MiniInvoiceList() {
             width: subscription.service_actions?.length ? "auto" : "100%"
           },
           target: "_blank",
-          href: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/subscription/${subscription.id}?source=embed`),
+          href: subscriptionPageUrl,
           children: t("payment.customer.subscriptions.view")
         })]
       })]

package/lib/history/payment/list.js

@@ -8,10 +8,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
-var _api = _interopRequireDefault(require("../../api"));
 var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
 var _status = _interopRequireDefault(require("../../components/status"));
-var _util = require("../../util");
+var _api = _interopRequireDefault(require("../../libs/api"));
+var _util = require("../../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const groupByDate = items => {
   const grouped = {};

package/lib/hooks/subscription.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description channel 的值不能包含分隔符 / . : 等，否则前端接受不到事件
+ * @export
+ * @param {string} channel
+ * @return {*}
+ */
+export declare function useSubscription(channel: string): any;

package/lib/hooks/subscription.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSubscription = useSubscription;
+var _ws = require("@arcblock/ws");
+var _get = _interopRequireDefault(require("lodash/get"));
+var _react = require("react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const RELAY_SOCKET_PREFIX = "/.well-known/service/relay";
+const getAppId = () => (0, _get.default)(window, "blocklet.appPid") || (0, _get.default)(window, "blocklet.appId") || "";
+const getRelayChannel = token => `relay:${getAppId()}:${token}`;
+const getRelayProtocol = () => window.location.protocol === "https:" ? "wss:" : "ws:";
+const getSocketHost = () => new URL(window.location.href).host;
+function useSubscription(channel) {
+  const socket = (0, _react.useRef)(null);
+  const subscription = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (getAppId()) {
+      const needReconnect = !socket.current || socket.current.isConnected() === false;
+      if (needReconnect) {
+        socket.current = new _ws.WsClient(`${getRelayProtocol()}//${getSocketHost()}${RELAY_SOCKET_PREFIX}`, {
+          longpollerTimeout: 5e3,
+          // connection timeout
+          heartbeatIntervalMs: 30 * 1e3
+        });
+        socket.current.connect();
+      }
+    }
+    return () => {
+      if (socket.current) {
+        socket.current.disconnect();
+        socket.current = null;
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (channel) {
+      let needSubscription = false;
+      if (subscription.current) {
+        if (subscription.current.channel !== channel) {
+          socket.current?.unsubscribe(getRelayChannel(subscription.current.channel));
+          needSubscription = true;
+        }
+      } else {
+        needSubscription = true;
+      }
+      if (needSubscription) {
+        subscription.current = socket.current.subscribe(getRelayChannel(channel));
+        subscription.current.channel = channel;
+      }
+    }
+    return () => {
+      if (subscription.current) {
+        socket.current?.unsubscribe(getRelayChannel(subscription.current.channel));
+        subscription.current = null;
+      }
+    };
+  }, [channel]);
+  return subscription.current;
+}