fix: bug in electron on mac os meaning transak not rendered when back…

…ground of window is transparent

Co-authored-by: Jean Ribeiro <[email protected]>

packages/desktop/components/popup/popups/TransakFramePopup.svelte

@@ -2,7 +2,7 @@
     import { TransakCryptoCurrency } from '@auxiliary/transak'
     import { Button, Icon, IconName, Spinner, Text } from '@bloomwalletio/ui'
     import { DISCORD_URL } from '@contexts/settings'
-    import { openUrlInBrowser, Platform } from '@core/app'
+    import { IS_MAC, openUrlInBrowser, Platform } from '@core/app'
     import { localize } from '@core/i18n'
     import { FiatCurrency } from '@core/market'
     import { SupportedNetworkId } from '@core/network'
@@ -118,11 +118,14 @@
             </div>
         {/if}
     </div>
+    {#if IS_MAC}
+        <div class="h-8 w-full"></div>
+    {/if}
 </div>
 
 <style>
     .transak-container {
         width: 30rem;
-        height: min(70vh, 700px);
+        height: min(80vh, 750px);
     }
 </style>

packages/desktop/lib/electron/preloads/transak.preload.ts

@@ -30,11 +30,14 @@ function observeStyleChanges(targetNode: Element): void {
 window.addEventListener('DOMContentLoaded', () => {
     observeStyleChanges(window.document.documentElement)
 
-    const appRoot = window.document.getElementById('appRoot')
-    if (appRoot) {
-        appRoot.style.borderBottomLeftRadius = '32px'
-        appRoot.style.borderBottomRightRadius = '32px'
-        appRoot.style.overflow = 'hidden'
+    // TODO: Potential bug in electron means that the page is not rendered properly on Mac when the background is transparent
+    if (process.platform !== 'darwin') {
+        const appRoot = window.document.getElementById('appRoot')
+        if (appRoot) {
+            appRoot.style.borderBottomLeftRadius = '32px'
+            appRoot.style.borderBottomRightRadius = '32px'
+            appRoot.style.overflow = 'hidden'
+        }
+        window.document.documentElement.style.backgroundColor = 'transparent'
     }
-    window.document.documentElement.style.backgroundColor = 'transparent'
 })