Working on fullscreen support

Author: skibitsky

Packages/com.walletconnect.web3modal/Plugins/Web3Modal.jslib

@@ -74,6 +74,53 @@ mergeInto(LibraryManager.library, {
         const enableOnramp = parameters.enableOnramp;
 
         console.log("Parameters", parameters);
+
+        const addCanvasActiveStyles = () => {
+            const styleElement = document.createElement('style');
+            styleElement.id = 'canvas-active-styles';
+            styleElement.innerHTML = `
+                .canvas-active {
+                    position: fixed !important;
+                    top: 0 !important;
+                    right: 0 !important;
+                    bottom: 0 !important;
+                    left: 0 !important;
+                    width: 100% !important;
+                    height: 100% !important;
+                }
+            `;
+            document.head.appendChild(styleElement);
+        };
+
+        const removeCanvasActiveStyles = () => {
+            const styleElement = document.getElementById('canvas-active-styles');
+            if (styleElement) {
+                document.head.removeChild(styleElement);
+            }
+        };
+
+        const html = document.querySelector('html');
+        html?.addEventListener('fullscreenchange', () => {
+            const canvas = document.querySelector('canvas');
+            console.log('fullscreenchange', canvas)
+            if (document.fullscreenElement) {
+                console.log('fullscreenchange true')
+                if (!canvas?.classList.contains('canvas-active')) {
+                    console.log('fullscreenchange true add canvas-active')
+
+                    addCanvasActiveStyles();
+                    canvas?.classList.add('canvas-active');
+                }
+            } else {
+                console.log('fullscreenchange false')
+                if (canvas?.classList.contains('canvas-active')) {
+                    console.log('fullscreenchange false remove canvas-active')
+                    
+                    canvas?.classList.remove('canvas-active');
+                    removeCanvasActiveStyles();
+                }
+            }
+        });
 
         // Load the scripts and initialize the configuration
         import("https://cdn.jsdelivr.net/npm/cdn-wagmi@3.0.0/dist/cdn-wagmi.js").then(CDNW3M => {