Add caching and cache-busting to dapp icons (#2697)

* add file hashes to spa.js and spa.css

* changed / added headers and changed / added test

* clippy fix

* fix integration tests so they dont use dist folder so theyll work on github

* fix tests to use appropriate certification version

* set caching back to 1 year

* add test for logo header

* format

* change logo location in frontend checks

* change checks and scripts with new folder

* Update update-dapps.yml

* Update update-dapps

* 🤖 cargo-fmt auto-update

* make unknowndapplogo dynamic as well

* add smooth transition for marquee images after theyre loaded

* format and remove comment

* correct path in scripts/update-dapps

* more elegant to actually use our variables

* Update comments

* Add comment with absolute filepath for future reference

* Update comments

Corrected some errors in the comments.

* add variables for icon name and suffix in integration test

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: sea-snake <104725312+sea-snake@users.noreply.github.com>

.github/workflows/frontend-checks.yml

@@ -29,7 +29,7 @@ jobs:
         run: |
           while read -r logo
           do
-            if [ ! -f src/frontend/assets/icons/"$logo" ]
+            if [ ! -f src/frontend/src/assets/icons/"$logo" ]
             then
               echo "Logo not found: $logo"
               exit 1
@@ -62,7 +62,7 @@ jobs:
       - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: 'dist-showcase'
+          path: "dist-showcase"
 
   # Deploy the showcase to GitHub Pages
   showcase-deploy:

.github/workflows/update-dapps.yml

@@ -4,7 +4,7 @@ name: Dapps Update
 on:
   schedule:
     # Check for updates daily
-    - cron:  '0 0 * * *'
+    - cron: "0 0 * * *"
   workflow_dispatch:
 
 jobs:
@@ -32,13 +32,14 @@ jobs:
           base: main
           add-paths: |
             src/frontend/src/flows/dappsExplorer/dapps.json
-            src/frontend/assets/icons
+            src/frontend/src/assets/icons
           commit-message: Update dapps
           committer: GitHub <noreply@github.com>
           author: gix-bot <gix-bot@users.noreply.github.com>
           branch: bot-dapps-update
           delete-branch: true
-          title: 'Update dapps list'
+          title:
+            "Update dapps list"
 
             # Since the this is a scheduled job, a failure won't be shown on any
             # PR status. To notify the team, we send a message to our Slack channel on failure.

scripts/update-dapps

@@ -10,7 +10,7 @@ cd "$SCRIPTS_DIR/.."
 # The path where we save the list of dapps in II
 DAPPS_JSON="$PWD/src/frontend/src/flows/dappsExplorer/dapps.json"
 # The path where we save logos in II
-II_LOGO_PREFIX="src/frontend/assets/icons"
+II_LOGO_PREFIX="src/frontend/src/assets/icons"
 
 function title() {
     echo "Update dapps descriptions & logos from dfinity/portal"
@@ -65,7 +65,7 @@ function update() {
     # The actual path prefix where logos are stored
     portal_filepath_prefix="static/img/showcase"
     # The path where we save logos in II
-    II_LOGO_PREFIX="src/frontend/assets/icons"
+    II_LOGO_PREFIX="src/frontend/src/assets/icons"
 
     # The path where we save the list of dapps in II
     DAPPS_JSON="$PWD/src/frontend/src/flows/dappsExplorer/dapps.json"
@@ -117,7 +117,7 @@ function update() {
             --show-error \
             --silent \
             "$portal_url/$portal_logo_path" \
-            --output "src/frontend/assets/icons/$logo"
+            --output "$ii_logo_path"
 
     done < <(jq -cMr <"$DAPPS_JSON" '.[] | .logo')
 

src/frontend/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Internet Identity</title>
-    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="shortcut icon" href="/src/assets/favicon.ico" />
     <link rel="stylesheet" href="src/styles/main.css" />
     <script type="module" src="src/index.ts"></script>
   </head>

src/frontend/src/flows/dappsExplorer/dapps.ts

@@ -1,5 +1,10 @@
-import { BASE_URL } from "$src/environment";
 import { features } from "$src/features";
+// This path should point to internet-identity/src/frontend/src/assets/icons/*
+const iconFiles = import.meta.glob("../../assets/icons/*", {
+  eager: true,
+  query: "?url",
+  import: "default",
+});
 
 // The list of dapps. This is derived from https://github.com/dfinity/portal:
 // * Only dapps using II are used
@@ -39,7 +44,8 @@ export class KnownDapp {
 
   // Path to use for logo files
   public get logoSrc(): string {
-    return BASE_URL + "icons/" + this.descr.logo;
+    const path = `../../assets/icons/${this.descr.logo}`;
+    return iconFiles[path] as string;
   }
 
   public get name(): string {

src/frontend/src/flows/dappsExplorer/teaser.ts

@@ -70,13 +70,18 @@ const marqueeList = (dapps: KnownDapp[]): TemplateResult => {
   >
     ${rows.map((rowDapps, i) => {
       const rowContent = rowDapps.map(
-        // XXX: it's important not to lazy load the image, otherwise
-        // images start appearing before they're loaded. This then
-        // shows an empty space where the image suddenly pops seconds
-        // later.
         ({ logoSrc, name }) => html`<div class="c-marquee__item">
           <div class="c-marquee__image-container">
-            <img src=${logoSrc} alt="${name}" class="c-marquee__image" />
+            <img
+              src=${logoSrc}
+              alt="${name}"
+              class="c-marquee__image c-marquee__image--loading"
+              @load=${(e: Event) => {
+                const img = e.target as HTMLImageElement;
+                img.classList.remove("c-marquee__image--loading");
+                img.classList.add("c-marquee__image--loaded");
+              }}
+            />
           </div>
         </div>`
       );

src/frontend/src/flows/verifiableCredentials/allowCredentials.ts

@@ -14,6 +14,8 @@ import DOMPurify from "dompurify";
 
 import copyJson from "./allowCredentials.json";
 
+import unknownDappLogo from "$src/assets/unknowndapp.png";
+
 /*
  * Get the dapp that corresponds to the origin, or create a new one if it's
  * unknown
@@ -25,7 +27,7 @@ const getOrigin = (origin: string, dapplist: KnownDapp[]): KnownDapp => {
     foundDapp = new KnownDapp({
       name: origin,
       website: origin,
-      logo: "../unknowndapp.png",
+      logo: unknownDappLogo,
     });
   }
 

src/frontend/src/styles/main.css

@@ -3272,6 +3272,15 @@ input[type="checkbox"] {
   height: 100%;
   width: 100%;
   object-fit: contain;
+  transition: opacity 0.3s ease-in;
+}
+
+.c-marquee__image--loading {
+  opacity: 0;
+}
+
+.c-marquee__image--loaded {
+  opacity: 1;
 }
 
 @keyframes marquee {

src/internet_identity/Cargo.toml

@@ -48,6 +48,7 @@ hex-literal = "0.4"
 regex.workspace = true
 ic-response-verification.workspace = true
 identity_jose = { git = "https://github.com/dfinity/identity.rs.git", rev = "aa510ef7f441848d6c78058fe51ad4ad1d9bd5d8", default-features = false}
+flate2 = "1.0"
 
 
 [features]