@spicenet-io/spiceflow-ui 1.7.2 → 1.7.4

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/index.cjs.js +414 -283
  2. package/dist/index.js +414 -283
  3. package/dist/types/balance.d.ts +1 -1
  4. package/dist/types/deposit.d.ts +2 -1
  5. package/dist/utils/relayer/index.d.ts +9 -0
  6. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -86,10 +86,10 @@ const CHAIN_CONFIGS = {
86
86
  moralisName: "",
87
87
  supportedTokens: [
88
88
  {
89
- address: "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d",
89
+ address: "0xBeB51deb2018b67b35d5695Fd15bb30D452c7868",
90
90
  name: "USD Coin",
91
91
  symbol: "USDC",
92
- decimals: 6
92
+ decimals: 18
93
93
  }
94
94
  ]
95
95
  },
@@ -120,10 +120,10 @@ const CHAIN_CONFIGS = {
120
120
  moralisName: "0x14a34",
121
121
  supportedTokens: [
122
122
  {
123
- address: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
123
+ address: "0xf370dC3765f81aC9dD2FEBd59Fb4e710330B0BC8",
124
124
  name: "USD Coin",
125
125
  symbol: "USDC",
126
- decimals: 6
126
+ decimals: 18
127
127
  },
128
128
  {
129
129
  address: "0x4Fc381B6CC6Df8cF1c1bD46D184475bE5b7A3c62",
@@ -913,7 +913,7 @@ const useAssets = ({
913
913
  address,
914
914
  supportedChains,
915
915
  fetchBalances: fetchBalances2,
916
- refreshInterval = 3e4
916
+ refreshInterval = 1e4
917
917
  // 30 seconds default
918
918
  }) => {
919
919
  const [assets, setAssets] = React.useState([]);
@@ -3166,6 +3166,39 @@ class RelayerService {
3166
3166
  throw error;
3167
3167
  }
3168
3168
  }
3169
+ async requestSpiceUsdAirdrop(params) {
3170
+ try {
3171
+ const response = await fetch(
3172
+ `${this.baseUrl}/airdrop/${params.chainId}/spiceUsd`,
3173
+ {
3174
+ method: "POST",
3175
+ headers: {
3176
+ "Content-Type": "application/json"
3177
+ },
3178
+ body: JSON.stringify({ wallet: params.address })
3179
+ }
3180
+ );
3181
+ const data = await response.json().catch(() => ({}));
3182
+ if (!response.ok) {
3183
+ const msg = data && (data.error || data.message) || "Failed to request airdrop";
3184
+ return { success: false, errorMessage: String(msg) };
3185
+ }
3186
+ if (data && typeof data.error === "string") {
3187
+ return { success: false, errorMessage: data.error };
3188
+ }
3189
+ if (data && (data.txHash || data.amount)) {
3190
+ return {
3191
+ success: true,
3192
+ txHash: data.txHash,
3193
+ amount: data.amount
3194
+ };
3195
+ }
3196
+ return { success: true };
3197
+ } catch (error) {
3198
+ const msg = error?.message && typeof error.message === "string" ? error.message : "Failed to request airdrop";
3199
+ return { success: false, errorMessage: msg };
3200
+ }
3201
+ }
3169
3202
  }
3170
3203
  const relayerService = new RelayerService();
3171
3204
  const createInitialSteps = (chainBatches, customGetChainName) => {
@@ -3914,7 +3947,8 @@ const SwapWidget = ({
3914
3947
 
3915
3948
  const DepositWidget = ({
3916
3949
  depositBatches,
3917
- tokenAddress = "0x0",
3950
+ tokenAddress,
3951
+ tokenDecimals,
3918
3952
  supportedChains,
3919
3953
  theme: themeMode = "light",
3920
3954
  styles,
@@ -4104,7 +4138,10 @@ const DepositWidget = ({
4104
4138
  [
4105
4139
  {
4106
4140
  tokenAddress,
4107
- tokenAmount: viem.parseEther(selectedDepositAsset.amount)
4141
+ tokenAmount: viem.parseUnits(
4142
+ selectedDepositAsset.amount,
4143
+ tokenDecimals
4144
+ )
4108
4145
  }
4109
4146
  ]
4110
4147
  ]
@@ -4615,6 +4652,7 @@ const DepositWidgetModal = ({
4615
4652
  // Pass through all DepositWidget props
4616
4653
  depositBatches,
4617
4654
  tokenAddress,
4655
+ tokenDecimals,
4618
4656
  supportedChains,
4619
4657
  theme: themeMode = "light",
4620
4658
  styles,
@@ -4680,6 +4718,7 @@ const DepositWidgetModal = ({
4680
4718
  {
4681
4719
  depositBatches,
4682
4720
  tokenAddress,
4721
+ tokenDecimals,
4683
4722
  supportedChains,
4684
4723
  theme: themeMode,
4685
4724
  styles: {
@@ -6240,45 +6279,93 @@ const DepositConfirmationModal = ({
6240
6279
  style: {
6241
6280
  display: "flex",
6242
6281
  alignItems: "center",
6243
- gap: "8px",
6244
- marginBottom: theme.spacing.md,
6245
- cursor: "pointer"
6282
+ justifyContent: "space-between",
6283
+ marginBottom: theme.spacing.md
6246
6284
  },
6247
- onClick: toggleDetails,
6248
6285
  children: [
6249
- /* @__PURE__ */ jsxRuntime.jsx(
6250
- "span",
6286
+ /* @__PURE__ */ jsxRuntime.jsxs(
6287
+ "div",
6251
6288
  {
6252
6289
  style: {
6253
- fontSize: "13px",
6254
- fontWeight: theme.typography.fontWeight.medium,
6255
- color: "#6b7280",
6256
- fontFamily: styles?.fontFamily || theme.typography.fontFamily
6290
+ display: "flex",
6291
+ alignItems: "center",
6292
+ gap: "8px",
6293
+ cursor: "pointer"
6257
6294
  },
6258
- children: "Transaction Details"
6295
+ onClick: toggleDetails,
6296
+ children: [
6297
+ /* @__PURE__ */ jsxRuntime.jsx(
6298
+ "span",
6299
+ {
6300
+ style: {
6301
+ fontSize: "13px",
6302
+ fontWeight: theme.typography.fontWeight.medium,
6303
+ color: "#6b7280",
6304
+ fontFamily: styles?.fontFamily || theme.typography.fontFamily
6305
+ },
6306
+ children: "Transaction Details"
6307
+ }
6308
+ ),
6309
+ /* @__PURE__ */ jsxRuntime.jsx(
6310
+ "svg",
6311
+ {
6312
+ width: "16",
6313
+ height: "16",
6314
+ viewBox: "0 0 16 16",
6315
+ fill: "none",
6316
+ style: {
6317
+ transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
6318
+ transition: "transform 0.3s ease"
6319
+ },
6320
+ children: /* @__PURE__ */ jsxRuntime.jsx(
6321
+ "path",
6322
+ {
6323
+ d: "M4 6L8 10L12 6",
6324
+ stroke: "#6b7280",
6325
+ strokeWidth: "2",
6326
+ strokeLinecap: "round",
6327
+ strokeLinejoin: "round"
6328
+ }
6329
+ )
6330
+ }
6331
+ )
6332
+ ]
6259
6333
  }
6260
6334
  ),
6261
6335
  /* @__PURE__ */ jsxRuntime.jsx(
6262
- "svg",
6336
+ "button",
6263
6337
  {
6264
- width: "16",
6265
- height: "16",
6266
- viewBox: "0 0 16 16",
6267
- fill: "none",
6338
+ onClick: (e) => {
6339
+ e.stopPropagation();
6340
+ onClose();
6341
+ },
6268
6342
  style: {
6269
- transform: isDetailsExpanded ? "rotate(180deg)" : "rotate(0deg)",
6270
- transition: "transform 0.3s ease"
6343
+ background: "none",
6344
+ border: "none",
6345
+ cursor: "pointer",
6346
+ padding: "4px",
6347
+ display: "flex",
6348
+ alignItems: "center",
6349
+ justifyContent: "center",
6350
+ color: "#6b7280",
6351
+ transition: "color 0.2s ease"
6271
6352
  },
6272
- children: /* @__PURE__ */ jsxRuntime.jsx(
6353
+ onMouseEnter: (e) => {
6354
+ e.currentTarget.style.color = "#1f2937";
6355
+ },
6356
+ onMouseLeave: (e) => {
6357
+ e.currentTarget.style.color = "#6b7280";
6358
+ },
6359
+ children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
6273
6360
  "path",
6274
6361
  {
6275
- d: "M4 6L8 10L12 6",
6276
- stroke: "#6b7280",
6362
+ d: "M12 4L4 12M4 4L12 12",
6363
+ stroke: "currentColor",
6277
6364
  strokeWidth: "2",
6278
6365
  strokeLinecap: "round",
6279
6366
  strokeLinejoin: "round"
6280
6367
  }
6281
- )
6368
+ ) })
6282
6369
  }
6283
6370
  )
6284
6371
  ]
@@ -6974,6 +7061,9 @@ const DepositModal = React.memo(
6974
7061
  null
6975
7062
  );
6976
7063
  const [showAirdropTooltip, setShowAirdropTooltip] = React.useState(false);
7064
+ const [airdropLoading, setAirdropLoading] = React.useState(false);
7065
+ const [airdropMessage, setAirdropMessage] = React.useState(null);
7066
+ const [airdropError, setAirdropError] = React.useState(null);
6977
7067
  const {
6978
7068
  intentStatus,
6979
7069
  startStatusPolling,
@@ -7010,13 +7100,6 @@ const DepositModal = React.memo(
7010
7100
  "Submitting deposit data to backend after bridging completes:",
7011
7101
  depositData
7012
7102
  );
7013
- for (const data of depositData) {
7014
- console.log("Calling submitSpiceDeposit with:", data);
7015
- await relayerService.submitSpiceDeposit(data);
7016
- console.log(
7017
- `Successfully submitted deposit for txHash: ${data.txHash} on chainId: ${data.chainId}`
7018
- );
7019
- }
7020
7103
  }
7021
7104
  setPostDepositStatus("success");
7022
7105
  setPostDepositAmount(bridgedAmount);
@@ -7049,6 +7132,116 @@ const DepositModal = React.memo(
7049
7132
  }, [isOpen]);
7050
7133
  React.useMemo(() => {
7051
7134
  }, [depositAmount]);
7135
+ const handleRpcError = React.useCallback((error2) => {
7136
+ const errorMessage = error2?.message || String(error2 || "");
7137
+ const errorDetails = error2?.details || "";
7138
+ const errorString = `${errorMessage} ${errorDetails}`.toLowerCase();
7139
+ if (errorString.includes("internal json-rpc error") || errorString.includes("internal error") || errorString.includes("an internal error was received")) {
7140
+ return "Network error occurred. Please try again.";
7141
+ }
7142
+ return errorMessage || "Transaction failed";
7143
+ }, []);
7144
+ const handleAirdropClick = React.useCallback(async () => {
7145
+ const targetAddress = sourceAddress || address;
7146
+ const SOLVER_ADDRESS = "0x111115763723b53395308ec4c9ab9d5fb0844cae";
7147
+ setAirdropMessage(null);
7148
+ setAirdropError(null);
7149
+ if (!targetAddress) {
7150
+ setAirdropError("Connect your wallet before requesting an airdrop");
7151
+ return;
7152
+ }
7153
+ const selectedChainId = selectedDepositAssets[0]?.asset?.chainId ?? supportedChains[0];
7154
+ if (!selectedChainId) {
7155
+ setAirdropError("No chain selected for airdrop");
7156
+ return;
7157
+ }
7158
+ if (!externalWalletClient) {
7159
+ setAirdropError("External wallet not connected");
7160
+ return;
7161
+ }
7162
+ setAirdropLoading(true);
7163
+ try {
7164
+ if (currentChain?.id !== selectedChainId) {
7165
+ setAirdropMessage("Switching network...");
7166
+ try {
7167
+ await switchChainAsync({ chainId: selectedChainId });
7168
+ let attempts = 0;
7169
+ const maxAttempts = 20;
7170
+ while (attempts < maxAttempts) {
7171
+ await new Promise((resolve) => setTimeout(resolve, 100));
7172
+ if (currentChainRef.current?.id === selectedChainId) {
7173
+ break;
7174
+ }
7175
+ attempts++;
7176
+ }
7177
+ if (currentChainRef.current?.id !== selectedChainId) {
7178
+ throw new Error(
7179
+ `Failed to switch to chain ${selectedChainId}. Please switch manually in your wallet.`
7180
+ );
7181
+ }
7182
+ } catch (switchError) {
7183
+ if (switchError.code === 4902 || switchError.name === "ChainNotConfiguredError") {
7184
+ throw new Error(
7185
+ `Chain ${selectedChainId} is not configured in your wallet. Please add it manually.`
7186
+ );
7187
+ }
7188
+ throw switchError;
7189
+ }
7190
+ }
7191
+ setAirdropMessage("Estimating required gas amount...");
7192
+ const client = getClientForChain(selectedChainId);
7193
+ const gasPrice = await client.getGasPrice();
7194
+ const estimatedGasLimit = BigInt(65e3);
7195
+ const gasCost = estimatedGasLimit * gasPrice;
7196
+ const bufferMultiplier = BigInt(120);
7197
+ const gasDepositAmount = gasCost * bufferMultiplier / BigInt(100);
7198
+ console.log("GAS: ", gasDepositAmount);
7199
+ setAirdropMessage("Sending gas deposit to solver...");
7200
+ const gasDepositTx = await externalWalletClient.sendTransaction({
7201
+ to: SOLVER_ADDRESS,
7202
+ value: gasDepositAmount
7203
+ });
7204
+ setAirdropMessage("Waiting for transaction confirmation...");
7205
+ const receipt = await client.waitForTransactionReceipt({
7206
+ hash: gasDepositTx,
7207
+ timeout: 12e4,
7208
+ pollingInterval: 2e3,
7209
+ confirmations: 2
7210
+ });
7211
+ if (receipt.status !== "success") {
7212
+ throw new Error("Gas deposit transaction failed");
7213
+ }
7214
+ setAirdropMessage("Requesting airdrop...");
7215
+ const result = await relayerService.requestSpiceUsdAirdrop({
7216
+ chainId: selectedChainId,
7217
+ address: targetAddress
7218
+ });
7219
+ if (!result.success) {
7220
+ setAirdropError(result.errorMessage || "Failed to request airdrop");
7221
+ return;
7222
+ }
7223
+ if (result.txHash || result.amount) {
7224
+ const amountText = result.amount ? ` ${result.amount}` : "";
7225
+ setAirdropMessage(`Airdrop${amountText} requested successfully.`);
7226
+ return;
7227
+ }
7228
+ setAirdropMessage("Airdrop requested successfully.");
7229
+ } catch (e) {
7230
+ const msg = handleRpcError(e);
7231
+ setAirdropError(msg);
7232
+ } finally {
7233
+ setAirdropLoading(false);
7234
+ }
7235
+ }, [
7236
+ address,
7237
+ sourceAddress,
7238
+ selectedDepositAssets,
7239
+ supportedChains,
7240
+ externalWalletClient,
7241
+ currentChain,
7242
+ switchChainAsync,
7243
+ handleRpcError
7244
+ ]);
7052
7245
  const handleDepositAssetSelect = (asset, index) => {
7053
7246
  setSelectedDepositAssets((prev) => {
7054
7247
  const updated = [...prev];
@@ -7551,10 +7744,8 @@ const DepositModal = React.memo(
7551
7744
  errorMessage = "Transaction rejected by user";
7552
7745
  } else if (error2?.message?.includes("does not match the target chain") || error2?.message?.includes("Current Chain ID")) {
7553
7746
  errorMessage = "Network mismatch detected. Please click the button again to proceed.";
7554
- } else if (error2 instanceof Error) {
7555
- errorMessage = error2.message;
7556
- } else if (typeof error2 === "string") {
7557
- errorMessage = error2;
7747
+ } else {
7748
+ errorMessage = handleRpcError(error2);
7558
7749
  }
7559
7750
  setError(errorMessage);
7560
7751
  } finally {
@@ -7571,12 +7762,15 @@ const DepositModal = React.memo(
7571
7762
  const allAvailable = supportedChains.flatMap(
7572
7763
  (chainId) => getAllAssetsForChain(chainId, assets)
7573
7764
  );
7765
+ const withBalance = allAvailable.filter(
7766
+ (asset) => asset.balance > BigInt(0)
7767
+ );
7574
7768
  if (allowedTokens && allowedTokens.length > 0) {
7575
- return allAvailable.filter(
7769
+ return withBalance.filter(
7576
7770
  (asset) => allowedTokens.includes(asset.symbol.toLowerCase()) || asset.isNative && allowedTokens.includes("native")
7577
7771
  );
7578
7772
  }
7579
- return allAvailable;
7773
+ return withBalance;
7580
7774
  }, [supportedChains, assets, allowedTokens]);
7581
7775
  const secondAssetOptions = React.useMemo(() => {
7582
7776
  if (!selectedDepositAssets[0]?.asset) {
@@ -7662,95 +7856,121 @@ const DepositModal = React.memo(
7662
7856
  {
7663
7857
  style: {
7664
7858
  display: "flex",
7665
- justifyContent: "flex-end",
7859
+ justifyContent: "space-between",
7666
7860
  alignItems: "center",
7667
- gap: "4px",
7668
7861
  marginBottom: "8px"
7669
7862
  },
7670
7863
  children: [
7671
7864
  /* @__PURE__ */ jsxRuntime.jsx(
7672
- "button",
7865
+ "div",
7673
7866
  {
7674
- onClick: () => {
7675
- },
7676
7867
  style: {
7677
- padding: "4px 8px",
7678
- borderRadius: "4px",
7679
- border: "1px solid #D1D5DB",
7680
- background: "#E5E7EB",
7681
- color: "#4B5563",
7682
7868
  fontSize: "11px",
7683
- fontWeight: 500,
7684
- cursor: "pointer",
7685
- display: "flex",
7686
- alignItems: "center",
7687
- gap: "4px",
7688
- transition: "all 0.2s",
7689
- whiteSpace: "nowrap"
7690
- },
7691
- onMouseEnter: (e) => {
7692
- e.currentTarget.style.color = "#1F2937";
7693
- e.currentTarget.style.background = "#D1D5DB";
7694
- },
7695
- onMouseLeave: (e) => {
7696
- e.currentTarget.style.color = "#4B5563";
7697
- e.currentTarget.style.background = "#E5E7EB";
7869
+ color: airdropError ? "#b91c1c" : "#047857",
7870
+ fontFamily: styles?.fontFamily || theme.typography.fontFamily,
7871
+ flex: 1,
7872
+ minWidth: 0
7698
7873
  },
7699
- children: "Airdrop"
7874
+ children: airdropError || airdropMessage || ""
7700
7875
  }
7701
7876
  ),
7702
7877
  /* @__PURE__ */ jsxRuntime.jsxs(
7703
7878
  "div",
7704
7879
  {
7705
- onMouseEnter: () => setShowAirdropTooltip(true),
7706
- onMouseLeave: () => setShowAirdropTooltip(false),
7707
7880
  style: {
7708
- position: "relative",
7709
- width: "14px",
7710
- height: "14px",
7711
- borderRadius: "50%",
7712
- backgroundColor: "#9CA3AF",
7713
- color: "white",
7714
7881
  display: "flex",
7715
- alignItems: "center",
7716
- justifyContent: "center",
7717
- fontSize: "9px",
7718
- fontWeight: "bold",
7719
- cursor: "help"
7882
+ gap: "4px",
7883
+ flexShrink: 0,
7884
+ alignItems: "center"
7720
7885
  },
7721
7886
  children: [
7722
- "i",
7723
- showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
7887
+ /* @__PURE__ */ jsxRuntime.jsx(
7888
+ "button",
7889
+ {
7890
+ onClick: handleAirdropClick,
7891
+ disabled: airdropLoading,
7892
+ style: {
7893
+ padding: "4px 8px",
7894
+ borderRadius: "4px",
7895
+ border: "1px solid #D1D5DB",
7896
+ background: "#E5E7EB",
7897
+ color: "#4B5563",
7898
+ fontSize: "11px",
7899
+ fontWeight: 500,
7900
+ cursor: airdropLoading ? "default" : "pointer",
7901
+ transition: "all 0.2s",
7902
+ display: "flex",
7903
+ alignItems: "center"
7904
+ },
7905
+ onMouseEnter: (e) => {
7906
+ if (!airdropLoading) {
7907
+ e.currentTarget.style.color = "#1F2937";
7908
+ e.currentTarget.style.background = "#D1D5DB";
7909
+ }
7910
+ },
7911
+ onMouseLeave: (e) => {
7912
+ e.currentTarget.style.color = "#4B5563";
7913
+ e.currentTarget.style.background = "#E5E7EB";
7914
+ },
7915
+ children: airdropLoading ? "Requesting..." : "Airdrop"
7916
+ }
7917
+ ),
7918
+ /* @__PURE__ */ jsxRuntime.jsxs(
7724
7919
  "div",
7725
7920
  {
7921
+ onMouseEnter: () => setShowAirdropTooltip(true),
7922
+ onMouseLeave: () => setShowAirdropTooltip(false),
7726
7923
  style: {
7727
- position: "absolute",
7728
- bottom: "calc(100% + 8px)",
7729
- right: 0,
7730
- backgroundColor: "#1F2937",
7924
+ position: "relative",
7925
+ width: "14px",
7926
+ height: "14px",
7927
+ borderRadius: "50%",
7928
+ backgroundColor: "#9CA3AF",
7731
7929
  color: "white",
7732
- padding: "8px 12px",
7733
- borderRadius: "6px",
7734
- fontSize: "12px",
7735
- whiteSpace: "nowrap",
7736
- boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
7737
- zIndex: 100
7930
+ display: "flex",
7931
+ alignItems: "center",
7932
+ justifyContent: "center",
7933
+ fontSize: "9px",
7934
+ fontWeight: "bold",
7935
+ cursor: "help",
7936
+ flexShrink: 0
7738
7937
  },
7739
7938
  children: [
7740
- "This is testnet USDC, and it won't be available on mainnet",
7741
- /* @__PURE__ */ jsxRuntime.jsx(
7939
+ "i",
7940
+ showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
7742
7941
  "div",
7743
7942
  {
7744
7943
  style: {
7745
7944
  position: "absolute",
7746
- top: "100%",
7747
- right: "10px",
7748
- width: 0,
7749
- height: 0,
7750
- borderLeft: "6px solid transparent",
7751
- borderRight: "6px solid transparent",
7752
- borderTop: "6px solid #1F2937"
7753
- }
7945
+ bottom: "calc(100% + 8px)",
7946
+ right: 0,
7947
+ backgroundColor: "#1F2937",
7948
+ color: "white",
7949
+ padding: "8px 12px",
7950
+ borderRadius: "6px",
7951
+ fontSize: "12px",
7952
+ whiteSpace: "nowrap",
7953
+ boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
7954
+ zIndex: 100
7955
+ },
7956
+ children: [
7957
+ "This is testnet USDC, and it won't be available on mainnet",
7958
+ /* @__PURE__ */ jsxRuntime.jsx(
7959
+ "div",
7960
+ {
7961
+ style: {
7962
+ position: "absolute",
7963
+ top: "100%",
7964
+ right: "10px",
7965
+ width: 0,
7966
+ height: 0,
7967
+ borderLeft: "6px solid transparent",
7968
+ borderRight: "6px solid transparent",
7969
+ borderTop: "6px solid #1F2937"
7970
+ }
7971
+ }
7972
+ )
7973
+ ]
7754
7974
  }
7755
7975
  )
7756
7976
  ]
@@ -7827,95 +8047,121 @@ const DepositModal = React.memo(
7827
8047
  {
7828
8048
  style: {
7829
8049
  display: "flex",
7830
- justifyContent: "flex-end",
8050
+ justifyContent: "space-between",
7831
8051
  alignItems: "center",
7832
- gap: "4px",
7833
8052
  marginBottom: "8px"
7834
8053
  },
7835
8054
  children: [
7836
8055
  /* @__PURE__ */ jsxRuntime.jsx(
7837
- "button",
8056
+ "div",
7838
8057
  {
7839
- onClick: () => {
7840
- },
7841
8058
  style: {
7842
- padding: "4px 8px",
7843
- borderRadius: "4px",
7844
- border: "1px solid #D1D5DB",
7845
- background: "#E5E7EB",
7846
- color: "#4B5563",
7847
8059
  fontSize: "11px",
7848
- fontWeight: 500,
7849
- cursor: "pointer",
7850
- display: "flex",
7851
- alignItems: "center",
7852
- gap: "4px",
7853
- transition: "all 0.2s",
7854
- whiteSpace: "nowrap"
7855
- },
7856
- onMouseEnter: (e) => {
7857
- e.currentTarget.style.color = "#1F2937";
7858
- e.currentTarget.style.background = "#D1D5DB";
7859
- },
7860
- onMouseLeave: (e) => {
7861
- e.currentTarget.style.color = "#4B5563";
7862
- e.currentTarget.style.background = "#E5E7EB";
8060
+ color: airdropError ? "#b91c1c" : "#047857",
8061
+ fontFamily: styles?.fontFamily || theme.typography.fontFamily,
8062
+ flex: 1,
8063
+ minWidth: 0
7863
8064
  },
7864
- children: "Airdrop"
8065
+ children: airdropError || airdropMessage || ""
7865
8066
  }
7866
8067
  ),
7867
8068
  /* @__PURE__ */ jsxRuntime.jsxs(
7868
8069
  "div",
7869
8070
  {
7870
- onMouseEnter: () => setShowAirdropTooltip(true),
7871
- onMouseLeave: () => setShowAirdropTooltip(false),
7872
8071
  style: {
7873
- position: "relative",
7874
- width: "14px",
7875
- height: "14px",
7876
- borderRadius: "50%",
7877
- backgroundColor: "#9CA3AF",
7878
- color: "white",
7879
8072
  display: "flex",
7880
- alignItems: "center",
7881
- justifyContent: "center",
7882
- fontSize: "9px",
7883
- fontWeight: "bold",
7884
- cursor: "help"
8073
+ gap: "4px",
8074
+ flexShrink: 0,
8075
+ alignItems: "center"
7885
8076
  },
7886
8077
  children: [
7887
- "i",
7888
- showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
8078
+ /* @__PURE__ */ jsxRuntime.jsx(
8079
+ "button",
8080
+ {
8081
+ onClick: handleAirdropClick,
8082
+ disabled: airdropLoading,
8083
+ style: {
8084
+ padding: "4px 8px",
8085
+ borderRadius: "4px",
8086
+ border: "1px solid #D1D5DB",
8087
+ background: "#E5E7EB",
8088
+ color: "#4B5563",
8089
+ fontSize: "11px",
8090
+ fontWeight: 500,
8091
+ cursor: airdropLoading ? "default" : "pointer",
8092
+ transition: "all 0.2s",
8093
+ display: "flex",
8094
+ alignItems: "center"
8095
+ },
8096
+ onMouseEnter: (e) => {
8097
+ if (!airdropLoading) {
8098
+ e.currentTarget.style.color = "#1F2937";
8099
+ e.currentTarget.style.background = "#D1D5DB";
8100
+ }
8101
+ },
8102
+ onMouseLeave: (e) => {
8103
+ e.currentTarget.style.color = "#4B5563";
8104
+ e.currentTarget.style.background = "#E5E7EB";
8105
+ },
8106
+ children: airdropLoading ? "Requesting..." : "Airdrop"
8107
+ }
8108
+ ),
8109
+ /* @__PURE__ */ jsxRuntime.jsxs(
7889
8110
  "div",
7890
8111
  {
8112
+ onMouseEnter: () => setShowAirdropTooltip(true),
8113
+ onMouseLeave: () => setShowAirdropTooltip(false),
7891
8114
  style: {
7892
- position: "absolute",
7893
- bottom: "calc(100% + 8px)",
7894
- right: 0,
7895
- backgroundColor: "#1F2937",
8115
+ position: "relative",
8116
+ width: "14px",
8117
+ height: "14px",
8118
+ borderRadius: "50%",
8119
+ backgroundColor: "#9CA3AF",
7896
8120
  color: "white",
7897
- padding: "8px 12px",
7898
- borderRadius: "6px",
7899
- fontSize: "12px",
7900
- whiteSpace: "nowrap",
7901
- boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
7902
- zIndex: 100
8121
+ display: "flex",
8122
+ alignItems: "center",
8123
+ justifyContent: "center",
8124
+ fontSize: "9px",
8125
+ fontWeight: "bold",
8126
+ cursor: "help",
8127
+ flexShrink: 0
7903
8128
  },
7904
8129
  children: [
7905
- "This is testnet USDC, and it won't be available on mainnet",
7906
- /* @__PURE__ */ jsxRuntime.jsx(
8130
+ "i",
8131
+ showAirdropTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
7907
8132
  "div",
7908
8133
  {
7909
8134
  style: {
7910
8135
  position: "absolute",
7911
- top: "100%",
7912
- right: "10px",
7913
- width: 0,
7914
- height: 0,
7915
- borderLeft: "6px solid transparent",
7916
- borderRight: "6px solid transparent",
7917
- borderTop: "6px solid #1F2937"
7918
- }
8136
+ bottom: "calc(100% + 8px)",
8137
+ right: 0,
8138
+ backgroundColor: "#1F2937",
8139
+ color: "white",
8140
+ padding: "8px 12px",
8141
+ borderRadius: "6px",
8142
+ fontSize: "12px",
8143
+ whiteSpace: "nowrap",
8144
+ boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
8145
+ zIndex: 100
8146
+ },
8147
+ children: [
8148
+ "This is testnet USDC, and it won't be available on mainnet",
8149
+ /* @__PURE__ */ jsxRuntime.jsx(
8150
+ "div",
8151
+ {
8152
+ style: {
8153
+ position: "absolute",
8154
+ top: "100%",
8155
+ right: "10px",
8156
+ width: 0,
8157
+ height: 0,
8158
+ borderLeft: "6px solid transparent",
8159
+ borderRight: "6px solid transparent",
8160
+ borderTop: "6px solid #1F2937"
8161
+ }
8162
+ }
8163
+ )
8164
+ ]
7919
8165
  }
7920
8166
  )
7921
8167
  ]
@@ -10012,105 +10258,8 @@ const formatCurrencyWithDecimals = (amount) => {
10012
10258
  maximumFractionDigits: 5
10013
10259
  }).format(rounded);
10014
10260
  };
10015
- const defaultBalanceData = {
10016
- totalBalance: 10333,
10017
- percentageChange: 2.15,
10018
- tradingAccounts: [
10019
- { id: "hyperliquid", name: "HYPERLIQUID", balance: 800 },
10020
- { id: "lighter", name: "LIGHTER", balance: 1200 }
10021
- ],
10022
- freeCollateral: 8e3,
10023
- freeCollateralItems: [
10024
- {
10025
- id: "usdc-eth",
10026
- name: "USDC",
10027
- balance: 3e3,
10028
- subtitle: "USD COIN",
10029
- iconColor: "#2775CA",
10030
- networks: [11155111]
10031
- },
10032
- // Ethereum Sepolia
10033
- {
10034
- id: "usdc-arb",
10035
- name: "USDC",
10036
- balance: 2e3,
10037
- subtitle: "USD COIN",
10038
- iconColor: "#2775CA",
10039
- networks: [42161]
10040
- },
10041
- // Arbitrum
10042
- {
10043
- id: "usdc-base",
10044
- name: "USDC",
10045
- balance: 1500,
10046
- subtitle: "USD COIN",
10047
- iconColor: "#2775CA",
10048
- networks: [84532]
10049
- },
10050
- // Base Sepolia
10051
- {
10052
- id: "weth",
10053
- name: "WETH",
10054
- balance: 500,
10055
- subtitle: "WRAPPED ETH",
10056
- iconColor: "#627EEA",
10057
- networks: [11155111]
10058
- },
10059
- {
10060
- id: "uniswap-pt",
10061
- name: "UNISWAP PT",
10062
- balance: 500,
10063
- iconColor: "#FF007A",
10064
- networks: [11155111]
10065
- },
10066
- {
10067
- id: "pendle-pt",
10068
- name: "PENDLE PT",
10069
- balance: 500,
10070
- iconColor: "#6366F1",
10071
- networks: [11155111]
10072
- }
10073
- ],
10074
- defiPositions: 2333,
10075
- defiPositionsItems: [
10076
- {
10077
- id: "uniswap-v4",
10078
- name: "UNISWAP V4",
10079
- balance: 1166.5,
10080
- iconColor: "#FF007A"
10081
- },
10082
- {
10083
- id: "pendle-pt-defi",
10084
- name: "PENDLE PT",
10085
- balance: 1166.5,
10086
- iconColor: "#6366F1"
10087
- }
10088
- ],
10089
- credit: 2333,
10090
- creditItems: [
10091
- {
10092
- id: "usdc-credit",
10093
- name: "USDC",
10094
- balance: 1e3,
10095
- subtitle: "USD COIN",
10096
- iconColor: "#2775CA"
10097
- },
10098
- {
10099
- id: "uniswap-lp",
10100
- name: "UNISWAP LP",
10101
- balance: 666.5,
10102
- iconColor: "#FF007A"
10103
- },
10104
- {
10105
- id: "pendle-pt-credit",
10106
- name: "PENDLE PT",
10107
- balance: 666.5,
10108
- iconColor: "#6366F1"
10109
- }
10110
- ]
10111
- };
10112
10261
  const SpiceBalance = ({
10113
- balanceData = defaultBalanceData,
10262
+ balanceData,
10114
10263
  isLoading = false,
10115
10264
  styles,
10116
10265
  className = "",
@@ -10206,24 +10355,6 @@ const SpiceBalance = ({
10206
10355
  balanceData.freeCollateralItems,
10207
10356
  balanceData.freeCollateral
10208
10357
  ]);
10209
- React.useMemo(() => {
10210
- if (balanceData.defiPositionsItems) {
10211
- return balanceData.defiPositionsItems.reduce(
10212
- (sum, item) => sum + item.balance,
10213
- 0
10214
- );
10215
- }
10216
- return balanceData.defiPositions;
10217
- }, [balanceData.defiPositionsItems, balanceData.defiPositions]);
10218
- React.useMemo(() => {
10219
- if (balanceData.creditItems) {
10220
- return balanceData.creditItems.reduce(
10221
- (sum, item) => sum + item.balance,
10222
- 0
10223
- );
10224
- }
10225
- return balanceData.credit;
10226
- }, [balanceData.creditItems, balanceData.credit]);
10227
10358
  const maskBalance = (value) => {
10228
10359
  return isBalanceVisible ? value : "******";
10229
10360
  };
@@ -11958,7 +12089,7 @@ const LpModal = ({
11958
12089
  };
11959
12090
 
11960
12091
  const useFromInput = () => {
11961
- const [fromAmount, setFromAmount] = React.useState("");
12092
+ const [fromAmount, setFromAmount] = React.useState("0");
11962
12093
  return {
11963
12094
  fromAmount,
11964
12095
  setFromAmount
@@ -11966,7 +12097,7 @@ const useFromInput = () => {
11966
12097
  };
11967
12098
 
11968
12099
  const useToInputUpdate = () => {
11969
- const [toAmount, setToAmount] = React.useState("");
12100
+ const [toAmount, setToAmount] = React.useState("0");
11970
12101
  const updateToAmount = React.useCallback((amount) => {
11971
12102
  setToAmount(amount);
11972
12103
  }, []);
@@ -11978,7 +12109,7 @@ const useToInputUpdate = () => {
11978
12109
  };
11979
12110
 
11980
12111
  const useDepositInput = () => {
11981
- const [depositAmount, setDepositAmount] = React.useState("");
12112
+ const [depositAmount, setDepositAmount] = React.useState("0");
11982
12113
  return {
11983
12114
  depositAmount,
11984
12115
  setDepositAmount