@compass-labs/widgets 0.1.19 → 0.1.20

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 (5) hide show
  1. package/dist/index.js +152 -148
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +152 -148
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -3803,7 +3803,8 @@ function MarketSelector({
3803
3803
  }, [markets, marketType, minTvl, showTvl]);
3804
3804
  const maxTvl = react.useMemo(() => {
3805
3805
  const typeMarkets = markets.filter((m) => m.type === marketType);
3806
- return Math.max(...typeMarkets.map((m) => m.tvl), 1e8);
3806
+ if (typeMarkets.length === 0) return 0;
3807
+ return Math.max(...typeMarkets.map((m) => m.tvl));
3807
3808
  }, [markets, marketType]);
3808
3809
  const hasMarkets = filteredMarkets.length > 0;
3809
3810
  const formatTvl = (value) => {
@@ -3818,7 +3819,7 @@ function MarketSelector({
3818
3819
  style: {
3819
3820
  display: "flex",
3820
3821
  flexDirection: "column",
3821
- gap: "calc(var(--compass-spacing-unit) * 3)"
3822
+ gap: "calc(var(--compass-spacing-unit) * 1.5)"
3822
3823
  },
3823
3824
  children: [
3824
3825
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -3839,7 +3840,7 @@ function MarketSelector({
3839
3840
  {
3840
3841
  style: {
3841
3842
  display: "flex",
3842
- borderRadius: "var(--compass-border-radius-lg, 12px)",
3843
+ borderRadius: "var(--compass-border-radius-md, 8px)",
3843
3844
  border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
3844
3845
  overflow: "hidden"
3845
3846
  },
@@ -3849,12 +3850,12 @@ function MarketSelector({
3849
3850
  onClick: () => onMarketTypeChange(type.value),
3850
3851
  style: {
3851
3852
  flex: 1,
3852
- padding: "calc(var(--compass-spacing-unit, 8px) * 2)",
3853
+ padding: "6px 8px",
3853
3854
  backgroundColor: marketType === type.value ? "var(--compass-color-primary, #6366f1)" : "var(--compass-color-surface, #12121a)",
3854
3855
  color: marketType === type.value ? "var(--compass-color-primary-text, white)" : "var(--compass-color-text, #e4e4e7)",
3855
3856
  border: "none",
3856
3857
  cursor: "pointer",
3857
- fontSize: "var(--compass-font-size-sm, 14px)",
3858
+ fontSize: "12px",
3858
3859
  fontWeight: 500,
3859
3860
  fontFamily: "var(--compass-font-family)",
3860
3861
  transition: "var(--compass-transition-normal, all 0.2s ease)"
@@ -3887,10 +3888,11 @@ function MarketSelector({
3887
3888
  disabled: !hasMarkets || isLoading,
3888
3889
  style: {
3889
3890
  width: "100%",
3890
- padding: "calc(var(--compass-spacing-unit, 8px) * 2.5)",
3891
+ padding: "8px 12px",
3891
3892
  backgroundColor: "var(--compass-color-surface, #12121a)",
3892
3893
  border: "1px solid var(--compass-color-border, rgba(255, 255, 255, 0.1))",
3893
- borderRadius: "var(--compass-border-radius-lg, 12px)",
3894
+ borderRadius: "var(--compass-border-radius-md, 8px)",
3895
+ fontSize: "13px",
3894
3896
  display: "flex",
3895
3897
  justifyContent: "space-between",
3896
3898
  alignItems: "center",
@@ -6680,152 +6682,154 @@ function SwapWidget({
6680
6682
  /* @__PURE__ */ jsxRuntime.jsx(WalletStatus, { compact: true })
6681
6683
  ] })
6682
6684
  ] }),
6683
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
6684
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
6685
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
6686
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
6687
- /* @__PURE__ */ jsxRuntime.jsx(
6688
- "input",
6689
- {
6690
- type: "number",
6691
- value: fromAmount,
6692
- onChange: (e) => setFromAmount(e.target.value),
6693
- placeholder: "0.00",
6694
- className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
6695
- style: { color: "var(--compass-color-text)" }
6696
- }
6697
- ),
6698
- /* @__PURE__ */ jsxRuntime.jsx(
6699
- "select",
6700
- {
6701
- value: fromToken,
6702
- onChange: (e) => setFromToken(e.target.value),
6703
- className: "border text-sm font-medium cursor-pointer flex-shrink-0",
6704
- style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
6705
- children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
6706
- }
6707
- )
6685
+ /* @__PURE__ */ jsxRuntime.jsxs(EarnAccountGuard, { children: [
6686
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", style: { gap: "calc(var(--compass-spacing-unit) * 0.5)" }, children: [
6687
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border relative", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
6688
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "From" }) }),
6689
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
6690
+ /* @__PURE__ */ jsxRuntime.jsx(
6691
+ "input",
6692
+ {
6693
+ type: "number",
6694
+ value: fromAmount,
6695
+ onChange: (e) => setFromAmount(e.target.value),
6696
+ placeholder: "0.00",
6697
+ className: "flex-1 bg-transparent outline-none text-2xl font-mono min-w-0",
6698
+ style: { color: "var(--compass-color-text)" }
6699
+ }
6700
+ ),
6701
+ /* @__PURE__ */ jsxRuntime.jsx(
6702
+ "select",
6703
+ {
6704
+ value: fromToken,
6705
+ onChange: (e) => setFromToken(e.target.value),
6706
+ className: "border text-sm font-medium cursor-pointer flex-shrink-0",
6707
+ style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
6708
+ children: allowedTokens.filter((t) => t !== toToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
6709
+ }
6710
+ )
6711
+ ] })
6712
+ ] }),
6713
+ showReverseButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
6714
+ "button",
6715
+ {
6716
+ onClick: handleReverse,
6717
+ className: "border hover:opacity-80",
6718
+ style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
6719
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
6720
+ }
6721
+ ) }),
6722
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
6723
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
6724
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
6725
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
6726
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "animate-spin" }),
6727
+ "Loading..."
6728
+ ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
6729
+ /* @__PURE__ */ jsxRuntime.jsx(
6730
+ "select",
6731
+ {
6732
+ value: toToken,
6733
+ onChange: (e) => setToToken(e.target.value),
6734
+ className: "border text-sm font-medium cursor-pointer",
6735
+ style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
6736
+ children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
6737
+ }
6738
+ )
6739
+ ] })
6740
+ ] })
6741
+ ] }),
6742
+ quote && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
6743
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rate" }),
6744
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
6745
+ "1 ",
6746
+ fromToken,
6747
+ " = ",
6748
+ parseFloat(quote.rate).toFixed(6),
6749
+ " ",
6750
+ toToken
6708
6751
  ] })
6709
6752
  ] }),
6710
- showReverseButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center relative z-10", style: { margin: "calc(var(--compass-spacing-unit) * -0.25) 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
6753
+ quoteError && /* @__PURE__ */ jsxRuntime.jsxs(
6754
+ "div",
6755
+ {
6756
+ className: "flex items-center text-sm",
6757
+ style: {
6758
+ backgroundColor: "var(--compass-color-error-muted)",
6759
+ color: "var(--compass-color-error)",
6760
+ borderRadius: "var(--compass-border-radius-lg)",
6761
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
6762
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
6763
+ },
6764
+ children: [
6765
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16 }),
6766
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: quoteError.message })
6767
+ ]
6768
+ }
6769
+ ),
6770
+ swapStatus && /* @__PURE__ */ jsxRuntime.jsxs(
6771
+ "div",
6772
+ {
6773
+ className: "flex items-center text-sm",
6774
+ style: {
6775
+ backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
6776
+ color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
6777
+ borderRadius: "var(--compass-border-radius-lg)",
6778
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
6779
+ gap: "calc(var(--compass-spacing-unit) * 0.5)"
6780
+ },
6781
+ children: [
6782
+ !swapStatus.includes("successful") && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: "animate-spin" }),
6783
+ swapStatus
6784
+ ]
6785
+ }
6786
+ ),
6787
+ !isConnected ? /* @__PURE__ */ jsxRuntime.jsxs(
6788
+ "div",
6789
+ {
6790
+ className: "flex flex-col items-center",
6791
+ style: {
6792
+ backgroundColor: "var(--compass-color-surface)",
6793
+ border: "1px solid var(--compass-color-border)",
6794
+ borderRadius: "var(--compass-border-radius-lg)",
6795
+ fontFamily: "var(--compass-font-family)",
6796
+ padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
6797
+ gap: "calc(var(--compass-spacing-unit) * 0.75)"
6798
+ },
6799
+ children: [
6800
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
6801
+ /* @__PURE__ */ jsxRuntime.jsx(
6802
+ "p",
6803
+ {
6804
+ className: "text-sm text-center",
6805
+ style: { color: "var(--compass-color-text-secondary)" },
6806
+ children: "Connect your wallet to swap"
6807
+ }
6808
+ )
6809
+ ]
6810
+ }
6811
+ ) : /* @__PURE__ */ jsxRuntime.jsxs(
6711
6812
  "button",
6712
6813
  {
6713
- onClick: handleReverse,
6714
- className: "border hover:opacity-80",
6715
- style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-full)", padding: "calc(var(--compass-spacing-unit) * 0.5)", transition: "var(--compass-transition-normal)" },
6716
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownUp, { size: 16, style: { color: "var(--compass-color-text-secondary)" } })
6814
+ onClick: handleSwap,
6815
+ disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
6816
+ className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
6817
+ style: {
6818
+ backgroundColor: "var(--compass-color-primary)",
6819
+ color: "var(--compass-color-primary-text)",
6820
+ borderRadius: "var(--compass-border-radius-lg)",
6821
+ fontFamily: "var(--compass-font-family)",
6822
+ padding: "calc(var(--compass-spacing-unit) * 0.75)",
6823
+ gap: "calc(var(--compass-spacing-unit) * 0.5)",
6824
+ transition: "var(--compass-transition-normal)"
6825
+ },
6826
+ children: [
6827
+ isSwapping && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
6828
+ isSwapping ? "Swapping..." : "Swap"
6829
+ ]
6717
6830
  }
6718
- ) }),
6719
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border", style: { backgroundColor: "var(--compass-color-surface)", borderColor: "var(--compass-color-border)", borderRadius: "var(--compass-border-radius-xl)", fontFamily: "var(--compass-font-family)", padding: "var(--compass-spacing-card)" }, children: [
6720
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", style: { marginBottom: "calc(var(--compass-spacing-unit) * 0.5)" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { color: "var(--compass-color-text-tertiary)" }, children: "To" }) }),
6721
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", style: { gap: "calc(var(--compass-spacing-unit) * 0.75)" }, children: [
6722
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-2xl font-mono", style: { color: isQuoteLoading ? "var(--compass-color-text-tertiary)" : "var(--compass-color-text)" }, children: isQuoteLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
6723
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "animate-spin" }),
6724
- "Loading..."
6725
- ] }) : quote?.outputAmount ? parseFloat(quote.outputAmount).toFixed(8) : "0.00000000" }),
6726
- /* @__PURE__ */ jsxRuntime.jsx(
6727
- "select",
6728
- {
6729
- value: toToken,
6730
- onChange: (e) => setToToken(e.target.value),
6731
- className: "border text-sm font-medium cursor-pointer",
6732
- style: { backgroundColor: "var(--compass-color-background)", borderColor: "var(--compass-color-border)", color: "var(--compass-color-text)", borderRadius: "var(--compass-border-radius-lg)", padding: "var(--compass-spacing-input)" },
6733
- children: allowedTokens.filter((t) => t !== fromToken).map((token) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: token, children: token }, token))
6734
- }
6735
- )
6736
- ] })
6737
- ] })
6738
- ] }),
6739
- quote && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm", style: { color: "var(--compass-color-text-secondary)" }, children: [
6740
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rate" }),
6741
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
6742
- "1 ",
6743
- fromToken,
6744
- " = ",
6745
- parseFloat(quote.rate).toFixed(6),
6746
- " ",
6747
- toToken
6748
- ] })
6749
- ] }),
6750
- quoteError && /* @__PURE__ */ jsxRuntime.jsxs(
6751
- "div",
6752
- {
6753
- className: "flex items-center text-sm",
6754
- style: {
6755
- backgroundColor: "var(--compass-color-error-muted)",
6756
- color: "var(--compass-color-error)",
6757
- borderRadius: "var(--compass-border-radius-lg)",
6758
- padding: "calc(var(--compass-spacing-unit) * 0.75)",
6759
- gap: "calc(var(--compass-spacing-unit) * 0.5)"
6760
- },
6761
- children: [
6762
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 16 }),
6763
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: quoteError.message })
6764
- ]
6765
- }
6766
- ),
6767
- swapStatus && /* @__PURE__ */ jsxRuntime.jsxs(
6768
- "div",
6769
- {
6770
- className: "flex items-center text-sm",
6771
- style: {
6772
- backgroundColor: swapStatus.includes("successful") ? "var(--compass-color-success-muted)" : "var(--compass-color-surface)",
6773
- color: swapStatus.includes("successful") ? "var(--compass-color-success)" : "var(--compass-color-text-secondary)",
6774
- borderRadius: "var(--compass-border-radius-lg)",
6775
- padding: "calc(var(--compass-spacing-unit) * 0.75)",
6776
- gap: "calc(var(--compass-spacing-unit) * 0.5)"
6777
- },
6778
- children: [
6779
- !swapStatus.includes("successful") && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 14, className: "animate-spin" }),
6780
- swapStatus
6781
- ]
6782
- }
6783
- ),
6784
- !isConnected ? /* @__PURE__ */ jsxRuntime.jsxs(
6785
- "div",
6786
- {
6787
- className: "flex flex-col items-center",
6788
- style: {
6789
- backgroundColor: "var(--compass-color-surface)",
6790
- border: "1px solid var(--compass-color-border)",
6791
- borderRadius: "var(--compass-border-radius-lg)",
6792
- fontFamily: "var(--compass-font-family)",
6793
- padding: "calc(var(--compass-spacing-unit) * 1.5) var(--compass-spacing-card)",
6794
- gap: "calc(var(--compass-spacing-unit) * 0.75)"
6795
- },
6796
- children: [
6797
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { size: 24, style: { color: "var(--compass-color-text-tertiary)" } }),
6798
- /* @__PURE__ */ jsxRuntime.jsx(
6799
- "p",
6800
- {
6801
- className: "text-sm text-center",
6802
- style: { color: "var(--compass-color-text-secondary)" },
6803
- children: "Connect your wallet to swap"
6804
- }
6805
- )
6806
- ]
6807
- }
6808
- ) : /* @__PURE__ */ jsxRuntime.jsxs(
6809
- "button",
6810
- {
6811
- onClick: handleSwap,
6812
- disabled: isSwapping || !quote || !fromAmount || parseFloat(fromAmount) <= 0,
6813
- className: "w-full font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed",
6814
- style: {
6815
- backgroundColor: "var(--compass-color-primary)",
6816
- color: "var(--compass-color-primary-text)",
6817
- borderRadius: "var(--compass-border-radius-lg)",
6818
- fontFamily: "var(--compass-font-family)",
6819
- padding: "calc(var(--compass-spacing-unit) * 0.75)",
6820
- gap: "calc(var(--compass-spacing-unit) * 0.5)",
6821
- transition: "var(--compass-transition-normal)"
6822
- },
6823
- children: [
6824
- isSwapping && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18, className: "animate-spin" }),
6825
- isSwapping ? "Swapping..." : "Swap"
6826
- ]
6827
- }
6828
- )
6831
+ )
6832
+ ] })
6829
6833
  ] });
6830
6834
  }
6831
6835
  function getEarliestDepositTimestamp(deposits) {