Add hash to albatross-client file for cache-bust

nimiq · Nov 29, 2024 · fe36951 · fe36951
1 parent 133e7a5
commit fe36951
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 11 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -182,7 +182,7 @@ <h2>Result</h2>
     crossorigin="anonymous"></script>
 
 <script type="module">
-    import init, * as Nimiq from '/albatross-client/web/index.js';
+    import init, * as Nimiq from '/albatross-client/web/index.js?v=<%= htmlWebpackPlugin.options.albatrossClientHash %>';
 
     /** @type {Promise<Nimiq> | undefined} */
     let initPromise;

diff --git a/public/cashlink.html b/public/cashlink.html
@@ -22,7 +22,7 @@
     <link rel="icon" href="<%= htmlWebpackPlugin.options.domain %>/favicon.ico">
 
     <script type="module">
-        import init, * as Nimiq from '/albatross-client/web/index.js';
+        import init, * as Nimiq from '/albatross-client/web/index.js?v=<%= htmlWebpackPlugin.options.albatrossClientHash %>';
 
         /** @type {Promise<Nimiq> | undefined} */
         let initPromise;

diff --git a/public/export.html b/public/export.html
@@ -13,7 +13,7 @@
     </style>
 
     <script type="module">
-        import init, * as Nimiq from '/albatross-client/web/index.js';
+        import init, * as Nimiq from '/albatross-client/web/index.js?v=<%= htmlWebpackPlugin.options.albatrossClientHash %>';
 
         /** @type {Promise<Nimiq> | undefined} */
         let initPromise;

diff --git a/public/iframe.html b/public/iframe.html
@@ -6,7 +6,7 @@
     <meta name="robots" content="noindex">
     <title>Nimiq Hub IFrame</title>
     <script type="module">
-      import init, * as Nimiq from '/albatross-client/web/index.js';
+      import init, * as Nimiq from '/albatross-client/web/index.js?v=<%= htmlWebpackPlugin.options.albatrossClientHash %>';
 
       /** @type {Promise<Nimiq> | undefined} */
       let initPromise;

diff --git a/public/index.html b/public/index.html
@@ -20,7 +20,7 @@
     <link rel="icon" href="<%= htmlWebpackPlugin.options.domain %>/favicon.ico">
 
     <script type="module">
-        import init, * as Nimiq from '/albatross-client/web/index.js';
+        import init, * as Nimiq from '/albatross-client/web/index.js?v=<%= htmlWebpackPlugin.options.albatrossClientHash %>';
 
         /** @type {Promise<Nimiq> | undefined} */
         let initPromise;

diff --git a/src/i18n/en.po b/src/i18n/en.po
@@ -404,7 +404,7 @@ msgid "Connect your Ledger hardware wallet."
 msgstr ""
 
 #: src/views/Migrate.vue:143
-#: src/views/Migrate.vue:285
+#: src/views/Migrate.vue:283
 msgid "Connecting to Keyguard..."
 msgstr ""
 
@@ -1189,7 +1189,7 @@ msgstr ""
 msgid "Unsupported Request"
 msgstr ""
 
-#: src/components/CheckoutCardNimiq.vue:329
+#: src/components/CheckoutCardNimiq.vue:327
 msgid "Updating balances"
 msgstr ""
 
@@ -1198,7 +1198,7 @@ msgid "Updating Keyguard..."
 msgstr ""
 
 #: src/views/Migrate.vue:142
-#: src/views/Migrate.vue:284
+#: src/views/Migrate.vue:282
 msgid "Updating your Accounts"
 msgstr ""
 

diff --git a/src/iframe.ts b/src/iframe.ts
@@ -26,7 +26,78 @@ import { deriveAddressesFromXPub } from './lib/bitcoin/BitcoinUtils';
 import { detectLanguage, setLanguage } from './i18n/i18n-setup';
 
 class IFrameApi {
-    public static run() {
+    private static async waitForLoadAlbatross(): Promise<void> {
+        // Wait for loadAlbatross to be available, with timeout
+        const maxWaitTime = 30000; // 30 seconds to account for script loading
+        const startTime = Date.now();
+        const checkInterval = 100; // Check every 100ms
+
+        return new Promise((resolve, reject) => {
+            const check = () => {
+                try {
+                    // Check if the function exists and is callable
+                    if (typeof window.loadAlbatross === 'function') {
+                        console.log('loadAlbatross function found');
+                        resolve();
+                        return;
+                    }
+
+                    if (Date.now() - startTime > maxWaitTime) {
+                        console.error('Timeout waiting for loadAlbatross');
+                        reject(new Error('Timeout waiting for loadAlbatross to be available'));
+                        return;
+                    }
+
+                    // Check if the script is still loading (both regular and module scripts)
+                    const albatrossScript = document.querySelector('script[src*="albatross-client"], script[type="module"]');
+                    if (!albatrossScript) {
+                        console.warn('Albatross client script not found in DOM');
+                        // Don't reject here, as the script might be dynamically loaded
+                    }
+
+                    setTimeout(check, checkInterval);
+                } catch (error) {
+                    console.error('Error while checking for loadAlbatross:', error);
+                    reject(error);
+                }
+            };
+
+            // Start checking immediately
+            check();
+        });
+    }
+
+    public static async run() {
+        // Wait for loadAlbatross to be available and initialize Nimiq
+        try {
+            console.log('Waiting for Albatross to load...');
+            await IFrameApi.waitForLoadAlbatross();
+            console.log('Albatross script loaded, initializing...');
+
+            // Initialize Albatross with retry
+            let retryCount = 0;
+            const maxRetries = 3;
+
+            while (true) {
+                try {
+                    window.Nimiq = await window.loadAlbatross();
+                    console.log('Albatross initialized successfully');
+                    break;
+                } catch (error) {
+                    retryCount++;
+                    if (retryCount >= maxRetries) {
+                        console.error('Failed to initialize Albatross after retries:', error);
+                        throw error;
+                    }
+                    console.warn(`Albatross initialization failed, retrying (${retryCount}/${maxRetries})...`);
+                    await new Promise(resolve => setTimeout(resolve, 1000 * retryCount)); // Exponential backoff
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load Albatross:', e);
+            throw e;
+        }
+
         const rpcServer = new RpcServer(Config.privilegedOrigins);
 
         // Register handlers
@@ -38,8 +109,7 @@ class IFrameApi {
     }
 
     public static async list(): Promise<Account[]> {
-        window.Nimiq = await window.loadAlbatross();
-
+        // Albatross is already loaded in run(), no need to load it again
         let wallets: WalletInfoEntry[];
         if (BrowserDetection.isIOS() || BrowserDetection.isSafari()) {
             /*

diff --git a/vue.config.js b/vue.config.js
@@ -40,6 +40,10 @@ const bitcoinJsIntegrityHash = `sha256-${createHash('sha256')
     .update(fs.readFileSync(path.join(__dirname, 'public/bitcoin/BitcoinJS.min.js')))
     .digest('base64')}`;
 
+const albatrossClientHash = `sha256-${createHash('sha256')
+    .update(fs.readFileSync(path.join(__dirname, 'node_modules/@nimiq/albatross-wasm/web/index.js')))
+    .digest('base64')}`;
+
 // Accessible within client code via process.env.VUE_APP_BITCOIN_JS_INTEGRITY_HASH,
 // see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
 process.env.VUE_APP_BITCOIN_JS_INTEGRITY_HASH = bitcoinJsIntegrityHash;
@@ -129,6 +133,7 @@ const pages = {
         // insert browser warning html template
         browserWarningTemplate,
         browserWarningIntegrityHash,
+        albatrossClientHash,
         domain,
         cdnDomain,
         // output as dist/index.html
@@ -142,6 +147,7 @@ const pages = {
         entry: 'src/iframe.ts',
         // the source template
         template: 'public/iframe.html',
+        albatrossClientHash,
         // output as dist/iframe.html
         filename: 'iframe.html',
         // chunks to include on this page, by default includes
@@ -156,6 +162,7 @@ const pages = {
         // insert browser warning html template
         browserWarningTemplate,
         browserWarningIntegrityHash,
+        albatrossClientHash,
         domain,
         cdnDomain,
         // output as dist/cashlink/index.html
@@ -169,6 +176,7 @@ const pages = {
         entry: 'src/export.ts',
         // the source template
         template: 'public/export.html',
+        albatrossClientHash,
         cdnDomain,
         // output as dist/iframe.html
         filename: 'export.html',
@@ -183,6 +191,7 @@ if (buildName === 'local' || buildName === 'testnet') {
         template: 'demos/index.html',
         cdnDomain,
         bitcoinJsIntegrityHash,
+        albatrossClientHash,
         // output as dist/demos.html
         filename: 'demos.html',
         // chunks to include on this page, by default includes