@blocklet/payment-react 1.17.4 → 1.17.6

package/es/components/over-due-invoice-payment.js

@@ -75,7 +75,7 @@ function OverdueInvoicePayment({
     }
     setSelectCurrencyId(currency.id);
     setPayLoading(true);
-    if (method.type === "arcblock" || method.type === "ethereum") {
+    if (["arcblock", "ethereum", "base"].includes(method.type)) {
       connect.open({
         containerEl: void 0,
         saveConnect: false,

package/es/contexts/payment.d.ts

@@ -12,7 +12,7 @@ export type PaymentContextType = {
     connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     prefix: string;
     settings: Settings;
-    refresh: () => void;
+    refresh: (forceRefresh?: boolean) => void;
     getCurrency: (currencyId: string) => TPaymentCurrency | undefined;
     getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
     setLivemode: (livemode: boolean) => void;

package/es/contexts/payment.js

@@ -7,11 +7,11 @@ import { getPrefix } from "../libs/util.js";
 const PaymentContext = createContext({ api });
 const { Provider, Consumer } = PaymentContext;
 let settingsPromise = null;
-const getSettings = () => {
+const getSettings = (forceRefresh = false) => {
   const livemode = localStorage.getItem("livemode") !== "false";
   const cacheKey = `payment-settings-${window.location.pathname}-${livemode}`;
   const cachedData = sessionStorage.getItem(cacheKey);
-  if (cachedData) {
+  if (cachedData && !forceRefresh) {
     return JSON.parse(cachedData);
   }
   if (!settingsPromise) {

package/es/history/payment/list.js

@@ -70,7 +70,7 @@ export default function CustomerPaymentList({ customer_id }) {
             ] }) }),
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) }) }),
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 3, sx: { minWidth: "220px" }, children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" }) })
+            /* @__PURE__ */ jsx(Box, { flex: 3, sx: { minWidth: "220px" }, children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" }) })
           ]
         },
         item.id

package/es/libs/util.js

@@ -702,6 +702,13 @@ export const getTxLink = (method, details) => {
       gas: new BN(details.ethereum.gas_price).mul(new BN(details.ethereum.gas_used)).toString()
     };
   }
+  if (method.type === "base" && details.base?.tx_hash) {
+    return {
+      link: joinURL(method.settings.base?.explorer_host, "/tx", details.base?.tx_hash),
+      text: (details.base?.tx_hash).toUpperCase(),
+      gas: ""
+    };
+  }
   if (method.type === "stripe") {
     const dashboard = method.livemode ? "https://dashboard.stripe.com" : "https://dashboard.stripe.com/test";
     return {
@@ -855,7 +862,7 @@ export function getCustomerAvatar(did, updated_at, imageSize = 48) {
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || dayjs().unix()}`;
 }
 export function hasDelegateTxHash(details, paymentMethod) {
-  return paymentMethod?.type && ["arcblock", "ethereum"].includes(paymentMethod?.type) && // @ts-ignore
+  return paymentMethod?.type && ["arcblock", "ethereum", "base"].includes(paymentMethod?.type) && // @ts-ignore
   details?.[paymentMethod?.type]?.tx_hash;
 }
 export function getInvoiceDescriptionAndReason(invoice, locale = "en") {

package/es/payment/form/index.js

@@ -226,7 +226,7 @@ export default function PaymentForm({
         submitting: false,
         customerLimited: false
       });
-      if (["arcblock", "ethereum"].includes(method.type)) {
+      if (["arcblock", "ethereum", "base"].includes(method.type)) {
         setState({ paying: true });
         if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
           await handleConnected();

package/lib/components/over-due-invoice-payment.js

@@ -93,7 +93,7 @@ function OverdueInvoicePayment({
     }
     setSelectCurrencyId(currency.id);
     setPayLoading(true);
-    if (method.type === "arcblock" || method.type === "ethereum") {
+    if (["arcblock", "ethereum", "base"].includes(method.type)) {
       connect.open({
         containerEl: void 0,
         saveConnect: false,

package/lib/contexts/payment.d.ts

@@ -12,7 +12,7 @@ export type PaymentContextType = {
     connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     prefix: string;
     settings: Settings;
-    refresh: () => void;
+    refresh: (forceRefresh?: boolean) => void;
     getCurrency: (currencyId: string) => TPaymentCurrency | undefined;
     getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
     setLivemode: (livemode: boolean) => void;

package/lib/contexts/payment.js

@@ -23,11 +23,11 @@ const {
 } = PaymentContext;
 exports.SettingsConsumer = Consumer;
 let settingsPromise = null;
-const getSettings = () => {
+const getSettings = (forceRefresh = false) => {
   const livemode = localStorage.getItem("livemode") !== "false";
   const cacheKey = `payment-settings-${window.location.pathname}-${livemode}`;
   const cachedData = sessionStorage.getItem(cacheKey);
-  if (cachedData) {
+  if (cachedData && !forceRefresh) {
     return JSON.parse(cachedData);
   }
   if (!settingsPromise) {

package/lib/history/payment/list.js

@@ -120,7 +120,7 @@ function CustomerPaymentList({
           sx: {
             minWidth: "220px"
           },
-          children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
+          children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
             details: item.payment_details,
             method: item.paymentMethod,
             mode: "customer"

package/lib/libs/util.js

@@ -870,6 +870,13 @@ const getTxLink = (method, details) => {
       gas: new _util.BN(details.ethereum.gas_price).mul(new _util.BN(details.ethereum.gas_used)).toString()
     };
   }
+  if (method.type === "base" && details.base?.tx_hash) {
+    return {
+      link: (0, _ufo.joinURL)(method.settings.base?.explorer_host, "/tx", details.base?.tx_hash),
+      text: (details.base?.tx_hash).toUpperCase(),
+      gas: ""
+    };
+  }
   if (method.type === "stripe") {
     const dashboard = method.livemode ? "https://dashboard.stripe.com" : "https://dashboard.stripe.com/test";
     return {
@@ -1038,7 +1045,7 @@ function getCustomerAvatar(did, updated_at, imageSize = 48) {
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || (0, _dayjs.default)().unix()}`;
 }
 function hasDelegateTxHash(details, paymentMethod) {
-  return paymentMethod?.type && ["arcblock", "ethereum"].includes(paymentMethod?.type) &&
+  return paymentMethod?.type && ["arcblock", "ethereum", "base"].includes(paymentMethod?.type) &&
   // @ts-ignore
   details?.[paymentMethod?.type]?.tx_hash;
 }

package/lib/payment/form/index.js

@@ -258,7 +258,7 @@ function PaymentForm({
         submitting: false,
         customerLimited: false
       });
-      if (["arcblock", "ethereum"].includes(method.type)) {
+      if (["arcblock", "ethereum", "base"].includes(method.type)) {
         setState({
           paying: true
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.17.4",
+  "version": "1.17.6",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -53,15 +53,15 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.11.23",
-    "@arcblock/ux": "^2.11.23",
-    "@arcblock/ws": "^1.19.2",
-    "@blocklet/ui-react": "^2.11.23",
+    "@arcblock/did-connect": "^2.11.27",
+    "@arcblock/ux": "^2.11.27",
+    "@arcblock/ws": "^1.19.3",
+    "@blocklet/ui-react": "^2.11.27",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.19.2",
+    "@ocap/util": "^1.19.3",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.17.4",
+    "@blocklet/payment-types": "1.17.6",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "2d25cbcf146ba2195b1c3434ab3f64566f851893"
+  "gitHead": "50e93ab4340be53c9d9bd18718c6db26048578c5"
 }

package/src/components/over-due-invoice-payment.tsx

@@ -114,7 +114,7 @@ function OverdueInvoicePayment({
     }
     setSelectCurrencyId(currency.id);
     setPayLoading(true);
-    if (method.type === 'arcblock' || method.type === 'ethereum') {
+    if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
       connect.open({
         containerEl: undefined as unknown as Element,
         saveConnect: false,

package/src/contexts/payment.tsx

@@ -18,7 +18,7 @@ export type PaymentContextType = {
   connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
   prefix: string;
   settings: Settings;
-  refresh: () => void;
+  refresh: (forceRefresh?: boolean) => void;
   getCurrency: (currencyId: string) => TPaymentCurrency | undefined;
   getMethod: (methodId: string) => TPaymentMethodExpanded | undefined;
   setLivemode: (livemode: boolean) => void;
@@ -40,11 +40,11 @@ const PaymentContext = createContext<PaymentContextType>({ api });
 const { Provider, Consumer } = PaymentContext;
 
 let settingsPromise: Promise<any> | null = null;
-const getSettings = () => {
+const getSettings = (forceRefresh = false) => {
   const livemode = localStorage.getItem('livemode') !== 'false';
   const cacheKey = `payment-settings-${window.location.pathname}-${livemode}`;
   const cachedData = sessionStorage.getItem(cacheKey);
-  if (cachedData) {
+  if (cachedData && !forceRefresh) {
     return JSON.parse(cachedData);
   }
   if (!settingsPromise) {

package/src/history/payment/list.tsx

@@ -95,7 +95,9 @@ export default function CustomerPaymentList({ customer_id }: Props) {
                 <Typography>{item.description || '-'}</Typography>
               </Box>
               <Box flex={3} sx={{ minWidth: '220px' }}>
-                {(item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash) && (
+                {(item.payment_details?.arcblock?.tx_hash ||
+                  item.payment_details?.ethereum?.tx_hash ||
+                  item.payment_details?.base?.tx_hash) && (
                   <TxLink details={item.payment_details} method={item.paymentMethod} mode="customer" />
                 )}
               </Box>

package/src/libs/util.ts

@@ -923,6 +923,13 @@ export const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
       gas: new BN(details.ethereum.gas_price).mul(new BN(details.ethereum.gas_used)).toString(),
     };
   }
+  if (method.type === 'base' && details.base?.tx_hash) {
+    return {
+      link: joinURL(method.settings.base?.explorer_host as string, '/tx', details.base?.tx_hash as string),
+      text: (details.base?.tx_hash as string).toUpperCase(),
+      gas: '',
+    };
+  }
   if (method.type === 'stripe') {
     const dashboard = method.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test';
     return {
@@ -1109,7 +1116,7 @@ export function getCustomerAvatar(
 export function hasDelegateTxHash(details: PaymentDetails, paymentMethod: TPaymentMethod) {
   return (
     paymentMethod?.type &&
-    ['arcblock', 'ethereum'].includes(paymentMethod?.type) &&
+    ['arcblock', 'ethereum', 'base'].includes(paymentMethod?.type) &&
     // @ts-ignore
     details?.[paymentMethod?.type]?.tx_hash
   );

package/src/payment/form/index.tsx

@@ -300,7 +300,7 @@ export default function PaymentForm({
         customerLimited: false,
       });
 
-      if (['arcblock', 'ethereum'].includes(method.type)) {
+      if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
         setState({ paying: true });
         if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
           await handleConnected();