@spicenet-io/spiceflow-ui 1.9.15 → 1.9.17
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 +96 -32
- package/dist/index.js +96 -32
- 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);
|
|
@@ -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,
|
|
@@ -4398,7 +4399,66 @@ const DepositStatusPanel = ({
|
|
|
4398
4399
|
style: {
|
|
4399
4400
|
marginBottom: "16px"
|
|
4400
4401
|
},
|
|
4401
|
-
children: /* @__PURE__ */ jsxRuntime.
|
|
4402
|
+
children: isProcessing ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4403
|
+
"div",
|
|
4404
|
+
{
|
|
4405
|
+
style: {
|
|
4406
|
+
display: "flex",
|
|
4407
|
+
alignItems: "center",
|
|
4408
|
+
justifyContent: "center",
|
|
4409
|
+
padding: "20px 16px",
|
|
4410
|
+
borderRadius: "8px",
|
|
4411
|
+
backgroundColor: "#f3f4f6",
|
|
4412
|
+
border: "1px solid #e5e7eb",
|
|
4413
|
+
gap: "12px"
|
|
4414
|
+
},
|
|
4415
|
+
children: [
|
|
4416
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4417
|
+
"div",
|
|
4418
|
+
{
|
|
4419
|
+
style: {
|
|
4420
|
+
width: "24px",
|
|
4421
|
+
height: "24px",
|
|
4422
|
+
border: "3px solid #e5e7eb",
|
|
4423
|
+
borderTopColor: theme.colors.primary,
|
|
4424
|
+
borderRadius: "50%",
|
|
4425
|
+
animation: "spin 1s linear infinite"
|
|
4426
|
+
}
|
|
4427
|
+
}
|
|
4428
|
+
),
|
|
4429
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
4430
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4431
|
+
"p",
|
|
4432
|
+
{
|
|
4433
|
+
style: {
|
|
4434
|
+
margin: 0,
|
|
4435
|
+
fontSize: "14px",
|
|
4436
|
+
fontWeight: 600,
|
|
4437
|
+
fontFamily: '"IBM Plex Mono", monospace',
|
|
4438
|
+
letterSpacing: "0.5px",
|
|
4439
|
+
color: "#374151"
|
|
4440
|
+
},
|
|
4441
|
+
children: "PROCESSING TRANSACTION"
|
|
4442
|
+
}
|
|
4443
|
+
),
|
|
4444
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4445
|
+
"p",
|
|
4446
|
+
{
|
|
4447
|
+
style: {
|
|
4448
|
+
margin: "2px 0 0 0",
|
|
4449
|
+
fontSize: "12px",
|
|
4450
|
+
color: "#6b7280"
|
|
4451
|
+
},
|
|
4452
|
+
children: [
|
|
4453
|
+
"on ",
|
|
4454
|
+
derivedChainName
|
|
4455
|
+
]
|
|
4456
|
+
}
|
|
4457
|
+
)
|
|
4458
|
+
] })
|
|
4459
|
+
]
|
|
4460
|
+
}
|
|
4461
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4402
4462
|
StatusCard,
|
|
4403
4463
|
{
|
|
4404
4464
|
isSuccess,
|
|
@@ -4409,6 +4469,12 @@ const DepositStatusPanel = ({
|
|
|
4409
4469
|
)
|
|
4410
4470
|
}
|
|
4411
4471
|
),
|
|
4472
|
+
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
4473
|
+
@keyframes spin {
|
|
4474
|
+
from { transform: rotate(0deg); }
|
|
4475
|
+
to { transform: rotate(360deg); }
|
|
4476
|
+
}
|
|
4477
|
+
` }),
|
|
4412
4478
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4413
4479
|
"div",
|
|
4414
4480
|
{
|
|
@@ -4469,7 +4535,7 @@ const DepositStatusPanel = ({
|
|
|
4469
4535
|
)
|
|
4470
4536
|
}
|
|
4471
4537
|
),
|
|
4472
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
4538
|
+
!isProcessing && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
4473
4539
|
isError && onRetry && /* @__PURE__ */ jsxRuntime.jsx(
|
|
4474
4540
|
"button",
|
|
4475
4541
|
{
|
|
@@ -4806,6 +4872,33 @@ const DepositWidget = ({
|
|
|
4806
4872
|
const { intentStatus, startStatusPolling, clearStatus } = useStatus({
|
|
4807
4873
|
checkStepStatus: (intentId, stepId) => relayerService.checkStepStatus(intentId, stepId)
|
|
4808
4874
|
});
|
|
4875
|
+
React.useEffect(() => {
|
|
4876
|
+
if (intentStatus?.overallStatus === "success" && intentStatus.intentId && spiceDepositSubmittedRef.current !== intentStatus.intentId && selectedDepositAsset && address) {
|
|
4877
|
+
const stepWithTxHash = intentStatus.steps.find(
|
|
4878
|
+
(step) => step.transactionHash
|
|
4879
|
+
);
|
|
4880
|
+
if (stepWithTxHash?.transactionHash) {
|
|
4881
|
+
spiceDepositSubmittedRef.current = intentStatus.intentId;
|
|
4882
|
+
const withdrawalAmount = viem.parseUnits(
|
|
4883
|
+
selectedDepositAsset.amount,
|
|
4884
|
+
selectedDepositAsset.asset.decimals
|
|
4885
|
+
);
|
|
4886
|
+
relayerService.submitSpiceDeposit({
|
|
4887
|
+
user: address,
|
|
4888
|
+
txHash: stepWithTxHash.transactionHash,
|
|
4889
|
+
sender: address,
|
|
4890
|
+
tokenAddress: selectedDepositAsset.asset.address,
|
|
4891
|
+
chainId: selectedDepositAsset.asset.chainId,
|
|
4892
|
+
amount: withdrawalAmount.toString(),
|
|
4893
|
+
isDeposit: false
|
|
4894
|
+
}).then(() => {
|
|
4895
|
+
refreshSpiceAssets();
|
|
4896
|
+
}).catch(() => {
|
|
4897
|
+
spiceDepositSubmittedRef.current = null;
|
|
4898
|
+
});
|
|
4899
|
+
}
|
|
4900
|
+
}
|
|
4901
|
+
}, [intentStatus, address]);
|
|
4809
4902
|
React.useEffect(() => {
|
|
4810
4903
|
if (depositInputHook && depositInputHook.depositAmount !== selectedDepositAsset?.amount) {
|
|
4811
4904
|
if (selectedDepositAsset) {
|
|
@@ -4902,41 +4995,12 @@ const DepositWidget = ({
|
|
|
4902
4995
|
};
|
|
4903
4996
|
const result = await relayerService.submitTransaction(submitRequest);
|
|
4904
4997
|
if (result) {
|
|
4905
|
-
React.useEffect(() => {
|
|
4906
|
-
if (intentStatus?.overallStatus === "success" && intentStatus.intentId && spiceDepositSubmittedRef.current !== intentStatus.intentId && selectedDepositAsset && address) {
|
|
4907
|
-
const stepWithTxHash = intentStatus.steps.find(
|
|
4908
|
-
(step) => step.transactionHash
|
|
4909
|
-
);
|
|
4910
|
-
if (stepWithTxHash?.transactionHash) {
|
|
4911
|
-
spiceDepositSubmittedRef.current = intentStatus.intentId;
|
|
4912
|
-
const withdrawalAmount = viem.parseUnits(
|
|
4913
|
-
selectedDepositAsset.amount,
|
|
4914
|
-
selectedDepositAsset.asset.decimals
|
|
4915
|
-
);
|
|
4916
|
-
relayerService.submitSpiceDeposit({
|
|
4917
|
-
user: address,
|
|
4918
|
-
txHash: stepWithTxHash.transactionHash,
|
|
4919
|
-
sender: address,
|
|
4920
|
-
tokenAddress: selectedDepositAsset.asset.address,
|
|
4921
|
-
chainId: selectedDepositAsset.asset.chainId,
|
|
4922
|
-
amount: withdrawalAmount.toString(),
|
|
4923
|
-
isDeposit: false
|
|
4924
|
-
}).then(() => {
|
|
4925
|
-
refreshSpiceAssets();
|
|
4926
|
-
}).catch((error2) => {
|
|
4927
|
-
console.error("Failed to submit spice deposit:", error2);
|
|
4928
|
-
spiceDepositSubmittedRef.current = null;
|
|
4929
|
-
});
|
|
4930
|
-
}
|
|
4931
|
-
}
|
|
4932
|
-
}, [intentStatus, selectedDepositAsset, address, refreshSpiceAssets]);
|
|
4933
4998
|
const getChainName = (chainId) => {
|
|
4934
4999
|
return `Chain ${chainId}`;
|
|
4935
5000
|
};
|
|
4936
5001
|
const initialSteps = createInitialSteps(allChainBatches, getChainName);
|
|
4937
5002
|
startStatusPolling(result.intentId, initialSteps);
|
|
4938
5003
|
onDepositSuccess?.(result.intentId);
|
|
4939
|
-
refreshSpiceAssets();
|
|
4940
5004
|
}
|
|
4941
5005
|
} catch (error2) {
|
|
4942
5006
|
const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
|
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);
|
|
@@ -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,
|
|
@@ -4396,7 +4397,66 @@ const DepositStatusPanel = ({
|
|
|
4396
4397
|
style: {
|
|
4397
4398
|
marginBottom: "16px"
|
|
4398
4399
|
},
|
|
4399
|
-
children: /* @__PURE__ */
|
|
4400
|
+
children: isProcessing ? /* @__PURE__ */ jsxs(
|
|
4401
|
+
"div",
|
|
4402
|
+
{
|
|
4403
|
+
style: {
|
|
4404
|
+
display: "flex",
|
|
4405
|
+
alignItems: "center",
|
|
4406
|
+
justifyContent: "center",
|
|
4407
|
+
padding: "20px 16px",
|
|
4408
|
+
borderRadius: "8px",
|
|
4409
|
+
backgroundColor: "#f3f4f6",
|
|
4410
|
+
border: "1px solid #e5e7eb",
|
|
4411
|
+
gap: "12px"
|
|
4412
|
+
},
|
|
4413
|
+
children: [
|
|
4414
|
+
/* @__PURE__ */ jsx(
|
|
4415
|
+
"div",
|
|
4416
|
+
{
|
|
4417
|
+
style: {
|
|
4418
|
+
width: "24px",
|
|
4419
|
+
height: "24px",
|
|
4420
|
+
border: "3px solid #e5e7eb",
|
|
4421
|
+
borderTopColor: theme.colors.primary,
|
|
4422
|
+
borderRadius: "50%",
|
|
4423
|
+
animation: "spin 1s linear infinite"
|
|
4424
|
+
}
|
|
4425
|
+
}
|
|
4426
|
+
),
|
|
4427
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
4428
|
+
/* @__PURE__ */ jsx(
|
|
4429
|
+
"p",
|
|
4430
|
+
{
|
|
4431
|
+
style: {
|
|
4432
|
+
margin: 0,
|
|
4433
|
+
fontSize: "14px",
|
|
4434
|
+
fontWeight: 600,
|
|
4435
|
+
fontFamily: '"IBM Plex Mono", monospace',
|
|
4436
|
+
letterSpacing: "0.5px",
|
|
4437
|
+
color: "#374151"
|
|
4438
|
+
},
|
|
4439
|
+
children: "PROCESSING TRANSACTION"
|
|
4440
|
+
}
|
|
4441
|
+
),
|
|
4442
|
+
/* @__PURE__ */ jsxs(
|
|
4443
|
+
"p",
|
|
4444
|
+
{
|
|
4445
|
+
style: {
|
|
4446
|
+
margin: "2px 0 0 0",
|
|
4447
|
+
fontSize: "12px",
|
|
4448
|
+
color: "#6b7280"
|
|
4449
|
+
},
|
|
4450
|
+
children: [
|
|
4451
|
+
"on ",
|
|
4452
|
+
derivedChainName
|
|
4453
|
+
]
|
|
4454
|
+
}
|
|
4455
|
+
)
|
|
4456
|
+
] })
|
|
4457
|
+
]
|
|
4458
|
+
}
|
|
4459
|
+
) : /* @__PURE__ */ jsx(
|
|
4400
4460
|
StatusCard,
|
|
4401
4461
|
{
|
|
4402
4462
|
isSuccess,
|
|
@@ -4407,6 +4467,12 @@ const DepositStatusPanel = ({
|
|
|
4407
4467
|
)
|
|
4408
4468
|
}
|
|
4409
4469
|
),
|
|
4470
|
+
/* @__PURE__ */ jsx("style", { children: `
|
|
4471
|
+
@keyframes spin {
|
|
4472
|
+
from { transform: rotate(0deg); }
|
|
4473
|
+
to { transform: rotate(360deg); }
|
|
4474
|
+
}
|
|
4475
|
+
` }),
|
|
4410
4476
|
/* @__PURE__ */ jsx(
|
|
4411
4477
|
"div",
|
|
4412
4478
|
{
|
|
@@ -4467,7 +4533,7 @@ const DepositStatusPanel = ({
|
|
|
4467
4533
|
)
|
|
4468
4534
|
}
|
|
4469
4535
|
),
|
|
4470
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
4536
|
+
!isProcessing && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
|
|
4471
4537
|
isError && onRetry && /* @__PURE__ */ jsx(
|
|
4472
4538
|
"button",
|
|
4473
4539
|
{
|
|
@@ -4804,6 +4870,33 @@ const DepositWidget = ({
|
|
|
4804
4870
|
const { intentStatus, startStatusPolling, clearStatus } = useStatus({
|
|
4805
4871
|
checkStepStatus: (intentId, stepId) => relayerService.checkStepStatus(intentId, stepId)
|
|
4806
4872
|
});
|
|
4873
|
+
useEffect(() => {
|
|
4874
|
+
if (intentStatus?.overallStatus === "success" && intentStatus.intentId && spiceDepositSubmittedRef.current !== intentStatus.intentId && selectedDepositAsset && address) {
|
|
4875
|
+
const stepWithTxHash = intentStatus.steps.find(
|
|
4876
|
+
(step) => step.transactionHash
|
|
4877
|
+
);
|
|
4878
|
+
if (stepWithTxHash?.transactionHash) {
|
|
4879
|
+
spiceDepositSubmittedRef.current = intentStatus.intentId;
|
|
4880
|
+
const withdrawalAmount = parseUnits(
|
|
4881
|
+
selectedDepositAsset.amount,
|
|
4882
|
+
selectedDepositAsset.asset.decimals
|
|
4883
|
+
);
|
|
4884
|
+
relayerService.submitSpiceDeposit({
|
|
4885
|
+
user: address,
|
|
4886
|
+
txHash: stepWithTxHash.transactionHash,
|
|
4887
|
+
sender: address,
|
|
4888
|
+
tokenAddress: selectedDepositAsset.asset.address,
|
|
4889
|
+
chainId: selectedDepositAsset.asset.chainId,
|
|
4890
|
+
amount: withdrawalAmount.toString(),
|
|
4891
|
+
isDeposit: false
|
|
4892
|
+
}).then(() => {
|
|
4893
|
+
refreshSpiceAssets();
|
|
4894
|
+
}).catch(() => {
|
|
4895
|
+
spiceDepositSubmittedRef.current = null;
|
|
4896
|
+
});
|
|
4897
|
+
}
|
|
4898
|
+
}
|
|
4899
|
+
}, [intentStatus, address]);
|
|
4807
4900
|
useEffect(() => {
|
|
4808
4901
|
if (depositInputHook && depositInputHook.depositAmount !== selectedDepositAsset?.amount) {
|
|
4809
4902
|
if (selectedDepositAsset) {
|
|
@@ -4900,41 +4993,12 @@ const DepositWidget = ({
|
|
|
4900
4993
|
};
|
|
4901
4994
|
const result = await relayerService.submitTransaction(submitRequest);
|
|
4902
4995
|
if (result) {
|
|
4903
|
-
useEffect(() => {
|
|
4904
|
-
if (intentStatus?.overallStatus === "success" && intentStatus.intentId && spiceDepositSubmittedRef.current !== intentStatus.intentId && selectedDepositAsset && address) {
|
|
4905
|
-
const stepWithTxHash = intentStatus.steps.find(
|
|
4906
|
-
(step) => step.transactionHash
|
|
4907
|
-
);
|
|
4908
|
-
if (stepWithTxHash?.transactionHash) {
|
|
4909
|
-
spiceDepositSubmittedRef.current = intentStatus.intentId;
|
|
4910
|
-
const withdrawalAmount = parseUnits(
|
|
4911
|
-
selectedDepositAsset.amount,
|
|
4912
|
-
selectedDepositAsset.asset.decimals
|
|
4913
|
-
);
|
|
4914
|
-
relayerService.submitSpiceDeposit({
|
|
4915
|
-
user: address,
|
|
4916
|
-
txHash: stepWithTxHash.transactionHash,
|
|
4917
|
-
sender: address,
|
|
4918
|
-
tokenAddress: selectedDepositAsset.asset.address,
|
|
4919
|
-
chainId: selectedDepositAsset.asset.chainId,
|
|
4920
|
-
amount: withdrawalAmount.toString(),
|
|
4921
|
-
isDeposit: false
|
|
4922
|
-
}).then(() => {
|
|
4923
|
-
refreshSpiceAssets();
|
|
4924
|
-
}).catch((error2) => {
|
|
4925
|
-
console.error("Failed to submit spice deposit:", error2);
|
|
4926
|
-
spiceDepositSubmittedRef.current = null;
|
|
4927
|
-
});
|
|
4928
|
-
}
|
|
4929
|
-
}
|
|
4930
|
-
}, [intentStatus, selectedDepositAsset, address, refreshSpiceAssets]);
|
|
4931
4996
|
const getChainName = (chainId) => {
|
|
4932
4997
|
return `Chain ${chainId}`;
|
|
4933
4998
|
};
|
|
4934
4999
|
const initialSteps = createInitialSteps(allChainBatches, getChainName);
|
|
4935
5000
|
startStatusPolling(result.intentId, initialSteps);
|
|
4936
5001
|
onDepositSuccess?.(result.intentId);
|
|
4937
|
-
refreshSpiceAssets();
|
|
4938
5002
|
}
|
|
4939
5003
|
} catch (error2) {
|
|
4940
5004
|
const errorMessage = error2 instanceof Error ? error2.message : "Deposit failed";
|