@spicenet-io/spiceflow-ui 1.9.13 → 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.
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
  );
@@ -4942,8 +4989,7 @@ const DepositWidget = ({
4942
4989
  }
4943
4990
  return spiceAssets;
4944
4991
  }, [spiceAssets, supportedTokens]);
4945
- const isProcessingIntent = intentStatus?.overallStatus === "processing";
4946
- const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && !isProcessingIntent && depositBatches.length > 0;
4992
+ const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
4947
4993
  const displayError = spiceAssetsError || error;
4948
4994
  const containerStyles = {
4949
4995
  backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
@@ -4957,8 +5003,7 @@ const DepositWidget = ({
4957
5003
  fontFamily: theme.typography.fontFamily,
4958
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)")
4959
5005
  };
4960
- const showStatusPanel = intentStatus && intentStatus.overallStatus !== "processing";
4961
- if (showStatusPanel) {
5006
+ if (intentStatus) {
4962
5007
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
4963
5008
  DepositStatusPanel,
4964
5009
  {
@@ -5074,11 +5119,11 @@ const DepositWidget = ({
5074
5119
  variant: "outline",
5075
5120
  fullWidth: true,
5076
5121
  onClick: handleDeposit,
5077
- loading: isExecuting || isProcessingIntent,
5122
+ loading: isExecuting,
5078
5123
  disabled: !canDeposit || !isConnected,
5079
5124
  theme,
5080
5125
  styles,
5081
- children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : isProcessingIntent ? "Processing..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
5126
+ children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
5082
5127
  }
5083
5128
  )
5084
5129
  }
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
  );
@@ -4940,8 +4987,7 @@ const DepositWidget = ({
4940
4987
  }
4941
4988
  return spiceAssets;
4942
4989
  }, [spiceAssets, supportedTokens]);
4943
- const isProcessingIntent = intentStatus?.overallStatus === "processing";
4944
- const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && !isProcessingIntent && depositBatches.length > 0;
4990
+ const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
4945
4991
  const displayError = spiceAssetsError || error;
4946
4992
  const containerStyles = {
4947
4993
  backgroundColor: styles?.container?.backgroundColor || styles?.primaryBackground || theme.colors.background,
@@ -4955,8 +5001,7 @@ const DepositWidget = ({
4955
5001
  fontFamily: theme.typography.fontFamily,
4956
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)")
4957
5003
  };
4958
- const showStatusPanel = intentStatus && intentStatus.overallStatus !== "processing";
4959
- if (showStatusPanel) {
5004
+ if (intentStatus) {
4960
5005
  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
4961
5006
  DepositStatusPanel,
4962
5007
  {
@@ -5072,11 +5117,11 @@ const DepositWidget = ({
5072
5117
  variant: "outline",
5073
5118
  fullWidth: true,
5074
5119
  onClick: handleDeposit,
5075
- loading: isExecuting || isProcessingIntent,
5120
+ loading: isExecuting,
5076
5121
  disabled: !canDeposit || !isConnected,
5077
5122
  theme,
5078
5123
  styles,
5079
- children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : isProcessingIntent ? "Processing..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
5124
+ children: !ready ? "Loading..." : !authenticated ? "Authentication Required" : !isConnected ? "Wallet Not Connected" : isExecuting ? "Executing Deposit..." : !selectedDepositAsset ? "Select Token" : !selectedDepositAsset.amount ? "Enter Amount" : parseFloat(selectedDepositAsset.amount) > selectedDepositAsset.asset.balanceFormatted ? "Insufficient Balance" : depositBatches.length === 0 ? "No Deposit Batches" : "Execute Deposit"
5080
5125
  }
5081
5126
  )
5082
5127
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicenet-io/spiceflow-ui",
3
- "version": "1.9.13",
3
+ "version": "1.9.14",
4
4
  "description": "Spiceflow UI SDK",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",