@blocklet/payment-react 1.13.236 → 1.13.237

package/es/checkout/donate.d.ts

@@ -11,7 +11,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
 };
-declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element;
+declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;

package/es/checkout/donate.js

@@ -7,7 +7,6 @@ import {
   AvatarGroup,
   Box,
   Button,
-  CircularProgress,
   Hidden,
   Stack,
   Table,
@@ -147,7 +146,7 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError })
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(donation.error) });
   }
   if (donation.loading || !donation.data) {
-    return /* @__PURE__ */ jsx(CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */ jsxs(
     Box,

package/es/contexts/payment.d.ts

@@ -24,7 +24,7 @@ declare function PaymentProvider({ children, session, connect }: {
     children: any;
     session: any;
     connect: any;
-}): JSX.Element;
+}): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/es/contexts/payment.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Alert, CircularProgress } from "@mui/material";
+import { Alert } from "@mui/material";
 import { useLocalStorageState, useRequest } from "ahooks";
 import { createContext, useContext } from "react";
 import api from "../api.js";
@@ -22,7 +22,7 @@ function PaymentProvider({ children, session, connect }) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */ jsx(
     Provider,

package/es/payment/form/index.js

@@ -39,6 +39,10 @@ const waitForCheckoutComplete = async (sessionId) => {
   );
   return result;
 };
+const hasDidWallet = (user) => {
+  const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+  return connected.some((x) => x.provider === "wallet");
+};
 PaymentForm.defaultProps = {};
 export default function PaymentForm({
   checkoutSession,
@@ -213,19 +217,38 @@ export default function PaymentForm({
       setState({ submitting: false });
     }
   };
-  const onFormError = () => {
+  const onFormError = (err) => {
+    if (err) {
+      console.error(err);
+    }
     setState({ submitting: false });
   };
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onFormSubmit, onFormError)();
+      if (hasDidWallet(session.user)) {
+        handleSubmit(onFormSubmit, onFormError)();
+      } else {
+        session.bindWallet(() => {
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 2e3);
+        });
+      }
     } else {
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn().then(() => {
-          setTimeout(() => {
-            handleSubmit(onFormSubmit, onFormError)();
-          }, 50);
+          if (hasDidWallet(session.user)) {
+            setTimeout(() => {
+              handleSubmit(onFormSubmit, onFormError)();
+            }, 80);
+          } else {
+            session.bindWallet(() => {
+              setTimeout(() => {
+                handleSubmit(onFormSubmit, onFormError)();
+              }, 2e3);
+            });
+          }
         }).catch((err) => {
           console.error(err);
           setState({ submitting: false });

package/lib/checkout/donate.d.ts

@@ -11,7 +11,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
 };
-declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element;
+declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;

package/lib/checkout/donate.js

@@ -225,7 +225,7 @@ function CheckoutDonate({
     });
   }
   if (donation.loading || !donation.data) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {

package/lib/contexts/payment.d.ts

@@ -24,7 +24,7 @@ declare function PaymentProvider({ children, session, connect }: {
     children: any;
     session: any;
     connect: any;
-}): JSX.Element;
+}): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/lib/contexts/payment.js

@@ -54,7 +54,7 @@ function PaymentProvider({
     });
   }
   if (loading) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
     value: {

package/lib/payment/form/index.js

@@ -48,6 +48,10 @@ const waitForCheckoutComplete = async sessionId => {
   });
   return result;
 };
+const hasDidWallet = user => {
+  const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+  return connected.some(x => x.provider === "wallet");
+};
 PaymentForm.defaultProps = {};
 function PaymentForm({
   checkoutSession,
@@ -264,23 +268,42 @@ function PaymentForm({
       });
     }
   };
-  const onFormError = () => {
+  const onFormError = err => {
+    if (err) {
+      console.error(err);
+    }
     setState({
       submitting: false
     });
   };
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onFormSubmit, onFormError)();
+      if (hasDidWallet(session.user)) {
+        handleSubmit(onFormSubmit, onFormError)();
+      } else {
+        session.bindWallet(() => {
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 2e3);
+        });
+      }
     } else {
       session?.login(() => {
         setState({
           submitting: true
         });
         onUserLoggedIn().then(() => {
-          setTimeout(() => {
-            handleSubmit(onFormSubmit, onFormError)();
-          }, 50);
+          if (hasDidWallet(session.user)) {
+            setTimeout(() => {
+              handleSubmit(onFormSubmit, onFormError)();
+            }, 80);
+          } else {
+            session.bindWallet(() => {
+              setTimeout(() => {
+                handleSubmit(onFormSubmit, onFormError)();
+              }, 2e3);
+            });
+          }
         }).catch(err => {
           console.error(err);
           setState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.236",
+  "version": "1.13.237",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,8 +52,8 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.71",
-    "@arcblock/ux": "^2.9.71",
+    "@arcblock/did-connect": "^2.9.75",
+    "@arcblock/ux": "^2.9.75",
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.15",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.236",
+    "@blocklet/payment-types": "1.13.237",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "458c748371a1dac07c0aa9039fb71f6fcbb68e14"
+  "gitHead": "895430a130d53b62707f4f78c5295b06ce55d4db"
 }

package/src/checkout/donate.tsx

@@ -14,7 +14,6 @@ import {
   AvatarGroup,
   Box,
   Button,
-  CircularProgress,
   Hidden,
   Stack,
   Table,
@@ -206,7 +205,7 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError }:
   }
 
   if (donation.loading || !donation.data) {
-    return <CircularProgress />;
+    return null;
   }
 
   return (

package/src/contexts/payment.tsx

@@ -1,5 +1,5 @@
 import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { Alert, CircularProgress } from '@mui/material';
+import { Alert } from '@mui/material';
 import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
 import { createContext, useContext } from 'react';
@@ -41,7 +41,7 @@ const getCurrency = (currencyId: string, methods: TPaymentMethodExpanded[]) => {
 };
 
 // eslint-disable-next-line react/prop-types
-function PaymentProvider({ children, session, connect }: { children: any; session: any; connect: any }): JSX.Element {
+function PaymentProvider({ children, session, connect }: { children: any; session: any; connect: any }) {
   const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
 
@@ -50,7 +50,7 @@ function PaymentProvider({ children, session, connect }: { children: any; sessio
   }
 
   if (loading) {
-    return <CircularProgress />;
+    return null;
   }
 
   return (

package/src/payment/form/index.tsx

@@ -57,6 +57,11 @@ const waitForCheckoutComplete = async (sessionId: string) => {
   return result;
 };
 
+const hasDidWallet = (user: any) => {
+  const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+  return connected.some((x: any) => x.provider === 'wallet');
+};
+
 type PageData = CheckoutContext & CheckoutCallbacks;
 
 PaymentForm.defaultProps = {};
@@ -219,7 +224,6 @@ export default function PaymentForm({
         if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
           await handleConnected();
         } else {
-          // @FIXME: 需要考虑如何正确地适配前端组件的使用 @wangshijun
           connect.open({
             containerEl: undefined as unknown as Element,
             action: checkoutSession.mode,
@@ -267,21 +271,42 @@ export default function PaymentForm({
     }
   };
 
-  const onFormError = () => {
+  const onFormError = (err: unknown) => {
+    if (err) {
+      console.error(err);
+    }
     setState({ submitting: false });
   };
 
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onFormSubmit, onFormError)();
+      if (hasDidWallet(session.user)) {
+        handleSubmit(onFormSubmit, onFormError)();
+      } else {
+        session.bindWallet(() => {
+          // timeout required because https://github.com/ArcBlock/ux/issues/1241
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 2000);
+        });
+      }
     } else {
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn()
           .then(() => {
-            setTimeout(() => {
-              handleSubmit(onFormSubmit, onFormError)();
-            }, 50);
+            if (hasDidWallet(session.user)) {
+              setTimeout(() => {
+                handleSubmit(onFormSubmit, onFormError)();
+              }, 80);
+            } else {
+              session.bindWallet(() => {
+                // timeout required because https://github.com/ArcBlock/ux/issues/1241
+                setTimeout(() => {
+                  handleSubmit(onFormSubmit, onFormError)();
+                }, 2000);
+              });
+            }
           })
           .catch((err) => {
             console.error(err);