navToTransactionDetails(transaction)}
>
diff --git a/packages/browser-wallet/src/popup/popupX/shell/Providers.tsx b/packages/browser-wallet/src/popup/popupX/shell/Providers.tsx
index 3ff8b9fdc..a18d074c3 100644
--- a/packages/browser-wallet/src/popup/popupX/shell/Providers.tsx
+++ b/packages/browser-wallet/src/popup/popupX/shell/Providers.tsx
@@ -3,12 +3,7 @@ import { useAtomValue } from 'jotai';
import { networkConfigurationAtom, themeAtom } from '@popup/store/settings';
import { mainnet } from '@shared/constants/networkConfiguration';
import { Dimensions, large, medium, small } from '@popup/constants/dimensions';
-import {
- isFullscreenWindow,
- isFullscreenWindowDemo,
- isSpawnedWeb3IdProofWindow,
- isSpawnedWindow,
-} from '@popup/shared/window-helpers';
+import { isFullscreenWindow, isSpawnedWeb3IdProofWindow, isSpawnedWindow } from '@popup/shared/window-helpers';
import { popupMessageHandler } from '@popup/shared/message-handler';
import { InternalMessageType } from '@messaging';
import { noOp } from 'wallet-common-helpers';
@@ -53,13 +48,6 @@ export function Scaling({ children }: { children: ReactElement }) {
// Send a message to the BG script to resize the window.
popupMessageHandler.sendInternalMessage(InternalMessageType.SetViewSize, dimensions).catch(noOp);
}
-
- if (isFullscreenWindowDemo && body) {
- body.style.margin = 'unset';
- body.style.width = '100%';
- body.style.height = '100%';
- html?.classList.add('tablet');
- }
}, []);
return children;
diff --git a/packages/browser-wallet/src/popup/popupX/styles/_base.scss b/packages/browser-wallet/src/popup/popupX/styles/_base.scss
index c7ad0fb51..67bce27ef 100644
--- a/packages/browser-wallet/src/popup/popupX/styles/_base.scss
+++ b/packages/browser-wallet/src/popup/popupX/styles/_base.scss
@@ -1,3 +1,7 @@
+&:not(html) {
+ background-color: rgba($color-black, 0.9);
+}
+
.bg {
opacity: unset;
filter: unset;
diff --git a/packages/browser-wallet/src/popup/popupX/styles/_bundle.scss b/packages/browser-wallet/src/popup/popupX/styles/_bundle.scss
index af33859b4..4006dce9d 100644
--- a/packages/browser-wallet/src/popup/popupX/styles/_bundle.scss
+++ b/packages/browser-wallet/src/popup/popupX/styles/_bundle.scss
@@ -6,7 +6,7 @@
// Temporary workaround to wrap all new classes
// Should be removed on new design release
html.popup-x,
-body.popup-x,
+body.light.popup-x,
body.dark.popup-x {
@import 'base';
@import 'elements';
diff --git a/packages/browser-wallet/src/popup/popupX/styles/_typography.scss b/packages/browser-wallet/src/popup/popupX/styles/_typography.scss
index 1e3e5bfc2..d619bb39c 100644
--- a/packages/browser-wallet/src/popup/popupX/styles/_typography.scss
+++ b/packages/browser-wallet/src/popup/popupX/styles/_typography.scss
@@ -7,6 +7,18 @@ $t-font-weight-medium: 500;
$t-font-weight-semi-bold: 600;
$t-font-weight-bold: 700;
+html.popup-x {
+ font-size: 14px;
+
+ &.ui-scale-medium {
+ font-size: 14px;
+ }
+
+ &.ui-scale-large {
+ font-size: 14px;
+ }
+}
+
.heading {
&_large {
font-family: $t-font-family-satoshi;
diff --git a/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts b/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts
index 6d0564e0b..18d4e2816 100644
--- a/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts
+++ b/packages/browser-wallet/src/popup/shared/utils/account-helpers.ts
@@ -15,6 +15,12 @@ export const displayNameOrSplitAddress = (account: WalletCredential | undefined)
return credName || `${address.slice(0, 4)}...${address.slice(address.length - 4)}`;
};
+export const displayNameAndSplitAddress = (account: WalletCredential | undefined) => {
+ const { credName, address } = account || { address: '' };
+ const splitAddress = `${address.slice(0, 4)}...${address.slice(address.length - 4)}`;
+ return `${credName ? `${credName} / ` : ''}${splitAddress}`;
+};
+
export function useIdentityOf(cred?: WalletCredential) {
const identities = useAtomValue(identitiesAtom);
diff --git a/packages/browser-wallet/src/popup/shared/window-helpers.ts b/packages/browser-wallet/src/popup/shared/window-helpers.ts
index ad19e0f37..db54cd90b 100644
--- a/packages/browser-wallet/src/popup/shared/window-helpers.ts
+++ b/packages/browser-wallet/src/popup/shared/window-helpers.ts
@@ -3,4 +3,3 @@ import { spawnedPopupUrl, web3IdProofPopupUrl } from '@shared/constants/url';
export const isSpawnedWindow = window.location.href.includes(spawnedPopupUrl);
export const isSpawnedWeb3IdProofWindow = window.location.href.includes(web3IdProofPopupUrl);
export const isFullscreenWindow = window.location.hash === '#fullscreen';
-export const isFullscreenWindowDemo = window.location.hash === '#fullscreen-demo';
diff --git a/packages/browser-wallet/src/popup/shell/Root.tsx b/packages/browser-wallet/src/popup/shell/Root.tsx
index b2fe7aba7..5297ac295 100644
--- a/packages/browser-wallet/src/popup/shell/Root.tsx
+++ b/packages/browser-wallet/src/popup/shell/Root.tsx
@@ -1,17 +1,12 @@
import { Provider, useAtomValue } from 'jotai';
-import React, { ReactElement, useEffect } from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import React, { ReactElement, useEffect, useMemo } from 'react';
+import { MemoryRouter, useLocation } from 'react-router-dom';
import { InternalMessageType } from '@messaging';
import { noOp } from 'wallet-common-helpers';
import { Dimensions, large, medium, small } from '@popup/constants/dimensions';
import { popupMessageHandler } from '@popup/shared/message-handler';
-import {
- isFullscreenWindow,
- isFullscreenWindowDemo,
- isSpawnedWeb3IdProofWindow,
- isSpawnedWindow,
-} from '@popup/shared/window-helpers';
+import { isFullscreenWindow, isSpawnedWeb3IdProofWindow, isSpawnedWindow } from '@popup/shared/window-helpers';
import { networkConfigurationAtom, themeAtom } from '@popup/store/settings';
import { Theme as ThemeType } from '@shared/storage/types';
import BlockChainParametersContext from '@popup/shared/BlockChainParametersProvider';
@@ -20,17 +15,41 @@ import AccountInfoListenerContext from '@popup/shared/AccountInfoListenerContext
import './i18n';
import { mainnet } from '@shared/constants/networkConfiguration';
+import { routePrefix } from '@popup/popupX/constants/routes';
import Routes from './Routes';
import RoutesX from '../popupX/shell/Routes';
const body = document.getElementsByTagName('body').item(0);
const html = document.getElementsByTagName('html').item(0);
-body?.classList.add('popup-x');
-function useScaling() {
+function resetHtmlHeight() {
+ if (html) {
+ html.style.height = 'auto';
+ setTimeout(() => {
+ html.style.removeProperty('height');
+ });
+ }
+}
+
+function Scaling({ children }: { children: ReactElement }) {
+ const { pathname } = useLocation();
+ const h = Math.min(window.screen.width, window.screen.height); // Seems to get dimensions for primary display only for the non-spawned popup.
+
+ const isPopupX = useMemo(() => pathname.includes(routePrefix), [pathname]);
+
useEffect(() => {
- const h = 1500; // Seems to get dimensions for primary display only for the non-spawned popup.
+ if (isPopupX) {
+ body?.classList.add('popup-x');
+ html?.classList.add('popup-x');
+ } else {
+ body?.classList.remove('popup-x');
+ html?.classList.remove('popup-x');
+ resetHtmlHeight();
+ }
+ // html?.classList.add('tablet');
+ }, [isPopupX]);
+ useEffect(() => {
let dimensions: Dimensions | undefined;
if (h >= 1080 && h < 1440) {
@@ -41,8 +60,12 @@ function useScaling() {
html?.classList.add('ui-scale-large');
}
+ if (isPopupX) {
+ dimensions = { ...large };
+ }
+
// When opened by clicking on the extension icon
- if (!isSpawnedWindow && body) {
+ if (!isSpawnedWindow && body && html) {
const { width, height } = dimensions ?? small;
// Mimic what's done on a spawned popup window in the bg script.
@@ -62,15 +85,9 @@ function useScaling() {
// Send a message to the BG script to resize the window.
popupMessageHandler.sendInternalMessage(InternalMessageType.SetViewSize, dimensions).catch(noOp);
}
+ }, [body?.classList.length, isPopupX]);
- if (isFullscreenWindowDemo && body) {
- body.style.margin = 'unset';
- body.style.width = 'unset';
- body.style.height = '100%';
- html?.classList.add('tablet');
- body.classList.add('popup-x');
- }
- }, [body?.classList.length]);
+ return children;
}
function Network({ children }: { children: ReactElement }) {
@@ -92,9 +109,11 @@ function Theme({ children }: { children: ReactElement }) {
useEffect(() => {
if (theme === ThemeType.Light) {
+ body?.classList.add('light');
body?.classList.remove('dark');
} else {
body?.classList.add('dark');
+ body?.classList.remove('light');
}
}, [theme]);
@@ -102,21 +121,21 @@ function Theme({ children }: { children: ReactElement }) {
}
export default function Root() {
- useScaling();
-
return (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);