@blocklet/payment-react 1.13.236 → 1.13.238

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

@@ -5,7 +5,7 @@ import { useTheme } from "@arcblock/ux/lib/Theme";
 import Toast from "@arcblock/ux/lib/Toast";
 import { LoadingButton } from "@mui/lab";
 import { Fade, InputAdornment, Stack, Typography } from "@mui/material";
-import { useCreation, useSetState, useSize } from "ahooks";
+import { useCreation, useMemoizedFn, useSetState, useSize } from "ahooks";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
 import { useEffect, useState } from "react";
@@ -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,
@@ -95,6 +99,17 @@ export default function PaymentForm({
     }
     return false;
   }, [domSize, theme]);
+  const afterUserLoggedIn = useMemoizedFn(() => {
+    if (hasDidWallet(session.user)) {
+      handleSubmit(onFormSubmit, onFormError)();
+    } else {
+      session.bindWallet(() => {
+        setTimeout(() => {
+          handleSubmit(onFormSubmit, onFormError)();
+        }, 2e3);
+      });
+    }
+  });
   const payee = getStatementDescriptor(checkoutSession.line_items);
   let buttonText = "";
   if (paymentLink?.donation_settings) {
@@ -213,20 +228,27 @@ 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);
-        }).catch((err) => {
+        onUserLoggedIn().then(afterUserLoggedIn).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,
@@ -117,6 +121,17 @@ function PaymentForm({
     }
     return false;
   }, [domSize, theme]);
+  const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
+    if (hasDidWallet(session.user)) {
+      handleSubmit(onFormSubmit, onFormError)();
+    } else {
+      session.bindWallet(() => {
+        setTimeout(() => {
+          handleSubmit(onFormSubmit, onFormError)();
+        }, 2e3);
+      });
+    }
+  });
   const payee = (0, _util.getStatementDescriptor)(checkoutSession.line_items);
   let buttonText = "";
   if (paymentLink?.donation_settings) {
@@ -264,24 +279,31 @@ 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);
-        }).catch(err => {
+        onUserLoggedIn().then(afterUserLoggedIn).catch(err => {
           console.error(err);
           setState({
             submitting: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.236",
+  "version": "1.13.238",
   "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.238",
     "@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": "3476a64bdb10cf042551f55f087c5e1b30717894"
 }

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

@@ -6,7 +6,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import type { TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
 import { Fade, InputAdornment, Stack, Typography } from '@mui/material';
-import { useCreation, useSetState, useSize } from 'ahooks';
+import { useCreation, useMemoizedFn, useSetState, useSize } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useState } from 'react';
@@ -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 = {};
@@ -141,6 +146,19 @@ export default function PaymentForm({
     return false;
   }, [domSize, theme]);
 
+  const afterUserLoggedIn = useMemoizedFn(() => {
+    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);
+      });
+    }
+  });
+
   const payee = getStatementDescriptor(checkoutSession.line_items);
   let buttonText = '';
   if (paymentLink?.donation_settings) {
@@ -219,7 +237,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,22 +284,30 @@ 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);
-          })
+          .then(afterUserLoggedIn)
           .catch((err) => {
             console.error(err);
             setState({ submitting: false });