safemode for unsuppored gpus

src/assets/app/static/safemode.css

@@ -0,0 +1,79 @@
+* {
+    filter: none !important;
+    backdrop-filter: none !important;
+    transition: none !important;
+    opacity: 1 !important;
+}
+
+.cover {
+    background: none !important;
+}
+
+#logo {
+    display: none !important;
+}
+
+@keyframes loading {
+}
+
+@keyframes appearFromVoid {
+    0% {
+        transform: none;
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+@keyframes appearFromLeft {
+    0% {
+        transform: none;
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+@keyframes appearFromRight {
+    0% {
+        transform: none;
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+@keyframes shake {
+    0% {
+        transform: none;
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+@keyframes blur {
+    0% {
+        filter: none !important;
+    }
+
+    100% {
+        filter: none !important;
+    }
+}
+
+@keyframes blurOut {
+    0% {
+        filter: none !important;
+        opacity: 1 !important;
+    }
+
+    100% {
+        filter: none !important;
+        opacity: 1 !important;
+    }
+}

src/js/ui/UI.js

@@ -20,6 +20,30 @@
 import Constants from "../Constants.js";
 import BrowserStore from "../storage/BrowserStore.js";
 export default class UI {
+    static async setSafeMode(v) {
+        this.safeMode = v;
+        return this.safeMode;
+    }
+
+    static async isSafeMode() {
+        try {
+            if (typeof this.safeMode !== "undefined") return this.safeMode;
+            if (!window.WebGLRenderingContext) return this.setSafeMode(true);
+            const canvas = document.createElement("canvas");
+            const gl =
+                canvas.getContext("webgl", { powerPreference: "high-performance" }) ||
+                canvas.getContext("experimental-webgl", { powerPreference: "high-performance" });
+            if (!gl) return this.setSafeMode(true);
+            const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+            const vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
+            const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+            console.log("GPU", vendor, renderer);
+        } catch (e) {
+            return this.setSafeMode(true);
+        }
+        return this.setSafeMode(false);
+    }
+
     static STAGES = [];
     static registerStage(stageName) {
         stageName = stageName[0].toUpperCase() + stageName.slice(1);
@@ -100,6 +124,22 @@ export default class UI {
         if (cssEl.href !== themePath) {
             cssEl.href = themePath;
         }
+
+        const useSafeMode = await UI.isSafeMode();
+        let safeModeEl = document.head.querySelector("link#liquidwalletSafeMode");
+
+        if (!useSafeMode) {
+            if (safeModeEl) safeModeEl.remove();
+        } else {
+            if (!safeModeEl) {
+                safeModeEl = document.createElement("link");
+                safeModeEl.id = "liquidwalletSafeMode";
+                safeModeEl.rel = "stylesheet";
+                safeModeEl.type = "text/css";
+                document.head.appendChild(safeModeEl);
+            }
+            safeModeEl.href = "static/safemode.css";
+        }
     }
 
     listThemes() {