@spicenet-io/spiceflow-ui 1.9.12 → 1.9.14

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 (3) hide show
  1. package/dist/index.cjs.js +56 -10
  2. package/dist/index.js +56 -10
  3. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -4285,6 +4285,7 @@ const DepositStatusPanel = ({
4285
4285
  };
4286
4286
  if (intentStatus) {
4287
4287
  const { steps, overallStatus } = intentStatus;
4288
+ const isProcessing = overallStatus === "processing";
4288
4289
  const isSuccess = overallStatus === "success";
4289
4290
  const isError = overallStatus === "failed";
4290
4291
  const stepWithTxHash = steps.find((step) => step.transactionHash);
@@ -4321,9 +4322,9 @@ const DepositStatusPanel = ({
4321
4322
  display: "flex",
4322
4323
  alignItems: "center",
4323
4324
  gap: "8px",
4324
- cursor: "pointer"
4325
+ cursor: !isProcessing ? "pointer" : "default"
4325
4326
  },
4326
- onClick: toggleDetails,
4327
+ onClick: !isProcessing ? toggleDetails : void 0,
4327
4328
  children: [
4328
4329
  /* @__PURE__ */ jsxRuntime.jsx(
4329
4330
  "span",
@@ -4337,7 +4338,7 @@ const DepositStatusPanel = ({
4337
4338
  children: "Deposit Results"
4338
4339
  }
4339
4340
  ),
4340
- /* @__PURE__ */ jsxRuntime.jsx(
4341
+ !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
4341
4342
  "svg",
4342
4343
  {
4343
4344
  width: "16",
@@ -4363,7 +4364,7 @@ const DepositStatusPanel = ({
4363
4364
  ]
4364
4365
  }
4365
4366
  ),
4366
- /* @__PURE__ */ jsxRuntime.jsx(
4367
+ !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
4367
4368
  "button",
4368
4369
  {
4369
4370
  onClick: onClose,
@@ -4392,7 +4393,47 @@ const DepositStatusPanel = ({
4392
4393
  ]
4393
4394
  }
4394
4395
  ),
4395
- /* @__PURE__ */ jsxRuntime.jsx(
4396
+ isProcessing && /* @__PURE__ */ jsxRuntime.jsxs(
4397
+ "div",
4398
+ {
4399
+ style: {
4400
+ display: "flex",
4401
+ flexDirection: "column",
4402
+ alignItems: "center",
4403
+ padding: "24px",
4404
+ marginBottom: "16px"
4405
+ },
4406
+ children: [
4407
+ /* @__PURE__ */ jsxRuntime.jsx(
4408
+ "div",
4409
+ {
4410
+ style: {
4411
+ width: "48px",
4412
+ height: "48px",
4413
+ border: "3px solid #e5e7eb",
4414
+ borderTopColor: theme.colors.primary,
4415
+ borderRadius: "50%",
4416
+ animation: "spin 1s linear infinite",
4417
+ marginBottom: "16px"
4418
+ }
4419
+ }
4420
+ ),
4421
+ /* @__PURE__ */ jsxRuntime.jsx(
4422
+ "p",
4423
+ {
4424
+ style: {
4425
+ fontSize: "14px",
4426
+ fontWeight: 500,
4427
+ color: "#374151",
4428
+ margin: 0
4429
+ },
4430
+ children: "Processing your deposit..."
4431
+ }
4432
+ )
4433
+ ]
4434
+ }
4435
+ ),
4436
+ !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
4396
4437
  "div",
4397
4438
  {
4398
4439
  style: {
@@ -4409,7 +4450,7 @@ const DepositStatusPanel = ({
4409
4450
  )
4410
4451
  }
4411
4452
  ),
4412
- /* @__PURE__ */ jsxRuntime.jsx(
4453
+ !isProcessing && /* @__PURE__ */ jsxRuntime.jsx(
4413
4454
  "div",
4414
4455
  {
4415
4456
  style: {
@@ -4469,7 +4510,7 @@ const DepositStatusPanel = ({
4469
4510
  )
4470
4511
  }
4471
4512
  ),
4472
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4513
+ !isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4473
4514
  isError && onRetry && /* @__PURE__ */ jsxRuntime.jsx(
4474
4515
  "button",
4475
4516
  {
@@ -4520,7 +4561,13 @@ const DepositStatusPanel = ({
4520
4561
  children: "CONTINUE \u2192"
4521
4562
  }
4522
4563
  )
4523
- ] })
4564
+ ] }),
4565
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
4566
+ @keyframes spin {
4567
+ from { transform: rotate(0deg); }
4568
+ to { transform: rotate(360deg); }
4569
+ }
4570
+ ` })
4524
4571
  ]
4525
4572
  }
4526
4573
  );
@@ -4956,8 +5003,7 @@ const DepositWidget = ({
4956
5003
  fontFamily: theme.typography.fontFamily,
4957
5004
  boxShadow: styles?.container?.boxShadow || (theme.mode === "light" ? "0 4px 6px -1px rgb(0 0 0 / 0.1)" : "0 4px 6px -1px rgb(0 0 0 / 0.3)")
4958
5005
  };
4959
- const showStatusPanel = intentStatus && intentStatus.overallStatus !== "processing";
4960
- if (showStatusPanel) {
5006
+ if (intentStatus) {
4961
5007
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
4962
5008
  DepositStatusPanel,
4963
5009
  {
package/dist/index.js CHANGED
@@ -4283,6 +4283,7 @@ const DepositStatusPanel = ({
4283
4283
  };
4284
4284
  if (intentStatus) {
4285
4285
  const { steps, overallStatus } = intentStatus;
4286
+ const isProcessing = overallStatus === "processing";
4286
4287
  const isSuccess = overallStatus === "success";
4287
4288
  const isError = overallStatus === "failed";
4288
4289
  const stepWithTxHash = steps.find((step) => step.transactionHash);
@@ -4319,9 +4320,9 @@ const DepositStatusPanel = ({
4319
4320
  display: "flex",
4320
4321
  alignItems: "center",
4321
4322
  gap: "8px",
4322
- cursor: "pointer"
4323
+ cursor: !isProcessing ? "pointer" : "default"
4323
4324
  },
4324
- onClick: toggleDetails,
4325
+ onClick: !isProcessing ? toggleDetails : void 0,
4325
4326
  children: [
4326
4327
  /* @__PURE__ */ jsx(
4327
4328
  "span",
@@ -4335,7 +4336,7 @@ const DepositStatusPanel = ({
4335
4336
  children: "Deposit Results"
4336
4337
  }
4337
4338
  ),
4338
- /* @__PURE__ */ jsx(
4339
+ !isProcessing && /* @__PURE__ */ jsx(
4339
4340
  "svg",
4340
4341
  {
4341
4342
  width: "16",
@@ -4361,7 +4362,7 @@ const DepositStatusPanel = ({
4361
4362
  ]
4362
4363
  }
4363
4364
  ),
4364
- /* @__PURE__ */ jsx(
4365
+ !isProcessing && /* @__PURE__ */ jsx(
4365
4366
  "button",
4366
4367
  {
4367
4368
  onClick: onClose,
@@ -4390,7 +4391,47 @@ const DepositStatusPanel = ({
4390
4391
  ]
4391
4392
  }
4392
4393
  ),
4393
- /* @__PURE__ */ jsx(
4394
+ isProcessing && /* @__PURE__ */ jsxs(
4395
+ "div",
4396
+ {
4397
+ style: {
4398
+ display: "flex",
4399
+ flexDirection: "column",
4400
+ alignItems: "center",
4401
+ padding: "24px",
4402
+ marginBottom: "16px"
4403
+ },
4404
+ children: [
4405
+ /* @__PURE__ */ jsx(
4406
+ "div",
4407
+ {
4408
+ style: {
4409
+ width: "48px",
4410
+ height: "48px",
4411
+ border: "3px solid #e5e7eb",
4412
+ borderTopColor: theme.colors.primary,
4413
+ borderRadius: "50%",
4414
+ animation: "spin 1s linear infinite",
4415
+ marginBottom: "16px"
4416
+ }
4417
+ }
4418
+ ),
4419
+ /* @__PURE__ */ jsx(
4420
+ "p",
4421
+ {
4422
+ style: {
4423
+ fontSize: "14px",
4424
+ fontWeight: 500,
4425
+ color: "#374151",
4426
+ margin: 0
4427
+ },
4428
+ children: "Processing your deposit..."
4429
+ }
4430
+ )
4431
+ ]
4432
+ }
4433
+ ),
4434
+ !isProcessing && /* @__PURE__ */ jsx(
4394
4435
  "div",
4395
4436
  {
4396
4437
  style: {
@@ -4407,7 +4448,7 @@ const DepositStatusPanel = ({
4407
4448
  )
4408
4449
  }
4409
4450
  ),
4410
- /* @__PURE__ */ jsx(
4451
+ !isProcessing && /* @__PURE__ */ jsx(
4411
4452
  "div",
4412
4453
  {
4413
4454
  style: {
@@ -4467,7 +4508,7 @@ const DepositStatusPanel = ({
4467
4508
  )
4468
4509
  }
4469
4510
  ),
4470
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4511
+ !isProcessing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
4471
4512
  isError && onRetry && /* @__PURE__ */ jsx(
4472
4513
  "button",
4473
4514
  {
@@ -4518,7 +4559,13 @@ const DepositStatusPanel = ({
4518
4559
  children: "CONTINUE \u2192"
4519
4560
  }
4520
4561
  )
4521
- ] })
4562
+ ] }),
4563
+ /* @__PURE__ */ jsx("style", { children: `
4564
+ @keyframes spin {
4565
+ from { transform: rotate(0deg); }
4566
+ to { transform: rotate(360deg); }
4567
+ }
4568
+ ` })
4522
4569
  ]
4523
4570
  }
4524
4571
  );
@@ -4954,8 +5001,7 @@ const DepositWidget = ({
4954
5001
  fontFamily: theme.typography.fontFamily,
4955
5002
  boxShadow: styles?.container?.boxShadow || (theme.mode === "light" ? "0 4px 6px -1px rgb(0 0 0 / 0.1)" : "0 4px 6px -1px rgb(0 0 0 / 0.3)")
4956
5003
  };
4957
- const showStatusPanel = intentStatus && intentStatus.overallStatus !== "processing";
4958
- if (showStatusPanel) {
5004
+ if (intentStatus) {
4959
5005
  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
4960
5006
  DepositStatusPanel,
4961
5007
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicenet-io/spiceflow-ui",
3
- "version": "1.9.12",
3
+ "version": "1.9.14",
4
4
  "description": "Spiceflow UI SDK",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",