deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement light and dark theme toggles

Browse Source
This commit is contained in:
Ilja 2022-02-14 15:51:49 +02:00
parent 354cf0bf34
commit 01c9d2d861
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
View File

@ -14,7 +14,7 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
// 2. Open session created modal to show success feedback // 2. Open session created modal to show success feedback
const onSessionCreated = useCallback((created: SessionTypes.Created) => {}, []) 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 onSessionRequest = useCallback(async (requestEvent: SessionTypes.RequestEvent) => {
const { topic, request } = requestEvent const { topic, request } = requestEvent
const { method } = request const { method } = request

9
wallets/react-wallet-v2/src/pages/settings.tsx
View File

@ -1,9 +1,13 @@
import PageHeader from '@/components/PageHeader' import PageHeader from '@/components/PageHeader'
import { wallet } from '@/utils/WalletUtil' 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' import { Fragment } from 'react'
export default function SettingsPage() { export default function SettingsPage() {
const { setTheme } = useNextTheme()
const { isDark, type } = useTheme()
return ( return (
<Fragment> <Fragment>
<PageHeader>Settings</PageHeader> <PageHeader>Settings</PageHeader>
@ -34,7 +38,8 @@ export default function SettingsPage() {
Theme Theme
</Text> </Text>
<Row justify="space-between" align="center"> <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> </Row>
</Fragment> </Fragment>
) )