@spicenet-io/spiceflow-ui 1.8.8 → 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://sepolia.base.org",
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 = 1e4
926
- // 30 seconds default
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
- setLoading(true);
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
- setLoading(false);
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);
@@ -5837,6 +5869,84 @@ const ConnectWalletModal = ({
5837
5869
  },
5838
5870
  children: [
5839
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
+ ),
5840
5950
  /* @__PURE__ */ jsxRuntime.jsxs(
5841
5951
  "div",
5842
5952
  {
@@ -5968,6 +6078,75 @@ const ConnectWalletModal = ({
5968
6078
  ]
5969
6079
  }
5970
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
+ ),
5971
6150
  isConnected && address ? /* @__PURE__ */ jsxRuntime.jsxs(
5972
6151
  "div",
5973
6152
  {
@@ -7358,7 +7537,7 @@ const DepositModal = React.memo(
7358
7537
  address: sourceAddress || address,
7359
7538
  supportedChains,
7360
7539
  fetchBalances,
7361
- refreshInterval: 3e4
7540
+ refreshInterval: 8e3
7362
7541
  });
7363
7542
  const [isExecuting, setIsExecuting] = React.useState(false);
7364
7543
  const [error, setError] = React.useState(null);
@@ -7396,6 +7575,26 @@ const DepositModal = React.memo(
7396
7575
  });
7397
7576
  }
7398
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]);
7399
7598
  React.useEffect(() => {
7400
7599
  if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
7401
7600
  const bridgedAmount = bridgedAmountRef.current;
@@ -7446,8 +7645,16 @@ const DepositModal = React.memo(
7446
7645
  const errorMessage = error2?.message || String(error2 || "");
7447
7646
  const errorDetails = error2?.details || "";
7448
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
+ });
7449
7656
  if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
7450
- return "Network error occurred. Please try again.";
7657
+ return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
7451
7658
  }
7452
7659
  return errorMessage || "Transaction failed";
7453
7660
  }, []);
@@ -7537,6 +7744,7 @@ const DepositModal = React.memo(
7537
7744
  }
7538
7745
  setAirdropMessage("Airdrop requested successfully.");
7539
7746
  } catch (e) {
7747
+ console.log(e);
7540
7748
  const msg = handleRpcError(e);
7541
7749
  setAirdropError(msg);
7542
7750
  } finally {
@@ -7660,6 +7868,11 @@ const DepositModal = React.memo(
7660
7868
  }
7661
7869
  if (currentChain?.id !== chainId) {
7662
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
+ });
7663
7876
  try {
7664
7877
  await switchChainAsync({ chainId });
7665
7878
  let attempts = 0;
@@ -7746,6 +7959,14 @@ const DepositModal = React.memo(
7746
7959
  tokenAddress = "0x0";
7747
7960
  }
7748
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
+ });
7749
7970
  const txHash = isNative ? await externalWalletClient.sendTransaction({
7750
7971
  to: delegateContract,
7751
7972
  value: amount
@@ -7886,6 +8107,14 @@ const DepositModal = React.memo(
7886
8107
  tokenAddress = "0x0";
7887
8108
  }
7888
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
+ });
7889
8118
  const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
7890
8119
  to: address,
7891
8120
  value: amount
@@ -10511,7 +10740,7 @@ const SpiceWithdraw = (props) => {
10511
10740
  }
10512
10741
  const transports = {};
10513
10742
  chains.forEach((chain) => {
10514
- transports[chain.id] = wagmi.http();
10743
+ transports[chain.id] = wagmi.http(chain.rpc);
10515
10744
  });
10516
10745
  const connectorsList = [connectors.metaMask()];
10517
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://sepolia.base.org",
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 = 1e4
924
- // 30 seconds default
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
- setLoading(true);
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
- setLoading(false);
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);
@@ -5835,6 +5867,84 @@ const ConnectWalletModal = ({
5835
5867
  },
5836
5868
  children: [
5837
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
+ ),
5838
5948
  /* @__PURE__ */ jsxs(
5839
5949
  "div",
5840
5950
  {
@@ -5966,6 +6076,75 @@ const ConnectWalletModal = ({
5966
6076
  ]
5967
6077
  }
5968
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
+ ),
5969
6148
  isConnected && address ? /* @__PURE__ */ jsxs(
5970
6149
  "div",
5971
6150
  {
@@ -7356,7 +7535,7 @@ const DepositModal = React.memo(
7356
7535
  address: sourceAddress || address,
7357
7536
  supportedChains,
7358
7537
  fetchBalances,
7359
- refreshInterval: 3e4
7538
+ refreshInterval: 8e3
7360
7539
  });
7361
7540
  const [isExecuting, setIsExecuting] = useState(false);
7362
7541
  const [error, setError] = useState(null);
@@ -7394,6 +7573,26 @@ const DepositModal = React.memo(
7394
7573
  });
7395
7574
  }
7396
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]);
7397
7596
  useEffect(() => {
7398
7597
  if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
7399
7598
  const bridgedAmount = bridgedAmountRef.current;
@@ -7444,8 +7643,16 @@ const DepositModal = React.memo(
7444
7643
  const errorMessage = error2?.message || String(error2 || "");
7445
7644
  const errorDetails = error2?.details || "";
7446
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
+ });
7447
7654
  if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
7448
- return "Network error occurred. Please try again.";
7655
+ return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
7449
7656
  }
7450
7657
  return errorMessage || "Transaction failed";
7451
7658
  }, []);
@@ -7535,6 +7742,7 @@ const DepositModal = React.memo(
7535
7742
  }
7536
7743
  setAirdropMessage("Airdrop requested successfully.");
7537
7744
  } catch (e) {
7745
+ console.log(e);
7538
7746
  const msg = handleRpcError(e);
7539
7747
  setAirdropError(msg);
7540
7748
  } finally {
@@ -7658,6 +7866,11 @@ const DepositModal = React.memo(
7658
7866
  }
7659
7867
  if (currentChain?.id !== chainId) {
7660
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
+ });
7661
7874
  try {
7662
7875
  await switchChainAsync({ chainId });
7663
7876
  let attempts = 0;
@@ -7744,6 +7957,14 @@ const DepositModal = React.memo(
7744
7957
  tokenAddress = "0x0";
7745
7958
  }
7746
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
+ });
7747
7968
  const txHash = isNative ? await externalWalletClient.sendTransaction({
7748
7969
  to: delegateContract,
7749
7970
  value: amount
@@ -7884,6 +8105,14 @@ const DepositModal = React.memo(
7884
8105
  tokenAddress = "0x0";
7885
8106
  }
7886
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
+ });
7887
8116
  const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
7888
8117
  to: address,
7889
8118
  value: amount
@@ -10509,7 +10738,7 @@ const SpiceWithdraw = (props) => {
10509
10738
  }
10510
10739
  const transports = {};
10511
10740
  chains.forEach((chain) => {
10512
- transports[chain.id] = http$1();
10741
+ transports[chain.id] = http$1(chain.rpc);
10513
10742
  });
10514
10743
  const connectorsList = [metaMask()];
10515
10744
  if (walletConnectProjectId) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicenet-io/spiceflow-ui",
3
- "version": "1.8.8",
3
+ "version": "1.9.0",
4
4
  "description": "Spiceflow UI SDK",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",