@spicenet-io/spiceflow-ui 1.7.7 → 1.8.1

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]);
@@ -1668,31 +1661,6 @@ const AssetSelectorComponent = ({
1668
1661
  ]);
1669
1662
  const handleAmountChange = (value) => {
1670
1663
  const cleanValue = parseNumericInput(value);
1671
- if (!cleanValue) {
1672
- setLocalAmount(cleanValue);
1673
- if (debounceTimerRef.current) {
1674
- clearTimeout(debounceTimerRef.current);
1675
- }
1676
- debounceTimerRef.current = setTimeout(() => {
1677
- onAmountChange(cleanValue);
1678
- }, 300);
1679
- return;
1680
- }
1681
- if (selectedAsset?.asset) {
1682
- const numAmount = parseFloat(cleanValue);
1683
- const maxBalance = selectedAsset.asset.balanceFormatted;
1684
- if (!isNaN(numAmount) && numAmount > maxBalance) {
1685
- const clampedAmount = maxBalance.toString();
1686
- setLocalAmount(clampedAmount);
1687
- if (debounceTimerRef.current) {
1688
- clearTimeout(debounceTimerRef.current);
1689
- }
1690
- debounceTimerRef.current = setTimeout(() => {
1691
- onAmountChange(clampedAmount);
1692
- }, 300);
1693
- return;
1694
- }
1695
- }
1696
1664
  setLocalAmount(cleanValue);
1697
1665
  if (debounceTimerRef.current) {
1698
1666
  clearTimeout(debounceTimerRef.current);
@@ -3989,6 +3957,7 @@ const DepositWidget = ({
3989
3957
  tokenAddress,
3990
3958
  tokenDecimals,
3991
3959
  supportedChains,
3960
+ supportedTokens,
3992
3961
  theme: themeMode = "light",
3993
3962
  styles,
3994
3963
  className = "",
@@ -4203,9 +4172,21 @@ const DepositWidget = ({
4203
4172
  setIsExecuting(false);
4204
4173
  }
4205
4174
  };
4206
- const depositAssets = supportedChains.flatMap(
4207
- (chainId) => getAllAssetsForChain(chainId, assets)
4208
- );
4175
+ const depositAssets = React.useMemo(() => {
4176
+ const allAssets = supportedChains.flatMap(
4177
+ (chainId) => getAllAssetsForChain(chainId, assets)
4178
+ );
4179
+ console.log("allAssets", allAssets);
4180
+ console.log("supportedTokens", supportedTokens);
4181
+ if (supportedTokens && supportedTokens.length > 0) {
4182
+ return allAssets.filter(
4183
+ (asset) => supportedTokens.some(
4184
+ (symbol) => symbol.toLowerCase() === asset.symbol.toLowerCase()
4185
+ )
4186
+ );
4187
+ }
4188
+ return allAssets;
4189
+ }, [supportedChains, assets, supportedTokens]);
4209
4190
  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
4210
4191
  const displayError = assetsError || error;
4211
4192
  const containerStyles = {
@@ -4693,6 +4674,7 @@ const DepositWidgetModal = ({
4693
4674
  tokenAddress,
4694
4675
  tokenDecimals,
4695
4676
  supportedChains,
4677
+ supportedTokens,
4696
4678
  theme: themeMode = "light",
4697
4679
  styles,
4698
4680
  className,
@@ -4759,6 +4741,7 @@ const DepositWidgetModal = ({
4759
4741
  tokenAddress,
4760
4742
  tokenDecimals,
4761
4743
  supportedChains,
4744
+ supportedTokens,
4762
4745
  theme: themeMode,
4763
4746
  styles: {
4764
4747
  ...styles,
@@ -5566,84 +5549,6 @@ const ConnectWalletModal = ({
5566
5549
  },
5567
5550
  children: [
5568
5551
  /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { title: "Connect Wallet", onClose }),
5569
- requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsxRuntime.jsx(
5570
- "div",
5571
- {
5572
- style: {
5573
- padding: "0 32px",
5574
- marginTop: "20px"
5575
- },
5576
- children: /* @__PURE__ */ jsxRuntime.jsxs(
5577
- "div",
5578
- {
5579
- style: {
5580
- padding: "12px 16px",
5581
- backgroundColor: "#EFF6FF",
5582
- borderRadius: "8px",
5583
- border: "1px solid #BFDBFE",
5584
- display: "flex",
5585
- alignItems: "center",
5586
- gap: "10px"
5587
- },
5588
- children: [
5589
- /* @__PURE__ */ jsxRuntime.jsx(
5590
- "div",
5591
- {
5592
- style: {
5593
- width: "32px",
5594
- height: "32px",
5595
- borderRadius: "50%",
5596
- backgroundColor: "#DBEAFE",
5597
- display: "flex",
5598
- alignItems: "center",
5599
- justifyContent: "center",
5600
- flexShrink: 0
5601
- },
5602
- children: /* @__PURE__ */ jsxRuntime.jsx(
5603
- "img",
5604
- {
5605
- src: img$3,
5606
- alt: "Rabby",
5607
- style: {
5608
- width: "20px",
5609
- height: "20px",
5610
- objectFit: "contain"
5611
- }
5612
- }
5613
- )
5614
- }
5615
- ),
5616
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
5617
- /* @__PURE__ */ jsxRuntime.jsx(
5618
- "p",
5619
- {
5620
- style: {
5621
- margin: "0 0 4px 0",
5622
- color: "#1E40AF",
5623
- fontSize: "13px",
5624
- fontWeight: 600
5625
- },
5626
- children: "Recommended Wallet"
5627
- }
5628
- ),
5629
- /* @__PURE__ */ jsxRuntime.jsx(
5630
- "p",
5631
- {
5632
- style: {
5633
- margin: 0,
5634
- color: "#1E3A8A",
5635
- fontSize: "12px",
5636
- lineHeight: "1.4"
5637
- },
5638
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5639
- }
5640
- )
5641
- ] })
5642
- ]
5643
- }
5644
- )
5645
- }
5646
- ),
5647
5552
  /* @__PURE__ */ jsxRuntime.jsxs(
5648
5553
  "div",
5649
5554
  {
@@ -5775,75 +5680,6 @@ const ConnectWalletModal = ({
5775
5680
  ]
5776
5681
  }
5777
5682
  ),
5778
- isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxRuntime.jsxs(
5779
- "div",
5780
- {
5781
- style: {
5782
- padding: "12px 16px",
5783
- backgroundColor: "#EFF6FF",
5784
- borderRadius: "8px",
5785
- border: "1px solid #BFDBFE",
5786
- display: "flex",
5787
- alignItems: "center",
5788
- gap: "10px"
5789
- },
5790
- children: [
5791
- /* @__PURE__ */ jsxRuntime.jsx(
5792
- "div",
5793
- {
5794
- style: {
5795
- width: "32px",
5796
- height: "32px",
5797
- borderRadius: "50%",
5798
- backgroundColor: "#DBEAFE",
5799
- display: "flex",
5800
- alignItems: "center",
5801
- justifyContent: "center",
5802
- flexShrink: 0
5803
- },
5804
- children: /* @__PURE__ */ jsxRuntime.jsx(
5805
- "img",
5806
- {
5807
- src: img$3,
5808
- alt: "Rabby",
5809
- style: {
5810
- width: "20px",
5811
- height: "20px",
5812
- objectFit: "contain"
5813
- }
5814
- }
5815
- )
5816
- }
5817
- ),
5818
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
5819
- /* @__PURE__ */ jsxRuntime.jsx(
5820
- "p",
5821
- {
5822
- style: {
5823
- margin: "0 0 4px 0",
5824
- color: "#1E40AF",
5825
- fontSize: "13px",
5826
- fontWeight: 600
5827
- },
5828
- children: "Recommended Wallet"
5829
- }
5830
- ),
5831
- /* @__PURE__ */ jsxRuntime.jsx(
5832
- "p",
5833
- {
5834
- style: {
5835
- margin: 0,
5836
- color: "#1E3A8A",
5837
- fontSize: "12px",
5838
- lineHeight: "1.4"
5839
- },
5840
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5841
- }
5842
- )
5843
- ] })
5844
- ]
5845
- }
5846
- ),
5847
5683
  isConnected && address ? /* @__PURE__ */ jsxRuntime.jsxs(
5848
5684
  "div",
5849
5685
  {
@@ -7234,7 +7070,7 @@ const DepositModal = React.memo(
7234
7070
  address: sourceAddress || address,
7235
7071
  supportedChains,
7236
7072
  fetchBalances,
7237
- refreshInterval: 8e3
7073
+ refreshInterval: 3e4
7238
7074
  });
7239
7075
  const [isExecuting, setIsExecuting] = React.useState(false);
7240
7076
  const [error, setError] = React.useState(null);
@@ -7272,26 +7108,6 @@ const DepositModal = React.memo(
7272
7108
  });
7273
7109
  }
7274
7110
  }, [depositAmount]);
7275
- React.useEffect(() => {
7276
- if (selectedDepositAssets.length === 0) return;
7277
- setSelectedDepositAssets((prev) => {
7278
- return prev.map((selectedItem) => {
7279
- if (!selectedItem.asset) return selectedItem;
7280
- const freshAsset = depositAssets.find(
7281
- (a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
7282
- );
7283
- if (freshAsset) {
7284
- return {
7285
- ...selectedItem,
7286
- asset: freshAsset,
7287
- // Preserve the user's entered amount
7288
- amount: selectedItem.amount
7289
- };
7290
- }
7291
- return selectedItem;
7292
- });
7293
- });
7294
- }, [assets]);
7295
7111
  React.useEffect(() => {
7296
7112
  if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
7297
7113
  const bridgedAmount = bridgedAmountRef.current;
@@ -7342,16 +7158,8 @@ const DepositModal = React.memo(
7342
7158
  const errorMessage = error2?.message || String(error2 || "");
7343
7159
  const errorDetails = error2?.details || "";
7344
7160
  const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
7345
- console.error("RPC Error Details:", {
7346
- code: error2?.code,
7347
- message: errorMessage,
7348
- details: errorDetails,
7349
- data: error2?.data,
7350
- stack: error2?.stack,
7351
- fullError: error2
7352
- });
7353
7161
  if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
7354
- return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
7162
+ return "Network error occurred. Please try again.";
7355
7163
  }
7356
7164
  return errorMessage || "Transaction failed";
7357
7165
  }, []);
@@ -7441,7 +7249,6 @@ const DepositModal = React.memo(
7441
7249
  }
7442
7250
  setAirdropMessage("Airdrop requested successfully.");
7443
7251
  } catch (e) {
7444
- console.log(e);
7445
7252
  const msg = handleRpcError(e);
7446
7253
  setAirdropError(msg);
7447
7254
  } finally {
@@ -7565,11 +7372,6 @@ const DepositModal = React.memo(
7565
7372
  }
7566
7373
  if (currentChain?.id !== chainId) {
7567
7374
  setError("Wrong chain selected. Switching network...");
7568
- console.log("Attempting to switch to chain:", {
7569
- chainId,
7570
- currentChainId: currentChain?.id,
7571
- chainName: getChainName$1(chainId)
7572
- });
7573
7375
  try {
7574
7376
  await switchChainAsync({ chainId });
7575
7377
  let attempts = 0;
@@ -7656,14 +7458,6 @@ const DepositModal = React.memo(
7656
7458
  tokenAddress = "0x0";
7657
7459
  }
7658
7460
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7659
- console.log("Sending transaction via MetaMask:", {
7660
- chainId,
7661
- isNative,
7662
- tokenAddress,
7663
- delegateContract,
7664
- amount: amount.toString(),
7665
- walletChainId: externalWalletClient.chain?.id
7666
- });
7667
7461
  const txHash = isNative ? await externalWalletClient.sendTransaction({
7668
7462
  to: delegateContract,
7669
7463
  value: amount
@@ -7804,14 +7598,6 @@ const DepositModal = React.memo(
7804
7598
  tokenAddress = "0x0";
7805
7599
  }
7806
7600
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7807
- console.log("Sending EIP-7702 transaction via MetaMask:", {
7808
- chainId,
7809
- isNative,
7810
- tokenAddress,
7811
- amount: amount.toString(),
7812
- recipient: address,
7813
- walletChainId: externalWalletClient.chain?.id
7814
- });
7815
7601
  const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
7816
7602
  to: address,
7817
7603
  value: amount
@@ -10439,7 +10225,7 @@ const SpiceWithdraw = (props) => {
10439
10225
  }
10440
10226
  const transports = {};
10441
10227
  chains.forEach((chain) => {
10442
- transports[chain.id] = wagmi.http(chain.rpc);
10228
+ transports[chain.id] = wagmi.http();
10443
10229
  });
10444
10230
  const connectorsList = [connectors.metaMask()];
10445
10231
  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]);
@@ -1666,31 +1659,6 @@ const AssetSelectorComponent = ({
1666
1659
  ]);
1667
1660
  const handleAmountChange = (value) => {
1668
1661
  const cleanValue = parseNumericInput(value);
1669
- if (!cleanValue) {
1670
- setLocalAmount(cleanValue);
1671
- if (debounceTimerRef.current) {
1672
- clearTimeout(debounceTimerRef.current);
1673
- }
1674
- debounceTimerRef.current = setTimeout(() => {
1675
- onAmountChange(cleanValue);
1676
- }, 300);
1677
- return;
1678
- }
1679
- if (selectedAsset?.asset) {
1680
- const numAmount = parseFloat(cleanValue);
1681
- const maxBalance = selectedAsset.asset.balanceFormatted;
1682
- if (!isNaN(numAmount) && numAmount > maxBalance) {
1683
- const clampedAmount = maxBalance.toString();
1684
- setLocalAmount(clampedAmount);
1685
- if (debounceTimerRef.current) {
1686
- clearTimeout(debounceTimerRef.current);
1687
- }
1688
- debounceTimerRef.current = setTimeout(() => {
1689
- onAmountChange(clampedAmount);
1690
- }, 300);
1691
- return;
1692
- }
1693
- }
1694
1662
  setLocalAmount(cleanValue);
1695
1663
  if (debounceTimerRef.current) {
1696
1664
  clearTimeout(debounceTimerRef.current);
@@ -3987,6 +3955,7 @@ const DepositWidget = ({
3987
3955
  tokenAddress,
3988
3956
  tokenDecimals,
3989
3957
  supportedChains,
3958
+ supportedTokens,
3990
3959
  theme: themeMode = "light",
3991
3960
  styles,
3992
3961
  className = "",
@@ -4201,9 +4170,21 @@ const DepositWidget = ({
4201
4170
  setIsExecuting(false);
4202
4171
  }
4203
4172
  };
4204
- const depositAssets = supportedChains.flatMap(
4205
- (chainId) => getAllAssetsForChain(chainId, assets)
4206
- );
4173
+ const depositAssets = useMemo(() => {
4174
+ const allAssets = supportedChains.flatMap(
4175
+ (chainId) => getAllAssetsForChain(chainId, assets)
4176
+ );
4177
+ console.log("allAssets", allAssets);
4178
+ console.log("supportedTokens", supportedTokens);
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]);
4207
4188
  const canDeposit = selectedDepositAsset && selectedDepositAsset.amount && parseFloat(selectedDepositAsset.amount) > 0 && parseFloat(selectedDepositAsset.amount) <= selectedDepositAsset.asset.balanceFormatted && isConnected && !isExecuting && depositBatches.length > 0;
4208
4189
  const displayError = assetsError || error;
4209
4190
  const containerStyles = {
@@ -4691,6 +4672,7 @@ const DepositWidgetModal = ({
4691
4672
  tokenAddress,
4692
4673
  tokenDecimals,
4693
4674
  supportedChains,
4675
+ supportedTokens,
4694
4676
  theme: themeMode = "light",
4695
4677
  styles,
4696
4678
  className,
@@ -4757,6 +4739,7 @@ const DepositWidgetModal = ({
4757
4739
  tokenAddress,
4758
4740
  tokenDecimals,
4759
4741
  supportedChains,
4742
+ supportedTokens,
4760
4743
  theme: themeMode,
4761
4744
  styles: {
4762
4745
  ...styles,
@@ -5564,84 +5547,6 @@ const ConnectWalletModal = ({
5564
5547
  },
5565
5548
  children: [
5566
5549
  /* @__PURE__ */ jsx(ModalHeader, { title: "Connect Wallet", onClose }),
5567
- requiredChainId === 421614 && !isConnected && /* @__PURE__ */ jsx(
5568
- "div",
5569
- {
5570
- style: {
5571
- padding: "0 32px",
5572
- marginTop: "20px"
5573
- },
5574
- children: /* @__PURE__ */ jsxs(
5575
- "div",
5576
- {
5577
- style: {
5578
- padding: "12px 16px",
5579
- backgroundColor: "#EFF6FF",
5580
- borderRadius: "8px",
5581
- border: "1px solid #BFDBFE",
5582
- display: "flex",
5583
- alignItems: "center",
5584
- gap: "10px"
5585
- },
5586
- children: [
5587
- /* @__PURE__ */ jsx(
5588
- "div",
5589
- {
5590
- style: {
5591
- width: "32px",
5592
- height: "32px",
5593
- borderRadius: "50%",
5594
- backgroundColor: "#DBEAFE",
5595
- display: "flex",
5596
- alignItems: "center",
5597
- justifyContent: "center",
5598
- flexShrink: 0
5599
- },
5600
- children: /* @__PURE__ */ jsx(
5601
- "img",
5602
- {
5603
- src: img$3,
5604
- alt: "Rabby",
5605
- style: {
5606
- width: "20px",
5607
- height: "20px",
5608
- objectFit: "contain"
5609
- }
5610
- }
5611
- )
5612
- }
5613
- ),
5614
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
5615
- /* @__PURE__ */ jsx(
5616
- "p",
5617
- {
5618
- style: {
5619
- margin: "0 0 4px 0",
5620
- color: "#1E40AF",
5621
- fontSize: "13px",
5622
- fontWeight: 600
5623
- },
5624
- children: "Recommended Wallet"
5625
- }
5626
- ),
5627
- /* @__PURE__ */ jsx(
5628
- "p",
5629
- {
5630
- style: {
5631
- margin: 0,
5632
- color: "#1E3A8A",
5633
- fontSize: "12px",
5634
- lineHeight: "1.4"
5635
- },
5636
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5637
- }
5638
- )
5639
- ] })
5640
- ]
5641
- }
5642
- )
5643
- }
5644
- ),
5645
5550
  /* @__PURE__ */ jsxs(
5646
5551
  "div",
5647
5552
  {
@@ -5773,75 +5678,6 @@ const ConnectWalletModal = ({
5773
5678
  ]
5774
5679
  }
5775
5680
  ),
5776
- isConnected && requiredChainId === 421614 && activeConnector && (activeConnector.name.toLowerCase().includes("metamask") || activeConnector.type === "injected") && /* @__PURE__ */ jsxs(
5777
- "div",
5778
- {
5779
- style: {
5780
- padding: "12px 16px",
5781
- backgroundColor: "#EFF6FF",
5782
- borderRadius: "8px",
5783
- border: "1px solid #BFDBFE",
5784
- display: "flex",
5785
- alignItems: "center",
5786
- gap: "10px"
5787
- },
5788
- children: [
5789
- /* @__PURE__ */ jsx(
5790
- "div",
5791
- {
5792
- style: {
5793
- width: "32px",
5794
- height: "32px",
5795
- borderRadius: "50%",
5796
- backgroundColor: "#DBEAFE",
5797
- display: "flex",
5798
- alignItems: "center",
5799
- justifyContent: "center",
5800
- flexShrink: 0
5801
- },
5802
- children: /* @__PURE__ */ jsx(
5803
- "img",
5804
- {
5805
- src: img$3,
5806
- alt: "Rabby",
5807
- style: {
5808
- width: "20px",
5809
- height: "20px",
5810
- objectFit: "contain"
5811
- }
5812
- }
5813
- )
5814
- }
5815
- ),
5816
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
5817
- /* @__PURE__ */ jsx(
5818
- "p",
5819
- {
5820
- style: {
5821
- margin: "0 0 4px 0",
5822
- color: "#1E40AF",
5823
- fontSize: "13px",
5824
- fontWeight: 600
5825
- },
5826
- children: "Recommended Wallet"
5827
- }
5828
- ),
5829
- /* @__PURE__ */ jsx(
5830
- "p",
5831
- {
5832
- style: {
5833
- margin: 0,
5834
- color: "#1E3A8A",
5835
- fontSize: "12px",
5836
- lineHeight: "1.4"
5837
- },
5838
- children: "For Arbitrum Sepolia, we recommend using Rabby wallet instead of MetaMask for the best experience."
5839
- }
5840
- )
5841
- ] })
5842
- ]
5843
- }
5844
- ),
5845
5681
  isConnected && address ? /* @__PURE__ */ jsxs(
5846
5682
  "div",
5847
5683
  {
@@ -7232,7 +7068,7 @@ const DepositModal = React.memo(
7232
7068
  address: sourceAddress || address,
7233
7069
  supportedChains,
7234
7070
  fetchBalances,
7235
- refreshInterval: 8e3
7071
+ refreshInterval: 3e4
7236
7072
  });
7237
7073
  const [isExecuting, setIsExecuting] = useState(false);
7238
7074
  const [error, setError] = useState(null);
@@ -7270,26 +7106,6 @@ const DepositModal = React.memo(
7270
7106
  });
7271
7107
  }
7272
7108
  }, [depositAmount]);
7273
- useEffect(() => {
7274
- if (selectedDepositAssets.length === 0) return;
7275
- setSelectedDepositAssets((prev) => {
7276
- return prev.map((selectedItem) => {
7277
- if (!selectedItem.asset) return selectedItem;
7278
- const freshAsset = depositAssets.find(
7279
- (a) => a.chainId === selectedItem.asset.chainId && a.address.toLowerCase() === selectedItem.asset.address.toLowerCase()
7280
- );
7281
- if (freshAsset) {
7282
- return {
7283
- ...selectedItem,
7284
- asset: freshAsset,
7285
- // Preserve the user's entered amount
7286
- amount: selectedItem.amount
7287
- };
7288
- }
7289
- return selectedItem;
7290
- });
7291
- });
7292
- }, [assets]);
7293
7109
  useEffect(() => {
7294
7110
  if (nonEip7702Mode && intentStatus?.overallStatus === "success" && postDepositInstruction && postDepositStatus === "idle") {
7295
7111
  const bridgedAmount = bridgedAmountRef.current;
@@ -7340,16 +7156,8 @@ const DepositModal = React.memo(
7340
7156
  const errorMessage = error2?.message || String(error2 || "");
7341
7157
  const errorDetails = error2?.details || "";
7342
7158
  const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
7343
- console.error("RPC Error Details:", {
7344
- code: error2?.code,
7345
- message: errorMessage,
7346
- details: errorDetails,
7347
- data: error2?.data,
7348
- stack: error2?.stack,
7349
- fullError: error2
7350
- });
7351
7159
  if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
7352
- return "RPC Network error. Try switching your MetaMask RPC endpoint or try again.";
7160
+ return "Network error occurred. Please try again.";
7353
7161
  }
7354
7162
  return errorMessage || "Transaction failed";
7355
7163
  }, []);
@@ -7439,7 +7247,6 @@ const DepositModal = React.memo(
7439
7247
  }
7440
7248
  setAirdropMessage("Airdrop requested successfully.");
7441
7249
  } catch (e) {
7442
- console.log(e);
7443
7250
  const msg = handleRpcError(e);
7444
7251
  setAirdropError(msg);
7445
7252
  } finally {
@@ -7563,11 +7370,6 @@ const DepositModal = React.memo(
7563
7370
  }
7564
7371
  if (currentChain?.id !== chainId) {
7565
7372
  setError("Wrong chain selected. Switching network...");
7566
- console.log("Attempting to switch to chain:", {
7567
- chainId,
7568
- currentChainId: currentChain?.id,
7569
- chainName: getChainName$1(chainId)
7570
- });
7571
7373
  try {
7572
7374
  await switchChainAsync({ chainId });
7573
7375
  let attempts = 0;
@@ -7654,14 +7456,6 @@ const DepositModal = React.memo(
7654
7456
  tokenAddress = "0x0";
7655
7457
  }
7656
7458
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7657
- console.log("Sending transaction via MetaMask:", {
7658
- chainId,
7659
- isNative,
7660
- tokenAddress,
7661
- delegateContract,
7662
- amount: amount.toString(),
7663
- walletChainId: externalWalletClient.chain?.id
7664
- });
7665
7459
  const txHash = isNative ? await externalWalletClient.sendTransaction({
7666
7460
  to: delegateContract,
7667
7461
  value: amount
@@ -7802,14 +7596,6 @@ const DepositModal = React.memo(
7802
7596
  tokenAddress = "0x0";
7803
7597
  }
7804
7598
  const isNative = selectedAsset.asset.isNative || tokenAddress.toLowerCase() === "0x0";
7805
- console.log("Sending EIP-7702 transaction via MetaMask:", {
7806
- chainId,
7807
- isNative,
7808
- tokenAddress,
7809
- amount: amount.toString(),
7810
- recipient: address,
7811
- walletChainId: externalWalletClient.chain?.id
7812
- });
7813
7599
  const transferToEmbeddedTx = isNative ? await externalWalletClient.sendTransaction({
7814
7600
  to: address,
7815
7601
  value: amount
@@ -10437,7 +10223,7 @@ const SpiceWithdraw = (props) => {
10437
10223
  }
10438
10224
  const transports = {};
10439
10225
  chains.forEach((chain) => {
10440
- transports[chain.id] = http$1(chain.rpc);
10226
+ transports[chain.id] = http$1();
10441
10227
  });
10442
10228
  const connectorsList = [metaMask()];
10443
10229
  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.7",
3
+ "version": "1.8.1",
4
4
  "description": "Spiceflow UI SDK",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
File without changes