From a3908a415f1697fa9f1b71a81f7d1918ccc838b7 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Fri, 7 Nov 2025 10:23:42 -0800 Subject: [PATCH 1/2] Revert "fix: font rendering issues by updating font preloader to preload all custom font files (#21199)" This reverts commit 74b87455994f915eb079da35b15acf9133cb85da. --- .../foundation/Input/Input.styles.ts | 4 +- .../Input/__snapshots__/Input.test.tsx.snap | 2 +- .../SnapUIAddressInput.test.tsx.snap | 2 +- .../__snapshots__/SnapUIRenderer.test.ts.snap | 14 +- .../__snapshots__/form.test.ts.snap | 4 +- .../__snapshots__/input.test.ts.snap | 4 +- .../__snapshots__/BridgeView.test.tsx.snap | 4 + .../BridgeDestTokenSelector.test.tsx.snap | 2 +- .../BridgeSourceTokenSelector.test.tsx.snap | 2 +- .../CardAuthentication.test.tsx.snap | 4 +- .../ActivationKeyForm.test.tsx.snap | 4 +- .../FiatSelectorModal.test.tsx.snap | 8 +- .../RegionSelectorModal.test.tsx.snap | 22 +- .../TokenSelectModal.test.tsx.snap | 2 +- .../__snapshots__/BasicInfo.test.tsx.snap | 54 +- .../__snapshots__/EnterAddress.test.tsx.snap | 42 +- .../__snapshots__/EnterEmail.test.tsx.snap | 8 +- .../RegionSelectorModal.test.tsx.snap | 12 +- .../StateSelectorModal.test.tsx.snap | 12 +- .../TokenSelectorModal.test.tsx.snap | 4 +- .../DepositPhoneField.test.tsx.snap | 20 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../EditAccountName.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 1 - .../Views/EnterPasswordSimple/index.js | 1 - .../Login/__snapshots__/index.test.tsx.snap | 4 +- .../PrivateKeyList/styles.ts | 1 - .../__snapshots__/index.test.tsx.snap | 2 +- .../RevealPrivateCredential.test.tsx.snap | 5 - .../Views/RevealPrivateCredential/styles.ts | 1 - app/core/FontPreloader/FontPreloader.ts | 103 ++-- .../__tests__/FontPreloader.test.ts | 525 ++++-------------- 32 files changed, 272 insertions(+), 609 deletions(-) diff --git a/app/component-library/components/Form/TextField/foundation/Input/Input.styles.ts b/app/component-library/components/Form/TextField/foundation/Input/Input.styles.ts index 0179bcc25e87..19d08c8554c2 100644 --- a/app/component-library/components/Form/TextField/foundation/Input/Input.styles.ts +++ b/app/component-library/components/Form/TextField/foundation/Input/Input.styles.ts @@ -45,9 +45,9 @@ const styleSheet = (params: { theme: Theme; vars: InputStyleSheetVars }) => { // Fix for placeholder text shifting with custom Geist fonts // Use minimal padding that works cross-platform with preloaded fonts paddingVertical: Platform.OS === 'ios' ? 2 : 1, - // Ensure consistent line height for custom font baseline alignment - lineHeight: Platform.OS === 'ios' ? 20 : 22, + // Ensure consistent line height for custom font baseline alignment lineHeight: Platform.OS === 'ios' ? 20 : 22, fontFamily: getFontFamily(textVariant), + fontWeight: theme.typography[textVariant].fontWeight, fontSize: theme.typography[textVariant].fontSize, letterSpacing: theme.typography[textVariant].letterSpacing, // iOS-specific fix for custom font baseline alignment diff --git a/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap b/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap index 504646a917b9..60f63e2e9710 100644 --- a/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap +++ b/app/component-library/components/Form/TextField/foundation/Input/__snapshots__/Input.test.tsx.snap @@ -14,9 +14,9 @@ exports[`Input should render correctly 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 24, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Snaps/SnapUIAddressInput/__snapshots__/SnapUIAddressInput.test.tsx.snap b/app/components/Snaps/SnapUIAddressInput/__snapshots__/SnapUIAddressInput.test.tsx.snap index 4812877fd69c..7980f77dce1c 100644 --- a/app/components/Snaps/SnapUIAddressInput/__snapshots__/SnapUIAddressInput.test.tsx.snap +++ b/app/components/Snaps/SnapUIAddressInput/__snapshots__/SnapUIAddressInput.test.tsx.snap @@ -215,9 +215,9 @@ exports[`SnapUIAddressInput renders with an invalid CAIP Account ID 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.ts.snap b/app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.ts.snap index 9835225b2a75..fd26c92a77d8 100644 --- a/app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.ts.snap +++ b/app/components/Snaps/SnapUIRenderer/__snapshots__/SnapUIRenderer.test.ts.snap @@ -290,9 +290,9 @@ exports[`SnapUIRenderer prefills interactive inputs with existing state 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -448,9 +448,9 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -542,9 +542,9 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -699,9 +699,9 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -792,9 +792,9 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1941,9 +1941,9 @@ exports[`SnapUIRenderer supports fields with multiple components 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2136,9 +2136,9 @@ exports[`SnapUIRenderer supports interactive inputs 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap b/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap index 62f942a884f9..bdb324541612 100644 --- a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap +++ b/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap @@ -144,9 +144,9 @@ exports[`SnapUIForm will render 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -362,9 +362,9 @@ exports[`SnapUIForm will render with fields 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/input.test.ts.snap b/app/components/Snaps/SnapUIRenderer/components/__snapshots__/input.test.ts.snap index 1a12af4ba8dd..eb2358f5402a 100644 --- a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/input.test.ts.snap +++ b/app/components/Snaps/SnapUIRenderer/components/__snapshots__/input.test.ts.snap @@ -131,9 +131,9 @@ exports[`SnapUIInput handles disabled input 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -288,9 +288,9 @@ exports[`SnapUIInput renders with initial value 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap b/app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap index f4af3e32cfe6..5b8d1c5d2f63 100644 --- a/app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap +++ b/app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap @@ -419,6 +419,7 @@ exports[`BridgeView Bottom Content blurs input when opening QuoteExpiredModal 1` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 40, + "fontWeight": "400", "height": 50, "letterSpacing": 0, "lineHeight": 50, @@ -803,6 +804,7 @@ exports[`BridgeView Bottom Content blurs input when opening QuoteExpiredModal 1` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 40, + "fontWeight": "400", "height": 50, "letterSpacing": 0, "lineHeight": 50, @@ -2079,6 +2081,7 @@ exports[`BridgeView renders 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 40, + "fontWeight": "400", "height": 50, "letterSpacing": 0, "lineHeight": 50, @@ -2463,6 +2466,7 @@ exports[`BridgeView renders 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 40, + "fontWeight": "400", "height": 50, "letterSpacing": 0, "lineHeight": 50, diff --git a/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap index b8a83c85e581..344eb0520656 100644 --- a/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap @@ -867,9 +867,9 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap index 66c414ea7e96..25c8d1ca99e4 100644 --- a/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap +++ b/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap @@ -872,9 +872,9 @@ exports[`BridgeSourceTokenSelector renders with initial state and displays token "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Card/Views/CardAuthentication/__snapshots__/CardAuthentication.test.tsx.snap b/app/components/UI/Card/Views/CardAuthentication/__snapshots__/CardAuthentication.test.tsx.snap index a44c421a1f38..f2a79fab4be6 100644 --- a/app/components/UI/Card/Views/CardAuthentication/__snapshots__/CardAuthentication.test.tsx.snap +++ b/app/components/UI/Card/Views/CardAuthentication/__snapshots__/CardAuthentication.test.tsx.snap @@ -658,9 +658,9 @@ exports[`CardAuthentication Component Login Step - Component Rendering matches l "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -771,9 +771,9 @@ exports[`CardAuthentication Component Login Step - Component Rendering matches l "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Aggregator/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap index ee58151aeae0..a10cd672d631 100644 --- a/app/components/UI/Ramp/Aggregator/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/Views/Settings/__snapshots__/ActivationKeyForm.test.tsx.snap @@ -582,9 +582,9 @@ exports[`AddActivationKey renders correctly 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -695,9 +695,9 @@ exports[`AddActivationKey renders correctly 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap index 83fb2f848330..94dfde80142c 100644 --- a/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap @@ -619,9 +619,9 @@ exports[`FiatSelectorModal renders the modal with currency list 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1557,9 +1557,9 @@ exports[`FiatSelectorModal search displays filtered currencies when search strin "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2495,9 +2495,9 @@ exports[`FiatSelectorModal search displays filtered currencies when search strin "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3433,9 +3433,9 @@ exports[`FiatSelectorModal search displays max 20 results 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap index a08f792a06cd..0f6ef99081a4 100644 --- a/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap @@ -643,9 +643,9 @@ exports[`RegionSelectorModal clears search when clear button is pressed 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1505,9 +1505,9 @@ exports[`RegionSelectorModal clears search when clear button is pressed 2`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2705,9 +2705,9 @@ exports[`RegionSelectorModal filters regions based on search input 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3567,9 +3567,9 @@ exports[`RegionSelectorModal handles empty regions list gracefully 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4297,9 +4297,9 @@ exports[`RegionSelectorModal handles undefined regions gracefully 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5061,9 +5061,9 @@ exports[`RegionSelectorModal navigates back to country view when back button is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5879,9 +5879,9 @@ exports[`RegionSelectorModal navigates back to country view when back button is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -7079,9 +7079,9 @@ exports[`RegionSelectorModal renders the modal with region list 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -8279,9 +8279,9 @@ exports[`RegionSelectorModal renders the modal with selected region in list 1`] "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -9507,9 +9507,9 @@ exports[`RegionSelectorModal renders the modal with selected state in list 1`] = "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -10735,9 +10735,9 @@ exports[`RegionSelectorModal shows empty state when search returns no results 1` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap index 4e571e694dcc..78f3ef6acc9d 100644 --- a/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap +++ b/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap @@ -805,9 +805,9 @@ exports[`TokenSelectModal renders the modal with token list 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/Views/BasicInfo/__snapshots__/BasicInfo.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/BasicInfo/__snapshots__/BasicInfo.test.tsx.snap index 8b0c0ffda3df..40e4de62711a 100644 --- a/app/components/UI/Ramp/Deposit/Views/BasicInfo/__snapshots__/BasicInfo.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/BasicInfo/__snapshots__/BasicInfo.test.tsx.snap @@ -828,9 +828,9 @@ exports[`BasicInfo Component navigates to address page when form is valid and co "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -945,9 +945,9 @@ exports[`BasicInfo Component navigates to address page when form is valid and co "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1110,9 +1110,9 @@ exports[`BasicInfo Component navigates to address page when form is valid and co "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1393,9 +1393,9 @@ exports[`BasicInfo Component navigates to address page when form is valid and co "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2410,9 +2410,9 @@ exports[`BasicInfo Component passes regions to DepositPhoneField component 1`] = "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2527,9 +2527,9 @@ exports[`BasicInfo Component passes regions to DepositPhoneField component 1`] = "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2692,9 +2692,9 @@ exports[`BasicInfo Component passes regions to DepositPhoneField component 1`] = "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2975,9 +2975,9 @@ exports[`BasicInfo Component passes regions to DepositPhoneField component 1`] = "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3992,9 +3992,9 @@ exports[`BasicInfo Component prefills form data when previousFormData is provide "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4109,9 +4109,9 @@ exports[`BasicInfo Component prefills form data when previousFormData is provide "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4274,9 +4274,9 @@ exports[`BasicInfo Component prefills form data when previousFormData is provide "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4557,9 +4557,9 @@ exports[`BasicInfo Component prefills form data when previousFormData is provide "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5574,9 +5574,9 @@ exports[`BasicInfo Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5691,9 +5691,9 @@ exports[`BasicInfo Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5856,9 +5856,9 @@ exports[`BasicInfo Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -6139,9 +6139,9 @@ exports[`BasicInfo Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -7156,9 +7156,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -7288,9 +7288,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -7468,9 +7468,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -7766,9 +7766,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -8798,9 +8798,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -8930,9 +8930,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -9110,9 +9110,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -9393,9 +9393,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -10425,9 +10425,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -10557,9 +10557,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -10737,9 +10737,9 @@ exports[`BasicInfo Component snapshot matches validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap index d4f922a9b610..685c98f01965 100644 --- a/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/EnterAddress/__snapshots__/EnterAddress.test.tsx.snap @@ -826,9 +826,9 @@ exports[`EnterAddress Component displays form validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -956,9 +956,9 @@ exports[`EnterAddress Component displays form validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1081,9 +1081,9 @@ exports[`EnterAddress Component displays form validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1334,9 +1334,9 @@ exports[`EnterAddress Component displays form validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1485,9 +1485,9 @@ exports[`EnterAddress Component displays form validation errors when continue is "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2500,9 +2500,9 @@ exports[`EnterAddress Component prefills form data when previousFormData is prov "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2615,9 +2615,9 @@ exports[`EnterAddress Component prefills form data when previousFormData is prov "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2740,9 +2740,9 @@ exports[`EnterAddress Component prefills form data when previousFormData is prov "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2955,9 +2955,9 @@ exports[`EnterAddress Component prefills form data when previousFormData is prov "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3091,9 +3091,9 @@ exports[`EnterAddress Component prefills form data when previousFormData is prov "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4106,9 +4106,9 @@ exports[`EnterAddress Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4221,9 +4221,9 @@ exports[`EnterAddress Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4346,9 +4346,9 @@ exports[`EnterAddress Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4569,9 +4569,9 @@ exports[`EnterAddress Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4705,9 +4705,9 @@ exports[`EnterAddress Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5720,9 +5720,9 @@ exports[`EnterAddress Component shows text input for state when region is not US "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5835,9 +5835,9 @@ exports[`EnterAddress Component shows text input for state when region is not US "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -5960,9 +5960,9 @@ exports[`EnterAddress Component shows text input for state when region is not US "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -6076,9 +6076,9 @@ exports[`EnterAddress Component shows text input for state when region is not US "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -6203,9 +6203,9 @@ exports[`EnterAddress Component shows text input for state when region is not US "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -6339,9 +6339,9 @@ exports[`EnterAddress Component shows text input for state when region is not US "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/Views/EnterEmail/__snapshots__/EnterEmail.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/EnterEmail/__snapshots__/EnterEmail.test.tsx.snap index f229114096e4..9f0ee5594332 100644 --- a/app/components/UI/Ramp/Deposit/Views/EnterEmail/__snapshots__/EnterEmail.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/EnterEmail/__snapshots__/EnterEmail.test.tsx.snap @@ -768,9 +768,9 @@ exports[`EnterEmail Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1629,9 +1629,9 @@ exports[`EnterEmail Component renders error message snapshot when API call fails "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2504,9 +2504,9 @@ exports[`EnterEmail Component renders loading state snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3365,9 +3365,9 @@ exports[`EnterEmail Component renders validation error snapshot invalid email 1` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap index 593279db1041..ecd0ede3f1cd 100644 --- a/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap @@ -619,9 +619,9 @@ exports[`RegionSelectorModal Component handles empty regions array from navigati "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1326,9 +1326,9 @@ exports[`RegionSelectorModal Component receives and uses regions from navigation "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2229,9 +2229,9 @@ exports[`RegionSelectorModal Component render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3376,9 +3376,9 @@ exports[`RegionSelectorModal Component render matches snapshot when search has n "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4124,9 +4124,9 @@ exports[`RegionSelectorModal Component render matches snapshot when searching fo "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -7254,9 +7254,9 @@ exports[`RegionSelectorModal Component sorts recommended regions to the top when "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap index 2b86332992d1..161a5cb0a3a9 100644 --- a/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap @@ -619,9 +619,9 @@ exports[`StateSelectorModal Component Snapshot Tests renders cleared search stat "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1422,9 +1422,9 @@ exports[`StateSelectorModal Component Snapshot Tests renders empty state when no "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2169,9 +2169,9 @@ exports[`StateSelectorModal Component Snapshot Tests renders filtered state when "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2972,9 +2972,9 @@ exports[`StateSelectorModal Component Snapshot Tests renders filtered state when "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3775,9 +3775,9 @@ exports[`StateSelectorModal Component Snapshot Tests renders initial state corre "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -4841,9 +4841,9 @@ exports[`StateSelectorModal Component Snapshot Tests renders partial search resu "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap index 4818d5f5468c..a4ca4f6815d0 100644 --- a/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap @@ -805,9 +805,9 @@ exports[`TokenSelectorModal Component displays empty state when no tokens match "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -2918,9 +2918,9 @@ exports[`TokenSelectorModal Component renders correctly and matches snapshot 1`] "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap b/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap index dc3409a340f9..792573d5d8ca 100644 --- a/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap @@ -149,9 +149,9 @@ exports[`DepositPhoneField renders correctly after flag button press 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -315,9 +315,9 @@ exports[`DepositPhoneField renders correctly after input change 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -481,9 +481,9 @@ exports[`DepositPhoneField renders correctly with default props 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -647,9 +647,9 @@ exports[`DepositPhoneField renders correctly with different region 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -813,9 +813,9 @@ exports[`DepositPhoneField renders correctly with error message 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -994,9 +994,9 @@ exports[`DepositPhoneField renders correctly with long phone number 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1161,9 +1161,9 @@ exports[`DepositPhoneField renders correctly with onSubmitEditing callback 1`] = "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1327,9 +1327,9 @@ exports[`DepositPhoneField renders correctly with special characters in phone nu "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1493,9 +1493,9 @@ exports[`DepositPhoneField renders correctly with unsupported region 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1659,9 +1659,9 @@ exports[`DepositPhoneField renders correctly with value 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Views/ChoosePassword/__snapshots__/index.test.tsx.snap b/app/components/Views/ChoosePassword/__snapshots__/index.test.tsx.snap index 3fcbda958ef3..6cfb05cd0750 100644 --- a/app/components/Views/ChoosePassword/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/ChoosePassword/__snapshots__/index.test.tsx.snap @@ -226,9 +226,9 @@ exports[`ChoosePassword render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -377,9 +377,9 @@ exports[`ChoosePassword render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap b/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap index 8992c356fd2e..28e6ba4472f0 100644 --- a/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap +++ b/app/components/Views/EditAccountName/__snapshots__/EditAccountName.test.tsx.snap @@ -107,9 +107,9 @@ exports[`EditAccountName should render correctly 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -209,9 +209,9 @@ exports[`EditAccountName should render correctly 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Views/EnterPasswordSimple/__snapshots__/index.test.tsx.snap b/app/components/Views/EnterPasswordSimple/__snapshots__/index.test.tsx.snap index 49a9052476f9..8b5c4f8fde90 100644 --- a/app/components/Views/EnterPasswordSimple/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/EnterPasswordSimple/__snapshots__/index.test.tsx.snap @@ -90,7 +90,6 @@ exports[`EnterPasswordSimple should render correctly 1`] = ` "borderRadius": 5, "borderWidth": 2, "color": "black", - "fontFamily": "Geist Regular", "padding": 10, } } diff --git a/app/components/Views/EnterPasswordSimple/index.js b/app/components/Views/EnterPasswordSimple/index.js index 8cd912c7fd0e..12073089dbf4 100644 --- a/app/components/Views/EnterPasswordSimple/index.js +++ b/app/components/Views/EnterPasswordSimple/index.js @@ -34,7 +34,6 @@ const createStyles = (colors) => borderColor: colors.border.default, padding: 10, color: colors.text.default, - fontFamily: 'Geist Regular', }, ctaWrapper: { marginTop: 10, diff --git a/app/components/Views/Login/__snapshots__/index.test.tsx.snap b/app/components/Views/Login/__snapshots__/index.test.tsx.snap index 3815afce993b..424393ca2ef8 100644 --- a/app/components/Views/Login/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/Login/__snapshots__/index.test.tsx.snap @@ -220,9 +220,9 @@ exports[`Login renders matching snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -584,9 +584,9 @@ exports[`Login renders matching snapshot when password input is focused 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Views/MultichainAccounts/PrivateKeyList/styles.ts b/app/components/Views/MultichainAccounts/PrivateKeyList/styles.ts index 0a95d834668f..41a53dde4316 100644 --- a/app/components/Views/MultichainAccounts/PrivateKeyList/styles.ts +++ b/app/components/Views/MultichainAccounts/PrivateKeyList/styles.ts @@ -60,7 +60,6 @@ const styleSheet = (params: { theme: Theme }) => { paddingVertical: 16, paddingHorizontal: 16, ...fontStyles.normal, - fontFamily: 'Geist Regular', }, sheet: { diff --git a/app/components/Views/ResetPassword/__snapshots__/index.test.tsx.snap b/app/components/Views/ResetPassword/__snapshots__/index.test.tsx.snap index 23cf67d73bdd..cd71c0800ab2 100644 --- a/app/components/Views/ResetPassword/__snapshots__/index.test.tsx.snap +++ b/app/components/Views/ResetPassword/__snapshots__/index.test.tsx.snap @@ -194,9 +194,9 @@ exports[`ResetPassword render matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/Views/RevealPrivateCredential/__snapshots__/RevealPrivateCredential.test.tsx.snap b/app/components/Views/RevealPrivateCredential/__snapshots__/RevealPrivateCredential.test.tsx.snap index b58e2a9a23e5..4bb01bc944f0 100644 --- a/app/components/Views/RevealPrivateCredential/__snapshots__/RevealPrivateCredential.test.tsx.snap +++ b/app/components/Views/RevealPrivateCredential/__snapshots__/RevealPrivateCredential.test.tsx.snap @@ -299,7 +299,6 @@ exports[`RevealPrivateCredential handles keyring ID parameter correctly 1`] = ` "borderRadius": 5, "borderWidth": 2, "color": "#121314", - "fontFamily": "Geist Regular", "padding": 10, } } @@ -683,7 +682,6 @@ exports[`RevealPrivateCredential renders reveal SRP correctly when the credentia "borderRadius": 5, "borderWidth": 2, "color": "#121314", - "fontFamily": "Geist Regular", "padding": 10, } } @@ -1067,7 +1065,6 @@ exports[`RevealPrivateCredential renders reveal SRP correctly when the credentia "borderRadius": 5, "borderWidth": 2, "color": "#121314", - "fontFamily": "Geist Regular", "padding": 10, } } @@ -1539,7 +1536,6 @@ exports[`RevealPrivateCredential renders reveal private key correctly 1`] = ` "borderRadius": 5, "borderWidth": 2, "color": "#121314", - "fontFamily": "Geist Regular", "padding": 10, } } @@ -2011,7 +2007,6 @@ exports[`RevealPrivateCredential renders with a custom selectedAddress 1`] = ` "borderRadius": 5, "borderWidth": 2, "color": "#121314", - "fontFamily": "Geist Regular", "padding": 10, } } diff --git a/app/components/Views/RevealPrivateCredential/styles.ts b/app/components/Views/RevealPrivateCredential/styles.ts index 6ffc8ce7f476..4fae3f628121 100644 --- a/app/components/Views/RevealPrivateCredential/styles.ts +++ b/app/components/Views/RevealPrivateCredential/styles.ts @@ -79,7 +79,6 @@ export const createStyles = (theme: Theme) => borderColor: theme.colors.border.default, padding: 10, color: theme.colors.text.default, - fontFamily: 'Geist Regular', }, icon: { color: theme.colors.error.default, diff --git a/app/core/FontPreloader/FontPreloader.ts b/app/core/FontPreloader/FontPreloader.ts index 079d01c734ef..a73918493517 100644 --- a/app/core/FontPreloader/FontPreloader.ts +++ b/app/core/FontPreloader/FontPreloader.ts @@ -1,4 +1,6 @@ import { Platform } from 'react-native'; +import { getFontFamily } from '../../component-library/components/Texts/Text/Text.utils'; +import { TextVariant } from '../../component-library/components/Texts/Text/Text.types'; import Logger from '../../util/Logger'; /** @@ -18,7 +20,7 @@ class FontPreloader { } /** - * Preload all Geist font files by creating invisible text elements + * Preload all Geist font variants by creating invisible text elements * This forces React Native to load and cache the fonts */ preloadFonts(): Promise { @@ -36,24 +38,24 @@ class FontPreloader { this.loadingPromise = new Promise((resolve) => { try { - // All available font families - const fontFamilies = [ - 'Geist Regular', - 'Geist Medium', - 'Geist Bold', - 'Geist Regular Italic', - 'Geist Medium Italic', - 'Geist Bold Italic', - 'MM Poly Regular', - 'MM Sans Regular', - 'MM Sans Medium', - 'MM Sans Bold', + // Get all font variants used in the app + const fontVariants = [ + TextVariant.DisplayMD, + TextVariant.HeadingLG, + TextVariant.HeadingMD, + TextVariant.HeadingSM, + TextVariant.BodyLGMedium, + TextVariant.BodyMD, + TextVariant.BodyMDMedium, + TextVariant.BodySM, + TextVariant.BodySMMedium, + TextVariant.BodyXS, ]; if (Platform.OS === 'web') { - this.preloadFontsWeb(fontFamilies, resolve); + this.preloadFontsWeb(fontVariants, resolve); } else { - this.preloadFontsNative(fontFamilies, resolve); + this.preloadFontsNative(fontVariants, resolve); } } catch (error) { Logger.error( @@ -69,68 +71,41 @@ class FontPreloader { return this.loadingPromise; } - /** - * Extract font weight and style from font family name - */ - private extractFontProperties(fontFamily: string): { - weight: string; - style: string; - } { - const lowerFamily = fontFamily.toLowerCase(); - - // Extract font weight - let weight = '400'; // default to normal - if (lowerFamily.includes('bold')) { - weight = '700'; - } else if (lowerFamily.includes('medium')) { - weight = '500'; - } - - // Extract font style - const style = lowerFamily.includes('italic') ? 'italic' : 'normal'; - - return { weight, style }; - } - /** * Preload fonts for web platform using FontFace API */ - private preloadFontsWeb(fontFamilies: string[], resolve: () => void): void { + private preloadFontsWeb( + fontVariants: TextVariant[], + resolve: () => void, + ): void { const preloadContainer = document.createElement('div'); preloadContainer.style.position = 'absolute'; preloadContainer.style.left = '-9999px'; preloadContainer.style.top = '-9999px'; preloadContainer.style.visibility = 'hidden'; - fontFamilies.forEach((fontFamily) => { - const span = document.createElement('span'); - const { weight, style } = this.extractFontProperties(fontFamily); - - span.style.fontFamily = fontFamily; - span.style.fontWeight = weight; - span.style.fontStyle = style; - span.textContent = 'Font preload test'; - preloadContainer.appendChild(span); + fontVariants.forEach((variant) => { + const fontFamily = getFontFamily(variant); + + // Create elements for Regular, Medium, and Bold weights + ['400', '500', '700'].forEach((weight) => { + const span = document.createElement('span'); + span.style.fontFamily = fontFamily; + span.style.fontWeight = weight; + span.textContent = 'Font preload test'; + preloadContainer.appendChild(span); + }); }); document.body.appendChild(preloadContainer); // Use FontFace API if available if ('fonts' in document) { - const fontLoadPromises = [ + Promise.all([ document.fonts.load('400 16px "Geist Regular"'), document.fonts.load('500 16px "Geist Medium"'), document.fonts.load('700 16px "Geist Bold"'), - document.fonts.load('italic 400 16px "Geist Regular Italic"'), - document.fonts.load('italic 500 16px "Geist Medium Italic"'), - document.fonts.load('italic 700 16px "Geist Bold Italic"'), - document.fonts.load('400 16px "MM Poly Regular"'), - document.fonts.load('400 16px "MM Sans Regular"'), - document.fonts.load('500 16px "MM Sans Medium"'), - document.fonts.load('700 16px "MM Sans Bold"'), - ]; - - Promise.all(fontLoadPromises) + ]) .then(() => { document.body.removeChild(preloadContainer); this.fontsLoaded = true; @@ -165,17 +140,15 @@ class FontPreloader { * Fonts are typically loaded synchronously but we ensure they're cached */ private preloadFontsNative( - fontFamilies: string[], + fontVariants: TextVariant[], resolve: () => void, ): void { // For React Native, fonts are registered in Info.plist (iOS) and assets (Android) // We create a small delay to ensure font cache is warmed up + const fontFamilies = fontVariants.map((variant) => getFontFamily(variant)); - // Log the font families passed as a parameter (not derived from fontVariants.map()) - Logger.log( - 'FontPreloader: Preloading font families (parameter):', - fontFamilies, - ); + // Log the fonts we're expecting to be available + Logger.log('FontPreloader: Expected font families:', fontFamilies); // Small delay to ensure fonts are cached by the system setTimeout( diff --git a/app/core/FontPreloader/__tests__/FontPreloader.test.ts b/app/core/FontPreloader/__tests__/FontPreloader.test.ts index 905a147e700d..60bfc20cf429 100644 --- a/app/core/FontPreloader/__tests__/FontPreloader.test.ts +++ b/app/core/FontPreloader/__tests__/FontPreloader.test.ts @@ -1,166 +1,4 @@ import FontPreloader from '../FontPreloader'; -import { Platform } from 'react-native'; - -/** - * Test utilities for FontPreloader tests - * Provides reusable mocking patterns to reduce code duplication - */ - -type MockSetTimeoutCallback = () => void; -type MockSetTimeout = jest.MockedFunction & { - __promisify__: typeof setTimeout.__promisify__; -}; - -/** - * Creates a mock setTimeout that executes callbacks immediately - */ -const createImmediateSetTimeoutMock = (): MockSetTimeout => { - const mockFn = jest - .fn() - .mockImplementation((callback: MockSetTimeoutCallback) => { - callback(); - return 123 as unknown as NodeJS.Timeout; - }); - - // Add the __promisify__ property to satisfy Node.js setTimeout type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (mockFn as any).__promisify__ = jest.fn(); - - return mockFn as unknown as MockSetTimeout; -}; - -/** - * Creates a mock setTimeout that captures callback for manual execution - */ -const createControlledSetTimeoutMock = (): { - mockSetTimeout: MockSetTimeout; - executeCallback: () => void; -} => { - let capturedCallback: MockSetTimeoutCallback | undefined; - - const mockFn = jest - .fn() - .mockImplementation((callback: MockSetTimeoutCallback) => { - capturedCallback = callback; - return 123 as unknown as NodeJS.Timeout; - }); - - // Add the __promisify__ property to satisfy Node.js setTimeout type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (mockFn as any).__promisify__ = jest.fn(); - - const executeCallback = () => { - if (capturedCallback) { - capturedCallback(); - } - }; - - return { - mockSetTimeout: mockFn as unknown as MockSetTimeout, - executeCallback, - }; -}; - -/** - * Creates a comprehensive DOM mock for web platform tests - */ -const createWebDOMMock = ( - options: { - fontLoadSuccess?: boolean; - hasFontAPI?: boolean; - hasBody?: boolean; - } = {}, -) => { - const { fontLoadSuccess = true, hasFontAPI = true, hasBody = true } = options; - - const mockSpan = { - style: {} as CSSStyleDeclaration, - textContent: '', - }; - - const mockContainer = { - style: {} as CSSStyleDeclaration, - appendChild: jest.fn(), - }; - - const mockDocument = { - createElement: jest.fn().mockImplementation((tag: string) => { - if (tag === 'div') return mockContainer; - if (tag === 'span') return mockSpan; - return {}; - }), - body: hasBody - ? { - appendChild: jest.fn(), - removeChild: jest.fn(), - } - : null, - ...(hasFontAPI && { - fonts: { - load: jest - .fn() - .mockImplementation(() => - fontLoadSuccess - ? Promise.resolve(true) - : Promise.reject(new Error('Font load failed')), - ), - }, - }), - }; - - return { - mockDocument, - mockContainer, - mockSpan, - }; -}; - -/** - * Sets up platform OS and restores it after test - */ -const withPlatform = (os: 'ios' | 'android' | 'web') => { - const originalOS = Platform.OS; - - return { - setup: () => { - (Platform as unknown as { OS: string }).OS = os; - }, - restore: () => { - (Platform as unknown as { OS: string }).OS = originalOS; - }, - }; -}; - -/** - * Sets up setTimeout mock and restores original after test - */ -const withSetTimeoutMock = (mockImpl: MockSetTimeout) => { - const originalSetTimeout = global.setTimeout; - - return { - setup: () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - global.setTimeout = mockImpl as any; - }, - restore: () => { - global.setTimeout = originalSetTimeout; - }, - }; -}; - -/** - * Helper to verify platform-specific timeout delays - */ -const expectPlatformDelay = ( - mockSetTimeout: MockSetTimeout, - platform: 'ios' | 'android', -) => { - const expectedDelay = platform === 'ios' ? 50 : 100; - expect(mockSetTimeout).toHaveBeenCalledWith( - expect.any(Function), - expectedDelay, - ); -}; // Mock Logger to avoid console output during tests jest.mock('../../../util/Logger', () => ({ @@ -168,7 +6,7 @@ jest.mock('../../../util/Logger', () => ({ error: jest.fn(), })); -// Mock Platform for React Native - will be overridden per test +// Mock Platform for React Native jest.mock('react-native', () => ({ Platform: { OS: 'ios', @@ -186,299 +24,156 @@ jest.mock( describe('FontPreloader', () => { beforeEach(() => { jest.clearAllMocks(); - (Platform as unknown as { OS: string }).OS = 'ios'; }); afterEach(() => { FontPreloader.reset(); }); - describe('Core functionality', () => { - it('should be a singleton', () => { - const instance1 = FontPreloader; - const instance2 = FontPreloader; - expect(instance1).toBe(instance2); - }); - - it('should track font loading state correctly', async () => { - // Initially not loaded - FontPreloader.reset(); - expect(FontPreloader.areFontsLoaded()).toBe(false); - - // Load fonts - const mockSetTimeout = createImmediateSetTimeoutMock(); - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); + it('should be a singleton', () => { + const instance1 = FontPreloader; + const instance2 = FontPreloader; + expect(instance1).toBe(instance2); + }); - await FontPreloader.preloadFonts(); - expect(FontPreloader.areFontsLoaded()).toBe(true); + it('should initially report fonts as not loaded', () => { + FontPreloader.reset(); + expect(FontPreloader.areFontsLoaded()).toBe(false); + }); - // Reset state - FontPreloader.reset(); - expect(FontPreloader.areFontsLoaded()).toBe(false); + it('should preload fonts successfully on React Native', async () => { + FontPreloader.reset(); + expect(FontPreloader.areFontsLoaded()).toBe(false); - timeoutMocker.restore(); - }); + // Mock setTimeout for immediate execution + const originalSetTimeout = global.setTimeout; + global.setTimeout = jest.fn().mockImplementation((callback: () => void) => { + callback(); // Execute immediately + return 123; + }) as unknown as typeof setTimeout; - it('should not reload fonts if already loaded', async () => { - FontPreloader.reset(); + await FontPreloader.preloadFonts(); - const mockSetTimeout = createImmediateSetTimeoutMock(); - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); + expect(FontPreloader.areFontsLoaded()).toBe(true); - // First load - await FontPreloader.preloadFonts(); - expect(FontPreloader.areFontsLoaded()).toBe(true); + // Restore setTimeout + global.setTimeout = originalSetTimeout; + }); - // Second load should not call setTimeout again - mockSetTimeout.mockClear(); - await FontPreloader.preloadFonts(); - expect(mockSetTimeout).not.toHaveBeenCalled(); - expect(FontPreloader.areFontsLoaded()).toBe(true); + it('should not reload fonts if already loaded', async () => { + FontPreloader.reset(); - timeoutMocker.restore(); - }); + // Mock setTimeout for immediate execution + const originalSetTimeout = global.setTimeout; + global.setTimeout = jest.fn().mockImplementation((callback: () => void) => { + callback(); // Execute immediately + return 123; + }) as unknown as typeof setTimeout; - it('should return same promise for concurrent loading attempts', async () => { - FontPreloader.reset(); + // First load + await FontPreloader.preloadFonts(); + const firstLoadResult = FontPreloader.areFontsLoaded(); - const { mockSetTimeout, executeCallback } = - createControlledSetTimeoutMock(); - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); + // Second load attempt + await FontPreloader.preloadFonts(); + const secondLoadResult = FontPreloader.areFontsLoaded(); - // Make concurrent calls - should return same promise - const promise1 = FontPreloader.preloadFonts(); - const promise2 = FontPreloader.preloadFonts(); - const promise3 = FontPreloader.preloadFonts(); + expect(firstLoadResult).toBe(true); + expect(secondLoadResult).toBe(true); + expect(firstLoadResult).toBe(secondLoadResult); - expect(promise1).toBe(promise2); - expect(promise2).toBe(promise3); - expect(mockSetTimeout).toHaveBeenCalledTimes(1); + // Restore setTimeout + global.setTimeout = originalSetTimeout; + }); - // Clean up - executeCallback(); - await promise1; - timeoutMocker.restore(); - }); + it('should return the same promise for concurrent loading attempts', async () => { + // Reset to ensure clean state + FontPreloader.reset(); - it('should provide access to loading promise', async () => { - FontPreloader.reset(); + // Mock setTimeout to not resolve immediately + const originalSetTimeout = global.setTimeout; + let resolveCallback: (() => void) | undefined; + global.setTimeout = jest.fn().mockImplementation((callback: () => void) => { + resolveCallback = callback; + return 123; // mock timer id + }) as unknown as typeof setTimeout; - const { mockSetTimeout, executeCallback } = - createControlledSetTimeoutMock(); - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); + // Make concurrent calls - should return same promise + const promise1 = FontPreloader.preloadFonts(); + const promise2 = FontPreloader.preloadFonts(); - const loadingPromise = FontPreloader.preloadFonts(); - const retrievedPromise = FontPreloader.getLoadingPromise(); + expect(promise1).toBe(promise2); - expect(retrievedPromise).toBe(loadingPromise); + // Clean up - resolve the promise and restore setTimeout + if (resolveCallback) { + resolveCallback(); + } + global.setTimeout = originalSetTimeout; - executeCallback(); - await loadingPromise; - timeoutMocker.restore(); - }); + await promise1; }); - describe('Platform-specific behavior', () => { - it.each([ - ['ios', 50], - ['android', 100], - ])( - 'should use correct timing for %s platform', - async (platform, expectedDelay) => { - const platformMocker = withPlatform(platform as 'ios' | 'android'); - platformMocker.setup(); - FontPreloader.reset(); - - const mockFn = jest - .fn() - .mockImplementation((callback: () => void, delay: number) => { - expect(delay).toBe(expectedDelay); - callback(); - return 123 as unknown as NodeJS.Timeout; - }); - // Add the __promisify__ property to satisfy Node.js setTimeout type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (mockFn as any).__promisify__ = jest.fn(); - const mockSetTimeout = mockFn as unknown as MockSetTimeout; - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); - - await FontPreloader.preloadFonts(); - - expect(FontPreloader.areFontsLoaded()).toBe(true); - expectPlatformDelay(mockSetTimeout, platform as 'ios' | 'android'); - - timeoutMocker.restore(); - platformMocker.restore(); - }, - ); - }); + it('should reset font loading state', async () => { + FontPreloader.reset(); - describe('Web platform', () => { - beforeEach(() => { - (Platform as unknown as { OS: string }).OS = 'web'; - }); + // Mock setTimeout for this test too + const originalSetTimeout = global.setTimeout; + global.setTimeout = jest.fn().mockImplementation((callback: () => void) => { + callback(); // Execute immediately + return 123; + }) as unknown as typeof setTimeout; - it('should preload fonts using FontFace API when available', async () => { - FontPreloader.reset(); - - const { mockDocument } = createWebDOMMock({ - fontLoadSuccess: true, - hasFontAPI: true, - }); - global.document = mockDocument as unknown as Document; - - await FontPreloader.preloadFonts(); - - expect(FontPreloader.areFontsLoaded()).toBe(true); - expect(mockDocument.createElement).toHaveBeenCalledWith('div'); - expect(mockDocument.createElement).toHaveBeenCalledWith('span'); - expect(mockDocument.body?.appendChild).toHaveBeenCalled(); - expect(mockDocument.body?.removeChild).toHaveBeenCalled(); - - // Verify key font variants are loaded - expect(mockDocument.fonts?.load).toHaveBeenCalledWith( - '400 16px "Geist Regular"', - ); - expect(mockDocument.fonts?.load).toHaveBeenCalledWith( - '700 16px "Geist Bold"', - ); - expect(mockDocument.fonts?.load).toHaveBeenCalledWith( - 'italic 400 16px "Geist Regular Italic"', - ); - }); + await FontPreloader.preloadFonts(); + expect(FontPreloader.areFontsLoaded()).toBe(true); - it('should fallback to timeout when FontFace API fails', async () => { - FontPreloader.reset(); - - const { mockDocument } = createWebDOMMock({ - fontLoadSuccess: false, - hasFontAPI: true, - }); - global.document = mockDocument as unknown as Document; - - const mockFn = jest - .fn() - .mockImplementation((callback: () => void, delay: number) => { - expect(delay).toBe(200); - callback(); - return 123 as unknown as NodeJS.Timeout; - }); - // Add the __promisify__ property to satisfy Node.js setTimeout type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (mockFn as any).__promisify__ = jest.fn(); - const mockSetTimeout = mockFn as unknown as MockSetTimeout; - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); - - await FontPreloader.preloadFonts(); - - expect(FontPreloader.areFontsLoaded()).toBe(true); - expect(mockDocument.fonts?.load).toHaveBeenCalled(); - expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 200); - - timeoutMocker.restore(); - }); + FontPreloader.reset(); + expect(FontPreloader.areFontsLoaded()).toBe(false); - it('should fallback to timeout when FontFace API is not available', async () => { - FontPreloader.reset(); - - const { mockDocument } = createWebDOMMock({ - hasFontAPI: false, - }); - global.document = mockDocument as unknown as Document; - - const mockFn = jest - .fn() - .mockImplementation((callback: () => void, delay: number) => { - expect(delay).toBe(200); - callback(); - return 123 as unknown as NodeJS.Timeout; - }); - // Add the __promisify__ property to satisfy Node.js setTimeout type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (mockFn as any).__promisify__ = jest.fn(); - const mockSetTimeout = mockFn as unknown as MockSetTimeout; - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); - - await FontPreloader.preloadFonts(); - - expect(FontPreloader.areFontsLoaded()).toBe(true); - expect(mockSetTimeout).toHaveBeenCalledWith(expect.any(Function), 200); - - timeoutMocker.restore(); - }); + // Restore setTimeout + global.setTimeout = originalSetTimeout; }); - describe('Error handling', () => { - it('should handle native font loading errors gracefully', async () => { - FontPreloader.reset(); - - const mockFn = jest.fn().mockImplementation(() => { - throw new Error('setTimeout failed'); - }); - // Add the __promisify__ property to satisfy Node.js setTimeout type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (mockFn as any).__promisify__ = jest.fn(); - const mockSetTimeout = mockFn as unknown as MockSetTimeout; - const timeoutMocker = withSetTimeoutMock(mockSetTimeout); - timeoutMocker.setup(); - - await FontPreloader.preloadFonts(); - - // Should still mark fonts as loaded for graceful degradation - expect(FontPreloader.areFontsLoaded()).toBe(true); - expect(mockSetTimeout).toHaveBeenCalled(); + it('should handle errors gracefully', async () => { + FontPreloader.reset(); - timeoutMocker.restore(); + // Mock setTimeout to throw an error + const originalSetTimeout = global.setTimeout; + const mockSetTimeout = jest.fn().mockImplementation(() => { + throw new Error('Test error'); }); + global.setTimeout = mockSetTimeout as unknown as typeof setTimeout; - it('should handle web DOM errors gracefully', async () => { - const platformMocker = withPlatform('web'); - platformMocker.setup(); - FontPreloader.reset(); - - const mockDocument = { - createElement: jest.fn().mockImplementation(() => { - throw new Error('DOM creation failed'); - }), - body: { - appendChild: jest.fn(), - removeChild: jest.fn(), - }, - }; - global.document = mockDocument as unknown as Document; - - await FontPreloader.preloadFonts(); + // Should still resolve even if there's an error + await expect(FontPreloader.preloadFonts()).resolves.toBeUndefined(); + expect(FontPreloader.areFontsLoaded()).toBe(true); - expect(FontPreloader.areFontsLoaded()).toBe(true); - expect(mockDocument.createElement).toHaveBeenCalled(); + // Restore setTimeout + global.setTimeout = originalSetTimeout; + }); - platformMocker.restore(); - }); + it('should provide loading promise access', async () => { + // Reset first to ensure clean state for this specific test + FontPreloader.reset(); - it('should handle missing document.body in web environment', async () => { - const platformMocker = withPlatform('web'); - platformMocker.setup(); - FontPreloader.reset(); + // Mock setTimeout to control timing + const originalSetTimeout = global.setTimeout; + let resolveCallback: (() => void) | undefined; + global.setTimeout = jest.fn().mockImplementation((callback: () => void) => { + resolveCallback = callback; + return 123; // mock timer id + }) as unknown as typeof setTimeout; - const { mockDocument } = createWebDOMMock({ - hasBody: false, - }); - global.document = mockDocument as unknown as Document; + const loadingPromise = FontPreloader.preloadFonts(); + const retrievedPromise = FontPreloader.getLoadingPromise(); - await FontPreloader.preloadFonts(); + expect(retrievedPromise).toBe(loadingPromise); - expect(FontPreloader.areFontsLoaded()).toBe(true); - expect(mockDocument.createElement).toHaveBeenCalled(); - expect(mockDocument.body).toBeNull(); + // Resolve and clean up + if (resolveCallback) { + resolveCallback(); + } + global.setTimeout = originalSetTimeout; - platformMocker.restore(); - }); + await loadingPromise; }); }); From 09ccad9325cc997ffa2778de71fdb920e58434c0 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 11 Nov 2025 10:47:22 -0800 Subject: [PATCH 2/2] chore: updating snapshot --- .../__snapshots__/RegionSelectorModal.test.tsx.snap | 4 ++-- .../__snapshots__/DepositPhoneField.test.tsx.snap | 2 +- .../__snapshots__/TokenSelection.test.tsx.snap | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap index ecd0ede3f1cd..6aaf44c17548 100644 --- a/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap @@ -4960,9 +4960,9 @@ exports[`RegionSelectorModal Component render matches snapshot with allRegionsSe "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -6107,9 +6107,9 @@ exports[`RegionSelectorModal Component render matches snapshot with custom selec "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap b/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap index 792573d5d8ca..de549e4407fa 100644 --- a/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap +++ b/app/components/UI/Ramp/Deposit/components/DepositPhoneField/__snapshots__/DepositPhoneField.test.tsx.snap @@ -1825,9 +1825,9 @@ exports[`DepositPhoneField updates phone region when region is selected from mod "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 46, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", diff --git a/app/components/UI/Ramp/components/TokenSelection/__snapshots__/TokenSelection.test.tsx.snap b/app/components/UI/Ramp/components/TokenSelection/__snapshots__/TokenSelection.test.tsx.snap index 84a346d1a212..635c4ad6f688 100644 --- a/app/components/UI/Ramp/components/TokenSelection/__snapshots__/TokenSelection.test.tsx.snap +++ b/app/components/UI/Ramp/components/TokenSelection/__snapshots__/TokenSelection.test.tsx.snap @@ -683,9 +683,9 @@ exports[`TokenSelection Component displays empty state when no tokens match sear "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -1514,9 +1514,9 @@ exports[`TokenSelection Component marks token as selected when selectedCryptoAss "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center", @@ -3405,9 +3405,9 @@ exports[`TokenSelection Component renders correctly and matches snapshot 1`] = ` "color": "#121314", "fontFamily": "Geist Regular", "fontSize": 16, + "fontWeight": "400", "height": 38, "letterSpacing": 0, - "lineHeight": 20, "opacity": 1, "paddingVertical": 2, "textAlignVertical": "center",