Merge branch 'main' into 63-align-with-open-source-checklist

vechain · Dec 4, 2023 · 7574ef6 · 7574ef6
2 parents 3bf0a25 + 798339e
commit 7574ef6
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 24 deletions.
diff --git a/...t-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx b/...t-react/src/Components/ConnectWalletButtonWithModal/Components/ConnectButtonWithModal.tsx
@@ -1,9 +1,9 @@
-import { useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../provider/ThemeProvider';
+import { useMemo } from 'react';
+import { useThemeSelector } from '../../../provider/ThemeProvider';
 import { createButtonWithModal } from './Wrapped/ConnectModalWithButtonWrapped';
 
 export const ConnectButtonWithModal = () => {
-    const { theme } = useContext(ThemeContext);
+    const { theme } = useThemeSelector();
 
     const ModalWithButton = useMemo(() => createButtonWithModal(), []);
 

diff --git a/packages/dapp-kit-react/src/Components/ThemeSelector.tsx b/packages/dapp-kit-react/src/Components/ThemeSelector.tsx
@@ -1,14 +1,14 @@
 // ThemeSelector.js
 
-import React, { useContext } from 'react';
+import React from 'react';
 // eslint-disable-next-line import/no-named-as-default
 import styled from 'styled-components';
-import { ThemeContext } from '../provider/ThemeProvider';
+import { useThemeSelector } from '../provider/ThemeProvider';
 
 const Button = styled.button``;
 
 const ThemeSelector = () => {
-    const { toggleTheme } = useContext(ThemeContext);
+    const { toggleTheme } = useThemeSelector();
 
     return <Button onClick={toggleTheme}>Toggle Theme</Button>;
 };

diff --git a/packages/dapp-kit-react/src/provider/ThemeProvider.tsx b/packages/dapp-kit-react/src/provider/ThemeProvider.tsx
@@ -9,7 +9,7 @@ interface Theme {
     mode: ThemeMode;
 }
 
-interface ContextProperties {
+interface ThemeContextProperties {
     theme: Theme;
     toggleTheme: () => void;
 }
@@ -18,11 +18,9 @@ const defaultTheme: Theme = {
     mode: 'LIGHT',
 };
 
-const ThemeContext = createContext<ContextProperties>({
-    theme: defaultTheme,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    toggleTheme: () => {},
-});
+const ThemeContext = createContext<ThemeContextProperties | undefined>(
+    undefined,
+);
 
 const ThemeProvider = ({ children }: { children: ReactNode }) => {
     const [currentTheme, setCurrentTheme] = useState(defaultTheme);
@@ -46,4 +44,14 @@ const ThemeProvider = ({ children }: { children: ReactNode }) => {
     );
 };
 
-export { ThemeProvider, ThemeContext };
+export const useThemeSelector = (): ThemeContextProperties => {
+    const context = React.useContext(ThemeContext);
+
+    if (context === undefined) {
+        throw new Error('useThemeSelector must be used within a ThemeProvider');
+    }
+
+    return context;
+};
+
+export { ThemeProvider, ThemeContext, type ThemeContextProperties };
diff --git a/packages/dapp-kit-react/test/helpers/react-test-helpers.tsx b/packages/dapp-kit-react/test/helpers/react-test-helpers.tsx
@@ -4,12 +4,15 @@ import {
     DAppKitProvider,
     SelectWalletModal,
 } from '../../src';
+import { ThemeProvider } from '../../src/provider/ThemeProvider';
 
 export const wrapper = ({ children }: { children?: React.ReactNode }) => (
     <DAppKitProvider nodeUrl="https://testnet.vechain.org">
-        {children}
-        <ConnectWalletButtonWithModal />
-        <SelectWalletModal isOpen={false} />
-        <ConnectWalletModal isOpen={false} />
+        <ThemeProvider>
+            {children}
+            <ConnectWalletButtonWithModal />
+            <SelectWalletModal isOpen={false} />
+            <ConnectWalletModal isOpen={false} />
+        </ThemeProvider>
     </DAppKitProvider>
 );
diff --git a/packages/dapp-kit-react/test/provider/ThemeProvider.test.tsx b/packages/dapp-kit-react/test/provider/ThemeProvider.test.tsx
@@ -12,12 +12,15 @@ describe('useThemeContext', () => {
 
         expect(result.current).toBeDefined();
 
-        expect(result.current.theme).toEqual({ mode: 'LIGHT' });
+        expect(result.current?.theme).toEqual({ mode: 'LIGHT' });
 
-        result.current.toggleTheme();
+        result.current?.toggleTheme();
 
-        await waitFor(() => {
-            expect(result.current.theme).toEqual({ mode: 'DARK' });
-        });
+        await waitFor(
+            () => {
+                expect(result.current?.theme).toEqual({ mode: 'DARK' });
+            },
+            { timeout: 3000 },
+        );
     });
 });
diff --git a/packages/dapp-kit-react/vite.config.ts b/packages/dapp-kit-react/vite.config.ts
@@ -21,7 +21,7 @@ export default defineConfig({
             lines: 90,
             statements: 90,
             functions: 90,
-            branches: 85,
+            branches: 80,
         },
         globals: true,
     },

diff --git a/packages/dapp-kit-ui/src/components/connect-button-with-modal.ts b/packages/dapp-kit-ui/src/components/connect-button-with-modal.ts
@@ -83,7 +83,7 @@ export class ConnectButtonWithModal extends LitElement {
     }
 
     private handleOpen = (): void => {
-        this.open = false;
+        this.open = true;
         DAppKitUI.wallet.disconnect();
         this.requestUpdate();
     };