fix(wallet-mobile): Show correct theme name for auto (#3404)

Emurgo · Jul 17, 2024 · 15f5c44 · 15f5c44
1 parent eeb1093
commit 15f5c44
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/packages/theme/src/ThemeProvider.test.tsx b/packages/theme/src/ThemeProvider.test.tsx
@@ -3,16 +3,21 @@ import {render, fireEvent} from '@testing-library/react-native'
 import {Button, Text} from 'react-native'
 
 import {ThemeProvider, useTheme, useThemeColor} from './ThemeProvider'
-import {ThemeStorage} from './types'
+import {SupportedThemes, ThemeStorage} from './types'
 import {ErrorBoundary} from '@yoroi/common'
 
 describe('ThemeProvider', () => {
+  let storedValue: SupportedThemes | undefined
   const mockStorage: ThemeStorage = {
     key: 'theme-name',
-    save: jest.fn(),
-    read: jest.fn(),
+    save: jest.fn().mockImplementation((v) => (storedValue = v)),
+    read: jest.fn().mockImplementation(() => storedValue),
   }
 
+  beforeEach(() => {
+    storedValue = undefined
+  })
+
   it('should render children', () => {
     const {getByText} = render(
       <ThemeProvider storage={mockStorage}>
@@ -35,7 +40,7 @@ describe('ThemeProvider', () => {
       </ThemeProvider>,
     )
 
-    expect(getByText('default-light')).toBeTruthy()
+    expect(getByText('system')).toBeTruthy()
   })
 
   it('should update the theme when selectThemeName is called', () => {
@@ -47,7 +52,15 @@ describe('ThemeProvider', () => {
           <Text>{theme.name}</Text>
           <Button
             onPress={() => theme.selectThemeName('default-dark')}
-            title="Change Theme"
+            title="Change Theme dark"
+          />
+          <Button
+            onPress={() => theme.selectThemeName('default-light')}
+            title="Change Theme light"
+          />
+          <Button
+            onPress={() => theme.selectThemeName('system')}
+            title="Change Theme auto"
           />
           <Text>{color.black_static}</Text>
         </>
@@ -60,13 +73,21 @@ describe('ThemeProvider', () => {
       </ThemeProvider>,
     )
 
-    expect(getByText('default-light')).toBeTruthy()
+    expect(getByText('system')).toBeTruthy()
 
     expect(getByText('#000000')).toBeTruthy()
 
-    fireEvent.press(getByText('Change Theme'))
+    fireEvent.press(getByText('Change Theme light'))
+
+    expect(getByText('default-light')).toBeTruthy()
+
+    fireEvent.press(getByText('Change Theme dark'))
 
     expect(getByText('default-dark')).toBeTruthy()
+
+    fireEvent.press(getByText('Change Theme auto'))
+
+    expect(getByText('system')).toBeTruthy()
   })
 
   it('should throw an error when useTheme is called without a provider', () => {

diff --git a/packages/theme/src/ThemeProvider.tsx b/packages/theme/src/ThemeProvider.tsx
@@ -32,18 +32,21 @@ export const ThemeProvider = ({
   storage: ThemeStorage
 }) => {
   const colorScheme = useColorScheme()
+  const [selectedName, setSelectedName] = React.useState<SupportedThemes>(
+    storage.read() ?? 'system',
+  )
   const [themeName, setThemeName] = React.useState<
     Exclude<SupportedThemes, 'system'>
-  >(detectTheme(colorScheme, storage.read() ?? 'system'))
+  >(detectTheme(colorScheme, selectedName))
 
   const value = React.useMemo(
     () => ({
-      name: themes[themeName].name,
+      name: selectedName,
       color: themes[themeName].color,
 
       selectThemeName: (newTheme: SupportedThemes) => {
-        const detectedTheme = detectTheme(colorScheme, newTheme)
-        setThemeName(detectedTheme)
+        setSelectedName(newTheme)
+        setThemeName(detectTheme(colorScheme, newTheme))
         storage.save(newTheme)
       },
 
@@ -52,7 +55,7 @@ export const ThemeProvider = ({
       atoms: themes[themeName].atoms,
       data: themesData,
     }),
-    [colorScheme, storage, themeName],
+    [colorScheme, storage, themeName, selectedName],
   )
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>