use javascript chart instead of svg

dist/assets/css/web3.css

@@ -17,6 +17,9 @@ body {
 	margin: 0 auto;
 	padding: 2rem 1.5rem 4rem;
 }
+.web2-shell-wide {
+	max-width: 1400px;
+}
 .web2-header {
 	background: var(--web2-card);
 	border: 1px solid var(--web2-border);
@@ -176,3 +179,68 @@ body {
 	color: var(--web2-muted);
 	background: #f8fafc;
 }
+.web3-chart-frame {
+	position: relative;
+	min-width: 760px;
+	width: 100%;
+}
+.web3-chart-canvas {
+	display: block;
+	width: 100%;
+	height: 360px;
+	background: #ffffff;
+	border: 1px solid #e2e8f0;
+	border-radius: 6px;
+}
+.web3-chart-tooltip {
+	position: absolute;
+	left: 0;
+	top: 0;
+	opacity: 0;
+	pointer-events: none;
+	background: rgba(15, 23, 42, 0.95);
+	color: #f8fafc;
+	padding: 0.55rem 0.65rem;
+	border-radius: 6px;
+	font-size: 0.75rem;
+	line-height: 1.35;
+	min-width: 170px;
+	box-shadow: 0 10px 30px rgba(2, 6, 23, 0.25);
+	z-index: 20;
+	transition: opacity 0.08s linear;
+}
+.web3-chart-tooltip.visible {
+	opacity: 1;
+}
+.web3-chart-tooltip-title {
+	font-weight: 700;
+	color: #e2e8f0;
+	margin-bottom: 0.35rem;
+}
+.web3-chart-tooltip-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.65rem;
+}
+.web3-chart-tooltip-label {
+	display: inline-flex;
+	align-items: center;
+	color: #cbd5e1;
+}
+.web3-chart-tooltip-value {
+	font-weight: 700;
+	color: #f8fafc;
+}
+.web3-chart-tooltip-swatch {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	border-radius: 999px;
+	margin-right: 0.35rem;
+}
+@media (max-width: 900px) {
+	.web3-chart-frame {
+		min-width: 640px;
+	}
+}