@gearbox-protocol/permissionless-ui 1.17.3 → 1.17.4

package/dist/cjs/components/assets-ratio/assets-ratio.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),s=require("@gearbox-protocol/sdk"),R=require("react"),i=require("../../utils/cn.cjs");require("sonner");function f(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const N=f(R),E=e=>e.reduce((r,t)=>r+t.balanceInUSD,0n),C={0:"bg-[#4976FE]",1:"bg-[#FFE55A]",2:"bg-[#CA5AFF]"},A="bg-[#5ABAFF]";function p({assets:e,className:r}){const[t,c]=N.useMemo(()=>{const o=e.slice(0,3),n=E(e),l=E(e.slice(3)),b=o.map(m=>n>0?Number(m.balanceInUSD*s.PERCENTAGE_FACTOR*s.PERCENTAGE_DECIMALS/n)/Number(s.PERCENTAGE_FACTOR):Number(s.PERCENTAGE_FACTOR)),d=n>0n?Number(l*s.PERCENTAGE_FACTOR*s.PERCENTAGE_DECIMALS/n)/Number(s.PERCENTAGE_FACTOR):0;return[b,d]},[e]),a=c>0;return u.jsxs("span",{className:i.cn("relative inline-flex overflow-hidden w-full h-[10px] bg-muted border-2 border-muted rounded-[20px]",r),children:[t.map((o,n,l)=>u.jsx("span",{className:i.cn("relative inline-flex h-full",C[n]||A,!a&&n===l.length-1?"":"border-r-2 border-muted"),style:{width:`${o}%`}},`${o}-${n}-${e.length}`)),a&&u.jsx("span",{className:i.cn("relative inline-flex h-full",A),style:{width:`${c}%`}})]})}exports.AssetsRatio=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),i=require("@gearbox-protocol/sdk"),h=require("react"),T=require("../tooltip/tooltip.cjs"),N=require("../../utils/cn.cjs");require("sonner");function j(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const O=j(h),R=e=>e.reduce((n,o)=>n+o.balanceInUSD,0n),P={0:"bg-[#4976FE]",1:"bg-[#FFE55A]",2:"bg-[#CA5AFF]"},g="bg-[#5ABAFF]",c=4;function F(e){const n=e.filter(t=>t>0);if(n.length===0)return e;const o=n.length*c;if(e.reduce((t,s)=>t+s,0)===0||!n.some(t=>t<c))return e;const E=100-o,l=n.filter(t=>t>c).reduce((t,s)=>t+s-c,0);return e.map(t=>{if(t===0)return 0;if(t<c)return c;if(l===0)return t;const s=t-c;return c+s/l*E})}function S({assets:e,labels:n,className:o}){const[a,b]=O.useMemo(()=>{const d=e.slice(0,3),r=R(e),m=R(e.slice(3)),p=d.map(_=>r>0?Number(_.balanceInUSD*i.PERCENTAGE_FACTOR*i.PERCENTAGE_DECIMALS/r)/Number(i.PERCENTAGE_FACTOR):Number(i.PERCENTAGE_FACTOR)),A=r>0n?Number(m*i.PERCENTAGE_FACTOR*i.PERCENTAGE_DECIMALS/r)/Number(i.PERCENTAGE_FACTOR):0,f=[...p,A],C=F(f);return[C.slice(0,3),C[3]||0]},[e]),E=b>0,l=n?.slice(3),t=l&&l.length>0?l.join(", "):void 0,s=(d,r,m,p,A)=>{const f=u.jsx("span",{className:N.cn("relative inline-flex h-full",m,p?"border-r-2 border-muted":""),style:{width:`${d}%`}});return A?u.jsxs(T.Tooltip,{children:[u.jsx(T.TooltipTrigger,{asChild:!0,children:f}),u.jsx(T.TooltipContent,{children:A})]},`tooltip-${r}-${e.length}`):f};return u.jsx(T.TooltipProvider,{children:u.jsxs("span",{className:N.cn("relative inline-flex overflow-hidden w-full h-[10px] bg-muted border-2 border-muted rounded-[20px]",o),children:[a.map((d,r,m)=>s(d,r,P[r]||g,E||r!==m.length-1,n?.[r])),E&&s(b,3,g,!1,t)]})})}exports.AssetsRatio=S;

package/dist/cjs/components/graph/graph.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),me=require("lightweight-charts"),i=require("react"),he=require("../../hooks/use-media-query.cjs"),se=require("../../utils/cn.cjs"),I=require("../../utils/colors.cjs"),$=require("./default-config.cjs"),ee=require("./formatters.cjs"),pe=require("./graph-current-value.cjs"),be=require("./graph-tooltip.cjs"),ve=require("./plugins/vertical-line.cjs");function Ce(e){const L=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const h in e)if(h!=="default"){const _=Object.getOwnPropertyDescriptor(e,h);Object.defineProperty(L,h,_.get?_:{enumerable:!0,get:()=>e[h]})}}return L.default=e,Object.freeze(L)}const te=Ce(i),B=[{line:"#02c39a",top:"rgba(2, 195, 154, 0.56)",bottom:"rgba(2, 195, 154, 0.04)"},{line:"#3b82f6",top:"rgba(59, 130, 246, 0.56)",bottom:"rgba(59, 130, 246, 0.04)"},{line:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 0.04)"},{line:"#8b5cf6",top:"rgba(139, 92, 246, 0.56)",bottom:"rgba(139, 92, 246, 0.04)"},{line:"#ec4899",top:"rgba(236, 72, 153, 0.56)",bottom:"rgba(236, 72, 153, 0.04)"},{line:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"}];function Se({series:e,className:L,showLegend:h=!1,onUnselectSeries:_,xMeasureUnit:P="time",yMeasureUnit:k="token",optionsOverrides:A,verticalLineOptions:D}){const S=i.useRef(null),x=i.useRef(new Map),X=i.useRef(!1),oe=i.useRef(new Set),re=i.useRef(null),ne=i.useRef(!0),M=i.useRef(null),W=i.useRef(null),E=he.useIsMobile(),V=te.useMemo(()=>e.flatMap(t=>t.data),[e]),ce=te.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[ae,Y]=i.useState(()=>{if(!ce)return;const t=new Map;for(const n of e)n.data.length>0&&t.set(n.label,n.data[n.data.length-1]);return t}),[le,j]=i.useState(null);i.useEffect(()=>{const t=()=>{if(S.current&&M.current){const u=M.current.clientWidth,a=M.current.clientHeight;S.current.resize(u,a),S.current.timeScale().fitContent()}},n=M.current,l=n?new ResizeObserver(t):null;return n&&l?.observe(n),()=>{n&&l?.unobserve(n)}},[]),i.useEffect(()=>{if(!W.current||X.current)return;const t=$.getDefaultOptions(),n=I.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),l=me.createChart(W.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!E,textColor:n},...A});return S.current=l,X.current=!0,()=>{l.remove(),S.current=null,X.current=!1,x.current.clear()}},[E,A]),i.useEffect(()=>{const t=S.current;if(!t||e.length===0)return;const n=P==="time"?ee.getXFormatter(P,V):ee.getXFormatter(P),l=ee.getYFormatter(k),u=$.getDefaultOptions();t.applyOptions({localization:{...u.localization||{},timeFormatter:n?(o=>n(parseFloat(o),void 0)):void 0},timeScale:{...u.timeScale||{},tickMarkFormatter:n?(o=>n(parseFloat(o),void 0)):void 0,minBarSpacing:0}});const g=(V.length>0?Math.min(...V.map(o=>o.value)):0)<0,R=V.some(o=>o.value===0),T=!g&&R,s=e.length>1,F=s||E,y=I.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...u.rightPriceScale||{},visible:!E,textColor:y,...T&&{scaleMargins:{top:.3,bottom:0}}}});const b=new Set(x.current.keys()),c=new Set(e.map(o=>o.label));for(const o of b)if(!c.has(o)){const r=x.current.get(o);r&&(t.removeSeries(r),x.current.delete(o))}const v=$.getDefaultSeries(),f=[];let C=0;for(let o=0;o<e.length;o++){const r=e[o],K=B[o%B.length],z=r.color||K.line;let N,O;if(r.color)if(r.topColor&&r.bottomColor)N=r.topColor,O=r.bottomColor;else if(r.topColor){const d=I.generateColorsFromBase(z);N=r.topColor,O=d.bottomColor}else if(r.bottomColor)N=I.generateColorsFromBase(z).topColor,O=r.bottomColor;else{const d=I.generateColorsFromBase(z);N=d.topColor,O=d.bottomColor}else N=r.topColor||K.top,O=r.bottomColor||K.bottom;if(r.data.length===0){const d=x.current.get(r.label);d&&(t.removeSeries(d),x.current.delete(r.label));continue}const fe=(r.data.length>0?Math.min(...r.data.map(d=>d.value)):0)<0,ge=r.data.some(d=>d.value===0),de=!fe&&ge,U=s?C===0?void 0:`scale-${C}`:void 0;s&&f.push({priceScaleId:U||"right",shouldPreventNegativeAxis:de,seriesIndex:C});let q=x.current.get(r.label);q?(q.applyOptions({lineColor:z,topColor:N,bottomColor:O,priceScaleId:U}),q.setData(r.data)):(q=t.addAreaSeries({...v,lineColor:z,topColor:N,bottomColor:O,priceScaleId:U,priceFormat:{type:"custom",formatter:d=>l(parseFloat(d.toString()),void 0,"short")}}),q.setData(r.data),x.current.set(r.label,q)),C++}if(s&&f.length>0)for(const o of f)try{const r=t.priceScale(o.priceScaleId);r&&r.applyOptions({visible:!F,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...o.shouldPreventNegativeAxis&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:y})}catch(r){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,r)}let p=null;if(V.length>0){const o=V.map(r=>typeof r.time=="number"?r.time:Number(r.time));p={from:Math.min(...o),to:Math.max(...o)}}const w=new Set(e.map(o=>o.label)),G=oe.current,Q=w.size!==G.size||[...w].some(o=>!G.has(o)),H=re.current,ue=p&&H&&(p.from!==H.from||p.to!==H.to);(ne.current||Q||ue||!H||E)&&(requestAnimationFrame(()=>{S.current&&S.current.timeScale().fitContent()}),ne.current=!1),oe.current=w,re.current=p;const J=new Map;for(const o of e)o.data.length>0&&J.set(o.label,o.data[o.data.length-1]);Y(J.size>0?J:void 0)},[e,V,P,k,E]),i.useEffect(()=>{const t=S.current;if(!t||e.length===0)return;const n=e.length===1;let l;for(const a of e)if(a.data.length>0){l=a.data[a.data.length-1].time;break}if(!l)return;const u=a=>{const{time:g=l,seriesData:R,point:T}=a||{},s=Array.from(x.current.values());if(!T||!g){const b=new Map;for(const c of e)c.data.length>0&&b.set(c.label,c.data[c.data.length-1]);if(Y(b.size>0?b:void 0),n)j(null);else if(s[0]&&l){const v=t.timeScale().timeToCoordinate(l),f=e[0];if(f.data.length>0){const C=f.data[f.data.length-1].value,p=s[0].priceToCoordinate(C);v!==null&&p!==null&&j({x:v,y:p})}}return}const F=new Map;let y;for(let b=0;b<e.length;b++){const c=e[b],v=s[b];if(!v)continue;const f=R?.get(v),C=f&&"value"in f?f.value:void 0,p=c.data[c.data.length-1],w=C!==void 0?C:p?.value??0;b===0&&(y=w),F.set(c.label,{value:w,time:g})}if(Y(F),y!==void 0&&s[0]){const c=t.timeScale().timeToCoordinate(g),v=s[0].priceToCoordinate(y);if(c!==null&&v!==null){const f=M.current;if(f){const C=f.querySelector(".LightweightChart");if(C){const p=C.getBoundingClientRect(),w=f.getBoundingClientRect(),G=c+(p.left-w.left),Q=v+(p.top-w.top);j({x:G,y:Q})}else j({x:c,y:v})}else j({x:c,y:v})}else j(null)}else j(null)};return t.subscribeCrosshairMove(u),n||requestAnimationFrame(()=>{const a=Array.from(x.current.values());if(a[0]&&l&&e[0]?.data.length>0){const R=t.timeScale().timeToCoordinate(l),T=e[0].data[e[0].data.length-1].value,s=a[0].priceToCoordinate(T);R!==null&&s!==null&&j({x:R,y:s})}}),()=>{t.unsubscribeCrosshairMove(u)}},[e]),i.useEffect(()=>{const t=S.current;if(!t||e.length===0)return;const n=t.timeScale(),l=Math.max(...e.map(a=>a.data.length)),u=()=>{if(l===0)return;const a=n.getVisibleLogicalRange();if(!a)return;const g={from:0,to:l-1},R=typeof a.from=="number"?a.from:0,T=typeof a.to=="number"?a.to:l-1,s=.01;let F=!1;const y={...a};R<g.from-s&&(y.from=g.from,F=!0),T>g.to+s&&(y.to=g.to,F=!0),F&&n.setVisibleLogicalRange(y)};return n.subscribeVisibleLogicalRangeChange(u),()=>{n.unsubscribeVisibleLogicalRangeChange(u)}},[e]),i.useEffect(()=>{const t=S.current,n=Array.from(x.current.values()),l=[];if(t&&n.length>0&&D){const u=$.getDefaultVerticalLine(),a=n[0];for(const g of D){const R=new ve.VertLine(t,a,g.xCoordinate,{...u,...g.options||{}});a.attachPrimitive(R),l.push(R)}}return()=>{if(n.length>0){const u=n[0];for(const a of l)u.detachPrimitive(a)}}},[D]);const Z=e.length===1,ie=te.useMemo(()=>{if(Z&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[Z,e]);return m.jsxs("div",{ref:M,className:se.cn("relative z-[1] w-full h-full overflow-hidden p-0",L),children:[Z&&ie&&m.jsx(pe.GraphCurrentValue,{point:ie,xMeasureUnit:P,yMeasureUnit:k}),ae&&le&&m.jsx(be.GraphTooltip,{points:ae,xMeasureUnit:P,yMeasureUnit:k,series:e,position:le,containerRef:M}),h&&m.jsx(xe,{series:e,onUnselect:_}),m.jsx("div",{ref:W,className:"LightweightChart w-full h-full overflow-hidden"})]})}function xe({series:e,onUnselect:L}){return m.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((h,_)=>{const P=B[_%B.length],k=h.color||P.line,A=h.data.length===0;return m.jsxs("div",{className:se.cn("flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",A&&"opacity-50"),children:[m.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:k}}),m.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[h.label,A&&" (no data)"]}),L&&m.jsx("button",{type:"button",onClick:D=>{D.stopPropagation(),L(h.label)},className:"ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer","aria-label":`Remove ${h.label}`,children:m.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-muted-foreground hover:text-foreground","aria-hidden":"true",children:[m.jsx("title",{children:"Close"}),m.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),m.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},h.label)})})}exports.DEFAULT_SERIES_COLORS=B;exports.Graph=Se;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),fe=require("lightweight-charts"),s=require("react"),ge=require("../../hooks/use-media-query.cjs"),le=require("../../utils/cn.cjs"),B=require("../../utils/colors.cjs"),H=require("./default-config.cjs"),U=require("./formatters.cjs"),de=require("./graph-current-value.cjs"),he=require("./graph-tooltip.cjs"),me=require("./plugins/vertical-line.cjs");function pe(e){const w=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const m in e)if(m!=="default"){const T=Object.getOwnPropertyDescriptor(e,m);Object.defineProperty(w,m,T.get?T:{enumerable:!0,get:()=>e[m]})}}return w.default=e,Object.freeze(w)}const ee=pe(s),G=[{line:"#02c39a",top:"rgba(2, 195, 154, 0.56)",bottom:"rgba(2, 195, 154, 0.04)"},{line:"#3b82f6",top:"rgba(59, 130, 246, 0.56)",bottom:"rgba(59, 130, 246, 0.04)"},{line:"#f59e0b",top:"rgba(245, 158, 11, 0.56)",bottom:"rgba(245, 158, 11, 0.04)"},{line:"#ef4444",top:"rgba(239, 68, 68, 0.56)",bottom:"rgba(239, 68, 68, 0.04)"},{line:"#8b5cf6",top:"rgba(139, 92, 246, 0.56)",bottom:"rgba(139, 92, 246, 0.04)"},{line:"#ec4899",top:"rgba(236, 72, 153, 0.56)",bottom:"rgba(236, 72, 153, 0.04)"},{line:"#10b981",top:"rgba(16, 185, 129, 0.56)",bottom:"rgba(16, 185, 129, 0.04)"},{line:"#06b6d4",top:"rgba(6, 182, 212, 0.56)",bottom:"rgba(6, 182, 212, 0.04)"}];function be({series:e,className:w,showLegend:m=!1,onUnselectSeries:T,xMeasureUnit:P="time",yMeasureUnit:k="token",optionsOverrides:A,verticalLineOptions:D}){const y=s.useRef(null),v=s.useRef(new Map),$=s.useRef(!1),X=s.useRef(new Set),te=s.useRef(0),oe=s.useRef(!0),V=s.useRef(null),W=s.useRef(null),E=ge.useIsMobile(),M=ee.useMemo(()=>e.flatMap(t=>t.data),[e]),se=ee.useMemo(()=>{if(e.length>0){const t=e[e.length-1];if(t.data.length>0)return t.data[t.data.length-1]}},[e]),[re,Y]=s.useState(()=>{if(!se)return;const t=new Map;for(const r of e)r.data.length>0&&t.set(r.label,r.data[r.data.length-1]);return t}),[ne,L]=s.useState(null);s.useEffect(()=>{const t=()=>{if(y.current&&V.current){const u=V.current.clientWidth,a=V.current.clientHeight;y.current.resize(u,a),y.current.timeScale().fitContent()}},r=V.current,l=r?new ResizeObserver(t):null;return r&&l?.observe(r),()=>{r&&l?.unobserve(r)}},[]),s.useEffect(()=>{if(!W.current||$.current)return;const t=H.getDefaultOptions(),r=B.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)"),l=fe.createChart(W.current,{...t,rightPriceScale:{...t.rightPriceScale||{},visible:!E,textColor:r},...A});return y.current=l,$.current=!0,()=>{l.remove(),y.current=null,$.current=!1,v.current.clear()}},[E,A]),s.useEffect(()=>{const t=y.current;if(!t||e.length===0)return;const r=P==="time"?U.getXFormatter(P,M):U.getXFormatter(P),l=U.getYFormatter(k),u=H.getDefaultOptions();t.applyOptions({localization:{...u.localization||{},timeFormatter:r?(o=>r(parseFloat(o),void 0)):void 0},timeScale:{...u.timeScale||{},tickMarkFormatter:r?(o=>r(parseFloat(o),void 0)):void 0,minBarSpacing:0}});const g=(M.length>0?Math.min(...M.map(o=>o.value)):0)<0,S=M.some(o=>o.value===0),F=!g&&S,i=e.length>1,j=i||E,R=B.resolveCSSColor("hsl(var(--foreground))","rgb(0, 0, 0)");t.applyOptions({rightPriceScale:{...u.rightPriceScale||{},visible:!E,textColor:R,...F&&{scaleMargins:{top:.3,bottom:0}}}});const p=new Set(v.current.keys()),c=new Set(e.map(o=>o.label));for(const o of p)if(!c.has(o)){const n=v.current.get(o);n&&(t.removeSeries(n),v.current.delete(o))}const b=H.getDefaultSeries(),f=[];let C=0;for(let o=0;o<e.length;o++){const n=e[o],J=G[o%G.length],I=n.color||J.line;let _,N;if(n.color)if(n.topColor&&n.bottomColor)_=n.topColor,N=n.bottomColor;else if(n.topColor){const d=B.generateColorsFromBase(I);_=n.topColor,N=d.bottomColor}else if(n.bottomColor)_=B.generateColorsFromBase(I).topColor,N=n.bottomColor;else{const d=B.generateColorsFromBase(I);_=d.topColor,N=d.bottomColor}else _=n.topColor||J.top,N=n.bottomColor||J.bottom;if(n.data.length===0){const d=v.current.get(n.label);d&&(t.removeSeries(d),v.current.delete(n.label));continue}const ie=(n.data.length>0?Math.min(...n.data.map(d=>d.value)):0)<0,ce=n.data.some(d=>d.value===0),ue=!ie&&ce,K=i?C===0?void 0:`scale-${C}`:void 0;i&&f.push({priceScaleId:K||"right",shouldPreventNegativeAxis:ue,seriesIndex:C});let q=v.current.get(n.label);q?(q.applyOptions({lineColor:I,topColor:_,bottomColor:N,priceScaleId:K}),q.setData(n.data)):(q=t.addAreaSeries({...b,lineColor:I,topColor:_,bottomColor:N,priceScaleId:K,priceFormat:{type:"custom",formatter:d=>l(parseFloat(d.toString()),void 0,"short")}}),q.setData(n.data),v.current.set(n.label,q)),C++}if(i&&f.length>0)for(const o of f)try{const n=t.priceScale(o.priceScaleId);n&&n.applyOptions({visible:!j,autoScale:!0,scaleMargins:{top:.1,bottom:.1,...o.shouldPreventNegativeAxis&&{top:.3,bottom:0}},alignLabels:!0,borderVisible:!0,borderColor:"rgba(224, 227, 235, 0.1)",entireTextOnly:!1,textColor:R})}catch(n){console.warn(`Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,n)}const x=new Set(e.map(o=>o.label)),O=x.size!==X.current.size||[...x].some(o=>!X.current.has(o)),Q=M.length!==te.current;(oe.current||O||Q||E)&&(t.timeScale().fitContent(),oe.current=!1),X.current=x,te.current=M.length;const z=new Map;for(const o of e)o.data.length>0&&z.set(o.label,o.data[o.data.length-1]);Y(z.size>0?z:void 0)},[e,M,P,k,E]),s.useEffect(()=>{const t=y.current;if(!t||e.length===0)return;const r=e.length===1;let l;for(const a of e)if(a.data.length>0){l=a.data[a.data.length-1].time;break}if(!l)return;const u=a=>{const{time:g=l,seriesData:S,point:F}=a||{},i=Array.from(v.current.values());if(!F||!g){const p=new Map;for(const c of e)c.data.length>0&&p.set(c.label,c.data[c.data.length-1]);if(Y(p.size>0?p:void 0),r)L(null);else if(i[0]&&l){const b=t.timeScale().timeToCoordinate(l),f=e[0];if(f.data.length>0){const C=f.data[f.data.length-1].value,x=i[0].priceToCoordinate(C);b!==null&&x!==null&&L({x:b,y:x})}}return}const j=new Map;let R;for(let p=0;p<e.length;p++){const c=e[p],b=i[p];if(!b)continue;const f=S?.get(b),C=f&&"value"in f?f.value:void 0,x=c.data[c.data.length-1],O=C!==void 0?C:x?.value??0;p===0&&(R=O),j.set(c.label,{value:O,time:g})}if(Y(j),R!==void 0&&i[0]){const c=t.timeScale().timeToCoordinate(g),b=i[0].priceToCoordinate(R);if(c!==null&&b!==null){const f=V.current;if(f){const C=f.querySelector(".LightweightChart");if(C){const x=C.getBoundingClientRect(),O=f.getBoundingClientRect(),Q=c+(x.left-O.left),z=b+(x.top-O.top);L({x:Q,y:z})}else L({x:c,y:b})}else L({x:c,y:b})}else L(null)}else L(null)};return t.subscribeCrosshairMove(u),r||requestAnimationFrame(()=>{const a=Array.from(v.current.values());if(a[0]&&l&&e[0]?.data.length>0){const S=t.timeScale().timeToCoordinate(l),F=e[0].data[e[0].data.length-1].value,i=a[0].priceToCoordinate(F);S!==null&&i!==null&&L({x:S,y:i})}}),()=>{t.unsubscribeCrosshairMove(u)}},[e]),s.useEffect(()=>{const t=y.current;if(!t||e.length===0)return;const r=t.timeScale(),l=Math.max(...e.map(a=>a.data.length)),u=()=>{if(l===0)return;const a=r.getVisibleLogicalRange();if(!a)return;const g={from:0,to:l-1},S=typeof a.from=="number"?a.from:0,F=typeof a.to=="number"?a.to:l-1,i=.01;let j=!1;const R={...a};S<g.from-i&&(R.from=g.from,j=!0),F>g.to+i&&(R.to=g.to,j=!0),j&&r.setVisibleLogicalRange(R)};return r.subscribeVisibleLogicalRangeChange(u),()=>{r.unsubscribeVisibleLogicalRangeChange(u)}},[e]),s.useEffect(()=>{const t=y.current,r=Array.from(v.current.values()),l=[];if(t&&r.length>0&&D){const u=H.getDefaultVerticalLine(),a=r[0];for(const g of D){const S=new me.VertLine(t,a,g.xCoordinate,{...u,...g.options||{}});a.attachPrimitive(S),l.push(S)}}return()=>{if(r.length>0){const u=r[0];for(const a of l)u.detachPrimitive(a)}}},[D]);const Z=e.length===1,ae=ee.useMemo(()=>{if(Z&&e.length>0){const t=e[0];if(t.data.length>0)return t.data[t.data.length-1]}},[Z,e]);return h.jsxs("div",{ref:V,className:le.cn("relative z-[1] w-full h-full overflow-hidden p-0",w),children:[Z&&ae&&h.jsx(de.GraphCurrentValue,{point:ae,xMeasureUnit:P,yMeasureUnit:k}),re&&ne&&h.jsx(he.GraphTooltip,{points:re,xMeasureUnit:P,yMeasureUnit:k,series:e,position:ne,containerRef:V}),m&&h.jsx(Ce,{series:e,onUnselect:T}),h.jsx("div",{ref:W,className:"LightweightChart w-full h-full overflow-hidden"})]})}function Ce({series:e,onUnselect:w}){return h.jsx("div",{className:"absolute top-0 left-2 z-[10] flex flex-wrap gap-2",children:e.map((m,T)=>{const P=G[T%G.length],k=m.color||P.line,A=m.data.length===0;return h.jsxs("div",{className:le.cn("flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",A&&"opacity-50"),children:[h.jsx("div",{className:"w-3 h-3 rounded-sm",style:{backgroundColor:k}}),h.jsxs("span",{className:"text-[10px] sm:text-xs font-medium text-foreground",children:[m.label,A&&" (no data)"]}),w&&h.jsx("button",{type:"button",onClick:D=>{D.stopPropagation(),w(m.label)},className:"ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer","aria-label":`Remove ${m.label}`,children:h.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-muted-foreground hover:text-foreground","aria-hidden":"true",children:[h.jsx("title",{children:"Close"}),h.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),h.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]},m.label)})})}exports.DEFAULT_SERIES_COLORS=G;exports.Graph=be;

package/dist/esm/components/assets-ratio/assets-ratio.js

@@ -1,56 +1,79 @@
-import { jsxs as N, jsx as a } from "react/jsx-runtime";
-import { PERCENTAGE_FACTOR as r, PERCENTAGE_DECIMALS as u } from "@gearbox-protocol/sdk";
-import * as E from "react";
-import { cn as m } from "../../utils/cn.js";
+import { jsx as h, jsxs as E } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as m, PERCENTAGE_DECIMALS as N } from "@gearbox-protocol/sdk";
+import * as P from "react";
+import { TooltipProvider as R, Tooltip as _, TooltipTrigger as v, TooltipContent as x } from "../tooltip/tooltip.js";
+import { cn as g } from "../../utils/cn.js";
 import "sonner";
-const b = (t) => t.reduce((s, o) => s + o.balanceInUSD, 0n), h = {
+const C = (e) => e.reduce((n, i) => n + i.balanceInUSD, 0n), D = {
   0: "bg-[#4976FE]",
   1: "bg-[#FFE55A]",
   2: "bg-[#CA5AFF]"
-}, p = "bg-[#5ABAFF]";
-function x({
-  assets: t,
-  className: s
+}, F = "bg-[#5ABAFF]", s = 4;
+function L(e) {
+  const n = e.filter((t) => t > 0);
+  if (n.length === 0) return e;
+  const i = n.length * s;
+  if (e.reduce((t, o) => t + o, 0) === 0 || !n.some((t) => t < s)) return e;
+  const d = 100 - i, c = n.filter((t) => t > s).reduce((t, o) => t + o - s, 0);
+  return e.map((t) => {
+    if (t === 0) return 0;
+    if (t < s) return s;
+    if (c === 0) return t;
+    const o = t - s;
+    return s + o / c * d;
+  });
+}
+function G({
+  assets: e,
+  labels: n,
+  className: i
 }) {
-  const [o, c] = E.useMemo(() => {
-    const n = t.slice(0, 3), e = b(t), l = b(t.slice(3)), A = n.map(
-      (f) => e > 0 ? Number(
-        f.balanceInUSD * r * u / e
-      ) / Number(r) : Number(r)
-    ), d = e > 0n ? Number(l * r * u / e) / Number(r) : 0;
-    return [A, d];
-  }, [t]), i = c > 0;
-  return /* @__PURE__ */ N(
+  const [p, A] = P.useMemo(() => {
+    const l = e.slice(0, 3), r = C(e), u = C(e.slice(3)), b = l.map(
+      (I) => r > 0 ? Number(
+        I.balanceInUSD * m * N / r
+      ) / Number(m) : Number(m)
+    ), a = r > 0n ? Number(u * m * N / r) / Number(m) : 0, f = [...b, a], T = L(f);
+    return [T.slice(0, 3), T[3] || 0];
+  }, [e]), d = A > 0, c = n?.slice(3), t = c && c.length > 0 ? c.join(", ") : void 0, o = (l, r, u, b, a) => {
+    const f = /* @__PURE__ */ h(
+      "span",
+      {
+        className: g(
+          "relative inline-flex h-full",
+          u,
+          b ? "border-r-2 border-muted" : ""
+        ),
+        style: { width: `${l}%` }
+      }
+    );
+    return a ? /* @__PURE__ */ E(_, { children: [
+      /* @__PURE__ */ h(v, { asChild: !0, children: f }),
+      /* @__PURE__ */ h(x, { children: a })
+    ] }, `tooltip-${r}-${e.length}`) : f;
+  };
+  return /* @__PURE__ */ h(R, { children: /* @__PURE__ */ E(
     "span",
     {
-      className: m(
+      className: g(
         "relative inline-flex overflow-hidden w-full h-[10px] bg-muted border-2 border-muted rounded-[20px]",
-        s
+        i
       ),
       children: [
-        o.map((n, e, l) => /* @__PURE__ */ a(
-          "span",
-          {
-            className: m(
-              "relative inline-flex h-full",
-              h[e] || p,
-              !i && e === l.length - 1 ? "" : "border-r-2 border-muted"
-            ),
-            style: { width: `${n}%` }
-          },
-          `${n}-${e}-${t.length}`
-        )),
-        i && /* @__PURE__ */ a(
-          "span",
-          {
-            className: m("relative inline-flex h-full", p),
-            style: { width: `${c}%` }
-          }
-        )
+        p.map(
+          (l, r, u) => o(
+            l,
+            r,
+            D[r] || F,
+            d || r !== u.length - 1,
+            n?.[r]
+          )
+        ),
+        d && o(A, 3, F, !1, t)
       ]
     }
-  );
+  ) });
 }
 export {
-  x as AssetsRatio
+  G as AssetsRatio
 };

package/dist/esm/components/graph/graph.js

@@ -1,16 +1,16 @@
-import { jsxs as $, jsx as x } from "react/jsx-runtime";
-import { createChart as vt } from "lightweight-charts";
-import * as tt from "react";
-import { useRef as V, useState as st, useEffect as D } from "react";
-import { useIsMobile as Ct } from "../../hooks/use-media-query.js";
-import { cn as dt } from "../../utils/cn.js";
-import { resolveCSSColor as ct, generateColorsFromBase as et } from "../../utils/colors.js";
-import { getDefaultOptions as ut, getDefaultSeries as St, getDefaultVerticalLine as xt } from "./default-config.js";
-import { getXFormatter as ft, getYFormatter as Rt } from "./formatters.js";
-import { GraphCurrentValue as wt } from "./graph-current-value.js";
-import { GraphTooltip as yt } from "./graph-tooltip.js";
-import { VertLine as Lt } from "./plugins/vertical-line.js";
-const q = [
+import { jsxs as H, jsx as S } from "react/jsx-runtime";
+import { createChart as ht } from "lightweight-charts";
+import * as U from "react";
+import { useRef as L, useState as lt, useEffect as D } from "react";
+import { useIsMobile as pt } from "../../hooks/use-media-query.js";
+import { cn as ut } from "../../utils/cn.js";
+import { resolveCSSColor as it, generateColorsFromBase as tt } from "../../utils/colors.js";
+import { getDefaultOptions as st, getDefaultSeries as bt, getDefaultVerticalLine as vt } from "./default-config.js";
+import { getXFormatter as ct, getYFormatter as Ct } from "./formatters.js";
+import { GraphCurrentValue as St } from "./graph-current-value.js";
+import { GraphTooltip as xt } from "./graph-tooltip.js";
+import { VertLine as wt } from "./plugins/vertical-line.js";
+const $ = [
   {
     line: "#02c39a",
     top: "rgba(2, 195, 154, 0.56)",
@@ -52,78 +52,78 @@ const q = [
     bottom: "rgba(6, 182, 212, 0.04)"
   }
 ];
-function Bt({
+function Dt({
   series: e,
-  className: B,
+  className: G,
   showLegend: w = !1,
-  onUnselectSeries: W,
+  onUnselectSeries: q,
   xMeasureUnit: y = "time",
   yMeasureUnit: A = "token",
   optionsOverrides: O,
   verticalLineOptions: E
 }) {
-  const b = V(null), v = V(/* @__PURE__ */ new Map()), X = V(!1), ot = V(/* @__PURE__ */ new Set()), rt = V(null), nt = V(!0), M = V(null), Y = V(null), z = Ct(), F = tt.useMemo(() => e.flatMap((t) => t.data), [e]), mt = tt.useMemo(() => {
+  const x = L(null), p = L(/* @__PURE__ */ new Map()), W = L(!1), X = L(/* @__PURE__ */ new Set()), et = L(0), ot = L(!0), V = L(null), Y = L(null), z = pt(), M = U.useMemo(() => e.flatMap((t) => t.data), [e]), ft = U.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [e]), [at, Z] = st(() => {
-    if (!mt) return;
+  }, [e]), [rt, Z] = lt(() => {
+    if (!ft) return;
     const t = /* @__PURE__ */ new Map();
-    for (const n of e)
-      n.data.length > 0 && t.set(n.label, n.data[n.data.length - 1]);
+    for (const r of e)
+      r.data.length > 0 && t.set(r.label, r.data[r.data.length - 1]);
     return t;
-  }), [lt, L] = st(null);
+  }), [nt, R] = lt(null);
   D(() => {
     const t = () => {
-      if (b.current && M.current) {
-        const c = M.current.clientWidth, a = M.current.clientHeight;
-        b.current.resize(c, a), b.current.timeScale().fitContent();
+      if (x.current && V.current) {
+        const c = V.current.clientWidth, a = V.current.clientHeight;
+        x.current.resize(c, a), x.current.timeScale().fitContent();
       }
-    }, n = M.current, l = n ? new ResizeObserver(t) : null;
-    return n && l?.observe(n), () => {
-      n && l?.unobserve(n);
+    }, r = V.current, l = r ? new ResizeObserver(t) : null;
+    return r && l?.observe(r), () => {
+      r && l?.unobserve(r);
     };
   }, []), D(() => {
-    if (!Y.current || X.current) return;
-    const t = ut(), n = ct(
+    if (!Y.current || W.current) return;
+    const t = st(), r = it(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), l = vt(Y.current, {
+    ), l = ht(Y.current, {
       ...t,
       rightPriceScale: {
         ...t.rightPriceScale || {},
         visible: !z,
-        textColor: n
+        textColor: r
       },
       ...O
     });
-    return b.current = l, X.current = !0, () => {
-      l.remove(), b.current = null, X.current = !1, v.current.clear();
+    return x.current = l, W.current = !0, () => {
+      l.remove(), x.current = null, W.current = !1, p.current.clear();
     };
   }, [z, O]), D(() => {
-    const t = b.current;
+    const t = x.current;
     if (!t || e.length === 0) return;
-    const n = y === "time" ? ft(y, F) : ft(y), l = Rt(A), c = ut();
+    const r = y === "time" ? ct(y, M) : ct(y), l = Ct(A), c = st();
     t.applyOptions({
       localization: {
         ...c.localization || {},
-        timeFormatter: n ? (
+        timeFormatter: r ? (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          ((o) => n(parseFloat(o), void 0))
+          ((o) => r(parseFloat(o), void 0))
         ) : void 0
       },
       timeScale: {
         ...c.timeScale || {},
-        tickMarkFormatter: n ? (
+        tickMarkFormatter: r ? (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          ((o) => n(parseFloat(o), void 0))
+          ((o) => r(parseFloat(o), void 0))
         ) : void 0,
         minBarSpacing: 0
       }
     });
-    const f = (F.length > 0 ? Math.min(...F.map((o) => o.value)) : 0) < 0, C = F.some((o) => o.value === 0), N = !f && C, i = e.length > 1, P = i || z, S = ct(
+    const f = (M.length > 0 ? Math.min(...M.map((o) => o.value)) : 0) < 0, b = M.some((o) => o.value === 0), F = !f && b, i = e.length > 1, P = i || z, C = it(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
@@ -131,8 +131,8 @@ function Bt({
       rightPriceScale: {
         ...c.rightPriceScale || {},
         visible: !z,
-        textColor: S,
-        ...N && {
+        textColor: C,
+        ...F && {
           scaleMargins: {
             top: 0.3,
             bottom: 0
@@ -140,65 +140,65 @@ function Bt({
         }
       }
     });
-    const g = new Set(v.current.keys()), s = new Set(e.map((o) => o.label));
+    const g = new Set(p.current.keys()), s = new Set(e.map((o) => o.label));
     for (const o of g)
       if (!s.has(o)) {
-        const r = v.current.get(o);
-        r && (t.removeSeries(r), v.current.delete(o));
+        const n = p.current.get(o);
+        n && (t.removeSeries(n), p.current.delete(o));
       }
-    const h = St(), u = [];
-    let p = 0;
+    const m = bt(), u = [];
+    let h = 0;
     for (let o = 0; o < e.length; o++) {
-      const r = e[o], Q = q[o % q.length], j = r.color || Q.line;
-      let T, k;
-      if (r.color)
-        if (r.topColor && r.bottomColor)
-          T = r.topColor, k = r.bottomColor;
-        else if (r.topColor) {
-          const d = et(j);
-          T = r.topColor, k = d.bottomColor;
-        } else if (r.bottomColor)
-          T = et(j).topColor, k = r.bottomColor;
+      const n = e[o], K = $[o % $.length], B = n.color || K.line;
+      let k, T;
+      if (n.color)
+        if (n.topColor && n.bottomColor)
+          k = n.topColor, T = n.bottomColor;
+        else if (n.topColor) {
+          const d = tt(B);
+          k = n.topColor, T = d.bottomColor;
+        } else if (n.bottomColor)
+          k = tt(B).topColor, T = n.bottomColor;
         else {
-          const d = et(j);
-          T = d.topColor, k = d.bottomColor;
+          const d = tt(B);
+          k = d.topColor, T = d.bottomColor;
         }
       else
-        T = r.topColor || Q.top, k = r.bottomColor || Q.bottom;
-      if (r.data.length === 0) {
-        const d = v.current.get(r.label);
-        d && (t.removeSeries(d), v.current.delete(r.label));
+        k = n.topColor || K.top, T = n.bottomColor || K.bottom;
+      if (n.data.length === 0) {
+        const d = p.current.get(n.label);
+        d && (t.removeSeries(d), p.current.delete(n.label));
         continue;
       }
-      const ht = (r.data.length > 0 ? Math.min(...r.data.map((d) => d.value)) : 0) < 0, pt = r.data.some((d) => d.value === 0), bt = !ht && pt, U = i ? p === 0 ? void 0 : `scale-${p}` : void 0;
+      const dt = (n.data.length > 0 ? Math.min(...n.data.map((d) => d.value)) : 0) < 0, gt = n.data.some((d) => d.value === 0), mt = !dt && gt, Q = i ? h === 0 ? void 0 : `scale-${h}` : void 0;
       i && u.push({
-        priceScaleId: U || "right",
-        shouldPreventNegativeAxis: bt,
-        seriesIndex: p
+        priceScaleId: Q || "right",
+        shouldPreventNegativeAxis: mt,
+        seriesIndex: h
       });
-      let I = v.current.get(r.label);
+      let I = p.current.get(n.label);
       I ? (I.applyOptions({
-        lineColor: j,
-        topColor: T,
-        bottomColor: k,
-        priceScaleId: U
-      }), I.setData(r.data)) : (I = t.addAreaSeries({
-        ...h,
-        lineColor: j,
-        topColor: T,
-        bottomColor: k,
-        priceScaleId: U,
+        lineColor: B,
+        topColor: k,
+        bottomColor: T,
+        priceScaleId: Q
+      }), I.setData(n.data)) : (I = t.addAreaSeries({
+        ...m,
+        lineColor: B,
+        topColor: k,
+        bottomColor: T,
+        priceScaleId: Q,
         priceFormat: {
           type: "custom",
           formatter: (d) => l(parseFloat(d.toString()), void 0, "short")
         }
-      }), I.setData(r.data), v.current.set(r.label, I)), p++;
+      }), I.setData(n.data), p.current.set(n.label, I)), h++;
     }
     if (i && u.length > 0)
       for (const o of u)
         try {
-          const r = t.priceScale(o.priceScaleId);
-          r && r.applyOptions({
+          const n = t.priceScale(o.priceScaleId);
+          n && n.applyOptions({
             visible: !P,
             autoScale: !0,
             scaleMargins: {
@@ -213,36 +213,24 @@ function Bt({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: S
+            textColor: C
           });
-        } catch (r) {
+        } catch (n) {
           console.warn(
             `Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,
-            r
+            n
           );
         }
-    let m = null;
-    if (F.length > 0) {
-      const o = F.map(
-        (r) => typeof r.time == "number" ? r.time : Number(r.time)
-      );
-      m = {
-        from: Math.min(...o),
-        to: Math.max(...o)
-      };
-    }
-    const R = new Set(e.map((o) => o.label)), G = ot.current, J = R.size !== G.size || [...R].some((o) => !G.has(o)), H = rt.current, gt = m && H && (m.from !== H.from || m.to !== H.to);
-    (nt.current || J || gt || !H || z) && (requestAnimationFrame(() => {
-      b.current && b.current.timeScale().fitContent();
-    }), nt.current = !1), ot.current = R, rt.current = m;
-    const K = /* @__PURE__ */ new Map();
+    const v = new Set(e.map((o) => o.label)), N = v.size !== X.current.size || [...v].some((o) => !X.current.has(o)), J = M.length !== et.current;
+    (ot.current || N || J || z) && (t.timeScale().fitContent(), ot.current = !1), X.current = v, et.current = M.length;
+    const j = /* @__PURE__ */ new Map();
     for (const o of e)
-      o.data.length > 0 && K.set(o.label, o.data[o.data.length - 1]);
-    Z(K.size > 0 ? K : void 0);
-  }, [e, F, y, A, z]), D(() => {
-    const t = b.current;
+      o.data.length > 0 && j.set(o.label, o.data[o.data.length - 1]);
+    Z(j.size > 0 ? j : void 0);
+  }, [e, M, y, A, z]), D(() => {
+    const t = x.current;
     if (!t || e.length === 0) return;
-    const n = e.length === 1;
+    const r = e.length === 1;
     let l;
     for (const a of e)
       if (a.data.length > 0) {
@@ -251,136 +239,136 @@ function Bt({
       }
     if (!l) return;
     const c = (a) => {
-      const { time: f = l, seriesData: C, point: N } = a || {}, i = Array.from(v.current.values());
-      if (!N || !f) {
+      const { time: f = l, seriesData: b, point: F } = a || {}, i = Array.from(p.current.values());
+      if (!F || !f) {
         const g = /* @__PURE__ */ new Map();
         for (const s of e)
           s.data.length > 0 && g.set(s.label, s.data[s.data.length - 1]);
-        if (Z(g.size > 0 ? g : void 0), n)
-          L(null);
+        if (Z(g.size > 0 ? g : void 0), r)
+          R(null);
         else if (i[0] && l) {
-          const h = t.timeScale().timeToCoordinate(l), u = e[0];
+          const m = t.timeScale().timeToCoordinate(l), u = e[0];
           if (u.data.length > 0) {
-            const p = u.data[u.data.length - 1].value, m = i[0].priceToCoordinate(p);
-            h !== null && m !== null && L({ x: h, y: m });
+            const h = u.data[u.data.length - 1].value, v = i[0].priceToCoordinate(h);
+            m !== null && v !== null && R({ x: m, y: v });
           }
         }
         return;
       }
       const P = /* @__PURE__ */ new Map();
-      let S;
+      let C;
       for (let g = 0; g < e.length; g++) {
-        const s = e[g], h = i[g];
-        if (!h) continue;
-        const u = C?.get(h), p = u && "value" in u ? u.value : void 0, m = s.data[s.data.length - 1], R = p !== void 0 ? p : m?.value ?? 0;
-        g === 0 && (S = R), P.set(s.label, { value: R, time: f });
+        const s = e[g], m = i[g];
+        if (!m) continue;
+        const u = b?.get(m), h = u && "value" in u ? u.value : void 0, v = s.data[s.data.length - 1], N = h !== void 0 ? h : v?.value ?? 0;
+        g === 0 && (C = N), P.set(s.label, { value: N, time: f });
       }
-      if (Z(P), S !== void 0 && i[0]) {
-        const s = t.timeScale().timeToCoordinate(f), h = i[0].priceToCoordinate(S);
-        if (s !== null && h !== null) {
-          const u = M.current;
+      if (Z(P), C !== void 0 && i[0]) {
+        const s = t.timeScale().timeToCoordinate(f), m = i[0].priceToCoordinate(C);
+        if (s !== null && m !== null) {
+          const u = V.current;
           if (u) {
-            const p = u.querySelector(
+            const h = u.querySelector(
               ".LightweightChart"
             );
-            if (p) {
-              const m = p.getBoundingClientRect(), R = u.getBoundingClientRect(), G = s + (m.left - R.left), J = h + (m.top - R.top);
-              L({ x: G, y: J });
+            if (h) {
+              const v = h.getBoundingClientRect(), N = u.getBoundingClientRect(), J = s + (v.left - N.left), j = m + (v.top - N.top);
+              R({ x: J, y: j });
             } else
-              L({ x: s, y: h });
+              R({ x: s, y: m });
           } else
-            L({ x: s, y: h });
+            R({ x: s, y: m });
         } else
-          L(null);
+          R(null);
       } else
-        L(null);
+        R(null);
     };
-    return t.subscribeCrosshairMove(c), n || requestAnimationFrame(() => {
-      const a = Array.from(v.current.values());
+    return t.subscribeCrosshairMove(c), r || requestAnimationFrame(() => {
+      const a = Array.from(p.current.values());
       if (a[0] && l && e[0]?.data.length > 0) {
-        const C = t.timeScale().timeToCoordinate(l), N = e[0].data[e[0].data.length - 1].value, i = a[0].priceToCoordinate(N);
-        C !== null && i !== null && L({ x: C, y: i });
+        const b = t.timeScale().timeToCoordinate(l), F = e[0].data[e[0].data.length - 1].value, i = a[0].priceToCoordinate(F);
+        b !== null && i !== null && R({ x: b, y: i });
       }
     }), () => {
       t.unsubscribeCrosshairMove(c);
     };
   }, [e]), D(() => {
-    const t = b.current;
+    const t = x.current;
     if (!t || e.length === 0) return;
-    const n = t.timeScale(), l = Math.max(...e.map((a) => a.data.length)), c = () => {
+    const r = t.timeScale(), l = Math.max(...e.map((a) => a.data.length)), c = () => {
       if (l === 0) return;
-      const a = n.getVisibleLogicalRange();
+      const a = r.getVisibleLogicalRange();
       if (!a) return;
       const f = {
         from: 0,
         to: l - 1
-      }, C = typeof a.from == "number" ? a.from : 0, N = typeof a.to == "number" ? a.to : l - 1, i = 0.01;
+      }, b = typeof a.from == "number" ? a.from : 0, F = typeof a.to == "number" ? a.to : l - 1, i = 0.01;
       let P = !1;
-      const S = { ...a };
-      C < f.from - i && (S.from = f.from, P = !0), N > f.to + i && (S.to = f.to, P = !0), P && n.setVisibleLogicalRange(S);
+      const C = { ...a };
+      b < f.from - i && (C.from = f.from, P = !0), F > f.to + i && (C.to = f.to, P = !0), P && r.setVisibleLogicalRange(C);
     };
-    return n.subscribeVisibleLogicalRangeChange(c), () => {
-      n.unsubscribeVisibleLogicalRangeChange(
+    return r.subscribeVisibleLogicalRangeChange(c), () => {
+      r.unsubscribeVisibleLogicalRangeChange(
         c
       );
     };
   }, [e]), D(() => {
-    const t = b.current, n = Array.from(v.current.values()), l = [];
-    if (t && n.length > 0 && E) {
-      const c = xt(), a = n[0];
+    const t = x.current, r = Array.from(p.current.values()), l = [];
+    if (t && r.length > 0 && E) {
+      const c = vt(), a = r[0];
       for (const f of E) {
-        const C = new Lt(t, a, f.xCoordinate, {
+        const b = new wt(t, a, f.xCoordinate, {
           ...c,
           ...f.options || {}
         });
-        a.attachPrimitive(C), l.push(C);
+        a.attachPrimitive(b), l.push(b);
       }
     }
     return () => {
-      if (n.length > 0) {
-        const c = n[0];
+      if (r.length > 0) {
+        const c = r[0];
         for (const a of l)
           c.detachPrimitive(a);
       }
     };
   }, [E]);
-  const _ = e.length === 1, it = tt.useMemo(() => {
+  const _ = e.length === 1, at = U.useMemo(() => {
     if (_ && e.length > 0) {
       const t = e[0];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
   }, [_, e]);
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ H(
     "div",
     {
-      ref: M,
-      className: dt(
+      ref: V,
+      className: ut(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        B
+        G
       ),
       children: [
-        _ && it && /* @__PURE__ */ x(
-          wt,
+        _ && at && /* @__PURE__ */ S(
+          St,
           {
-            point: it,
+            point: at,
             xMeasureUnit: y,
             yMeasureUnit: A
           }
         ),
-        at && lt && /* @__PURE__ */ x(
-          yt,
+        rt && nt && /* @__PURE__ */ S(
+          xt,
           {
-            points: at,
+            points: rt,
             xMeasureUnit: y,
             yMeasureUnit: A,
             series: e,
-            position: lt,
-            containerRef: M
+            position: nt,
+            containerRef: V
           }
         ),
-        w && /* @__PURE__ */ x(Pt, { series: e, onUnselect: W }),
-        /* @__PURE__ */ x(
+        w && /* @__PURE__ */ S(yt, { series: e, onUnselect: q }),
+        /* @__PURE__ */ S(
           "div",
           {
             ref: Y,
@@ -391,41 +379,41 @@ function Bt({
     }
   );
 }
-function Pt({
+function yt({
   series: e,
-  onUnselect: B
+  onUnselect: G
 }) {
-  return /* @__PURE__ */ x("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((w, W) => {
-    const y = q[W % q.length], A = w.color || y.line, O = w.data.length === 0;
-    return /* @__PURE__ */ $(
+  return /* @__PURE__ */ S("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((w, q) => {
+    const y = $[q % $.length], A = w.color || y.line, O = w.data.length === 0;
+    return /* @__PURE__ */ H(
       "div",
       {
-        className: dt(
+        className: ut(
           "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
           O && "opacity-50"
         ),
         children: [
-          /* @__PURE__ */ x(
+          /* @__PURE__ */ S(
             "div",
             {
               className: "w-3 h-3 rounded-sm",
               style: { backgroundColor: A }
             }
           ),
-          /* @__PURE__ */ $("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ H("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
             w.label,
             O && " (no data)"
           ] }),
-          B && /* @__PURE__ */ x(
+          G && /* @__PURE__ */ S(
             "button",
             {
               type: "button",
               onClick: (E) => {
-                E.stopPropagation(), B(w.label);
+                E.stopPropagation(), G(w.label);
               },
               className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
               "aria-label": `Remove ${w.label}`,
-              children: /* @__PURE__ */ $(
+              children: /* @__PURE__ */ H(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -440,9 +428,9 @@ function Pt({
                   className: "text-muted-foreground hover:text-foreground",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ x("title", { children: "Close" }),
-                    /* @__PURE__ */ x("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ x("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    /* @__PURE__ */ S("title", { children: "Close" }),
+                    /* @__PURE__ */ S("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ S("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                   ]
                 }
               )
@@ -455,6 +443,6 @@ function Pt({
   }) });
 }
 export {
-  q as DEFAULT_SERIES_COLORS,
-  Bt as Graph
+  $ as DEFAULT_SERIES_COLORS,
+  Dt as Graph
 };

package/dist/types/components/assets-ratio/assets-ratio.d.ts

@@ -4,6 +4,8 @@ export interface AssetsRatioProps {
     assets: Array<Asset & {
         balanceInUSD: bigint;
     }>;
+    /** Labels for tooltips (e.g., token symbols). Index corresponds to asset index */
+    labels?: string[];
     className?: string;
 }
-export declare function AssetsRatio({ assets, className, }: AssetsRatioProps): React.ReactElement;
+export declare function AssetsRatio({ assets, labels, className, }: AssetsRatioProps): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/permissionless-ui",
-  "version": "1.17.3",
+  "version": "1.17.4",
   "description": "Internal UI components",
   "license": "MIT",
   "main": "./dist/cjs/index.js",