@spicenet-io/spiceflow-ui 1.8.7 → 1.9.0
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.
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface CrossChainDepositModalProps {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
onComplete: () => void;
|
|
6
|
+
chainId: 11155111 | 421614 | 84532 | undefined;
|
|
7
|
+
externalWalletAddress: string;
|
|
8
|
+
escrowAddress?: string;
|
|
9
|
+
supportedChains: number[];
|
|
10
|
+
getChainConfig: (chainId: number) => any;
|
|
11
|
+
getSupportedTokens: (chainId: number) => Array<{
|
|
12
|
+
address: string;
|
|
13
|
+
symbol: string;
|
|
14
|
+
name: string;
|
|
15
|
+
decimals: number;
|
|
16
|
+
}>;
|
|
17
|
+
}
|
|
18
|
+
export declare const CrossChainDepositModal: React.FC<CrossChainDepositModalProps>;
|
|
19
|
+
export declare const DepositModal: React.FC<CrossChainDepositModalProps>;
|
|
20
|
+
export {};
|
package/dist/index.cjs.js
CHANGED
|
@@ -109,7 +109,7 @@ const CHAIN_CONFIGS = {
|
|
|
109
109
|
symbol: "ETH",
|
|
110
110
|
decimals: 18
|
|
111
111
|
},
|
|
112
|
-
rpc: "https://
|
|
112
|
+
rpc: "https://site1.moralis-nodes.com/base-sepolia/0563a61e273c428f906716cd4befa362",
|
|
113
113
|
blockExplorers: {
|
|
114
114
|
default: {
|
|
115
115
|
name: "Basescan",
|
|
@@ -922,12 +922,13 @@ const useAssets = ({
|
|
|
922
922
|
address,
|
|
923
923
|
supportedChains,
|
|
924
924
|
fetchBalances: fetchBalances2,
|
|
925
|
-
refreshInterval =
|
|
926
|
-
//
|
|
925
|
+
refreshInterval = 8e3
|
|
926
|
+
// 8 seconds default
|
|
927
927
|
}) => {
|
|
928
928
|
const [assets, setAssets] = React.useState([]);
|
|
929
929
|
const [loading, setLoading] = React.useState(false);
|
|
930
930
|
const [error, setError] = React.useState(null);
|
|
931
|
+
const isInitialLoadRef = React.useRef(true);
|
|
931
932
|
const addressRef = React.useRef(address);
|
|
932
933
|
const supportedChainsRef = React.useRef(supportedChains);
|
|
933
934
|
const fetchBalancesRef = React.useRef(fetchBalances2);
|
|
@@ -944,7 +945,9 @@ const useAssets = ({
|
|
|
944
945
|
setAssets([]);
|
|
945
946
|
return;
|
|
946
947
|
}
|
|
947
|
-
|
|
948
|
+
if (isInitialLoadRef.current) {
|
|
949
|
+
setLoading(true);
|
|
950
|
+
}
|
|
948
951
|
setError(null);
|
|
949
952
|
try {
|
|
950
953
|
const balances = await currentFetchBalances(currentAddress);
|
|
@@ -963,7 +966,10 @@ const useAssets = ({
|
|
|
963
966
|
setError(errorMessage);
|
|
964
967
|
console.error("Error fetching assets:", err);
|
|
965
968
|
} finally {
|
|
966
|
-
|
|
969
|
+
if (isInitialLoadRef.current) {
|
|
970
|
+
setLoading(false);
|
|
971
|
+
isInitialLoadRef.current = false;
|
|
972
|
+
}
|
|
967
973
|
}
|
|
968
974
|
}, []);
|
|
969
975
|
const getAssetsByChain = React.useCallback(
|
|
@@ -977,6 +983,7 @@ const useAssets = ({
|
|
|
977
983
|
}, [assets]);
|
|
978
984
|
React.useEffect(() => {
|
|
979
985
|
if (address) {
|
|
986
|
+
isInitialLoadRef.current = true;
|
|
980
987
|
refreshAssets();
|
|
981
988
|
}
|
|
982
989
|
}, [address, refreshAssets]);
|
|
@@ -1667,6 +1674,31 @@ const AssetSelectorComponent = ({
|
|
|
1667
1674
|
]);
|
|
1668
1675
|
const handleAmountChange = (value) => {
|
|
1669
1676
|
const cleanValue = parseNumericInput(value);
|
|
1677
|
+
if (!cleanValue) {
|
|
1678
|
+
setLocalAmount(cleanValue);
|
|
1679
|
+
if (debounceTimerRef.current) {
|
|
1680
|
+
clearTimeout(debounceTimerRef.current);
|
|
1681
|
+
}
|
|
1682
|
+
debounceTimerRef.current = setTimeout(() => {
|
|
1683
|
+
onAmountChange(cleanValue);
|
|
1684
|
+
}, 300);
|
|
1685
|
+
return;
|
|
1686
|
+
}
|
|
1687
|
+
if (selectedAsset?.asset) {
|
|
1688
|
+
const numAmount = parseFloat(cleanValue);
|
|
1689
|
+
const maxBalance = selectedAsset.asset.balanceFormatted;
|
|
1690
|
+
if (!isNaN(numAmount) && numAmount > maxBalance) {
|
|
1691
|
+
const clampedAmount = maxBalance.toString();
|
|
1692
|
+
setLocalAmount(clampedAmount);
|
|
1693
|
+
if (debounceTimerRef.current) {
|
|
1694
|
+
clearTimeout(debounceTimerRef.current);
|
|
1695
|
+
}
|
|
1696
|
+
debounceTimerRef.current = setTimeout(() => {
|
|
1697
|
+
onAmountChange(clampedAmount);
|
|
1698
|
+
}, 300);
|
|
1699
|
+
return;
|
|
1700
|
+
}
|
|
1701
|
+
}
|
|
1670
1702
|
setLocalAmount(cleanValue);
|
|
1671
1703
|
if (debounceTimerRef.current) {
|
|
1672
1704
|
clearTimeout(debounceTimerRef.current);
|
|
@@ -4424,7 +4456,6 @@ const DepositWidget = ({
|
|
|
4424
4456
|
chainBatches: hashedChainBatches
|
|
4425
4457
|
},
|
|
4426
4458
|
tokenTransfers: [
|
|
4427
|
-
[],
|
|
4428
4459
|
[
|
|
4429
4460
|
{
|
|
4430
4461
|
tokenAddress,
|
|
@@ -5838,6 +5869,84 @@ const ConnectWalletModal = ({
|
|
|
5838
5869
|
},
|
|
5839
5870
|
children: [
|
|
5840
5871
|
/* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { title: "Connect Wallet", onClose }),
|
|
5872
|
+
requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5873
|
+
"div",
|
|
5874
|
+
{
|
|
5875
|
+
style: {
|
|
5876
|
+
padding: "0 32px",
|
|
5877
|
+
marginTop: "20px"
|
|
5878
|
+
},
|
|
5879
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5880
|
+
"div",
|
|
5881
|
+
{
|
|
5882
|
+
style: {
|
|
5883
|
+
padding: "12px 16px",
|
|
5884
|
+
backgroundColor: "#EFF6FF",
|
|
5885
|
+
borderRadius: "8px",
|
|
5886
|
+
border: "1px solid #BFDBFE",
|
|
5887
|
+
display: "flex",
|
|
5888
|
+
alignItems: "center",
|
|
5889
|
+
gap: "10px"
|
|
5890
|
+
},
|
|
5891
|
+
children: [
|
|
5892
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5893
|
+
"div",
|
|
5894
|
+
{
|
|
5895
|
+
style: {
|
|
5896
|
+
width: "32px",
|
|
5897
|
+
height: "32px",
|
|
5898
|
+
borderRadius: "50%",
|
|
5899
|
+
backgroundColor: "#DBEAFE",
|
|
5900
|
+
display: "flex",
|
|
5901
|
+
alignItems: "center",
|
|
5902
|
+
justifyContent: "center",
|
|
5903
|
+
flexShrink: 0
|
|
5904
|
+
},
|
|
5905
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5906
|
+
"img",
|
|
5907
|
+
{
|
|
5908
|
+
src: img$3,
|
|
5909
|
+
alt: "Rabby",
|
|
5910
|
+
style: {
|
|
5911
|
+
width: "20px",
|
|
5912
|
+
height: "20px",
|
|
5913
|
+
objectFit: "contain"
|
|
5914
|
+
}
|
|
5915
|
+
}
|
|
5916
|
+
)
|
|
5917
|
+
}
|
|
5918
|
+
),
|
|
5919
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
|
|
5920
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5921
|
+
"p",
|
|
5922
|
+
{
|
|
5923
|
+
style: {
|
|
5924
|
+
margin: "0 0 4px 0",
|
|
5925
|
+
color: "#1E40AF",
|
|
5926
|
+
fontSize: "13px",
|
|
5927
|
+
fontWeight: 600
|
|
5928
|
+
},
|
|
5929
|
+
children: "Recommended Wallet"
|
|
5930
|
+
}
|
|
5931
|
+
),
|
|
5932
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5933
|
+
"p",
|
|
5934
|
+
{
|
|
5935
|
+
style: {
|
|
5936
|
+
margin: 0,
|
|
5937
|
+
color: "#1E3A8A",
|
|
5938
|
+
fontSize: "12px",
|
|
5939
|
+
lineHeight: "1.4"
|
|
5940
|
+
},
|
|
5941
|
+
children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
|
|
5942
|
+
}
|
|
5943
|
+
)
|
|
5944
|
+
] })
|
|
5945
|
+
]
|
|
5946
|
+
}
|
|
5947
|
+
)
|
|
5948
|
+
}
|
|
5949
|
+
),
|
|
5841
5950
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5842
5951
|
"div",
|
|
5843
5952
|
{
|
|
@@ -5969,6 +6078,75 @@ const ConnectWalletModal = ({
|
|
|
5969
6078
|
]
|
|
5970
6079
|
}
|
|
5971
6080
|
),
|
|
6081
|
+
isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6082
|
+
"div",
|
|
6083
|
+
{
|
|
6084
|
+
style: {
|
|
6085
|
+
padding: "12px 16px",
|
|
6086
|
+
backgroundColor: "#EFF6FF",
|
|
6087
|
+
borderRadius: "8px",
|
|
6088
|
+
border: "1px solid #BFDBFE",
|
|
6089
|
+
display: "flex",
|
|
6090
|
+
alignItems: "center",
|
|
6091
|
+
gap: "10px"
|
|
6092
|
+
},
|
|
6093
|
+
children: [
|
|
6094
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6095
|
+
"div",
|
|
6096
|
+
{
|
|
6097
|
+
style: {
|
|
6098
|
+
width: "32px",
|
|
6099
|
+
height: "32px",
|
|
6100
|
+
borderRadius: "50%",
|
|
6101
|
+
backgroundColor: "#DBEAFE",
|
|
6102
|
+
display: "flex",
|
|
6103
|
+
alignItems: "center",
|
|
6104
|
+
justifyContent: "center",
|
|
6105
|
+
flexShrink: 0
|
|
6106
|
+
},
|
|
6107
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6108
|
+
"img",
|
|
6109
|
+
{
|
|
6110
|
+
src: img$3,
|
|
6111
|
+
alt: "Rabby",
|
|
6112
|
+
style: {
|
|
6113
|
+
width: "20px",
|
|
6114
|
+
height: "20px",
|
|
6115
|
+
objectFit: "contain"
|
|
6116
|
+
}
|
|
6117
|
+
}
|
|
6118
|
+
)
|
|
6119
|
+
}
|
|
6120
|
+
),
|
|
6121
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
|
|
6122
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6123
|
+
"p",
|
|
6124
|
+
{
|
|
6125
|
+
style: {
|
|
6126
|
+
margin: "0 0 4px 0",
|
|
6127
|
+
color: "#1E40AF",
|
|
6128
|
+
fontSize: "13px",
|
|
6129
|
+
fontWeight: 600
|
|
6130
|
+
},
|
|
6131
|
+
children: "Recommended Wallet"
|
|
6132
|
+
}
|
|
6133
|
+
),
|
|
6134
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6135
|
+
"p",
|
|
6136
|
+
{
|
|
6137
|
+
style: {
|
|
6138
|
+
margin: 0,
|
|
6139
|
+
color: "#1E3A8A",
|
|
6140
|
+
fontSize: "12px",
|
|
6141
|
+
lineHeight: "1.4"
|
|
6142
|
+
},
|
|
6143
|
+
children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
|
|
6144
|
+
}
|
|
6145
|
+
)
|
|
6146
|
+
] })
|
|
6147
|
+
]
|
|
6148
|
+
}
|
|
6149
|
+
),
|
|
5972
6150
|
isConnected && address ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5973
6151
|
"div",
|
|
5974
6152
|
{
|
|
@@ -7359,7 +7537,7 @@ const DepositModal = React.memo(
|
|
|
7359
7537
|
address: sourceAddress || address,
|
|
7360
7538
|
supportedChains,
|
|
7361
7539
|
fetchBalances,
|
|
7362
|
-
refreshInterval:
|
|
7540
|
+
refreshInterval: 8e3
|
|
7363
7541
|
});
|
|
7364
7542
|
const [isExecuting, setIsExecuting] = React.useState(false);
|
|
7365
7543
|
const [error, setError] = React.useState(null);
|
|
@@ -7397,6 +7575,26 @@ const DepositModal = React.memo(
|
|
|
7397
7575
|
});
|
|
7398
7576
|
}
|
|
7399
7577
|
}, [depositAmount]);
|
|
7578
|
+
React.useEffect(() => {
|
|
7579
|
+
if (selectedDepositAssets.length === 0) return;
|
|
7580
|
+
setSelectedDepositAssets((prev) => {
|
|
7581
|
+
return prev.map((selectedItem) => {
|
|
7582
|
+
if (!selectedItem.asset) return selectedItem;
|
|
7583
|
+
const freshAsset = depositAssets.find(
|
|
7584
|
+
(a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
|
|
7585
|
+
);
|
|
7586
|
+
if (freshAsset) {
|
|
7587
|
+
return {
|
|
7588
|
+
...selectedItem,
|
|
7589
|
+
asset: freshAsset,
|
|
7590
|
+
// Preserve the user's entered amount
|
|
7591
|
+
amount: selectedItem.amount
|
|
7592
|
+
};
|
|
7593
|
+
}
|
|
7594
|
+
return selectedItem;
|
|
7595
|
+
});
|
|
7596
|
+
});
|
|
7597
|
+
}, [assets]);
|
|
7400
7598
|
React.useEffect(() => {
|
|
7401
7599
|
if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
|
|
7402
7600
|
const bridgedAmount = bridgedAmountRef.current;
|
|
@@ -7447,8 +7645,16 @@ const DepositModal = React.memo(
|
|
|
7447
7645
|
const errorMessage = error2?.message || String(error2 || "");
|
|
7448
7646
|
const errorDetails = error2?.details || "";
|
|
7449
7647
|
const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
|
|
7648
|
+
console.error("RPC Error Details:", {
|
|
7649
|
+
code: error2?.code,
|
|
7650
|
+
message: errorMessage,
|
|
7651
|
+
details: errorDetails,
|
|
7652
|
+
data: error2?.data,
|
|
7653
|
+
stack: error2?.stack,
|
|
7654
|
+
fullError: error2
|
|
7655
|
+
});
|
|
7450
7656
|
if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
|
|
7451
|
-
return "Network error
|
|
7657
|
+
return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
|
|
7452
7658
|
}
|
|
7453
7659
|
return errorMessage || "Transaction failed";
|
|
7454
7660
|
}, []);
|
|
@@ -7538,6 +7744,7 @@ const DepositModal = React.memo(
|
|
|
7538
7744
|
}
|
|
7539
7745
|
setAirdropMessage("Airdrop requested successfully.");
|
|
7540
7746
|
} catch (e) {
|
|
7747
|
+
console.log(e);
|
|
7541
7748
|
const msg = handleRpcError(e);
|
|
7542
7749
|
setAirdropError(msg);
|
|
7543
7750
|
} finally {
|
|
@@ -7661,6 +7868,11 @@ const DepositModal = React.memo(
|
|
|
7661
7868
|
}
|
|
7662
7869
|
if (currentChain?.id !== chainId) {
|
|
7663
7870
|
setError("Wrong chain selected. Switching network...");
|
|
7871
|
+
console.log("Attempting to switch to chain:", {
|
|
7872
|
+
chainId,
|
|
7873
|
+
currentChainId: currentChain?.id,
|
|
7874
|
+
chainName: getChainName$1(chainId)
|
|
7875
|
+
});
|
|
7664
7876
|
try {
|
|
7665
7877
|
await switchChainAsync({ chainId });
|
|
7666
7878
|
let attempts = 0;
|
|
@@ -7747,6 +7959,14 @@ const DepositModal = React.memo(
|
|
|
7747
7959
|
tokenAddress = "0x0";
|
|
7748
7960
|
}
|
|
7749
7961
|
const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
|
|
7962
|
+
console.log("Sending transaction via MetaMask:", {
|
|
7963
|
+
chainId,
|
|
7964
|
+
isNative,
|
|
7965
|
+
tokenAddress,
|
|
7966
|
+
delegateContract,
|
|
7967
|
+
amount: amount.toString(),
|
|
7968
|
+
walletChainId: externalWalletClient.chain?.id
|
|
7969
|
+
});
|
|
7750
7970
|
const txHash = isNative ? await externalWalletClient.sendTransaction({
|
|
7751
7971
|
to: delegateContract,
|
|
7752
7972
|
value: amount
|
|
@@ -7887,6 +8107,14 @@ const DepositModal = React.memo(
|
|
|
7887
8107
|
tokenAddress = "0x0";
|
|
7888
8108
|
}
|
|
7889
8109
|
const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
|
|
8110
|
+
console.log("Sending EIP-7702 transaction via MetaMask:", {
|
|
8111
|
+
chainId,
|
|
8112
|
+
isNative,
|
|
8113
|
+
tokenAddress,
|
|
8114
|
+
amount: amount.toString(),
|
|
8115
|
+
recipient: address,
|
|
8116
|
+
walletChainId: externalWalletClient.chain?.id
|
|
8117
|
+
});
|
|
7890
8118
|
const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
|
|
7891
8119
|
to: address,
|
|
7892
8120
|
value: amount
|
|
@@ -10512,7 +10740,7 @@ const SpiceWithdraw = (props) => {
|
|
|
10512
10740
|
}
|
|
10513
10741
|
const transports = {};
|
|
10514
10742
|
chains.forEach((chain) => {
|
|
10515
|
-
transports[chain.id] = wagmi.http();
|
|
10743
|
+
transports[chain.id] = wagmi.http(chain.rpc);
|
|
10516
10744
|
});
|
|
10517
10745
|
const connectorsList = [connectors.metaMask()];
|
|
10518
10746
|
if (walletConnectProjectId) {
|
package/dist/index.js
CHANGED
|
@@ -107,7 +107,7 @@ const CHAIN_CONFIGS = {
|
|
|
107
107
|
symbol: "ETH",
|
|
108
108
|
decimals: 18
|
|
109
109
|
},
|
|
110
|
-
rpc: "https://
|
|
110
|
+
rpc: "https://site1.moralis-nodes.com/base-sepolia/0563a61e273c428f906716cd4befa362",
|
|
111
111
|
blockExplorers: {
|
|
112
112
|
default: {
|
|
113
113
|
name: "Basescan",
|
|
@@ -920,12 +920,13 @@ const useAssets = ({
|
|
|
920
920
|
address,
|
|
921
921
|
supportedChains,
|
|
922
922
|
fetchBalances: fetchBalances2,
|
|
923
|
-
refreshInterval =
|
|
924
|
-
//
|
|
923
|
+
refreshInterval = 8e3
|
|
924
|
+
// 8 seconds default
|
|
925
925
|
}) => {
|
|
926
926
|
const [assets, setAssets] = useState([]);
|
|
927
927
|
const [loading, setLoading] = useState(false);
|
|
928
928
|
const [error, setError] = useState(null);
|
|
929
|
+
const isInitialLoadRef = useRef(true);
|
|
929
930
|
const addressRef = useRef(address);
|
|
930
931
|
const supportedChainsRef = useRef(supportedChains);
|
|
931
932
|
const fetchBalancesRef = useRef(fetchBalances2);
|
|
@@ -942,7 +943,9 @@ const useAssets = ({
|
|
|
942
943
|
setAssets([]);
|
|
943
944
|
return;
|
|
944
945
|
}
|
|
945
|
-
|
|
946
|
+
if (isInitialLoadRef.current) {
|
|
947
|
+
setLoading(true);
|
|
948
|
+
}
|
|
946
949
|
setError(null);
|
|
947
950
|
try {
|
|
948
951
|
const balances = await currentFetchBalances(currentAddress);
|
|
@@ -961,7 +964,10 @@ const useAssets = ({
|
|
|
961
964
|
setError(errorMessage);
|
|
962
965
|
console.error("Error fetching assets:", err);
|
|
963
966
|
} finally {
|
|
964
|
-
|
|
967
|
+
if (isInitialLoadRef.current) {
|
|
968
|
+
setLoading(false);
|
|
969
|
+
isInitialLoadRef.current = false;
|
|
970
|
+
}
|
|
965
971
|
}
|
|
966
972
|
}, []);
|
|
967
973
|
const getAssetsByChain = useCallback(
|
|
@@ -975,6 +981,7 @@ const useAssets = ({
|
|
|
975
981
|
}, [assets]);
|
|
976
982
|
useEffect(() => {
|
|
977
983
|
if (address) {
|
|
984
|
+
isInitialLoadRef.current = true;
|
|
978
985
|
refreshAssets();
|
|
979
986
|
}
|
|
980
987
|
}, [address, refreshAssets]);
|
|
@@ -1665,6 +1672,31 @@ const AssetSelectorComponent = ({
|
|
|
1665
1672
|
]);
|
|
1666
1673
|
const handleAmountChange = (value) => {
|
|
1667
1674
|
const cleanValue = parseNumericInput(value);
|
|
1675
|
+
if (!cleanValue) {
|
|
1676
|
+
setLocalAmount(cleanValue);
|
|
1677
|
+
if (debounceTimerRef.current) {
|
|
1678
|
+
clearTimeout(debounceTimerRef.current);
|
|
1679
|
+
}
|
|
1680
|
+
debounceTimerRef.current = setTimeout(() => {
|
|
1681
|
+
onAmountChange(cleanValue);
|
|
1682
|
+
}, 300);
|
|
1683
|
+
return;
|
|
1684
|
+
}
|
|
1685
|
+
if (selectedAsset?.asset) {
|
|
1686
|
+
const numAmount = parseFloat(cleanValue);
|
|
1687
|
+
const maxBalance = selectedAsset.asset.balanceFormatted;
|
|
1688
|
+
if (!isNaN(numAmount) && numAmount > maxBalance) {
|
|
1689
|
+
const clampedAmount = maxBalance.toString();
|
|
1690
|
+
setLocalAmount(clampedAmount);
|
|
1691
|
+
if (debounceTimerRef.current) {
|
|
1692
|
+
clearTimeout(debounceTimerRef.current);
|
|
1693
|
+
}
|
|
1694
|
+
debounceTimerRef.current = setTimeout(() => {
|
|
1695
|
+
onAmountChange(clampedAmount);
|
|
1696
|
+
}, 300);
|
|
1697
|
+
return;
|
|
1698
|
+
}
|
|
1699
|
+
}
|
|
1668
1700
|
setLocalAmount(cleanValue);
|
|
1669
1701
|
if (debounceTimerRef.current) {
|
|
1670
1702
|
clearTimeout(debounceTimerRef.current);
|
|
@@ -4422,7 +4454,6 @@ const DepositWidget = ({
|
|
|
4422
4454
|
chainBatches: hashedChainBatches
|
|
4423
4455
|
},
|
|
4424
4456
|
tokenTransfers: [
|
|
4425
|
-
[],
|
|
4426
4457
|
[
|
|
4427
4458
|
{
|
|
4428
4459
|
tokenAddress,
|
|
@@ -5836,6 +5867,84 @@ const ConnectWalletModal = ({
|
|
|
5836
5867
|
},
|
|
5837
5868
|
children: [
|
|
5838
5869
|
/* @__PURE__ */ jsx(ModalHeader, { title: "Connect Wallet", onClose }),
|
|
5870
|
+
requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsx(
|
|
5871
|
+
"div",
|
|
5872
|
+
{
|
|
5873
|
+
style: {
|
|
5874
|
+
padding: "0 32px",
|
|
5875
|
+
marginTop: "20px"
|
|
5876
|
+
},
|
|
5877
|
+
children: /* @__PURE__ */ jsxs(
|
|
5878
|
+
"div",
|
|
5879
|
+
{
|
|
5880
|
+
style: {
|
|
5881
|
+
padding: "12px 16px",
|
|
5882
|
+
backgroundColor: "#EFF6FF",
|
|
5883
|
+
borderRadius: "8px",
|
|
5884
|
+
border: "1px solid #BFDBFE",
|
|
5885
|
+
display: "flex",
|
|
5886
|
+
alignItems: "center",
|
|
5887
|
+
gap: "10px"
|
|
5888
|
+
},
|
|
5889
|
+
children: [
|
|
5890
|
+
/* @__PURE__ */ jsx(
|
|
5891
|
+
"div",
|
|
5892
|
+
{
|
|
5893
|
+
style: {
|
|
5894
|
+
width: "32px",
|
|
5895
|
+
height: "32px",
|
|
5896
|
+
borderRadius: "50%",
|
|
5897
|
+
backgroundColor: "#DBEAFE",
|
|
5898
|
+
display: "flex",
|
|
5899
|
+
alignItems: "center",
|
|
5900
|
+
justifyContent: "center",
|
|
5901
|
+
flexShrink: 0
|
|
5902
|
+
},
|
|
5903
|
+
children: /* @__PURE__ */ jsx(
|
|
5904
|
+
"img",
|
|
5905
|
+
{
|
|
5906
|
+
src: img$3,
|
|
5907
|
+
alt: "Rabby",
|
|
5908
|
+
style: {
|
|
5909
|
+
width: "20px",
|
|
5910
|
+
height: "20px",
|
|
5911
|
+
objectFit: "contain"
|
|
5912
|
+
}
|
|
5913
|
+
}
|
|
5914
|
+
)
|
|
5915
|
+
}
|
|
5916
|
+
),
|
|
5917
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
5918
|
+
/* @__PURE__ */ jsx(
|
|
5919
|
+
"p",
|
|
5920
|
+
{
|
|
5921
|
+
style: {
|
|
5922
|
+
margin: "0 0 4px 0",
|
|
5923
|
+
color: "#1E40AF",
|
|
5924
|
+
fontSize: "13px",
|
|
5925
|
+
fontWeight: 600
|
|
5926
|
+
},
|
|
5927
|
+
children: "Recommended Wallet"
|
|
5928
|
+
}
|
|
5929
|
+
),
|
|
5930
|
+
/* @__PURE__ */ jsx(
|
|
5931
|
+
"p",
|
|
5932
|
+
{
|
|
5933
|
+
style: {
|
|
5934
|
+
margin: 0,
|
|
5935
|
+
color: "#1E3A8A",
|
|
5936
|
+
fontSize: "12px",
|
|
5937
|
+
lineHeight: "1.4"
|
|
5938
|
+
},
|
|
5939
|
+
children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
|
|
5940
|
+
}
|
|
5941
|
+
)
|
|
5942
|
+
] })
|
|
5943
|
+
]
|
|
5944
|
+
}
|
|
5945
|
+
)
|
|
5946
|
+
}
|
|
5947
|
+
),
|
|
5839
5948
|
/* @__PURE__ */ jsxs(
|
|
5840
5949
|
"div",
|
|
5841
5950
|
{
|
|
@@ -5967,6 +6076,75 @@ const ConnectWalletModal = ({
|
|
|
5967
6076
|
]
|
|
5968
6077
|
}
|
|
5969
6078
|
),
|
|
6079
|
+
isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxs(
|
|
6080
|
+
"div",
|
|
6081
|
+
{
|
|
6082
|
+
style: {
|
|
6083
|
+
padding: "12px 16px",
|
|
6084
|
+
backgroundColor: "#EFF6FF",
|
|
6085
|
+
borderRadius: "8px",
|
|
6086
|
+
border: "1px solid #BFDBFE",
|
|
6087
|
+
display: "flex",
|
|
6088
|
+
alignItems: "center",
|
|
6089
|
+
gap: "10px"
|
|
6090
|
+
},
|
|
6091
|
+
children: [
|
|
6092
|
+
/* @__PURE__ */ jsx(
|
|
6093
|
+
"div",
|
|
6094
|
+
{
|
|
6095
|
+
style: {
|
|
6096
|
+
width: "32px",
|
|
6097
|
+
height: "32px",
|
|
6098
|
+
borderRadius: "50%",
|
|
6099
|
+
backgroundColor: "#DBEAFE",
|
|
6100
|
+
display: "flex",
|
|
6101
|
+
alignItems: "center",
|
|
6102
|
+
justifyContent: "center",
|
|
6103
|
+
flexShrink: 0
|
|
6104
|
+
},
|
|
6105
|
+
children: /* @__PURE__ */ jsx(
|
|
6106
|
+
"img",
|
|
6107
|
+
{
|
|
6108
|
+
src: img$3,
|
|
6109
|
+
alt: "Rabby",
|
|
6110
|
+
style: {
|
|
6111
|
+
width: "20px",
|
|
6112
|
+
height: "20px",
|
|
6113
|
+
objectFit: "contain"
|
|
6114
|
+
}
|
|
6115
|
+
}
|
|
6116
|
+
)
|
|
6117
|
+
}
|
|
6118
|
+
),
|
|
6119
|
+
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
|
|
6120
|
+
/* @__PURE__ */ jsx(
|
|
6121
|
+
"p",
|
|
6122
|
+
{
|
|
6123
|
+
style: {
|
|
6124
|
+
margin: "0 0 4px 0",
|
|
6125
|
+
color: "#1E40AF",
|
|
6126
|
+
fontSize: "13px",
|
|
6127
|
+
fontWeight: 600
|
|
6128
|
+
},
|
|
6129
|
+
children: "Recommended Wallet"
|
|
6130
|
+
}
|
|
6131
|
+
),
|
|
6132
|
+
/* @__PURE__ */ jsx(
|
|
6133
|
+
"p",
|
|
6134
|
+
{
|
|
6135
|
+
style: {
|
|
6136
|
+
margin: 0,
|
|
6137
|
+
color: "#1E3A8A",
|
|
6138
|
+
fontSize: "12px",
|
|
6139
|
+
lineHeight: "1.4"
|
|
6140
|
+
},
|
|
6141
|
+
children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
|
|
6142
|
+
}
|
|
6143
|
+
)
|
|
6144
|
+
] })
|
|
6145
|
+
]
|
|
6146
|
+
}
|
|
6147
|
+
),
|
|
5970
6148
|
isConnected && address ? /* @__PURE__ */ jsxs(
|
|
5971
6149
|
"div",
|
|
5972
6150
|
{
|
|
@@ -7357,7 +7535,7 @@ const DepositModal = React.memo(
|
|
|
7357
7535
|
address: sourceAddress || address,
|
|
7358
7536
|
supportedChains,
|
|
7359
7537
|
fetchBalances,
|
|
7360
|
-
refreshInterval:
|
|
7538
|
+
refreshInterval: 8e3
|
|
7361
7539
|
});
|
|
7362
7540
|
const [isExecuting, setIsExecuting] = useState(false);
|
|
7363
7541
|
const [error, setError] = useState(null);
|
|
@@ -7395,6 +7573,26 @@ const DepositModal = React.memo(
|
|
|
7395
7573
|
});
|
|
7396
7574
|
}
|
|
7397
7575
|
}, [depositAmount]);
|
|
7576
|
+
useEffect(() => {
|
|
7577
|
+
if (selectedDepositAssets.length === 0) return;
|
|
7578
|
+
setSelectedDepositAssets((prev) => {
|
|
7579
|
+
return prev.map((selectedItem) => {
|
|
7580
|
+
if (!selectedItem.asset) return selectedItem;
|
|
7581
|
+
const freshAsset = depositAssets.find(
|
|
7582
|
+
(a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
|
|
7583
|
+
);
|
|
7584
|
+
if (freshAsset) {
|
|
7585
|
+
return {
|
|
7586
|
+
...selectedItem,
|
|
7587
|
+
asset: freshAsset,
|
|
7588
|
+
// Preserve the user's entered amount
|
|
7589
|
+
amount: selectedItem.amount
|
|
7590
|
+
};
|
|
7591
|
+
}
|
|
7592
|
+
return selectedItem;
|
|
7593
|
+
});
|
|
7594
|
+
});
|
|
7595
|
+
}, [assets]);
|
|
7398
7596
|
useEffect(() => {
|
|
7399
7597
|
if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
|
|
7400
7598
|
const bridgedAmount = bridgedAmountRef.current;
|
|
@@ -7445,8 +7643,16 @@ const DepositModal = React.memo(
|
|
|
7445
7643
|
const errorMessage = error2?.message || String(error2 || "");
|
|
7446
7644
|
const errorDetails = error2?.details || "";
|
|
7447
7645
|
const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
|
|
7646
|
+
console.error("RPC Error Details:", {
|
|
7647
|
+
code: error2?.code,
|
|
7648
|
+
message: errorMessage,
|
|
7649
|
+
details: errorDetails,
|
|
7650
|
+
data: error2?.data,
|
|
7651
|
+
stack: error2?.stack,
|
|
7652
|
+
fullError: error2
|
|
7653
|
+
});
|
|
7448
7654
|
if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
|
|
7449
|
-
return "Network error
|
|
7655
|
+
return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
|
|
7450
7656
|
}
|
|
7451
7657
|
return errorMessage || "Transaction failed";
|
|
7452
7658
|
}, []);
|
|
@@ -7536,6 +7742,7 @@ const DepositModal = React.memo(
|
|
|
7536
7742
|
}
|
|
7537
7743
|
setAirdropMessage("Airdrop requested successfully.");
|
|
7538
7744
|
} catch (e) {
|
|
7745
|
+
console.log(e);
|
|
7539
7746
|
const msg = handleRpcError(e);
|
|
7540
7747
|
setAirdropError(msg);
|
|
7541
7748
|
} finally {
|
|
@@ -7659,6 +7866,11 @@ const DepositModal = React.memo(
|
|
|
7659
7866
|
}
|
|
7660
7867
|
if (currentChain?.id !== chainId) {
|
|
7661
7868
|
setError("Wrong chain selected. Switching network...");
|
|
7869
|
+
console.log("Attempting to switch to chain:", {
|
|
7870
|
+
chainId,
|
|
7871
|
+
currentChainId: currentChain?.id,
|
|
7872
|
+
chainName: getChainName$1(chainId)
|
|
7873
|
+
});
|
|
7662
7874
|
try {
|
|
7663
7875
|
await switchChainAsync({ chainId });
|
|
7664
7876
|
let attempts = 0;
|
|
@@ -7745,6 +7957,14 @@ const DepositModal = React.memo(
|
|
|
7745
7957
|
tokenAddress = "0x0";
|
|
7746
7958
|
}
|
|
7747
7959
|
const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
|
|
7960
|
+
console.log("Sending transaction via MetaMask:", {
|
|
7961
|
+
chainId,
|
|
7962
|
+
isNative,
|
|
7963
|
+
tokenAddress,
|
|
7964
|
+
delegateContract,
|
|
7965
|
+
amount: amount.toString(),
|
|
7966
|
+
walletChainId: externalWalletClient.chain?.id
|
|
7967
|
+
});
|
|
7748
7968
|
const txHash = isNative ? await externalWalletClient.sendTransaction({
|
|
7749
7969
|
to: delegateContract,
|
|
7750
7970
|
value: amount
|
|
@@ -7885,6 +8105,14 @@ const DepositModal = React.memo(
|
|
|
7885
8105
|
tokenAddress = "0x0";
|
|
7886
8106
|
}
|
|
7887
8107
|
const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
|
|
8108
|
+
console.log("Sending EIP-7702 transaction via MetaMask:", {
|
|
8109
|
+
chainId,
|
|
8110
|
+
isNative,
|
|
8111
|
+
tokenAddress,
|
|
8112
|
+
amount: amount.toString(),
|
|
8113
|
+
recipient: address,
|
|
8114
|
+
walletChainId: externalWalletClient.chain?.id
|
|
8115
|
+
});
|
|
7888
8116
|
const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
|
|
7889
8117
|
to: address,
|
|
7890
8118
|
value: amount
|
|
@@ -10510,7 +10738,7 @@ const SpiceWithdraw = (props) => {
|
|
|
10510
10738
|
}
|
|
10511
10739
|
const transports = {};
|
|
10512
10740
|
chains.forEach((chain) => {
|
|
10513
|
-
transports[chain.id] = http$1();
|
|
10741
|
+
transports[chain.id] = http$1(chain.rpc);
|
|
10514
10742
|
});
|
|
10515
10743
|
const connectorsList = [metaMask()];
|
|
10516
10744
|
if (walletConnectProjectId) {
|