@blocklet/payment-react 1.19.20 → 1.19.21

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
  1. package/es/components/auto-topup/index.js +176 -96
  2. package/lib/components/auto-topup/index.js +55 -18
  3. package/package.json +7 -7
  4. package/src/components/auto-topup/index.tsx +71 -16
package/es/components/auto-topup/index.js CHANGED
@@ -22,6 +22,7 @@ import { createLink, handleNavigation } from "../../libs/navigation.js";
22
22
  import { usePaymentContext } from "../../contexts/payment.js";
23
23
  import api from "../../libs/api.js";
24
24
  import AutoTopupModal from "./modal.js";
25
+ import { useMobile } from "../../hooks/mobile.js";
25
26
  const fetchConfig = async (customerId, currencyId) => {
26
27
  const { data } = await api.get(`/api/auto-recharge-configs/customer/${customerId}`, {
27
28
  params: { currency_id: currencyId }
@@ -59,6 +60,7 @@ export default function AutoTopupCard({
59
60
  const [quickSetupMode, setQuickSetupMode] = useState(false);
60
61
  const [expanded, setExpanded] = useState(mode === "default");
61
62
  const customerId = session?.user?.did || "";
63
+ const { isMobile } = useMobile();
62
64
  const {
63
65
  data: config,
64
66
  loading,
@@ -132,119 +134,197 @@ export default function AutoTopupCard({
132
134
  if (config?.paymentMethod?.type === "stripe") {
133
135
  const cardBrand = (paymentInfo?.card_brand || "Card").charAt(0).toUpperCase() + (paymentInfo?.card_brand || "Card").slice(1).toLowerCase();
134
136
  const last4 = paymentInfo?.card_last4;
135
- return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
136
- /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
137
- /* @__PURE__ */ jsxs(
138
- Typography,
139
- {
140
- variant: "body2",
141
- sx: {
142
- color: "text.secondary"
143
- },
144
- children: [
145
- t("payment.autoTopup.purchaseAmount"),
146
- "\uFF1A"
147
- ]
148
- }
149
- ),
150
- /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
151
- ] }),
152
- /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
153
- /* @__PURE__ */ jsxs(
154
- Typography,
155
- {
156
- variant: "body2",
157
- sx: {
158
- color: "text.secondary"
159
- },
160
- children: [
161
- t("payment.autoTopup.paymentMethod"),
162
- "\uFF1A"
163
- ]
164
- }
165
- ),
166
- /* @__PURE__ */ jsxs(
167
- Stack,
168
- {
169
- direction: "row",
170
- spacing: 1,
171
- sx: {
172
- alignItems: "center"
173
- },
174
- children: [
175
- /* @__PURE__ */ jsx(CreditCard, { fontSize: "small", sx: { color: "text.secondary" } }),
176
- /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 500 }, children: [
177
- cardBrand,
178
- "(",
179
- last4,
180
- ")"
181
- ] })
182
- ]
183
- }
184
- )
185
- ] })
186
- ] });
187
- }
188
- return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
189
- /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
137
+ return /* @__PURE__ */ jsxs(Stack, { spacing: 1, className: "auto-topup-method-info", children: [
190
138
  /* @__PURE__ */ jsxs(
191
- Typography,
139
+ Box,
192
140
  {
193
- variant: "body2",
194
141
  sx: {
195
- color: "text.secondary"
142
+ display: "flex",
143
+ alignItems: "center",
144
+ gap: 0.5,
145
+ justifyContent: {
146
+ xs: "space-between",
147
+ sm: "flex-start"
148
+ }
196
149
  },
197
150
  children: [
198
- t("payment.autoTopup.purchaseAmount"),
199
- "\uFF1A"
151
+ /* @__PURE__ */ jsxs(
152
+ Typography,
153
+ {
154
+ variant: "body2",
155
+ sx: {
156
+ color: "text.secondary"
157
+ },
158
+ children: [
159
+ t("payment.autoTopup.purchaseAmount"),
160
+ "\uFF1A"
161
+ ]
162
+ }
163
+ ),
164
+ /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
200
165
  ]
201
166
  }
202
167
  ),
203
- /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
204
- ] }),
205
- /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
206
168
  /* @__PURE__ */ jsxs(
207
- Typography,
208
- {
209
- variant: "body2",
210
- sx: {
211
- color: "text.secondary"
212
- },
213
- children: [
214
- t("payment.autoTopup.walletBalance"),
215
- "\uFF1A"
216
- ]
217
- }
218
- ),
219
- /* @__PURE__ */ jsx(
220
- Tooltip,
221
- {
222
- title: paymentInfo?.payer ? `${t("payment.autoTopup.paymentAddress")}: ${paymentInfo.payer}` : "",
223
- placement: "top",
224
- children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
225
- /* @__PURE__ */ jsx(AccountBalanceWalletOutlined, { sx: { fontSize: 16, color: "text.secondary" } }),
226
- /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: balanceInfo ? `${formatBNStr(balanceInfo?.token || "0", config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ""}` : "--" })
227
- ] })
228
- }
229
- ),
230
- balanceInfo && /* @__PURE__ */ jsxs(
231
- Button,
169
+ Box,
232
170
  {
233
- size: "small",
234
- variant: "text",
235
- onClick: handleRecharge,
236
171
  sx: {
237
- color: "primary.main",
238
172
  display: "flex",
239
- alignItems: "center"
173
+ alignItems: "center",
174
+ gap: 0.5,
175
+ justifyContent: {
176
+ xs: "space-between",
177
+ sm: "flex-start"
178
+ }
240
179
  },
241
180
  children: [
242
- /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }),
243
- t("payment.autoTopup.addFunds")
181
+ /* @__PURE__ */ jsxs(
182
+ Typography,
183
+ {
184
+ variant: "body2",
185
+ sx: {
186
+ color: "text.secondary"
187
+ },
188
+ children: [
189
+ t("payment.autoTopup.paymentMethod"),
190
+ "\uFF1A"
191
+ ]
192
+ }
193
+ ),
194
+ /* @__PURE__ */ jsxs(
195
+ Stack,
196
+ {
197
+ direction: "row",
198
+ spacing: 1,
199
+ sx: {
200
+ alignItems: "center"
201
+ },
202
+ children: [
203
+ /* @__PURE__ */ jsx(CreditCard, { fontSize: "small", sx: { color: "text.secondary" } }),
204
+ /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 500 }, children: [
205
+ cardBrand,
206
+ "(",
207
+ last4,
208
+ ")"
209
+ ] })
210
+ ]
211
+ }
212
+ )
244
213
  ]
245
214
  }
246
215
  )
247
- ] }) })
216
+ ] });
217
+ }
218
+ return /* @__PURE__ */ jsxs(Stack, { spacing: 1, className: "auto-topup-method-info", children: [
219
+ /* @__PURE__ */ jsxs(
220
+ Box,
221
+ {
222
+ sx: {
223
+ display: "flex",
224
+ alignItems: "center",
225
+ gap: 0.5,
226
+ justifyContent: {
227
+ xs: "space-between",
228
+ sm: "flex-start"
229
+ }
230
+ },
231
+ children: [
232
+ /* @__PURE__ */ jsxs(
233
+ Typography,
234
+ {
235
+ variant: "body2",
236
+ sx: {
237
+ color: "text.secondary"
238
+ },
239
+ children: [
240
+ t("payment.autoTopup.purchaseAmount"),
241
+ "\uFF1A"
242
+ ]
243
+ }
244
+ ),
245
+ /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: purchaseAmount })
246
+ ]
247
+ }
248
+ ),
249
+ /* @__PURE__ */ jsxs(
250
+ Box,
251
+ {
252
+ sx: {
253
+ display: "flex",
254
+ alignItems: "center",
255
+ justifyContent: {
256
+ xs: "space-between",
257
+ sm: "flex-start"
258
+ }
259
+ },
260
+ children: [
261
+ /* @__PURE__ */ jsxs(
262
+ Typography,
263
+ {
264
+ variant: "body2",
265
+ sx: {
266
+ color: "text.secondary",
267
+ whiteSpace: "nowrap"
268
+ },
269
+ children: [
270
+ t("payment.autoTopup.walletBalance"),
271
+ "\uFF1A"
272
+ ]
273
+ }
274
+ ),
275
+ /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
276
+ /* @__PURE__ */ jsx(
277
+ Tooltip,
278
+ {
279
+ title: paymentInfo?.payer ? `${t("payment.autoTopup.paymentAddress")}: ${paymentInfo.payer}` : "",
280
+ placement: "top",
281
+ children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
282
+ /* @__PURE__ */ jsx(AccountBalanceWalletOutlined, { sx: { fontSize: 16, color: "text.secondary" } }),
283
+ /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "text.primary" }, children: balanceInfo ? `${formatBNStr(balanceInfo?.token || "0", config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ""}` : "--" })
284
+ ] })
285
+ }
286
+ ),
287
+ balanceInfo && !isMobile && /* @__PURE__ */ jsxs(
288
+ Button,
289
+ {
290
+ size: "small",
291
+ variant: "text",
292
+ onClick: handleRecharge,
293
+ className: "auto-topup-add-funds-button",
294
+ sx: {
295
+ color: "primary.main",
296
+ display: "flex",
297
+ alignItems: "center"
298
+ },
299
+ children: [
300
+ /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }),
301
+ t("payment.autoTopup.addFunds")
302
+ ]
303
+ }
304
+ )
305
+ ] })
306
+ ]
307
+ }
308
+ ),
309
+ balanceInfo && isMobile && /* @__PURE__ */ jsxs(
310
+ Button,
311
+ {
312
+ size: "small",
313
+ variant: "text",
314
+ onClick: handleRecharge,
315
+ className: "auto-topup-add-funds-button",
316
+ sx: {
317
+ color: "primary.main",
318
+ display: "flex",
319
+ alignItems: "center",
320
+ justifyContent: "flex-end"
321
+ },
322
+ children: [
323
+ /* @__PURE__ */ jsx(AddOutlined, { fontSize: "small" }),
324
+ t("payment.autoTopup.addFunds")
325
+ ]
326
+ }
327
+ )
248
328
  ] });
249
329
  };
250
330
  const openModal = () => setModalOpen(true);
package/lib/components/auto-topup/index.js CHANGED
@@ -17,6 +17,7 @@ var _navigation = require("../../libs/navigation");
17
17
  var _payment = require("../../contexts/payment");
18
18
  var _api = _interopRequireDefault(require("../../libs/api"));
19
19
  var _modal = _interopRequireDefault(require("./modal"));
20
+ var _mobile = require("../../hooks/mobile");
20
21
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
21
22
  const fetchConfig = async (customerId, currencyId) => {
22
23
  const {
@@ -67,6 +68,9 @@ function AutoTopupCard({
67
68
  const [quickSetupMode, setQuickSetupMode] = (0, _react.useState)(false);
68
69
  const [expanded, setExpanded] = (0, _react.useState)(mode === "default");
69
70
  const customerId = session?.user?.did || "";
71
+ const {
72
+ isMobile
73
+ } = (0, _mobile.useMobile)();
70
74
  const {
71
75
  data: config,
72
76
  loading,
@@ -151,11 +155,16 @@ function AutoTopupCard({
151
155
  const last4 = paymentInfo?.card_last4;
152
156
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
153
157
  spacing: 1,
158
+ className: "auto-topup-method-info",
154
159
  children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
155
160
  sx: {
156
161
  display: "flex",
157
162
  alignItems: "center",
158
- gap: 0.5
163
+ gap: 0.5,
164
+ justifyContent: {
165
+ xs: "space-between",
166
+ sm: "flex-start"
167
+ }
159
168
  },
160
169
  children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
161
170
  variant: "body2",
@@ -175,7 +184,11 @@ function AutoTopupCard({
175
184
  sx: {
176
185
  display: "flex",
177
186
  alignItems: "center",
178
- gap: 0.5
187
+ gap: 0.5,
188
+ justifyContent: {
189
+ xs: "space-between",
190
+ sm: "flex-start"
191
+ }
179
192
  },
180
193
  children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
181
194
  variant: "body2",
@@ -208,11 +221,16 @@ function AutoTopupCard({
208
221
  }
209
222
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
210
223
  spacing: 1,
224
+ className: "auto-topup-method-info",
211
225
  children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
212
226
  sx: {
213
227
  display: "flex",
214
228
  alignItems: "center",
215
- gap: 0.5
229
+ gap: 0.5,
230
+ justifyContent: {
231
+ xs: "space-between",
232
+ sm: "flex-start"
233
+ }
216
234
  },
217
235
  children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
218
236
  variant: "body2",
@@ -228,25 +246,29 @@ function AutoTopupCard({
228
246
  },
229
247
  children: purchaseAmount
230
248
  })]
231
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
249
+ }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
232
250
  sx: {
233
251
  display: "flex",
234
252
  alignItems: "center",
235
- justifyContent: "space-between"
253
+ justifyContent: {
254
+ xs: "space-between",
255
+ sm: "flex-start"
256
+ }
236
257
  },
237
- children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
258
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
259
+ variant: "body2",
238
260
  sx: {
239
- display: "flex",
240
- alignItems: "center",
241
- gap: 0.5
261
+ color: "text.secondary",
262
+ whiteSpace: "nowrap"
242
263
  },
243
- children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
244
- variant: "body2",
245
- sx: {
246
- color: "text.secondary"
247
- },
248
- children: [t("payment.autoTopup.walletBalance"), "\uFF1A"]
249
- }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
264
+ children: [t("payment.autoTopup.walletBalance"), "\uFF1A"]
265
+ }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
266
+ direction: "row",
267
+ spacing: 1,
268
+ sx: {
269
+ alignItems: "center"
270
+ },
271
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
250
272
  title: paymentInfo?.payer ? `${t("payment.autoTopup.paymentAddress")}: ${paymentInfo.payer}` : "",
251
273
  placement: "top",
252
274
  children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -269,10 +291,11 @@ function AutoTopupCard({
269
291
  children: balanceInfo ? `${(0, _util.formatBNStr)(balanceInfo?.token || "0", config?.rechargeCurrency?.decimal || 18)} ${config?.rechargeCurrency?.symbol || ""}` : "--"
270
292
  })]
271
293
  })
272
- }), balanceInfo && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
294
+ }), balanceInfo && !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
273
295
  size: "small",
274
296
  variant: "text",
275
297
  onClick: handleRecharge,
298
+ className: "auto-topup-add-funds-button",
276
299
  sx: {
277
300
  color: "primary.main",
278
301
  display: "flex",
@@ -282,7 +305,21 @@ function AutoTopupCard({
282
305
  fontSize: "small"
283
306
  }), t("payment.autoTopup.addFunds")]
284
307
  })]
285
- })
308
+ })]
309
+ }), balanceInfo && isMobile && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
310
+ size: "small",
311
+ variant: "text",
312
+ onClick: handleRecharge,
313
+ className: "auto-topup-add-funds-button",
314
+ sx: {
315
+ color: "primary.main",
316
+ display: "flex",
317
+ alignItems: "center",
318
+ justifyContent: "flex-end"
319
+ },
320
+ children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.AddOutlined, {
321
+ fontSize: "small"
322
+ }), t("payment.autoTopup.addFunds")]
286
323
  })]
287
324
  });
288
325
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/payment-react",
3
- "version": "1.19.20",
3
+ "version": "1.19.21",
4
4
  "description": "Reusable react components for payment kit v2",
5
5
  "keywords": [
6
6
  "react",
@@ -54,11 +54,11 @@
54
54
  }
55
55
  },
56
56
  "dependencies": {
57
- "@arcblock/did-connect-react": "^3.1.31",
58
- "@arcblock/ux": "^3.1.31",
57
+ "@arcblock/did-connect-react": "^3.1.32",
58
+ "@arcblock/ux": "^3.1.32",
59
59
  "@arcblock/ws": "^1.23.1",
60
- "@blocklet/theme": "^3.1.31",
61
- "@blocklet/ui-react": "^3.1.31",
60
+ "@blocklet/theme": "^3.1.32",
61
+ "@blocklet/ui-react": "^3.1.32",
62
62
  "@mui/icons-material": "^7.1.2",
63
63
  "@mui/lab": "7.0.0-beta.14",
64
64
  "@mui/material": "^7.1.2",
@@ -94,7 +94,7 @@
94
94
  "@babel/core": "^7.27.4",
95
95
  "@babel/preset-env": "^7.27.2",
96
96
  "@babel/preset-react": "^7.27.1",
97
- "@blocklet/payment-types": "1.19.20",
97
+ "@blocklet/payment-types": "1.19.21",
98
98
  "@storybook/addon-essentials": "^7.6.20",
99
99
  "@storybook/addon-interactions": "^7.6.20",
100
100
  "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
125
125
  "vite-plugin-babel": "^1.3.1",
126
126
  "vite-plugin-node-polyfills": "^0.23.0"
127
127
  },
128
- "gitHead": "4e09a5936748fc15c1ab6ea90b741b3e44f5eab7"
128
+ "gitHead": "66941895c869b90d0635b9d2a56593b2c85a3e3e"
129
129
  }
package/src/components/auto-topup/index.tsx CHANGED
@@ -27,6 +27,7 @@ import { createLink, handleNavigation } from '../../libs/navigation';
27
27
  import { usePaymentContext } from '../../contexts/payment';
28
28
  import api from '../../libs/api';
29
29
  import AutoTopupModal from './modal';
30
+ import { useMobile } from '../../hooks/mobile';
30
31
 
31
32
  export interface AutoTopupCardProps {
32
33
  currencyId: string;
@@ -84,6 +85,7 @@ export default function AutoTopupCard({
84
85
  const [expanded, setExpanded] = useState(mode === 'default');
85
86
 
86
87
  const customerId = session?.user?.did || '';
88
+ const { isMobile } = useMobile();
87
89
 
88
90
  const {
89
91
  data: config,
@@ -184,8 +186,17 @@ export default function AutoTopupCard({
184
186
  const last4 = paymentInfo?.card_last4;
185
187
 
186
188
  return (
187
- <Stack spacing={1}>
188
- <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
189
+ <Stack spacing={1} className="auto-topup-method-info">
190
+ <Box
191
+ sx={{
192
+ display: 'flex',
193
+ alignItems: 'center',
194
+ gap: 0.5,
195
+ justifyContent: {
196
+ xs: 'space-between',
197
+ sm: 'flex-start',
198
+ },
199
+ }}>
189
200
  <Typography
190
201
  variant="body2"
191
202
  sx={{
@@ -197,7 +208,16 @@ export default function AutoTopupCard({
197
208
  {purchaseAmount}
198
209
  </Typography>
199
210
  </Box>
200
- <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
211
+ <Box
212
+ sx={{
213
+ display: 'flex',
214
+ alignItems: 'center',
215
+ gap: 0.5,
216
+ justifyContent: {
217
+ xs: 'space-between',
218
+ sm: 'flex-start',
219
+ },
220
+ }}>
201
221
  <Typography
202
222
  variant="body2"
203
223
  sx={{
@@ -222,8 +242,17 @@ export default function AutoTopupCard({
222
242
  }
223
243
 
224
244
  return (
225
- <Stack spacing={1}>
226
- <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
245
+ <Stack spacing={1} className="auto-topup-method-info">
246
+ <Box
247
+ sx={{
248
+ display: 'flex',
249
+ alignItems: 'center',
250
+ gap: 0.5,
251
+ justifyContent: {
252
+ xs: 'space-between',
253
+ sm: 'flex-start',
254
+ },
255
+ }}>
227
256
  <Typography
228
257
  variant="body2"
229
258
  sx={{
@@ -235,15 +264,24 @@ export default function AutoTopupCard({
235
264
  {purchaseAmount}
236
265
  </Typography>
237
266
  </Box>
238
- <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
239
- <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
240
- <Typography
241
- variant="body2"
242
- sx={{
243
- color: 'text.secondary',
244
- }}>
245
- {t('payment.autoTopup.walletBalance')}：
246
- </Typography>
267
+ <Box
268
+ sx={{
269
+ display: 'flex',
270
+ alignItems: 'center',
271
+ justifyContent: {
272
+ xs: 'space-between',
273
+ sm: 'flex-start',
274
+ },
275
+ }}>
276
+ <Typography
277
+ variant="body2"
278
+ sx={{
279
+ color: 'text.secondary',
280
+ whiteSpace: 'nowrap',
281
+ }}>
282
+ {t('payment.autoTopup.walletBalance')}：
283
+ </Typography>
284
+ <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
247
285
  <Tooltip
248
286
  title={paymentInfo?.payer ? `${t('payment.autoTopup.paymentAddress')}: ${paymentInfo.payer}` : ''}
249
287
  placement="top">
@@ -256,11 +294,12 @@ export default function AutoTopupCard({
256
294
  </Typography>
257
295
  </Box>
258
296
  </Tooltip>
259
- {balanceInfo && (
297
+ {balanceInfo && !isMobile && (
260
298
  <Button
261
299
  size="small"
262
300
  variant="text"
263
301
  onClick={handleRecharge}
302
+ className="auto-topup-add-funds-button"
264
303
  sx={{
265
304
  color: 'primary.main',
266
305
  display: 'flex',
@@ -270,8 +309,24 @@ export default function AutoTopupCard({
270
309
  {t('payment.autoTopup.addFunds')}
271
310
  </Button>
272
311
  )}
273
- </Box>
312
+ </Stack>
274
313
  </Box>
314
+ {balanceInfo && isMobile && (
315
+ <Button
316
+ size="small"
317
+ variant="text"
318
+ onClick={handleRecharge}
319
+ className="auto-topup-add-funds-button"
320
+ sx={{
321
+ color: 'primary.main',
322
+ display: 'flex',
323
+ alignItems: 'center',
324
+ justifyContent: 'flex-end',
325
+ }}>
326
+ <AddOutlined fontSize="small" />
327
+ {t('payment.autoTopup.addFunds')}
328
+ </Button>
329
+ )}
275
330
  </Stack>
276
331
  );
277
332
  };