@spicenet-io/spiceflow-ui 1.6.4 → 1.6.6
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/components/SpiceDeposit/SpiceDeposit.d.ts +1 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/index.cjs.js +295 -42
- package/dist/index.d.ts +2 -2
- package/dist/index.js +295 -43
- package/dist/types/deposit.d.ts +1 -0
- package/package.json +1 -1
|
@@ -15,5 +15,6 @@ export interface SpiceDepositProps {
|
|
|
15
15
|
destinationTokenAddress?: string;
|
|
16
16
|
postDepositInstruction?: (bridgedAmount: string) => Promise<void> | void;
|
|
17
17
|
postDepositInstructionLabel?: string;
|
|
18
|
+
airdrop?: boolean;
|
|
18
19
|
}
|
|
19
20
|
export declare const SpiceDeposit: React.FC<SpiceDepositProps>;
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -6,6 +6,8 @@ export { useFromInput } from "./useFromInput";
|
|
|
6
6
|
export type { UseFromInputReturn } from "./useFromInput";
|
|
7
7
|
export { useToInputUpdate } from "./useToInputUpdate";
|
|
8
8
|
export type { UseToInputUpdateReturn } from "./useToInputUpdate";
|
|
9
|
+
export { useDepositInput } from "./useDepositInput";
|
|
10
|
+
export type { UseDepositInputReturn } from "./useDepositInput";
|
|
9
11
|
export { useWallet } from "./useWallet";
|
|
10
12
|
export type { UseWalletReturn, WalletState, WalletActions } from "./useWallet";
|
|
11
13
|
export { useEmbeddedWalletAddress } from "./useEmbeddedWalletAddress";
|
package/dist/index.cjs.js
CHANGED
|
@@ -5459,6 +5459,7 @@ const ConnectWalletModal = ({
|
|
|
5459
5459
|
}
|
|
5460
5460
|
};
|
|
5461
5461
|
const canContinue = isConnected && !isSwitchingChain && !isConnecting && eligibilityStatus === "eligible" && (!requiredChainId || currentChain?.id === requiredChainId);
|
|
5462
|
+
const isWrongNetwork = isConnected && !isSwitchingChain && !isConnecting && eligibilityStatus === "eligible" && requiredChainId && currentChain?.id !== requiredChainId;
|
|
5462
5463
|
if (!isOpen) return null;
|
|
5463
5464
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5464
5465
|
"div",
|
|
@@ -5984,6 +5985,54 @@ const ConnectWalletModal = ({
|
|
|
5984
5985
|
]
|
|
5985
5986
|
}
|
|
5986
5987
|
),
|
|
5988
|
+
isWrongNetwork && !switchChainError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0 25px 20px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5989
|
+
"div",
|
|
5990
|
+
{
|
|
5991
|
+
style: {
|
|
5992
|
+
padding: "12px",
|
|
5993
|
+
backgroundColor: "#fef3c7",
|
|
5994
|
+
borderRadius: "8px",
|
|
5995
|
+
border: "1px solid #fde68a"
|
|
5996
|
+
},
|
|
5997
|
+
children: [
|
|
5998
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5999
|
+
"p",
|
|
6000
|
+
{
|
|
6001
|
+
style: {
|
|
6002
|
+
margin: "0 0 10px 0",
|
|
6003
|
+
color: "#92400e",
|
|
6004
|
+
fontSize: "14px"
|
|
6005
|
+
},
|
|
6006
|
+
children: [
|
|
6007
|
+
"Please switch to ",
|
|
6008
|
+
selectedChainName,
|
|
6009
|
+
" to continue."
|
|
6010
|
+
]
|
|
6011
|
+
}
|
|
6012
|
+
),
|
|
6013
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6014
|
+
"button",
|
|
6015
|
+
{
|
|
6016
|
+
onClick: handleSwitchChain,
|
|
6017
|
+
disabled: isSwitchingChain,
|
|
6018
|
+
style: {
|
|
6019
|
+
width: "100%",
|
|
6020
|
+
padding: "8px 12px",
|
|
6021
|
+
borderRadius: "6px",
|
|
6022
|
+
border: "1px solid #fbbf24",
|
|
6023
|
+
backgroundColor: "white",
|
|
6024
|
+
cursor: isSwitchingChain ? "not-allowed" : "pointer",
|
|
6025
|
+
fontWeight: 600,
|
|
6026
|
+
fontSize: "13px",
|
|
6027
|
+
color: "#92400e",
|
|
6028
|
+
opacity: isSwitchingChain ? 0.6 : 1
|
|
6029
|
+
},
|
|
6030
|
+
children: isSwitchingChain ? "Switching..." : "Switch Network"
|
|
6031
|
+
}
|
|
6032
|
+
)
|
|
6033
|
+
]
|
|
6034
|
+
}
|
|
6035
|
+
) }),
|
|
5987
6036
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0 25px 25px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5988
6037
|
"button",
|
|
5989
6038
|
{
|
|
@@ -6867,7 +6916,8 @@ const DepositModal = React.memo(
|
|
|
6867
6916
|
destinationTokenAddress,
|
|
6868
6917
|
postDepositInstruction,
|
|
6869
6918
|
postDepositInstructionLabel,
|
|
6870
|
-
nativeChainId
|
|
6919
|
+
nativeChainId,
|
|
6920
|
+
airdrop = false
|
|
6871
6921
|
}) => {
|
|
6872
6922
|
const depositAmount = depositInputHook?.depositAmount || "";
|
|
6873
6923
|
const setDepositAmount = depositInputHook?.setDepositAmount || (() => {
|
|
@@ -6922,6 +6972,7 @@ const DepositModal = React.memo(
|
|
|
6922
6972
|
const [postDepositAmount, setPostDepositAmount] = React.useState(
|
|
6923
6973
|
null
|
|
6924
6974
|
);
|
|
6975
|
+
const [showAirdropTooltip, setShowAirdropTooltip] = React.useState(false);
|
|
6925
6976
|
const {
|
|
6926
6977
|
intentStatus,
|
|
6927
6978
|
startStatusPolling,
|
|
@@ -7566,6 +7617,111 @@ const DepositModal = React.memo(
|
|
|
7566
7617
|
position: "relative"
|
|
7567
7618
|
},
|
|
7568
7619
|
children: [
|
|
7620
|
+
airdrop && index === 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7621
|
+
"div",
|
|
7622
|
+
{
|
|
7623
|
+
style: {
|
|
7624
|
+
display: "flex",
|
|
7625
|
+
justifyContent: "flex-end",
|
|
7626
|
+
alignItems: "center",
|
|
7627
|
+
gap: "4px",
|
|
7628
|
+
marginBottom: "8px"
|
|
7629
|
+
},
|
|
7630
|
+
children: [
|
|
7631
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7632
|
+
"button",
|
|
7633
|
+
{
|
|
7634
|
+
onClick: () => {
|
|
7635
|
+
},
|
|
7636
|
+
style: {
|
|
7637
|
+
padding: "4px 8px",
|
|
7638
|
+
borderRadius: "4px",
|
|
7639
|
+
border: "1px solid #D1D5DB",
|
|
7640
|
+
background: "#E5E7EB",
|
|
7641
|
+
color: "#4B5563",
|
|
7642
|
+
fontSize: "11px",
|
|
7643
|
+
fontWeight: 500,
|
|
7644
|
+
cursor: "pointer",
|
|
7645
|
+
display: "flex",
|
|
7646
|
+
alignItems: "center",
|
|
7647
|
+
gap: "4px",
|
|
7648
|
+
transition: "all 0.2s",
|
|
7649
|
+
whiteSpace: "nowrap"
|
|
7650
|
+
},
|
|
7651
|
+
onMouseEnter: (e) => {
|
|
7652
|
+
e.currentTarget.style.color = "#1F2937";
|
|
7653
|
+
e.currentTarget.style.background = "#D1D5DB";
|
|
7654
|
+
},
|
|
7655
|
+
onMouseLeave: (e) => {
|
|
7656
|
+
e.currentTarget.style.color = "#4B5563";
|
|
7657
|
+
e.currentTarget.style.background = "#E5E7EB";
|
|
7658
|
+
},
|
|
7659
|
+
children: "Airdrop"
|
|
7660
|
+
}
|
|
7661
|
+
),
|
|
7662
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
7663
|
+
"div",
|
|
7664
|
+
{
|
|
7665
|
+
onMouseEnter: () => setShowAirdropTooltip(true),
|
|
7666
|
+
onMouseLeave: () => setShowAirdropTooltip(false),
|
|
7667
|
+
style: {
|
|
7668
|
+
position: "relative",
|
|
7669
|
+
width: "14px",
|
|
7670
|
+
height: "14px",
|
|
7671
|
+
borderRadius: "50%",
|
|
7672
|
+
backgroundColor: "#9CA3AF",
|
|
7673
|
+
color: "white",
|
|
7674
|
+
display: "flex",
|
|
7675
|
+
alignItems: "center",
|
|
7676
|
+
justifyContent: "center",
|
|
7677
|
+
fontSize: "9px",
|
|
7678
|
+
fontWeight: "bold",
|
|
7679
|
+
cursor: "help"
|
|
7680
|
+
},
|
|
7681
|
+
children: [
|
|
7682
|
+
"i",
|
|
7683
|
+
showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7684
|
+
"div",
|
|
7685
|
+
{
|
|
7686
|
+
style: {
|
|
7687
|
+
position: "absolute",
|
|
7688
|
+
bottom: "calc(100% + 8px)",
|
|
7689
|
+
right: 0,
|
|
7690
|
+
backgroundColor: "#1F2937",
|
|
7691
|
+
color: "white",
|
|
7692
|
+
padding: "8px 12px",
|
|
7693
|
+
borderRadius: "6px",
|
|
7694
|
+
fontSize: "12px",
|
|
7695
|
+
whiteSpace: "nowrap",
|
|
7696
|
+
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
7697
|
+
zIndex: 100
|
|
7698
|
+
},
|
|
7699
|
+
children: [
|
|
7700
|
+
"This is testnet USDC, and it won't be available on mainnet",
|
|
7701
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7702
|
+
"div",
|
|
7703
|
+
{
|
|
7704
|
+
style: {
|
|
7705
|
+
position: "absolute",
|
|
7706
|
+
top: "100%",
|
|
7707
|
+
right: "10px",
|
|
7708
|
+
width: 0,
|
|
7709
|
+
height: 0,
|
|
7710
|
+
borderLeft: "6px solid transparent",
|
|
7711
|
+
borderRight: "6px solid transparent",
|
|
7712
|
+
borderTop: "6px solid #1F2937"
|
|
7713
|
+
}
|
|
7714
|
+
}
|
|
7715
|
+
)
|
|
7716
|
+
]
|
|
7717
|
+
}
|
|
7718
|
+
)
|
|
7719
|
+
]
|
|
7720
|
+
}
|
|
7721
|
+
)
|
|
7722
|
+
]
|
|
7723
|
+
}
|
|
7724
|
+
),
|
|
7569
7725
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7570
7726
|
AssetSelector,
|
|
7571
7727
|
{
|
|
@@ -7625,24 +7781,131 @@ const DepositModal = React.memo(
|
|
|
7625
7781
|
`asset-${index}`
|
|
7626
7782
|
);
|
|
7627
7783
|
}),
|
|
7628
|
-
selectedDepositAssets.length === 0 && /* @__PURE__ */ jsxRuntime.
|
|
7629
|
-
|
|
7630
|
-
|
|
7631
|
-
|
|
7632
|
-
|
|
7633
|
-
|
|
7634
|
-
|
|
7635
|
-
|
|
7636
|
-
|
|
7637
|
-
|
|
7638
|
-
|
|
7639
|
-
|
|
7640
|
-
|
|
7641
|
-
|
|
7642
|
-
|
|
7643
|
-
|
|
7644
|
-
|
|
7645
|
-
|
|
7784
|
+
selectedDepositAssets.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: theme.spacing.md }, children: [
|
|
7785
|
+
airdrop && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7786
|
+
"div",
|
|
7787
|
+
{
|
|
7788
|
+
style: {
|
|
7789
|
+
display: "flex",
|
|
7790
|
+
justifyContent: "flex-end",
|
|
7791
|
+
alignItems: "center",
|
|
7792
|
+
gap: "4px",
|
|
7793
|
+
marginBottom: "8px"
|
|
7794
|
+
},
|
|
7795
|
+
children: [
|
|
7796
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7797
|
+
"button",
|
|
7798
|
+
{
|
|
7799
|
+
onClick: () => {
|
|
7800
|
+
},
|
|
7801
|
+
style: {
|
|
7802
|
+
padding: "4px 8px",
|
|
7803
|
+
borderRadius: "4px",
|
|
7804
|
+
border: "1px solid #D1D5DB",
|
|
7805
|
+
background: "#E5E7EB",
|
|
7806
|
+
color: "#4B5563",
|
|
7807
|
+
fontSize: "11px",
|
|
7808
|
+
fontWeight: 500,
|
|
7809
|
+
cursor: "pointer",
|
|
7810
|
+
display: "flex",
|
|
7811
|
+
alignItems: "center",
|
|
7812
|
+
gap: "4px",
|
|
7813
|
+
transition: "all 0.2s",
|
|
7814
|
+
whiteSpace: "nowrap"
|
|
7815
|
+
},
|
|
7816
|
+
onMouseEnter: (e) => {
|
|
7817
|
+
e.currentTarget.style.color = "#1F2937";
|
|
7818
|
+
e.currentTarget.style.background = "#D1D5DB";
|
|
7819
|
+
},
|
|
7820
|
+
onMouseLeave: (e) => {
|
|
7821
|
+
e.currentTarget.style.color = "#4B5563";
|
|
7822
|
+
e.currentTarget.style.background = "#E5E7EB";
|
|
7823
|
+
},
|
|
7824
|
+
children: "Airdrop"
|
|
7825
|
+
}
|
|
7826
|
+
),
|
|
7827
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
7828
|
+
"div",
|
|
7829
|
+
{
|
|
7830
|
+
onMouseEnter: () => setShowAirdropTooltip(true),
|
|
7831
|
+
onMouseLeave: () => setShowAirdropTooltip(false),
|
|
7832
|
+
style: {
|
|
7833
|
+
position: "relative",
|
|
7834
|
+
width: "14px",
|
|
7835
|
+
height: "14px",
|
|
7836
|
+
borderRadius: "50%",
|
|
7837
|
+
backgroundColor: "#9CA3AF",
|
|
7838
|
+
color: "white",
|
|
7839
|
+
display: "flex",
|
|
7840
|
+
alignItems: "center",
|
|
7841
|
+
justifyContent: "center",
|
|
7842
|
+
fontSize: "9px",
|
|
7843
|
+
fontWeight: "bold",
|
|
7844
|
+
cursor: "help"
|
|
7845
|
+
},
|
|
7846
|
+
children: [
|
|
7847
|
+
"i",
|
|
7848
|
+
showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7849
|
+
"div",
|
|
7850
|
+
{
|
|
7851
|
+
style: {
|
|
7852
|
+
position: "absolute",
|
|
7853
|
+
bottom: "calc(100% + 8px)",
|
|
7854
|
+
right: 0,
|
|
7855
|
+
backgroundColor: "#1F2937",
|
|
7856
|
+
color: "white",
|
|
7857
|
+
padding: "8px 12px",
|
|
7858
|
+
borderRadius: "6px",
|
|
7859
|
+
fontSize: "12px",
|
|
7860
|
+
whiteSpace: "nowrap",
|
|
7861
|
+
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
7862
|
+
zIndex: 100
|
|
7863
|
+
},
|
|
7864
|
+
children: [
|
|
7865
|
+
"This is testnet USDC, and it won't be available on mainnet",
|
|
7866
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7867
|
+
"div",
|
|
7868
|
+
{
|
|
7869
|
+
style: {
|
|
7870
|
+
position: "absolute",
|
|
7871
|
+
top: "100%",
|
|
7872
|
+
right: "10px",
|
|
7873
|
+
width: 0,
|
|
7874
|
+
height: 0,
|
|
7875
|
+
borderLeft: "6px solid transparent",
|
|
7876
|
+
borderRight: "6px solid transparent",
|
|
7877
|
+
borderTop: "6px solid #1F2937"
|
|
7878
|
+
}
|
|
7879
|
+
}
|
|
7880
|
+
)
|
|
7881
|
+
]
|
|
7882
|
+
}
|
|
7883
|
+
)
|
|
7884
|
+
]
|
|
7885
|
+
}
|
|
7886
|
+
)
|
|
7887
|
+
]
|
|
7888
|
+
}
|
|
7889
|
+
),
|
|
7890
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
7891
|
+
AssetSelector,
|
|
7892
|
+
{
|
|
7893
|
+
assets: depositAssets,
|
|
7894
|
+
selectedAsset: void 0,
|
|
7895
|
+
onAssetSelect: (asset) => handleDepositAssetSelect(asset, 0),
|
|
7896
|
+
onAmountChange: (amount) => handleDepositAmountChange(amount, 0),
|
|
7897
|
+
loading: loadingAssets,
|
|
7898
|
+
label: "Deposit",
|
|
7899
|
+
showBalance: true,
|
|
7900
|
+
theme,
|
|
7901
|
+
styles,
|
|
7902
|
+
allowSecondAsset,
|
|
7903
|
+
onAddAsset: handleAddAsset,
|
|
7904
|
+
canAddAsset: false
|
|
7905
|
+
},
|
|
7906
|
+
"initial-selector"
|
|
7907
|
+
)
|
|
7908
|
+
] }),
|
|
7646
7909
|
chainBatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
7647
7910
|
"div",
|
|
7648
7911
|
{
|
|
@@ -7829,7 +8092,8 @@ const SpiceDepositFlow = ({
|
|
|
7829
8092
|
destinationChainId,
|
|
7830
8093
|
destinationTokenAddress,
|
|
7831
8094
|
postDepositInstruction,
|
|
7832
|
-
postDepositInstructionLabel
|
|
8095
|
+
postDepositInstructionLabel,
|
|
8096
|
+
airdrop = false
|
|
7833
8097
|
}) => {
|
|
7834
8098
|
const context = React.useContext(SpiceFlowProviderContext);
|
|
7835
8099
|
if (!context) {
|
|
@@ -7957,7 +8221,8 @@ const SpiceDepositFlow = ({
|
|
|
7957
8221
|
destinationTokenAddress,
|
|
7958
8222
|
postDepositInstruction,
|
|
7959
8223
|
postDepositInstructionLabel,
|
|
7960
|
-
nativeChainId
|
|
8224
|
+
nativeChainId,
|
|
8225
|
+
airdrop
|
|
7961
8226
|
}
|
|
7962
8227
|
);
|
|
7963
8228
|
}
|
|
@@ -9829,20 +10094,16 @@ const SpiceBalance = ({
|
|
|
9829
10094
|
const [fetchedVaultBalance, setFetchedVaultBalance] = React.useState(
|
|
9830
10095
|
null
|
|
9831
10096
|
);
|
|
9832
|
-
const [loadingVaultBalance, setLoadingVaultBalance] = React.useState(false);
|
|
9833
10097
|
const { isConnected } = wagmi.useAccount();
|
|
9834
10098
|
const { disconnect } = wagmi.useDisconnect();
|
|
9835
10099
|
React.useEffect(() => {
|
|
9836
10100
|
if (nonEip7702Mode && fetchVaultBalance) {
|
|
9837
|
-
setLoadingVaultBalance(true);
|
|
9838
10101
|
fetchVaultBalance().then((balance) => {
|
|
9839
10102
|
const roundedBalance = Math.round(balance * 1e5) / 1e5;
|
|
9840
10103
|
setFetchedVaultBalance(roundedBalance);
|
|
9841
10104
|
}).catch((err) => {
|
|
9842
10105
|
console.error("Error fetching vault balance:", err);
|
|
9843
10106
|
setFetchedVaultBalance(null);
|
|
9844
|
-
}).finally(() => {
|
|
9845
|
-
setLoadingVaultBalance(false);
|
|
9846
10107
|
});
|
|
9847
10108
|
}
|
|
9848
10109
|
}, [nonEip7702Mode, fetchVaultBalance]);
|
|
@@ -9929,23 +10190,6 @@ const SpiceBalance = ({
|
|
|
9929
10190
|
setIsDepositModalOpen(false);
|
|
9930
10191
|
setIsWithdrawModalOpen(false);
|
|
9931
10192
|
};
|
|
9932
|
-
if (isLoading) {
|
|
9933
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
9934
|
-
"div",
|
|
9935
|
-
{
|
|
9936
|
-
className,
|
|
9937
|
-
style: {
|
|
9938
|
-
padding: "24px",
|
|
9939
|
-
backgroundColor: "#FFFFFF",
|
|
9940
|
-
borderRadius: "16px",
|
|
9941
|
-
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
9942
|
-
maxWidth: "480px",
|
|
9943
|
-
...styles?.container
|
|
9944
|
-
},
|
|
9945
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", color: "#6B7280" }, children: "Loading balance..." })
|
|
9946
|
-
}
|
|
9947
|
-
);
|
|
9948
|
-
}
|
|
9949
10193
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9950
10194
|
"div",
|
|
9951
10195
|
{
|
|
@@ -11691,6 +11935,14 @@ const useToInputUpdate = () => {
|
|
|
11691
11935
|
};
|
|
11692
11936
|
};
|
|
11693
11937
|
|
|
11938
|
+
const useDepositInput = () => {
|
|
11939
|
+
const [depositAmount, setDepositAmount] = React.useState("");
|
|
11940
|
+
return {
|
|
11941
|
+
depositAmount,
|
|
11942
|
+
setDepositAmount
|
|
11943
|
+
};
|
|
11944
|
+
};
|
|
11945
|
+
|
|
11694
11946
|
exports.ConnectWalletModal = ConnectWalletModal;
|
|
11695
11947
|
exports.DepositModal = DepositModal;
|
|
11696
11948
|
exports.DepositWidget = DepositWidget;
|
|
@@ -11707,6 +11959,7 @@ exports.SwapWidget = SwapWidget;
|
|
|
11707
11959
|
exports.WithdrawModal = WithdrawModal;
|
|
11708
11960
|
exports.fetchBalances = fetchBalances;
|
|
11709
11961
|
exports.useAssets = useAssets;
|
|
11962
|
+
exports.useDepositInput = useDepositInput;
|
|
11710
11963
|
exports.useFromInput = useFromInput;
|
|
11711
11964
|
exports.useSpiceBalance = useSpiceBalance;
|
|
11712
11965
|
exports.useStatus = useStatus;
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,6 @@ export type { SpiceWithdrawProps } from "./components/SpiceWithdraw/SpiceWithdra
|
|
|
18
18
|
export type { SpiceBalanceProps, BalanceData, TradingAccount, AccountItem, } from "./types/balance";
|
|
19
19
|
export type { WithdrawAsset, SpiceWithdrawRequest, SpiceWithdrawResponse, WithdrawModalProps, } from "./types/withdraw";
|
|
20
20
|
export type { LpModalProps } from "./types/lp";
|
|
21
|
-
export { useAssets, fetchBalances, useStatus, useFromInput, useToInputUpdate, useWallet, useSpiceBalance, } from "./hooks";
|
|
22
|
-
export type { UseAssetsConfig, UseAssetsReturn, UseStatusConfig, UseStatusReturn, UseFromInputReturn, UseToInputUpdateReturn, UseWalletReturn, WalletState, WalletActions, UseSpiceBalanceConfig, UseSpiceBalanceReturn, SpiceBalanceApiResponse, } from "./hooks";
|
|
21
|
+
export { useAssets, fetchBalances, useStatus, useFromInput, useToInputUpdate, useDepositInput, useWallet, useSpiceBalance, } from "./hooks";
|
|
22
|
+
export type { UseAssetsConfig, UseAssetsReturn, UseStatusConfig, UseStatusReturn, UseFromInputReturn, UseToInputUpdateReturn, UseDepositInputReturn, UseWalletReturn, WalletState, WalletActions, UseSpiceBalanceConfig, UseSpiceBalanceReturn, SpiceBalanceApiResponse, } from "./hooks";
|
|
23
23
|
export type { WalletProvider, WalletLoginProps, ProviderConfig, } from "./types/wallet";
|
package/dist/index.js
CHANGED
|
@@ -5457,6 +5457,7 @@ const ConnectWalletModal = ({
|
|
|
5457
5457
|
}
|
|
5458
5458
|
};
|
|
5459
5459
|
const canContinue = isConnected && !isSwitchingChain && !isConnecting && eligibilityStatus === "eligible" && (!requiredChainId || currentChain?.id === requiredChainId);
|
|
5460
|
+
const isWrongNetwork = isConnected && !isSwitchingChain && !isConnecting && eligibilityStatus === "eligible" && requiredChainId && currentChain?.id !== requiredChainId;
|
|
5460
5461
|
if (!isOpen) return null;
|
|
5461
5462
|
return /* @__PURE__ */ jsx(
|
|
5462
5463
|
"div",
|
|
@@ -5982,6 +5983,54 @@ const ConnectWalletModal = ({
|
|
|
5982
5983
|
]
|
|
5983
5984
|
}
|
|
5984
5985
|
),
|
|
5986
|
+
isWrongNetwork && !switchChainError && /* @__PURE__ */ jsx("div", { style: { padding: "0 25px 20px" }, children: /* @__PURE__ */ jsxs(
|
|
5987
|
+
"div",
|
|
5988
|
+
{
|
|
5989
|
+
style: {
|
|
5990
|
+
padding: "12px",
|
|
5991
|
+
backgroundColor: "#fef3c7",
|
|
5992
|
+
borderRadius: "8px",
|
|
5993
|
+
border: "1px solid #fde68a"
|
|
5994
|
+
},
|
|
5995
|
+
children: [
|
|
5996
|
+
/* @__PURE__ */ jsxs(
|
|
5997
|
+
"p",
|
|
5998
|
+
{
|
|
5999
|
+
style: {
|
|
6000
|
+
margin: "0 0 10px 0",
|
|
6001
|
+
color: "#92400e",
|
|
6002
|
+
fontSize: "14px"
|
|
6003
|
+
},
|
|
6004
|
+
children: [
|
|
6005
|
+
"Please switch to ",
|
|
6006
|
+
selectedChainName,
|
|
6007
|
+
" to continue."
|
|
6008
|
+
]
|
|
6009
|
+
}
|
|
6010
|
+
),
|
|
6011
|
+
/* @__PURE__ */ jsx(
|
|
6012
|
+
"button",
|
|
6013
|
+
{
|
|
6014
|
+
onClick: handleSwitchChain,
|
|
6015
|
+
disabled: isSwitchingChain,
|
|
6016
|
+
style: {
|
|
6017
|
+
width: "100%",
|
|
6018
|
+
padding: "8px 12px",
|
|
6019
|
+
borderRadius: "6px",
|
|
6020
|
+
border: "1px solid #fbbf24",
|
|
6021
|
+
backgroundColor: "white",
|
|
6022
|
+
cursor: isSwitchingChain ? "not-allowed" : "pointer",
|
|
6023
|
+
fontWeight: 600,
|
|
6024
|
+
fontSize: "13px",
|
|
6025
|
+
color: "#92400e",
|
|
6026
|
+
opacity: isSwitchingChain ? 0.6 : 1
|
|
6027
|
+
},
|
|
6028
|
+
children: isSwitchingChain ? "Switching..." : "Switch Network"
|
|
6029
|
+
}
|
|
6030
|
+
)
|
|
6031
|
+
]
|
|
6032
|
+
}
|
|
6033
|
+
) }),
|
|
5985
6034
|
/* @__PURE__ */ jsx("div", { style: { padding: "0 25px 25px" }, children: /* @__PURE__ */ jsxs(
|
|
5986
6035
|
"button",
|
|
5987
6036
|
{
|
|
@@ -6865,7 +6914,8 @@ const DepositModal = React.memo(
|
|
|
6865
6914
|
destinationTokenAddress,
|
|
6866
6915
|
postDepositInstruction,
|
|
6867
6916
|
postDepositInstructionLabel,
|
|
6868
|
-
nativeChainId
|
|
6917
|
+
nativeChainId,
|
|
6918
|
+
airdrop = false
|
|
6869
6919
|
}) => {
|
|
6870
6920
|
const depositAmount = depositInputHook?.depositAmount || "";
|
|
6871
6921
|
const setDepositAmount = depositInputHook?.setDepositAmount || (() => {
|
|
@@ -6920,6 +6970,7 @@ const DepositModal = React.memo(
|
|
|
6920
6970
|
const [postDepositAmount, setPostDepositAmount] = useState(
|
|
6921
6971
|
null
|
|
6922
6972
|
);
|
|
6973
|
+
const [showAirdropTooltip, setShowAirdropTooltip] = useState(false);
|
|
6923
6974
|
const {
|
|
6924
6975
|
intentStatus,
|
|
6925
6976
|
startStatusPolling,
|
|
@@ -7564,6 +7615,111 @@ const DepositModal = React.memo(
|
|
|
7564
7615
|
position: "relative"
|
|
7565
7616
|
},
|
|
7566
7617
|
children: [
|
|
7618
|
+
airdrop && index === 0 && /* @__PURE__ */ jsxs(
|
|
7619
|
+
"div",
|
|
7620
|
+
{
|
|
7621
|
+
style: {
|
|
7622
|
+
display: "flex",
|
|
7623
|
+
justifyContent: "flex-end",
|
|
7624
|
+
alignItems: "center",
|
|
7625
|
+
gap: "4px",
|
|
7626
|
+
marginBottom: "8px"
|
|
7627
|
+
},
|
|
7628
|
+
children: [
|
|
7629
|
+
/* @__PURE__ */ jsx(
|
|
7630
|
+
"button",
|
|
7631
|
+
{
|
|
7632
|
+
onClick: () => {
|
|
7633
|
+
},
|
|
7634
|
+
style: {
|
|
7635
|
+
padding: "4px 8px",
|
|
7636
|
+
borderRadius: "4px",
|
|
7637
|
+
border: "1px solid #D1D5DB",
|
|
7638
|
+
background: "#E5E7EB",
|
|
7639
|
+
color: "#4B5563",
|
|
7640
|
+
fontSize: "11px",
|
|
7641
|
+
fontWeight: 500,
|
|
7642
|
+
cursor: "pointer",
|
|
7643
|
+
display: "flex",
|
|
7644
|
+
alignItems: "center",
|
|
7645
|
+
gap: "4px",
|
|
7646
|
+
transition: "all 0.2s",
|
|
7647
|
+
whiteSpace: "nowrap"
|
|
7648
|
+
},
|
|
7649
|
+
onMouseEnter: (e) => {
|
|
7650
|
+
e.currentTarget.style.color = "#1F2937";
|
|
7651
|
+
e.currentTarget.style.background = "#D1D5DB";
|
|
7652
|
+
},
|
|
7653
|
+
onMouseLeave: (e) => {
|
|
7654
|
+
e.currentTarget.style.color = "#4B5563";
|
|
7655
|
+
e.currentTarget.style.background = "#E5E7EB";
|
|
7656
|
+
},
|
|
7657
|
+
children: "Airdrop"
|
|
7658
|
+
}
|
|
7659
|
+
),
|
|
7660
|
+
/* @__PURE__ */ jsxs(
|
|
7661
|
+
"div",
|
|
7662
|
+
{
|
|
7663
|
+
onMouseEnter: () => setShowAirdropTooltip(true),
|
|
7664
|
+
onMouseLeave: () => setShowAirdropTooltip(false),
|
|
7665
|
+
style: {
|
|
7666
|
+
position: "relative",
|
|
7667
|
+
width: "14px",
|
|
7668
|
+
height: "14px",
|
|
7669
|
+
borderRadius: "50%",
|
|
7670
|
+
backgroundColor: "#9CA3AF",
|
|
7671
|
+
color: "white",
|
|
7672
|
+
display: "flex",
|
|
7673
|
+
alignItems: "center",
|
|
7674
|
+
justifyContent: "center",
|
|
7675
|
+
fontSize: "9px",
|
|
7676
|
+
fontWeight: "bold",
|
|
7677
|
+
cursor: "help"
|
|
7678
|
+
},
|
|
7679
|
+
children: [
|
|
7680
|
+
"i",
|
|
7681
|
+
showAirdropTooltip && /* @__PURE__ */ jsxs(
|
|
7682
|
+
"div",
|
|
7683
|
+
{
|
|
7684
|
+
style: {
|
|
7685
|
+
position: "absolute",
|
|
7686
|
+
bottom: "calc(100% + 8px)",
|
|
7687
|
+
right: 0,
|
|
7688
|
+
backgroundColor: "#1F2937",
|
|
7689
|
+
color: "white",
|
|
7690
|
+
padding: "8px 12px",
|
|
7691
|
+
borderRadius: "6px",
|
|
7692
|
+
fontSize: "12px",
|
|
7693
|
+
whiteSpace: "nowrap",
|
|
7694
|
+
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
7695
|
+
zIndex: 100
|
|
7696
|
+
},
|
|
7697
|
+
children: [
|
|
7698
|
+
"This is testnet USDC, and it won't be available on mainnet",
|
|
7699
|
+
/* @__PURE__ */ jsx(
|
|
7700
|
+
"div",
|
|
7701
|
+
{
|
|
7702
|
+
style: {
|
|
7703
|
+
position: "absolute",
|
|
7704
|
+
top: "100%",
|
|
7705
|
+
right: "10px",
|
|
7706
|
+
width: 0,
|
|
7707
|
+
height: 0,
|
|
7708
|
+
borderLeft: "6px solid transparent",
|
|
7709
|
+
borderRight: "6px solid transparent",
|
|
7710
|
+
borderTop: "6px solid #1F2937"
|
|
7711
|
+
}
|
|
7712
|
+
}
|
|
7713
|
+
)
|
|
7714
|
+
]
|
|
7715
|
+
}
|
|
7716
|
+
)
|
|
7717
|
+
]
|
|
7718
|
+
}
|
|
7719
|
+
)
|
|
7720
|
+
]
|
|
7721
|
+
}
|
|
7722
|
+
),
|
|
7567
7723
|
/* @__PURE__ */ jsx(
|
|
7568
7724
|
AssetSelector,
|
|
7569
7725
|
{
|
|
@@ -7623,24 +7779,131 @@ const DepositModal = React.memo(
|
|
|
7623
7779
|
`asset-${index}`
|
|
7624
7780
|
);
|
|
7625
7781
|
}),
|
|
7626
|
-
selectedDepositAssets.length === 0 && /* @__PURE__ */
|
|
7627
|
-
|
|
7628
|
-
|
|
7629
|
-
|
|
7630
|
-
|
|
7631
|
-
|
|
7632
|
-
|
|
7633
|
-
|
|
7634
|
-
|
|
7635
|
-
|
|
7636
|
-
|
|
7637
|
-
|
|
7638
|
-
|
|
7639
|
-
|
|
7640
|
-
|
|
7641
|
-
|
|
7642
|
-
|
|
7643
|
-
|
|
7782
|
+
selectedDepositAssets.length === 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: theme.spacing.md }, children: [
|
|
7783
|
+
airdrop && /* @__PURE__ */ jsxs(
|
|
7784
|
+
"div",
|
|
7785
|
+
{
|
|
7786
|
+
style: {
|
|
7787
|
+
display: "flex",
|
|
7788
|
+
justifyContent: "flex-end",
|
|
7789
|
+
alignItems: "center",
|
|
7790
|
+
gap: "4px",
|
|
7791
|
+
marginBottom: "8px"
|
|
7792
|
+
},
|
|
7793
|
+
children: [
|
|
7794
|
+
/* @__PURE__ */ jsx(
|
|
7795
|
+
"button",
|
|
7796
|
+
{
|
|
7797
|
+
onClick: () => {
|
|
7798
|
+
},
|
|
7799
|
+
style: {
|
|
7800
|
+
padding: "4px 8px",
|
|
7801
|
+
borderRadius: "4px",
|
|
7802
|
+
border: "1px solid #D1D5DB",
|
|
7803
|
+
background: "#E5E7EB",
|
|
7804
|
+
color: "#4B5563",
|
|
7805
|
+
fontSize: "11px",
|
|
7806
|
+
fontWeight: 500,
|
|
7807
|
+
cursor: "pointer",
|
|
7808
|
+
display: "flex",
|
|
7809
|
+
alignItems: "center",
|
|
7810
|
+
gap: "4px",
|
|
7811
|
+
transition: "all 0.2s",
|
|
7812
|
+
whiteSpace: "nowrap"
|
|
7813
|
+
},
|
|
7814
|
+
onMouseEnter: (e) => {
|
|
7815
|
+
e.currentTarget.style.color = "#1F2937";
|
|
7816
|
+
e.currentTarget.style.background = "#D1D5DB";
|
|
7817
|
+
},
|
|
7818
|
+
onMouseLeave: (e) => {
|
|
7819
|
+
e.currentTarget.style.color = "#4B5563";
|
|
7820
|
+
e.currentTarget.style.background = "#E5E7EB";
|
|
7821
|
+
},
|
|
7822
|
+
children: "Airdrop"
|
|
7823
|
+
}
|
|
7824
|
+
),
|
|
7825
|
+
/* @__PURE__ */ jsxs(
|
|
7826
|
+
"div",
|
|
7827
|
+
{
|
|
7828
|
+
onMouseEnter: () => setShowAirdropTooltip(true),
|
|
7829
|
+
onMouseLeave: () => setShowAirdropTooltip(false),
|
|
7830
|
+
style: {
|
|
7831
|
+
position: "relative",
|
|
7832
|
+
width: "14px",
|
|
7833
|
+
height: "14px",
|
|
7834
|
+
borderRadius: "50%",
|
|
7835
|
+
backgroundColor: "#9CA3AF",
|
|
7836
|
+
color: "white",
|
|
7837
|
+
display: "flex",
|
|
7838
|
+
alignItems: "center",
|
|
7839
|
+
justifyContent: "center",
|
|
7840
|
+
fontSize: "9px",
|
|
7841
|
+
fontWeight: "bold",
|
|
7842
|
+
cursor: "help"
|
|
7843
|
+
},
|
|
7844
|
+
children: [
|
|
7845
|
+
"i",
|
|
7846
|
+
showAirdropTooltip && /* @__PURE__ */ jsxs(
|
|
7847
|
+
"div",
|
|
7848
|
+
{
|
|
7849
|
+
style: {
|
|
7850
|
+
position: "absolute",
|
|
7851
|
+
bottom: "calc(100% + 8px)",
|
|
7852
|
+
right: 0,
|
|
7853
|
+
backgroundColor: "#1F2937",
|
|
7854
|
+
color: "white",
|
|
7855
|
+
padding: "8px 12px",
|
|
7856
|
+
borderRadius: "6px",
|
|
7857
|
+
fontSize: "12px",
|
|
7858
|
+
whiteSpace: "nowrap",
|
|
7859
|
+
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
7860
|
+
zIndex: 100
|
|
7861
|
+
},
|
|
7862
|
+
children: [
|
|
7863
|
+
"This is testnet USDC, and it won't be available on mainnet",
|
|
7864
|
+
/* @__PURE__ */ jsx(
|
|
7865
|
+
"div",
|
|
7866
|
+
{
|
|
7867
|
+
style: {
|
|
7868
|
+
position: "absolute",
|
|
7869
|
+
top: "100%",
|
|
7870
|
+
right: "10px",
|
|
7871
|
+
width: 0,
|
|
7872
|
+
height: 0,
|
|
7873
|
+
borderLeft: "6px solid transparent",
|
|
7874
|
+
borderRight: "6px solid transparent",
|
|
7875
|
+
borderTop: "6px solid #1F2937"
|
|
7876
|
+
}
|
|
7877
|
+
}
|
|
7878
|
+
)
|
|
7879
|
+
]
|
|
7880
|
+
}
|
|
7881
|
+
)
|
|
7882
|
+
]
|
|
7883
|
+
}
|
|
7884
|
+
)
|
|
7885
|
+
]
|
|
7886
|
+
}
|
|
7887
|
+
),
|
|
7888
|
+
/* @__PURE__ */ jsx(
|
|
7889
|
+
AssetSelector,
|
|
7890
|
+
{
|
|
7891
|
+
assets: depositAssets,
|
|
7892
|
+
selectedAsset: void 0,
|
|
7893
|
+
onAssetSelect: (asset) => handleDepositAssetSelect(asset, 0),
|
|
7894
|
+
onAmountChange: (amount) => handleDepositAmountChange(amount, 0),
|
|
7895
|
+
loading: loadingAssets,
|
|
7896
|
+
label: "Deposit",
|
|
7897
|
+
showBalance: true,
|
|
7898
|
+
theme,
|
|
7899
|
+
styles,
|
|
7900
|
+
allowSecondAsset,
|
|
7901
|
+
onAddAsset: handleAddAsset,
|
|
7902
|
+
canAddAsset: false
|
|
7903
|
+
},
|
|
7904
|
+
"initial-selector"
|
|
7905
|
+
)
|
|
7906
|
+
] }),
|
|
7644
7907
|
chainBatches.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxs(
|
|
7645
7908
|
"div",
|
|
7646
7909
|
{
|
|
@@ -7827,7 +8090,8 @@ const SpiceDepositFlow = ({
|
|
|
7827
8090
|
destinationChainId,
|
|
7828
8091
|
destinationTokenAddress,
|
|
7829
8092
|
postDepositInstruction,
|
|
7830
|
-
postDepositInstructionLabel
|
|
8093
|
+
postDepositInstructionLabel,
|
|
8094
|
+
airdrop = false
|
|
7831
8095
|
}) => {
|
|
7832
8096
|
const context = useContext(SpiceFlowProviderContext);
|
|
7833
8097
|
if (!context) {
|
|
@@ -7955,7 +8219,8 @@ const SpiceDepositFlow = ({
|
|
|
7955
8219
|
destinationTokenAddress,
|
|
7956
8220
|
postDepositInstruction,
|
|
7957
8221
|
postDepositInstructionLabel,
|
|
7958
|
-
nativeChainId
|
|
8222
|
+
nativeChainId,
|
|
8223
|
+
airdrop
|
|
7959
8224
|
}
|
|
7960
8225
|
);
|
|
7961
8226
|
}
|
|
@@ -9827,20 +10092,16 @@ const SpiceBalance = ({
|
|
|
9827
10092
|
const [fetchedVaultBalance, setFetchedVaultBalance] = useState(
|
|
9828
10093
|
null
|
|
9829
10094
|
);
|
|
9830
|
-
const [loadingVaultBalance, setLoadingVaultBalance] = useState(false);
|
|
9831
10095
|
const { isConnected } = useAccount();
|
|
9832
10096
|
const { disconnect } = useDisconnect();
|
|
9833
10097
|
useEffect(() => {
|
|
9834
10098
|
if (nonEip7702Mode && fetchVaultBalance) {
|
|
9835
|
-
setLoadingVaultBalance(true);
|
|
9836
10099
|
fetchVaultBalance().then((balance) => {
|
|
9837
10100
|
const roundedBalance = Math.round(balance * 1e5) / 1e5;
|
|
9838
10101
|
setFetchedVaultBalance(roundedBalance);
|
|
9839
10102
|
}).catch((err) => {
|
|
9840
10103
|
console.error("Error fetching vault balance:", err);
|
|
9841
10104
|
setFetchedVaultBalance(null);
|
|
9842
|
-
}).finally(() => {
|
|
9843
|
-
setLoadingVaultBalance(false);
|
|
9844
10105
|
});
|
|
9845
10106
|
}
|
|
9846
10107
|
}, [nonEip7702Mode, fetchVaultBalance]);
|
|
@@ -9927,23 +10188,6 @@ const SpiceBalance = ({
|
|
|
9927
10188
|
setIsDepositModalOpen(false);
|
|
9928
10189
|
setIsWithdrawModalOpen(false);
|
|
9929
10190
|
};
|
|
9930
|
-
if (isLoading) {
|
|
9931
|
-
return /* @__PURE__ */ jsx(
|
|
9932
|
-
"div",
|
|
9933
|
-
{
|
|
9934
|
-
className,
|
|
9935
|
-
style: {
|
|
9936
|
-
padding: "24px",
|
|
9937
|
-
backgroundColor: "#FFFFFF",
|
|
9938
|
-
borderRadius: "16px",
|
|
9939
|
-
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
9940
|
-
maxWidth: "480px",
|
|
9941
|
-
...styles?.container
|
|
9942
|
-
},
|
|
9943
|
-
children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", color: "#6B7280" }, children: "Loading balance..." })
|
|
9944
|
-
}
|
|
9945
|
-
);
|
|
9946
|
-
}
|
|
9947
10191
|
return /* @__PURE__ */ jsxs(
|
|
9948
10192
|
"div",
|
|
9949
10193
|
{
|
|
@@ -11689,4 +11933,12 @@ const useToInputUpdate = () => {
|
|
|
11689
11933
|
};
|
|
11690
11934
|
};
|
|
11691
11935
|
|
|
11692
|
-
|
|
11936
|
+
const useDepositInput = () => {
|
|
11937
|
+
const [depositAmount, setDepositAmount] = useState("");
|
|
11938
|
+
return {
|
|
11939
|
+
depositAmount,
|
|
11940
|
+
setDepositAmount
|
|
11941
|
+
};
|
|
11942
|
+
};
|
|
11943
|
+
|
|
11944
|
+
export { ConnectWalletModal, DepositModal, DepositWidget, DepositWidgetModal, LpModal, ProviderLogin, SelectChainModal, SpiceBalance, SpiceDeposit, SpiceFlowProvider, SpiceFlowProviderContext, SpiceWithdraw, SwapWidget, WithdrawModal, fetchBalances, useAssets, useDepositInput, useFromInput, useSpiceBalance, useStatus, useToInputUpdate, useWallet };
|
package/dist/types/deposit.d.ts
CHANGED