npm - @blocklet/payment-react - Versions diffs - 1.19.20 → 1.19.22 - Mend

@blocklet/payment-react 1.19.20 → 1.19.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/es/components/auto-topup/index.js +176 -96
package/lib/components/auto-topup/index.js +55 -18
package/package.json +7 -7
package/src/components/auto-topup/index.tsx +71 -16

package/es/components/auto-topup/index.js CHANGED Viewed

@@ -22,6 +22,7 @@ import { createLink, handleNavigation } from "../../libs/navigation.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import api from "../../libs/api.js";
 import AutoTopupModal from "./modal.js";
+import { useMobile } from "../../hooks/mobile.js";
 const fetchConfig = async (customerId, currencyId) => {
   const { data } = await api.get(`/api/auto-recharge-configs/customer/${customerId}`, {
     params: { currency_id: currencyId }
@@ -59,6 +60,7 @@ export default function AutoTopupCard({
   const [quickSetupMode, setQuickSetupMode] = useState(false);
   const [expanded, setExpanded] = useState(mode === "default");
   const customerId = session?.user?.did || "";
+  const { isMobile } = useMobile();
   const {
     data: config,
     loading,
@@ -132,119 +134,197 @@ export default function AutoTopupCard({
     if (config?.paymentMethod?.type === "stripe") {
       const cardBrand = (paymentInfo?.card_brand || "Card").charAt(0).toUpperCase() + (paymentInfo?.card_brand || "Card").slice(1).toLowerCase();
       const last4 = paymentInfo?.card_last4;
-      return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              variant: "body2",
-              sx: {
-                color: "text.secondary"
-              },
-              children: [
-                t("payment.autoTopup.purchaseAmount"),
-                "\uFF1A"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              variant: "body2",
-              sx: {
-                color: "text.secondary"
-              },
-              children: [
-                t("payment.autoTopup.paymentMethod"),
-                "\uFF1A"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Stack,
-            {
-              direction: "row",
-              spacing: 1,
-              sx: {
-                alignItems: "center"
-              },
-              children: [
-                /* @__PURE__ */ jsx(CreditCard, { fontSize: "small", sx: { color: "text.secondary" } }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 500 }, children: [
-                  cardBrand,
-                  "(",
-                  last4,
-                  ")"
-                ] })
-              ]
-            }
-          )
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+      return /* @__PURE__ */ jsxs(Stack, { spacing: 1, className: "auto-topup-method-info", children: [
         /* @__PURE__ */ jsxs(
-          Typography,
+          Box,
           {
-            variant: "body2",
             sx: {
-              color: "text.secondary"
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5,
+              justifyContent: {
+                xs: "space-between",
+                sm: "flex-start"
+              }
             },
             children: [
-              t("payment.autoTopup.purchaseAmount"),
-              "\uFF1A"
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    color: "text.secondary"
+                  },
+                  children: [
+                    t("payment.autoTopup.purchaseAmount"),
+                    "\uFF1A"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
-      ] }),
-      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
         /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            variant: "body2",
-            sx: {
-              color: "text.secondary"
-            },
-            children: [
-              t("payment.autoTopup.walletBalance"),
-              "\uFF1A"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            title: paymentInfo?.payer ? `${t("payment.autoTopup.paymentAddress")}: ${paymentInfo.payer}` : "",
-            placement: "top",
-            children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-              /* @__PURE__ */ jsx(AccountBalanceWalletOutlined, { sx: { fontSize: 16, color: "text.secondary" } }),
-              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: balanceInfo ? `${formatBNStr(balanceInfo?.token || "0", config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ""}` : "--" })
-            ] })
-          }
-        ),
-        balanceInfo && /* @__PURE__ */ jsxs(
-          Button,
+          Box,
           {
-            size: "small",
-            variant: "text",
-            onClick: handleRecharge,
             sx: {
-              color: "primary.main",
               display: "flex",
-              alignItems: "center"
+              alignItems: "center",
+              gap: 0.5,
+              justifyContent: {
+                xs: "space-between",
+                sm: "flex-start"
+              }
             },
             children: [
-              /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }),
-              t("payment.autoTopup.addFunds")
+              /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    color: "text.secondary"
+                  },
+                  children: [
+                    t("payment.autoTopup.paymentMethod"),
+                    "\uFF1A"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  spacing: 1,
+                  sx: {
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(CreditCard, { fontSize: "small", sx: { color: "text.secondary" } }),
+                    /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 500 }, children: [
+                      cardBrand,
+                      "(",
+                      last4,
+                      ")"
+                    ] })
+                  ]
+                }
+              )
             ]
           }
         )
-      ] }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Stack, { spacing: 1, className: "auto-topup-method-info", children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5,
+            justifyContent: {
+              xs: "space-between",
+              sm: "flex-start"
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                sx: {
+                  color: "text.secondary"
+                },
+                children: [
+                  t("payment.autoTopup.purchaseAmount"),
+                  "\uFF1A"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: {
+              xs: "space-between",
+              sm: "flex-start"
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                sx: {
+                  color: "text.secondary",
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  t("payment.autoTopup.walletBalance"),
+                  "\uFF1A"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  title: paymentInfo?.payer ? `${t("payment.autoTopup.paymentAddress")}: ${paymentInfo.payer}` : "",
+                  placement: "top",
+                  children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    /* @__PURE__ */ jsx(AccountBalanceWalletOutlined, { sx: { fontSize: 16, color: "text.secondary" } }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: balanceInfo ? `${formatBNStr(balanceInfo?.token || "0", config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ""}` : "--" })
+                  ] })
+                }
+              ),
+              balanceInfo && !isMobile && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "small",
+                  variant: "text",
+                  onClick: handleRecharge,
+                  className: "auto-topup-add-funds-button",
+                  sx: {
+                    color: "primary.main",
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }),
+                    t("payment.autoTopup.addFunds")
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      balanceInfo && isMobile && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "small",
+          variant: "text",
+          onClick: handleRecharge,
+          className: "auto-topup-add-funds-button",
+          sx: {
+            color: "primary.main",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end"
+          },
+          children: [
+            /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }),
+            t("payment.autoTopup.addFunds")
+          ]
+        }
+      )
     ] });
   };
   const openModal = () => setModalOpen(true);

package/lib/components/auto-topup/index.js CHANGED Viewed

@@ -17,6 +17,7 @@ var _navigation = require("../../libs/navigation");
 var _payment = require("../../contexts/payment");
 var _api = _interopRequireDefault(require("../../libs/api"));
 var _modal = _interopRequireDefault(require("./modal"));
+var _mobile = require("../../hooks/mobile");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const fetchConfig = async (customerId, currencyId) => {
   const {
@@ -67,6 +68,9 @@ function AutoTopupCard({
   const [quickSetupMode, setQuickSetupMode] = (0, _react.useState)(false);
   const [expanded, setExpanded] = (0, _react.useState)(mode === "default");
   const customerId = session?.user?.did || "";
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
   const {
     data: config,
     loading,
@@ -151,11 +155,16 @@ function AutoTopupCard({
       const last4 = paymentInfo?.card_last4;
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 1,
+        className: "auto-topup-method-info",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
           sx: {
             display: "flex",
             alignItems: "center",
-            gap: 0.5
+            gap: 0.5,
+            justifyContent: {
+              xs: "space-between",
+              sm: "flex-start"
+            }
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             variant: "body2",
@@ -175,7 +184,11 @@ function AutoTopupCard({
           sx: {
             display: "flex",
             alignItems: "center",
-            gap: 0.5
+            gap: 0.5,
+            justifyContent: {
+              xs: "space-between",
+              sm: "flex-start"
+            }
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             variant: "body2",
@@ -208,11 +221,16 @@ function AutoTopupCard({
     }
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       spacing: 1,
+      className: "auto-topup-method-info",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
           display: "flex",
           alignItems: "center",
-          gap: 0.5
+          gap: 0.5,
+          justifyContent: {
+            xs: "space-between",
+            sm: "flex-start"
+          }
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
           variant: "body2",
@@ -228,25 +246,29 @@ function AutoTopupCard({
           },
           children: purchaseAmount
         })]
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
           display: "flex",
           alignItems: "center",
-          justifyContent: "space-between"
+          justifyContent: {
+            xs: "space-between",
+            sm: "flex-start"
+          }
         },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          variant: "body2",
           sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: 0.5
+            color: "text.secondary",
+            whiteSpace: "nowrap"
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            variant: "body2",
-            sx: {
-              color: "text.secondary"
-            },
-            children: [t("payment.autoTopup.walletBalance"), "\uFF1A"]
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          children: [t("payment.autoTopup.walletBalance"), "\uFF1A"]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
             title: paymentInfo?.payer ? `${t("payment.autoTopup.paymentAddress")}: ${paymentInfo.payer}` : "",
             placement: "top",
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -269,10 +291,11 @@ function AutoTopupCard({
                 children: balanceInfo ? `${(0, _util.formatBNStr)(balanceInfo?.token || "0", config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ""}` : "--"
               })]
             })
-          }), balanceInfo && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+          }), balanceInfo && !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
             size: "small",
             variant: "text",
             onClick: handleRecharge,
+            className: "auto-topup-add-funds-button",
             sx: {
               color: "primary.main",
               display: "flex",
@@ -282,7 +305,21 @@ function AutoTopupCard({
               fontSize: "small"
             }), t("payment.autoTopup.addFunds")]
           })]
-        })
+        })]
+      }), balanceInfo && isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+        size: "small",
+        variant: "text",
+        onClick: handleRecharge,
+        className: "auto-topup-add-funds-button",
+        sx: {
+          color: "primary.main",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.AddOutlined, {
+          fontSize: "small"
+        }), t("payment.autoTopup.addFunds")]
       })]
     });
   };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.20",
+  "version": "1.19.22",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,11 +54,11 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect-react": "^3.1.31",
-    "@arcblock/ux": "^3.1.31",
+    "@arcblock/did-connect-react": "^3.1.32",
+    "@arcblock/ux": "^3.1.32",
     "@arcblock/ws": "^1.23.1",
-    "@blocklet/theme": "^3.1.31",
-    "@blocklet/ui-react": "^3.1.31",
+    "@blocklet/theme": "^3.1.32",
+    "@blocklet/ui-react": "^3.1.32",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.19.20",
+    "@blocklet/payment-types": "1.19.22",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "4e09a5936748fc15c1ab6ea90b741b3e44f5eab7"
+  "gitHead": "53d092fa1c88542b297c6333b810ba29751eef19"
 }

package/src/components/auto-topup/index.tsx CHANGED Viewed

@@ -27,6 +27,7 @@ import { createLink, handleNavigation } from '../../libs/navigation';
 import { usePaymentContext } from '../../contexts/payment';
 import api from '../../libs/api';
 import AutoTopupModal from './modal';
+import { useMobile } from '../../hooks/mobile';
 export interface AutoTopupCardProps {
   currencyId: string;
@@ -84,6 +85,7 @@ export default function AutoTopupCard({
   const [expanded, setExpanded] = useState(mode === 'default');
   const customerId = session?.user?.did || '';
+  const { isMobile } = useMobile();
   const {
     data: config,
@@ -184,8 +186,17 @@ export default function AutoTopupCard({
       const last4 = paymentInfo?.card_last4;
       return (
-        <Stack spacing={1}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <Stack spacing={1} className="auto-topup-method-info">
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+              justifyContent: {
+                xs: 'space-between',
+                sm: 'flex-start',
+              },
+            }}>
             <Typography
               variant="body2"
               sx={{
@@ -197,7 +208,16 @@ export default function AutoTopupCard({
               {purchaseAmount}
             </Typography>
           </Box>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+              justifyContent: {
+                xs: 'space-between',
+                sm: 'flex-start',
+              },
+            }}>
             <Typography
               variant="body2"
               sx={{
@@ -222,8 +242,17 @@ export default function AutoTopupCard({
     }
     return (
-      <Stack spacing={1}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+      <Stack spacing={1} className="auto-topup-method-info">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            justifyContent: {
+              xs: 'space-between',
+              sm: 'flex-start',
+            },
+          }}>
           <Typography
             variant="body2"
             sx={{
@@ -235,15 +264,24 @@ export default function AutoTopupCard({
             {purchaseAmount}
           </Typography>
         </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-            <Typography
-              variant="body2"
-              sx={{
-                color: 'text.secondary',
-              }}>
-              {t('payment.autoTopup.walletBalance')}：
-            </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: {
+              xs: 'space-between',
+              sm: 'flex-start',
+            },
+          }}>
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+              whiteSpace: 'nowrap',
+            }}>
+            {t('payment.autoTopup.walletBalance')}：
+          </Typography>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <Tooltip
               title={paymentInfo?.payer ? `${t('payment.autoTopup.paymentAddress')}: ${paymentInfo.payer}` : ''}
               placement="top">
@@ -256,11 +294,12 @@ export default function AutoTopupCard({
                 </Typography>
               </Box>
             </Tooltip>
-            {balanceInfo && (
+            {balanceInfo && !isMobile && (
               <Button
                 size="small"
                 variant="text"
                 onClick={handleRecharge}
+                className="auto-topup-add-funds-button"
                 sx={{
                   color: 'primary.main',
                   display: 'flex',
@@ -270,8 +309,24 @@ export default function AutoTopupCard({
                 {t('payment.autoTopup.addFunds')}
               </Button>
             )}
-          </Box>
+          </Stack>
         </Box>
+        {balanceInfo && isMobile && (
+          <Button
+            size="small"
+            variant="text"
+            onClick={handleRecharge}
+            className="auto-topup-add-funds-button"
+            sx={{
+              color: 'primary.main',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+            }}>
+            <AddOutlined fontSize="small" />
+            {t('payment.autoTopup.addFunds')}
+          </Button>
+        )}
       </Stack>
     );
   };