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