Merge branch 'release/2.2.0'

2022-03-11 02:38:43 -05:00 · 2022-03-11 02:38:43 -05:00 · 4518c8d951
parent ca758ddd28 0880de93c4
commit 4518c8d951
60 changed files with 9847 additions and 10432 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,4 +1,3 @@
-# Editor configuration, see https://editorconfig.org
 root = true

 [*]
@ -9,8 +8,6 @@ insert_final_newline = true
 max_line_length = 140
 trim_trailing_whitespace = true

-[*.ts]
-quote_type = single
-
 [*.md]
+max_line_length = false
 trim_trailing_whitespace = false
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,8 @@
+.angular
+.pnpm-store
+dist
+e2e/protractor.conf.js
+node_modules
+pnpm-lock.yaml
+public
+src/test.ts
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,134 @@
+{
+  "root": true,
+  "env": {
+    "browser": true
+  },
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "plugins": ["rxjs-angular"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "prettier",
+        "plugin:rxjs/recommended",
+        "plugin:@angular-eslint/all",
+        "plugin:@angular-eslint/recommended--extra",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        // Custom rules
+        // @typescript-eslint
+        "@typescript-eslint/array-type": "error",
+        "@typescript-eslint/class-literal-property-style": "error",
+        "@typescript-eslint/consistent-indexed-object-style": "error",
+        "@typescript-eslint/consistent-type-assertions": [
+          "error",
+          {
+            "assertionStyle": "as",
+            "objectLiteralTypeAssertions": "never"
+          }
+        ],
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/consistent-type-imports": "error",
+        "@typescript-eslint/dot-notation": "error",
+        "@typescript-eslint/explicit-function-return-type": "error",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "error",
+          {
+            "accessibility": "no-public"
+          }
+        ],
+        "@typescript-eslint/member-delimiter-style": [
+          "error",
+          {
+            "multiline": {
+              "delimiter": "none",
+              "requireLast": true
+            }
+          }
+        ],
+        "@typescript-eslint/method-signature-style": "error",
+        "@typescript-eslint/no-base-to-string": "error",
+        "@typescript-eslint/no-confusing-non-null-assertion": "error",
+        "@typescript-eslint/no-confusing-void-expression": [
+          "error",
+          {
+            "ignoreArrowShorthand": true,
+            "ignoreVoidOperator": true
+          }
+        ],
+        "@typescript-eslint/no-dynamic-delete": "error",
+        "@typescript-eslint/no-empty-function": [
+          "error",
+          {
+            "allow": ["private-constructors", "protected-constructors"]
+          }
+        ],
+        "@typescript-eslint/no-extra-parens": ["error", "functions"],
+        "@typescript-eslint/no-implicit-any-catch": "error",
+        "@typescript-eslint/no-invalid-void-type": "error",
+        "@typescript-eslint/no-non-null-assertion": "error",
+        "@typescript-eslint/no-unnecessary-boolean-literal-compare": "error",
+        "@typescript-eslint/no-unnecessary-condition": "error",
+        "@typescript-eslint/no-unnecessary-qualifier": "error",
+        "@typescript-eslint/no-unnecessary-type-arguments": "error",
+        "@typescript-eslint/no-unnecessary-type-constraint": "error",
+        "@typescript-eslint/no-unsafe-argument": "error",
+        "@typescript-eslint/no-unsafe-assignment": "error",
+        "@typescript-eslint/no-var-requires": "error",
+        "@typescript-eslint/non-nullable-type-assertion-style": "error",
+        "@typescript-eslint/prefer-for-of": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/prefer-includes": "error",
+        "@typescript-eslint/prefer-nullish-coalescing": "error",
+        "@typescript-eslint/prefer-optional-chain": "error",
+        "@typescript-eslint/prefer-readonly": "error",
+        "@typescript-eslint/prefer-reduce-type-parameter": "error",
+        "@typescript-eslint/prefer-return-this-type": "error",
+        "@typescript-eslint/prefer-string-starts-ends-with": "error",
+        "@typescript-eslint/prefer-ts-expect-error": "error",
+        "@typescript-eslint/promise-function-async": "error",
+        "@typescript-eslint/require-array-sort-compare": "error",
+        "@typescript-eslint/semi": ["error", "never"],
+        "@typescript-eslint/sort-type-union-intersection-members": "error",
+        "@typescript-eslint/switch-exhaustiveness-check": "error",
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/unified-signatures": "error",
+        // eslint-plugin-rxjs-angular
+        //"rxjs-angular/prefer-async-pipe": "error",
+        "rxjs-angular/prefer-takeuntil": "error"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/all"],
+      "rules": {
+        // Custom rules
+        "@angular-eslint/template/i18n": "off"
+      }
+    }
+  ]
+}
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: NatoBoram # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ["https://paypal.me/NatoBoram/5"] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
--- a/.gitignore
+++ b/.gitignore
@ -1,46 +1,126 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# Created by https://www.toptal.com/developers/gitignore/api/angular,linux,windows,macos,visualstudiocode
+# Edit at https://www.toptal.com/developers/gitignore?templates=angular,linux,windows,macos,visualstudiocode

+### Angular ###
+## Angular ##
 # compiled output
-/dist
-/tmp
-/out-tsc
-# Only exists if Bazel was run
-/bazel-out
+dist/
+tmp/
+app/**/*.js
+app/**/*.js.map

 # dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
+node_modules/
+bower_components/

 # IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
+.idea/

-# IDE - VSCode
+# misc
+.sass-cache/
+connect.lock/
+coverage/
+libpeerconnection.log/
+npm-debug.log
+testem.log
+typings/
+.angular/
+
+# e2e
+e2e/*.js
+e2e/*.map
+
+# System Files
+.DS_Store/
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### VisualStudioCode ###
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-.history/*
+!.vscode/*.code-snippets

-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
+# Local History for Visual Studio Code
+.history/

-# System Files
-.DS_Store
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+
+### Windows ###
+# Windows thumbnail cache files
 Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/angular,linux,windows,macos,visualstudiocode
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,20 +1,25 @@
-image: node:14
+image: node:latest

 before_script:
-  - yarn
+  - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6
+  - pnpm config set store-dir .pnpm-store
+  - pnpm i
+
+variables:
+  # https://stackoverflow.com/a/69746937/5083247
+  NODE_OPTIONS: --openssl-legacy-provider

 cache:
  key:
    files:
-      - package.json
-      - yarn.lock
+      - pnpm-lock.yaml
  paths:
-    - node_modules
+    - .pnpm-store

 build:
  stage: build
  script:
-    - yarn run build:prod
+    - pnpm run build:prod
  artifacts:
    paths:
      - dist/angular
@ -22,12 +27,13 @@ build:
 test:
  stage: test
  script:
-    - yarn run lint
+    - pnpx ng lint
+    - pnpx prettier --check .

 pages:
  stage: deploy
  script:
-    - yarn run build:gitlab
+    - pnpm run build:gitlab
    - mv dist/angular public
    - cp public/index.html public/404.html
  artifacts:
--- a/.ipfs-npmrc
+++ b/.ipfs-npmrc
@ -1,3 +1,3 @@
 {
-  "packageManager": "yarn"
+  "packageManager": "pnpm"
 }
--- a/.markdownlint.json
+++ b/.markdownlint.json
@ -1,6 +1,4 @@
 {
-  "line-length": {
-    "line_length": 140
-  },
+  "line_length": false,
  "no-duplicate-heading": false
 }
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,6 @@
+.angular
+.pnpm-store
+dist
+node_modules
+pnpm-lock.yaml
+public
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@ -0,0 +1,3 @@
+arrowParens: avoid
+printWidth: 140
+semi: false
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -5,13 +5,12 @@
  "recommendations": [
    "angular.ng-template",
    "davidanson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
    "gitlab.gitlab-workflow",
-    "hookyqr.beautify",
    "johnpapa.angular2",
    "ms-vscode.vscode-typescript-next",
-    "ms-vscode.vscode-typescript-tslint-plugin",
-    "msjsdiag.debugger-for-chrome",
    "visualstudioexptteam.vscodeintellicode"
  ],
  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -37,9 +37,7 @@
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
-      "args": [
-        "${workspaceFolder}/e2e/protractor.conf.js"
-      ]
+      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,12 +1,20 @@
 {
+  "[css][scss][html][javascript][typescript][json][jsonc][markdown][yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
+    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
-  "editor.rulers": [
-    140
-  ],
+  "editor.rulers": [140],
+  "eslint.options": {
+    "extensions": [".ts", ".html"]
+  },
+  "eslint.packageManager": "pnpm",
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html"],
  "files.associations": {
    ".ipfs-npmrc": "json"
  },
@ -14,8 +22,8 @@
  "html.format.maxPreserveNewLines": 1,
  "html.format.wrapAttributes": "auto",
  "html.format.wrapLineLength": 140,
-  "npm.packageManager": "yarn",
-  "tslint.packageManager": "yarn",
+  "npm.packageManager": "pnpm",
+  "tslint.packageManager": "pnpm",
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "typescript.updateImportsOnFileMove.enabled": "always"
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@ -17,10 +17,7 @@
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
-        "fileLocation": [
-          "relative",
-          "${cwd}"
-        ],
+        "fileLocation": ["relative", "${cwd}"],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
@ -32,6 +29,6 @@
          }
        }
      }
-    },
+    }
  ]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -18,6 +18,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this

 ### Security

+## [2.2.0] - 2022-03-11
+
+### Added
+
+- More information in the `package.json`.
+- Added ESLint
+- Added Prettier
+- Put success reponses at the top of the list
+
+### Changed
+
+- Updated `gateways.json`
+- Upgraded to Angular 13
+- Targets ESNext
+
+### Removed
+
+- Removed TSLint
+
 ## [2.1.1] - 2021-03-20

 ### Added
--- a/README.md
+++ b/README.md
@ -5,39 +5,10 @@

 Cache a specific hash on a bunch of public gateways.

-You can view this website on [GitLab Pages](https://natoboram.gitlab.io/public-gateway-cacher) and [IPFS](https://bafybeib43z6e5yuywjclls72rvipygoteyi3yeyxwewxi7yd5txypxprpa.ipfs.dweb.link).
+You can view this website on [GitLab Pages](https://natoboram.gitlab.io/public-gateway-cacher) and [IPFS](https://bafybeigmtv32yzjryuv5uwfhzqtrjt6va7dwaxuvhoqqirkwcg2q6mlai4.ipfs.dweb.link).

 ![Screenshot](https://bafybeie7txrbzw6ipb62lplnpzsjpz7s4o5q7uufb5rjfelol2cuxeyzye.ipfs.dweb.link/Screenshot_2020-07-09%20Public%20Gateway%20Cacher.png)

 **NOTE :** All of these (except `ipfs.io` and `dweb.link`) are hosted by third-parties and should be treated as such.

-If you'd like to add a new public gateway, please go to
-[github.com/ipfs/public-gateway-checker](https://github.com/ipfs/public-gateway-checker), submit a pull request then open an issue [here](https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new).
-
-## Angular
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.20.
-
-### Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-### Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-### Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-### Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-### Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-### Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+If you'd like to add a new public gateway, please go to [github.com/ipfs/public-gateway-checker](https://github.com/ipfs/public-gateway-checker), submit a pull request then open an issue [here](https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new).
--- a/angular.json
+++ b/angular.json
@ -2,8 +2,9 @@
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
-    "packageManager": "yarn",
-    "analytics": "10b848ad-8b81-4346-852f-5eff89573a85"
+    "packageManager": "pnpm",
+    "analytics": "10b848ad-8b81-4346-852f-5eff89573a85",
+    "defaultCollection": "@angular-eslint/schematics"
  },
  "newProjectRoot": "projects",
  "projects": {
@ -29,15 +30,18 @@
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": [
-              "src/favicon.png",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
+            "assets": ["src/favicon.png", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            },
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
          },
          "configurations": {
            "production": {
@ -49,11 +53,7 @@
              ],
              "optimization": true,
              "outputHashing": "all",
-              "sourceMap": true,
-              "namedChunks": true,
-              "aot": true,
              "extractLicenses": true,
-              "vendorChunk": true,
              "buildOptimizer": true,
              "budgets": [
                {
@ -77,11 +77,7 @@
              ],
              "optimization": true,
              "outputHashing": "all",
-              "sourceMap": true,
-              "namedChunks": true,
-              "aot": true,
              "extractLicenses": true,
-              "vendorChunk": true,
              "buildOptimizer": true,
              "budgets": [
                {
@ -105,11 +101,7 @@
              ],
              "optimization": true,
              "outputHashing": "all",
-              "sourceMap": true,
-              "namedChunks": true,
-              "aot": true,
              "extractLicenses": true,
-              "vendorChunk": true,
              "buildOptimizer": true,
              "budgets": [
                {
@ -124,7 +116,8 @@
                }
              ]
            }
-          }
+          },
+          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
@ -150,27 +143,12 @@
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.png",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
+            "assets": ["src/favicon.png", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
            },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "scripts": []
          }
        },
        "e2e": {
@ -184,6 +162,12 @@
              "devServerTarget": "public-gateway-cacher:serve:production"
            }
          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
        }
      }
    }
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@ -2,35 +2,35 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts

-const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+const { SpecReporter, StacktraceOption } = require("jasmine-spec-reporter")

 /**
 * @type { import("protractor").Config }
 */
 exports.config = {
  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
+  specs: ["./src/**/*.e2e-spec.ts"],
  capabilities: {
-    browserName: 'chrome'
+    browserName: "chrome",
  },
  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
+  baseUrl: "http://localhost:4200/",
+  framework: "jasmine",
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
-    print: function () { }
+    print: function () {},
  },
  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({
+    require("ts-node").register({
+      project: require("path").join(__dirname, "./tsconfig.json"),
+    })
+    jasmine.getEnv().addReporter(
+      new SpecReporter({
        spec: {
-        displayStacktrace: StacktraceOption.PRETTY
+          displayStacktrace: StacktraceOption.PRETTY,
+        },
+      })
+    )
+  },
 }
-    }));
-  }
-};
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@ -1,23 +1,25 @@
-import { browser, logging } from 'protractor';
-import { AppPage } from './app.po';
+import { browser, logging } from "protractor"
+import { AppPage } from "./app.po"

-describe('workspace-project App', (): void => {
-  let page: AppPage;
+describe("workspace-project App", (): void => {
+  let page: AppPage

  beforeEach((): void => {
-    page = new AppPage();
-  });
+    page = new AppPage()
+  })

-  it('should display welcome message', (): void => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('public-gateway-cacher app is running!');
-  });
+  it("should display welcome message", (): void => {
+    void page.navigateTo()
+    void expect(page.getTitleText()).toEqual("public-gateway-cacher app is running!")
+  })

  afterEach(async (): Promise<void> => {
    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER)
+    const expected: Partial<logging.Entry> = {
      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});
+    }
+
+    void expect(logs).not.toContain(jasmine.objectContaining(expected))
+  })
+})
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@ -1,11 +1,11 @@
-import { browser, by, element } from 'protractor';
+import { browser, by, element } from "protractor"

 export class AppPage {
-  navigateTo(): Promise<unknown> {
-    return browser.get(browser.baseUrl) as Promise<unknown>;
+  async navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>
  }

-  getTitleText(): Promise<string> {
-    return element(by.css('pgc-root .content span')).getText() as Promise<string>;
+  async getTitleText(): Promise<string> {
+    return element(by.css("pgc-root .content span")).getText() as Promise<string>
  }
 }
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@ -4,11 +4,7 @@
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "module": "commonjs",
-    "target": "es2018",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
+    "target": "ESNext",
+    "types": ["jasmine", "jasminewd2", "node"]
  }
 }
--- a/karma.conf.js
+++ b/karma.conf.js
@ -3,30 +3,30 @@

 module.exports = function (config) {
  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage-istanbul-reporter"),
+      require("@angular-devkit/build-angular/plugins/karma"),
    ],
    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/public-gateway-cacher'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      dir: require("path").join(__dirname, "./coverage/public-gateway-cacher"),
+      reports: ["html", "lcovonly", "text-summary"],
+      fixWebpackSourcePaths: true,
    },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ["progress", "kjhtml"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ["Chrome"],
    singleRun: false,
-    restartOnFileChange: true
-  });
-};
+    restartOnFileChange: true,
+  })
+}
--- a/package.json
+++ b/package.json
@ -1,6 +1,28 @@
 {
  "name": "public-gateway-cacher",
-  "version": "2.1.1",
+  "version": "2.2.0",
+  "description": "Cache a specific hash on a bunch of public gateways.",
+  "keywords": [
+    "IPFS"
+  ],
+  "homepage": "https://natoboram.gitlab.io/public-gateway-cacher",
+  "bugs": {
+    "url": "https://gitlab.com/NatoBoram/public-gateway-cacher/-/issues",
+    "email": "contact-project+natoboram-public-gateway-cacher-11685619-issue-@incoming.gitlab.com"
+  },
+  "license": "GPL-3.0-or-later",
+  "author": {
+    "name": "Nato Boram",
+    "url": "https://gitlab.com/NatoBoram"
+  },
+  "funding": [
+    {
+      "type": "patreon",
+      "url": "https://www.patreon.com/NatoBoram"
+    },
+    "https://paypal.me/NatoBoram/5"
+  ],
+  "repository": "gitlab:NatoBoram/public-gateway-cacher",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl",
@ -9,53 +31,61 @@
    "build:gitlab": "ng build --configuration=gitlab --base-href /public-gateway-cacher/",
    "build:ipfs": "ng build --configuration=ipfs",
    "test": "ng test",
-    "lint": "ng lint",
+    "lint": "ng lint --fix",
+    "eslint": "eslint --fix .",
+    "prettier": "prettier --write .",
    "e2e": "ng e2e",
-    "publish:ipfs": "yarn run build:ipfs && ipfs add --recursive --chunker=buzhash --cid-version=1 dist/angular",
+    "publish:ipfs": "pnpm run build:ipfs && ipfs add --recursive --chunker=buzhash --cid-version=1 dist/angular",
    "postinstall": "ngcc"
  },
-  "private": false,
  "dependencies": {
-    "@angular/animations": "~11.2.6",
-    "@angular/cdk": "~11.2.5",
-    "@angular/common": "~11.2.6",
-    "@angular/compiler": "~11.2.6",
-    "@angular/core": "~11.2.6",
-    "@angular/flex-layout": "^11.0.0-beta.33",
-    "@angular/forms": "~11.2.6",
-    "@angular/material": "^11.2.5",
-    "@angular/platform-browser": "~11.2.6",
-    "@angular/platform-browser-dynamic": "~11.2.6",
-    "@angular/router": "~11.2.6",
-    "bootstrap": "^4.5.0",
-    "ipfs-css": "^1.2.0",
-    "rxjs": "~6.6.0",
+    "@angular/animations": "~13.2.6",
+    "@angular/cdk": "~13.2.6",
+    "@angular/common": "~13.2.6",
+    "@angular/compiler": "~13.2.6",
+    "@angular/core": "~13.2.6",
+    "@angular/flex-layout": "^13.0.0-beta.38",
+    "@angular/forms": "~13.2.6",
+    "@angular/material": "^13.2.6",
+    "@angular/platform-browser": "~13.2.6",
+    "@angular/platform-browser-dynamic": "~13.2.6",
+    "@angular/router": "~13.2.6",
+    "bootstrap": "^5.1.3",
+    "ipfs-css": "^1.3.0",
+    "rxjs": "~7.5.5",
    "tslib": "^2.0.0",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.5",
-    "@angular/cli": "~11.2.5",
-    "@angular/compiler-cli": "~11.2.6",
-    "@angular/language-service": "~11.2.6",
-    "@types/jasmine": "~3.6.0",
+    "@angular-devkit/build-angular": "~13.2.6",
+    "@angular-eslint/builder": "13.1.0",
+    "@angular-eslint/eslint-plugin": "13.1.0",
+    "@angular-eslint/eslint-plugin-template": "13.1.0",
+    "@angular-eslint/schematics": "13.1.0",
+    "@angular-eslint/template-parser": "13.1.0",
+    "@angular/cli": "~13.2.6",
+    "@angular/compiler-cli": "~13.2.6",
+    "@angular/language-service": "~13.2.6",
+    "@types/jasmine": "~3.10.3",
    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.2.0",
+    "@types/node": "^17.0.21",
+    "@typescript-eslint/eslint-plugin": "5.14.0",
+    "@typescript-eslint/parser": "5.14.0",
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-rxjs": "^5.0.2",
+    "eslint-plugin-rxjs-angular": "^2.0.0",
+    "jasmine-core": "~4.0.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
+    "prettier": "^2.5.1",
    "protractor": "~7.0.0",
-    "rxjs-tslint-rules": "^4.33.3",
-    "ts-node": "~8.10.2",
-    "tslint": "~6.1.2",
-    "tslint-consistent-codestyle": "^1.16.0",
-    "tslint-origin-ordered-imports-rule": "^1.3.0-0",
-    "tslint-rxjs-subject-restrictions-rule": "^1.0.4",
-    "typescript": "~4.1.5"
-  }
+    "ts-node": "~10.7.0",
+    "typescript": "~4.5.5"
+  },
+  "private": true
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -1,14 +1,17 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { environment } from '../environments/environment';
+import { NgModule } from "@angular/core"
+import type { Routes } from "@angular/router"
+import { RouterModule } from "@angular/router"
+import { environment } from "../environments/environment"

-const routes: Routes = [{
-  path: '',
-  loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule),
-}];
+const routes: Routes = [
+  {
+    path: "",
+    loadChildren: async () => import("./pages/pages.module").then(m => m.PagesModule),
+  },
+]

@NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: environment.useHash, relativeLinkResolution: 'legacy' })],
-  exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes, { useHash: environment.useHash, relativeLinkResolution: "legacy" })],
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -5,6 +5,5 @@
  <button mat-icon-button="">
    <mat-icon (click)="themeService.switchTheme()">{{ themeService.icon }}</mat-icon>
  </button>
-
 </mat-toolbar>
 <router-outlet></router-outlet>
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -1,35 +1,43 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+import { TestBed, waitForAsync } from "@angular/core/testing"
+import { RouterTestingModule } from "@angular/router/testing"
+import { AppComponent } from "./app.component"

-describe('AppComponent', (): void => {
-  beforeEach(waitForAsync((): void => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
+describe("AppComponent", (): void => {
+  beforeEach(
+    waitForAsync((): void => {
+      void TestBed.configureTestingModule({
+        imports: [RouterTestingModule],
+        declarations: [AppComponent],
+      }).compileComponents()
+    })
+  )

-  it('should create the app', (): void => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
+  it("should create the app", (): void => {
+    const fixture = TestBed.createComponent(AppComponent)
+    if (!(fixture.debugElement.componentInstance instanceof AppComponent)) throw new Error("Expected AppComponent")

-  it(`should have as title 'public-gateway-cacher'`, (): void => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('public-gateway-cacher');
-  });
+    const app: AppComponent = fixture.debugElement.componentInstance
+    void expect(app).toBeTruthy()
+  })

-  it('should render title', (): void => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('public-gateway-cacher app is running!');
-  });
-});
+  it(`should have a themeService`, (): void => {
+    const fixture = TestBed.createComponent(AppComponent)
+    if (!(fixture.debugElement.componentInstance instanceof AppComponent)) throw new Error("Expected AppComponent")
+
+    const app: AppComponent = fixture.debugElement.componentInstance
+    void expect(app.themeService).toBeTruthy()
+  })
+
+  it("should render title", (): void => {
+    const fixture = TestBed.createComponent(AppComponent)
+    fixture.detectChanges()
+    if (!isHTMLElement(fixture.debugElement.nativeElement)) throw new Error("Expected HTMLElement")
+
+    const compiled: HTMLElement = fixture.debugElement.nativeElement
+    void expect(compiled.querySelector("h1")?.textContent).toContain("Public Gateway Cacher")
+  })
+})
+
+function isHTMLElement(element: unknown): element is HTMLElement {
+  return Object.getPrototypeOf(element) instanceof HTMLElement
+}
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,13 +1,12 @@
-import { Component } from '@angular/core';
-import { ThemeService } from './services/theme.service';
+import { ChangeDetectionStrategy, Component, Inject } from "@angular/core"
+import { ThemeService } from "./services/theme.service"

@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  constructor(
-    public readonly themeService: ThemeService
-  ) { }
+  constructor(@Inject(ThemeService) readonly themeService: ThemeService) {}
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -1,33 +1,29 @@
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import { CommonModule } from "@angular/common"
+import { HttpClientModule } from "@angular/common/http"
+import { NgModule } from "@angular/core"
+import { FlexLayoutModule } from "@angular/flex-layout"
+import { MatButtonModule } from "@angular/material/button"
+import { MatIconModule } from "@angular/material/icon"
+import { MatToolbarModule } from "@angular/material/toolbar"
+import { BrowserModule } from "@angular/platform-browser"
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
+import { AppRoutingModule } from "./app-routing.module"
+import { AppComponent } from "./app.component"

@NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
  imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
    AppRoutingModule,
-
-    // Material
+    BrowserAnimationsModule,
+    BrowserModule,
+    CommonModule,
    FlexLayoutModule,
+    HttpClientModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
  ],
  providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}
--- a/src/app/enums/protocol.enum.ts
+++ b/src/app/enums/protocol.enum.ts
@ -1,4 +1,4 @@
 export enum Protocol {
-  IPFS = 'ipfs',
-  IPNS = 'ipns',
+  IPFS = "ipfs",
+  IPNS = "ipns",
 }
--- a/src/app/enums/theme.enum.ts
+++ b/src/app/enums/theme.enum.ts
@ -1,4 +1,4 @@
 export enum Theme {
-  Light = 'theme-light',
-  Dark = 'theme-dark',
+  Light = "theme-light",
+  Dark = "theme-dark",
 }
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@ -1,5 +1,5 @@
 export interface Environment {
-  production: boolean;
-  base_href?: string;
-  useHash: boolean;
+  production: boolean
+  base_href?: string
+  useHash: boolean
 }
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@ -1,14 +1,17 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { PagesComponent } from './pages.component';
+import { NgModule } from "@angular/core"
+import type { Routes } from "@angular/router"
+import { RouterModule } from "@angular/router"
+import { PagesComponent } from "./pages.component"

-const routes: Routes = [{
-  path: '',
+const routes: Routes = [
+  {
+    path: "",
    component: PagesComponent,
-}];
+  },
+]

@NgModule({
  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class PagesRoutingModule {}
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@ -1,39 +1,37 @@
 <div class="container" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="1em">
-
  <!-- IPFS -->
  <form fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="1em">
-
    <!-- Hash -->
    <mat-form-field [color]="inputColour">
      <mat-label>IPFS</mat-label>
-      <input name="ipfs" [(ngModel)]="ipfs" matInput>
+      <input name="ipfs" [(ngModel)]="ipfs" matInput />
    </mat-form-field>

    <!-- Cache -->
    <button (click)="cacheIPFS()" type="button" mat-flat-button color="primary">Cache</button>
-
  </form>

  <!-- IPNS -->
  <form fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="1em">
-
    <!-- Hash -->
    <mat-form-field [color]="inputColour">
      <mat-label>IPNS</mat-label>
-      <input name="ipns" [(ngModel)]="ipns" matInput>
+      <input name="ipns" [(ngModel)]="ipns" matInput />
    </mat-form-field>

    <!-- Cache -->
    <button (click)="cacheIPNS()" type="button" mat-flat-button color="primary">Cache</button>
-
  </form>

-  <mat-progress-bar [value]="dataSource.data.length / gateways.length * 100" *ngIf="subscriptions.length" mode="determinate"
-    color="primary">
+  <mat-progress-bar
+    [value]="(dataSource.data.length / gateways.length) * 100"
+    *ngIf="subscriptions.length"
+    mode="determinate"
+    color="primary"
+  >
  </mat-progress-bar>

  <table class="mat-elevation-z8" [dataSource]="dataSource" mat-table aria-label="List of IPFS gateways and their statuses.">
-
    <!-- Result Column -->
    <ng-container matColumnDef="icon">
      <th mat-header-cell *matHeaderCellDef scope="col">Status</th>
@ -64,24 +62,21 @@
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

  <!-- About -->
  <div fxLayout="column" fxLayoutAlign="space-evenly start" fxLayoutGap="1em">
    <h3>About</h3>
    <p>
-      This allows you to cache a specific IPFS hash to a bunch of public gateways.
-      It's inspired from <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>.
-      The source code is available at <a class="link"
-        href="https://gitlab.com/NatoBoram/public-gateway-cacher">gitlab.com/NatoBoram/public-gateway-cacher</a>.
+      This allows you to cache a specific IPFS hash to a bunch of public gateways. It's inspired from
+      <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>. The source code is
+      available at <a class="link" href="https://gitlab.com/NatoBoram/public-gateway-cacher">gitlab.com/NatoBoram/public-gateway-cacher</a>.
    </p>
    <p>
-      If you'd like to add a new public gateway,
-      please go to <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>,
-      submit a pull request then open an issue <a class="link"
-        href="https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new">here</a>.
+      If you'd like to add a new public gateway, please go to
+      <a class="link" href="https://github.com/ipfs/public-gateway-checker">github.com/ipfs/public-gateway-checker</a>, submit a pull
+      request then open an issue <a class="link" href="https://gitlab.com/NatoBoram/public-gateway-cacher/issues/new">here</a>.
    </p>
  </div>
-
 </div>
--- a/src/app/pages/pages.component.spec.ts
+++ b/src/app/pages/pages.component.spec.ts
@ -1,24 +1,28 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { PagesComponent } from './pages.component';
+import { HttpClientTestingModule } from "@angular/common/http/testing"
+import type { ComponentFixture } from "@angular/core/testing"
+import { TestBed, waitForAsync } from "@angular/core/testing"
+import { PagesComponent } from "./pages.component"

-describe('PagesComponent', (): void => {
-  let component: PagesComponent;
-  let fixture: ComponentFixture<PagesComponent>;
+describe("PagesComponent", (): void => {
+  let component: PagesComponent
+  let fixture: ComponentFixture<PagesComponent>

-  beforeEach(waitForAsync((): void => {
-    TestBed.configureTestingModule({
-      declarations: [PagesComponent]
+  beforeEach(
+    waitForAsync((): void => {
+      void TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule],
+        declarations: [PagesComponent],
+      }).compileComponents()
    })
-      .compileComponents();
-  }));
+  )

  beforeEach((): void => {
-    fixture = TestBed.createComponent(PagesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+    fixture = TestBed.createComponent(PagesComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })

-  it('should create', (): void => {
-    expect(component).toBeTruthy();
-  });
-});
+  it("should create", (): void => {
+    void expect(component).toBeTruthy()
+  })
+})
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@ -1,133 +1,151 @@
-import { HttpErrorResponse } from '@angular/common/http';
-import { Component, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-import { MatTable, MatTableDataSource } from '@angular/material/table';
-import { Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { environment } from '../../environments/environment';
-import { Protocol } from '../enums/protocol.enum';
-import { Theme } from '../enums/theme.enum';
-import { GatewayService } from '../services/gateway.service';
-import { ThemeService } from '../services/theme.service';
+import { HttpErrorResponse } from "@angular/common/http"
+import type { OnDestroy, OnInit } from "@angular/core"
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, ViewChild } from "@angular/core"
+import type { ThemePalette } from "@angular/material/core"
+import { MatTable, MatTableDataSource } from "@angular/material/table"
+import type { Subscription } from "rxjs"
+import { takeUntil } from "rxjs/operators"
+import { environment } from "../../environments/environment"
+import { Protocol } from "../enums/protocol.enum"
+import { Theme } from "../enums/theme.enum"
+import { GatewayService } from "../services/gateway.service"
+import { ThemeService } from "../services/theme.service"

@Component({
-  selector: 'app-pages',
-  templateUrl: './pages.component.html',
-  styleUrls: ['./pages.component.scss']
+  selector: "app-pages",
+  templateUrl: "./pages.component.html",
+  styleUrls: ["./pages.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PagesComponent implements OnInit, OnDestroy {
+  @ViewChild(MatTable) matTable!: MatTable<Result>

-  @ViewChild(MatTable) matTable!: MatTable<Result>;
+  gateways!: string[]
+  inputColour: ThemePalette = "primary"
+  ipfs = ""
+  ipns = ""

-  gateways!: string[];
-  inputColour: ThemePalette = 'primary';
-  ipfs = '';
-  ipns = '';
+  readonly dataSource = new MatTableDataSource<Result>([])
+  readonly displayedColumns = ["icon", "gateway"]
+  readonly subscriptions: Subscription[] = []

-  readonly dataSource = new MatTableDataSource<Result>([]);
-  readonly displayedColumns: ['icon', 'gateway'] = ['icon', 'gateway'];
-  readonly subscriptions: Subscription[] = [];
-
-  private readonly destroy$ = new EventEmitter<void>();
+  private readonly destroy$ = new EventEmitter<void>()

  constructor(
-    private readonly gatewayService: GatewayService,
-    private readonly themeService: ThemeService
+    @Inject(GatewayService) private readonly gatewayService: GatewayService,
+    @Inject(ThemeService) private readonly themeService: ThemeService
  ) {}

  ngOnInit(): void {
-    this.gatewayService.list().subscribe((gateways): void => { this.gateways = gateways; });
+    this.gatewayService
+      .list()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((gateways): void => {
+        this.gateways = gateways
+      })

    // Theme
-    this.setColours(this.themeService.current);
-    this.themeService.valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((theme): void => {
-      this.setColours(theme);
-    });
+    this.setColours(this.themeService.current)
+    this.themeService.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((theme): void => {
+      this.setColours(theme)
+    })
  }

  ngOnDestroy(): void {
-    this.destroy$.complete();
+    this.destroy$.next()
+    this.destroy$.complete()
  }

  cacheIPFS(): void {
-    this.ipfs = this.ipfs.trim();
-    this.cache(Protocol.IPFS, this.ipfs);
+    this.ipfs = this.ipfs.trim()
+    this.cache(Protocol.IPFS, this.ipfs)
  }

  cacheIPNS(): void {
-    this.ipns = this.ipns.trim();
-    this.cache(Protocol.IPNS, this.ipns);
+    this.ipns = this.ipns.trim()
+    this.cache(Protocol.IPNS, this.ipns)
  }

  cache(protocol: Protocol, hashpath: string): void {
-
    // Clear subscriptions
    while (this.subscriptions.length) {
-      const sub = this.subscriptions.pop();
+      const sub = this.subscriptions.pop()
      if (sub && !sub.closed) {
-        sub.unsubscribe();
+        sub.unsubscribe()
      }
    }

    // Clear table
-    this.dataSource.data = [];
-    this.matTable.renderRows();
-    console.clear();
+    this.dataSource.data = []
+    this.matTable.renderRows()
+    console.clear()

    this.gateways.forEach((gateway): void => {
      this.subscriptions.push(
-        this.gatewayService.get(gateway, protocol, hashpath).subscribe((resp): void => {
-          this.dataSource.data.push({
+        this.gatewayService
+          .get(gateway, protocol, hashpath)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(
+            (resp): void => {
+              this.dataSource.data.unshift({
                gateway: this.gatewayService.url(gateway, protocol, hashpath),
                message: resp.statusText,
                icon: this.getIcon(resp.status),
                ok: resp.ok,
-          });
-          this.matTable.renderRows();
-        }, (error: HttpErrorResponse): void => {
+              })
+              this.matTable.renderRows()
+            },
+            (error: unknown): void => {
+              if (!(error instanceof HttpErrorResponse)) return
+
              this.dataSource.data.push({
                gateway: this.gatewayService.url(gateway, protocol, hashpath),
                message: error.statusText,
                icon: this.getIcon(error.status),
                ok: error.ok,
-          });
-          this.matTable.renderRows();
              })
-      );
-    });
+              this.matTable.renderRows()
+            }
+          )
+      )
+    })
  }

  private setColours(theme: Theme): void {
    switch (theme) {
      case Theme.Light:
-        this.inputColour = 'primary';
-        break;
+        this.inputColour = "primary"
+        break
      case Theme.Dark:
-        this.inputColour = 'accent';
-        break;
+        this.inputColour = "accent"
+        break
      default:
-        break;
+        break
    }
  }

  private getIcon(status: number): string {
-    if (status >= 200 && status < 300) { return '✅'; }
+    if (status >= 200 && status < 300) {
+      return "✅"
+    }
    switch (status) {
-      case 0: return '❌';
-      case 403: return '⛔';
-      case 404: return '❓';
-      case 500: return '❗';
-      default: return environment.production ? '❌' : '❔';
+      case 0:
+        return "❌"
+      case 403:
+        return "⛔"
+      case 404:
+        return "❓"
+      case 500:
+        return "❗"
+      default:
+        return environment.production ? "❌" : "❔"
    }
  }
-
 }

 interface Result {
-  gateway: string;
-  message: string;
-  icon: string;
-  ok: boolean;
+  gateway: string
+  message: string
+  icon: string
+  ok: boolean
 }
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@ -1,15 +1,15 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { PagesRoutingModule } from './pages-routing.module';
-import { PagesComponent } from './pages.component';
+import { CommonModule } from "@angular/common"
+import { NgModule } from "@angular/core"
+import { FlexLayoutModule } from "@angular/flex-layout"
+import { FormsModule } from "@angular/forms"
+import { MatButtonModule } from "@angular/material/button"
+import { MatInputModule } from "@angular/material/input"
+import { MatProgressBarModule } from "@angular/material/progress-bar"
+import { MatSortModule } from "@angular/material/sort"
+import { MatTableModule } from "@angular/material/table"
+import { MatTooltipModule } from "@angular/material/tooltip"
+import { PagesRoutingModule } from "./pages-routing.module"
+import { PagesComponent } from "./pages.component"

@NgModule({
  declarations: [PagesComponent],
@ -24,6 +24,6 @@ import { PagesComponent } from './pages.component';
    MatTableModule,
    MatTooltipModule,
    PagesRoutingModule,
-  ]
+  ],
 })
 export class PagesModule {}
--- a/src/app/services/gateway.service.spec.ts
+++ b/src/app/services/gateway.service.spec.ts
@ -1,11 +1,18 @@
-import { TestBed, TestBedStatic } from '@angular/core/testing';
-import { GatewayService } from './gateway.service';
+import { HttpClientTestingModule } from "@angular/common/http/testing"
+import type { TestBedStatic } from "@angular/core/testing"
+import { TestBed } from "@angular/core/testing"
+import { GatewayService } from "./gateway.service"

-describe('GatewayService', (): void => {
-  beforeEach((): TestBedStatic => TestBed.configureTestingModule({}));
+describe("GatewayService", (): void => {
+  beforeEach(
+    (): TestBedStatic =>
+      TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule],
+      })
+  )

-  it('should be created', (): void => {
-    const service: GatewayService = TestBed.inject(GatewayService);
-    expect(service).toBeTruthy();
-  });
-});
+  it("should be created", (): void => {
+    const service: GatewayService = TestBed.inject(GatewayService)
+    void expect(service).toBeTruthy()
+  })
+})
--- a/src/app/services/gateway.service.ts
+++ b/src/app/services/gateway.service.ts
@ -1,37 +1,34 @@
-import { HttpClient, HttpResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { environment } from '../../environments/environment';
-import { Protocol } from '../enums/protocol.enum';
+import type { HttpResponse } from "@angular/common/http"
+import { HttpClient } from "@angular/common/http"
+import { Inject, Injectable } from "@angular/core"
+import type { Observable } from "rxjs"
+import { environment } from "../../environments/environment"
+import type { Protocol } from "../enums/protocol.enum"

@Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class GatewayService {
-
-  constructor(
-    private readonly http: HttpClient
-  ) { }
+  constructor(@Inject(HttpClient) private readonly http: HttpClient) {}

  list(): Observable<string[]> {
    return this.http.get<string[]>(
-      environment.base_href && environment.base_href !== '/'
+      environment.base_href && environment.base_href !== "/"
        ? `${environment.base_href}/assets/json/gateways.json`
-        : `${document.querySelector('base')?.href}assets/json/gateways.json`
-    );
+        : `${document.querySelector("base")?.href ?? ""}assets/json/gateways.json`
+    )
  }

  get(gateway: string, protocol: Protocol, hashpath: string): Observable<HttpResponse<string>> {
    return this.http.get(`${this.url(gateway, protocol, hashpath)}#x-ipfs-companion-no-redirect`, {
-      observe: 'response',
-      responseType: 'text',
-    });
+      observe: "response",
+      responseType: "text",
+    })
  }

  url(gateway: string, protocol: Protocol, hashpath: string): string {
-    const splits: string[] = hashpath.split('/');
-    const url: string = gateway.replace(':type', protocol).replace(':hash', splits.shift() || '');
-    return splits.length ? [url, splits.join('/')].join('/') : url;
+    const splits: string[] = hashpath.split("/")
+    const url: string = gateway.replace(":type", protocol).replace(":hash", splits.shift() ?? "")
+    return splits.length ? [url, splits.join("/")].join("/") : url
  }
-
 }
--- a/src/app/services/theme.service.spec.ts
+++ b/src/app/services/theme.service.spec.ts
@ -1,15 +1,15 @@
-import { TestBed } from '@angular/core/testing';
-import { ThemeService } from './theme.service';
+import { TestBed } from "@angular/core/testing"
+import { ThemeService } from "./theme.service"

-describe('ThemeService', (): void => {
-  let service: ThemeService;
+describe("ThemeService", (): void => {
+  let service: ThemeService

  beforeEach((): void => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ThemeService);
-  });
+    TestBed.configureTestingModule({})
+    service = TestBed.inject(ThemeService)
+  })

-  it('should be created', (): void => {
-    expect(service).toBeTruthy();
-  });
-});
+  it("should be created", (): void => {
+    void expect(service).toBeTruthy()
+  })
+})
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@ -1,49 +1,51 @@
-import { Injectable } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
-import { Theme } from '../enums/theme.enum';
+import { Injectable } from "@angular/core"
+import type { Observable } from "rxjs"
+import { Subject } from "rxjs"
+import { Theme } from "../enums/theme.enum"

 function enumGuard<T>(enumeration: T): (token: unknown) => token is T[keyof T] {
-  return (token: unknown): token is T[keyof T] => Object.values(enumeration).includes(token);
+  return (token: unknown): token is T[keyof T] => Object.values(enumeration).includes(token)
 }

@Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class ThemeService {
+  current = Theme.Light
+  icon = "brightness_low"
+  readonly valueChanges: Observable<Theme>

-  current = Theme.Light;
-  icon = 'brightness_low';
-  readonly valueChanges: Observable<Theme>;
-
-  private readonly subject$ = new Subject<Theme>();
+  private readonly subject$ = new Subject<Theme>()

  constructor() {
-    const stored = localStorage.getItem('theme');
+    const stored = localStorage.getItem("theme")
    if (enumGuard(Theme)(stored)) {
-      this.setTheme(stored);
+      this.setTheme(stored)
    }

-    this.valueChanges = this.subject$.asObservable();
+    this.valueChanges = this.subject$.asObservable()
  }

  switchTheme(): void {
-    this.setTheme(this.current === Theme.Light ? Theme.Dark : Theme.Light);
+    this.setTheme(this.current === Theme.Light ? Theme.Dark : Theme.Light)
  }

  setTheme(theme: Theme): void {
-    document.querySelector('body')?.classList.remove(this.current);
-    document.querySelector('body')?.classList.add(theme);
-    this.current = theme;
-    this.icon = this.getIcon(theme);
-    this.subject$.next(theme);
-    localStorage.setItem('theme', theme);
+    document.querySelector("body")?.classList.remove(this.current)
+    document.querySelector("body")?.classList.add(theme)
+    this.current = theme
+    this.icon = this.getIcon(theme)
+    this.subject$.next(theme)
+    localStorage.setItem("theme", theme)
  }

  getIcon(theme: Theme): string {
    switch (theme) {
-      case Theme.Dark: return 'brightness_high';
+      case Theme.Dark:
+        return "brightness_high"
      case Theme.Light:
-      default: return 'brightness_low';
+      default:
+        return "brightness_low"
    }
  }
 }
--- a/src/assets/json/gateways.json
+++ b/src/assets/json/gateways.json
@ -3,9 +3,9 @@
  "https://dweb.link/:type/:hash",
  "https://gateway.ipfs.io/:type/:hash",
  "https://ipfs.infura.io/:type/:hash",
+  "https://infura-ipfs.io/:type/:hash",
  "https://ninetailed.ninja/:type/:hash",
-  "https://ipfs.globalupload.io/:hash",
-  "https://10.via0.com/:type/:hash",
+  "https://via0.com/:type/:hash",
  "https://ipfs.eternum.io/:type/:hash",
  "https://hardbin.com/:type/:hash",
  "https://gateway.blocksec.com/:type/:hash",
@ -21,62 +21,73 @@
  "https://ipfs.busy.org/:type/:hash",
  "https://ipfs.greyh.at/:type/:hash",
  "https://gateway.serph.network/:type/:hash",
-  "https://jorropo.ovh/:type/:hash",
  "https://jorropo.net/:type/:hash",
-  "https://gateway.temporal.cloud/:type/:hash",
  "https://ipfs.fooock.com/:type/:hash",
  "https://cdn.cwinfo.net/:type/:hash",
-  "https://ipfs.privacytools.io/:type/:hash",
+  "https://aragon.ventures/:type/:hash",
+  "https://ipfs-cdn.aragon.ventures/:type/:hash",
  "https://permaweb.io/:type/:hash",
-  "https://ipfs.stibarc.com/:type/:hash",
  "https://ipfs.best-practice.se/:type/:hash",
  "https://2read.net/:type/:hash",
  "https://ipfs.2read.net/:type/:hash",
  "https://storjipfs-gateway.com/:type/:hash",
  "https://ipfs.runfission.com/:type/:hash",
-  "https://trusti.id/:type/:hash",
-  "https://apac.trusti.id/:type/:hash",
+  "https://ipfs.trusti.id/:type/:hash",
  "https://ipfs.overpi.com/:type/:hash",
  "https://gateway.ipfs.lc/:type/:hash",
-  "https://ipfs.leiyun.org/:type/:hash",
  "https://ipfs.ink/:type/:hash",
-  "https://ipfs.oceanprotocol.com/:type/:hash",
-  "https://d26g9c7mfuzstv.cloudfront.net/:type/:hash",
  "https://ipfsgateway.makersplace.com/:type/:hash",
  "https://gateway.ravenland.org/:type/:hash",
-  "https://ipfs.smartsignature.io/:type/:hash",
  "https://ipfs.funnychain.co/:type/:hash",
  "https://ipfs.telos.miami/:type/:hash",
-  "https://robotizing.net/:type/:hash",
  "https://ipfs.mttk.net/:type/:hash",
  "https://ipfs.fleek.co/:type/:hash",
  "https://ipfs.jbb.one/:type/:hash",
  "https://ipfs.yt/:type/:hash",
-  "https://jacl.tech/:type/:hash",
  "https://hashnews.k1ic.com/:type/:hash",
  "https://ipfs.vip/:type/:hash",
-  "https://ipfs.k1ic.com/:type/:hash",
  "https://ipfs.drink.cafe/:type/:hash",
  "https://ipfs.azurewebsites.net/:type/:hash",
  "https://gw.ipfspin.com/:type/:hash",
  "https://ipfs.kavin.rocks/:type/:hash",
  "https://ipfs.denarius.io/:type/:hash",
  "https://ipfs.mihir.ch/:type/:hash",
-  "https://bluelight.link/:type/:hash",
  "https://crustwebsites.net/:type/:hash",
-  "https://trusted-setup.filecoin.io/:type/:hash",
-  "http://3.211.196.68:8080/:type/:hash",
  "https://ipfs0.sjc.cloudsigma.com/:type/:hash",
-  "https://ipfs-tezos.giganode.io/:type/:hash",
-  "http://183.252.17.149:82/:type/:hash",
  "http://ipfs.genenetwork.org/:type/:hash",
  "https://ipfs.eth.aragon.network/:type/:hash",
  "https://ipfs.smartholdem.io/:type/:hash",
-  "https://bin.d0x.to/:type/:hash",
  "https://ipfs.xoqq.ch/:type/:hash",
-  "https://birds-are-nice.me/:type/:hash",
  "http://natoboram.mynetgear.com:8080/:type/:hash",
-  "https://ipfs.foxgirl.dev/:type/:hash",
  "https://video.oneloveipfs.com/:type/:hash",
-  "http://ipfs.anonymize.com/:type/:hash"
+  "http://ipfs.anonymize.com/:type/:hash",
+  "https://ipfs.taxi/:type/:hash",
+  "https://ipfs.scalaproject.io/:type/:hash",
+  "https://search.ipfsgate.com/:type/:hash",
+  "https://ipfs.decoo.io/:type/:hash",
+  "https://ivoputzer.xyz/:type/:hash",
+  "https://alexdav.id/:type/:hash",
+  "https://ipfs.uploads.nu/:type/:hash",
+  "https://hub.textile.io/:type/:hash",
+  "https://ipfs1.pixura.io/:type/:hash",
+  "https://ravencoinipfs-gateway.com/:type/:hash",
+  "https://konubinix.eu/:type/:hash",
+  "https://3cloud.ee/:type/:hash",
+  "https://ipfs.tubby.cloud/:type/:hash",
+  "https://ipfs.lain.la/:type/:hash",
+  "https://ipfs.adatools.io/:type/:hash",
+  "https://ipfs.kaleido.art/:type/:hash",
+  "https://ipfs.slang.cx/:type/:hash",
+  "https://ipfs.arching-kaos.com/:type/:hash",
+  "https://storry.tv/:type/:hash",
+  "https://ipfs.kxv.io/:type/:hash",
+  "https://ipfs.1-2.dev/:type/:hash",
+  "https://ipfs-nosub.stibarc.com/:type/:hash",
+  "https://dweb.eu.org/:type/:hash",
+  "https://permaweb.eu.org/:type/:hash",
+  "https://ipfs.namebase.io/:type/:hash",
+  "https://ipfs.tribecap.co/:type/:hash",
+  "https://ipfs.kinematiks.com/:type/:hash",
+  "https://c4rex.co/:type/:hash",
+  "https://ipfs.zod.tv/:type/:hash"
 ]
--- a/src/environments/environment.gitlab.ts
+++ b/src/environments/environment.gitlab.ts
@ -1,7 +1,7 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"

 export const environment: Environment = {
  production: true,
-  base_href: '/public-gateway-cacher',
+  base_href: "/public-gateway-cacher",
  useHash: false,
-};
+}
--- a/src/environments/environment.ipfs.ts
+++ b/src/environments/environment.ipfs.ts
@ -1,6 +1,6 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"

 export const environment: Environment = {
  production: true,
  useHash: true,
-};
+}
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@ -1,7 +1,7 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"

 export const environment: Environment = {
  production: true,
-  base_href: '/',
+  base_href: "/",
  useHash: false,
-};
+}
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@ -1,4 +1,4 @@
-import { Environment } from '../app/interfaces/environment';
+import type { Environment } from "../app/interfaces/environment"

 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
@ -6,9 +6,9 @@ import { Environment } from '../app/interfaces/environment';

 export const environment: Environment = {
  production: false,
-  base_href: '/',
+  base_href: "/",
  useHash: false,
-};
+}

 /*
 * For easier debugging in development mode, you can import the following file
@ -17,4 +17,4 @@ export const environment: Environment = {
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
--- a/src/index.html
+++ b/src/index.html
@ -1,26 +1,23 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
  <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8" />
    <title>Public Gateway Cacher</title>

    <!-- IPFS -->
    <script>
-    if (document.getElementsByTagName('base').length === 0) document.write('<base href="' + window.location.pathname + '"/>');
+      if (document.getElementsByTagName("base").length === 0) document.write('<base href="' + window.location.pathname + '"/>')
    </script>

-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.png" />

    <!-- Material -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  </head>

  <body class="mat-app-background theme-light">
    <app-root></app-root>
  </body>
-
 </html>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,11 +1,12 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { enableProdMode } from "@angular/core"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
+import { AppModule } from "./app/app.module"
+import { environment } from "./environments/environment"

 if (environment.production) {
-  enableProdMode();
+  enableProdMode()
 }

-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch((err): void => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err): void => console.error(err))
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@ -18,16 +18,6 @@
 * BROWSER POLYFILLS
 */

-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
@ -55,8 +45,7 @@
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import "zone.js" // Included with Angular CLI.

 /***************************************************************************************************
 * APPLICATION IMPORTS
--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,12 +1,12 @@
 // Custom Theming for Angular Material
+@use "@angular/material" as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // Plus imports for other components in your app.

 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();

 // // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@ -25,14 +25,14 @@
 // // that you are using.
 // @include angular-material-theme($public-gateway-cacher-theme);

-@import 'styles/ipfs-themes.scss';
+@import "styles/ipfs-themes.scss";

 .theme-light {
-  @include angular-material-theme($ipfs-light-theme);
+  @include mat.all-component-themes($ipfs-light-theme);
 }

 .theme-dark {
-  @include angular-material-theme($ipfs-dark-theme);
+  @include mat.all-component-themes($ipfs-dark-theme);
 }

 /* You can add global styles to this file, and also import other style files */
@ -47,5 +47,5 @@ body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
 }

-@import '~bootstrap/scss/bootstrap-grid.scss';
-@import '~ipfs-css/theme.scss';
+@import "~bootstrap/scss/bootstrap-grid.scss";
+@import "~ipfs-css/theme.scss";
--- a/src/styles/ipfs-colours.scss
+++ b/src/styles/ipfs-colours.scss
@ -1,23 +1,34 @@
-$ipfs-colour-navy: (default: #0B3A53,
+@import "@angular/material/core/theming/palette";
+
+$ipfs-colour-navy: (
+  default: #0b3a53,
  lighter: #3e6480,
  darker: #00142a,
-  contrast: (default: $light-primary-text,
+  contrast: (
+    default: $light-primary-text,
    lighter: $light-primary-text,
    darker: $light-primary-text,
-  ));
+  ),
+);

-$ipfs-colour-aqua: (default: #69c5cd,
+$ipfs-colour-aqua: (
+  default: #69c5cd,
  lighter: #9df8ff,
  darker: #32949c,
-  contrast: (default: $dark-primary-text,
+  contrast: (
+    default: $dark-primary-text,
    lighter: $dark-primary-text,
    darker: $dark-primary-text,
-  ));
+  ),
+);

-$ipfs-colour-yellow: (default: #f39021,
+$ipfs-colour-yellow: (
+  default: #f39021,
  lighter: #ffc155,
  darker: #bb6200,
-  contrast: (default: $dark-primary-text,
+  contrast: (
+    default: $dark-primary-text,
    lighter: $dark-primary-text,
    darker: $dark-primary-text,
-  ));
+  ),
+);
--- a/src/styles/ipfs-palettes.scss
+++ b/src/styles/ipfs-palettes.scss
@ -1,5 +1,6 @@
-@import 'ipfs-colours.scss';
+@use "@angular/material" as mat;
+@import "ipfs-colours.scss";

-$ipfs-primary: mat-palette($ipfs-colour-navy, 'default', 'lighter', 'darker');
-$ipfs-accent: mat-palette($ipfs-colour-aqua, 'default', 'lighter', 'darker');
-$ipfs-warn: mat-palette($ipfs-colour-yellow, 'default', 'lighter', 'darker');
+$ipfs-primary: mat.define-palette($ipfs-colour-navy, "default", "lighter", "darker");
+$ipfs-accent: mat.define-palette($ipfs-colour-aqua, "default", "lighter", "darker");
+$ipfs-warn: mat.define-palette($ipfs-colour-yellow, "default", "lighter", "darker");
--- a/src/styles/ipfs-themes.scss
+++ b/src/styles/ipfs-themes.scss
@ -1,4 +1,5 @@
-@import 'ipfs-palettes.scss';
+@use "@angular/material" as mat;
+@import "ipfs-palettes.scss";

-$ipfs-light-theme: mat-light-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);
-$ipfs-dark-theme: mat-dark-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);
+$ipfs-light-theme: mat.define-light-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);
+$ipfs-dark-theme: mat.define-dark-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);
--- a/src/test.ts
+++ b/src/test.ts
@ -1,20 +1,16 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import "zone.js/testing"

-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+import { getTestBed } from "@angular/core/testing"
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing"

-declare const require: any;
+declare const require: any

 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { teardown: { destroyAfterEach: false } })
+
 // Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
+const context = require.context("./", true, /\.spec\.ts$/)
+
 // And load the modules.
-context.keys().map(context);
+context.keys().map(context)
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -5,11 +5,6 @@
    "outDir": "./out-tsc/app",
    "types": []
  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -6,20 +6,31 @@
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
-    "target": "es2015",
-    "module": "es2020",
-    "lib": [
-      "es2018",
-      "dom"
-    ]
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@ -3,16 +3,8 @@
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
  },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }
--- a/tslint.json
+++ b/tslint.json
@ -1,324 +0,0 @@
-{
-  "extends": [
-    "tslint:recommended",
-    "rxjs-tslint-rules"
-  ],
-  "linterOptions": {
-    "exclude": [
-      "**/*-routing.module.ts",
-      "src/polyfills.ts",
-      "src/test.ts",
-      "**/*.po.ts"
-    ]
-  },
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-parens": false,
-    "arrow-return-shorthand": [
-      true,
-      "multiline"
-    ],
-    "ban-types": [
-      true,
-      [
-        "Object",
-        "Use {} instead."
-      ],
-      [
-        "String"
-      ]
-    ],
-    "callable-types": true,
-    "component-class-suffix": true,
-    "component-max-inline-declarations": true,
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "contextual-decorator": false,
-    "contextual-lifecycle": true,
-    "curly": true,
-    "cyclomatic-complexity": [
-      true,
-      20
-    ],
-    "deprecation": {
-      "severity": "warning"
-    },
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "encoding": true,
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-destructuring-spacing": true,
-    "import-spacing": true,
-    "increment-decrement": [
-      true,
-      "allow-post"
-    ],
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "max-file-line-count": [
-      true,
-      400
-    ],
-    "max-line-length": [
-      true,
-      {
-        "ignore-pattern": "^import |^export {(.*?)}|class [a-zA-Z]+ implements |// ",
-        "limit": 140
-      }
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "public-static-field",
-          "private-static-field",
-          "public-instance-field",
-          "private-instance-field",
-          "public-constructor",
-          "private-constructor",
-          "public-instance-method",
-          "protected-instance-method",
-          "private-instance-method",
-          "public-static-method",
-          "protected-static-method",
-          "private-static-method"
-        ]
-      }
-    ],
-    "newline-before-return": false,
-    "no-any": [
-      true,
-      {
-        "ignore-rest-args": true
-      }
-    ],
-    "no-arg": true,
-    "no-attribute-decorator": true,
-    "no-collapsible-if": true,
-    "no-conflicting-lifecycle": true,
-    "no-consecutive-blank-lines": [
-      true,
-      1
-    ],
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-default-export": true,
-    "no-default-import": true,
-    "no-duplicate-imports": true,
-    "no-duplicate-super": true,
-    "no-duplicate-switch-case": true,
-    "no-empty": [
-      true,
-      "allow-empty-functions"
-    ],
-    "no-for-in-array": true,
-    "no-forward-ref": true,
-    "no-host-metadata-property": true,
-    "no-implicit-dependencies": [
-      false,
-      "dev"
-    ],
-    "no-import-side-effect": [
-      true,
-      {
-        "ignore-module": "(hammerjs|core-js|zone.js)"
-      }
-    ],
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-invalid-template-strings": true,
-    "no-invalid-this": [
-      true,
-      "check-function-in-method"
-    ],
-    "no-lifecycle-call": true,
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "no-pipe-impure": true,
-    "no-queries-metadata-property": true,
-    "no-redundant-jsdoc": true,
-    "no-reference": true,
-    "no-require-imports": true,
-    "no-return-await": true,
-    "no-return-undefined": true,
-    "no-static-this": true,
-    "no-switch-case-fall-through": true,
-    "no-tautology-expression": true,
-    "no-this-assignment": true,
-    "no-trailing-whitespace": true,
-    "no-unbound-method": true,
-    "no-unnecessary-callback-wrapper": true,
-    "no-unnecessary-class": [
-      true,
-      "allow-constructor-only",
-      "allow-static-only",
-      "allow-empty-class"
-    ],
-    "no-unnecessary-initializer": true,
-    "no-unnecessary-type-assertion": true,
-    "no-unsafe-finally": true,
-    "no-unused": true,
-    "no-unused-css": true,
-    "no-var-keyword": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
-    "origin-ordered-imports": [
-      true
-    ],
-    "prefer-const": true,
-    "prefer-inline-decorator": false,
-    "prefer-output-readonly": true,
-    "prefer-readonly": true,
-    "prefer-template": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": false,
-    "restrict-plus-operands": true,
-    "rx-subject-restrictions": true,
-    "rxjs-no-compat": true,
-    "rxjs-no-internal": true,
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": [
-      true,
-      {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    ],
-    "space-within-parens": true,
-    "template-banana-in-box": true,
-    "template-conditional-complexity": true,
-    "template-no-call-expression": true,
-    "template-no-negated-async": true,
-    "template-use-track-by-function": true,
-    "trailing-comma": [
-      true,
-      {
-        "esSpecCompliant": true,
-        "multiline": {
-          "arrays": "ignore",
-          "functions": "never",
-          "objects": "ignore",
-          "typeLiterals": "ignore"
-        }
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": [
-      true,
-      "call-signature",
-      "property-declaration",
-      "object-destructuring",
-      "arrow-call-signature"
-    ],
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "unnecessary-else": [
-      true,
-      {
-        "allow-else-if": true
-      }
-    ],
-    "use-component-view-encapsulation": true,
-    "use-isnan": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-decorator": true,
-    "use-pipe-transform-interface": true,
-    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-leading-underscore",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    }
-  },
-  "rulesDirectory": [
-    "codelyzer",
-    "node_modules/tslint-origin-ordered-imports-rule/dist",
-    "node_modules/tslint-rxjs-subject-restrictions-rule/dist",
-    "node_modules/tslint-consistent-codestyle/rules"
-  ]
-}
--- a/yarn.lock
+++ b/yarn.lock