@spicenet-io/spiceflow-ui 1.7.6 → 1.8.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.
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import React, { useEffect, useState, useCallback } from 'react';
4
- import { c as createTheme, B as Button } from './Button-RifBkofT.js';
4
+ import { c as createTheme, B as Button } from './Button-aWXByNBC.js';
5
5
  import { useDynamicContext, useConnectWithOtp } from '@dynamic-labs/sdk-react-core';
6
6
 
7
7
  const Input = ({
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { useState, useEffect } from 'react';
4
- import { B as Button, c as createTheme } from './Button-RifBkofT.js';
4
+ import { B as Button, c as createTheme } from './Button-aWXByNBC.js';
5
5
  import { usePrivy, useLogin, useLogout } from '@privy-io/react-auth';
6
6
 
7
7
  const PrivyLogin = ({
package/dist/index.cjs.js CHANGED
@@ -103,7 +103,7 @@ const CHAIN_CONFIGS = {
103
103
  symbol: "ETH",
104
104
  decimals: 18
105
105
  },
106
- rpc: "https://site1.moralis-nodes.com/base-sepolia/0563a61e273c428f906716cd4befa362",
106
+ rpc: "https://sepolia.base.org",
107
107
  blockExplorers: {
108
108
  default: {
109
109
  name: "Basescan",
@@ -916,13 +916,12 @@ const useAssets = ({
916
916
  address,
917
917
  supportedChains,
918
918
  fetchBalances: fetchBalances2,
919
- refreshInterval = 8e3
920
- // 8 seconds default
919
+ refreshInterval = 1e4
920
+ // 30 seconds default
921
921
  }) => {
922
922
  const [assets, setAssets] = React.useState([]);
923
923
  const [loading, setLoading] = React.useState(false);
924
924
  const [error, setError] = React.useState(null);
925
- const isInitialLoadRef = React.useRef(true);
926
925
  const addressRef = React.useRef(address);
927
926
  const supportedChainsRef = React.useRef(supportedChains);
928
927
  const fetchBalancesRef = React.useRef(fetchBalances2);
@@ -939,9 +938,7 @@ const useAssets = ({
939
938
  setAssets([]);
940
939
  return;
941
940
  }
942
- if (isInitialLoadRef.current) {
943
- setLoading(true);
944
- }
941
+ setLoading(true);
945
942
  setError(null);
946
943
  try {
947
944
  const balances = await currentFetchBalances(currentAddress);
@@ -960,10 +957,7 @@ const useAssets = ({
960
957
  setError(errorMessage);
961
958
  console.error("Error fetching assets:", err);
962
959
  } finally {
963
- if (isInitialLoadRef.current) {
964
- setLoading(false);
965
- isInitialLoadRef.current = false;
966
- }
960
+ setLoading(false);
967
961
  }
968
962
  }, []);
969
963
  const getAssetsByChain = React.useCallback(
@@ -977,7 +971,6 @@ const useAssets = ({
977
971
  }, [assets]);
978
972
  React.useEffect(() => {
979
973
  if (address) {
980
- isInitialLoadRef.current = true;
981
974
  refreshAssets();
982
975
  }
983
976
  }, [address, refreshAssets]);
@@ -3964,6 +3957,7 @@ const DepositWidget = ({
3964
3957
  tokenAddress,
3965
3958
  tokenDecimals,
3966
3959
  supportedChains,
3960
+ supportedTokens,
3967
3961
  theme: themeMode = "light",
3968
3962
  styles,
3969
3963
  className = "",
@@ -4178,9 +4172,19 @@ const DepositWidget = ({
4178
4172
  setIsExecuting(false);
4179
4173
  }
4180
4174
  };
4181
- const depositAssets = supportedChains.flatMap(
4182
- (chainId) => getAllAssetsForChain(chainId, assets)
4183
- );
4175
+ const depositAssets = React.useMemo(() => {
4176
+ const allAssets = supportedChains.flatMap(
4177
+ (chainId) => getAllAssetsForChain(chainId, assets)
4178
+ );
4179
+ if (supportedTokens && supportedTokens.length > 0) {
4180
+ return allAssets.filter(
4181
+ (asset) => supportedTokens.some(
4182
+ (symbol) => symbol.toLowerCase() === asset.symbol.toLowerCase()
4183
+ )
4184
+ );
4185
+ }
4186
+ return allAssets;
4187
+ }, [supportedChains, assets, supportedTokens]);
4184
4188
  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
4185
4189
  const displayError = assetsError || error;
4186
4190
  const containerStyles = {
@@ -4668,6 +4672,7 @@ const DepositWidgetModal = ({
4668
4672
  tokenAddress,
4669
4673
  tokenDecimals,
4670
4674
  supportedChains,
4675
+ supportedTokens,
4671
4676
  theme: themeMode = "light",
4672
4677
  styles,
4673
4678
  className,
@@ -4734,6 +4739,7 @@ const DepositWidgetModal = ({
4734
4739
  tokenAddress,
4735
4740
  tokenDecimals,
4736
4741
  supportedChains,
4742
+ supportedTokens,
4737
4743
  theme: themeMode,
4738
4744
  styles: {
4739
4745
  ...styles,
@@ -5541,84 +5547,6 @@ const ConnectWalletModal = ({
5541
5547
  },
5542
5548
  children: [
5543
5549
  /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { title: "Connect Wallet", onClose }),
5544
- requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsxRuntime.jsx(
5545
- "div",
5546
- {
5547
- style: {
5548
- padding: "0 32px",
5549
- marginTop: "20px"
5550
- },
5551
- children: /* @__PURE__ */ jsxRuntime.jsxs(
5552
- "div",
5553
- {
5554
- style: {
5555
- padding: "12px 16px",
5556
- backgroundColor: "#EFF6FF",
5557
- borderRadius: "8px",
5558
- border: "1px solid #BFDBFE",
5559
- display: "flex",
5560
- alignItems: "center",
5561
- gap: "10px"
5562
- },
5563
- children: [
5564
- /* @__PURE__ */ jsxRuntime.jsx(
5565
- "div",
5566
- {
5567
- style: {
5568
- width: "32px",
5569
- height: "32px",
5570
- borderRadius: "50%",
5571
- backgroundColor: "#DBEAFE",
5572
- display: "flex",
5573
- alignItems: "center",
5574
- justifyContent: "center",
5575
- flexShrink: 0
5576
- },
5577
- children: /* @__PURE__ */ jsxRuntime.jsx(
5578
- "img",
5579
- {
5580
- src: img$3,
5581
- alt: "Rabby",
5582
- style: {
5583
- width: "20px",
5584
- height: "20px",
5585
- objectFit: "contain"
5586
- }
5587
- }
5588
- )
5589
- }
5590
- ),
5591
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
5592
- /* @__PURE__ */ jsxRuntime.jsx(
5593
- "p",
5594
- {
5595
- style: {
5596
- margin: "0 0 4px 0",
5597
- color: "#1E40AF",
5598
- fontSize: "13px",
5599
- fontWeight: 600
5600
- },
5601
- children: "Recommended Wallet"
5602
- }
5603
- ),
5604
- /* @__PURE__ */ jsxRuntime.jsx(
5605
- "p",
5606
- {
5607
- style: {
5608
- margin: 0,
5609
- color: "#1E3A8A",
5610
- fontSize: "12px",
5611
- lineHeight: "1.4"
5612
- },
5613
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5614
- }
5615
- )
5616
- ] })
5617
- ]
5618
- }
5619
- )
5620
- }
5621
- ),
5622
5550
  /* @__PURE__ */ jsxRuntime.jsxs(
5623
5551
  "div",
5624
5552
  {
@@ -5750,75 +5678,6 @@ const ConnectWalletModal = ({
5750
5678
  ]
5751
5679
  }
5752
5680
  ),
5753
- isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxRuntime.jsxs(
5754
- "div",
5755
- {
5756
- style: {
5757
- padding: "12px 16px",
5758
- backgroundColor: "#EFF6FF",
5759
- borderRadius: "8px",
5760
- border: "1px solid #BFDBFE",
5761
- display: "flex",
5762
- alignItems: "center",
5763
- gap: "10px"
5764
- },
5765
- children: [
5766
- /* @__PURE__ */ jsxRuntime.jsx(
5767
- "div",
5768
- {
5769
- style: {
5770
- width: "32px",
5771
- height: "32px",
5772
- borderRadius: "50%",
5773
- backgroundColor: "#DBEAFE",
5774
- display: "flex",
5775
- alignItems: "center",
5776
- justifyContent: "center",
5777
- flexShrink: 0
5778
- },
5779
- children: /* @__PURE__ */ jsxRuntime.jsx(
5780
- "img",
5781
- {
5782
- src: img$3,
5783
- alt: "Rabby",
5784
- style: {
5785
- width: "20px",
5786
- height: "20px",
5787
- objectFit: "contain"
5788
- }
5789
- }
5790
- )
5791
- }
5792
- ),
5793
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
5794
- /* @__PURE__ */ jsxRuntime.jsx(
5795
- "p",
5796
- {
5797
- style: {
5798
- margin: "0 0 4px 0",
5799
- color: "#1E40AF",
5800
- fontSize: "13px",
5801
- fontWeight: 600
5802
- },
5803
- children: "Recommended Wallet"
5804
- }
5805
- ),
5806
- /* @__PURE__ */ jsxRuntime.jsx(
5807
- "p",
5808
- {
5809
- style: {
5810
- margin: 0,
5811
- color: "#1E3A8A",
5812
- fontSize: "12px",
5813
- lineHeight: "1.4"
5814
- },
5815
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5816
- }
5817
- )
5818
- ] })
5819
- ]
5820
- }
5821
- ),
5822
5681
  isConnected && address ? /* @__PURE__ */ jsxRuntime.jsxs(
5823
5682
  "div",
5824
5683
  {
@@ -7209,7 +7068,7 @@ const DepositModal = React.memo(
7209
7068
  address: sourceAddress || address,
7210
7069
  supportedChains,
7211
7070
  fetchBalances,
7212
- refreshInterval: 8e3
7071
+ refreshInterval: 3e4
7213
7072
  });
7214
7073
  const [isExecuting, setIsExecuting] = React.useState(false);
7215
7074
  const [error, setError] = React.useState(null);
@@ -7247,26 +7106,6 @@ const DepositModal = React.memo(
7247
7106
  });
7248
7107
  }
7249
7108
  }, [depositAmount]);
7250
- React.useEffect(() => {
7251
- if (selectedDepositAssets.length === 0) return;
7252
- setSelectedDepositAssets((prev) => {
7253
- return prev.map((selectedItem) => {
7254
- if (!selectedItem.asset) return selectedItem;
7255
- const freshAsset = depositAssets.find(
7256
- (a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
7257
- );
7258
- if (freshAsset) {
7259
- return {
7260
- ...selectedItem,
7261
- asset: freshAsset,
7262
- // Preserve the user's entered amount
7263
- amount: selectedItem.amount
7264
- };
7265
- }
7266
- return selectedItem;
7267
- });
7268
- });
7269
- }, [assets]);
7270
7109
  React.useEffect(() => {
7271
7110
  if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
7272
7111
  const bridgedAmount = bridgedAmountRef.current;
@@ -7317,16 +7156,8 @@ const DepositModal = React.memo(
7317
7156
  const errorMessage = error2?.message || String(error2 || "");
7318
7157
  const errorDetails = error2?.details || "";
7319
7158
  const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
7320
- console.error("RPC Error Details:", {
7321
- code: error2?.code,
7322
- message: errorMessage,
7323
- details: errorDetails,
7324
- data: error2?.data,
7325
- stack: error2?.stack,
7326
- fullError: error2
7327
- });
7328
7159
  if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
7329
- return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
7160
+ return "Network error occurred. Please try again.";
7330
7161
  }
7331
7162
  return errorMessage || "Transaction failed";
7332
7163
  }, []);
@@ -7416,7 +7247,6 @@ const DepositModal = React.memo(
7416
7247
  }
7417
7248
  setAirdropMessage("Airdrop requested successfully.");
7418
7249
  } catch (e) {
7419
- console.log(e);
7420
7250
  const msg = handleRpcError(e);
7421
7251
  setAirdropError(msg);
7422
7252
  } finally {
@@ -7540,11 +7370,6 @@ const DepositModal = React.memo(
7540
7370
  }
7541
7371
  if (currentChain?.id !== chainId) {
7542
7372
  setError("Wrong chain selected. Switching network...");
7543
- console.log("Attempting to switch to chain:", {
7544
- chainId,
7545
- currentChainId: currentChain?.id,
7546
- chainName: getChainName$1(chainId)
7547
- });
7548
7373
  try {
7549
7374
  await switchChainAsync({ chainId });
7550
7375
  let attempts = 0;
@@ -7631,14 +7456,6 @@ const DepositModal = React.memo(
7631
7456
  tokenAddress = "0x0";
7632
7457
  }
7633
7458
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7634
- console.log("Sending transaction via MetaMask:", {
7635
- chainId,
7636
- isNative,
7637
- tokenAddress,
7638
- delegateContract,
7639
- amount: amount.toString(),
7640
- walletChainId: externalWalletClient.chain?.id
7641
- });
7642
7459
  const txHash = isNative ? await externalWalletClient.sendTransaction({
7643
7460
  to: delegateContract,
7644
7461
  value: amount
@@ -7779,14 +7596,6 @@ const DepositModal = React.memo(
7779
7596
  tokenAddress = "0x0";
7780
7597
  }
7781
7598
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7782
- console.log("Sending EIP-7702 transaction via MetaMask:", {
7783
- chainId,
7784
- isNative,
7785
- tokenAddress,
7786
- amount: amount.toString(),
7787
- recipient: address,
7788
- walletChainId: externalWalletClient.chain?.id
7789
- });
7790
7599
  const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
7791
7600
  to: address,
7792
7601
  value: amount
@@ -10414,7 +10223,7 @@ const SpiceWithdraw = (props) => {
10414
10223
  }
10415
10224
  const transports = {};
10416
10225
  chains.forEach((chain) => {
10417
- transports[chain.id] = wagmi.http(chain.rpc);
10226
+ transports[chain.id] = wagmi.http();
10418
10227
  });
10419
10228
  const connectorsList = [connectors.metaMask()];
10420
10229
  if (walletConnectProjectId) {
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
- import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, forwardRef, createElement, useMemo } from 'react';
3
+ import React, { useState, useRef, useEffect, useCallback, createContext, useContext, useTransition, useMemo, forwardRef, createElement } from 'react';
4
4
  import { defineChain, createPublicClient, http, isAddress, getAddress, parseEther, encodeFunctionData, parseUnits, erc20Abi } from 'viem';
5
- import { c as createTheme, B as Button, d as defaultTheme } from './Button-RifBkofT.js';
5
+ import { c as createTheme, B as Button, d as defaultTheme } from './Button-aWXByNBC.js';
6
6
  import { getBalance, readContract } from 'viem/actions';
7
7
  import { basecampTestnet, citreaTestnet, baseSepolia, arbitrumSepolia, sepolia } from 'viem/chains';
8
8
  import { createPortal } from 'react-dom';
@@ -101,7 +101,7 @@ const CHAIN_CONFIGS = {
101
101
  symbol: "ETH",
102
102
  decimals: 18
103
103
  },
104
- rpc: "https://site1.moralis-nodes.com/base-sepolia/0563a61e273c428f906716cd4befa362",
104
+ rpc: "https://sepolia.base.org",
105
105
  blockExplorers: {
106
106
  default: {
107
107
  name: "Basescan",
@@ -914,13 +914,12 @@ const useAssets = ({
914
914
  address,
915
915
  supportedChains,
916
916
  fetchBalances: fetchBalances2,
917
- refreshInterval = 8e3
918
- // 8 seconds default
917
+ refreshInterval = 1e4
918
+ // 30 seconds default
919
919
  }) => {
920
920
  const [assets, setAssets] = useState([]);
921
921
  const [loading, setLoading] = useState(false);
922
922
  const [error, setError] = useState(null);
923
- const isInitialLoadRef = useRef(true);
924
923
  const addressRef = useRef(address);
925
924
  const supportedChainsRef = useRef(supportedChains);
926
925
  const fetchBalancesRef = useRef(fetchBalances2);
@@ -937,9 +936,7 @@ const useAssets = ({
937
936
  setAssets([]);
938
937
  return;
939
938
  }
940
- if (isInitialLoadRef.current) {
941
- setLoading(true);
942
- }
939
+ setLoading(true);
943
940
  setError(null);
944
941
  try {
945
942
  const balances = await currentFetchBalances(currentAddress);
@@ -958,10 +955,7 @@ const useAssets = ({
958
955
  setError(errorMessage);
959
956
  console.error("Error fetching assets:", err);
960
957
  } finally {
961
- if (isInitialLoadRef.current) {
962
- setLoading(false);
963
- isInitialLoadRef.current = false;
964
- }
958
+ setLoading(false);
965
959
  }
966
960
  }, []);
967
961
  const getAssetsByChain = useCallback(
@@ -975,7 +969,6 @@ const useAssets = ({
975
969
  }, [assets]);
976
970
  useEffect(() => {
977
971
  if (address) {
978
- isInitialLoadRef.current = true;
979
972
  refreshAssets();
980
973
  }
981
974
  }, [address, refreshAssets]);
@@ -3962,6 +3955,7 @@ const DepositWidget = ({
3962
3955
  tokenAddress,
3963
3956
  tokenDecimals,
3964
3957
  supportedChains,
3958
+ supportedTokens,
3965
3959
  theme: themeMode = "light",
3966
3960
  styles,
3967
3961
  className = "",
@@ -4176,9 +4170,19 @@ const DepositWidget = ({
4176
4170
  setIsExecuting(false);
4177
4171
  }
4178
4172
  };
4179
- const depositAssets = supportedChains.flatMap(
4180
- (chainId) => getAllAssetsForChain(chainId, assets)
4181
- );
4173
+ const depositAssets = useMemo(() => {
4174
+ const allAssets = supportedChains.flatMap(
4175
+ (chainId) => getAllAssetsForChain(chainId, assets)
4176
+ );
4177
+ if (supportedTokens && supportedTokens.length > 0) {
4178
+ return allAssets.filter(
4179
+ (asset) => supportedTokens.some(
4180
+ (symbol) => symbol.toLowerCase() === asset.symbol.toLowerCase()
4181
+ )
4182
+ );
4183
+ }
4184
+ return allAssets;
4185
+ }, [supportedChains, assets, supportedTokens]);
4182
4186
  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
4183
4187
  const displayError = assetsError || error;
4184
4188
  const containerStyles = {
@@ -4666,6 +4670,7 @@ const DepositWidgetModal = ({
4666
4670
  tokenAddress,
4667
4671
  tokenDecimals,
4668
4672
  supportedChains,
4673
+ supportedTokens,
4669
4674
  theme: themeMode = "light",
4670
4675
  styles,
4671
4676
  className,
@@ -4732,6 +4737,7 @@ const DepositWidgetModal = ({
4732
4737
  tokenAddress,
4733
4738
  tokenDecimals,
4734
4739
  supportedChains,
4740
+ supportedTokens,
4735
4741
  theme: themeMode,
4736
4742
  styles: {
4737
4743
  ...styles,
@@ -5539,84 +5545,6 @@ const ConnectWalletModal = ({
5539
5545
  },
5540
5546
  children: [
5541
5547
  /* @__PURE__ */ jsx(ModalHeader, { title: "Connect Wallet", onClose }),
5542
- requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsx(
5543
- "div",
5544
- {
5545
- style: {
5546
- padding: "0 32px",
5547
- marginTop: "20px"
5548
- },
5549
- children: /* @__PURE__ */ jsxs(
5550
- "div",
5551
- {
5552
- style: {
5553
- padding: "12px 16px",
5554
- backgroundColor: "#EFF6FF",
5555
- borderRadius: "8px",
5556
- border: "1px solid #BFDBFE",
5557
- display: "flex",
5558
- alignItems: "center",
5559
- gap: "10px"
5560
- },
5561
- children: [
5562
- /* @__PURE__ */ jsx(
5563
- "div",
5564
- {
5565
- style: {
5566
- width: "32px",
5567
- height: "32px",
5568
- borderRadius: "50%",
5569
- backgroundColor: "#DBEAFE",
5570
- display: "flex",
5571
- alignItems: "center",
5572
- justifyContent: "center",
5573
- flexShrink: 0
5574
- },
5575
- children: /* @__PURE__ */ jsx(
5576
- "img",
5577
- {
5578
- src: img$3,
5579
- alt: "Rabby",
5580
- style: {
5581
- width: "20px",
5582
- height: "20px",
5583
- objectFit: "contain"
5584
- }
5585
- }
5586
- )
5587
- }
5588
- ),
5589
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
5590
- /* @__PURE__ */ jsx(
5591
- "p",
5592
- {
5593
- style: {
5594
- margin: "0 0 4px 0",
5595
- color: "#1E40AF",
5596
- fontSize: "13px",
5597
- fontWeight: 600
5598
- },
5599
- children: "Recommended Wallet"
5600
- }
5601
- ),
5602
- /* @__PURE__ */ jsx(
5603
- "p",
5604
- {
5605
- style: {
5606
- margin: 0,
5607
- color: "#1E3A8A",
5608
- fontSize: "12px",
5609
- lineHeight: "1.4"
5610
- },
5611
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5612
- }
5613
- )
5614
- ] })
5615
- ]
5616
- }
5617
- )
5618
- }
5619
- ),
5620
5548
  /* @__PURE__ */ jsxs(
5621
5549
  "div",
5622
5550
  {
@@ -5748,75 +5676,6 @@ const ConnectWalletModal = ({
5748
5676
  ]
5749
5677
  }
5750
5678
  ),
5751
- isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxs(
5752
- "div",
5753
- {
5754
- style: {
5755
- padding: "12px 16px",
5756
- backgroundColor: "#EFF6FF",
5757
- borderRadius: "8px",
5758
- border: "1px solid #BFDBFE",
5759
- display: "flex",
5760
- alignItems: "center",
5761
- gap: "10px"
5762
- },
5763
- children: [
5764
- /* @__PURE__ */ jsx(
5765
- "div",
5766
- {
5767
- style: {
5768
- width: "32px",
5769
- height: "32px",
5770
- borderRadius: "50%",
5771
- backgroundColor: "#DBEAFE",
5772
- display: "flex",
5773
- alignItems: "center",
5774
- justifyContent: "center",
5775
- flexShrink: 0
5776
- },
5777
- children: /* @__PURE__ */ jsx(
5778
- "img",
5779
- {
5780
- src: img$3,
5781
- alt: "Rabby",
5782
- style: {
5783
- width: "20px",
5784
- height: "20px",
5785
- objectFit: "contain"
5786
- }
5787
- }
5788
- )
5789
- }
5790
- ),
5791
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
5792
- /* @__PURE__ */ jsx(
5793
- "p",
5794
- {
5795
- style: {
5796
- margin: "0 0 4px 0",
5797
- color: "#1E40AF",
5798
- fontSize: "13px",
5799
- fontWeight: 600
5800
- },
5801
- children: "Recommended Wallet"
5802
- }
5803
- ),
5804
- /* @__PURE__ */ jsx(
5805
- "p",
5806
- {
5807
- style: {
5808
- margin: 0,
5809
- color: "#1E3A8A",
5810
- fontSize: "12px",
5811
- lineHeight: "1.4"
5812
- },
5813
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5814
- }
5815
- )
5816
- ] })
5817
- ]
5818
- }
5819
- ),
5820
5679
  isConnected && address ? /* @__PURE__ */ jsxs(
5821
5680
  "div",
5822
5681
  {
@@ -7207,7 +7066,7 @@ const DepositModal = React.memo(
7207
7066
  address: sourceAddress || address,
7208
7067
  supportedChains,
7209
7068
  fetchBalances,
7210
- refreshInterval: 8e3
7069
+ refreshInterval: 3e4
7211
7070
  });
7212
7071
  const [isExecuting, setIsExecuting] = useState(false);
7213
7072
  const [error, setError] = useState(null);
@@ -7245,26 +7104,6 @@ const DepositModal = React.memo(
7245
7104
  });
7246
7105
  }
7247
7106
  }, [depositAmount]);
7248
- useEffect(() => {
7249
- if (selectedDepositAssets.length === 0) return;
7250
- setSelectedDepositAssets((prev) => {
7251
- return prev.map((selectedItem) => {
7252
- if (!selectedItem.asset) return selectedItem;
7253
- const freshAsset = depositAssets.find(
7254
- (a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
7255
- );
7256
- if (freshAsset) {
7257
- return {
7258
- ...selectedItem,
7259
- asset: freshAsset,
7260
- // Preserve the user's entered amount
7261
- amount: selectedItem.amount
7262
- };
7263
- }
7264
- return selectedItem;
7265
- });
7266
- });
7267
- }, [assets]);
7268
7107
  useEffect(() => {
7269
7108
  if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
7270
7109
  const bridgedAmount = bridgedAmountRef.current;
@@ -7315,16 +7154,8 @@ const DepositModal = React.memo(
7315
7154
  const errorMessage = error2?.message || String(error2 || "");
7316
7155
  const errorDetails = error2?.details || "";
7317
7156
  const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
7318
- console.error("RPC Error Details:", {
7319
- code: error2?.code,
7320
- message: errorMessage,
7321
- details: errorDetails,
7322
- data: error2?.data,
7323
- stack: error2?.stack,
7324
- fullError: error2
7325
- });
7326
7157
  if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
7327
- return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
7158
+ return "Network error occurred. Please try again.";
7328
7159
  }
7329
7160
  return errorMessage || "Transaction failed";
7330
7161
  }, []);
@@ -7414,7 +7245,6 @@ const DepositModal = React.memo(
7414
7245
  }
7415
7246
  setAirdropMessage("Airdrop requested successfully.");
7416
7247
  } catch (e) {
7417
- console.log(e);
7418
7248
  const msg = handleRpcError(e);
7419
7249
  setAirdropError(msg);
7420
7250
  } finally {
@@ -7538,11 +7368,6 @@ const DepositModal = React.memo(
7538
7368
  }
7539
7369
  if (currentChain?.id !== chainId) {
7540
7370
  setError("Wrong chain selected. Switching network...");
7541
- console.log("Attempting to switch to chain:", {
7542
- chainId,
7543
- currentChainId: currentChain?.id,
7544
- chainName: getChainName$1(chainId)
7545
- });
7546
7371
  try {
7547
7372
  await switchChainAsync({ chainId });
7548
7373
  let attempts = 0;
@@ -7629,14 +7454,6 @@ const DepositModal = React.memo(
7629
7454
  tokenAddress = "0x0";
7630
7455
  }
7631
7456
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7632
- console.log("Sending transaction via MetaMask:", {
7633
- chainId,
7634
- isNative,
7635
- tokenAddress,
7636
- delegateContract,
7637
- amount: amount.toString(),
7638
- walletChainId: externalWalletClient.chain?.id
7639
- });
7640
7457
  const txHash = isNative ? await externalWalletClient.sendTransaction({
7641
7458
  to: delegateContract,
7642
7459
  value: amount
@@ -7777,14 +7594,6 @@ const DepositModal = React.memo(
7777
7594
  tokenAddress = "0x0";
7778
7595
  }
7779
7596
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7780
- console.log("Sending EIP-7702 transaction via MetaMask:", {
7781
- chainId,
7782
- isNative,
7783
- tokenAddress,
7784
- amount: amount.toString(),
7785
- recipient: address,
7786
- walletChainId: externalWalletClient.chain?.id
7787
- });
7788
7597
  const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
7789
7598
  to: address,
7790
7599
  value: amount
@@ -10412,7 +10221,7 @@ const SpiceWithdraw = (props) => {
10412
10221
  }
10413
10222
  const transports = {};
10414
10223
  chains.forEach((chain) => {
10415
- transports[chain.id] = http$1(chain.rpc);
10224
+ transports[chain.id] = http$1();
10416
10225
  });
10417
10226
  const connectorsList = [metaMask()];
10418
10227
  if (walletConnectProjectId) {
@@ -22,6 +22,7 @@ export interface DepositWidgetProps {
22
22
  tokenAddress: Address;
23
23
  tokenDecimals: number;
24
24
  supportedChains: number[];
25
+ supportedTokens?: string[];
25
26
  theme?: ThemeMode;
26
27
  styles?: CustomStyles;
27
28
  className?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicenet-io/spiceflow-ui",
3
- "version": "1.7.6",
3
+ "version": "1.8.0",
4
4
  "description": "Spiceflow UI SDK",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
File without changes