From b2a8cff907161511f944a02d829b4230007360fa Mon Sep 17 00:00:00 2001
From: Sabir Hassan <sabirbk06@gmail.com>
Date: Fri, 22 Mar 2024 12:46:57 +0500
Subject: [PATCH] feat: added nsecbunker setting page

---
 src/components/AppBar/AppBar.tsx       | 17 ++++++-
 src/pages/login/index.tsx              |  1 +
 src/pages/nsecbunker/index.tsx         | 69 ++++++++++++++++++++++++++
 src/pages/nsecbunker/style.module.scss |  7 +++
 src/routes/index.tsx                   | 14 ++++--
 5 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/nsecbunker/index.tsx
 create mode 100644 src/pages/nsecbunker/style.module.scss

diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index 763af39..4fe3383 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -17,7 +17,11 @@ import Username from '../username'
 import { Link, useNavigate } from 'react-router-dom'
 import nostrichAvatar from '../../assets/images/avatar.png'
 import nostrichLogo from '../../assets/images/nostr-logo.jpg'
-import { appPublicRoutes, getProfileRoute } from '../../routes'
+import {
+  appPrivateRoutes,
+  appPublicRoutes,
+  getProfileRoute
+} from '../../routes'
 import {
   clearAuthToken,
   saveNsecBunkerDelegatedKey,
@@ -25,6 +29,7 @@ import {
 } from '../../utils'
 import styles from './style.module.scss'
 import { NostrController } from '../../controllers'
+import { LoginMethods } from '../../store/auth/types'
 
 export const AppBar = () => {
   const navigate = useNavigate()
@@ -142,6 +147,16 @@ export const AppBar = () => {
                 >
                   Profile
                 </MenuItem>
+                {authState.loginMethod === LoginMethods.nsecBunker && (
+                  <MenuItem
+                    onClick={() => navigate(appPrivateRoutes.nsecbunker)}
+                    sx={{
+                      justifyContent: 'center'
+                    }}
+                  >
+                    Nsecbunker
+                  </MenuItem>
+                )}
                 <Link
                   to={appPublicRoutes.help}
                   target='_blank'
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
index 034f603..8e5b8d2 100644
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -184,6 +184,7 @@ export const Login = () => {
 
         dispatch(updateLoginMethod(LoginMethods.nsecBunker))
         dispatch(updateNsecbunkerPubkey(pubkey))
+        dispatch(updateNsecbunkerRelay(relays![0]))
 
         setLoadingSpinnerDesc('Authenticating and finding metadata')
 
diff --git a/src/pages/nsecbunker/index.tsx b/src/pages/nsecbunker/index.tsx
new file mode 100644
index 0000000..8a145f3
--- /dev/null
+++ b/src/pages/nsecbunker/index.tsx
@@ -0,0 +1,69 @@
+import {
+  IconButton,
+  InputAdornment,
+  List,
+  ListItem,
+  ListSubheader,
+  TextField
+} from '@mui/material'
+import { ContentCopy } from '@mui/icons-material'
+import { useSelector } from 'react-redux'
+import { State } from '../../store/rootReducer'
+import styles from './style.module.scss'
+import { toast } from 'react-toastify'
+
+export const Nsecbunker = () => {
+  const authState = useSelector((state: State) => state.auth)
+
+  const nsecbunkerConnectionString = `bunker://${authState?.nsecBunkerPubkey}?relay=${authState?.nsecbunkerRelay}`
+
+  return (
+    <List
+      sx={{
+        bgcolor: 'background.paper',
+        marginTop: 2
+      }}
+      subheader={
+        <ListSubheader
+          sx={{
+            paddingBottom: 1,
+            paddingTop: 1,
+            fontSize: '1.5rem'
+          }}
+          className={styles.subHeader}
+        >
+          Nsecbunker Setting
+        </ListSubheader>
+      }
+    >
+      <ListItem sx={{ marginTop: 1 }}>
+        <TextField
+          label='Nsecbunker connection string'
+          variant='outlined'
+          size='small'
+          className={styles.textField}
+          value={nsecbunkerConnectionString}
+          disabled
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position='end'>
+                <IconButton
+                  aria-label='copy value icon button'
+                  onClick={() => {
+                    navigator.clipboard.writeText(nsecbunkerConnectionString)
+                    toast.success('Copied to clipboard', {
+                      autoClose: 1000,
+                      hideProgressBar: true
+                    })
+                  }}
+                >
+                  <ContentCopy />
+                </IconButton>
+              </InputAdornment>
+            )
+          }}
+        />
+      </ListItem>
+    </List>
+  )
+}
diff --git a/src/pages/nsecbunker/style.module.scss b/src/pages/nsecbunker/style.module.scss
new file mode 100644
index 0000000..0adf9ba
--- /dev/null
+++ b/src/pages/nsecbunker/style.module.scss
@@ -0,0 +1,7 @@
+.textField {
+  width: 100%;
+}
+
+.subHeader {
+  border-bottom: 0.5px solid;
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 7693b34..196efeb 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,8 +1,14 @@
 import { LandingPage } from '../pages/landing/LandingPage'
 import { Login } from '../pages/login'
+import { Nsecbunker } from '../pages/nsecbunker'
 import { ProfilePage } from '../pages/profile'
 import { hexToNpub } from '../utils'
 
+export const appPrivateRoutes = {
+  homePage: '/',
+  nsecbunker: '/nsecbunker'
+}
+
 export const appPublicRoutes = {
   profile: '/profile/:npub',
   login: '/login',
@@ -12,10 +18,6 @@ export const appPublicRoutes = {
 export const getProfileRoute = (hexKey: string) =>
   appPublicRoutes.profile.replace(':npub', hexToNpub(hexKey))
 
-export const appPrivateRoutes = {
-  homePage: '/'
-}
-
 export const publicRoutes = [
   {
     path: appPublicRoutes.login,
@@ -32,5 +34,9 @@ export const privateRoutes = [
   {
     path: appPrivateRoutes.homePage,
     element: <LandingPage />
+  },
+  {
+    path: appPrivateRoutes.nsecbunker,
+    element: <Nsecbunker />
   }
 ]