Update to 22.1.0

.github/workflows/build-and-deploy.yml

@@ -18,18 +18,16 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+      - name: Use Node.js 24
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 24.x
+          cache: npm
 
       - name: Configure private npm registry
         run: |
@@ -56,17 +54,15 @@ jobs:
         run: |
           chmod +x scripts/replace-env-vars.sh
           ./scripts/replace-env-vars.sh
-          echo "=== AFTER REPLACEMENT ==="
-          cat src/environments/environment.prod.ts
 
       - name: Run lint
         run: npm run lint
 
       - name: Build Angular app
-        run: npm run build:gh-pages   # produces dist/ folder
+        run: npm run build:gh-pages
 
       - name: Upload build artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
         with:
           path: ./dist/browser
 
@@ -79,4 +75,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4

.github/workflows/build-app.yml

@@ -9,18 +9,16 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+      - name: Use Node.js 24
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 24.x
+          cache: npm
 
       - name: Configure private npm registry
         run: |
@@ -45,12 +43,10 @@ jobs:
         run: |
           chmod +x scripts/replace-env-vars.sh
           ./scripts/replace-env-vars.sh
-          echo "=== AFTER REPLACEMENT ==="
-          cat src/environments/environment.prod.ts
 
       - name: Run lint
         run: npm run lint
 
       - name: Build Angular app
-        run: npm run build   # Build only for validation (no deployment)
+        run: npm run build
 

.npmrc

@@ -1 +1,2 @@
-@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/
+@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/
+legacy-peer-deps=true

README.md

@@ -18,8 +18,27 @@ This project is generated with [Angular CLI](https://github.com/angular/angular-
 
 ### Prerequisites
 1. **Node.js**: Use node version 18+ (recommended)
-2. **CryptoCompare API Key**: [Generate CryptoCompare API key](https://min-api.cryptocompare.com/pricing?utm_source=homepage&utm_medium=banner&utm_campaign=home_banner_cta) (Used by data services)
-3. **Firebase Project** (applicable when the project is forked): [Create a Firebase project](https://firebase.google.com/docs/web/setup) (Used for authentication and data storage)
+2. **Firebase Project** (applicable when the project is forked): [Create a Firebase project](https://firebase.google.com/docs/web/setup) (Used for authentication and data storage)
+
+## Market data
+
+Out of the box the app serves **generated market data** - no third-party API key, rate limit, or
+outage involved. Prices, 24 hour statistics, and two years of daily OHLC history are produced by the
+seeded simulator in [`src/app/core/mock-market.ts`](src/app/core/mock-market.ts) and exposed through
+`MockDataService`. Values are derived from the coin symbol and the current time, so they move on
+every refresh, stay in sync between the grid, the cards, and the portfolio, and are reproducible
+across reloads. Coin logos are inline SVG badges, so no images are fetched either.
+
+To point the app back at the live [CryptoCompare API](https://min-api.cryptocompare.com/) instead,
+set `useMockData: false` in `src/environments/environment.ts` (and `environment.prod.ts` for
+production builds). `app.config.ts` then provides `CryptoCompareDataService`, which needs a
+[CryptoCompare API key](https://min-api.cryptocompare.com/pricing?utm_source=homepage&utm_medium=banner&utm_campaign=home_banner_cta).
+
+| Screen | Data source |
+| --- | --- |
+| Home, list, grid, statistics | `DataService` - mocked by default, CryptoCompare when `useMockData` is `false` |
+| Portfolio holdings | Firebase Realtime Database (prices come from `DataService`) |
+| Sign in / sign up | Firebase Auth |
 
 
 ## Build Commands

angular.json

@@ -3,7 +3,7 @@
   "cli": {
     "analytics": false,
     "schematicCollections": [
-      "@angular-eslint/schematics"
+      "angular-eslint"
     ]
   },
   "version": 1,
@@ -15,23 +15,27 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
             ],
             "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "node_modules/hammerjs/hammer.min.js"
+              "src/styles.scss",
+              {
+                "input": "src/themes/light.scss",
+                "bundleName": "theme-light",
+                "inject": false
+              },
+              {
+                "input": "src/themes/dark.scss",
+                "bundleName": "theme-dark",
+                "inject": false
+              }
             ],
             "extractLicenses": false,
             "sourceMap": true,
@@ -51,7 +55,14 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
@@ -70,7 +81,14 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
@@ -90,19 +108,13 @@
                 }
               ]
             },
-            "es5": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "tsConfig": "src/tsconfig-es5.app.json"
+            "testing": {
+              "aot": false
             }
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "cryptoapp:build"
           },
@@ -115,40 +127,24 @@
             },
             "local": {
               "buildTarget": "cryptoapp:build:local"
-            },
-            "es5": {
-              "buildTarget": "cryptoapp:build:es5"
             }
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "cryptoapp:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
-            "scripts": [
-              "node_modules/hammerjs/hammer.min.js"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
+            "reporters": [
+              "default"
             ],
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "node_modules"
-              ]
-            }
+            "buildTarget": ":build:testing",
+            "runner": "vitest"
           }
         },
         "lint": {
@@ -161,20 +157,6 @@
           }
         }
       }
-    },
-    "cryptoapp-e2e": {
-      "root": "",
-      "sourceRoot": "",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "cryptoapp:serve"
-          }
-        }
-      }
     }
   },
   "schematics": {
@@ -187,12 +169,6 @@
       "prefix": "app",
       "type": "directive"
     },
-    "@angular-eslint/schematics:application": {
-      "setParserOptionsProject": true
-    },
-    "@angular-eslint/schematics:library": {
-      "setParserOptionsProject": true
-    },
     "@schematics/angular:service": {
       "type": "service"
     },