Fix Chart.js CSP block and BTC asset name filter (#141)

- Self-host Chart.js v4 and date-fns adapter instead of loading from
  CDN, which was blocked by the Content-Security-Policy script-src
  'self' header
- Fix BTC balance filter to match by assetName ('BTC') instead of
  assetSymbol which differs between environments
- Update mock data to reflect actual API response format

Author: TaprootFreak

e2e/mock-server.js

@@ -10,8 +10,8 @@ const MOCK_DATA = {
   ],
   balances: [
     {
-      assetName: 'Bitcoin',
-      assetSymbol: 'BTC',
+      assetName: 'BTC',
+      assetSymbol: 'B',
       onchainBalance: 35390000,
       lndOnchainBalance: 35300000,
       lightningBalance: 128180000,
@@ -110,6 +110,8 @@ const server = http.createServer((req, res) => {
     '/monitoring/btc.js': 'monitoring-btc.js',
     '/monitoring/usd': 'monitoring-usd.html',
     '/monitoring/usd.js': 'monitoring-usd.js',
+    '/monitoring/chart.min.js': 'chart.min.js',
+    '/monitoring/chartjs-adapter-date-fns.min.js': 'chartjs-adapter-date-fns.min.js',
   };
 
   const file = routes[req.url];

nest-cli.json

@@ -2,7 +2,7 @@
   "collection": "@nestjs/schematics",
   "sourceRoot": "src",
   "compilerOptions": {
-    "assets": ["assets/home.html", "assets/monitoring.html", "assets/monitoring.js", "assets/monitoring-btc.html", "assets/monitoring-btc.js", "assets/monitoring-usd.html", "assets/monitoring-usd.js"],
+    "assets": ["assets/home.html", "assets/monitoring.html", "assets/monitoring.js", "assets/monitoring-btc.html", "assets/monitoring-btc.js", "assets/monitoring-usd.html", "assets/monitoring-usd.js", "assets/chart.min.js", "assets/chartjs-adapter-date-fns.min.js"],
     "watchAssets": true
   }
 }

src/assets/chart.min.js

@@ -98,8 +98,8 @@ <h2>BTC Balance History</h2>
     <div class="loading">Loading BTC monitoring data...</div>
   </div>
 
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+  <script src="/monitoring/chart.min.js"></script>
+  <script src="/monitoring/chartjs-adapter-date-fns.min.js"></script>
   <script src="/monitoring/btc.js"></script>
 </body>
 </html>

src/assets/chartjs-adapter-date-fns.min.js

@@ -34,7 +34,7 @@ function render(data) {
 
   var btcBalance = null;
   for (var i = 0; i < data.balances.length; i++) {
-    if (data.balances[i].assetSymbol === 'BTC') {
+    if (data.balances[i].assetName === 'BTC') {
       btcBalance = data.balances[i];
       break;
     }

src/assets/monitoring-btc.html

@@ -98,8 +98,8 @@ <h2>USD Balance History</h2>
     <div class="loading">Loading USD monitoring data...</div>
   </div>
 
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+  <script src="/monitoring/chart.min.js"></script>
+  <script src="/monitoring/chartjs-adapter-date-fns.min.js"></script>
   <script src="/monitoring/usd.js"></script>
 </body>
 </html>

src/assets/monitoring-btc.js

@@ -58,6 +58,22 @@ export class MonitoringController {
     );
   }
 
+  @Get('chart.min.js')
+  @ApiExcludeEndpoint()
+  async chartJs(@Res() res: Response): Promise<void> {
+    res.type('application/javascript').send(
+      readFileSync(join(__dirname, '..', '..', '..', 'assets', 'chart.min.js')).toString(),
+    );
+  }
+
+  @Get('chartjs-adapter-date-fns.min.js')
+  @ApiExcludeEndpoint()
+  async chartAdapterJs(@Res() res: Response): Promise<void> {
+    res.type('application/javascript').send(
+      readFileSync(join(__dirname, '..', '..', '..', 'assets', 'chartjs-adapter-date-fns.min.js')).toString(),
+    );
+  }
+
   @Get('data')
   @ApiExcludeEndpoint()
   async monitoringData(): Promise<{