Settings page layout and components

wallets/react-wallet-v2/src/components/Layout.tsx

@@ -49,7 +49,8 @@ export default function Layout({ children, initialized }: Props) {
             <RouteTransition>
               <Card.Body
                 css={{
-                  padding: 2,
+                  paddingLeft: 2,
+                  paddingRight: 2,
                   '@xs': {
                     padding: '20px'
                   }

wallets/react-wallet-v2/src/components/RouteTransition.tsx

@@ -20,10 +20,10 @@ export default function RouteTransition({ children }: IProps) {
       <motion.div
         className="routeTransition"
         key={pathname}
-        initial={{ opacity: 0, translateY: 10 }}
+        initial={{ opacity: 0, translateY: 7 }}
         animate={{ opacity: 1, translateY: 0 }}
-        exit={{ opacity: 0, translateY: 10 }}
+        exit={{ opacity: 0, translateY: 7 }}
-        transition={{ duration: 0.15 }}
+        transition={{ duration: 0.18 }}
       >
         {children}
       </motion.div>

wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts

@@ -4,13 +4,13 @@ import { SessionTypes } from '@walletconnect/types'
 import { useCallback, useEffect } from 'react'
 
 export default function useWalletConnectEventsManager(initialized: boolean) {
-  const onSessionProposal = useCallback((proposal: SessionTypes.Proposal) => {
+  const onPairingProposal = useCallback((proposal: SessionTypes.Proposal) => {
     console.log(proposal)
   }, [])
 
   useEffect(() => {
     if (initialized) {
-      client?.on(CLIENT_EVENTS.session.proposal, onSessionProposal)
+      client?.on(CLIENT_EVENTS.pairing.proposal, onPairingProposal)
     }
-  }, [initialized, onSessionProposal])
+  }, [initialized, onPairingProposal])
 }

wallets/react-wallet-v2/src/pages/settings.tsx

@@ -0,0 +1,41 @@
+import PageHeader from '@/components/PageHeader'
+import WalletStore from '@/store/WalletStore'
+import { Card, Divider, Row, Switch, Text } from '@nextui-org/react'
+import { Fragment } from 'react'
+
+export default function SettingsPage() {
+  return (
+    <Fragment>
+      <PageHeader>Settings</PageHeader>
+      <Text h4 css={{ marginBottom: '$5' }}>
+        Mnemonic
+      </Text>
+      <Card bordered borderWeight="light">
+        <Text css={{ fontFamily: '$mono' }}>{WalletStore.state.wallet?.mnemonic.phrase}</Text>
+      </Card>
+
+      <Text css={{ color: '$yellow500', marginTop: '$5', textAlign: 'center' }}>
+        Warning: mnemonic is provided for development purposes only and should not be used
+        elsewhere!
+      </Text>
+
+      <Divider y={3} />
+
+      <Text h4 css={{ marginBottom: '$5' }}>
+        Testnets
+      </Text>
+      <Row justify="space-between" align="center">
+        <Switch /> <Text>Dissabled</Text>
+      </Row>
+
+      <Divider y={3} />
+
+      <Text h4 css={{ marginBottom: '$5' }}>
+        Theme
+      </Text>
+      <Row justify="space-between" align="center">
+        <Switch /> <Text>Dark</Text>
+      </Row>
+    </Fragment>
+  )
+}

wallets/react-wallet-v2/src/styles/main.css

@@ -1,3 +1,11 @@
+body,
+html {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
 .routeTransition {
   width:  100%;
   height: 100%;