diff --git a/package-lock.json b/package-lock.json
index 2d2fd81..8860fa6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
"dependencies": {
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
+ "lightweight-charts": "^5.1.0",
+ "lightweight-charts-react-components": "^1.4.0",
"lucide-react": "^0.563.0",
"next": "16.1.6",
"radix-ui": "^1.4.3",
@@ -4600,6 +4602,12 @@
"express": ">= 4.11"
}
},
+ "node_modules/fancy-canvas": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
+ "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
+ "license": "MIT"
+ },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5716,6 +5724,26 @@
"url": "https://opencollective.com/parcel"
}
},
+ "node_modules/lightweight-charts": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.1.0.tgz",
+ "integrity": "sha512-jEAYR4ODYeyNZcWUigsoLTl52rbPmgXnvd5FLIv/ZoA/2sSDw63YKnef8n4yhzum7W926yHeFwlm7ididKb7YQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "fancy-canvas": "2.1.0"
+ }
+ },
+ "node_modules/lightweight-charts-react-components": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/lightweight-charts-react-components/-/lightweight-charts-react-components-1.4.0.tgz",
+ "integrity": "sha512-FWzEiQDhQaQ04l6kV2fzsODK6jCrzbLOai+r6oEvCqC3tniXjKUAFHbTUlemII7PfiWYwyVAVgl1XRv72Q8Phw==",
+ "license": "MIT",
+ "peerDependencies": {
+ "lightweight-charts": ">=5 < 6",
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
diff --git a/package.json b/package.json
index 4f8f3f2..cbe478e 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
"dependencies": {
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
+ "lightweight-charts": "^5.1.0",
+ "lightweight-charts-react-components": "^1.4.0",
"lucide-react": "^0.563.0",
"next": "16.1.6",
"radix-ui": "^1.4.3",
diff --git a/src/app/market/components/market-sidebar/Chart.tsx b/src/app/market/components/market-sidebar/Chart.tsx
new file mode 100644
index 0000000..5d6bde0
--- /dev/null
+++ b/src/app/market/components/market-sidebar/Chart.tsx
@@ -0,0 +1,96 @@
+import { CandlestickSeries, Chart } from "lightweight-charts-react-components";
+
+export default function MarketChart() {
+ return (
+
+
+
+ );
+}
diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx
index 0fdde39..bb40490 100644
--- a/src/app/market/page.tsx
+++ b/src/app/market/page.tsx
@@ -3,6 +3,7 @@
import Navbar from "@/components/layout/Navbar";
import Statusbar from "@/components/layout/Statusbar";
import MarketSidebar from "./components/market-sidebar/MarketSidebar";
+import Chart from "./components/market-sidebar/Chart";
export default function Market() {
return (
@@ -10,7 +11,7 @@ export default function Market() {