From ecf5227e910afef95fb36757977a212ff42b4c07 Mon Sep 17 00:00:00 2001 From: Jean Ribeiro Date: Mon, 18 Mar 2024 13:04:54 -0300 Subject: [PATCH] feat: adds dark mode in Transak (#2154) --- .../lib/electron/managers/transak.manager.ts | 10 +++++++++- .../desktop/lib/electron/processes/main.process.ts | 7 ++++++- .../buy-sell/views/BuySellMainView.svelte | 14 ++++++++++++-- .../app/interfaces/platform-event-map.interface.ts | 1 + .../interfaces/transak-window-data.interface.ts | 4 +++- 5 files changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts index 00b43cc9f1..b4e66007d6 100644 --- 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 index f04b734e29..2e91fdaee1 100644 --- 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 index b22f536cdf..2ccec73940 100644 --- 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 { 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') }) 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 index 00f4750b9f..1752b22ddd 100644 --- 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 index bfec2f07c6..572ae53fd0 100644 --- 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