@gearbox-protocol/ui-kit 3.14.0-next.6 → 3.14.0-next.7
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),q=require("class-variance-authority"),de=require("react"),me=require("react-dom"),pe=require("../checkbox/checkbox.cjs");require("../checkbox/checkbox-labeled.cjs");const fe=require("../currency-button/currency-button.cjs"),he=require("../health-factor/health-factor.cjs"),xe=require("@fortawesome/free-solid-svg-icons"),ge=require("../icons/fa-icon.cjs"),be=require("../slider/slider.cjs");require("../slider/slider-context.cjs");const I=require("../typed-intl/index.cjs"),j=require("../../hooks/use-media-query.cjs"),v=require("../../test-ids/smart-number-input.cjs"),ve=require("../../utils/bn-to-input-view.cjs");require("@gearbox-protocol/sdk");const ye=require("../../utils/parse-input-to-bn.cjs"),y=require("../../utils/cn.cjs");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../utils/z-index.cjs");const we=require("./balance-indicator.cjs");function Ne(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(r,o,a.get?a:{enumerable:!0,get:()=>n[o]})}}return r.default=n,Object.freeze(r)}const c=Ne(de),Ie=q.cva("relative w-full text-foreground bg-gray-20 border border-gray-30 transition-[background-color] duration-100 ease-linear [&:hover]:bg-gray-30 [&:hover]:border-gray-40 data-[active=true]:bg-gray-30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-primary data-[active=true]:outline-offset-[-2px] data-[disabled=true]:cursor-not-allowed",{variants:{size:{sm:"px-3 py-[7px] min-h-[60px] rounded-[8px]",md:"pl-4 pr-3 py-[10px] min-h-[82px] rounded-lg"}},defaultVariants:{size:"md"}}),je=q.cva("font-medium text-foreground",{variants:{size:{sm:"text-xs",md:"text-sm"}},defaultVariants:{size:"md"}}),ke=q.cva("w-full p-0 bg-transparent border-none outline-none text-foreground placeholder:text-secondary-foreground focus:outline-none",{variants:{size:{sm:"text-[18px]! leading-[21px]!",md:"text-[28px]! leading-[33px]!"}},defaultVariants:{size:"md"}});function k(n){return Math.round(n*100)}function qe(n){return n/100}function Me(n,r){if(!r)return null;const o=parseFloat(n.replace(",",".")||"0");if(!Number.isFinite(o)||o===0)return null;const a=o*r,x=Math.abs(a)<100;try{return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:x?2:0,maximumFractionDigits:x?2:0}).format(a)}catch{return"$0"}}const S=c.forwardRef(({amount:n,token:r,label:o,maxAmount:a,maxAmountLimit:h,maxButtonLabel:x,chainId:L,network:B,maxButton:V=!0,disabled:d=!1,active:D=!1,size:R="md",symbolMaxLength:E,tokenOptions:w,multiSelectMode:O=!1,onSetAmount:p,onShowSelectDialog:M,onRemove:_,onFocus:P,onBlur:$,usdPrice:C,hfSlider:l},H)=>{const{formatMessage:U}=I.useIntlTyped(),W=c.useId(),T=r?.decimals??18,Q=e=>{const s=e.target.value,[i,u]=ye.parseInputToBN(s,T);i===null||u===null||p&&p(i,u)},X=()=>{if(p){const e=a&&h&&a>h?h:a||0n,s=ve.bnToInputView(e,T);p(e,s)}},[G,z]=c.useState(!1),J=()=>{z(!0),P?.()},K=()=>{z(!1),$?.()},Y=j.useIsMobile(),Z=l?.min??1,A=l?.max??3,ee=l?.step??.01,te=Math.max(1,Math.round(1/ee)),f=R??"md",ne=Y,se=j.useIsTablet(),re=j.useIsDesktop(),ae=E??(ne?20:se?30:re?22:30),[m,N]=c.useState(!1),g=c.useRef(null),F=c.useRef(null),[oe,ce]=c.useState({});c.useLayoutEffect(()=>{if(!m||!g.current)return;const e=()=>{const s=g.current?.getBoundingClientRect();s&&ce({position:"fixed",top:s.bottom+4,right:window.innerWidth-s.right,minWidth:s.width,zIndex:9999})};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[m]),c.useEffect(()=>{if(!m)return;const e=s=>{const i=s.target,u=g.current?.contains(i),ue=F.current?.contains(i);!u&&!ue&&N(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[m]);const b=!!(w&&w.length>0),ie=!d&&b?()=>N(e=>!e):M,le=!!(r||M||b);return t.jsxs("div",{ref:H,className:Ie({size:f}),"data-testid":v.smartNumberInputTestIds.root,"data-active":G,"data-disabled":d,children:[_&&t.jsx("div",{className:"absolute top-0 right-0 flex h-5 w-5 translate-x-1/2 -translate-y-1/2 items-center justify-center","data-testid":v.smartNumberInputTestIds.close,children:t.jsx("button",{type:"button",onClick:_,className:"flex h-5 w-5 items-center justify-center rounded-full bg-muted hover:bg-muted/80 text-muted-foreground",children:t.jsx(ge.FaIcon,{icon:xe.faXmark,className:"size-3"})})}),t.jsxs("div",{className:"mb-2 flex justify-between text-sm leading-[120%]",children:[t.jsx("span",{className:y.cn(je({size:f}),"grow shrink-0 basis-0"),"data-testid":v.smartNumberInputTestIds.label,children:o??t.jsx(I.FormattedMessageTyped,{messageId:"components.smartNumberInput.amountLabel"})}),l!==void 0?t.jsxs("div",{className:"ml-auto flex w-1/2 min-w-0 items-center gap-1",children:[t.jsx("span",{className:"shrink-0 text-xs text-secondary-foreground",children:"HF"}),t.jsx("div",{className:"min-w-0 flex-1 [&>div]:px-0 [&>div]:pb-0",children:t.jsx(be.Slider,{from:k(Z),to:k(A),value:k(l.value),precision:te,markerStep:0,epsilon:0,onChangeValue:e=>l.onChange(qe(e))})}),t.jsx(he.HealthFactor,{value:Math.round(l.value*1e4),debt:1n,decimals:2,className:"shrink-0 text-xs tabular-nums"})]}):a!==void 0&&r&&t.jsx(we.BalanceIndicator,{title:x,token:r,maxAmount:a,size:f,disabled:d,maxButton:V,onMaxButtonClick:X})]}),t.jsxs("div",{className:y.cn("flex w-full max-w-full shrink-0 basis-full items-center"),children:[t.jsx("div",{className:"mr-3 grow shrink-0 basis-0",children:t.jsx("input",{type:"text",inputMode:"decimal",autoComplete:"off",autoCorrect:"off",spellCheck:"false",pattern:"^[0-9]*[.,]?[0-9]*$",placeholder:"0",value:n,onChange:Q,onFocus:J,onBlur:K,disabled:d||!p,className:y.cn(ke({size:f}),d&&"cursor-not-allowed"),"data-testid":v.smartNumberInputTestIds.input,minLength:1,maxLength:79,title:U({messageId:"components.smartNumberInput.inputTitle"})})}),le?t.jsxs("div",{ref:g,className:"shrink-0",children:[t.jsx(fe.CurrencyButton,{active:b?m:D,size:f,disabled:d,token:r,showSelectDialog:ie,chainId:L,network:B,maxLength:ae,children:r?.symbol??t.jsx(I.FormattedMessageTyped,{messageId:"components.smartNumberInput.selectToken"})}),b&&m&&me.createPortal(t.jsx("div",{ref:F,style:oe,className:"overflow-hidden rounded-lg border border-gray-30 bg-gray-20 shadow-lg",children:w?.map((e,s)=>{const i=`${W}-${s}`,u="flex w-full min-w-0 items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-gray-30";return O?t.jsxs("div",{className:u,children:[t.jsx(pe.Checkbox,{id:i,checked:!!e.checked,color:"secondary",size:"md",className:"shrink-0",onCheckedChange:()=>e.onSelect()}),t.jsxs("label",{htmlFor:i,className:"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left",children:[e.icon?t.jsx("span",{className:"inline-flex shrink-0 items-center",children:e.icon}):null,t.jsx("span",{className:"truncate",children:e.label})]})]},s):t.jsxs("button",{type:"button",onClick:()=>{e.onSelect(),N(!1)},className:y.cn(u,"text-left"),children:[e.icon?t.jsx("span",{className:"inline-flex shrink-0 items-center",children:e.icon}):null,t.jsx("span",{className:"truncate",children:e.label})]},s)})}),document.body)]}):null]}),C!==void 0&&(()=>{const e=Me(n,C);return e?t.jsx("div",{className:"mt-1 text-xs leading-[130%] text-secondary-foreground",children:e}):null})()]})});S.displayName="SmartNumberInput";exports.SmartNumberInput=S;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { cva as k } from "class-variance-authority";
|
|
3
|
-
import * as
|
|
3
|
+
import * as s from "react";
|
|
4
4
|
import { createPortal as de } from "react-dom";
|
|
5
5
|
import { Checkbox as ue } from "../checkbox/checkbox.js";
|
|
6
6
|
import "../checkbox/checkbox-labeled.js";
|
|
@@ -53,16 +53,17 @@ const Ce = k(
|
|
|
53
53
|
defaultVariants: { size: "md" }
|
|
54
54
|
}
|
|
55
55
|
);
|
|
56
|
-
function C(
|
|
57
|
-
return Math.round(
|
|
56
|
+
function C(a) {
|
|
57
|
+
return Math.round(a * 100);
|
|
58
58
|
}
|
|
59
|
-
function ze(
|
|
60
|
-
return
|
|
59
|
+
function ze(a) {
|
|
60
|
+
return a / 100;
|
|
61
61
|
}
|
|
62
|
-
function Fe(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
function Fe(a, r) {
|
|
63
|
+
if (!r) return null;
|
|
64
|
+
const f = parseFloat(a.replace(",", ".") || "0");
|
|
65
|
+
if (!Number.isFinite(f) || f === 0) return null;
|
|
66
|
+
const o = f * r, x = Math.abs(o) < 100;
|
|
66
67
|
try {
|
|
67
68
|
return new Intl.NumberFormat("en-US", {
|
|
68
69
|
style: "currency",
|
|
@@ -74,10 +75,10 @@ function Fe(s, a) {
|
|
|
74
75
|
return "$0";
|
|
75
76
|
}
|
|
76
77
|
}
|
|
77
|
-
const Le =
|
|
78
|
+
const Le = s.forwardRef(
|
|
78
79
|
({
|
|
79
|
-
amount:
|
|
80
|
-
token:
|
|
80
|
+
amount: a,
|
|
81
|
+
token: r,
|
|
81
82
|
label: f,
|
|
82
83
|
maxAmount: o,
|
|
83
84
|
maxAmountLimit: g,
|
|
@@ -95,11 +96,11 @@ const Le = r.forwardRef(
|
|
|
95
96
|
onShowSelectDialog: M,
|
|
96
97
|
onRemove: z,
|
|
97
98
|
onFocus: U,
|
|
98
|
-
onBlur:
|
|
99
|
+
onBlur: W,
|
|
99
100
|
usdPrice: F,
|
|
100
101
|
hfSlider: c
|
|
101
|
-
},
|
|
102
|
-
const { formatMessage:
|
|
102
|
+
}, O) => {
|
|
103
|
+
const { formatMessage: P } = xe(), X = s.useId(), L = r?.decimals ?? 18, q = (e) => {
|
|
103
104
|
const n = e.target.value, [i, d] = Ne(n, L);
|
|
104
105
|
i === null || d === null || p && p(i, d);
|
|
105
106
|
}, G = () => {
|
|
@@ -107,12 +108,12 @@ const Le = r.forwardRef(
|
|
|
107
108
|
const e = o && g && o > g ? g : o || 0n, n = ye(e, L);
|
|
108
109
|
p(e, n);
|
|
109
110
|
}
|
|
110
|
-
}, [J, T] =
|
|
111
|
+
}, [J, T] = s.useState(!1), K = () => {
|
|
111
112
|
T(!0), U?.();
|
|
112
113
|
}, Q = () => {
|
|
113
|
-
T(!1),
|
|
114
|
-
}, Y = be(), Z = c?.min ?? 1, _ = c?.max ?? 3, A = c?.step ?? 0.01, ee = Math.max(1, Math.round(1 / A)), h = j ?? "md", te = Y, ne = ve(), re = we(), se = $ ?? (te ? 20 : ne ? 30 : re ? 22 : 30), [m, I] =
|
|
115
|
-
|
|
114
|
+
T(!1), W?.();
|
|
115
|
+
}, Y = be(), Z = c?.min ?? 1, _ = c?.max ?? 3, A = c?.step ?? 0.01, ee = Math.max(1, Math.round(1 / A)), h = j ?? "md", te = Y, ne = ve(), re = we(), se = $ ?? (te ? 20 : ne ? 30 : re ? 22 : 30), [m, I] = s.useState(!1), b = s.useRef(null), V = s.useRef(null), [ae, oe] = s.useState({});
|
|
116
|
+
s.useLayoutEffect(() => {
|
|
116
117
|
if (!m || !b.current) return;
|
|
117
118
|
const e = () => {
|
|
118
119
|
const n = b.current?.getBoundingClientRect();
|
|
@@ -127,7 +128,7 @@ const Le = r.forwardRef(
|
|
|
127
128
|
return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
|
|
128
129
|
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
|
|
129
130
|
};
|
|
130
|
-
}, [m]),
|
|
131
|
+
}, [m]), s.useEffect(() => {
|
|
131
132
|
if (!m) return;
|
|
132
133
|
const e = (n) => {
|
|
133
134
|
const i = n.target, d = b.current?.contains(i), ce = V.current?.contains(i);
|
|
@@ -135,11 +136,11 @@ const Le = r.forwardRef(
|
|
|
135
136
|
};
|
|
136
137
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
137
138
|
}, [m]);
|
|
138
|
-
const v = !!(N && N.length > 0), ie = !u && v ? () => I((e) => !e) : M, le = !!(
|
|
139
|
+
const v = !!(N && N.length > 0), ie = !u && v ? () => I((e) => !e) : M, le = !!(r || M || v);
|
|
139
140
|
return /* @__PURE__ */ l(
|
|
140
141
|
"div",
|
|
141
142
|
{
|
|
142
|
-
ref:
|
|
143
|
+
ref: O,
|
|
143
144
|
className: Ce({ size: h }),
|
|
144
145
|
"data-testid": w.root,
|
|
145
146
|
"data-active": J,
|
|
@@ -196,11 +197,11 @@ const Le = r.forwardRef(
|
|
|
196
197
|
className: "shrink-0 text-xs tabular-nums"
|
|
197
198
|
}
|
|
198
199
|
)
|
|
199
|
-
] }) : o !== void 0 &&
|
|
200
|
+
] }) : o !== void 0 && r && /* @__PURE__ */ t(
|
|
200
201
|
Ie,
|
|
201
202
|
{
|
|
202
203
|
title: x,
|
|
203
|
-
token:
|
|
204
|
+
token: r,
|
|
204
205
|
maxAmount: o,
|
|
205
206
|
size: h,
|
|
206
207
|
disabled: u,
|
|
@@ -226,7 +227,7 @@ const Le = r.forwardRef(
|
|
|
226
227
|
spellCheck: "false",
|
|
227
228
|
pattern: "^[0-9]*[.,]?[0-9]*$",
|
|
228
229
|
placeholder: "0",
|
|
229
|
-
value:
|
|
230
|
+
value: a,
|
|
230
231
|
onChange: q,
|
|
231
232
|
onFocus: K,
|
|
232
233
|
onBlur: Q,
|
|
@@ -238,7 +239,7 @@ const Le = r.forwardRef(
|
|
|
238
239
|
"data-testid": w.input,
|
|
239
240
|
minLength: 1,
|
|
240
241
|
maxLength: 79,
|
|
241
|
-
title:
|
|
242
|
+
title: P({
|
|
242
243
|
messageId: "components.smartNumberInput.inputTitle"
|
|
243
244
|
})
|
|
244
245
|
}
|
|
@@ -250,12 +251,12 @@ const Le = r.forwardRef(
|
|
|
250
251
|
active: v ? m : D,
|
|
251
252
|
size: h,
|
|
252
253
|
disabled: u,
|
|
253
|
-
token:
|
|
254
|
+
token: r,
|
|
254
255
|
showSelectDialog: ie,
|
|
255
256
|
chainId: S,
|
|
256
257
|
network: E,
|
|
257
258
|
maxLength: se,
|
|
258
|
-
children:
|
|
259
|
+
children: r?.symbol ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.selectToken" })
|
|
259
260
|
}
|
|
260
261
|
),
|
|
261
262
|
v && m && de(
|
|
@@ -321,7 +322,10 @@ const Le = r.forwardRef(
|
|
|
321
322
|
]
|
|
322
323
|
}
|
|
323
324
|
),
|
|
324
|
-
F !== void 0 &&
|
|
325
|
+
F !== void 0 && (() => {
|
|
326
|
+
const e = Fe(a, F);
|
|
327
|
+
return e ? /* @__PURE__ */ t("div", { className: "mt-1 text-xs leading-[130%] text-secondary-foreground", children: e }) : null;
|
|
328
|
+
})()
|
|
325
329
|
]
|
|
326
330
|
}
|
|
327
331
|
);
|