@gearbox-protocol/permissionless-ui 1.3.0 → 1.4.0

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 (51) hide show
  1. package/README.md +0 -14
  2. package/dist/cjs/components/auth/siwe-provider.js +1 -0
  3. package/dist/cjs/components/block-sync.js +1 -0
  4. package/dist/cjs/components/buttons/navigation-button.js +2 -2
  5. package/dist/cjs/components/graph/graph-tooltip.js +1 -0
  6. package/dist/cjs/components/graph/graph-view.js +1 -0
  7. package/dist/cjs/components/graph/graph.js +1 -0
  8. package/dist/cjs/components/help-center-container.js +1 -0
  9. package/dist/cjs/components/layout/legal-disclaimer.js +4 -14
  10. package/dist/cjs/components/navbar-indicator-context.js +1 -0
  11. package/dist/cjs/components/next/index.js +5 -2
  12. package/dist/cjs/components/next/web3-providers.js +116 -0
  13. package/dist/cjs/components/search-bar.js +1 -0
  14. package/dist/cjs/components/signatures/vertical-timeline.js +1 -0
  15. package/dist/cjs/components/tab-control.js +1 -0
  16. package/dist/cjs/components/token-icon.js +1 -0
  17. package/dist/cjs/hooks/use-controllable-state.js +1 -0
  18. package/dist/cjs/hooks/use-debounce.js +1 -0
  19. package/dist/cjs/hooks/use-filter.js +1 -0
  20. package/dist/cjs/hooks/use-liquidation/index.js +43 -4
  21. package/dist/cjs/hooks/use-media-query.js +1 -0
  22. package/dist/cjs/hooks/use-previous.js +1 -0
  23. package/dist/cjs/index.js +2 -0
  24. package/dist/esm/components/auth/siwe-provider.js +1 -0
  25. package/dist/esm/components/block-sync.js +1 -0
  26. package/dist/esm/components/buttons/navigation-button.js +2 -2
  27. package/dist/esm/components/graph/graph-tooltip.js +1 -0
  28. package/dist/esm/components/graph/graph-view.js +1 -0
  29. package/dist/esm/components/graph/graph.js +1 -0
  30. package/dist/esm/components/help-center-container.js +1 -0
  31. package/dist/esm/components/layout/legal-disclaimer.js +4 -4
  32. package/dist/esm/components/navbar-indicator-context.js +1 -0
  33. package/dist/esm/components/next/index.js +3 -1
  34. package/dist/esm/components/next/web3-providers.js +92 -0
  35. package/dist/esm/components/search-bar.js +1 -0
  36. package/dist/esm/components/signatures/vertical-timeline.js +1 -0
  37. package/dist/esm/components/tab-control.js +1 -0
  38. package/dist/esm/components/token-icon.js +1 -0
  39. package/dist/esm/hooks/use-controllable-state.js +1 -0
  40. package/dist/esm/hooks/use-debounce.js +1 -0
  41. package/dist/esm/hooks/use-filter.js +1 -0
  42. package/dist/esm/hooks/use-liquidation/index.js +44 -2
  43. package/dist/esm/hooks/use-media-query.js +1 -0
  44. package/dist/esm/hooks/use-previous.js +1 -0
  45. package/dist/esm/index.js +1 -0
  46. package/dist/types/components/base-link.d.ts +23 -3
  47. package/dist/types/components/next/index.d.ts +1 -0
  48. package/dist/types/components/next/web3-providers.d.ts +29 -0
  49. package/dist/types/hooks/use-liquidation/index.d.ts +2 -1
  50. package/dist/types/index.d.ts +1 -0
  51. package/package.json +18 -24
package/README.md CHANGED
@@ -2,16 +2,6 @@
2
2
 
3
3
  UI components for internal use - framework-agnostic React component library built with Tailwind CSS 4.
4
4
 
5
- ## Features
6
-
7
- - 🎨 **Tailwind CSS 4** - Built with the latest Tailwind CSS
8
- - 🌗 **Dark Mode** - Full dark mode support out of the box
9
- - 📦 **Framework Agnostic** - Works with any React framework
10
- - ⚡ **Next.js Optimized** - Special optimizations for Next.js projects
11
- - 🎯 **TypeScript** - Fully typed components
12
- - 🔧 **Customizable** - Easy to customize with Tailwind preset
13
- - ♿ **Accessible** - Built with Radix UI primitives
14
-
15
5
  ## Installation
16
6
 
17
7
  ```bash
@@ -86,10 +76,6 @@ function App() {
86
76
  }
87
77
  ```
88
78
 
89
- > ⚠️ **Important:** To prevent white flash on page load, add `<ThemeScript />` to your HTML `<head>`. See [THEME_FLASH_FIX.md](./THEME_FLASH_FIX.md) for details.
90
-
91
- 📚 **Quick start? See [QUICK_START.md](./QUICK_START.md) | Detailed guide? See [INTEGRATION.md](./INTEGRATION.md)**
92
-
93
79
  ## Usage
94
80
 
95
81
  ### Framework-agnostic (works everywhere)
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -32,12 +32,12 @@ __export(navigation_button_exports, {
32
32
  });
33
33
  module.exports = __toCommonJS(navigation_button_exports);
34
34
  var import_jsx_runtime = require("react/jsx-runtime");
35
- var import_link = __toESM(require("next/link"));
36
35
  var import_react = __toESM(require("react"));
37
36
  var import_utils = __toESM(require('../../utils/index.js'));
37
+ var import_base_link = require('../base-link.js');
38
38
  const NavigationButton = import_react.default.forwardRef(({ href, text, isActive, ...props }, ref) => {
39
39
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
40
- import_link.default,
40
+ import_base_link.BaseLink,
41
41
  {
42
42
  href,
43
43
  ref,
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
19
  var legal_disclaimer_exports = {};
30
20
  __export(legal_disclaimer_exports, {
@@ -32,13 +22,13 @@ __export(legal_disclaimer_exports, {
32
22
  });
33
23
  module.exports = __toCommonJS(legal_disclaimer_exports);
34
24
  var import_jsx_runtime = require("react/jsx-runtime");
35
- var import_link = __toESM(require("next/link"));
25
+ var import_base_link = require('../base-link.js');
36
26
  function LegalDisclaimer({ hrefs }) {
37
27
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-muted-foreground max-w-md", children: [
38
28
  "Any use of and/or interaction with the Permissionless Interface is subject to the",
39
29
  " ",
40
30
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
41
- import_link.default,
31
+ import_base_link.BaseLink,
42
32
  {
43
33
  href: hrefs.termsOfService,
44
34
  className: "underline hover:text-foreground transition-colors",
@@ -49,7 +39,7 @@ function LegalDisclaimer({ hrefs }) {
49
39
  "and",
50
40
  " ",
51
41
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
52
- import_link.default,
42
+ import_base_link.BaseLink,
53
43
  {
54
44
  href: hrefs.privacyNotice,
55
45
  className: "underline hover:text-foreground transition-colors",
@@ -59,7 +49,7 @@ function LegalDisclaimer({ hrefs }) {
59
49
  ", and acceptance of risks described in the",
60
50
  " ",
61
51
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
62
- import_link.default,
52
+ import_base_link.BaseLink,
63
53
  {
64
54
  href: hrefs.riskDisclosure,
65
55
  className: "underline hover:text-foreground transition-colors",
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,17 +21,20 @@ __export(next_exports, {
21
21
  BackButton: () => import_back_button.BackButton,
22
22
  SIWEClientProvider: () => import_siwe_provider.SIWEClientProvider,
23
23
  SignInRequired: () => import_signin_required.SignInRequired,
24
- TokenIcon: () => import_token_icon.TokenIcon
24
+ TokenIcon: () => import_token_icon.TokenIcon,
25
+ Web3Providers: () => import_web3_providers.Web3Providers
25
26
  });
26
27
  module.exports = __toCommonJS(next_exports);
27
28
  var import_signin_required = require('../auth/signin-required.js');
28
29
  var import_back_button = require('./back-button.js');
29
30
  var import_siwe_provider = require('./siwe-provider.js');
30
31
  var import_token_icon = require('./token-icon.js');
32
+ var import_web3_providers = require('./web3-providers.js');
31
33
  // Annotate the CommonJS export names for ESM import in node:
32
34
  0 && (module.exports = {
33
35
  BackButton,
34
36
  SIWEClientProvider,
35
37
  SignInRequired,
36
- TokenIcon
38
+ TokenIcon,
39
+ Web3Providers
37
40
  });
@@ -0,0 +1,116 @@
1
+ "use strict";
2
+ "use client";
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
+ var web3_providers_exports = {};
21
+ __export(web3_providers_exports, {
22
+ Web3Providers: () => Web3Providers
23
+ });
24
+ module.exports = __toCommonJS(web3_providers_exports);
25
+ var import_jsx_runtime = require("react/jsx-runtime");
26
+ var import_react_query = require("@tanstack/react-query");
27
+ var import_connectkit = require("connectkit");
28
+ var import_react = require("react");
29
+ var import_siwe = require("viem/siwe");
30
+ var import_wagmi = require("wagmi");
31
+ function makeQueryClient() {
32
+ return new import_react_query.QueryClient({
33
+ defaultOptions: {
34
+ queries: {
35
+ staleTime: 60 * 1e3
36
+ }
37
+ }
38
+ });
39
+ }
40
+ let browserQueryClient;
41
+ function getQueryClient() {
42
+ if (typeof window === "undefined") {
43
+ return makeQueryClient();
44
+ }
45
+ if (!browserQueryClient) browserQueryClient = makeQueryClient();
46
+ return browserQueryClient;
47
+ }
48
+ function Web3Providers({
49
+ config,
50
+ apiRoutePrefix,
51
+ statement = "Sign In With Ethereum.",
52
+ children
53
+ }) {
54
+ const [queryClient] = (0, import_react.useState)(() => getQueryClient());
55
+ const getNonce = async () => {
56
+ const res = await fetch(`${apiRoutePrefix}/nonce`);
57
+ if (!res.ok) {
58
+ throw new Error("Failed to fetch SIWE nonce");
59
+ }
60
+ return await res.text();
61
+ };
62
+ const createMessage = ({
63
+ nonce,
64
+ address,
65
+ chainId
66
+ }) => (0, import_siwe.createSiweMessage)({
67
+ version: "1",
68
+ domain: window.location.host,
69
+ uri: window.location.origin,
70
+ address,
71
+ chainId,
72
+ nonce,
73
+ statement
74
+ });
75
+ const verifyMessage = async ({
76
+ message,
77
+ signature
78
+ }) => {
79
+ const res = await fetch(`${apiRoutePrefix}/signin`, {
80
+ method: "POST",
81
+ body: JSON.stringify({ message, signature })
82
+ });
83
+ if (!res.ok) {
84
+ throw new Error("Failed to verify SIWE message");
85
+ }
86
+ return true;
87
+ };
88
+ const getSession = async () => {
89
+ const res = await fetch(`${apiRoutePrefix}/session`);
90
+ if (!res.ok) {
91
+ return null;
92
+ }
93
+ return res.json();
94
+ };
95
+ const signOut = async () => {
96
+ await fetch(`${apiRoutePrefix}/logout`, {
97
+ method: "POST"
98
+ });
99
+ return true;
100
+ };
101
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wagmi.WagmiProvider, { config, reconnectOnMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
+ import_connectkit.SIWEProvider,
103
+ {
104
+ getNonce,
105
+ createMessage,
106
+ verifyMessage,
107
+ getSession,
108
+ signOut,
109
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_connectkit.ConnectKitProvider, { children })
110
+ }
111
+ ) }) });
112
+ }
113
+ // Annotate the CommonJS export names for ESM import in node:
114
+ 0 && (module.exports = {
115
+ Web3Providers
116
+ });
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -15,19 +16,38 @@ var __copyProps = (to, from, except, desc) => {
15
16
  }
16
17
  return to;
17
18
  };
18
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
19
19
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
20
  var use_liquidation_exports = {};
21
21
  __export(use_liquidation_exports, {
22
+ CELL_BAD: () => import_utils2.CELL_BAD,
23
+ CELL_CURRENT: () => import_utils2.CELL_CURRENT,
24
+ CELL_GOOD: () => import_utils2.CELL_GOOD,
25
+ CELL_HOVERED: () => import_utils2.CELL_HOVERED,
26
+ CELL_LIQUIDATION: () => import_utils2.CELL_LIQUIDATION,
27
+ CELL_OK: () => import_utils2.CELL_OK,
28
+ DEFAULT_AXIS_MAX: () => import_utils2.DEFAULT_AXIS_MAX,
29
+ DEFAULT_AXIS_MIN: () => import_utils2.DEFAULT_AXIS_MIN,
30
+ formatAxisLabel: () => import_utils2.formatAxisLabel,
31
+ formatAxisTipLabel: () => import_utils2.formatAxisTipLabel,
32
+ formatAxisTipPrice: () => import_utils2.formatAxisTipPrice,
33
+ getCellClass: () => import_utils2.getCellClass,
34
+ isPointInCell: () => import_utils2.isPointInCell,
35
+ useAxis: () => import_utils2.useAxis,
22
36
  useEditPriceManually: () => useEditPriceManually,
37
+ useFixedAssets: () => import_utils2.useFixedAssets,
38
+ useIsAxisInRelativeUnits: () => import_utils2.useIsAxisInRelativeUnits,
39
+ useLiquidationGraphActivePrice: () => import_utils2.useLiquidationGraphActivePrice,
40
+ useLiquidationGraphCurrentActiveValue: () => import_utils2.useLiquidationGraphCurrentActiveValue,
23
41
  useLiquidationGraphParams: () => useLiquidationGraphParams,
24
- useLiquidationHeatmap: () => useLiquidationHeatmap
42
+ useLiquidationHeatmap: () => useLiquidationHeatmap,
43
+ usePriceInNumber: () => import_utils2.usePriceInNumber,
44
+ useWithLiquidationGraphActivePrices: () => import_utils2.useWithLiquidationGraphActivePrices
25
45
  });
26
46
  module.exports = __toCommonJS(use_liquidation_exports);
27
47
  var import_sdk = require("@gearbox-protocol/sdk");
28
48
  var import_react = require("react");
29
49
  var import_utils = require('./utils.js');
30
- __reExport(use_liquidation_exports, require('./utils.js'), module.exports);
50
+ var import_utils2 = require('./utils.js');
31
51
  const RESOLUTION = 35;
32
52
  function useLiquidationHeatmap({
33
53
  xMin,
@@ -158,8 +178,27 @@ function useLiquidationGraphParams({
158
178
  }
159
179
  // Annotate the CommonJS export names for ESM import in node:
160
180
  0 && (module.exports = {
181
+ CELL_BAD,
182
+ CELL_CURRENT,
183
+ CELL_GOOD,
184
+ CELL_HOVERED,
185
+ CELL_LIQUIDATION,
186
+ CELL_OK,
187
+ DEFAULT_AXIS_MAX,
188
+ DEFAULT_AXIS_MIN,
189
+ formatAxisLabel,
190
+ formatAxisTipLabel,
191
+ formatAxisTipPrice,
192
+ getCellClass,
193
+ isPointInCell,
194
+ useAxis,
161
195
  useEditPriceManually,
196
+ useFixedAssets,
197
+ useIsAxisInRelativeUnits,
198
+ useLiquidationGraphActivePrice,
199
+ useLiquidationGraphCurrentActiveValue,
162
200
  useLiquidationGraphParams,
163
201
  useLiquidationHeatmap,
164
- ...require('./utils.js')
202
+ usePriceInNumber,
203
+ useWithLiquidationGraphActivePrices
165
204
  });
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ "use client";
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
package/dist/cjs/index.js CHANGED
@@ -61,6 +61,7 @@ __reExport(index_exports, require('./components/layout/index.js'), module.export
61
61
  __reExport(index_exports, require('./components/liquidation/index.js'), module.exports);
62
62
  __reExport(index_exports, require('./components/loader-guard.js'), module.exports);
63
63
  __reExport(index_exports, require('./components/loading-guard.js'), module.exports);
64
+ __reExport(index_exports, require('./components/markdown-viewer.js'), module.exports);
64
65
  __reExport(index_exports, require('./components/navbar.js'), module.exports);
65
66
  __reExport(index_exports, require('./components/navitem.js'), module.exports);
66
67
  __reExport(index_exports, require('./components/not-found.js'), module.exports);
@@ -139,6 +140,7 @@ __reExport(index_exports, require('./utils/templates.js'), module.exports);
139
140
  ...require('./components/liquidation/index.js'),
140
141
  ...require('./components/loader-guard.js'),
141
142
  ...require('./components/loading-guard.js'),
143
+ ...require('./components/markdown-viewer.js'),
142
144
  ...require('./components/navbar.js'),
143
145
  ...require('./components/navitem.js'),
144
146
  ...require('./components/not-found.js'),
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { SIWEProvider } from "connectkit";
3
4
  import { createSiweMessage } from "viem/siwe";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { useEffect, useMemo, useState } from "react";
3
4
  import { cn } from "../utils/cn.js";
@@ -1,10 +1,10 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import Link from "next/link";
3
2
  import React from "react";
4
3
  import cn from "../../utils/index.js";
4
+ import { BaseLink } from "../base-link.js";
5
5
  const NavigationButton = React.forwardRef(({ href, text, isActive, ...props }, ref) => {
6
6
  return /* @__PURE__ */ jsx(
7
- Link,
7
+ BaseLink,
8
8
  {
9
9
  href,
10
10
  ref,
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { useEffect, useRef, useState } from "react";
3
4
  import { cn } from "../../utils/cn.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { cva } from "class-variance-authority";
3
4
  import * as React from "react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { createChart } from "lightweight-charts";
3
4
  import * as React from "react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import { useEffect, useState } from "react";
3
4
  import { cn } from "../utils/cn.js";
@@ -1,11 +1,11 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import Link from "next/link";
2
+ import { BaseLink } from "../base-link.js";
3
3
  function LegalDisclaimer({ hrefs }) {
4
4
  return /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground max-w-md", children: [
5
5
  "Any use of and/or interaction with the Permissionless Interface is subject to the",
6
6
  " ",
7
7
  /* @__PURE__ */ jsx(
8
- Link,
8
+ BaseLink,
9
9
  {
10
10
  href: hrefs.termsOfService,
11
11
  className: "underline hover:text-foreground transition-colors",
@@ -16,7 +16,7 @@ function LegalDisclaimer({ hrefs }) {
16
16
  "and",
17
17
  " ",
18
18
  /* @__PURE__ */ jsx(
19
- Link,
19
+ BaseLink,
20
20
  {
21
21
  href: hrefs.privacyNotice,
22
22
  className: "underline hover:text-foreground transition-colors",
@@ -26,7 +26,7 @@ function LegalDisclaimer({ hrefs }) {
26
26
  ", and acceptance of risks described in the",
27
27
  " ",
28
28
  /* @__PURE__ */ jsx(
29
- Link,
29
+ BaseLink,
30
30
  {
31
31
  href: hrefs.riskDisclosure,
32
32
  className: "underline hover:text-foreground transition-colors",
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx } from "react/jsx-runtime";
2
3
  import {
3
4
  createContext,
@@ -2,9 +2,11 @@ import { SignInRequired } from "../auth/signin-required.js";
2
2
  import { BackButton } from "./back-button.js";
3
3
  import { SIWEClientProvider } from "./siwe-provider.js";
4
4
  import { TokenIcon } from "./token-icon.js";
5
+ import { Web3Providers } from "./web3-providers.js";
5
6
  export {
6
7
  BackButton,
7
8
  SIWEClientProvider,
8
9
  SignInRequired,
9
- TokenIcon
10
+ TokenIcon,
11
+ Web3Providers
10
12
  };
@@ -0,0 +1,92 @@
1
+ "use client";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
4
+ import { ConnectKitProvider, SIWEProvider } from "connectkit";
5
+ import { useState } from "react";
6
+ import { createSiweMessage } from "viem/siwe";
7
+ import { WagmiProvider } from "wagmi";
8
+ function makeQueryClient() {
9
+ return new QueryClient({
10
+ defaultOptions: {
11
+ queries: {
12
+ staleTime: 60 * 1e3
13
+ }
14
+ }
15
+ });
16
+ }
17
+ let browserQueryClient;
18
+ function getQueryClient() {
19
+ if (typeof window === "undefined") {
20
+ return makeQueryClient();
21
+ }
22
+ if (!browserQueryClient) browserQueryClient = makeQueryClient();
23
+ return browserQueryClient;
24
+ }
25
+ function Web3Providers({
26
+ config,
27
+ apiRoutePrefix,
28
+ statement = "Sign In With Ethereum.",
29
+ children
30
+ }) {
31
+ const [queryClient] = useState(() => getQueryClient());
32
+ const getNonce = async () => {
33
+ const res = await fetch(`${apiRoutePrefix}/nonce`);
34
+ if (!res.ok) {
35
+ throw new Error("Failed to fetch SIWE nonce");
36
+ }
37
+ return await res.text();
38
+ };
39
+ const createMessage = ({
40
+ nonce,
41
+ address,
42
+ chainId
43
+ }) => createSiweMessage({
44
+ version: "1",
45
+ domain: window.location.host,
46
+ uri: window.location.origin,
47
+ address,
48
+ chainId,
49
+ nonce,
50
+ statement
51
+ });
52
+ const verifyMessage = async ({
53
+ message,
54
+ signature
55
+ }) => {
56
+ const res = await fetch(`${apiRoutePrefix}/signin`, {
57
+ method: "POST",
58
+ body: JSON.stringify({ message, signature })
59
+ });
60
+ if (!res.ok) {
61
+ throw new Error("Failed to verify SIWE message");
62
+ }
63
+ return true;
64
+ };
65
+ const getSession = async () => {
66
+ const res = await fetch(`${apiRoutePrefix}/session`);
67
+ if (!res.ok) {
68
+ return null;
69
+ }
70
+ return res.json();
71
+ };
72
+ const signOut = async () => {
73
+ await fetch(`${apiRoutePrefix}/logout`, {
74
+ method: "POST"
75
+ });
76
+ return true;
77
+ };
78
+ return /* @__PURE__ */ jsx(WagmiProvider, { config, reconnectOnMount: true, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(
79
+ SIWEProvider,
80
+ {
81
+ getNonce,
82
+ createMessage,
83
+ verifyMessage,
84
+ getSession,
85
+ signOut,
86
+ children: /* @__PURE__ */ jsx(ConnectKitProvider, { children })
87
+ }
88
+ ) }) });
89
+ }
90
+ export {
91
+ Web3Providers
92
+ };
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Search } from "lucide-react";
3
4
  import { useState } from "react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { Check, X } from "lucide-react";
3
4
  import { useState } from "react";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
3
  import { useCallback, useEffect, useMemo, useRef, useState } from "react";
3
4
  import { useLocation, useNavigate } from "react-router-dom";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx, jsxs } from "react/jsx-runtime";
2
3
  import { useState } from "react";
3
4
  import { Image } from "./image.js";
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { useCallback, useState } from "react";
2
3
  function useControllableState({
3
4
  value: controlledValue,
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { useCallback, useEffect, useMemo } from "react";
2
3
  const debounce = (func, delay) => {
3
4
  let timer = null;
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { useCallback, useMemo, useState } from "react";
2
3
  function useRangeFilter() {
3
4
  const [range, setRange] = useState(null);
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import {
2
3
  CreditAccountData_Legacy,
3
4
  PRICE_DECIMALS_POW,
@@ -10,7 +11,28 @@ import {
10
11
  useFixedAssets,
11
12
  usePriceInNumber
12
13
  } from "./utils.js";
13
- export * from "./utils.js";
14
+ import {
15
+ CELL_BAD,
16
+ CELL_CURRENT,
17
+ CELL_GOOD,
18
+ CELL_HOVERED,
19
+ CELL_LIQUIDATION,
20
+ CELL_OK,
21
+ DEFAULT_AXIS_MAX as DEFAULT_AXIS_MAX2,
22
+ DEFAULT_AXIS_MIN,
23
+ formatAxisLabel,
24
+ formatAxisTipLabel,
25
+ formatAxisTipPrice,
26
+ getCellClass,
27
+ isPointInCell,
28
+ useAxis as useAxis2,
29
+ useFixedAssets as useFixedAssets2,
30
+ useIsAxisInRelativeUnits,
31
+ useLiquidationGraphActivePrice,
32
+ useLiquidationGraphCurrentActiveValue,
33
+ usePriceInNumber as usePriceInNumber2,
34
+ useWithLiquidationGraphActivePrices
35
+ } from "./utils.js";
14
36
  const RESOLUTION = 35;
15
37
  function useLiquidationHeatmap({
16
38
  xMin,
@@ -140,7 +162,27 @@ function useLiquidationGraphParams({
140
162
  };
141
163
  }
142
164
  export {
165
+ CELL_BAD,
166
+ CELL_CURRENT,
167
+ CELL_GOOD,
168
+ CELL_HOVERED,
169
+ CELL_LIQUIDATION,
170
+ CELL_OK,
171
+ DEFAULT_AXIS_MAX2 as DEFAULT_AXIS_MAX,
172
+ DEFAULT_AXIS_MIN,
173
+ formatAxisLabel,
174
+ formatAxisTipLabel,
175
+ formatAxisTipPrice,
176
+ getCellClass,
177
+ isPointInCell,
178
+ useAxis2 as useAxis,
143
179
  useEditPriceManually,
180
+ useFixedAssets2 as useFixedAssets,
181
+ useIsAxisInRelativeUnits,
182
+ useLiquidationGraphActivePrice,
183
+ useLiquidationGraphCurrentActiveValue,
144
184
  useLiquidationGraphParams,
145
- useLiquidationHeatmap
185
+ useLiquidationHeatmap,
186
+ usePriceInNumber2 as usePriceInNumber,
187
+ useWithLiquidationGraphActivePrices
146
188
  };
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { useEffect, useState } from "react";
2
3
  function useMediaQuery(query) {
3
4
  const [matches, setMatches] = useState(false);
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { useEffect, useRef } from "react";
2
3
  function usePrevious(value) {
3
4
  const ref = useRef(void 0);
package/dist/esm/index.js CHANGED
@@ -32,6 +32,7 @@ export * from "./components/layout/index.js";
32
32
  export * from "./components/liquidation/index.js";
33
33
  export * from "./components/loader-guard.js";
34
34
  export * from "./components/loading-guard.js";
35
+ export * from "./components/markdown-viewer.js";
35
36
  export * from "./components/navbar.js";
36
37
  export * from "./components/navitem.js";
37
38
  export * from "./components/not-found.js";
@@ -6,31 +6,51 @@ export interface BaseLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElem
6
6
  *
7
7
  * @example
8
8
  * ```tsx
9
+ * // With Next.js Link
9
10
  * <BaseLink asChild>
10
11
  * <Link href="/path">Link</Link>
11
12
  * </BaseLink>
13
+ *
14
+ * // With React Router Link
15
+ * <BaseLink asChild>
16
+ * <Link to="/path">Link</Link>
17
+ * </BaseLink>
12
18
  * ```
13
19
  */
14
20
  asChild?: boolean;
15
21
  /**
16
22
  * Indicates if this is an external link
23
+ * Automatically adds target="_blank" and rel="noopener noreferrer"
17
24
  */
18
25
  external?: boolean;
19
26
  }
20
27
  /**
21
28
  * BaseLink component for creating links with optional external link handling
22
29
  *
30
+ * This component works in both Next.js and non-Next.js projects:
31
+ * - In Next.js: use `asChild` prop to wrap Next.js Link component
32
+ * - In other frameworks: use `href` prop directly or wrap routing library links with `asChild`
33
+ *
23
34
  * @example
24
35
  * ```tsx
25
- * // Basic usage
36
+ * // Basic usage (works in any React project)
26
37
  * <BaseLink href="/dashboard">Dashboard</BaseLink>
27
38
  *
28
39
  * // External link
29
40
  * <BaseLink href="https://example.com" external>Example</BaseLink>
30
41
  *
31
- * // With routing library
42
+ * // With Next.js Link (recommended for Next.js projects)
43
+ * import NextLink from "next/link";
44
+ *
45
+ * <BaseLink asChild>
46
+ * <NextLink href="/dashboard">Dashboard</NextLink>
47
+ * </BaseLink>
48
+ *
49
+ * // With React Router Link
50
+ * import { Link as RouterLink } from "react-router-dom";
51
+ *
32
52
  * <BaseLink asChild>
33
- * <Link to="/dashboard">Dashboard</Link>
53
+ * <RouterLink to="/dashboard">Dashboard</RouterLink>
34
54
  * </BaseLink>
35
55
  * ```
36
56
  */
@@ -7,3 +7,4 @@ export { SignInRequired } from "../auth/signin-required";
7
7
  export { BackButton } from "./back-button";
8
8
  export { SIWEClientProvider } from "./siwe-provider";
9
9
  export { TokenIcon } from "./token-icon";
10
+ export { Web3Providers } from "./web3-providers";
@@ -0,0 +1,29 @@
1
+ import type { ReactNode } from "react";
2
+ import type { Config } from "wagmi";
3
+ /**
4
+ * Web3Providers — all-in-one provider component for Web3 apps with Wagmi, ConnectKit, SIWE, and React Query.
5
+ *
6
+ * @usage
7
+ * Use Web3Providers to wrap your Next.js application and enable Web3 functionality:
8
+ * app root, authentication context, wallet connection.
9
+ *
10
+ * Props:
11
+ * - `config` — Wagmi config object (required).
12
+ * - `apiRoutePrefix` — API route prefix for SIWE endpoints (required):
13
+ * - `/api/nonce` — endpoint for fetching nonce.
14
+ * - `/api/signin` — endpoint for verifying signature.
15
+ * - `/api/session` — endpoint for getting current session.
16
+ * - `/api/logout` — endpoint for signing out.
17
+ * - `statement` — optional custom statement for SIWE message (defaults to "Sign In With Ethereum.").
18
+ * - `children` — application content wrapped by provider (required).
19
+ *
20
+ * Note: Web3Providers wraps WagmiProvider, QueryClientProvider, ConnectKitProvider, and SIWEProvider with correct order and configuration.
21
+ */
22
+ interface Web3ProvidersProps {
23
+ config: Config;
24
+ apiRoutePrefix: string;
25
+ statement?: string;
26
+ children: ReactNode;
27
+ }
28
+ export declare function Web3Providers({ config, apiRoutePrefix, statement, children, }: Web3ProvidersProps): import("react/jsx-runtime").JSX.Element;
29
+ export {};
@@ -3,7 +3,8 @@ import type { Cell } from "reactochart/ColorHeatmap";
3
3
  import type { Address } from "viem";
4
4
  import type { AxisParams, Point } from "./types";
5
5
  export type { AxisOrder, AxisParams, Point as LiquidationPoint } from "./types";
6
- export * from "./utils";
6
+ export type { Cell } from "./utils";
7
+ export { CELL_BAD, CELL_CURRENT, CELL_GOOD, CELL_HOVERED, CELL_LIQUIDATION, CELL_OK, DEFAULT_AXIS_MAX, DEFAULT_AXIS_MIN, formatAxisLabel, formatAxisTipLabel, formatAxisTipPrice, getCellClass, isPointInCell, useAxis, useFixedAssets, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, useLiquidationGraphCurrentActiveValue, usePriceInNumber, useWithLiquidationGraphActivePrices, } from "./utils";
7
8
  interface UseLiquidationHeatmapProps {
8
9
  xMin: number;
9
10
  xMax: number;
@@ -32,6 +32,7 @@ export * from "./components/layout";
32
32
  export * from "./components/liquidation";
33
33
  export * from "./components/loader-guard";
34
34
  export * from "./components/loading-guard";
35
+ export * from "./components/markdown-viewer";
35
36
  export * from "./components/navbar";
36
37
  export * from "./components/navitem";
37
38
  export * from "./components/not-found";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gearbox-protocol/permissionless-ui",
3
- "version": "1.3.0",
3
+ "version": "1.4.0",
4
4
  "description": "Internal UI components",
5
5
  "license": "MIT",
6
6
  "main": "./dist/cjs/index.js",
@@ -59,7 +59,6 @@
59
59
  "@radix-ui/react-tooltip": "^1.1.6",
60
60
  "class-variance-authority": "^0.7.1",
61
61
  "clsx": "^2.1.1",
62
- "connectkit": "^1.8.2",
63
62
  "lightweight-charts": "^4.1.3",
64
63
  "lucide-react": "^0.471.1",
65
64
  "luxon": "^3.5.0",
@@ -70,19 +69,21 @@
70
69
  "remark-gfm": "^4.0.0",
71
70
  "sonner": "^1.7.2",
72
71
  "tailwind-merge": "^2.6.0",
73
- "tailwindcss-animate": "^1.0.7",
74
- "viem": "^2.36",
75
- "wagmi": "^2.14.8"
72
+ "tailwindcss-animate": "^1.0.7"
76
73
  },
77
74
  "peerDependencies": {
78
75
  "@gearbox-protocol/sdk": "*",
76
+ "@tanstack/react-query": "^5.0.0",
79
77
  "@types/react": "^18 || ^19",
80
78
  "@types/react-dom": "^18 || ^19",
79
+ "connectkit": "^1.8.0",
81
80
  "next": ">=13",
82
81
  "react": "^18 || ^19",
83
82
  "react-dom": "^18 || ^19",
84
- "react-intl": "^6.0.0",
85
- "react-router-dom": "^6.0.0"
83
+ "react-intl": "^6.0.0 || ^7.0.0",
84
+ "react-router-dom": "^6.0.0 || ^7.0.0",
85
+ "viem": "^2.0.0",
86
+ "wagmi": "^2.0.0"
86
87
  },
87
88
  "peerDependenciesMeta": {
88
89
  "next": {
@@ -102,12 +103,13 @@
102
103
  "@gearbox-protocol/biome-config": "^1.0.2",
103
104
  "@gearbox-protocol/sdk": "*",
104
105
  "@tailwindcss/postcss": "^4.1.14",
106
+ "@tanstack/react-query": "^5.64.1",
105
107
  "@types/cross-spawn": "^6.0.6",
106
108
  "@types/luxon": "^3.4.2",
107
- "@types/react": "^19.2.4",
108
- "@types/react-dom": "^19.2.3",
109
- "@types/react-router-dom": "^5.3.3",
109
+ "@types/react": "^19.1.16",
110
+ "@types/react-dom": "^19.1.9",
110
111
  "autoprefixer": "^10.4.21",
112
+ "connectkit": "^1.9.1",
111
113
  "cross-spawn": "^7.0.6",
112
114
  "esbuild-fix-imports-plugin": "^1.0.22",
113
115
  "husky": "^9.1.7",
@@ -116,11 +118,15 @@
116
118
  "next": "15.5.3",
117
119
  "postcss": "^8.5.6",
118
120
  "postcss-cli": "^11.0.0",
121
+ "react": "^19.1.1",
122
+ "react-dom": "^19.1.1",
119
123
  "react-intl": "^6.7.4",
120
124
  "react-router-dom": "^7.9.6",
121
125
  "tailwindcss": "^4.1.14",
122
126
  "tsup": "^8.5.0",
123
- "typescript": "^5.9.3"
127
+ "typescript": "^5.9.3",
128
+ "viem": "^2.39.0",
129
+ "wagmi": "^2.19.4"
124
130
  },
125
131
  "commitlint": {
126
132
  "extends": [
@@ -132,17 +138,5 @@
132
138
  "biome check --no-errors-on-unmatched --write"
133
139
  ]
134
140
  },
135
- "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
136
- "pnpm": {
137
- "overrides": {
138
- "elliptic@>=4.0.0 <=6.5.6": ">=6.5.7",
139
- "elliptic@>=2.0.0 <=6.5.6": ">=6.5.7",
140
- "elliptic@>=5.2.1 <=6.5.6": ">=6.5.7",
141
- "elliptic@<6.5.6": ">=6.5.6",
142
- "elliptic@<=6.6.0": ">=6.6.1",
143
- "elliptic@<6.6.0": ">=6.6.0",
144
- "form-data@>=4.0.0 <4.0.4": ">=4.0.4",
145
- "sha.js@<=2.4.11": ">=2.4.12"
146
- }
147
- }
141
+ "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af"
148
142
  }