@blocklet/payment-react 1.22.9 → 1.22.11

package/es/locales/en.js

@@ -197,7 +197,8 @@ export default flat({
           processing: "Domain ({name}) registering",
           completed: "Domain ({name}) registered successfully",
           failed: "Domain ({name}) registered failed"
-        }
+        },
+        arcSphereToast: "Successfully installed, three seconds to return to the page continue..."
       },
       confirm: {
         withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",

package/es/locales/zh.js

@@ -197,7 +197,8 @@ export default flat({
           processing: "\u6B63\u5728\u6CE8\u518C {name}",
           completed: "\u6CE8\u518C {name} \u6210\u529F",
           failed: "\u6CE8\u518C {name} \u5931\u8D25"
-        }
+        },
+        arcSphereToast: "\u652F\u4ED8\u5E76\u5B89\u88C5\u6210\u529F\uFF0C\u4E09\u79D2\u540E\u8FD4\u56DE\u9875\u9762\u7EE7\u7EED..."
       },
       confirm: {
         withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",

package/es/payment/success.js

@@ -1,4 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import bridge from "@arcblock/bridge";
+import useArcblockBrowser from "@arcblock/react-hooks/lib/useBrowser";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Grow, Link, Paper, Stack, styled, Typography } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
@@ -24,6 +26,8 @@ export default function PaymentSuccess({
   const [isAllCompleted, setIsAllCompleted] = useState(false);
   const [hasFailed, setHasFailed] = useState(false);
   const timerRef = useRef(Date.now());
+  const browser = useArcblockBrowser();
+  const inArcsphere = browser?.arcSphere;
   let next = null;
   useEffect(() => {
     if (vendorCount === 0 || !sessionId) return void 0;
@@ -51,6 +55,19 @@ export default function PaymentSuccess({
     }, 5e3);
     return () => clearInterval(interval);
   }, [vendorCount, api, prefix, sessionId]);
+  useEffect(() => {
+    if (inArcsphere && isAllCompleted) {
+      try {
+        bridge?.call?.("arc__toast", { text: t("payment.checkout.vendor.arcSphereToast") });
+        const timer = setTimeout(() => {
+          bridge?.call?.("arcClosePage");
+        }, 3e3);
+        return () => clearTimeout(timer);
+      } catch (error) {
+      }
+    }
+    return void 0;
+  }, [isAllCompleted, t, locale, inArcsphere]);
   const renderPlaceholders = () => {
     const placeholders = [];
     for (let i = 0; i < vendorCount; i++) {

package/lib/locales/en.js

@@ -204,7 +204,8 @@ module.exports = (0, _flat.default)({
           processing: "Domain ({name}) registering",
           completed: "Domain ({name}) registered successfully",
           failed: "Domain ({name}) registered failed"
-        }
+        },
+        arcSphereToast: "Successfully installed, three seconds to return to the page continue..."
       },
       confirm: {
         withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",

package/lib/locales/zh.js

@@ -204,7 +204,8 @@ module.exports = (0, _flat.default)({
           processing: "\u6B63\u5728\u6CE8\u518C {name}",
           completed: "\u6CE8\u518C {name} \u6210\u529F",
           failed: "\u6CE8\u518C {name} \u5931\u8D25"
-        }
+        },
+        arcSphereToast: "\u652F\u4ED8\u5E76\u5B89\u88C5\u6210\u529F\uFF0C\u4E09\u79D2\u540E\u8FD4\u56DE\u9875\u9762\u7EE7\u7EED..."
       },
       confirm: {
         withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",

package/lib/payment/success.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 module.exports = PaymentSuccess;
 var _jsxRuntime = require("react/jsx-runtime");
+var _bridge = _interopRequireDefault(require("@arcblock/bridge"));
+var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _react = require("react");
@@ -12,6 +14,7 @@ var _ufo = require("ufo");
 var _ux = require("@arcblock/ux");
 var _payment = require("../contexts/payment");
 var _progressItem = require("./progress-item");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PaymentSuccess({
   mode,
   pageInfo = {},
@@ -36,6 +39,8 @@ function PaymentSuccess({
   const [isAllCompleted, setIsAllCompleted] = (0, _react.useState)(false);
   const [hasFailed, setHasFailed] = (0, _react.useState)(false);
   const timerRef = (0, _react.useRef)(Date.now());
+  const browser = (0, _useBrowser.default)();
+  const inArcsphere = browser?.arcSphere;
   let next = null;
   (0, _react.useEffect)(() => {
     if (vendorCount === 0 || !sessionId) return void 0;
@@ -61,6 +66,20 @@ function PaymentSuccess({
     }, 5e3);
     return () => clearInterval(interval);
   }, [vendorCount, api, prefix, sessionId]);
+  (0, _react.useEffect)(() => {
+    if (inArcsphere && isAllCompleted) {
+      try {
+        _bridge.default?.call?.("arc__toast", {
+          text: t("payment.checkout.vendor.arcSphereToast")
+        });
+        const timer = setTimeout(() => {
+          _bridge.default?.call?.("arcClosePage");
+        }, 3e3);
+        return () => clearTimeout(timer);
+      } catch (error) {}
+    }
+    return void 0;
+  }, [isAllCompleted, t, locale, inArcsphere]);
   const renderPlaceholders = () => {
     const placeholders = [];
     for (let i = 0; i < vendorCount; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.22.9",
+  "version": "1.22.11",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,7 +54,9 @@
     }
   },
   "dependencies": {
+    "@arcblock/bridge": "^3.2.2",
     "@arcblock/did-connect-react": "^3.2.1",
+    "@arcblock/react-hooks": "^3.2.1",
     "@arcblock/ux": "^3.2.1",
     "@arcblock/ws": "^1.27.3",
     "@blocklet/theme": "^3.2.1",
@@ -94,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.22.9",
+    "@blocklet/payment-types": "1.22.11",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "9614e353a90ac740da61b9f97db6456ee8a0279b"
+  "gitHead": "d90e964e8aba2c288fe2960365df20f4159a56a1"
 }

package/src/locales/en.tsx

@@ -202,6 +202,7 @@ export default flat({
           completed: 'Domain ({name}) registered successfully',
           failed: 'Domain ({name}) registered failed',
         },
+        arcSphereToast: 'Successfully installed, three seconds to return to the page continue...',
       },
       confirm: {
         withStake:

package/src/locales/zh.tsx

@@ -200,6 +200,7 @@ export default flat({
           completed: '注册 {name} 成功',
           failed: '注册 {name} 失败',
         },
+        arcSphereToast: '支付并安装成功，三秒后返回页面继续...',
       },
       confirm: {
         withStake:

package/src/payment/success.tsx

@@ -1,3 +1,5 @@
+import bridge from '@arcblock/bridge';
+import useArcblockBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Grow, Link, Paper, Stack, styled, Typography } from '@mui/material';
 import { useEffect, useRef, useState } from 'react';
@@ -57,6 +59,9 @@ export default function PaymentSuccess({
   const [isAllCompleted, setIsAllCompleted] = useState(false);
   const [hasFailed, setHasFailed] = useState(false);
   const timerRef = useRef(Date.now());
+  const browser = useArcblockBrowser();
+  const inArcsphere = browser?.arcSphere;
+
   let next: any = null;
 
   // Fetch vendor status when vendorCount > 0
@@ -94,6 +99,21 @@ export default function PaymentSuccess({
     return () => clearInterval(interval);
   }, [vendorCount, api, prefix, sessionId]);
 
+  useEffect(() => {
+    if (inArcsphere && isAllCompleted) {
+      try {
+        bridge?.call?.('arc__toast', { text: t('payment.checkout.vendor.arcSphereToast') });
+        const timer = setTimeout(() => {
+          bridge?.call?.('arcClosePage');
+        }, 3000);
+        return () => clearTimeout(timer);
+      } catch (error) {
+        //
+      }
+    }
+    return undefined;
+  }, [isAllCompleted, t, locale, inArcsphere]);
+
   const renderPlaceholders = () => {
     const placeholders = [];
     for (let i = 0; i < vendorCount; i++) {
@@ -101,7 +121,6 @@ export default function PaymentSuccess({
     }
     return placeholders;
   };
-
   const renderVendors = () => {
     if (!vendorStatus) return renderPlaceholders();
     return vendorStatus.vendors?.map((vendor, index) => {