From c13e9d7581a01db1f9d46c3e5563dd2f0c479346 Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Wed, 9 Feb 2022 15:51:06 +0200
Subject: [PATCH] Settings page layout and components

---
 .../react-wallet-v2/src/components/Layout.tsx |  3 +-
 .../src/components/RouteTransition.tsx        |  6 +--
 .../hooks/useWalletConnectEventsManager.ts    |  6 +--
 .../react-wallet-v2/src/pages/settings.tsx    | 41 +++++++++++++++++++
 wallets/react-wallet-v2/src/styles/main.css   |  8 ++++
 5 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 wallets/react-wallet-v2/src/pages/settings.tsx

diff --git a/wallets/react-wallet-v2/src/components/Layout.tsx b/wallets/react-wallet-v2/src/components/Layout.tsx
index 5ce99bd..2d78c5c 100644
--- a/wallets/react-wallet-v2/src/components/Layout.tsx
+++ b/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'
                   }
diff --git a/wallets/react-wallet-v2/src/components/RouteTransition.tsx b/wallets/react-wallet-v2/src/components/RouteTransition.tsx
index 207ee03..ae6fbc0 100644
--- a/wallets/react-wallet-v2/src/components/RouteTransition.tsx
+++ b/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 }}
-        transition={{ duration: 0.15 }}
+        exit={{ opacity: 0, translateY: 7 }}
+        transition={{ duration: 0.18 }}
       >
         {children}
       </motion.div>
diff --git a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts b/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
index c727bb9..c3ea9d9 100644
--- a/wallets/react-wallet-v2/src/hooks/useWalletConnectEventsManager.ts
+++ b/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])
 }
diff --git a/wallets/react-wallet-v2/src/pages/settings.tsx b/wallets/react-wallet-v2/src/pages/settings.tsx
new file mode 100644
index 0000000..1db5561
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/wallets/react-wallet-v2/src/styles/main.css b/wallets/react-wallet-v2/src/styles/main.css
index 542cdca..98df234 100644
--- a/wallets/react-wallet-v2/src/styles/main.css
+++ b/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%;