- Edit src/App.tsx and save to test HMR
-
- Click on the Vite and React logos to learn more -
- + tag of markdown editor affected by prism theme */
+pre[class*='language-'][class*='w-md-editor-text-pre'] {
+ padding: 0;
+ line-height: normal;
+}
+
+/* Style tag of markdown editor affected by prism theme */
+code[class*='language-'][class*='code-highlight'] {
+ color: #3e3e3e;
+}
+
+.bold-link {
+ color: inherit !important;
+ font-weight: bold;
+}
+
+button:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.dashed-field.Mui-focused fieldset {
+ border-color: unset !important;
+}
+
+.dashed-field fieldset {
+ border-style: dashed !important;
+}
+
+.pointer {
+ cursor: pointer;
+}
+
+.force-pointer {
+ cursor: pointer !important;
+}
+
+.inherit-color {
+ color: inherit;
+}
+
+.inherit-color-force {
+ color: inherit !important;
+}
+
+.profile-image {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ overflow: hidden;
+}
diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx
new file mode 100644
index 0000000..f356b63
--- /dev/null
+++ b/src/layouts/Main.tsx
@@ -0,0 +1,33 @@
+import { Box } from '@mui/material'
+import Container from '@mui/material/Container'
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { Outlet } from 'react-router-dom'
+import { AppBar } from '../components/AppBar/AppBar'
+import { restoreState } from '../store/actions'
+import { loadState } from '../utils'
+
+export const MainLayout = () => {
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ const restoredState = loadState()
+ if (restoredState) dispatch(restoreState(restoredState))
+ }, [dispatch])
+
+ return (
+ <>
+
+
+
+
+
+ )
+}
diff --git a/src/layouts/style.module.scss b/src/layouts/style.module.scss
new file mode 100644
index 0000000..8d92532
--- /dev/null
+++ b/src/layouts/style.module.scss
@@ -0,0 +1,22 @@
+@import '../colors.scss';
+
+@font-face {
+ font-family: 'Avenir';
+ font-weight: normal;
+ src: local('Avenir'),
+ url(../assets/avenir-font/AvenirLTStd-Roman.otf) format('opentype');
+}
+
+@font-face {
+ font-family: 'Avenir';
+ font-weight: bold;
+ src: local('Avenir'),
+ url(../assets/avenir-font/AvenirLTStd-Black.otf) format('opentype');
+}
+
+@font-face {
+ font-family: 'Avenir';
+ font-weight: lighter;
+ src: local('Avenir'),
+ url(../assets/avenir-font/AvenirLTStd-Book.otf) format('opentype');
+}
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..967317b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,30 @@
+import _ from 'lodash'
import React from 'react'
import ReactDOM from 'react-dom/client'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
import App from './App.tsx'
import './index.css'
+import store from './store/store.ts'
+import { saveState } from './utils'
+
+store.subscribe(
+ _.throttle(() => {
+ saveState({
+ auth: store.getState().auth
+ })
+ }, 1000)
+)
ReactDOM.createRoot(document.getElementById('root')!).render(
- ,
+
+
+
+
+
)
diff --git a/src/pages/landing/LandingPage.tsx b/src/pages/landing/LandingPage.tsx
new file mode 100644
index 0000000..5a03ddb
--- /dev/null
+++ b/src/pages/landing/LandingPage.tsx
@@ -0,0 +1,108 @@
+import { Box, Button, Typography, useTheme } from '@mui/material'
+import { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { appPublicRoutes } from '../../routes'
+import { State } from '../../store/rootReducer'
+import { saveVisitedLink } from '../../utils'
+import styles from './style.module.scss'
+
+const bodyBackgroundColor = document.body.style.backgroundColor
+
+export const LandingPage = () => {
+ const authState = useSelector((state: State) => state.auth)
+ const navigate = useNavigate()
+ const location = useLocation()
+
+ const theme = useTheme()
+
+ useEffect(() => {
+ saveVisitedLink(location.pathname, location.search)
+ }, [location])
+
+ const onSignInClick = async () => {
+ navigate(appPublicRoutes.login)
+ }
+
+ return (
+ <>
+
+
+
+
+ What is Nostr?
+
+
+ Nostr is a decentralised messaging protocol where YOU own your
+ identity. To get started, you must have an existing{' '}
+
+ Nostr account
+
+ .
+
+
+ No email required - all notifications are made using the nQuiz
+ relay.
+
+
+ If you no longer wish to hear from us, simply remove
+ relay.nquiz.io from your list of relays.
+
+
+
+
+ {!authState?.loggedIn && (
+
+
+
+ )}
+
+
+ )
+}
diff --git a/src/pages/landing/style.module.scss b/src/pages/landing/style.module.scss
new file mode 100644
index 0000000..a0e123f
--- /dev/null
+++ b/src/pages/landing/style.module.scss
@@ -0,0 +1,29 @@
+@import '../../colors.scss';
+
+.landingPage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: $text-color;
+ min-height: 80vh;
+ justify-content: center;
+ padding-top: 20px;
+
+ .loginBottomBar {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 10px;
+ background-color: rgba(255, 255, 255, 0.7);
+ border-top: 1px solid rgba(0, 0, 0, 0.096);
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ .loginBtn {
+ // margin-top: 20px;
+ min-width: 200px;
+ }
+ }
+}
diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx
new file mode 100644
index 0000000..3208281
--- /dev/null
+++ b/src/pages/login/index.tsx
@@ -0,0 +1,240 @@
+import { Box, Button, TextField, Typography } from '@mui/material'
+import { getPublicKey, nip05, nip19 } from 'nostr-tools'
+import { useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { toast } from 'react-toastify'
+import { LoadingSpinner } from '../../components/LoadingSpinner'
+import {
+ AuthController,
+ MetadataController,
+ NostrController
+} from '../../controllers'
+import {
+ updateKeyPair,
+ updateLoginMethod,
+ updateNsecbunkerPubkey
+} from '../../store/actions'
+import { LoginMethods } from '../../store/auth/types'
+import { Dispatch } from '../../store/store'
+import { nsecToHex } from '../../utils'
+import styles from './style.module.scss'
+import { useNavigate } from 'react-router-dom'
+
+export const Login = () => {
+ const dispatch: Dispatch = useDispatch()
+ const navigate = useNavigate()
+
+ const authController = new AuthController()
+ const metadataController = new MetadataController()
+ const nostrController = NostrController.getInstance()
+
+ const [isLoading, setIsLoading] = useState(false)
+ const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
+ const [inputValue, setInputValue] = useState('')
+
+ const [isNostrExtensionAvailable, setIsNostrExtensionAvailable] =
+ useState(false)
+
+ useEffect(() => {
+ setTimeout(() => {
+ setIsNostrExtensionAvailable(!!window.nostr)
+ }, 500)
+ }, [])
+
+ const loginWithExtension = async () => {
+ setIsLoading(true)
+ setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
+
+ nostrController
+ .capturePublicKey()
+ .then(async (pubkey) => {
+ dispatch(updateLoginMethod(LoginMethods.extension))
+
+ setLoadingSpinnerDesc('Authenticating and finding metadata')
+ const redirectPath = await authController.authenticateAndFindMetadata(
+ pubkey
+ )
+
+ navigate(redirectPath)
+ })
+ .catch((err) => {
+ toast.error('Error capturing public key from nostr extension: ' + err)
+ })
+ .finally(() => {
+ setIsLoading(false)
+ setLoadingSpinnerDesc('')
+ })
+ }
+
+ const loginWithNsec = async () => {
+ const hexPrivateKey = nsecToHex(inputValue)
+
+ if (!hexPrivateKey) {
+ toast.error(
+ 'Snap, we failed to convert the private key you provided. Please make sure key is valid.'
+ )
+ setIsLoading(false)
+ return
+ }
+
+ const publickey = getPublicKey(new TextEncoder().encode(hexPrivateKey))
+
+ dispatch(
+ updateKeyPair({
+ private: hexPrivateKey,
+ public: publickey
+ })
+ )
+ dispatch(updateLoginMethod(LoginMethods.privateKey))
+
+ setIsLoading(true)
+ setLoadingSpinnerDesc('Authenticating and finding metadata')
+
+ const redirectPath = await authController
+ .authenticateAndFindMetadata(publickey)
+ .catch((err) => {
+ toast.error('Error occurred in authentication: ' + err)
+ return null
+ })
+
+ if (redirectPath) navigate(redirectPath)
+
+ setIsLoading(false)
+ setLoadingSpinnerDesc('')
+ }
+
+ const loginWithNsecBunker = async () => {
+ let relays: string[] | undefined
+ let pubkey: string | undefined
+
+ setIsLoading(true)
+
+ if (inputValue.includes('@')) {
+ const nip05Profile = await nip05.queryProfile(inputValue).catch((err) => {
+ toast.error('An error occurred while querying nip05 profile: ' + err)
+ return null
+ })
+
+ if (nip05Profile) {
+ pubkey = nip05Profile.pubkey
+ relays = nip05Profile.relays
+ }
+ } else if (inputValue.startsWith('npub')) {
+ pubkey = nip19.decode(inputValue).data as string
+ const metadataEvent = await metadataController
+ .findMetadata(pubkey)
+ .catch(() => {
+ return null
+ })
+
+ if (!metadataEvent) {
+ toast.error('metadata not found!')
+ return
+ }
+
+ const metadataContent =
+ metadataController.extractProfileMetadataContent(metadataEvent)
+
+ if (!metadataContent.nip05) {
+ toast.error('nip05 not present in metadata')
+ return
+ }
+
+ const nip05Profile = await nip05.queryProfile(inputValue).catch((err) => {
+ toast.error('An error occurred while querying nip05 profile: ' + err)
+ return null
+ })
+
+ if (nip05Profile) {
+ if (nip05Profile.pubkey !== pubkey) {
+ toast.error('pubkey in nip05 does not match with provided npub')
+ return
+ }
+
+ relays = nip05Profile.relays
+ }
+ }
+
+ if (!relays || relays.length === 0) {
+ toast.error('No relay found for nsecbunker')
+ return
+ }
+
+ if (!pubkey) {
+ toast.error('pubkey not found')
+ return
+ }
+
+ setLoadingSpinnerDesc('Initializing nsecBunker')
+ await nostrController.nsecBunkerInit(relays)
+
+ setLoadingSpinnerDesc('Creating nsecbunker singer')
+ await nostrController
+ .createNsecBunkerSigner(pubkey)
+ .then(async () => {
+ dispatch(updateLoginMethod(LoginMethods.privateKey))
+ dispatch(updateNsecbunkerPubkey(pubkey))
+
+ setLoadingSpinnerDesc('Authenticating and finding metadata')
+
+ const redirectPath = await authController
+ .authenticateAndFindMetadata(pubkey!)
+ .catch((err) => {
+ toast.error('Error occurred in authentication: ' + err)
+ return null
+ })
+
+ if (redirectPath) navigate(redirectPath)
+ })
+ .catch((err) => {
+ toast.error(
+ 'An error occurred while creating nsecbunker signer: ' + err
+ )
+ })
+ .finally(() => {
+ setIsLoading(false)
+ setLoadingSpinnerDesc('')
+ })
+ }
+
+ const login = () => {
+ if (inputValue.startsWith('nsec')) {
+ return loginWithNsec()
+ }
+ if (inputValue.startsWith('npub')) {
+ return loginWithNsecBunker()
+ }
+ if (inputValue.includes('@')) {
+ return loginWithNsecBunker()
+ }
+
+ toast.error('Invalid Input!')
+ return
+ }
+
+ return (
+ <>
+ {isLoading && Welcome to Sigit
+ setInputValue(e.target.value)}
+ sx={{ width: '100%', mt: 2 }}
+ />
+ {isNostrExtensionAvailable && (
+
+ )}
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/login/style.module.scss b/src/pages/login/style.module.scss
new file mode 100644
index 0000000..3c3c569
--- /dev/null
+++ b/src/pages/login/style.module.scss
@@ -0,0 +1,6 @@
+@import '../../colors.scss';
+
+.loginPage {
+ color: $text-color;
+ margin-top: 20px;
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 0000000..59cfa39
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,26 @@
+import { LandingPage } from '../pages/landing/LandingPage'
+import { Login } from '../pages/login'
+
+export const appPublicRoutes = {
+ login: '/login',
+ help: 'https://help.sigit.io'
+}
+
+export const appPrivateRoutes = {
+ homePage: '/'
+}
+
+export const publicRoutes = [
+ {
+ path: appPublicRoutes.login,
+ hiddenWhenLoggedIn: true,
+ element: => {
+ // If key is NIP-05
+ if (pubKey.indexOf('@') !== -1)
+ return Promise.resolve(
+ (await nip05.queryProfile(pubKey).then((res) => res?.pubkey)) || null
+ )
+
+ // If key is NPUB
+ if (pubKey.startsWith('npub')) {
+ try {
+ return nip19.decode(pubKey).data as string
+ } catch (error) {
+ return Promise.resolve(null)
+ }
+ }
+
+ // valid hex key
+ if (validateHex(pubKey)) return Promise.resolve(pubKey)
+
+ // Not a valid hex key
+ return Promise.resolve(null)
+}
+
+/**
+ * If NSEC key is provided function will convert it to HEX
+ * If HEX key Is provided function will validate the HEX format and return
+ *
+ * @param nsec or private key in HEX format
+ */
+export const nsecToHex = (nsec: string): string | null => {
+ // If key is NSEC
+ if (nsec.startsWith('nsec')) {
+ try {
+ return nip19.decode(nsec).data as string
+ } catch (error) {
+ return null
+ }
+ }
+
+ // since it's not NSEC key we check if it's a valid hex key
+ if (validateHex(nsec)) return nsec
+
+ return null
+}
+
+export const verifySignedEvent = (event: SignedEvent) => {
+ const isGood = verifyEvent(event)
+
+ if (!isGood) {
+ throw new Error(
+ 'Signed event did not pass verification. Check sig, id and pubkey.'
+ )
+ }
+}
diff --git a/src/utils/string.ts b/src/utils/string.ts
new file mode 100644
index 0000000..877a142
--- /dev/null
+++ b/src/utils/string.ts
@@ -0,0 +1,9 @@
+export const shorten = (str: string, offset = 9) => {
+ // return original string if it is not long enough
+ if (str.length < offset * 2 + 4) return str
+
+ return `${str.slice(0, offset)}...${str.slice(
+ str.length - offset,
+ str.length
+ )}`
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..0f27c1a 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,9 @@
///