@spicenet-io/spiceflow-ui 1.9.3 → 1.9.5

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.
Files changed (6) hide show
  1. package/dist/components/DepositWidget/CrossChainDepositModal.d.ts +2 -0
  2. package/dist/components/DepositWidget/DepositWidgetModal.d.ts +1 -1
  3. package/dist/index.cjs.js +75 -178
  4. package/dist/index.js +75 -178
  5. package/dist/types/deposit.d.ts +1 -0
  6. package/package.json +1 -1
package/dist/components/DepositWidget/CrossChainDepositModal.d.ts CHANGED
@@ -23,6 +23,8 @@ export interface CrossChainDepositModalProps {
23
23
  isOpen: boolean;
24
24
  onClose: () => void;
25
25
  onComplete: () => void;
26
+ title?: string;
27
+ description?: string;
26
28
  chainId: 11155111 | 421614 | 84532 | undefined;
27
29
  externalWalletAddress: string;
28
30
  escrowAddress?: string;
package/dist/components/DepositWidget/DepositWidgetModal.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface DepositWidgetModalProps extends DepositWidgetProps {
4
4
  isOpen: boolean;
5
5
  onClose: () => void;
6
6
  title?: string;
7
- subtitle?: React.ReactNode;
7
+ description?: React.ReactNode;
8
8
  maxWidth?: string;
9
9
  }
10
10
  export declare const DepositWidgetModal: React.FC<DepositWidgetModalProps>;
package/dist/index.cjs.js CHANGED
@@ -2753,6 +2753,7 @@ const PrivyProviderWrapper = ({ children, appId, supportedViemChains }) => {
2753
2753
  theme: "#fafafa",
2754
2754
  showWalletLoginFirst: false,
2755
2755
  walletChainType: "ethereum-only",
2756
+ logo: "https://spicenet.io/assets/Spicenet_Lockup_Secondary_FullColor.png",
2756
2757
  walletList: [
2757
2758
  "detected_ethereum_wallets",
2758
2759
  "metamask",
@@ -4405,7 +4406,8 @@ const DepositWidget = ({
4405
4406
  className = "",
4406
4407
  depositInputHook,
4407
4408
  onDepositSuccess,
4408
- onDepositError
4409
+ onDepositError,
4410
+ onTopUp
4409
4411
  }) => {
4410
4412
  const baseTheme = Button.createTheme(themeMode);
4411
4413
  const theme = {
@@ -4429,13 +4431,14 @@ const DepositWidget = ({
4429
4431
  provider,
4430
4432
  actions
4431
4433
  } = wallet;
4432
- const spiceFlowContext = React.useContext(SpiceFlowProviderContext);
4434
+ React.useContext(SpiceFlowProviderContext);
4433
4435
  const [selectedDepositAsset, setSelectedDepositAsset] = React.useState(null);
4434
4436
  const [isPending, startTransition] = React.useTransition();
4435
4437
  const {
4436
4438
  assets: spiceAssets,
4437
4439
  loading: loadingSpiceAssets,
4438
4440
  error: spiceAssetsError,
4441
+ hasBalance: hasSpiceBalance,
4439
4442
  refetch: refreshSpiceAssets
4440
4443
  } = useSpiceAssets({
4441
4444
  address,
@@ -4617,124 +4620,48 @@ const DepositWidget = ({
4617
4620
  ) });
4618
4621
  }
4619
4622
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyles, className, children: [
4620
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
4623
+ !loadingSpiceAssets && !hasSpiceBalance && /* @__PURE__ */ jsxRuntime.jsx(
4621
4624
  "div",
4622
4625
  {
4623
4626
  style: {
4624
- padding: styles?.statusDisplay?.padding || "8px",
4625
- backgroundColor: styles?.statusDisplay?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
4626
- border: `1px solid ${styles?.statusDisplay?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
4627
- borderRadius: styles?.statusDisplay?.borderRadius || theme.borderRadius.md
4627
+ backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning || "#f59e0b"}20`,
4628
+ border: `1px solid ${theme.mode === "light" ? "#fcd34d" : theme.colors.warning || "#f59e0b"}`,
4629
+ borderRadius: theme.borderRadius.md,
4630
+ padding: theme.spacing.md,
4631
+ marginBottom: theme.spacing.md,
4632
+ textAlign: "center"
4628
4633
  },
4629
- children: [
4630
- /* @__PURE__ */ jsxRuntime.jsxs(
4631
- "div",
4632
- {
4633
- style: {
4634
- display: "flex",
4635
- alignItems: "center",
4636
- justifyContent: "space-between"
4637
- },
4638
- children: [
4639
- /* @__PURE__ */ jsxRuntime.jsxs(
4640
- "span",
4641
- {
4642
- style: {
4643
- fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
4644
- fontWeight: styles?.statusDisplay?.text?.fontWeight || theme.typography.fontWeight.medium,
4645
- color: styles?.statusDisplay?.text?.color || theme.colors.text,
4646
- fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
4647
- },
4648
- children: [
4649
- spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
4650
- " ",
4651
- "Status"
4652
- ]
4653
- }
4654
- ),
4655
- /* @__PURE__ */ jsxRuntime.jsx(
4656
- "span",
4657
- {
4658
- style: {
4659
- fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
4660
- padding: `2px ${theme.spacing.xs}`,
4661
- borderRadius: theme.borderRadius.sm,
4662
- border: `1px solid ${isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning}`,
4663
- backgroundColor: isConnected ? theme.mode === "light" ? "#dcfce7" : `${styles?.statusDisplay?.successColor || theme.colors.success}20` : theme.mode === "light" ? "#fef3c7" : `${styles?.statusDisplay?.warningColor || theme.colors.warning}20`,
4664
- color: isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning,
4665
- fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
4666
- },
4667
- children: isConnected ? "Connected" : "Disconnected"
4668
- }
4669
- )
4670
- ]
4671
- }
4672
- ),
4673
- isConnected && address && /* @__PURE__ */ jsxRuntime.jsxs(
4674
- "div",
4675
- {
4676
- className: "ibm-plex-mono",
4677
- style: {
4678
- marginTop: "6px",
4679
- backgroundColor: styles?.addressDisplay?.backgroundColor || (theme.mode === "light" ? "#f3f4f6" : theme.colors.secondary),
4680
- border: `1px solid ${styles?.addressDisplay?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.borderHover)}`,
4681
- borderRadius: styles?.addressDisplay?.borderRadius || theme.borderRadius.sm,
4682
- padding: styles?.addressDisplay?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
4683
- fontSize: styles?.addressDisplay?.fontSize || theme.typography.fontSize.xs,
4684
- fontFamily: styles?.addressDisplay?.fontFamily || (styles?.fontFamily ? `${styles.fontFamily}, IBM Plex Mono` : "IBM Plex Mono"),
4685
- color: styles?.addressDisplay?.color || theme.colors.text,
4686
- display: "flex",
4687
- alignItems: "center",
4688
- gap: theme.spacing.sm
4689
- },
4690
- children: [
4691
- /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1 }, children: [
4692
- address.slice(0, 6),
4693
- "...",
4694
- address.slice(-4)
4695
- ] }),
4696
- /* @__PURE__ */ jsxRuntime.jsx(
4697
- "button",
4698
- {
4699
- style: {
4700
- fontSize: styles?.addressDisplay?.copyButton?.fontSize || theme.typography.fontSize.xs,
4701
- padding: styles?.addressDisplay?.copyButton?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
4702
- backgroundColor: styles?.addressDisplay?.copyButton?.backgroundColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.surfaceHover),
4703
- border: `1px solid ${styles?.addressDisplay?.copyButton?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.border)}`,
4704
- borderRadius: styles?.addressDisplay?.copyButton?.borderRadius || theme.borderRadius.sm,
4705
- color: styles?.addressDisplay?.copyButton?.color || theme.colors.text,
4706
- fontFamily: styles?.addressDisplay?.copyButton?.fontFamily || theme.typography.fontFamily,
4707
- cursor: "pointer",
4708
- transition: `background-color ${theme.animation.normal}`
4709
- },
4710
- onClick: () => copyToClipboard(address),
4711
- title: "Copy address",
4712
- children: "Copy"
4713
- }
4714
- )
4715
- ]
4716
- }
4717
- ),
4718
- !ready && /* @__PURE__ */ jsxRuntime.jsxs(
4719
- "div",
4720
- {
4721
- style: {
4722
- marginTop: "6px",
4723
- fontSize: theme.typography.fontSize.xs,
4724
- color: theme.colors.textSecondary,
4725
- fontFamily: theme.typography.fontFamily
4726
- },
4727
- children: [
4728
- "Loading",
4729
- " ",
4730
- spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
4731
- "..."
4732
- ]
4733
- }
4734
- )
4735
- ]
4634
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
4635
+ "p",
4636
+ {
4637
+ style: {
4638
+ color: theme.mode === "light" ? "#92400e" : "#fbbf24",
4639
+ fontSize: theme.typography.fontSize.sm,
4640
+ fontFamily: theme.typography.fontFamily,
4641
+ margin: 0,
4642
+ lineHeight: 1.5
4643
+ },
4644
+ children: [
4645
+ "You do not have any cross-chain balance.",
4646
+ " ",
4647
+ onTopUp && /* @__PURE__ */ jsxRuntime.jsx(
4648
+ "span",
4649
+ {
4650
+ onClick: onTopUp,
4651
+ style: {
4652
+ color: theme.colors.primary,
4653
+ textDecoration: "underline",
4654
+ cursor: "pointer",
4655
+ fontWeight: 600
4656
+ },
4657
+ children: "Top-up here."
4658
+ }
4659
+ )
4660
+ ]
4661
+ }
4662
+ )
4736
4663
  }
4737
- ) }),
4664
+ ),
4738
4665
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsx(
4739
4666
  AssetSelector,
4740
4667
  {
@@ -4750,50 +4677,6 @@ const DepositWidget = ({
4750
4677
  styles
4751
4678
  }
4752
4679
  ) }),
4753
- depositBatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxRuntime.jsxs(
4754
- "div",
4755
- {
4756
- style: {
4757
- backgroundColor: styles?.infoCard?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
4758
- border: `1px solid ${styles?.infoCard?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
4759
- borderRadius: styles?.infoCard?.borderRadius || theme.borderRadius.md,
4760
- padding: styles?.infoCard?.padding || theme.spacing.sm
4761
- },
4762
- children: [
4763
- /* @__PURE__ */ jsxRuntime.jsx(
4764
- "div",
4765
- {
4766
- style: {
4767
- fontSize: styles?.infoCard?.title?.fontSize || theme.typography.fontSize.xs,
4768
- fontWeight: styles?.infoCard?.title?.fontWeight || theme.typography.fontWeight.medium,
4769
- color: styles?.infoCard?.title?.color || theme.colors.text,
4770
- fontFamily: styles?.infoCard?.title?.fontFamily || theme.typography.fontFamily,
4771
- marginBottom: "4px"
4772
- },
4773
- children: "Deposit Batches Ready"
4774
- }
4775
- ),
4776
- /* @__PURE__ */ jsxRuntime.jsxs(
4777
- "div",
4778
- {
4779
- style: {
4780
- fontSize: styles?.infoCard?.description?.fontSize || theme.typography.fontSize.xs,
4781
- color: styles?.infoCard?.description?.color || theme.colors.textSecondary,
4782
- fontFamily: styles?.infoCard?.description?.fontFamily || theme.typography.fontFamily
4783
- },
4784
- children: [
4785
- depositBatches.length,
4786
- " deposit batch",
4787
- depositBatches.length > 1 ? "es" : "",
4788
- " across chains:",
4789
- " ",
4790
- [...new Set(depositBatches.map((b) => b.chainId))].join(", ")
4791
- ]
4792
- }
4793
- )
4794
- ]
4795
- }
4796
- ) }),
4797
4680
  displayError && /* @__PURE__ */ jsxRuntime.jsx(
4798
4681
  "div",
4799
4682
  {
@@ -4830,7 +4713,7 @@ const DepositWidget = ({
4830
4713
  children: /* @__PURE__ */ jsxRuntime.jsx(
4831
4714
  Button.Button,
4832
4715
  {
4833
- variant: "primary",
4716
+ variant: "outline",
4834
4717
  fullWidth: true,
4835
4718
  onClick: handleDeposit,
4836
4719
  loading: isExecuting,
@@ -5061,7 +4944,7 @@ const DepositWidgetModal = ({
5061
4944
  isOpen,
5062
4945
  onClose,
5063
4946
  title = "Deposit",
5064
- subtitle,
4947
+ description = "Deposit funds to execute chain batches across multiple networks.",
5065
4948
  maxWidth = "480px",
5066
4949
  // Pass through all DepositWidget props
5067
4950
  depositBatches,
@@ -5077,7 +4960,7 @@ const DepositWidgetModal = ({
5077
4960
  onDepositError
5078
4961
  }) => {
5079
4962
  const theme = Button.createTheme(themeMode);
5080
- const defaultSubtitle = /* @__PURE__ */ jsxRuntime.jsxs(
4963
+ const defaultDescription = /* @__PURE__ */ jsxRuntime.jsxs(
5081
4964
  "div",
5082
4965
  {
5083
4966
  style: {
@@ -5109,7 +4992,7 @@ const DepositWidgetModal = ({
5109
4992
  lineHeight: "1.4",
5110
4993
  fontFamily: "system-ui, -apple-system, sans-serif"
5111
4994
  },
5112
- children: "Deposit funds to execute chain batches across multiple networks."
4995
+ children: description
5113
4996
  }
5114
4997
  )
5115
4998
  ]
@@ -5124,7 +5007,7 @@ const DepositWidgetModal = ({
5124
5007
  isOpen,
5125
5008
  onClose,
5126
5009
  title,
5127
- subtitle: subtitle || defaultSubtitle,
5010
+ subtitle: description || defaultDescription,
5128
5011
  styles,
5129
5012
  theme,
5130
5013
  maxWidth,
@@ -5399,6 +5282,8 @@ const CrossChainDepositModal = ({
5399
5282
  isOpen,
5400
5283
  onClose,
5401
5284
  onComplete,
5285
+ title = "Deposit to Spicenet",
5286
+ description = "Select tokens and enter amounts to deposit to your Spicenet Account",
5402
5287
  chainId,
5403
5288
  externalWalletAddress,
5404
5289
  escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
@@ -5629,7 +5514,7 @@ const CrossChainDepositModal = ({
5629
5514
  }
5630
5515
  }
5631
5516
  ),
5632
- /* @__PURE__ */ jsxRuntime.jsxs(
5517
+ /* @__PURE__ */ jsxRuntime.jsx(
5633
5518
  "p",
5634
5519
  {
5635
5520
  style: {
@@ -5638,12 +5523,7 @@ const CrossChainDepositModal = ({
5638
5523
  margin: 0,
5639
5524
  lineHeight: "1.5"
5640
5525
  },
5641
- children: [
5642
- "Select tokens and enter amounts to deposit to your Spicenet Account on",
5643
- " ",
5644
- chainConfig?.displayName || `Chain ${chainId}`,
5645
- "."
5646
- ]
5526
+ children: description
5647
5527
  }
5648
5528
  )
5649
5529
  ]
@@ -5801,7 +5681,7 @@ const CrossChainDepositModal = ({
5801
5681
  {
5802
5682
  isOpen,
5803
5683
  onClose,
5804
- title: "Deposit to Spicenet",
5684
+ title,
5805
5685
  subtitle,
5806
5686
  theme,
5807
5687
  maxWidth: "480px",
@@ -5928,7 +5808,6 @@ const CrossChainDepositModal = ({
5928
5808
  variant: "outline",
5929
5809
  fullWidth: true,
5930
5810
  onClick: executeDeposit,
5931
- loading: isExecuting,
5932
5811
  disabled: !canDeposit,
5933
5812
  theme,
5934
5813
  style: {
@@ -6198,6 +6077,9 @@ const SelectChainModal = ({
6198
6077
  const [selectedNetwork, setSelectedNetwork] = React.useState(null);
6199
6078
  const [hoveredNetwork, setHoveredNetwork] = React.useState(null);
6200
6079
  const [isSelectHovered, setIsSelectHovered] = React.useState(false);
6080
+ const [isSwitching, setIsSwitching] = React.useState(false);
6081
+ const [switchError, setSwitchError] = React.useState(null);
6082
+ const { switchChainAsync } = wagmi.useSwitchChain();
6201
6083
  React.useEffect(() => {
6202
6084
  const link = document.createElement("link");
6203
6085
  link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap";
@@ -6221,9 +6103,24 @@ const SelectChainModal = ({
6221
6103
  const filteredNetworks = networks.filter(
6222
6104
  (network) => network.name.toLowerCase().includes(searchQuery.toLowerCase())
6223
6105
  );
6224
- const handleSelect = () => {
6225
- if (selectedNetwork && onChainSelect) {
6226
- onChainSelect(selectedNetwork);
6106
+ const handleSelect = async () => {
6107
+ if (!selectedNetwork) return;
6108
+ const chainId = parseInt(selectedNetwork, 10);
6109
+ setIsSwitching(true);
6110
+ setSwitchError(null);
6111
+ try {
6112
+ await switchChainAsync({ chainId });
6113
+ if (onChainSelect) {
6114
+ onChainSelect(selectedNetwork);
6115
+ }
6116
+ onClose();
6117
+ } catch (error) {
6118
+ console.error("Failed to switch chain:", error);
6119
+ setSwitchError(
6120
+ error instanceof Error ? error.message : "Failed to switch chain"
6121
+ );
6122
+ } finally {
6123
+ setIsSwitching(false);
6227
6124
  }
6228
6125
  };
6229
6126
  if (!isOpen) return null;
@@ -6437,7 +6334,7 @@ const SelectChainModal = ({
6437
6334
  onClick: handleSelect,
6438
6335
  onMouseEnter: () => setIsSelectHovered(true),
6439
6336
  onMouseLeave: () => setIsSelectHovered(false),
6440
- disabled: !selectedNetwork,
6337
+ disabled: !selectedNetwork || isSwitching,
6441
6338
  style: {
6442
6339
  width: "100%",
6443
6340
  padding: "10px",
@@ -6453,7 +6350,7 @@ const SelectChainModal = ({
6453
6350
  backgroundColor: "white",
6454
6351
  border: "1px solid #00000029",
6455
6352
  color: "black",
6456
- cursor: selectedNetwork ? "pointer" : "not-allowed"
6353
+ cursor: selectedNetwork && !isSwitching ? "pointer" : "not-allowed"
6457
6354
  },
6458
6355
  children: [
6459
6356
  "SELECT",
package/dist/index.js CHANGED
@@ -2751,6 +2751,7 @@ const PrivyProviderWrapper = ({ children, appId, supportedViemChains }) => {
2751
2751
  theme: "#fafafa",
2752
2752
  showWalletLoginFirst: false,
2753
2753
  walletChainType: "ethereum-only",
2754
+ logo: "https://spicenet.io/assets/Spicenet_Lockup_Secondary_FullColor.png",
2754
2755
  walletList: [
2755
2756
  "detected_ethereum_wallets",
2756
2757
  "metamask",
@@ -4403,7 +4404,8 @@ const DepositWidget = ({
4403
4404
  className = "",
4404
4405
  depositInputHook,
4405
4406
  onDepositSuccess,
4406
- onDepositError
4407
+ onDepositError,
4408
+ onTopUp
4407
4409
  }) => {
4408
4410
  const baseTheme = createTheme(themeMode);
4409
4411
  const theme = {
@@ -4427,13 +4429,14 @@ const DepositWidget = ({
4427
4429
  provider,
4428
4430
  actions
4429
4431
  } = wallet;
4430
- const spiceFlowContext = useContext(SpiceFlowProviderContext);
4432
+ useContext(SpiceFlowProviderContext);
4431
4433
  const [selectedDepositAsset, setSelectedDepositAsset] = useState(null);
4432
4434
  const [isPending, startTransition] = useTransition();
4433
4435
  const {
4434
4436
  assets: spiceAssets,
4435
4437
  loading: loadingSpiceAssets,
4436
4438
  error: spiceAssetsError,
4439
+ hasBalance: hasSpiceBalance,
4437
4440
  refetch: refreshSpiceAssets
4438
4441
  } = useSpiceAssets({
4439
4442
  address,
@@ -4615,124 +4618,48 @@ const DepositWidget = ({
4615
4618
  ) });
4616
4619
  }
4617
4620
  return /* @__PURE__ */ jsxs("div", { style: containerStyles, className, children: [
4618
- /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxs(
4621
+ !loadingSpiceAssets && !hasSpiceBalance && /* @__PURE__ */ jsx(
4619
4622
  "div",
4620
4623
  {
4621
4624
  style: {
4622
- padding: styles?.statusDisplay?.padding || "8px",
4623
- backgroundColor: styles?.statusDisplay?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
4624
- border: `1px solid ${styles?.statusDisplay?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
4625
- borderRadius: styles?.statusDisplay?.borderRadius || theme.borderRadius.md
4625
+ backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning || "#f59e0b"}20`,
4626
+ border: `1px solid ${theme.mode === "light" ? "#fcd34d" : theme.colors.warning || "#f59e0b"}`,
4627
+ borderRadius: theme.borderRadius.md,
4628
+ padding: theme.spacing.md,
4629
+ marginBottom: theme.spacing.md,
4630
+ textAlign: "center"
4626
4631
  },
4627
- children: [
4628
- /* @__PURE__ */ jsxs(
4629
- "div",
4630
- {
4631
- style: {
4632
- display: "flex",
4633
- alignItems: "center",
4634
- justifyContent: "space-between"
4635
- },
4636
- children: [
4637
- /* @__PURE__ */ jsxs(
4638
- "span",
4639
- {
4640
- style: {
4641
- fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
4642
- fontWeight: styles?.statusDisplay?.text?.fontWeight || theme.typography.fontWeight.medium,
4643
- color: styles?.statusDisplay?.text?.color || theme.colors.text,
4644
- fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
4645
- },
4646
- children: [
4647
- spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
4648
- " ",
4649
- "Status"
4650
- ]
4651
- }
4652
- ),
4653
- /* @__PURE__ */ jsx(
4654
- "span",
4655
- {
4656
- style: {
4657
- fontSize: styles?.statusDisplay?.text?.fontSize || theme.typography.fontSize.xs,
4658
- padding: `2px ${theme.spacing.xs}`,
4659
- borderRadius: theme.borderRadius.sm,
4660
- border: `1px solid ${isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning}`,
4661
- backgroundColor: isConnected ? theme.mode === "light" ? "#dcfce7" : `${styles?.statusDisplay?.successColor || theme.colors.success}20` : theme.mode === "light" ? "#fef3c7" : `${styles?.statusDisplay?.warningColor || theme.colors.warning}20`,
4662
- color: isConnected ? styles?.statusDisplay?.successColor || theme.colors.success : styles?.statusDisplay?.warningColor || theme.colors.warning,
4663
- fontFamily: styles?.statusDisplay?.text?.fontFamily || theme.typography.fontFamily
4664
- },
4665
- children: isConnected ? "Connected" : "Disconnected"
4666
- }
4667
- )
4668
- ]
4669
- }
4670
- ),
4671
- isConnected && address && /* @__PURE__ */ jsxs(
4672
- "div",
4673
- {
4674
- className: "ibm-plex-mono",
4675
- style: {
4676
- marginTop: "6px",
4677
- backgroundColor: styles?.addressDisplay?.backgroundColor || (theme.mode === "light" ? "#f3f4f6" : theme.colors.secondary),
4678
- border: `1px solid ${styles?.addressDisplay?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.borderHover)}`,
4679
- borderRadius: styles?.addressDisplay?.borderRadius || theme.borderRadius.sm,
4680
- padding: styles?.addressDisplay?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
4681
- fontSize: styles?.addressDisplay?.fontSize || theme.typography.fontSize.xs,
4682
- fontFamily: styles?.addressDisplay?.fontFamily || (styles?.fontFamily ? `${styles.fontFamily}, IBM Plex Mono` : "IBM Plex Mono"),
4683
- color: styles?.addressDisplay?.color || theme.colors.text,
4684
- display: "flex",
4685
- alignItems: "center",
4686
- gap: theme.spacing.sm
4687
- },
4688
- children: [
4689
- /* @__PURE__ */ jsxs("span", { style: { flex: 1 }, children: [
4690
- address.slice(0, 6),
4691
- "...",
4692
- address.slice(-4)
4693
- ] }),
4694
- /* @__PURE__ */ jsx(
4695
- "button",
4696
- {
4697
- style: {
4698
- fontSize: styles?.addressDisplay?.copyButton?.fontSize || theme.typography.fontSize.xs,
4699
- padding: styles?.addressDisplay?.copyButton?.padding || `${theme.spacing.xs} ${theme.spacing.sm}`,
4700
- backgroundColor: styles?.addressDisplay?.copyButton?.backgroundColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.surfaceHover),
4701
- border: `1px solid ${styles?.addressDisplay?.copyButton?.borderColor || (theme.mode === "light" ? "#d1d5db" : theme.colors.border)}`,
4702
- borderRadius: styles?.addressDisplay?.copyButton?.borderRadius || theme.borderRadius.sm,
4703
- color: styles?.addressDisplay?.copyButton?.color || theme.colors.text,
4704
- fontFamily: styles?.addressDisplay?.copyButton?.fontFamily || theme.typography.fontFamily,
4705
- cursor: "pointer",
4706
- transition: `background-color ${theme.animation.normal}`
4707
- },
4708
- onClick: () => copyToClipboard(address),
4709
- title: "Copy address",
4710
- children: "Copy"
4711
- }
4712
- )
4713
- ]
4714
- }
4715
- ),
4716
- !ready && /* @__PURE__ */ jsxs(
4717
- "div",
4718
- {
4719
- style: {
4720
- marginTop: "6px",
4721
- fontSize: theme.typography.fontSize.xs,
4722
- color: theme.colors.textSecondary,
4723
- fontFamily: theme.typography.fontFamily
4724
- },
4725
- children: [
4726
- "Loading",
4727
- " ",
4728
- spiceFlowContext?.provider === "privy" ? "Privy" : spiceFlowContext?.provider === "dynamic" ? "Dynamic" : "Wallet",
4729
- "..."
4730
- ]
4731
- }
4732
- )
4733
- ]
4632
+ children: /* @__PURE__ */ jsxs(
4633
+ "p",
4634
+ {
4635
+ style: {
4636
+ color: theme.mode === "light" ? "#92400e" : "#fbbf24",
4637
+ fontSize: theme.typography.fontSize.sm,
4638
+ fontFamily: theme.typography.fontFamily,
4639
+ margin: 0,
4640
+ lineHeight: 1.5
4641
+ },
4642
+ children: [
4643
+ "You do not have any cross-chain balance.",
4644
+ " ",
4645
+ onTopUp && /* @__PURE__ */ jsx(
4646
+ "span",
4647
+ {
4648
+ onClick: onTopUp,
4649
+ style: {
4650
+ color: theme.colors.primary,
4651
+ textDecoration: "underline",
4652
+ cursor: "pointer",
4653
+ fontWeight: 600
4654
+ },
4655
+ children: "Top-up here."
4656
+ }
4657
+ )
4658
+ ]
4659
+ }
4660
+ )
4734
4661
  }
4735
- ) }),
4662
+ ),
4736
4663
  /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx(
4737
4664
  AssetSelector,
4738
4665
  {
@@ -4748,50 +4675,6 @@ const DepositWidget = ({
4748
4675
  styles
4749
4676
  }
4750
4677
  ) }),
4751
- depositBatches.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsxs(
4752
- "div",
4753
- {
4754
- style: {
4755
- backgroundColor: styles?.infoCard?.backgroundColor || styles?.tertiaryBackground || (theme.mode === "light" ? "#f9fafb" : theme.colors.surface),
4756
- border: `1px solid ${styles?.infoCard?.borderColor || (theme.mode === "light" ? "#e5e7eb" : theme.colors.border)}`,
4757
- borderRadius: styles?.infoCard?.borderRadius || theme.borderRadius.md,
4758
- padding: styles?.infoCard?.padding || theme.spacing.sm
4759
- },
4760
- children: [
4761
- /* @__PURE__ */ jsx(
4762
- "div",
4763
- {
4764
- style: {
4765
- fontSize: styles?.infoCard?.title?.fontSize || theme.typography.fontSize.xs,
4766
- fontWeight: styles?.infoCard?.title?.fontWeight || theme.typography.fontWeight.medium,
4767
- color: styles?.infoCard?.title?.color || theme.colors.text,
4768
- fontFamily: styles?.infoCard?.title?.fontFamily || theme.typography.fontFamily,
4769
- marginBottom: "4px"
4770
- },
4771
- children: "Deposit Batches Ready"
4772
- }
4773
- ),
4774
- /* @__PURE__ */ jsxs(
4775
- "div",
4776
- {
4777
- style: {
4778
- fontSize: styles?.infoCard?.description?.fontSize || theme.typography.fontSize.xs,
4779
- color: styles?.infoCard?.description?.color || theme.colors.textSecondary,
4780
- fontFamily: styles?.infoCard?.description?.fontFamily || theme.typography.fontFamily
4781
- },
4782
- children: [
4783
- depositBatches.length,
4784
- " deposit batch",
4785
- depositBatches.length > 1 ? "es" : "",
4786
- " across chains:",
4787
- " ",
4788
- [...new Set(depositBatches.map((b) => b.chainId))].join(", ")
4789
- ]
4790
- }
4791
- )
4792
- ]
4793
- }
4794
- ) }),
4795
4678
  displayError && /* @__PURE__ */ jsx(
4796
4679
  "div",
4797
4680
  {
@@ -4828,7 +4711,7 @@ const DepositWidget = ({
4828
4711
  children: /* @__PURE__ */ jsx(
4829
4712
  Button,
4830
4713
  {
4831
- variant: "primary",
4714
+ variant: "outline",
4832
4715
  fullWidth: true,
4833
4716
  onClick: handleDeposit,
4834
4717
  loading: isExecuting,
@@ -5059,7 +4942,7 @@ const DepositWidgetModal = ({
5059
4942
  isOpen,
5060
4943
  onClose,
5061
4944
  title = "Deposit",
5062
- subtitle,
4945
+ description = "Deposit funds to execute chain batches across multiple networks.",
5063
4946
  maxWidth = "480px",
5064
4947
  // Pass through all DepositWidget props
5065
4948
  depositBatches,
@@ -5075,7 +4958,7 @@ const DepositWidgetModal = ({
5075
4958
  onDepositError
5076
4959
  }) => {
5077
4960
  const theme = createTheme(themeMode);
5078
- const defaultSubtitle = /* @__PURE__ */ jsxs(
4961
+ const defaultDescription = /* @__PURE__ */ jsxs(
5079
4962
  "div",
5080
4963
  {
5081
4964
  style: {
@@ -5107,7 +4990,7 @@ const DepositWidgetModal = ({
5107
4990
  lineHeight: "1.4",
5108
4991
  fontFamily: "system-ui, -apple-system, sans-serif"
5109
4992
  },
5110
- children: "Deposit funds to execute chain batches across multiple networks."
4993
+ children: description
5111
4994
  }
5112
4995
  )
5113
4996
  ]
@@ -5122,7 +5005,7 @@ const DepositWidgetModal = ({
5122
5005
  isOpen,
5123
5006
  onClose,
5124
5007
  title,
5125
- subtitle: subtitle || defaultSubtitle,
5008
+ subtitle: description || defaultDescription,
5126
5009
  styles,
5127
5010
  theme,
5128
5011
  maxWidth,
@@ -5397,6 +5280,8 @@ const CrossChainDepositModal = ({
5397
5280
  isOpen,
5398
5281
  onClose,
5399
5282
  onComplete,
5283
+ title = "Deposit to Spicenet",
5284
+ description = "Select tokens and enter amounts to deposit to your Spicenet Account",
5400
5285
  chainId,
5401
5286
  externalWalletAddress,
5402
5287
  escrowAddress = "0xeee2b52e7CFe6e2168341a34cEB783b68FEdf1A2",
@@ -5627,7 +5512,7 @@ const CrossChainDepositModal = ({
5627
5512
  }
5628
5513
  }
5629
5514
  ),
5630
- /* @__PURE__ */ jsxs(
5515
+ /* @__PURE__ */ jsx(
5631
5516
  "p",
5632
5517
  {
5633
5518
  style: {
@@ -5636,12 +5521,7 @@ const CrossChainDepositModal = ({
5636
5521
  margin: 0,
5637
5522
  lineHeight: "1.5"
5638
5523
  },
5639
- children: [
5640
- "Select tokens and enter amounts to deposit to your Spicenet Account on",
5641
- " ",
5642
- chainConfig?.displayName || `Chain ${chainId}`,
5643
- "."
5644
- ]
5524
+ children: description
5645
5525
  }
5646
5526
  )
5647
5527
  ]
@@ -5799,7 +5679,7 @@ const CrossChainDepositModal = ({
5799
5679
  {
5800
5680
  isOpen,
5801
5681
  onClose,
5802
- title: "Deposit to Spicenet",
5682
+ title,
5803
5683
  subtitle,
5804
5684
  theme,
5805
5685
  maxWidth: "480px",
@@ -5926,7 +5806,6 @@ const CrossChainDepositModal = ({
5926
5806
  variant: "outline",
5927
5807
  fullWidth: true,
5928
5808
  onClick: executeDeposit,
5929
- loading: isExecuting,
5930
5809
  disabled: !canDeposit,
5931
5810
  theme,
5932
5811
  style: {
@@ -6196,6 +6075,9 @@ const SelectChainModal = ({
6196
6075
  const [selectedNetwork, setSelectedNetwork] = useState(null);
6197
6076
  const [hoveredNetwork, setHoveredNetwork] = useState(null);
6198
6077
  const [isSelectHovered, setIsSelectHovered] = useState(false);
6078
+ const [isSwitching, setIsSwitching] = useState(false);
6079
+ const [switchError, setSwitchError] = useState(null);
6080
+ const { switchChainAsync } = useSwitchChain();
6199
6081
  useEffect(() => {
6200
6082
  const link = document.createElement("link");
6201
6083
  link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap";
@@ -6219,9 +6101,24 @@ const SelectChainModal = ({
6219
6101
  const filteredNetworks = networks.filter(
6220
6102
  (network) => network.name.toLowerCase().includes(searchQuery.toLowerCase())
6221
6103
  );
6222
- const handleSelect = () => {
6223
- if (selectedNetwork && onChainSelect) {
6224
- onChainSelect(selectedNetwork);
6104
+ const handleSelect = async () => {
6105
+ if (!selectedNetwork) return;
6106
+ const chainId = parseInt(selectedNetwork, 10);
6107
+ setIsSwitching(true);
6108
+ setSwitchError(null);
6109
+ try {
6110
+ await switchChainAsync({ chainId });
6111
+ if (onChainSelect) {
6112
+ onChainSelect(selectedNetwork);
6113
+ }
6114
+ onClose();
6115
+ } catch (error) {
6116
+ console.error("Failed to switch chain:", error);
6117
+ setSwitchError(
6118
+ error instanceof Error ? error.message : "Failed to switch chain"
6119
+ );
6120
+ } finally {
6121
+ setIsSwitching(false);
6225
6122
  }
6226
6123
  };
6227
6124
  if (!isOpen) return null;
@@ -6435,7 +6332,7 @@ const SelectChainModal = ({
6435
6332
  onClick: handleSelect,
6436
6333
  onMouseEnter: () => setIsSelectHovered(true),
6437
6334
  onMouseLeave: () => setIsSelectHovered(false),
6438
- disabled: !selectedNetwork,
6335
+ disabled: !selectedNetwork || isSwitching,
6439
6336
  style: {
6440
6337
  width: "100%",
6441
6338
  padding: "10px",
@@ -6451,7 +6348,7 @@ const SelectChainModal = ({
6451
6348
  backgroundColor: "white",
6452
6349
  border: "1px solid #00000029",
6453
6350
  color: "black",
6454
- cursor: selectedNetwork ? "pointer" : "not-allowed"
6351
+ cursor: selectedNetwork && !isSwitching ? "pointer" : "not-allowed"
6455
6352
  },
6456
6353
  children: [
6457
6354
  "SELECT",
package/dist/types/deposit.d.ts CHANGED
@@ -29,6 +29,7 @@ export interface DepositWidgetProps {
29
29
  depositInputHook?: UseDepositInputReturn;
30
30
  onDepositSuccess?: (intentId: string) => void;
31
31
  onDepositError?: (error: string) => void;
32
+ onTopUp?: () => void;
32
33
  }
33
34
  export interface DepositModalProps {
34
35
  isOpen: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spicenet-io/spiceflow-ui",
3
- "version": "1.9.3",
3
+ "version": "1.9.5",
4
4
  "description": "Spiceflow UI SDK",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",