@n1xyz/wallet-widget 0.0.14 → 0.0.15

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookDepthVisualizer.js

@@ -57,6 +57,6 @@ export default function OrderBookDepthVisualizer(_a) {
         path += "L ".concat(getPricePosition(cumulativeAsks[cumulativeAsks.length - 1][0]), " 100 Z");
         return path;
     };
-    return (_jsxs("div", { className: "mt-4", children: [_jsx("h3", { className: "text-sm font-medium text-n1-gray-900 dark:text-n1-gray-100 mb-2", children: "Depth Chart" }), _jsx("div", { className: "w-full h-32 bg-n1-gray-50 dark:bg-n1-gray-800 rounded-lg overflow-hidden", children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [_jsx("path", { d: generateBidPath(), fill: "rgba(16, 185, 129, 0.2)", stroke: "rgb(16, 185, 129)", strokeWidth: "0.5" }), _jsx("path", { d: generateAskPath(), fill: "rgba(239, 68, 68, 0.2)", stroke: "rgb(239, 68, 68)", strokeWidth: "0.5" }), _jsx("line", { x1: getPricePosition(data.asks[0][0]), y1: "0", x2: getPricePosition(data.asks[0][0]), y2: "100", stroke: "rgba(156, 163, 175, 0.5)", strokeWidth: "0.5", strokeDasharray: "2,2" })] }) }), _jsxs("div", { className: "flex justify-between mt-1 text-xs text-n1-gray-500 dark:text-n1-gray-400", children: [_jsx("span", { children: minPrice.toFixed(2) }), _jsx("span", { children: ((minPrice + maxPrice) / 2).toFixed(2) }), _jsx("span", { children: maxPrice.toFixed(2) })] })] }));
+    return (_jsxs("div", { className: "mt-4", children: [_jsx("h3", { className: "text-sm font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 mb-2", children: "Depth Chart" }), _jsx("div", { className: "w-full h-32 bg-n1-ww-gray-50 dark:bg-n1-ww-gray-800 rounded-lg overflow-hidden", children: _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [_jsx("path", { d: generateBidPath(), fill: "rgba(16, 185, 129, 0.2)", stroke: "rgb(16, 185, 129)", strokeWidth: "0.5" }), _jsx("path", { d: generateAskPath(), fill: "rgba(239, 68, 68, 0.2)", stroke: "rgb(239, 68, 68)", strokeWidth: "0.5" }), _jsx("line", { x1: getPricePosition(data.asks[0][0]), y1: "0", x2: getPricePosition(data.asks[0][0]), y2: "100", stroke: "rgba(156, 163, 175, 0.5)", strokeWidth: "0.5", strokeDasharray: "2,2" })] }) }), _jsxs("div", { className: "flex justify-between mt-1 text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: [_jsx("span", { children: minPrice.toFixed(2) }), _jsx("span", { children: ((minPrice + maxPrice) / 2).toFixed(2) }), _jsx("span", { children: maxPrice.toFixed(2) })] })] }));
 }
 //# sourceMappingURL=OrderBookDepthVisualizer.js.map

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookDepthVisualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderBookDepthVisualizer.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookDepthVisualizer.tsx"],"names":[],"mappings":"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","sourcesContent":["interface OrderBookDepthVisualizerProps {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  maxSize: number;\n}\n\nexport default function OrderBookDepthVisualizer({\n  data,\n  maxSize,\n}: OrderBookDepthVisualizerProps) {\n  if (!data || data.bids.length === 0 || data.asks.length === 0) {\n    return null;\n  }\n\n  // Calculate cumulative sizes\n  const calculateCumulativeSizes = (\n    orders: Array<[number, number]>\n  ): Array<[number, number]> => {\n    let cumulative = 0;\n    return orders.map(([price, size]) => {\n      cumulative += size;\n      return [price, cumulative];\n    });\n  };\n\n  const cumulativeBids = calculateCumulativeSizes(data.bids);\n  const cumulativeAsks = calculateCumulativeSizes(data.asks);\n\n  // Find max cumulative size for scaling\n  const maxCumulativeSize = Math.max(\n    cumulativeBids[cumulativeBids.length - 1][1],\n    cumulativeAsks[cumulativeAsks.length - 1][1]\n  );\n\n  // Calculate price range for x-axis\n  const minPrice = cumulativeBids[cumulativeBids.length - 1][0];\n  const maxPrice = cumulativeAsks[cumulativeAsks.length - 1][0];\n  const priceRange = maxPrice - minPrice;\n\n  // Helper function to calculate x position based on price\n  const getPricePosition = (price: number): number => {\n    return ((price - minPrice) / priceRange) * 100;\n  };\n\n  // Helper function to calculate y position based on cumulative size\n  const getSizePosition = (size: number): number => {\n    return (size / maxCumulativeSize) * 100;\n  };\n\n  // Generate SVG path for bids\n  const generateBidPath = (): string => {\n    if (cumulativeBids.length === 0) return '';\n\n    let path = `M ${getPricePosition(cumulativeBids[0][0])} 100 `;\n\n    cumulativeBids.forEach(([price, size]) => {\n      const x = getPricePosition(price);\n      const y = 100 - getSizePosition(size);\n      path += `L ${x} ${y} `;\n    });\n\n    path += `L ${getPricePosition(cumulativeBids[cumulativeBids.length - 1][0])} 100 Z`;\n\n    return path;\n  };\n\n  // Generate SVG path for asks\n  const generateAskPath = (): string => {\n    if (cumulativeAsks.length === 0) return '';\n\n    let path = `M ${getPricePosition(cumulativeAsks[0][0])} 100 `;\n\n    cumulativeAsks.forEach(([price, size]) => {\n      const x = getPricePosition(price);\n      const y = 100 - getSizePosition(size);\n      path += `L ${x} ${y} `;\n    });\n\n    path += `L ${getPricePosition(cumulativeAsks[cumulativeAsks.length - 1][0])} 100 Z`;\n\n    return path;\n  };\n\n  return (\n    <div className=\"mt-4\">\n      <h3 className=\"text-sm font-medium text-n1-gray-900 dark:text-n1-gray-100 mb-2\">\n        Depth Chart\n      </h3>\n      <div className=\"w-full h-32 bg-n1-gray-50 dark:bg-n1-gray-800 rounded-lg overflow-hidden\">\n        <svg\n          width=\"100%\"\n          height=\"100%\"\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"none\"\n        >\n          {/* Bid depth (green) */}\n          <path\n            d={generateBidPath()}\n            fill=\"rgba(16, 185, 129, 0.2)\"\n            stroke=\"rgb(16, 185, 129)\"\n            strokeWidth=\"0.5\"\n          />\n\n          {/* Ask depth (red) */}\n          <path\n            d={generateAskPath()}\n            fill=\"rgba(239, 68, 68, 0.2)\"\n            stroke=\"rgb(239, 68, 68)\"\n            strokeWidth=\"0.5\"\n          />\n\n          {/* Center line (current price) */}\n          <line\n            x1={getPricePosition(data.asks[0][0])}\n            y1=\"0\"\n            x2={getPricePosition(data.asks[0][0])}\n            y2=\"100\"\n            stroke=\"rgba(156, 163, 175, 0.5)\"\n            strokeWidth=\"0.5\"\n            strokeDasharray=\"2,2\"\n          />\n        </svg>\n      </div>\n\n      {/* Price labels */}\n      <div className=\"flex justify-between mt-1 text-xs text-n1-gray-500 dark:text-n1-gray-400\">\n        <span>{minPrice.toFixed(2)}</span>\n        <span>{((minPrice + maxPrice) / 2).toFixed(2)}</span>\n        <span>{maxPrice.toFixed(2)}</span>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"OrderBookDepthVisualizer.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookDepthVisualizer.tsx"],"names":[],"mappings":"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","sourcesContent":["interface OrderBookDepthVisualizerProps {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  maxSize: number;\n}\n\nexport default function OrderBookDepthVisualizer({\n  data,\n  maxSize,\n}: OrderBookDepthVisualizerProps) {\n  if (!data || data.bids.length === 0 || data.asks.length === 0) {\n    return null;\n  }\n\n  // Calculate cumulative sizes\n  const calculateCumulativeSizes = (\n    orders: Array<[number, number]>\n  ): Array<[number, number]> => {\n    let cumulative = 0;\n    return orders.map(([price, size]) => {\n      cumulative += size;\n      return [price, cumulative];\n    });\n  };\n\n  const cumulativeBids = calculateCumulativeSizes(data.bids);\n  const cumulativeAsks = calculateCumulativeSizes(data.asks);\n\n  // Find max cumulative size for scaling\n  const maxCumulativeSize = Math.max(\n    cumulativeBids[cumulativeBids.length - 1][1],\n    cumulativeAsks[cumulativeAsks.length - 1][1]\n  );\n\n  // Calculate price range for x-axis\n  const minPrice = cumulativeBids[cumulativeBids.length - 1][0];\n  const maxPrice = cumulativeAsks[cumulativeAsks.length - 1][0];\n  const priceRange = maxPrice - minPrice;\n\n  // Helper function to calculate x position based on price\n  const getPricePosition = (price: number): number => {\n    return ((price - minPrice) / priceRange) * 100;\n  };\n\n  // Helper function to calculate y position based on cumulative size\n  const getSizePosition = (size: number): number => {\n    return (size / maxCumulativeSize) * 100;\n  };\n\n  // Generate SVG path for bids\n  const generateBidPath = (): string => {\n    if (cumulativeBids.length === 0) return '';\n\n    let path = `M ${getPricePosition(cumulativeBids[0][0])} 100 `;\n\n    cumulativeBids.forEach(([price, size]) => {\n      const x = getPricePosition(price);\n      const y = 100 - getSizePosition(size);\n      path += `L ${x} ${y} `;\n    });\n\n    path += `L ${getPricePosition(cumulativeBids[cumulativeBids.length - 1][0])} 100 Z`;\n\n    return path;\n  };\n\n  // Generate SVG path for asks\n  const generateAskPath = (): string => {\n    if (cumulativeAsks.length === 0) return '';\n\n    let path = `M ${getPricePosition(cumulativeAsks[0][0])} 100 `;\n\n    cumulativeAsks.forEach(([price, size]) => {\n      const x = getPricePosition(price);\n      const y = 100 - getSizePosition(size);\n      path += `L ${x} ${y} `;\n    });\n\n    path += `L ${getPricePosition(cumulativeAsks[cumulativeAsks.length - 1][0])} 100 Z`;\n\n    return path;\n  };\n\n  return (\n    <div className=\"mt-4\">\n      <h3 className=\"text-sm font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 mb-2\">\n        Depth Chart\n      </h3>\n      <div className=\"w-full h-32 bg-n1-ww-gray-50 dark:bg-n1-ww-gray-800 rounded-lg overflow-hidden\">\n        <svg\n          width=\"100%\"\n          height=\"100%\"\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"none\"\n        >\n          {/* Bid depth (green) */}\n          <path\n            d={generateBidPath()}\n            fill=\"rgba(16, 185, 129, 0.2)\"\n            stroke=\"rgb(16, 185, 129)\"\n            strokeWidth=\"0.5\"\n          />\n\n          {/* Ask depth (red) */}\n          <path\n            d={generateAskPath()}\n            fill=\"rgba(239, 68, 68, 0.2)\"\n            stroke=\"rgb(239, 68, 68)\"\n            strokeWidth=\"0.5\"\n          />\n\n          {/* Center line (current price) */}\n          <line\n            x1={getPricePosition(data.asks[0][0])}\n            y1=\"0\"\n            x2={getPricePosition(data.asks[0][0])}\n            y2=\"100\"\n            stroke=\"rgba(156, 163, 175, 0.5)\"\n            strokeWidth=\"0.5\"\n            strokeDasharray=\"2,2\"\n          />\n        </svg>\n      </div>\n\n      {/* Price labels */}\n      <div className=\"flex justify-between mt-1 text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n        <span>{minPrice.toFixed(2)}</span>\n        <span>{((minPrice + maxPrice) / 2).toFixed(2)}</span>\n        <span>{maxPrice.toFixed(2)}</span>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.js

@@ -20,11 +20,11 @@ export default function OrderBookHeader(_a) {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, []);
-    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "text-base font-semibold text-n1-gray-900 dark:text-n1-gray-100", children: ["Order Book", ' ', marketSymbol ? _jsx("span", { className: "text-n1-main", children: marketSymbol }) : ''] }), _jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsxs("button", { onClick: function () { return setIsOpen(!isOpen); }, className: "flex items-center gap-1 px-2 py-1 bg-n1-gray-100 dark:bg-n1-gray-950 rounded-sm text-xs text-n1-gray-900 dark:text-n1-gray-100 border border-n1-gray-200 dark:border-n1-gray-800 hover:border-n1-main dark:hover:border-n1-main transition-colors duration-200", children: [_jsxs("span", { children: ["Precision:", ' ', _jsx("span", { className: "font-mono font-medium", children: aggregationLevel })] }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isOpen ? 'rotate-180 text-n1-main' : 'text-n1-gray-500 dark:text-n1-gray-400') })] }), isOpen && (_jsx("div", { className: "absolute right-0 z-50 mt-1 w-36 bg-white dark:bg-n1-gray-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-800 overflow-hidden", children: aggregationOptions.map(function (level) { return (_jsx("button", { onClick: function () {
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "text-base font-semibold text-n1-ww-gray-900 dark:text-n1-ww-gray-100", children: ["Order Book", ' ', marketSymbol ? _jsx("span", { className: "text-n1-ww-main", children: marketSymbol }) : ''] }), _jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsxs("button", { onClick: function () { return setIsOpen(!isOpen); }, className: "flex items-center gap-1 px-2 py-1 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-950 rounded-sm text-xs text-n1-ww-gray-900 dark:text-n1-ww-gray-100 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 hover:border-n1-ww-main dark:hover:border-n1-ww-main transition-colors duration-200", children: [_jsxs("span", { children: ["Precision:", ' ', _jsx("span", { className: "font-mono font-medium", children: aggregationLevel })] }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isOpen ? 'rotate-180 text-n1-ww-main' : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400') })] }), isOpen && (_jsx("div", { className: "absolute right-0 z-50 mt-1 w-36 bg-white dark:bg-n1-ww-gray-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden", children: aggregationOptions.map(function (level) { return (_jsx("button", { onClick: function () {
                                 onAggregationChange(level);
                                 setIsOpen(false);
-                            }, className: "w-full text-left px-3 py-1.5 text-xs hover:bg-n1-gray-100 dark:hover:bg-n1-gray-800 transition-colors duration-200 ".concat(aggregationLevel === level
-                                ? 'bg-n1-gray-100 dark:bg-n1-gray-800 border-l-2 border-n1-main text-n1-main'
-                                : 'text-n1-gray-900 dark:text-n1-gray-100'), children: level }, level)); }) }))] })] }));
+                            }, className: "w-full text-left px-3 py-1.5 text-xs hover:bg-n1-ww-gray-100 dark:hover:bg-n1-ww-gray-800 transition-colors duration-200 ".concat(aggregationLevel === level
+                                ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 border-l-2 border-n1-ww-main text-n1-ww-main'
+                                : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100'), children: level }, level)); }) }))] })] }));
 }
 //# sourceMappingURL=OrderBookHeader.js.map

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderBookHeader.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAIjB;QAHrB,YAAY,kBAAA,EACZ,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA;IAEb,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAC5C,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,4BAA4B;IAC5B,IAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAElE,uCAAuC;IACvC,SAAS,CAAC;QACR,SAAS,kBAAkB,CAAC,KAAiB;YAC3C,IACE,WAAW,CAAC,OAAO;gBACnB,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACnD,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,cAAI,SAAS,EAAC,gEAAgE,2BACjE,GAAG,EACb,YAAY,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,cAAc,YAAE,YAAY,GAAQ,CAAC,CAAC,CAAC,EAAE,IACtE,EAEL,eAAK,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,WAAW,aACxC,kBACE,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,EACjC,SAAS,EAAC,gQAAgQ,aAE1Q,yCACa,GAAG,EACd,eAAM,SAAS,EAAC,uBAAuB,YAAE,gBAAgB,GAAQ,IAC5D,EACP,KAAC,WAAW,IACV,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,4CAAqC,MAAM,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,wCAAwC,CAAE,GAC/H,IACK,EAER,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,qJAAqJ,YACjK,kBAAkB,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CACjC,iBAEE,OAAO,EAAE;gCACP,mBAAmB,CAAC,KAAK,CAAC,CAAC;gCAC3B,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,EACD,SAAS,EAAE,6HACT,gBAAgB,KAAK,KAAK;gCACxB,CAAC,CAAC,2EAA2E;gCAC7E,CAAC,CAAC,wCAAwC,CAC5C,YAED,KAAK,IAXD,KAAK,CAYH,CACV,EAfkC,CAelC,CAAC,GACE,CACP,IACG,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { ChevronDown } from 'lucide-react';\nimport { useState, useRef, useEffect } from 'react';\n\ninterface OrderBookHeaderProps {\n  marketSymbol: string | null;\n  aggregationLevel: number;\n  onAggregationChange: (level: number) => void;\n}\n\nexport default function OrderBookHeader({\n  marketSymbol,\n  aggregationLevel,\n  onAggregationChange,\n}: OrderBookHeaderProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Common aggregation levels\n  const aggregationOptions = [0.0001, 0.001, 0.01, 0.1, 1, 10, 100];\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <h2 className=\"text-base font-semibold text-n1-gray-900 dark:text-n1-gray-100\">\n        Order Book{' '}\n        {marketSymbol ? <span className=\"text-n1-main\">{marketSymbol}</span> : ''}\n      </h2>\n\n      <div className=\"relative\" ref={dropdownRef}>\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          className=\"flex items-center gap-1 px-2 py-1 bg-n1-gray-100 dark:bg-n1-gray-950 rounded-sm text-xs text-n1-gray-900 dark:text-n1-gray-100 border border-n1-gray-200 dark:border-n1-gray-800 hover:border-n1-main dark:hover:border-n1-main transition-colors duration-200\"\n        >\n          <span>\n            Precision:{' '}\n            <span className=\"font-mono font-medium\">{aggregationLevel}</span>\n          </span>\n          <ChevronDown\n            size={14}\n            className={`transition-transform duration-200 ${isOpen ? 'rotate-180 text-n1-main' : 'text-n1-gray-500 dark:text-n1-gray-400'}`}\n          />\n        </button>\n\n        {isOpen && (\n          <div className=\"absolute right-0 z-50 mt-1 w-36 bg-white dark:bg-n1-gray-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-800 overflow-hidden\">\n            {aggregationOptions.map((level) => (\n              <button\n                key={level}\n                onClick={() => {\n                  onAggregationChange(level);\n                  setIsOpen(false);\n                }}\n                className={`w-full text-left px-3 py-1.5 text-xs hover:bg-n1-gray-100 dark:hover:bg-n1-gray-800 transition-colors duration-200 ${\n                  aggregationLevel === level\n                    ? 'bg-n1-gray-100 dark:bg-n1-gray-800 border-l-2 border-n1-main text-n1-main'\n                    : 'text-n1-gray-900 dark:text-n1-gray-100'\n                }`}\n              >\n                {level}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"OrderBookHeader.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAIjB;QAHrB,YAAY,kBAAA,EACZ,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA;IAEb,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAC5C,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,4BAA4B;IAC5B,IAAM,kBAAkB,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAElE,uCAAuC;IACvC,SAAS,CAAC;QACR,SAAS,kBAAkB,CAAC,KAAiB;YAC3C,IACE,WAAW,CAAC,OAAO;gBACnB,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EACnD,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,cAAI,SAAS,EAAC,sEAAsE,2BACvE,GAAG,EACb,YAAY,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,iBAAiB,YAAE,YAAY,GAAQ,CAAC,CAAC,CAAC,EAAE,IACzE,EAEL,eAAK,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,WAAW,aACxC,kBACE,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,EACjC,SAAS,EAAC,wRAAwR,aAElS,yCACa,GAAG,EACd,eAAM,SAAS,EAAC,uBAAuB,YAAE,gBAAgB,GAAQ,IAC5D,EACP,KAAC,WAAW,IACV,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,4CAAqC,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,8CAA8C,CAAE,GACxI,IACK,EAER,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,8JAA8J,YAC1K,kBAAkB,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CACjC,iBAEE,OAAO,EAAE;gCACP,mBAAmB,CAAC,KAAK,CAAC,CAAC;gCAC3B,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC,EACD,SAAS,EAAE,mIACT,gBAAgB,KAAK,KAAK;gCACxB,CAAC,CAAC,uFAAuF;gCACzF,CAAC,CAAC,8CAA8C,CAClD,YAED,KAAK,IAXD,KAAK,CAYH,CACV,EAfkC,CAelC,CAAC,GACE,CACP,IACG,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { ChevronDown } from 'lucide-react';\nimport { useState, useRef, useEffect } from 'react';\n\ninterface OrderBookHeaderProps {\n  marketSymbol: string | null;\n  aggregationLevel: number;\n  onAggregationChange: (level: number) => void;\n}\n\nexport default function OrderBookHeader({\n  marketSymbol,\n  aggregationLevel,\n  onAggregationChange,\n}: OrderBookHeaderProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Common aggregation levels\n  const aggregationOptions = [0.0001, 0.001, 0.01, 0.1, 1, 10, 100];\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <h2 className=\"text-base font-semibold text-n1-ww-gray-900 dark:text-n1-ww-gray-100\">\n        Order Book{' '}\n        {marketSymbol ? <span className=\"text-n1-ww-main\">{marketSymbol}</span> : ''}\n      </h2>\n\n      <div className=\"relative\" ref={dropdownRef}>\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          className=\"flex items-center gap-1 px-2 py-1 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-950 rounded-sm text-xs text-n1-ww-gray-900 dark:text-n1-ww-gray-100 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 hover:border-n1-ww-main dark:hover:border-n1-ww-main transition-colors duration-200\"\n        >\n          <span>\n            Precision:{' '}\n            <span className=\"font-mono font-medium\">{aggregationLevel}</span>\n          </span>\n          <ChevronDown\n            size={14}\n            className={`transition-transform duration-200 ${isOpen ? 'rotate-180 text-n1-ww-main' : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400'}`}\n          />\n        </button>\n\n        {isOpen && (\n          <div className=\"absolute right-0 z-50 mt-1 w-36 bg-white dark:bg-n1-ww-gray-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden\">\n            {aggregationOptions.map((level) => (\n              <button\n                key={level}\n                onClick={() => {\n                  onAggregationChange(level);\n                  setIsOpen(false);\n                }}\n                className={`w-full text-left px-3 py-1.5 text-xs hover:bg-n1-ww-gray-100 dark:hover:bg-n1-ww-gray-800 transition-colors duration-200 ${\n                  aggregationLevel === level\n                    ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 border-l-2 border-n1-ww-main text-n1-ww-main'\n                    : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100'\n                }`}\n              >\n                {level}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.js

@@ -3,20 +3,20 @@ import { RefreshCw } from 'lucide-react';
 export default function OrderBookTable(_a) {
     var data = _a.data, loading = _a.loading, maxSize = _a.maxSize;
     if (!data) {
-        return (_jsx("div", { className: "flex items-center justify-center h-40", children: _jsx("p", { className: "text-xs text-n1-gray-500 dark:text-n1-gray-400", children: "No orderbook data available" }) }));
+        return (_jsx("div", { className: "flex items-center justify-center h-40", children: _jsx("p", { className: "text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: "No orderbook data available" }) }));
     }
     // Limit the number of rows to display
     var maxRows = 8;
     var bids = data.bids.slice(0, maxRows);
     var asks = data.asks.slice(0, maxRows).reverse(); // Reverse to show highest ask at the bottom
-    return (_jsxs("div", { className: "relative", children: [loading && (_jsx("div", { className: "absolute top-2 right-2 z-10", children: _jsx(RefreshCw, { size: 14, className: "text-n1-main n1-animate-spin" }) })), _jsxs("div", { className: "grid grid-cols-3 gap-1 mb-1 text-[10px] text-n1-gray-500 dark:text-n1-gray-400 font-medium uppercase tracking-wider", children: [_jsx("div", { className: "text-left", children: "Size" }), _jsx("div", { className: "text-center", children: "Price" }), _jsx("div", { className: "text-right", children: "Size" })] }), _jsx("div", { className: "space-y-px mb-2", children: asks.map(function (_a, index) {
+    return (_jsxs("div", { className: "relative", children: [loading && (_jsx("div", { className: "absolute top-2 right-2 z-10", children: _jsx(RefreshCw, { size: 14, className: "text-n1-ww-main n1-animate-spin" }) })), _jsxs("div", { className: "grid grid-cols-3 gap-1 mb-1 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 font-medium uppercase tracking-wider", children: [_jsx("div", { className: "text-left", children: "Size" }), _jsx("div", { className: "text-center", children: "Price" }), _jsx("div", { className: "text-right", children: "Size" })] }), _jsx("div", { className: "space-y-px mb-2", children: asks.map(function (_a, index) {
                     var price = _a[0], size = _a[1];
                     var sizePercentage = (size / maxSize) * 100;
-                    return (_jsxs("div", { className: "grid grid-cols-3 gap-1 relative", children: [_jsx("div", { className: "text-left text-xs" }), _jsx("div", { className: "text-center text-xs font-medium text-red-600 dark:text-red-400 font-mono z-10", children: price.toFixed(4) }), _jsx("div", { className: "text-right text-xs font-medium text-n1-gray-900 dark:text-n1-gray-100 font-mono z-10", children: size.toFixed(4) }), _jsx("div", { className: "absolute top-0 right-0 h-full bg-red-100/50 dark:bg-red-900/10 z-0", style: { width: "".concat(sizePercentage, "%") } })] }, "ask-".concat(index)));
-                }) }), bids.length > 0 && asks.length > 0 && (_jsx("div", { className: "py-1 px-2 mb-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-center", children: _jsxs("span", { className: "text-[10px] text-n1-gray-500 dark:text-n1-gray-400", children: ["Spread:", ' ', _jsx("span", { className: "font-mono font-medium", children: (asks[asks.length - 1][0] - bids[0][0]).toFixed(4) }), ' ', "(", _jsxs("span", { className: "font-mono", children: [((asks[asks.length - 1][0] / bids[0][0] - 1) * 100).toFixed(2), "%"] }), ")"] }) })), _jsx("div", { className: "space-y-px", children: bids.map(function (_a, index) {
+                    return (_jsxs("div", { className: "grid grid-cols-3 gap-1 relative", children: [_jsx("div", { className: "text-left text-xs" }), _jsx("div", { className: "text-center text-xs font-medium text-red-600 dark:text-red-400 font-mono z-10", children: price.toFixed(4) }), _jsx("div", { className: "text-right text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10", children: size.toFixed(4) }), _jsx("div", { className: "absolute top-0 right-0 h-full bg-red-100/50 dark:bg-red-900/10 z-0", style: { width: "".concat(sizePercentage, "%") } })] }, "ask-".concat(index)));
+                }) }), bids.length > 0 && asks.length > 0 && (_jsx("div", { className: "py-1 px-2 mb-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-center", children: _jsxs("span", { className: "text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: ["Spread:", ' ', _jsx("span", { className: "font-mono font-medium", children: (asks[asks.length - 1][0] - bids[0][0]).toFixed(4) }), ' ', "(", _jsxs("span", { className: "font-mono", children: [((asks[asks.length - 1][0] / bids[0][0] - 1) * 100).toFixed(2), "%"] }), ")"] }) })), _jsx("div", { className: "space-y-px", children: bids.map(function (_a, index) {
                     var price = _a[0], size = _a[1];
                     var sizePercentage = (size / maxSize) * 100;
-                    return (_jsxs("div", { className: "grid grid-cols-3 gap-1 relative", children: [_jsx("div", { className: "text-left text-xs font-medium text-n1-gray-900 dark:text-n1-gray-100 font-mono z-10", children: size.toFixed(4) }), _jsx("div", { className: "text-center text-xs font-medium text-green-600 dark:text-green-400 font-mono z-10", children: price.toFixed(4) }), _jsx("div", { className: "text-right text-xs" }), _jsx("div", { className: "absolute top-0 left-0 h-full bg-green-100/50 dark:bg-green-900/10 z-0", style: { width: "".concat(sizePercentage, "%") } })] }, "bid-".concat(index)));
-                }) }), _jsxs("div", { className: "mt-2 text-[10px] text-n1-gray-500 dark:text-n1-gray-400 text-right", children: ["Last updated:", ' ', _jsx("span", { className: "font-mono", children: new Date(data.timestamp).toLocaleTimeString() })] })] }));
+                    return (_jsxs("div", { className: "grid grid-cols-3 gap-1 relative", children: [_jsx("div", { className: "text-left text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10", children: size.toFixed(4) }), _jsx("div", { className: "text-center text-xs font-medium text-green-600 dark:text-green-400 font-mono z-10", children: price.toFixed(4) }), _jsx("div", { className: "text-right text-xs" }), _jsx("div", { className: "absolute top-0 left-0 h-full bg-green-100/50 dark:bg-green-900/10 z-0", style: { width: "".concat(sizePercentage, "%") } })] }, "bid-".concat(index)));
+                }) }), _jsxs("div", { className: "mt-2 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-right", children: ["Last updated:", ' ', _jsx("span", { className: "font-mono", children: new Date(data.timestamp).toLocaleTimeString() })] })] }));
 }
 //# sourceMappingURL=OrderBookTable.js.map

package/dist/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderBookTable.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RefreshCw } from 'lucide-react';\n\ninterface OrderBookTableProps {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  loading: boolean;\n  maxSize: number;\n}\n\nexport default function OrderBookTable({\n  data,\n  loading,\n  maxSize,\n}: OrderBookTableProps) {\n  if (!data) {\n    return (\n      <div className=\"flex items-center justify-center h-40\">\n        <p className=\"text-xs text-n1-gray-500 dark:text-n1-gray-400\">\n          No orderbook data available\n        </p>\n      </div>\n    );\n  }\n\n  // Limit the number of rows to display\n  const maxRows = 8;\n  const bids = data.bids.slice(0, maxRows);\n  const asks = data.asks.slice(0, maxRows).reverse(); // Reverse to show highest ask at the bottom\n\n  return (\n    <div className=\"relative\">\n      {loading && (\n        <div className=\"absolute top-2 right-2 z-10\">\n          <RefreshCw size={14} className=\"text-n1-main n1-animate-spin\" />\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-3 gap-1 mb-1 text-[10px] text-n1-gray-500 dark:text-n1-gray-400 font-medium uppercase tracking-wider\">\n        <div className=\"text-left\">Size</div>\n        <div className=\"text-center\">Price</div>\n        <div className=\"text-right\">Size</div>\n      </div>\n\n      {/* Asks (Sell orders) */}\n      <div className=\"space-y-px mb-2\">\n        {asks.map(([price, size], index) => {\n          const sizePercentage = (size / maxSize) * 100;\n\n          return (\n            <div\n              key={`ask-${index}`}\n              className=\"grid grid-cols-3 gap-1 relative\"\n            >\n              <div className=\"text-left text-xs\"></div>\n              <div className=\"text-center text-xs font-medium text-red-600 dark:text-red-400 font-mono z-10\">\n                {price.toFixed(4)}\n              </div>\n              <div className=\"text-right text-xs font-medium text-n1-gray-900 dark:text-n1-gray-100 font-mono z-10\">\n                {size.toFixed(4)}\n              </div>\n              <div\n                className=\"absolute top-0 right-0 h-full bg-red-100/50 dark:bg-red-900/10 z-0\"\n                style={{ width: `${sizePercentage}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Spread */}\n      {bids.length > 0 && asks.length > 0 && (\n        <div className=\"py-1 px-2 mb-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-center\">\n          <span className=\"text-[10px] text-n1-gray-500 dark:text-n1-gray-400\">\n            Spread:{' '}\n            <span className=\"font-mono font-medium\">\n              {(asks[asks.length - 1][0] - bids[0][0]).toFixed(4)}\n            </span>{' '}\n            (\n            <span className=\"font-mono\">\n              {((asks[asks.length - 1][0] / bids[0][0] - 1) * 100).toFixed(2)}%\n            </span>\n            )\n          </span>\n        </div>\n      )}\n\n      {/* Bids (Buy orders) */}\n      <div className=\"space-y-px\">\n        {bids.map(([price, size], index) => {\n          const sizePercentage = (size / maxSize) * 100;\n\n          return (\n            <div\n              key={`bid-${index}`}\n              className=\"grid grid-cols-3 gap-1 relative\"\n            >\n              <div className=\"text-left text-xs font-medium text-n1-gray-900 dark:text-n1-gray-100 font-mono z-10\">\n                {size.toFixed(4)}\n              </div>\n              <div className=\"text-center text-xs font-medium text-green-600 dark:text-green-400 font-mono z-10\">\n                {price.toFixed(4)}\n              </div>\n              <div className=\"text-right text-xs\"></div>\n              <div\n                className=\"absolute top-0 left-0 h-full bg-green-100/50 dark:bg-green-900/10 z-0\"\n                style={{ width: `${sizePercentage}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Last updated timestamp */}\n      <div className=\"mt-2 text-[10px] text-n1-gray-500 dark:text-n1-gray-400 text-right\">\n        Last updated:{' '}\n        <span className=\"font-mono\">\n          {new Date(data.timestamp).toLocaleTimeString()}\n        </span>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"OrderBookTable.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/OrderBook/OrderBookTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RefreshCw } from 'lucide-react';\n\ninterface OrderBookTableProps {\n  data: {\n    bids: Array<[number, number]>;\n    asks: Array<[number, number]>;\n    timestamp: number;\n  } | null;\n  loading: boolean;\n  maxSize: number;\n}\n\nexport default function OrderBookTable({\n  data,\n  loading,\n  maxSize,\n}: OrderBookTableProps) {\n  if (!data) {\n    return (\n      <div className=\"flex items-center justify-center h-40\">\n        <p className=\"text-xs text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n          No orderbook data available\n        </p>\n      </div>\n    );\n  }\n\n  // Limit the number of rows to display\n  const maxRows = 8;\n  const bids = data.bids.slice(0, maxRows);\n  const asks = data.asks.slice(0, maxRows).reverse(); // Reverse to show highest ask at the bottom\n\n  return (\n    <div className=\"relative\">\n      {loading && (\n        <div className=\"absolute top-2 right-2 z-10\">\n          <RefreshCw size={14} className=\"text-n1-ww-main n1-animate-spin\" />\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-3 gap-1 mb-1 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 font-medium uppercase tracking-wider\">\n        <div className=\"text-left\">Size</div>\n        <div className=\"text-center\">Price</div>\n        <div className=\"text-right\">Size</div>\n      </div>\n\n      {/* Asks (Sell orders) */}\n      <div className=\"space-y-px mb-2\">\n        {asks.map(([price, size], index) => {\n          const sizePercentage = (size / maxSize) * 100;\n\n          return (\n            <div\n              key={`ask-${index}`}\n              className=\"grid grid-cols-3 gap-1 relative\"\n            >\n              <div className=\"text-left text-xs\"></div>\n              <div className=\"text-center text-xs font-medium text-red-600 dark:text-red-400 font-mono z-10\">\n                {price.toFixed(4)}\n              </div>\n              <div className=\"text-right text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10\">\n                {size.toFixed(4)}\n              </div>\n              <div\n                className=\"absolute top-0 right-0 h-full bg-red-100/50 dark:bg-red-900/10 z-0\"\n                style={{ width: `${sizePercentage}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Spread */}\n      {bids.length > 0 && asks.length > 0 && (\n        <div className=\"py-1 px-2 mb-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-center\">\n          <span className=\"text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n            Spread:{' '}\n            <span className=\"font-mono font-medium\">\n              {(asks[asks.length - 1][0] - bids[0][0]).toFixed(4)}\n            </span>{' '}\n            (\n            <span className=\"font-mono\">\n              {((asks[asks.length - 1][0] / bids[0][0] - 1) * 100).toFixed(2)}%\n            </span>\n            )\n          </span>\n        </div>\n      )}\n\n      {/* Bids (Buy orders) */}\n      <div className=\"space-y-px\">\n        {bids.map(([price, size], index) => {\n          const sizePercentage = (size / maxSize) * 100;\n\n          return (\n            <div\n              key={`bid-${index}`}\n              className=\"grid grid-cols-3 gap-1 relative\"\n            >\n              <div className=\"text-left text-xs font-medium text-n1-ww-gray-900 dark:text-n1-ww-gray-100 font-mono z-10\">\n                {size.toFixed(4)}\n              </div>\n              <div className=\"text-center text-xs font-medium text-green-600 dark:text-green-400 font-mono z-10\">\n                {price.toFixed(4)}\n              </div>\n              <div className=\"text-right text-xs\"></div>\n              <div\n                className=\"absolute top-0 left-0 h-full bg-green-100/50 dark:bg-green-900/10 z-0\"\n                style={{ width: `${sizePercentage}%` }}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Last updated timestamp */}\n      <div className=\"mt-2 text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400 text-right\">\n        Last updated:{' '}\n        <span className=\"font-mono\">\n          {new Date(data.timestamp).toLocaleTimeString()}\n        </span>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/TradeForm/AmountInput.js

@@ -15,6 +15,6 @@ export default function AmountInput(_a) {
         // the percentage of the available balance based on marketInfo
         onChange((percent * 0.01).toString());
     };
-    return (_jsxs("div", { className: "relative z-20", children: [_jsx("label", { className: "block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1", children: "Amount" }), _jsx("div", { className: "relative", children: _jsx("input", { type: "text", value: amount, onChange: handleAmountChange, className: "w-full px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600 focus:border-n1-gray-400 dark:focus:border-n1-gray-600 bg-white dark:bg-n1-dark-950 font-mono transition-colors duration-200", placeholder: "Enter amount" }) }), _jsx("div", { className: "grid grid-cols-4 gap-1 mt-1", children: [25, 50, 75, 100].map(function (percent) { return (_jsxs("button", { type: "button", onClick: function () { return handlePercentClick(percent); }, className: "text-[10px] px-1 py-0.5 border border-n1-gray-200 dark:border-n1-gray-800 hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white rounded-sm text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200 bg-white dark:bg-n1-dark-950", children: [percent, "%"] }, percent)); }) })] }));
+    return (_jsxs("div", { className: "relative z-20", children: [_jsx("label", { className: "block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1", children: "Amount" }), _jsx("div", { className: "relative", children: _jsx("input", { type: "text", value: amount, onChange: handleAmountChange, className: "w-full px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600 focus:border-n1-ww-gray-400 dark:focus:border-n1-ww-gray-600 bg-white dark:bg-n1-ww-gray-950 font-mono transition-colors duration-200", placeholder: "Enter amount" }) }), _jsx("div", { className: "grid grid-cols-4 gap-1 mt-1", children: [25, 50, 75, 100].map(function (percent) { return (_jsxs("button", { type: "button", onClick: function () { return handlePercentClick(percent); }, className: "text-[10px] px-1 py-0.5 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white rounded-sm text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950", children: [percent, "%"] }, percent)); }) })] }));
 }
 //# sourceMappingURL=AmountInput.js.map

package/dist/Modal/Sidebar/NordTradingView/TradeForm/AmountInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountInput.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/AmountInput.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAIjB;QAHjB,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,UAAU,gBAAA;IAEV,uBAAuB;IACvB,IAAM,kBAAkB,GAAG,UAAC,CAAsC;QAChE,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE7B,uCAAuC;QACvC,IAAI,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACpD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,4CAA4C;IAC5C,IAAM,kBAAkB,GAAG,UAAC,OAAe;QACzC,uEAAuE;QACvE,8DAA8D;QAC9D,QAAQ,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,gBAAO,SAAS,EAAC,uEAAuE,uBAEhF,EACR,cAAK,SAAS,EAAC,UAAU,YACvB,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAC,8UAA8U,EACxV,WAAW,EAAC,cAAc,GAC1B,GACE,EACN,cAAK,SAAS,EAAC,6BAA6B,YACzC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,CAClC,kBAEE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,kBAAkB,CAAC,OAAO,CAAC,EAA3B,CAA2B,EAC1C,SAAS,EAAC,sUAAsU,aAE/U,OAAO,UALH,OAAO,CAML,CACV,EATmC,CASnC,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\ninterface AmountInputProps {\n  amount: string;\n  onChange: (amount: string) => void;\n  marketInfo?: any;\n}\n\nexport default function AmountInput({\n  amount,\n  onChange,\n  marketInfo,\n}: AmountInputProps) {\n  // Handle amount change\n  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n\n    // Allow only numbers and decimal point\n    if (/^[0-9]*\\.?[0-9]*$/.test(value) || value === '') {\n      onChange(value);\n    }\n  };\n\n  // Calculate percentage of available balance\n  const handlePercentClick = (percent: number) => {\n    // This is a placeholder. In a real implementation, you would calculate\n    // the percentage of the available balance based on marketInfo\n    onChange((percent * 0.01).toString());\n  };\n\n  return (\n    <div className=\"relative z-20\">\n      <label className=\"block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1\">\n        Amount\n      </label>\n      <div className=\"relative\">\n        <input\n          type=\"text\"\n          value={amount}\n          onChange={handleAmountChange}\n          className=\"w-full px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600 focus:border-n1-gray-400 dark:focus:border-n1-gray-600 bg-white dark:bg-n1-dark-950 font-mono transition-colors duration-200\"\n          placeholder=\"Enter amount\"\n        />\n      </div>\n      <div className=\"grid grid-cols-4 gap-1 mt-1\">\n        {[25, 50, 75, 100].map((percent) => (\n          <button\n            key={percent}\n            type=\"button\"\n            onClick={() => handlePercentClick(percent)}\n            className=\"text-[10px] px-1 py-0.5 border border-n1-gray-200 dark:border-n1-gray-800 hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white rounded-sm text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200 bg-white dark:bg-n1-dark-950\"\n          >\n            {percent}%\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"AmountInput.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/AmountInput.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAIjB;QAHjB,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,UAAU,gBAAA;IAEV,uBAAuB;IACvB,IAAM,kBAAkB,GAAG,UAAC,CAAsC;QAChE,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE7B,uCAAuC;QACvC,IAAI,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACpD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,4CAA4C;IAC5C,IAAM,kBAAkB,GAAG,UAAC,OAAe;QACzC,uEAAuE;QACvE,8DAA8D;QAC9D,QAAQ,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,gBAAO,SAAS,EAAC,6EAA6E,uBAEtF,EACR,cAAK,SAAS,EAAC,UAAU,YACvB,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAC,yWAAyW,EACnX,WAAW,EAAC,cAAc,GAC1B,GACE,EACN,cAAK,SAAS,EAAC,6BAA6B,YACzC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,CAClC,kBAEE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,kBAAkB,CAAC,OAAO,CAAC,EAA3B,CAA2B,EAC1C,SAAS,EAAC,qVAAqV,aAE9V,OAAO,UALH,OAAO,CAML,CACV,EATmC,CASnC,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\ninterface AmountInputProps {\n  amount: string;\n  onChange: (amount: string) => void;\n  marketInfo?: any;\n}\n\nexport default function AmountInput({\n  amount,\n  onChange,\n  marketInfo,\n}: AmountInputProps) {\n  // Handle amount change\n  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n\n    // Allow only numbers and decimal point\n    if (/^[0-9]*\\.?[0-9]*$/.test(value) || value === '') {\n      onChange(value);\n    }\n  };\n\n  // Calculate percentage of available balance\n  const handlePercentClick = (percent: number) => {\n    // This is a placeholder. In a real implementation, you would calculate\n    // the percentage of the available balance based on marketInfo\n    onChange((percent * 0.01).toString());\n  };\n\n  return (\n    <div className=\"relative z-20\">\n      <label className=\"block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1\">\n        Amount\n      </label>\n      <div className=\"relative\">\n        <input\n          type=\"text\"\n          value={amount}\n          onChange={handleAmountChange}\n          className=\"w-full px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600 focus:border-n1-ww-gray-400 dark:focus:border-n1-ww-gray-600 bg-white dark:bg-n1-ww-gray-950 font-mono transition-colors duration-200\"\n          placeholder=\"Enter amount\"\n        />\n      </div>\n      <div className=\"grid grid-cols-4 gap-1 mt-1\">\n        {[25, 50, 75, 100].map((percent) => (\n          <button\n            key={percent}\n            type=\"button\"\n            onClick={() => handlePercentClick(percent)}\n            className=\"text-[10px] px-1 py-0.5 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white rounded-sm text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950\"\n          >\n            {percent}%\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/TradeForm/BuySellTabs.js

@@ -11,12 +11,12 @@ export default function BuySellTabs(_a) {
             setTimeout(function () { return setAnimating(false); }, 300);
         }
     };
-    return (_jsxs("div", { className: "flex rounded-sm overflow-hidden border border-n1-gray-200 dark:border-n1-gray-700 relative", children: [_jsx("div", { className: "absolute top-0 bottom-0 w-1/2 transition-all duration-300 ease-in-out ".concat(side === 'BUY'
+    return (_jsxs("div", { className: "flex rounded-sm overflow-hidden border border-n1-ww-gray-200 dark:border-n1-ww-gray-700 relative", children: [_jsx("div", { className: "absolute top-0 bottom-0 w-1/2 transition-all duration-300 ease-in-out ".concat(side === 'BUY'
                     ? 'left-0 bg-emerald-600 dark:bg-emerald-600 rounded-r-sm'
-                    : 'left-1/2 bg-red-700 dark:bg-red-700 rounded-l-sm') }), _jsxs("button", { type: "button", onClick: function () { return handleSideChange('BUY'); }, onMouseEnter: function () { return setHoveredSide('BUY'); }, onMouseLeave: function () { return setHoveredSide(null); }, className: "flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10", children: [_jsx("span", { className: "relative transition-colors duration-300 ".concat(side === 'BUY' ? 'text-white' : 'text-n1-gray-700 dark:text-n1-gray-300'), children: "Buy" }), side === 'BUY' && hoveredSide === 'BUY' && !animating && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer", style: {
+                    : 'left-1/2 bg-red-700 dark:bg-red-700 rounded-l-sm') }), _jsxs("button", { type: "button", onClick: function () { return handleSideChange('BUY'); }, onMouseEnter: function () { return setHoveredSide('BUY'); }, onMouseLeave: function () { return setHoveredSide(null); }, className: "flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10", children: [_jsx("span", { className: "relative transition-colors duration-300 ".concat(side === 'BUY' ? 'text-white' : 'text-n1-ww-gray-700 dark:text-n1-ww-gray-300'), children: "Buy" }), side === 'BUY' && hoveredSide === 'BUY' && !animating && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer", style: {
                             backgroundSize: '200% 100%',
                             animationDuration: '1.5s',
-                        } }))] }), _jsxs("button", { type: "button", onClick: function () { return handleSideChange('SELL'); }, onMouseEnter: function () { return setHoveredSide('SELL'); }, onMouseLeave: function () { return setHoveredSide(null); }, className: "flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10", children: [_jsx("span", { className: "relative transition-colors duration-300 ".concat(side === 'SELL' ? 'text-white' : 'text-n1-gray-700 dark:text-n1-gray-300'), children: "Sell" }), side === 'SELL' && hoveredSide === 'SELL' && !animating && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer", style: {
+                        } }))] }), _jsxs("button", { type: "button", onClick: function () { return handleSideChange('SELL'); }, onMouseEnter: function () { return setHoveredSide('SELL'); }, onMouseLeave: function () { return setHoveredSide(null); }, className: "flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10", children: [_jsx("span", { className: "relative transition-colors duration-300 ".concat(side === 'SELL' ? 'text-white' : 'text-n1-ww-gray-700 dark:text-n1-ww-gray-300'), children: "Sell" }), side === 'SELL' && hoveredSide === 'SELL' && !animating && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer", style: {
                             backgroundSize: '200% 100%',
                             animationDuration: '1.5s',
                         } }))] })] }));

package/dist/Modal/Sidebar/NordTradingView/TradeForm/BuySellTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuySellTabs.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/BuySellTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQjC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAoC;QAAlC,IAAI,UAAA,EAAE,QAAQ,cAAA;IAC5C,IAAA,KAAgC,QAAQ,CAAmB,IAAI,CAAC,EAA/D,WAAW,QAAA,EAAE,cAAc,QAAoC,CAAC;IACjE,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAElD,IAAM,gBAAgB,GAAG,UAAC,OAAkB;QAC1C,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,UAAU,CAAC,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,EAAE,GAAG,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,4FAA4F,aAEzG,cACE,SAAS,EAAE,gFACT,IAAI,KAAK,KAAK;oBACZ,CAAC,CAAC,wDAAwD;oBAC1D,CAAC,CAAC,kDAAkD,CACtD,GACF,EAGF,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,KAAK,CAAC,EAAvB,CAAuB,EACtC,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,KAAK,CAAC,EAArB,CAAqB,EACzC,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,IAAI,CAAC,EAApB,CAAoB,EACxC,SAAS,EAAC,0GAA0G,aAEpH,eACE,SAAS,EAAE,kDACT,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,wCAAwC,CACxE,oBAGG,EAEN,IAAI,KAAK,KAAK,IAAI,WAAW,KAAK,KAAK,IAAI,CAAC,SAAS,IAAI,CACxD,eACE,SAAS,EAAC,mJAAmJ,EAC7J,KAAK,EAAE;4BACL,cAAc,EAAE,WAAW;4BAC3B,iBAAiB,EAAE,MAAM;yBAC1B,GACD,CACH,IACM,EAGT,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,MAAM,CAAC,EAAxB,CAAwB,EACvC,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,EAC1C,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,IAAI,CAAC,EAApB,CAAoB,EACxC,SAAS,EAAC,0GAA0G,aAEpH,eACE,SAAS,EAAE,kDACT,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,wCAAwC,CACzE,qBAGG,EAEN,IAAI,KAAK,MAAM,IAAI,WAAW,KAAK,MAAM,IAAI,CAAC,SAAS,IAAI,CAC1D,eACE,SAAS,EAAC,mJAAmJ,EAC7J,KAAK,EAAE;4BACL,cAAc,EAAE,WAAW;4BAC3B,iBAAiB,EAAE,MAAM;yBAC1B,GACD,CACH,IACM,IACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from 'react';\nimport { OrderSide } from './TradeForm';\n\ninterface BuySellTabsProps {\n  side: OrderSide;\n  onChange: (side: OrderSide) => void;\n}\n\nexport default function BuySellTabs({ side, onChange }: BuySellTabsProps) {\n  const [hoveredSide, setHoveredSide] = useState<OrderSide | null>(null);\n  const [animating, setAnimating] = useState(false);\n\n  const handleSideChange = (newSide: OrderSide) => {\n    if (side !== newSide) {\n      setAnimating(true);\n      onChange(newSide);\n      setTimeout(() => setAnimating(false), 300);\n    }\n  };\n\n  return (\n    <div className=\"flex rounded-sm overflow-hidden border border-n1-gray-200 dark:border-n1-gray-700 relative\">\n      {/* Background Slider */}\n      <div\n        className={`absolute top-0 bottom-0 w-1/2 transition-all duration-300 ease-in-out ${\n          side === 'BUY'\n            ? 'left-0 bg-emerald-600 dark:bg-emerald-600 rounded-r-sm'\n            : 'left-1/2 bg-red-700 dark:bg-red-700 rounded-l-sm'\n        }`}\n      />\n\n      {/* Buy Button */}\n      <button\n        type=\"button\"\n        onClick={() => handleSideChange('BUY')}\n        onMouseEnter={() => setHoveredSide('BUY')}\n        onMouseLeave={() => setHoveredSide(null)}\n        className=\"flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10\"\n      >\n        <span\n          className={`relative transition-colors duration-300 ${\n            side === 'BUY' ? 'text-white' : 'text-n1-gray-700 dark:text-n1-gray-300'\n          }`}\n        >\n          Buy\n        </span>\n\n        {side === 'BUY' && hoveredSide === 'BUY' && !animating && (\n          <span\n            className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer\"\n            style={{\n              backgroundSize: '200% 100%',\n              animationDuration: '1.5s',\n            }}\n          />\n        )}\n      </button>\n\n      {/* Sell Button */}\n      <button\n        type=\"button\"\n        onClick={() => handleSideChange('SELL')}\n        onMouseEnter={() => setHoveredSide('SELL')}\n        onMouseLeave={() => setHoveredSide(null)}\n        className=\"flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10\"\n      >\n        <span\n          className={`relative transition-colors duration-300 ${\n            side === 'SELL' ? 'text-white' : 'text-n1-gray-700 dark:text-n1-gray-300'\n          }`}\n        >\n          Sell\n        </span>\n\n        {side === 'SELL' && hoveredSide === 'SELL' && !animating && (\n          <span\n            className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer\"\n            style={{\n              backgroundSize: '200% 100%',\n              animationDuration: '1.5s',\n            }}\n          />\n        )}\n      </button>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"BuySellTabs.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/BuySellTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQjC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAoC;QAAlC,IAAI,UAAA,EAAE,QAAQ,cAAA;IAC5C,IAAA,KAAgC,QAAQ,CAAmB,IAAI,CAAC,EAA/D,WAAW,QAAA,EAAE,cAAc,QAAoC,CAAC;IACjE,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAElD,IAAM,gBAAgB,GAAG,UAAC,OAAkB;QAC1C,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,UAAU,CAAC,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,EAAnB,CAAmB,EAAE,GAAG,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,kGAAkG,aAE/G,cACE,SAAS,EAAE,gFACT,IAAI,KAAK,KAAK;oBACZ,CAAC,CAAC,wDAAwD;oBAC1D,CAAC,CAAC,kDAAkD,CACtD,GACF,EAGF,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,KAAK,CAAC,EAAvB,CAAuB,EACtC,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,KAAK,CAAC,EAArB,CAAqB,EACzC,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,IAAI,CAAC,EAApB,CAAoB,EACxC,SAAS,EAAC,0GAA0G,aAEpH,eACE,SAAS,EAAE,kDACT,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,8CAA8C,CAC9E,oBAGG,EAEN,IAAI,KAAK,KAAK,IAAI,WAAW,KAAK,KAAK,IAAI,CAAC,SAAS,IAAI,CACxD,eACE,SAAS,EAAC,sJAAsJ,EAChK,KAAK,EAAE;4BACL,cAAc,EAAE,WAAW;4BAC3B,iBAAiB,EAAE,MAAM;yBAC1B,GACD,CACH,IACM,EAGT,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,MAAM,CAAC,EAAxB,CAAwB,EACvC,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,EAC1C,YAAY,EAAE,cAAM,OAAA,cAAc,CAAC,IAAI,CAAC,EAApB,CAAoB,EACxC,SAAS,EAAC,0GAA0G,aAEpH,eACE,SAAS,EAAE,kDACT,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,8CAA8C,CAC/E,qBAGG,EAEN,IAAI,KAAK,MAAM,IAAI,WAAW,KAAK,MAAM,IAAI,CAAC,SAAS,IAAI,CAC1D,eACE,SAAS,EAAC,sJAAsJ,EAChK,KAAK,EAAE;4BACL,cAAc,EAAE,WAAW;4BAC3B,iBAAiB,EAAE,MAAM;yBAC1B,GACD,CACH,IACM,IACL,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from 'react';\nimport { OrderSide } from './TradeForm';\n\ninterface BuySellTabsProps {\n  side: OrderSide;\n  onChange: (side: OrderSide) => void;\n}\n\nexport default function BuySellTabs({ side, onChange }: BuySellTabsProps) {\n  const [hoveredSide, setHoveredSide] = useState<OrderSide | null>(null);\n  const [animating, setAnimating] = useState(false);\n\n  const handleSideChange = (newSide: OrderSide) => {\n    if (side !== newSide) {\n      setAnimating(true);\n      onChange(newSide);\n      setTimeout(() => setAnimating(false), 300);\n    }\n  };\n\n  return (\n    <div className=\"flex rounded-sm overflow-hidden border border-n1-ww-gray-200 dark:border-n1-ww-gray-700 relative\">\n      {/* Background Slider */}\n      <div\n        className={`absolute top-0 bottom-0 w-1/2 transition-all duration-300 ease-in-out ${\n          side === 'BUY'\n            ? 'left-0 bg-emerald-600 dark:bg-emerald-600 rounded-r-sm'\n            : 'left-1/2 bg-red-700 dark:bg-red-700 rounded-l-sm'\n        }`}\n      />\n\n      {/* Buy Button */}\n      <button\n        type=\"button\"\n        onClick={() => handleSideChange('BUY')}\n        onMouseEnter={() => setHoveredSide('BUY')}\n        onMouseLeave={() => setHoveredSide(null)}\n        className=\"flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10\"\n      >\n        <span\n          className={`relative transition-colors duration-300 ${\n            side === 'BUY' ? 'text-white' : 'text-n1-ww-gray-700 dark:text-n1-ww-gray-300'\n          }`}\n        >\n          Buy\n        </span>\n\n        {side === 'BUY' && hoveredSide === 'BUY' && !animating && (\n          <span\n            className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer\"\n            style={{\n              backgroundSize: '200% 100%',\n              animationDuration: '1.5s',\n            }}\n          />\n        )}\n      </button>\n\n      {/* Sell Button */}\n      <button\n        type=\"button\"\n        onClick={() => handleSideChange('SELL')}\n        onMouseEnter={() => setHoveredSide('SELL')}\n        onMouseLeave={() => setHoveredSide(null)}\n        className=\"flex-1 py-2 text-center text-sm font-medium transition-colors duration-200 relative overflow-hidden z-10\"\n      >\n        <span\n          className={`relative transition-colors duration-300 ${\n            side === 'SELL' ? 'text-white' : 'text-n1-ww-gray-700 dark:text-n1-ww-gray-300'\n          }`}\n        >\n          Sell\n        </span>\n\n        {side === 'SELL' && hoveredSide === 'SELL' && !animating && (\n          <span\n            className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer\"\n            style={{\n              backgroundSize: '200% 100%',\n              animationDuration: '1.5s',\n            }}\n          />\n        )}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/TradeForm/FillModeSelector.js

@@ -61,20 +61,20 @@ export default function FillModeSelector(_a) {
             maxHeight: '200px',
             overflowY: 'auto',
         };
-        return createPortal(_jsx("div", { className: "bg-white dark:bg-n1-dark-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-700 overflow-hidden n1-animate-dropdown-open", style: dropdownStyle, children: fillModes.map(function (mode) { return (_jsxs("button", { type: "button", onClick: function () {
+        return createPortal(_jsx("div", { className: "bg-white dark:bg-n1-ww-dark-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-700 overflow-hidden n1-ww-animate-dropdown-open", style: dropdownStyle, children: fillModes.map(function (mode) { return (_jsxs("button", { type: "button", onClick: function () {
                     onFillModeChange(mode);
                     setIsFillModeOpen(false);
                 }, onMouseEnter: function () { return setHoveredFillMode(mode); }, onMouseLeave: function () { return setHoveredFillMode(null); }, className: "w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ".concat(fillMode === mode
-                    ? 'bg-n1-gray-100 dark:bg-n1-gray-800 font-medium text-n1-gray-900 dark:text-white'
-                    : 'text-n1-gray-900 dark:text-n1-gray-100 hover:bg-n1-gray-50 dark:hover:bg-n1-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(fillMode === mode
+                    ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 font-medium text-n1-ww-gray-900 dark:text-white'
+                    : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:bg-n1-ww-gray-50 dark:hover:bg-n1-ww-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(fillMode === mode
                                     ? 'bg-emerald-600 dark:bg-emerald-500'
-                                    : 'bg-transparent') }), _jsxs("div", { className: "flex flex-col ml-1", children: [_jsx("span", { className: "font-medium", children: fillModeInfo[mode].displayName }), _jsx("span", { className: "text-[10px] text-n1-gray-500 dark:text-n1-gray-400", children: fillModeInfo[mode].description })] })] }), fillMode === mode && hoveredFillMode === mode && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer dark:via-n1-gray-300", style: {
+                                    : 'bg-transparent') }), _jsxs("div", { className: "flex flex-col ml-1", children: [_jsx("span", { className: "font-medium", children: fillModeInfo[mode].displayName }), _jsx("span", { className: "text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: fillModeInfo[mode].description })] })] }), fillMode === mode && hoveredFillMode === mode && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer dark:via-n1-ww-gray-300", style: {
                             backgroundSize: '200% 100%',
                             animationDuration: '1.5s',
                         } }))] }, mode)); }) }), document.body);
     };
-    return (_jsxs("div", { className: "relative", ref: fillModeRef, children: [_jsx("label", { className: "block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1", children: "Order Type" }), _jsxs("button", { type: "button", onClick: function () { return setIsFillModeOpen(!isFillModeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-700 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 hover:border-n1-gray-400 dark:hover:border-n1-gray-500 transition-colors duration-200 bg-white dark:bg-n1-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600", children: [_jsx("span", { children: fillModeInfo[fillMode].displayName }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isFillModeOpen
-                            ? 'rotate-180 text-n1-gray-700 dark:text-n1-gray-300'
-                            : 'text-n1-gray-500 dark:text-n1-gray-400') })] }), renderFillModeDropdown()] }));
+    return (_jsxs("div", { className: "relative", ref: fillModeRef, children: [_jsx("label", { className: "block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1", children: "Order Type" }), _jsxs("button", { type: "button", onClick: function () { return setIsFillModeOpen(!isFillModeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-700 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:border-n1-ww-gray-400 dark:hover:border-n1-ww-gray-500 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600", children: [_jsx("span", { children: fillModeInfo[fillMode].displayName }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isFillModeOpen
+                            ? 'rotate-180 text-n1-ww-gray-700 dark:text-n1-ww-gray-300'
+                            : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400') })] }), renderFillModeDropdown()] }));
 }
 //# sourceMappingURL=FillModeSelector.js.map

package/dist/Modal/Sidebar/NordTradingView/TradeForm/FillModeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"FillModeSelector.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/FillModeSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChevronDown } from 'lucide-react';\nimport { FillMode } from './TradeForm';\n\ninterface FillModeSelectorProps {\n  fillMode: FillMode;\n  onFillModeChange: (mode: FillMode) => void;\n}\n\nexport default function FillModeSelector({\n  fillMode,\n  onFillModeChange,\n}: FillModeSelectorProps) {\n  const [isFillModeOpen, setIsFillModeOpen] = useState(false);\n  const [hoveredFillMode, setHoveredFillMode] = useState<FillMode | null>(null);\n  const fillModeRef = useRef<HTMLDivElement>(null);\n  const [fillModeRect, setFillModeRect] = useState<DOMRect | null>(null);\n\n  // Update rect when dropdown opens\n  useEffect(() => {\n    if (isFillModeOpen && fillModeRef.current) {\n      setFillModeRect(fillModeRef.current.getBoundingClientRect());\n    }\n  }, [isFillModeOpen]);\n\n  // Close dropdowns when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        fillModeRef.current &&\n        !fillModeRef.current.contains(event.target as Node)\n      ) {\n        setIsFillModeOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  // Fill mode options\n  const fillModes: FillMode[] = ['GTC', 'POST_ONLY', 'IOC', 'FOK'];\n\n  // Fill mode descriptions and display names\n  const fillModeInfo: Record<\n    FillMode,\n    { description: string; displayName: string }\n  > = {\n    GTC: {\n      displayName: 'Limit',\n      description: 'Good Till Cancelled',\n    },\n    POST_ONLY: {\n      displayName: 'Post Only',\n      description: 'Only maker orders',\n    },\n    IOC: {\n      displayName: 'Market',\n      description: 'Immediate or Cancel',\n    },\n    FOK: {\n      displayName: 'Fill or Kill',\n      description: 'Fill completely or cancel',\n    },\n  };\n\n  // Render fill mode dropdown via portal\n  const renderFillModeDropdown = () => {\n    if (!isFillModeOpen || !fillModeRect) return null;\n\n    const dropdownStyle: React.CSSProperties = {\n      position: 'fixed',\n      top: `${fillModeRect.bottom + window.scrollY}px`,\n      left: `${fillModeRect.left + window.scrollX}px`,\n      width: `${fillModeRect.width}px`,\n      zIndex: 9999,\n      maxHeight: '200px',\n      overflowY: 'auto',\n    };\n\n    return createPortal(\n      <div\n        className=\"bg-white dark:bg-n1-dark-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-700 overflow-hidden n1-animate-dropdown-open\"\n        style={dropdownStyle}\n      >\n        {fillModes.map((mode) => (\n          <button\n            key={mode}\n            type=\"button\"\n            onClick={() => {\n              onFillModeChange(mode);\n              setIsFillModeOpen(false);\n            }}\n            onMouseEnter={() => setHoveredFillMode(mode)}\n            onMouseLeave={() => setHoveredFillMode(null)}\n            className={`w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ${\n              fillMode === mode\n                ? 'bg-n1-gray-100 dark:bg-n1-gray-800 font-medium text-n1-gray-900 dark:text-white'\n                : 'text-n1-gray-900 dark:text-n1-gray-100 hover:bg-n1-gray-50 dark:hover:bg-n1-gray-800'\n            }`}\n          >\n            <div className=\"flex items-center\">\n              <div\n                className={`w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ${\n                  fillMode === mode\n                    ? 'bg-emerald-600 dark:bg-emerald-500'\n                    : 'bg-transparent'\n                }`}\n              />\n              <div className=\"flex flex-col ml-1\">\n                <span className=\"font-medium\">\n                  {fillModeInfo[mode].displayName}\n                </span>\n                <span className=\"text-[10px] text-n1-gray-500 dark:text-n1-gray-400\">\n                  {fillModeInfo[mode].description}\n                </span>\n              </div>\n            </div>\n\n            {fillMode === mode && hoveredFillMode === mode && (\n              <span\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer dark:via-n1-gray-300\"\n                style={{\n                  backgroundSize: '200% 100%',\n                  animationDuration: '1.5s',\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>,\n      document.body\n    );\n  };\n\n  return (\n    <div className=\"relative\" ref={fillModeRef}>\n      <label className=\"block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1\">\n        Order Type\n      </label>\n      <button\n        type=\"button\"\n        onClick={() => setIsFillModeOpen(!isFillModeOpen)}\n        className=\"w-full flex items-center justify-between px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-700 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 hover:border-n1-gray-400 dark:hover:border-n1-gray-500 transition-colors duration-200 bg-white dark:bg-n1-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600\"\n      >\n        <span>{fillModeInfo[fillMode].displayName}</span>\n        <ChevronDown\n          size={14}\n          className={`transition-transform duration-200 ${\n            isFillModeOpen\n              ? 'rotate-180 text-n1-gray-700 dark:text-n1-gray-300'\n              : 'text-n1-gray-500 dark:text-n1-gray-400'\n          }`}\n        />\n      </button>\n\n      {renderFillModeDropdown()}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"FillModeSelector.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/FillModeSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChevronDown } from 'lucide-react';\nimport { FillMode } from './TradeForm';\n\ninterface FillModeSelectorProps {\n  fillMode: FillMode;\n  onFillModeChange: (mode: FillMode) => void;\n}\n\nexport default function FillModeSelector({\n  fillMode,\n  onFillModeChange,\n}: FillModeSelectorProps) {\n  const [isFillModeOpen, setIsFillModeOpen] = useState(false);\n  const [hoveredFillMode, setHoveredFillMode] = useState<FillMode | null>(null);\n  const fillModeRef = useRef<HTMLDivElement>(null);\n  const [fillModeRect, setFillModeRect] = useState<DOMRect | null>(null);\n\n  // Update rect when dropdown opens\n  useEffect(() => {\n    if (isFillModeOpen && fillModeRef.current) {\n      setFillModeRect(fillModeRef.current.getBoundingClientRect());\n    }\n  }, [isFillModeOpen]);\n\n  // Close dropdowns when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        fillModeRef.current &&\n        !fillModeRef.current.contains(event.target as Node)\n      ) {\n        setIsFillModeOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  // Fill mode options\n  const fillModes: FillMode[] = ['GTC', 'POST_ONLY', 'IOC', 'FOK'];\n\n  // Fill mode descriptions and display names\n  const fillModeInfo: Record<\n    FillMode,\n    { description: string; displayName: string }\n  > = {\n    GTC: {\n      displayName: 'Limit',\n      description: 'Good Till Cancelled',\n    },\n    POST_ONLY: {\n      displayName: 'Post Only',\n      description: 'Only maker orders',\n    },\n    IOC: {\n      displayName: 'Market',\n      description: 'Immediate or Cancel',\n    },\n    FOK: {\n      displayName: 'Fill or Kill',\n      description: 'Fill completely or cancel',\n    },\n  };\n\n  // Render fill mode dropdown via portal\n  const renderFillModeDropdown = () => {\n    if (!isFillModeOpen || !fillModeRect) return null;\n\n    const dropdownStyle: React.CSSProperties = {\n      position: 'fixed',\n      top: `${fillModeRect.bottom + window.scrollY}px`,\n      left: `${fillModeRect.left + window.scrollX}px`,\n      width: `${fillModeRect.width}px`,\n      zIndex: 9999,\n      maxHeight: '200px',\n      overflowY: 'auto',\n    };\n\n    return createPortal(\n      <div\n        className=\"bg-white dark:bg-n1-ww-dark-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-700 overflow-hidden n1-ww-animate-dropdown-open\"\n        style={dropdownStyle}\n      >\n        {fillModes.map((mode) => (\n          <button\n            key={mode}\n            type=\"button\"\n            onClick={() => {\n              onFillModeChange(mode);\n              setIsFillModeOpen(false);\n            }}\n            onMouseEnter={() => setHoveredFillMode(mode)}\n            onMouseLeave={() => setHoveredFillMode(null)}\n            className={`w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ${\n              fillMode === mode\n                ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 font-medium text-n1-ww-gray-900 dark:text-white'\n                : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:bg-n1-ww-gray-50 dark:hover:bg-n1-ww-gray-800'\n            }`}\n          >\n            <div className=\"flex items-center\">\n              <div\n                className={`w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ${\n                  fillMode === mode\n                    ? 'bg-emerald-600 dark:bg-emerald-500'\n                    : 'bg-transparent'\n                }`}\n              />\n              <div className=\"flex flex-col ml-1\">\n                <span className=\"font-medium\">\n                  {fillModeInfo[mode].displayName}\n                </span>\n                <span className=\"text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n                  {fillModeInfo[mode].description}\n                </span>\n              </div>\n            </div>\n\n            {fillMode === mode && hoveredFillMode === mode && (\n              <span\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer dark:via-n1-ww-gray-300\"\n                style={{\n                  backgroundSize: '200% 100%',\n                  animationDuration: '1.5s',\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>,\n      document.body\n    );\n  };\n\n  return (\n    <div className=\"relative\" ref={fillModeRef}>\n      <label className=\"block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1\">\n        Order Type\n      </label>\n      <button\n        type=\"button\"\n        onClick={() => setIsFillModeOpen(!isFillModeOpen)}\n        className=\"w-full flex items-center justify-between px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-700 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:border-n1-ww-gray-400 dark:hover:border-n1-ww-gray-500 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600\"\n      >\n        <span>{fillModeInfo[fillMode].displayName}</span>\n        <ChevronDown\n          size={14}\n          className={`transition-transform duration-200 ${\n            isFillModeOpen\n              ? 'rotate-180 text-n1-ww-gray-700 dark:text-n1-ww-gray-300'\n              : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400'\n          }`}\n        />\n      </button>\n\n      {renderFillModeDropdown()}\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/TradeForm/OrderTypeSelector.js

@@ -64,14 +64,14 @@ export default function FillModeSelector(_a) {
             maxHeight: '200px',
             overflowY: 'auto',
         };
-        return createPortal(_jsx("div", { className: "bg-white dark:bg-n1-dark-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-800 overflow-hidden n1-animate-dropdown-open", style: dropdownStyle, children: orderTypes.map(function (type) { return (_jsxs("button", { type: "button", onClick: function () {
+        return createPortal(_jsx("div", { className: "bg-white dark:bg-n1-ww-dark-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden n1-ww-animate-dropdown-open", style: dropdownStyle, children: orderTypes.map(function (type) { return (_jsxs("button", { type: "button", onClick: function () {
                     onOrderTypeChange(type);
                     setIsOrderTypeOpen(false);
                 }, onMouseEnter: function () { return setHoveredOrderType(type); }, onMouseLeave: function () { return setHoveredOrderType(null); }, className: "w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ".concat(orderType === type
-                    ? 'bg-n1-gray-100 dark:bg-n1-gray-800 font-medium text-n1-gray-900 dark:text-white'
-                    : 'text-n1-gray-900 dark:text-n1-gray-100 hover:bg-n1-gray-50 dark:hover:bg-n1-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(orderType === type
+                    ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 font-medium text-n1-ww-gray-900 dark:text-white'
+                    : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:bg-n1-ww-gray-50 dark:hover:bg-n1-ww-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(orderType === type
                                     ? 'bg-emerald-600 dark:bg-emerald-500'
-                                    : 'bg-transparent') }), _jsx("span", { className: "ml-1", children: type })] }), orderType === type && hoveredOrderType === type && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer dark:via-n1-gray-300", style: {
+                                    : 'bg-transparent') }), _jsx("span", { className: "ml-1", children: type })] }), orderType === type && hoveredOrderType === type && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer dark:via-n1-ww-gray-300", style: {
                             backgroundSize: '200% 100%',
                             animationDuration: '1.5s',
                         } }))] }, type)); }) }), document.body);
@@ -89,22 +89,22 @@ export default function FillModeSelector(_a) {
             maxHeight: '200px',
             overflowY: 'auto',
         };
-        return createPortal(_jsx("div", { className: "bg-white dark:bg-n1-dark-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-800 overflow-hidden n1-animate-dropdown-open", style: dropdownStyle, children: fillModes.map(function (mode) { return (_jsxs("button", { type: "button", onClick: function () {
+        return createPortal(_jsx("div", { className: "bg-white dark:bg-n1-ww-dark-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden n1-ww-animate-dropdown-open", style: dropdownStyle, children: fillModes.map(function (mode) { return (_jsxs("button", { type: "button", onClick: function () {
                     onFillModeChange(mode);
                     setIsFillModeOpen(false);
                 }, onMouseEnter: function () { return setHoveredFillMode(mode); }, onMouseLeave: function () { return setHoveredFillMode(null); }, className: "w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ".concat(fillMode === mode
-                    ? 'bg-n1-gray-100 dark:bg-n1-gray-800 font-medium text-n1-gray-900 dark:text-white'
-                    : 'text-n1-gray-900 dark:text-n1-gray-100 hover:bg-n1-gray-50 dark:hover:bg-n1-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(fillMode === mode
+                    ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 font-medium text-n1-ww-gray-900 dark:text-white'
+                    : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:bg-n1-ww-gray-50 dark:hover:bg-n1-ww-gray-800'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ".concat(fillMode === mode
                                     ? 'bg-emerald-600 dark:bg-emerald-500'
-                                    : 'bg-transparent') }), _jsxs("div", { className: "flex flex-col ml-1", children: [_jsx("span", { children: mode }), _jsx("span", { className: "text-[10px] text-n1-gray-500 dark:text-n1-gray-400", children: fillModeDescriptions[mode] })] })] }), fillMode === mode && hoveredFillMode === mode && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer dark:via-n1-gray-300", style: {
+                                    : 'bg-transparent') }), _jsxs("div", { className: "flex flex-col ml-1", children: [_jsx("span", { children: mode }), _jsx("span", { className: "text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400", children: fillModeDescriptions[mode] })] })] }), fillMode === mode && hoveredFillMode === mode && (_jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer dark:via-n1-ww-gray-300", style: {
                             backgroundSize: '200% 100%',
                             animationDuration: '1.5s',
                         } }))] }, mode)); }) }), document.body);
     };
-    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "relative", ref: orderTypeRef, children: [_jsx("label", { className: "block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1", children: "Order Type" }), _jsxs("button", { type: "button", onClick: function () { return setIsOrderTypeOpen(!isOrderTypeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 hover:border-n1-gray-400 dark:hover:border-n1-gray-500 transition-colors duration-200 bg-white dark:bg-n1-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600", children: [_jsx("span", { children: orderType }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isOrderTypeOpen
-                                    ? 'rotate-180 text-n1-gray-700 dark:text-n1-gray-300'
-                                    : 'text-n1-gray-500 dark:text-n1-gray-400') })] }), renderOrderTypeDropdown()] }), orderType === 'LIMIT' && (_jsxs("div", { className: "relative", ref: fillModeRef, children: [_jsx("label", { className: "block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1", children: "Fill Mode" }), _jsxs("button", { type: "button", onClick: function () { return setIsFillModeOpen(!isFillModeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 hover:border-n1-gray-400 dark:hover:border-n1-gray-500 transition-colors duration-200 bg-white dark:bg-n1-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600", children: [_jsx("span", { children: fillMode }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isFillModeOpen
-                                    ? 'rotate-180 text-n1-gray-700 dark:text-n1-gray-300'
-                                    : 'text-n1-gray-500 dark:text-n1-gray-400') })] }), renderFillModeDropdown()] }))] }));
+    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "relative", ref: orderTypeRef, children: [_jsx("label", { className: "block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1", children: "Order Type" }), _jsxs("button", { type: "button", onClick: function () { return setIsOrderTypeOpen(!isOrderTypeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:border-n1-ww-gray-400 dark:hover:border-n1-ww-gray-500 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600", children: [_jsx("span", { children: orderType }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isOrderTypeOpen
+                                    ? 'rotate-180 text-n1-ww-gray-700 dark:text-n1-ww-gray-300'
+                                    : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400') })] }), renderOrderTypeDropdown()] }), orderType === 'LIMIT' && (_jsxs("div", { className: "relative", ref: fillModeRef, children: [_jsx("label", { className: "block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1", children: "Fill Mode" }), _jsxs("button", { type: "button", onClick: function () { return setIsFillModeOpen(!isFillModeOpen); }, className: "w-full flex items-center justify-between px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:border-n1-ww-gray-400 dark:hover:border-n1-ww-gray-500 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600", children: [_jsx("span", { children: fillMode }), _jsx(ChevronDown, { size: 14, className: "transition-transform duration-200 ".concat(isFillModeOpen
+                                    ? 'rotate-180 text-n1-ww-gray-700 dark:text-n1-ww-gray-300'
+                                    : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400') })] }), renderFillModeDropdown()] }))] }));
 }
 //# sourceMappingURL=OrderTypeSelector.js.map

package/dist/Modal/Sidebar/NordTradingView/TradeForm/OrderTypeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderTypeSelector.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/OrderTypeSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChevronDown } from 'lucide-react';\nimport { OrderType, FillMode } from './TradeForm';\n\ninterface FillModeSelectorProps {\n  orderType: OrderType;\n  fillMode: FillMode;\n  onOrderTypeChange: (type: OrderType) => void;\n  onFillModeChange: (mode: FillMode) => void;\n}\n\nexport default function FillModeSelector({\n  orderType,\n  fillMode,\n  onOrderTypeChange,\n  onFillModeChange,\n}: FillModeSelectorProps) {\n  const [isOrderTypeOpen, setIsOrderTypeOpen] = useState(false);\n  const [isFillModeOpen, setIsFillModeOpen] = useState(false);\n  const [hoveredOrderType, setHoveredOrderType] = useState<OrderType | null>(\n    null\n  );\n  const [hoveredFillMode, setHoveredFillMode] = useState<FillMode | null>(null);\n  const orderTypeRef = useRef<HTMLDivElement>(null);\n  const fillModeRef = useRef<HTMLDivElement>(null);\n  const [orderTypeRect, setOrderTypeRect] = useState<DOMRect | null>(null);\n  const [fillModeRect, setFillModeRect] = useState<DOMRect | null>(null);\n\n  // Update rect when dropdown opens\n  useEffect(() => {\n    if (isOrderTypeOpen && orderTypeRef.current) {\n      setOrderTypeRect(orderTypeRef.current.getBoundingClientRect());\n    }\n  }, [isOrderTypeOpen]);\n\n  useEffect(() => {\n    if (isFillModeOpen && fillModeRef.current) {\n      setFillModeRect(fillModeRef.current.getBoundingClientRect());\n    }\n  }, [isFillModeOpen]);\n\n  // Close dropdowns when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        orderTypeRef.current &&\n        !orderTypeRef.current.contains(event.target as Node)\n      ) {\n        setIsOrderTypeOpen(false);\n      }\n      if (\n        fillModeRef.current &&\n        !fillModeRef.current.contains(event.target as Node)\n      ) {\n        setIsFillModeOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  // Order type options\n  const orderTypes: OrderType[] = ['LIMIT', 'MARKET'];\n\n  // Fill mode options\n  const fillModes: FillMode[] = ['GTC', 'IOC', 'FOK', 'POST_ONLY'];\n\n  // Fill mode descriptions\n  const fillModeDescriptions: Record<FillMode, string> = {\n    GTC: 'Good Till Cancelled',\n    IOC: 'Immediate or Cancel',\n    FOK: 'Fill or Kill',\n    POST_ONLY: 'Post Only',\n  };\n\n  // Render dropdown via portal\n  const renderOrderTypeDropdown = () => {\n    if (!isOrderTypeOpen || !orderTypeRect) return null;\n\n    const dropdownStyle: React.CSSProperties = {\n      position: 'fixed',\n      top: `${orderTypeRect.bottom + window.scrollY}px`,\n      left: `${orderTypeRect.left + window.scrollX}px`,\n      width: `${orderTypeRect.width}px`,\n      zIndex: 9999,\n      maxHeight: '200px',\n      overflowY: 'auto',\n    };\n\n    return createPortal(\n      <div\n        className=\"bg-white dark:bg-n1-dark-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-800 overflow-hidden n1-animate-dropdown-open\"\n        style={dropdownStyle}\n      >\n        {orderTypes.map((type) => (\n          <button\n            key={type}\n            type=\"button\"\n            onClick={() => {\n              onOrderTypeChange(type);\n              setIsOrderTypeOpen(false);\n            }}\n            onMouseEnter={() => setHoveredOrderType(type)}\n            onMouseLeave={() => setHoveredOrderType(null)}\n            className={`w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ${\n              orderType === type\n                ? 'bg-n1-gray-100 dark:bg-n1-gray-800 font-medium text-n1-gray-900 dark:text-white'\n                : 'text-n1-gray-900 dark:text-n1-gray-100 hover:bg-n1-gray-50 dark:hover:bg-n1-gray-800'\n            }`}\n          >\n            <div className=\"flex items-center\">\n              <div\n                className={`w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ${\n                  orderType === type\n                    ? 'bg-emerald-600 dark:bg-emerald-500'\n                    : 'bg-transparent'\n                }`}\n              />\n              <span className=\"ml-1\">{type}</span>\n            </div>\n\n            {orderType === type && hoveredOrderType === type && (\n              <span\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer dark:via-n1-gray-300\"\n                style={{\n                  backgroundSize: '200% 100%',\n                  animationDuration: '1.5s',\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>,\n      document.body\n    );\n  };\n\n  // Render fill mode dropdown via portal\n  const renderFillModeDropdown = () => {\n    if (!isFillModeOpen || !fillModeRect) return null;\n\n    const dropdownStyle: React.CSSProperties = {\n      position: 'fixed',\n      top: `${fillModeRect.bottom + window.scrollY}px`,\n      left: `${fillModeRect.left + window.scrollX}px`,\n      width: `${fillModeRect.width}px`,\n      zIndex: 9999,\n      maxHeight: '200px',\n      overflowY: 'auto',\n    };\n\n    return createPortal(\n      <div\n        className=\"bg-white dark:bg-n1-dark-950 rounded-sm shadow-lg border border-n1-gray-200 dark:border-n1-gray-800 overflow-hidden n1-animate-dropdown-open\"\n        style={dropdownStyle}\n      >\n        {fillModes.map((mode) => (\n          <button\n            key={mode}\n            type=\"button\"\n            onClick={() => {\n              onFillModeChange(mode);\n              setIsFillModeOpen(false);\n            }}\n            onMouseEnter={() => setHoveredFillMode(mode)}\n            onMouseLeave={() => setHoveredFillMode(null)}\n            className={`w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ${\n              fillMode === mode\n                ? 'bg-n1-gray-100 dark:bg-n1-gray-800 font-medium text-n1-gray-900 dark:text-white'\n                : 'text-n1-gray-900 dark:text-n1-gray-100 hover:bg-n1-gray-50 dark:hover:bg-n1-gray-800'\n            }`}\n          >\n            <div className=\"flex items-center\">\n              <div\n                className={`w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ${\n                  fillMode === mode\n                    ? 'bg-emerald-600 dark:bg-emerald-500'\n                    : 'bg-transparent'\n                }`}\n              />\n              <div className=\"flex flex-col ml-1\">\n                <span>{mode}</span>\n                <span className=\"text-[10px] text-n1-gray-500 dark:text-n1-gray-400\">\n                  {fillModeDescriptions[mode]}\n                </span>\n              </div>\n            </div>\n\n            {fillMode === mode && hoveredFillMode === mode && (\n              <span\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-animate-shimmer dark:via-n1-gray-300\"\n                style={{\n                  backgroundSize: '200% 100%',\n                  animationDuration: '1.5s',\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>,\n      document.body\n    );\n  };\n\n  return (\n    <div className=\"grid grid-cols-2 gap-3\">\n      {/* Order Type Selector */}\n      <div className=\"relative\" ref={orderTypeRef}>\n        <label className=\"block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1\">\n          Order Type\n        </label>\n        <button\n          type=\"button\"\n          onClick={() => setIsOrderTypeOpen(!isOrderTypeOpen)}\n          className=\"w-full flex items-center justify-between px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 hover:border-n1-gray-400 dark:hover:border-n1-gray-500 transition-colors duration-200 bg-white dark:bg-n1-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600\"\n        >\n          <span>{orderType}</span>\n          <ChevronDown\n            size={14}\n            className={`transition-transform duration-200 ${\n              isOrderTypeOpen\n                ? 'rotate-180 text-n1-gray-700 dark:text-n1-gray-300'\n                : 'text-n1-gray-500 dark:text-n1-gray-400'\n            }`}\n          />\n        </button>\n\n        {renderOrderTypeDropdown()}\n      </div>\n\n      {/* Fill Mode Selector (only for LIMIT orders) */}\n      {orderType === 'LIMIT' && (\n        <div className=\"relative\" ref={fillModeRef}>\n          <label className=\"block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1\">\n            Fill Mode\n          </label>\n          <button\n            type=\"button\"\n            onClick={() => setIsFillModeOpen(!isFillModeOpen)}\n            className=\"w-full flex items-center justify-between px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 hover:border-n1-gray-400 dark:hover:border-n1-gray-500 transition-colors duration-200 bg-white dark:bg-n1-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600\"\n          >\n            <span>{fillMode}</span>\n            <ChevronDown\n              size={14}\n              className={`transition-transform duration-200 ${\n                isFillModeOpen\n                  ? 'rotate-180 text-n1-gray-700 dark:text-n1-gray-300'\n                  : 'text-n1-gray-500 dark:text-n1-gray-400'\n              }`}\n            />\n          </button>\n\n          {renderFillModeDropdown()}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"OrderTypeSelector.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/OrderTypeSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ChevronDown } from 'lucide-react';\nimport { OrderType, FillMode } from './TradeForm';\n\ninterface FillModeSelectorProps {\n  orderType: OrderType;\n  fillMode: FillMode;\n  onOrderTypeChange: (type: OrderType) => void;\n  onFillModeChange: (mode: FillMode) => void;\n}\n\nexport default function FillModeSelector({\n  orderType,\n  fillMode,\n  onOrderTypeChange,\n  onFillModeChange,\n}: FillModeSelectorProps) {\n  const [isOrderTypeOpen, setIsOrderTypeOpen] = useState(false);\n  const [isFillModeOpen, setIsFillModeOpen] = useState(false);\n  const [hoveredOrderType, setHoveredOrderType] = useState<OrderType | null>(\n    null\n  );\n  const [hoveredFillMode, setHoveredFillMode] = useState<FillMode | null>(null);\n  const orderTypeRef = useRef<HTMLDivElement>(null);\n  const fillModeRef = useRef<HTMLDivElement>(null);\n  const [orderTypeRect, setOrderTypeRect] = useState<DOMRect | null>(null);\n  const [fillModeRect, setFillModeRect] = useState<DOMRect | null>(null);\n\n  // Update rect when dropdown opens\n  useEffect(() => {\n    if (isOrderTypeOpen && orderTypeRef.current) {\n      setOrderTypeRect(orderTypeRef.current.getBoundingClientRect());\n    }\n  }, [isOrderTypeOpen]);\n\n  useEffect(() => {\n    if (isFillModeOpen && fillModeRef.current) {\n      setFillModeRect(fillModeRef.current.getBoundingClientRect());\n    }\n  }, [isFillModeOpen]);\n\n  // Close dropdowns when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        orderTypeRef.current &&\n        !orderTypeRef.current.contains(event.target as Node)\n      ) {\n        setIsOrderTypeOpen(false);\n      }\n      if (\n        fillModeRef.current &&\n        !fillModeRef.current.contains(event.target as Node)\n      ) {\n        setIsFillModeOpen(false);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, []);\n\n  // Order type options\n  const orderTypes: OrderType[] = ['LIMIT', 'MARKET'];\n\n  // Fill mode options\n  const fillModes: FillMode[] = ['GTC', 'IOC', 'FOK', 'POST_ONLY'];\n\n  // Fill mode descriptions\n  const fillModeDescriptions: Record<FillMode, string> = {\n    GTC: 'Good Till Cancelled',\n    IOC: 'Immediate or Cancel',\n    FOK: 'Fill or Kill',\n    POST_ONLY: 'Post Only',\n  };\n\n  // Render dropdown via portal\n  const renderOrderTypeDropdown = () => {\n    if (!isOrderTypeOpen || !orderTypeRect) return null;\n\n    const dropdownStyle: React.CSSProperties = {\n      position: 'fixed',\n      top: `${orderTypeRect.bottom + window.scrollY}px`,\n      left: `${orderTypeRect.left + window.scrollX}px`,\n      width: `${orderTypeRect.width}px`,\n      zIndex: 9999,\n      maxHeight: '200px',\n      overflowY: 'auto',\n    };\n\n    return createPortal(\n      <div\n        className=\"bg-white dark:bg-n1-ww-dark-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden n1-ww-animate-dropdown-open\"\n        style={dropdownStyle}\n      >\n        {orderTypes.map((type) => (\n          <button\n            key={type}\n            type=\"button\"\n            onClick={() => {\n              onOrderTypeChange(type);\n              setIsOrderTypeOpen(false);\n            }}\n            onMouseEnter={() => setHoveredOrderType(type)}\n            onMouseLeave={() => setHoveredOrderType(null)}\n            className={`w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ${\n              orderType === type\n                ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 font-medium text-n1-ww-gray-900 dark:text-white'\n                : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:bg-n1-ww-gray-50 dark:hover:bg-n1-ww-gray-800'\n            }`}\n          >\n            <div className=\"flex items-center\">\n              <div\n                className={`w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ${\n                  orderType === type\n                    ? 'bg-emerald-600 dark:bg-emerald-500'\n                    : 'bg-transparent'\n                }`}\n              />\n              <span className=\"ml-1\">{type}</span>\n            </div>\n\n            {orderType === type && hoveredOrderType === type && (\n              <span\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer dark:via-n1-ww-gray-300\"\n                style={{\n                  backgroundSize: '200% 100%',\n                  animationDuration: '1.5s',\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>,\n      document.body\n    );\n  };\n\n  // Render fill mode dropdown via portal\n  const renderFillModeDropdown = () => {\n    if (!isFillModeOpen || !fillModeRect) return null;\n\n    const dropdownStyle: React.CSSProperties = {\n      position: 'fixed',\n      top: `${fillModeRect.bottom + window.scrollY}px`,\n      left: `${fillModeRect.left + window.scrollX}px`,\n      width: `${fillModeRect.width}px`,\n      zIndex: 9999,\n      maxHeight: '200px',\n      overflowY: 'auto',\n    };\n\n    return createPortal(\n      <div\n        className=\"bg-white dark:bg-n1-ww-dark-950 rounded-sm shadow-lg border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 overflow-hidden n1-ww-animate-dropdown-open\"\n        style={dropdownStyle}\n      >\n        {fillModes.map((mode) => (\n          <button\n            key={mode}\n            type=\"button\"\n            onClick={() => {\n              onFillModeChange(mode);\n              setIsFillModeOpen(false);\n            }}\n            onMouseEnter={() => setHoveredFillMode(mode)}\n            onMouseLeave={() => setHoveredFillMode(null)}\n            className={`w-full text-left px-3 py-2 text-sm cursor-pointer transition-colors duration-200 relative overflow-hidden ${\n              fillMode === mode\n                ? 'bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 font-medium text-n1-ww-gray-900 dark:text-white'\n                : 'text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:bg-n1-ww-gray-50 dark:hover:bg-n1-ww-gray-800'\n            }`}\n          >\n            <div className=\"flex items-center\">\n              <div\n                className={`w-1 h-10 absolute left-0 top-0 bottom-0 my-auto rounded-r-sm ${\n                  fillMode === mode\n                    ? 'bg-emerald-600 dark:bg-emerald-500'\n                    : 'bg-transparent'\n                }`}\n              />\n              <div className=\"flex flex-col ml-1\">\n                <span>{mode}</span>\n                <span className=\"text-[10px] text-n1-ww-gray-500 dark:text-n1-ww-gray-400\">\n                  {fillModeDescriptions[mode]}\n                </span>\n              </div>\n            </div>\n\n            {fillMode === mode && hoveredFillMode === mode && (\n              <span\n                className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-25 pointer-events-none translate-x-[-200%] n1-ww-animate-shimmer dark:via-n1-ww-gray-300\"\n                style={{\n                  backgroundSize: '200% 100%',\n                  animationDuration: '1.5s',\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>,\n      document.body\n    );\n  };\n\n  return (\n    <div className=\"grid grid-cols-2 gap-3\">\n      {/* Order Type Selector */}\n      <div className=\"relative\" ref={orderTypeRef}>\n        <label className=\"block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1\">\n          Order Type\n        </label>\n        <button\n          type=\"button\"\n          onClick={() => setIsOrderTypeOpen(!isOrderTypeOpen)}\n          className=\"w-full flex items-center justify-between px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:border-n1-ww-gray-400 dark:hover:border-n1-ww-gray-500 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600\"\n        >\n          <span>{orderType}</span>\n          <ChevronDown\n            size={14}\n            className={`transition-transform duration-200 ${\n              isOrderTypeOpen\n                ? 'rotate-180 text-n1-ww-gray-700 dark:text-n1-ww-gray-300'\n                : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400'\n            }`}\n          />\n        </button>\n\n        {renderOrderTypeDropdown()}\n      </div>\n\n      {/* Fill Mode Selector (only for LIMIT orders) */}\n      {orderType === 'LIMIT' && (\n        <div className=\"relative\" ref={fillModeRef}>\n          <label className=\"block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1\">\n            Fill Mode\n          </label>\n          <button\n            type=\"button\"\n            onClick={() => setIsFillModeOpen(!isFillModeOpen)}\n            className=\"w-full flex items-center justify-between px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 hover:border-n1-ww-gray-400 dark:hover:border-n1-ww-gray-500 transition-colors duration-200 bg-white dark:bg-n1-ww-dark-950 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600\"\n          >\n            <span>{fillMode}</span>\n            <ChevronDown\n              size={14}\n              className={`transition-transform duration-200 ${\n                isFillModeOpen\n                  ? 'rotate-180 text-n1-ww-gray-700 dark:text-n1-ww-gray-300'\n                  : 'text-n1-ww-gray-500 dark:text-n1-ww-gray-400'\n              }`}\n            />\n          </button>\n\n          {renderFillModeDropdown()}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/Modal/Sidebar/NordTradingView/TradeForm/PriceInput.js

@@ -25,6 +25,6 @@ export default function PriceInput(_a) {
         var newPrice = currentPrice * (1 + percentage / 100);
         onChange(newPrice.toString());
     };
-    return (_jsxs("div", { className: "relative z-20", children: [_jsx("label", { className: "block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1", children: "Price" }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", value: price, onChange: handlePriceChange, className: "w-full px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600 focus:border-n1-gray-400 dark:focus:border-n1-gray-600 bg-white dark:bg-n1-dark-950 font-mono transition-colors duration-200", placeholder: "Enter price" }), marketPrice && (_jsx("button", { type: "button", onClick: setMarketPrice, className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-[10px] border border-n1-gray-200 dark:border-n1-gray-800 text-n1-gray-700 dark:text-n1-gray-300 px-1.5 py-0.5 rounded-sm hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white transition-colors duration-200", children: "Market" }))] }), _jsxs("div", { className: "grid grid-cols-4 gap-1 mt-2", children: [_jsx("button", { type: "button", onClick: function () { return adjustPrice(-1); }, className: "text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200", children: "-1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(-0.1); }, className: "text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200", children: "-0.1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(0.1); }, className: "text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200", children: "+0.1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(1); }, className: "text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200", children: "+1%" })] })] }));
+    return (_jsxs("div", { className: "relative z-20", children: [_jsx("label", { className: "block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1", children: "Price" }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", value: price, onChange: handlePriceChange, className: "w-full px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600 focus:border-n1-ww-gray-400 dark:focus:border-n1-ww-gray-600 bg-white dark:bg-n1-ww-dark-950 font-mono transition-colors duration-200", placeholder: "Enter price" }), marketPrice && (_jsx("button", { type: "button", onClick: setMarketPrice, className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-[10px] border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 text-n1-ww-gray-700 dark:text-n1-ww-gray-300 px-1.5 py-0.5 rounded-sm hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white transition-colors duration-200", children: "Market" }))] }), _jsxs("div", { className: "grid grid-cols-4 gap-1 mt-2", children: [_jsx("button", { type: "button", onClick: function () { return adjustPrice(-1); }, className: "text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200", children: "-1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(-0.1); }, className: "text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200", children: "-0.1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(0.1); }, className: "text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200", children: "+0.1%" }), _jsx("button", { type: "button", onClick: function () { return adjustPrice(1); }, className: "text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200", children: "+1%" })] })] }));
 }
 //# sourceMappingURL=PriceInput.js.map

package/dist/Modal/Sidebar/NordTradingView/TradeForm/PriceInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/PriceInput.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAIjB;QAHhB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA;IAEX,sBAAsB;IACtB,IAAM,iBAAiB,GAAG,UAAC,CAAsC;QAC/D,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE7B,uCAAuC;QACvC,IAAI,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACpD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,4BAA4B;IAC5B,IAAM,cAAc,GAAG;QACrB,IAAI,WAAW,EAAE,CAAC;YAChB,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC;IAEF,6BAA6B;IAC7B,IAAM,WAAW,GAAG,UAAC,UAAkB;QACrC,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,IAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,KAAK,CAAC,YAAY,CAAC;YAAE,OAAO;QAEhC,IAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,CAAC,GAAG,UAAU,GAAG,GAAG,CAAC,CAAC;QACvD,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,gBAAO,SAAS,EAAC,uEAAuE,sBAEhF,EAER,eAAK,SAAS,EAAC,UAAU,aACvB,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,8UAA8U,EACxV,WAAW,EAAC,aAAa,GACzB,EAED,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,+VAA+V,uBAGlW,CACV,IACG,EAGN,eAAK,SAAS,EAAC,6BAA6B,aAC1C,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,CAAC,CAAC,EAAf,CAAe,EAC9B,SAAS,EAAC,qLAAqL,oBAGxL,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,GAAG,CAAC,EAAjB,CAAiB,EAChC,SAAS,EAAC,qLAAqL,sBAGxL,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,GAAG,CAAC,EAAhB,CAAgB,EAC/B,SAAS,EAAC,qLAAqL,sBAGxL,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,CAAC,EAAd,CAAc,EAC7B,SAAS,EAAC,qLAAqL,oBAGxL,IACL,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\ninterface PriceInputProps {\n  price: string;\n  onChange: (price: string) => void;\n  marketPrice?: number;\n}\n\nexport default function PriceInput({\n  price,\n  onChange,\n  marketPrice,\n}: PriceInputProps) {\n  // Handle price change\n  const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n\n    // Allow only numbers and decimal point\n    if (/^[0-9]*\\.?[0-9]*$/.test(value) || value === '') {\n      onChange(value);\n    }\n  };\n\n  // Set price to market price\n  const setMarketPrice = () => {\n    if (marketPrice) {\n      onChange(marketPrice.toString());\n    }\n  };\n\n  // Adjust price by percentage\n  const adjustPrice = (percentage: number) => {\n    if (!price) return;\n\n    const currentPrice = parseFloat(price);\n    if (isNaN(currentPrice)) return;\n\n    const newPrice = currentPrice * (1 + percentage / 100);\n    onChange(newPrice.toString());\n  };\n\n  return (\n    <div className=\"relative z-20\">\n      <label className=\"block text-xs font-medium text-n1-gray-700 dark:text-n1-gray-300 mb-1\">\n        Price\n      </label>\n\n      <div className=\"relative\">\n        <input\n          type=\"text\"\n          value={price}\n          onChange={handlePriceChange}\n          className=\"w-full px-3 py-2 border border-n1-gray-200 dark:border-n1-gray-800 rounded-sm text-sm text-n1-gray-900 dark:text-n1-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-gray-400 dark:focus:ring-n1-gray-600 focus:border-n1-gray-400 dark:focus:border-n1-gray-600 bg-white dark:bg-n1-dark-950 font-mono transition-colors duration-200\"\n          placeholder=\"Enter price\"\n        />\n\n        {marketPrice && (\n          <button\n            type=\"button\"\n            onClick={setMarketPrice}\n            className=\"absolute right-2 top-1/2 transform -translate-y-1/2 text-[10px] border border-n1-gray-200 dark:border-n1-gray-800 text-n1-gray-700 dark:text-n1-gray-300 px-1.5 py-0.5 rounded-sm hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white transition-colors duration-200\"\n          >\n            Market\n          </button>\n        )}\n      </div>\n\n      {/* Price adjustment buttons */}\n      <div className=\"grid grid-cols-4 gap-1 mt-2\">\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(-1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200\"\n        >\n          -1%\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(-0.1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200\"\n        >\n          -0.1%\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(0.1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200\"\n        >\n          +0.1%\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-gray-100 dark:bg-n1-gray-800 hover:bg-n1-gray-200 dark:hover:bg-n1-gray-700 rounded text-n1-gray-700 dark:text-n1-gray-300 transition-colors duration-200\"\n        >\n          +1%\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"PriceInput.js","sourceRoot":"","sources":["../../../../../src/Modal/Sidebar/NordTradingView/TradeForm/PriceInput.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAIjB;QAHhB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA;IAEX,sBAAsB;IACtB,IAAM,iBAAiB,GAAG,UAAC,CAAsC;QAC/D,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAE7B,uCAAuC;QACvC,IAAI,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YACpD,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,4BAA4B;IAC5B,IAAM,cAAc,GAAG;QACrB,IAAI,WAAW,EAAE,CAAC;YAChB,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,CAAC;IAEF,6BAA6B;IAC7B,IAAM,WAAW,GAAG,UAAC,UAAkB;QACrC,IAAI,CAAC,KAAK;YAAE,OAAO;QAEnB,IAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,KAAK,CAAC,YAAY,CAAC;YAAE,OAAO;QAEhC,IAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,CAAC,GAAG,UAAU,GAAG,GAAG,CAAC,CAAC;QACvD,QAAQ,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,gBAAO,SAAS,EAAC,6EAA6E,sBAEtF,EAER,eAAK,SAAS,EAAC,UAAU,aACvB,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,yWAAyW,EACnX,WAAW,EAAC,aAAa,GACzB,EAED,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,2WAA2W,uBAG9W,CACV,IACG,EAGN,eAAK,SAAS,EAAC,6BAA6B,aAC1C,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,CAAC,CAAC,EAAf,CAAe,EAC9B,SAAS,EAAC,uMAAuM,oBAG1M,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,GAAG,CAAC,EAAjB,CAAiB,EAChC,SAAS,EAAC,uMAAuM,sBAG1M,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,GAAG,CAAC,EAAhB,CAAgB,EAC/B,SAAS,EAAC,uMAAuM,sBAG1M,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,WAAW,CAAC,CAAC,CAAC,EAAd,CAAc,EAC7B,SAAS,EAAC,uMAAuM,oBAG1M,IACL,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\n\ninterface PriceInputProps {\n  price: string;\n  onChange: (price: string) => void;\n  marketPrice?: number;\n}\n\nexport default function PriceInput({\n  price,\n  onChange,\n  marketPrice,\n}: PriceInputProps) {\n  // Handle price change\n  const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n\n    // Allow only numbers and decimal point\n    if (/^[0-9]*\\.?[0-9]*$/.test(value) || value === '') {\n      onChange(value);\n    }\n  };\n\n  // Set price to market price\n  const setMarketPrice = () => {\n    if (marketPrice) {\n      onChange(marketPrice.toString());\n    }\n  };\n\n  // Adjust price by percentage\n  const adjustPrice = (percentage: number) => {\n    if (!price) return;\n\n    const currentPrice = parseFloat(price);\n    if (isNaN(currentPrice)) return;\n\n    const newPrice = currentPrice * (1 + percentage / 100);\n    onChange(newPrice.toString());\n  };\n\n  return (\n    <div className=\"relative z-20\">\n      <label className=\"block text-xs font-medium text-n1-ww-gray-700 dark:text-n1-ww-gray-300 mb-1\">\n        Price\n      </label>\n\n      <div className=\"relative\">\n        <input\n          type=\"text\"\n          value={price}\n          onChange={handlePriceChange}\n          className=\"w-full px-3 py-2 border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 rounded-sm text-sm text-n1-ww-gray-900 dark:text-n1-ww-gray-100 focus:outline-none focus:ring-1 focus:ring-n1-ww-gray-400 dark:focus:ring-n1-ww-gray-600 focus:border-n1-ww-gray-400 dark:focus:border-n1-ww-gray-600 bg-white dark:bg-n1-ww-dark-950 font-mono transition-colors duration-200\"\n          placeholder=\"Enter price\"\n        />\n\n        {marketPrice && (\n          <button\n            type=\"button\"\n            onClick={setMarketPrice}\n            className=\"absolute right-2 top-1/2 transform -translate-y-1/2 text-[10px] border border-n1-ww-gray-200 dark:border-n1-ww-gray-800 text-n1-ww-gray-700 dark:text-n1-ww-gray-300 px-1.5 py-0.5 rounded-sm hover:bg-emerald-600 hover:border-emerald-600 hover:text-white dark:hover:bg-emerald-600 dark:hover:border-emerald-600 dark:hover:text-white transition-colors duration-200\"\n          >\n            Market\n          </button>\n        )}\n      </div>\n\n      {/* Price adjustment buttons */}\n      <div className=\"grid grid-cols-4 gap-1 mt-2\">\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(-1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200\"\n        >\n          -1%\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(-0.1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200\"\n        >\n          -0.1%\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(0.1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200\"\n        >\n          +0.1%\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => adjustPrice(1)}\n          className=\"text-xs px-1 py-0.5 bg-n1-ww-gray-100 dark:bg-n1-ww-gray-800 hover:bg-n1-ww-gray-200 dark:hover:bg-n1-ww-gray-700 rounded text-n1-ww-gray-700 dark:text-n1-ww-gray-300 transition-colors duration-200\"\n        >\n          +1%\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}