feat: adds dark mode in Transak (#2154)

bloomwalletio · Mar 18, 2024 · ecf5227 · ecf5227
1 parent ea79bd3
commit ecf5227
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts
@@ -1,4 +1,4 @@
-import { BrowserWindow, app, shell, screen } from 'electron'
+import { BrowserWindow, app, shell, screen, nativeTheme } from 'electron'
 import { windows } from '../constants/windows.constant'
 import features from '@features/features'
 import { ITransakManager, ITransakWindowData } from '@core/app'
@@ -213,6 +213,13 @@ export default class TransakManager implements ITransakManager {
             throw new Error('Invalid Transak service')
         }
 
+        const colorMode =
+            nativeTheme.themeSource === 'system'
+                ? nativeTheme.shouldUseDarkColors
+                    ? 'DARK'
+                    : 'LIGHT'
+                : nativeTheme.themeSource.toUpperCase()
+
         const queryParams = {
             apiKey,
             defaultFiatCurrency: currency,
@@ -226,6 +233,7 @@ export default class TransakManager implements ITransakManager {
             disableWalletAddressForm: true,
             isFeeCalculationHidden: true,
             disablePaymentMethods: ['apple_pay', 'google_pay'],
+            colorMode,
         }
 
         const urlObject = buildUrl({ origin: TRANSAK_WIDGET_URL, query: queryParams })

diff --git a/packages/desktop/lib/electron/processes/main.process.ts b/packages/desktop/lib/electron/processes/main.process.ts
@@ -486,7 +486,12 @@ nativeTheme.on('updated', () => {
 })
 
 ipcMain.handle('get-theme', () => nativeTheme.themeSource)
-ipcMain.handle('update-theme', (_e, theme) => (nativeTheme.themeSource = theme))
+ipcMain.handle('update-theme', (_e, theme) => {
+    nativeTheme.themeSource = theme
+    if (features?.buySell?.enabled) {
+        windows.main.webContents.send('reset-transak')
+    }
+})
 ipcMain.handle('should-be-dark-mode', () => nativeTheme.shouldUseDarkColors)
 
 /**

diff --git a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -4,7 +4,7 @@
     import { Platform } from '@core/app'
     import { activeProfile } from '@core/profile/stores'
     import { IPopupState, IProfileAuthPopupState, popupState, profileAuthPopup } from '@desktop/auxiliary/popup'
-    import { onDestroy, tick } from 'svelte'
+    import { onDestroy, onMount, tick } from 'svelte'
     import {
         TransakAccountPanel,
         TransakConnectionPanel,
@@ -17,13 +17,15 @@
     import { DrawerState } from '@desktop/auxiliary/drawer/types'
     import { drawerState } from '@desktop/auxiliary/drawer/stores'
 
+    let isTransakOpen: boolean = false
+
     $: $isDashboardSideBarExpanded, void updateTransakBounds()
 
     $: if ($selectedAccountIndex !== undefined) {
         void resetTransak()
     }
 
-    $: void handleOverlayChanges($popupState, $profileAuthPopup, $settingsState, $drawerState)
+    $: isTransakOpen, void handleOverlayChanges($popupState, $profileAuthPopup, $settingsState, $drawerState)
 
     async function handleOverlayChanges(
         state: IPopupState,
@@ -87,17 +89,25 @@
 
     async function resetTransak(): Promise<void> {
         await Platform.closeTransak()
+        isTransakOpen = false
         await Platform.openTransak({
             currency: $activeProfile?.settings.marketCurrency,
             address: $selectedAccount.depositAddress,
             service: 'BUY',
             amount: getDefaultFiatAmount($activeProfile?.settings.marketCurrency ?? MarketCurrency.Usd),
         })
+        isTransakOpen = true
         await updateTransakBounds()
     }
 
+    onMount(() => {
+        Platform.onEvent('reset-transak', resetTransak)
+    })
+
     onDestroy(() => {
         void Platform.closeTransak()
+        isTransakOpen = false
+        Platform.removeListenersForEvent('reset-transak')
     })
 </script>
 

diff --git a/packages/shared/src/lib/core/app/interfaces/platform-event-map.interface.ts b/packages/shared/src/lib/core/app/interfaces/platform-event-map.interface.ts
@@ -20,6 +20,7 @@ export interface IPlatformEventMap {
     'nft-download-done': INFTDownloadState
     'nft-download-interrupted': INFTDownloadState
     'notification-activated': unknown
+    'reset-transak': void
     'signed-eip712': IEvmSignature
     'signed-message': IEvmSignature
     'transak-not-loaded': void

diff --git a/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts b/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts
@@ -1,5 +1,7 @@
+import { MarketCurrency } from '@core/market/enums/market-currency.enum'
+
 export interface ITransakWindowData {
-    currency: string
+    currency: MarketCurrency
     address: string
     service: 'BUY' | 'SELL'
     amount: number