@blocklet/payment-react 1.13.227 → 1.13.229

package/es/components/blockchain/gas.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { PaymentDetails, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+declare function TxGas(props: {
+    details: PaymentDetails;
+    currency: TPaymentCurrency;
+    method: TPaymentMethod;
+}): import("react").JSX.Element;
+declare namespace TxGas {
+    var defaultProps: {};
+}
+export default TxGas;

package/es/components/blockchain/gas.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Typography } from "@mui/material";
+import { fromUnitToToken } from "@ocap/util";
+import { getTxLink } from "../../util.js";
+TxGas.defaultProps = {};
+export default function TxGas(props) {
+  const { t } = useLocaleContext();
+  const { gas } = getTxLink(props.method, props.details);
+  if (gas) {
+    return /* @__PURE__ */ jsxs(Typography, { component: "span", children: [
+      fromUnitToToken(gas, props.currency.decimal),
+      " ",
+      props.currency.symbol,
+      " (",
+      props.method.name,
+      ")"
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: t("common.none") });
+}

package/es/components/blockchain/tx.js

@@ -12,7 +12,7 @@ export default function TxLink(props) {
   if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
     return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: t("common.none") });
   }
-  const { text, link } = getTxLink(props.method, props.details);
+  const { text, link, gas } = getTxLink(props.method, props.details);
   if (link) {
     return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(
       Stack,
@@ -23,7 +23,10 @@ export default function TxLink(props) {
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
         spacing: 1,
         children: [
-          /* @__PURE__ */ jsx(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text }),
+          /* @__PURE__ */ jsxs(Typography, { component: "span", color: "primary", children: [
+            text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text,
+            gas
+          ] }),
           /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
         ]
       }

package/es/index.d.ts

@@ -2,6 +2,7 @@ import api from './api';
 import CheckoutDonate from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
@@ -25,4 +26,4 @@ import PaymentSummary from './payment/summary';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, SafeGuard, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, TxGas, SafeGuard, };

package/es/index.js

@@ -2,6 +2,7 @@ import api from "./api.js";
 import CheckoutDonate from "./checkout/donate.js";
 import CheckoutForm from "./checkout/form.js";
 import CheckoutTable from "./checkout/table.js";
+import TxGas from "./components/blockchain/gas.js";
 import TxLink from "./components/blockchain/tx.js";
 import ConfirmDialog from "./components/confirm.js";
 import FormInput from "./components/input.js";
@@ -49,5 +50,6 @@ export {
   CustomerPaymentList,
   MiniInvoiceList,
   TxLink,
+  TxGas,
   SafeGuard
 };

package/es/locales/en.js

@@ -39,6 +39,7 @@ export default flat({
     email: "Email",
     did: "DID",
     txHash: "Transaction",
+    txGas: "Transaction Gas",
     delegateTxHash: "Delegate Transaction",
     stakeTxHash: "Stake Transaction",
     slashTxHash: "Slash Transaction",
@@ -163,6 +164,10 @@ export default flat({
       complete: {
         title: "Checkout Completed",
         description: "This checkout session has completed. This means that your payment has already been successfully processed."
+      },
+      emptyItems: {
+        title: "Nothing to show here",
+        description: "Seems this checkoutSession is not configured properly"
       }
     },
     customer: {

package/es/locales/zh.js

@@ -39,6 +39,7 @@ export default flat({
     email: "\u90AE\u7BB1",
     did: "DID",
     txHash: "\u4EA4\u6613\u54C8\u5E0C",
+    txGas: "\u4EA4\u6613\u8D39\u7528",
     delegateTxHash: "\u6388\u6743\u4EA4\u6613",
     stakeTxHash: "\u8D28\u62BC\u4EA4\u6613",
     slashTxHash: "\u7F5A\u6CA1\u4EA4\u6613",
@@ -163,6 +164,10 @@ export default flat({
       cross_sell: {
         add: "\u6DFB\u52A0\u5230\u8BA2\u5355",
         remove: "\u4ECE\u8BA2\u5355\u79FB\u9664"
+      },
+      emptyItems: {
+        title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
+        description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
       }
     },
     customer: {

package/es/payment/index.js

@@ -86,6 +86,16 @@ export default function Payment({
       }
     );
   }
+  if (!checkoutSession.line_items.length) {
+    return /* @__PURE__ */ jsx(
+      PaymentError,
+      {
+        mode,
+        title: t("payment.checkout.emptyItems.title"),
+        description: t("payment.checkout.emptyItems.description")
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     PaymentInner,
     {

package/es/util.d.ts

@@ -65,4 +65,5 @@ export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[])
 export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails) => {
     link: string;
     text: string;
+    gas: any;
 };

package/es/util.js

@@ -560,19 +560,22 @@ export const getTxLink = (method, details) => {
   if (method.type === "arcblock" && details.arcblock?.tx_hash) {
     return {
       link: joinURL(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
-      text: details.arcblock?.tx_hash
+      text: details.arcblock?.tx_hash,
+      gas: ""
     };
   }
   if (method.type === "bitcoin" && details.bitcoin?.tx_hash) {
     return {
       link: joinURL(method.settings.bitcoin?.explorer_host, "/tx", details.bitcoin?.tx_hash),
-      text: details.bitcoin?.tx_hash
+      text: details.bitcoin?.tx_hash,
+      gas: ""
     };
   }
   if (method.type === "ethereum" && details.ethereum?.tx_hash) {
     return {
       link: joinURL(method.settings.ethereum?.explorer_host, "/tx", details.ethereum?.tx_hash),
-      text: details.ethereum?.tx_hash
+      text: (details.ethereum?.tx_hash).toUpperCase(),
+      gas: new BN(details.ethereum.gas_price).mul(new BN(details.ethereum.gas_used)).toString()
     };
   }
   if (method.type === "stripe") {
@@ -583,8 +586,9 @@ export const getTxLink = (method, details) => {
         "payments",
         details.stripe?.payment_intent_id
       ),
-      text: details.stripe?.payment_intent_id
+      text: details.stripe?.payment_intent_id,
+      gas: ""
     };
   }
-  return { text: "N/A", link: "" };
+  return { text: "N/A", link: "", gas: "" };
 };

package/lib/components/blockchain/gas.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { PaymentDetails, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+declare function TxGas(props: {
+    details: PaymentDetails;
+    currency: TPaymentCurrency;
+    method: TPaymentMethod;
+}): import("react").JSX.Element;
+declare namespace TxGas {
+    var defaultProps: {};
+}
+export default TxGas;

package/lib/components/blockchain/gas.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = TxGas;
+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 _util2 = require("../../util");
+TxGas.defaultProps = {};
+function TxGas(props) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    gas
+  } = (0, _util2.getTxLink)(props.method, props.details);
+  if (gas) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+      component: "span",
+      children: [(0, _util.fromUnitToToken)(gas, props.currency.decimal), " ", props.currency.symbol, " (", props.method.name, ")"]
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+    component: "small",
+    color: "text.secondary",
+    children: t("common.none")
+  });
+}

package/lib/components/blockchain/tx.js

@@ -26,7 +26,8 @@ function TxLink(props) {
   }
   const {
     text,
-    link
+    link,
+    gas
   } = (0, _util.getTxLink)(props.method, props.details);
   if (link) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
@@ -39,10 +40,10 @@ function TxLink(props) {
         alignItems: "center",
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
         spacing: 1,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
           component: "span",
           color: "primary",
-          children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text
+          children: [text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text, gas]
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
           fontSize: "small"
         })]

package/lib/index.d.ts

@@ -2,6 +2,7 @@ import api from './api';
 import CheckoutDonate from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
@@ -25,4 +26,4 @@ import PaymentSummary from './payment/summary';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, SafeGuard, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, TxGas, SafeGuard, };

package/lib/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   CheckoutDonate: true,
   CheckoutForm: true,
   CheckoutTable: true,
+  TxGas: true,
   TxLink: true,
   ConfirmDialog: true,
   FormInput: true,
@@ -157,6 +158,12 @@ Object.defineProperty(exports, "Switch", {
     return _switchButton.default;
   }
 });
+Object.defineProperty(exports, "TxGas", {
+  enumerable: true,
+  get: function () {
+    return _gas.default;
+  }
+});
 Object.defineProperty(exports, "TxLink", {
   enumerable: true,
   get: function () {
@@ -191,6 +198,7 @@ var _api = _interopRequireDefault(require("./api"));
 var _donate = _interopRequireDefault(require("./checkout/donate"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
+var _gas = _interopRequireDefault(require("./components/blockchain/gas"));
 var _tx = _interopRequireDefault(require("./components/blockchain/tx"));
 var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));

package/lib/locales/en.js

@@ -46,6 +46,7 @@ module.exports = (0, _flat.default)({
     email: "Email",
     did: "DID",
     txHash: "Transaction",
+    txGas: "Transaction Gas",
     delegateTxHash: "Delegate Transaction",
     stakeTxHash: "Stake Transaction",
     slashTxHash: "Slash Transaction",
@@ -170,6 +171,10 @@ module.exports = (0, _flat.default)({
       complete: {
         title: "Checkout Completed",
         description: "This checkout session has completed. This means that your payment has already been successfully processed."
+      },
+      emptyItems: {
+        title: "Nothing to show here",
+        description: "Seems this checkoutSession is not configured properly"
       }
     },
     customer: {

package/lib/locales/zh.js

@@ -46,6 +46,7 @@ module.exports = (0, _flat.default)({
     email: "\u90AE\u7BB1",
     did: "DID",
     txHash: "\u4EA4\u6613\u54C8\u5E0C",
+    txGas: "\u4EA4\u6613\u8D39\u7528",
     delegateTxHash: "\u6388\u6743\u4EA4\u6613",
     stakeTxHash: "\u8D28\u62BC\u4EA4\u6613",
     slashTxHash: "\u7F5A\u6CA1\u4EA4\u6613",
@@ -170,6 +171,10 @@ module.exports = (0, _flat.default)({
       cross_sell: {
         add: "\u6DFB\u52A0\u5230\u8BA2\u5355",
         remove: "\u4ECE\u8BA2\u5355\u79FB\u9664"
+      },
+      emptyItems: {
+        title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
+        description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
       }
     },
     customer: {

package/lib/payment/index.js

@@ -114,6 +114,13 @@ function Payment({
       description: t("payment.checkout.complete.description")
     });
   }
+  if (!checkoutSession.line_items.length) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_error.default, {
+      mode,
+      title: t("payment.checkout.emptyItems.title"),
+      description: t("payment.checkout.emptyItems.description")
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentInner, {
     checkoutSession,
     paymentMethods,

package/lib/util.d.ts

@@ -65,4 +65,5 @@ export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[])
 export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails) => {
     link: string;
     text: string;
+    gas: any;
 };

package/lib/util.js

@@ -675,31 +675,36 @@ const getTxLink = (method, details) => {
   if (method.type === "arcblock" && details.arcblock?.tx_hash) {
     return {
       link: (0, _ufo.joinURL)(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
-      text: details.arcblock?.tx_hash
+      text: details.arcblock?.tx_hash,
+      gas: ""
     };
   }
   if (method.type === "bitcoin" && details.bitcoin?.tx_hash) {
     return {
       link: (0, _ufo.joinURL)(method.settings.bitcoin?.explorer_host, "/tx", details.bitcoin?.tx_hash),
-      text: details.bitcoin?.tx_hash
+      text: details.bitcoin?.tx_hash,
+      gas: ""
     };
   }
   if (method.type === "ethereum" && details.ethereum?.tx_hash) {
     return {
       link: (0, _ufo.joinURL)(method.settings.ethereum?.explorer_host, "/tx", details.ethereum?.tx_hash),
-      text: details.ethereum?.tx_hash
+      text: (details.ethereum?.tx_hash).toUpperCase(),
+      gas: new _util.BN(details.ethereum.gas_price).mul(new _util.BN(details.ethereum.gas_used)).toString()
     };
   }
   if (method.type === "stripe") {
     const dashboard = method.livemode ? "https://dashboard.stripe.com" : "https://dashboard.stripe.com/test";
     return {
       link: (0, _ufo.joinURL)(method.settings.stripe?.dashboard || dashboard, "payments", details.stripe?.payment_intent_id),
-      text: details.stripe?.payment_intent_id
+      text: details.stripe?.payment_intent_id,
+      gas: ""
     };
   }
   return {
     text: "N/A",
-    link: ""
+    link: "",
+    gas: ""
   };
 };
 exports.getTxLink = getTxLink;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.227",
+  "version": "1.13.229",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,29 +52,29 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.66",
-    "@arcblock/ux": "^2.9.66",
-    "@mui/icons-material": "^5.15.14",
-    "@mui/lab": "^5.0.0-alpha.169",
-    "@mui/material": "^5.15.14",
-    "@mui/styles": "^5.15.14",
-    "@mui/system": "^5.15.14",
+    "@arcblock/did-connect": "^2.9.68",
+    "@arcblock/ux": "^2.9.68",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.15",
+    "@mui/styles": "^5.15.15",
+    "@mui/system": "^5.15.15",
     "@ocap/util": "^1.18.115",
-    "@stripe/react-stripe-js": "^2.4.0",
+    "@stripe/react-stripe-js": "^2.7.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.3.2",
-    "ahooks": "^3.7.10",
+    "ahooks": "^3.7.11",
     "axios": "^0.27.2",
     "dayjs": "^1.11.10",
     "flat": "^5.0.2",
     "google-libphonenumber": "^3.2.34",
     "lodash": "^4.17.21",
-    "numbro": "^2.4.0",
+    "numbro": "^2.5.0",
     "p-wait-for": "3",
-    "react-error-boundary": "^4.0.12",
-    "react-hook-form": "^7.50.1",
+    "react-error-boundary": "^4.0.13",
+    "react-hook-form": "^7.51.3",
     "react-international-phone": "^3.1.2",
-    "ufo": "^1.4.0",
+    "ufo": "^1.5.3",
     "use-bus": "^2.5.2",
     "validator": "^13.11.0"
   },
@@ -86,24 +86,24 @@
   },
   "devDependencies": {
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.227",
-    "@storybook/addon-essentials": "^7.6.13",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-links": "^7.6.13",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@blocklet/payment-types": "1.13.229",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/blocks": "^7.6.13",
-    "@storybook/react": "^7.6.13",
-    "@storybook/react-vite": "^7",
-    "@storybook/test": "^7.6.13",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-legacy": "^5.3.2",
-    "eslint": "^8.56.0",
-    "glob": "^10.3.10",
+    "eslint": "^8.57.0",
+    "glob": "^10.3.12",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
     "prettier": "^2.8.8",
@@ -111,13 +111,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "storybook": "^7.6.13",
+    "storybook": "^7.6.17",
     "ts-jest": "^29.1.2",
-    "type-fest": "^4.10.2",
+    "type-fest": "^4.15.0",
     "typescript": "^4.9.5",
     "unbuild": "^2.0.0",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "3e95c9ec26b62050424aca405a6f4199de9877d8"
+  "gitHead": "7def3178288871dff00ba89e16c5adcec6d4dfc9"
 }

package/src/components/blockchain/gas.tsx

@@ -0,0 +1,28 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { PaymentDetails, TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import { Typography } from '@mui/material';
+import { fromUnitToToken } from '@ocap/util';
+
+import { getTxLink } from '../../util';
+
+TxGas.defaultProps = {};
+
+export default function TxGas(props: { details: PaymentDetails; currency: TPaymentCurrency; method: TPaymentMethod }) {
+  const { t } = useLocaleContext();
+
+  const { gas } = getTxLink(props.method, props.details);
+
+  if (gas) {
+    return (
+      <Typography component="span">
+        {fromUnitToToken(gas, props.currency.decimal)} {props.currency.symbol} ({props.method.name})
+      </Typography>
+    );
+  }
+
+  return (
+    <Typography component="small" color="text.secondary">
+      {t('common.none')}
+    </Typography>
+  );
+}

package/src/components/blockchain/tx.tsx

@@ -26,7 +26,7 @@ export default function TxLink(props: {
     );
   }
 
-  const { text, link } = getTxLink(props.method, props.details);
+  const { text, link, gas } = getTxLink(props.method, props.details);
 
   if (link) {
     return (
@@ -39,6 +39,7 @@ export default function TxLink(props: {
           spacing={1}>
           <Typography component="span" color="primary">
             {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
+            {gas}
           </Typography>
           <OpenInNewOutlined fontSize="small" />
         </Stack>

package/src/index.ts

@@ -2,6 +2,7 @@ import api from './api';
 import CheckoutDonate from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
@@ -52,5 +53,6 @@ export {
   CustomerPaymentList,
   MiniInvoiceList,
   TxLink,
+  TxGas,
   SafeGuard,
 };

package/src/locales/en.tsx

@@ -40,6 +40,7 @@ export default flat({
     email: 'Email',
     did: 'DID',
     txHash: 'Transaction',
+    txGas: 'Transaction Gas',
     delegateTxHash: 'Delegate Transaction',
     stakeTxHash: 'Stake Transaction',
     slashTxHash: 'Slash Transaction',
@@ -169,6 +170,10 @@ export default flat({
         description:
           'This checkout session has completed. This means that your payment has already been successfully processed.',
       },
+      emptyItems: {
+        title: 'Nothing to show here',
+        description: 'Seems this checkoutSession is not configured properly',
+      },
     },
     customer: {
       payments: 'Payment History',

package/src/locales/zh.tsx

@@ -40,6 +40,7 @@ export default flat({
     email: '邮箱',
     did: 'DID',
     txHash: '交易哈希',
+    txGas: '交易费用',
     delegateTxHash: '授权交易',
     stakeTxHash: '质押交易',
     slashTxHash: '罚没交易',
@@ -166,6 +167,10 @@ export default flat({
         add: '添加到订单',
         remove: '从订单移除',
       },
+      emptyItems: {
+        title: '没有任何购买项目',
+        description: '可能这个付款链接没有正确配置',
+      },
     },
     customer: {
       payments: '支付历史',

package/src/payment/index.tsx

@@ -116,6 +116,16 @@ export default function Payment({
     );
   }
 
+  if (!checkoutSession.line_items.length) {
+    return (
+      <PaymentError
+        mode={mode}
+        title={t('payment.checkout.emptyItems.title')}
+        description={t('payment.checkout.emptyItems.description')}
+      />
+    );
+  }
+
   return (
     <PaymentInner
       checkoutSession={checkoutSession}

package/src/util.ts

@@ -742,18 +742,21 @@ export const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
     return {
       link: joinURL(method.settings.arcblock?.explorer_host as string, '/txs', details.arcblock?.tx_hash as string),
       text: details.arcblock?.tx_hash as string,
+      gas: '',
     };
   }
   if (method.type === 'bitcoin' && details.bitcoin?.tx_hash) {
     return {
       link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
       text: details.bitcoin?.tx_hash as string,
+      gas: '',
     };
   }
   if (method.type === 'ethereum' && details.ethereum?.tx_hash) {
     return {
       link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
-      text: details.ethereum?.tx_hash as string,
+      text: (details.ethereum?.tx_hash as string).toUpperCase(),
+      gas: new BN(details.ethereum.gas_price).mul(new BN(details.ethereum.gas_used)).toString(),
     };
   }
   if (method.type === 'stripe') {
@@ -765,8 +768,9 @@ export const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
         details.stripe?.payment_intent_id as string
       ),
       text: details.stripe?.payment_intent_id as string,
+      gas: '',
     };
   }
 
-  return { text: 'N/A', link: '' };
+  return { text: 'N/A', link: '', gas: '' };
 };