Skip to content

Commit db2e162

Browse files
jpurijpuri
authored
Merge branch 'main' into latency_metrics_fix
2 parents af53187 + 64aa279 commit db2e162

File tree

19 files changed

+179
-128
lines changed

19 files changed

+179
-128
lines changed

‎app/images/riv_animations/shield_illustration.riv‎

-994 KB
Binary file not shown.

‎app/images/shield-entry-modal-bg.png‎

-3.64 KB
Binary file not shown.

‎app/images/shield-entry-modal.png‎

-13.6 KB
Binary file not shown.

‎app/images/transaction-shield-modal.png‎

-58.8 KB
Binary file not shown.

‎ui/components/app/shield-entry-modal/index.scss‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,18 @@
3838

3939
&-shield-illustration {
4040
&__container {
41-
height: 200px;
42-
width: 247px;
41+
height: 252px;
42+
width: 346px;
43+
44+
@include design-system.screen-sm-max {
45+
height: 234px;
46+
width: 322px;
47+
}
4348
}
4449

4550
&__canvas {
4651
height: 100%;
4752
width: 100%;
4853
}
4954
}
50-
51-
&-sheild-image {
52-
width: 346px;
53-
height: 252px;
54-
55-
@include design-system.screen-sm-max {
56-
width: 322px;
57-
}
58-
}
5955
}

‎ui/components/app/shield-entry-modal/shield-entry-modal.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import {
5353
} from '../../../helpers/constants/design-system';
5454
import { TRANSACTION_SHIELD_LINK } from '../../../helpers/constants/common';
5555
import { ThemeType } from '../../../../shared/constants/preferences';
56+
import ShieldIllustrationAnimation from './shield-illustration-animation';
5657

5758
const ShieldEntryModal = ({
5859
skipEventSubmission = false,
@@ -221,11 +222,10 @@ const ShieldEntryModal = ({
221222
? t('shieldEntryModalSubtitleA', ['$10,000'])
222223
: t('shieldEntryModalSubtitleB', ['$10,000'])}
223224
</Text>
224-
<Box className="shield-entry-modal-sheild-image flex-1 flex items-center justify-center">
225-
<img
226-
src="/images/transaction-shield-modal.png"
227-
alt="Shield Entry Illustration"
228-
className="mx-auto h-full w-full object-contain"
225+
<Box className="flex-1 flex items-center justify-center">
226+
<ShieldIllustrationAnimation
227+
containerClassName="shield-entry-modal-shield-illustration__container"
228+
canvasClassName="shield-entry-modal-shield-illustration__canvas"
229229
/>
230230
</Box>
231231
</ModalBody>

‎ui/components/multichain-accounts/smart-contract-account-toggle-section/__snapshots__/smart-contract-account-toggle-section.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ exports[`SmartContractAccountToggleSection Disabled State Handling disables all
5151
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
5252
>
5353
<div
54-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
54+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
5555
>
5656
<div
5757
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
@@ -101,7 +101,7 @@ exports[`SmartContractAccountToggleSection Disabled State Handling disables all
101101
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
102102
>
103103
<div
104-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
104+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
105105
>
106106
<div
107107
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
@@ -313,7 +313,7 @@ exports[`SmartContractAccountToggleSection Network Integration displays toggle f
313313
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
314314
>
315315
<div
316-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
316+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
317317
>
318318
<div
319319
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
@@ -363,7 +363,7 @@ exports[`SmartContractAccountToggleSection Network Integration displays toggle f
363363
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
364364
>
365365
<div
366-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
366+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
367367
>
368368
<div
369369
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"

‎ui/components/multichain-accounts/smart-contract-account-toggle/__snapshots__/smart-contract-account-toggle.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`SmartContractAccountToggle Basic Rendering shows toggle as OFF for unsu
1818
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
1919
>
2020
<div
21-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
21+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
2222
>
2323
<div
2424
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
@@ -73,7 +73,7 @@ exports[`SmartContractAccountToggle Basic Rendering shows toggle as enabled for
7373
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
7474
>
7575
<div
76-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
76+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
7777
>
7878
<div
7979
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
@@ -128,7 +128,7 @@ exports[`SmartContractAccountToggle Disabled State disables toggle during pendin
128128
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
129129
>
130130
<div
131-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
131+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
132132
>
133133
<div
134134
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"

‎ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -759,7 +759,7 @@ exports[`NetworkListMenu renders properly 1`] = `
759759
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
760760
>
761761
<div
762-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
762+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
763763
>
764764
<div
765765
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
@@ -1867,7 +1867,7 @@ exports[`NetworkListMenu should match snapshot when editing a network 1`] = `
18671867
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
18681868
>
18691869
<div
1870-
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
1870+
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
18711871
>
18721872
<div
18731873
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"

‎ui/hooks/useTheme.ts‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,65 @@ import { getTheme } from '../selectors';
44
import { ThemeType } from '../../shared/constants/preferences';
55

66
/**
7-
* List of valid themes. Should return an array with only the values ThemeType.light and ThemeType.dark
8-
* unless there is a future we add more themes.
7+
* List of valid themes.
98
*/
109
const validThemes = Object.values(ThemeType).filter((theme) => {
1110
return theme !== ThemeType.os;
1211
});
1312

13+
/**
14+
* Resolves the theme based on the user's theme setting.
15+
*
16+
* @param settingTheme - The theme setting from user preferences
17+
* @returns The resolved theme (light or dark)
18+
*/
19+
function resolveTheme(
20+
settingTheme: string | undefined,
21+
): ThemeType.light | ThemeType.dark {
22+
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
23+
? ThemeType.dark
24+
: ThemeType.light;
25+
26+
const documentTheme = document.documentElement.getAttribute('data-theme');
27+
28+
let resolvedTheme;
29+
if (settingTheme === ThemeType.os) {
30+
resolvedTheme = systemTheme;
31+
} else if (settingTheme) {
32+
resolvedTheme = settingTheme;
33+
} else {
34+
// Initial load
35+
resolvedTheme = documentTheme || systemTheme;
36+
}
37+
38+
const isValidTheme = validThemes.includes(
39+
resolvedTheme as ThemeType.light | ThemeType.dark,
40+
);
41+
42+
if (!isValidTheme) {
43+
console.warn(
44+
`useTheme: Invalid theme resolved to "${resolvedTheme}". Defaulting to "${ThemeType.light}".`,
45+
);
46+
return ThemeType.light;
47+
}
48+
49+
return resolvedTheme as ThemeType.light | ThemeType.dark;
50+
}
51+
1452
/**
1553
* Returns the current theme based on the user's theme setting.
1654
*
1755
* @returns theme
1856
*/
19-
export function useTheme() {
57+
export function useTheme(): ThemeType.light | ThemeType.dark {
2058
const settingTheme = useSelector(getTheme);
21-
const [theme, setTheme] = useState(settingTheme);
59+
const [theme, setTheme] = useState<ThemeType.light | ThemeType.dark>(() =>
60+
resolveTheme(settingTheme),
61+
);
2262

2363
useEffect(() => {
24-
const result =
25-
!settingTheme || settingTheme === ThemeType.os
26-
? document.documentElement.getAttribute('data-theme')
27-
: settingTheme;
28-
const isValidTheme = validThemes.includes(
29-
result as ThemeType.light | ThemeType.dark,
30-
);
31-
32-
if (!isValidTheme) {
33-
console.warn(
34-
`useTheme: Invalid theme resolved to "${result}". Defaulting to "${ThemeType.light}".`,
35-
);
36-
setTheme(ThemeType.light);
37-
}
38-
39-
setTheme(result);
64+
const resolved = resolveTheme(settingTheme);
65+
setTheme(resolved);
4066
}, [settingTheme]);
4167

4268
return theme;

0 commit comments

Comments
 (0)