From 01c9d2d861760ff36113f9af3ebcd7abf27e7047 Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Mon, 14 Feb 2022 15:51:49 +0200
Subject: [PATCH] Implement light and dark theme toggles

---
 .../src/hooks/useWalletConnectEventsManager.ts           | 2 +-
 wallets/react-wallet-v2/src/pages/settings.tsx           | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
index 079ce4a..d5497da 100644
--- a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
+++ b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
@@ -14,7 +14,7 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
   // 2. Open session created modal to show success feedback
   const onSessionCreated = useCallback((created: SessionTypes.Created) => {}, [])
 
-  // 3. Open rpc request handling modal based on method that was used
+  // 3. Open request handling modal based on method that was used
   const onSessionRequest = useCallback(async (requestEvent: SessionTypes.RequestEvent) => {
     const { topic, request } = requestEvent
     const { method } = request
diff --git a/wallets/react-wallet-v2/src/pages/settings.tsx b/wallets/react-wallet-v2/src/pages/settings.tsx
index 8f43dfd..87de47c 100644
--- a/wallets/react-wallet-v2/src/pages/settings.tsx
+++ b/wallets/react-wallet-v2/src/pages/settings.tsx
@@ -1,9 +1,13 @@
 import PageHeader from '@/components/PageHeader'
 import { wallet } from '@/utils/WalletUtil'
-import { Card, Divider, Row, Switch, Text } from '@nextui-org/react'
+import { Card, Divider, Row, Switch, Text, useTheme } from '@nextui-org/react'
+import { useTheme as useNextTheme } from 'next-themes'
 import { Fragment } from 'react'
 
 export default function SettingsPage() {
+  const { setTheme } = useNextTheme()
+  const { isDark, type } = useTheme()
+
   return (
     <Fragment>
       <PageHeader>Settings</PageHeader>
@@ -34,7 +38,8 @@ export default function SettingsPage() {
         Theme
       </Text>
       <Row justify="space-between" align="center">
-        <Switch /> <Text>Dark</Text>
+        <Switch checked={isDark} onChange={e => setTheme(e.target.checked ? 'dark' : 'light')} />{' '}
+        <Text>{type}</Text>
       </Row>
     </Fragment>
   )