sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

issue-38 #62

Closed
y wants to merge 48 commits from issue-38 into main
pull from: issue-38
merge into: sigit:main
Conversation 0 Commits 48 Files Changed 46 +2314 -1044
46 changed files with 2314 additions and 1044 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@ -1 +1 @@
VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.bitcoiner.social wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks VITE_MOST_POPULAR_RELAYS=wss://relay.damus.io wss://eden.nostr.land wss://nos.lol wss://relay.snort.social wss://relay.current.fyi wss://brb.io wss://nostr.orangepill.dev wss://nostr-pub.wellorder.net wss://nostr.wine wss://nostr.oxtr.dev wss://relay.nostr.bg wss://nostr.mom wss://nostr.fmt.wiz.biz wss://relay.nostr.band wss://nostr-pub.semisol.dev wss://nostr.milou.lol wss://puravida.nostr.land wss://nostr.onsats.org wss://relay.nostr.info wss://offchain.pub wss://relay.orangepill.dev wss://no.str.cr wss://atlas.nostr.land wss://nostr.zebedee.cloud wss://nostr-relay.wlvs.space wss://relay.nostrati.com wss://relay.nostr.com.au wss://nostr.inosta.cc wss://nostr.rocks

158
package-lock.json generated
View File

@ -13,17 +13,21 @@
"@mui/icons-material": "5.15.11", "@mui/icons-material": "5.15.11",
"@mui/lab": "5.0.0-alpha.166", "@mui/lab": "5.0.0-alpha.166",
"@mui/material": "5.15.11", "@mui/material": "5.15.11",
"@noble/hashes": "^1.4.0",
"@nostr-dev-kit/ndk": "2.5.0", "@nostr-dev-kit/ndk": "2.5.0",
"@reduxjs/toolkit": "2.2.1", "@reduxjs/toolkit": "2.2.1",
"axios": "1.6.7", "axios": "1.6.7",
"crypto-hash": "3.0.0", "crypto-hash": "3.0.0",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"dnd-core": "16.0.1",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"jszip": "3.10.1", "jszip": "3.10.1",
"lodash": "4.17.21", "lodash": "4.17.21",
"mui-file-input": "4.0.4", "mui-file-input": "4.0.4",
"nostr-tools": "2.3.1", "nostr-tools": "2.3.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dnd": "16.0.1",
"react-dnd-html5-backend": "16.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "9.1.0", "react-redux": "9.1.0",
"react-router-dom": "6.22.1", "react-router-dom": "6.22.1",
@ -43,6 +47,7 @@
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5", "eslint-plugin-react-refresh": "^0.4.5",
"prettier": "3.2.5",
"ts-css-modules-vite-plugin": "1.0.20", "ts-css-modules-vite-plugin": "1.0.20",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^5.1.4" "vite": "^5.1.4"
@ -1505,9 +1510,9 @@
} }
}, },
"node_modules/@noble/hashes": { "node_modules/@noble/hashes": {
"version": "1.3.1", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.1.tgz", "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
"integrity": "sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==", "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
"engines": { "engines": {
"node": ">= 16" "node": ">= 16"
}, },
@ -1598,6 +1603,17 @@
"url": "https://paulmillr.com/funding/" "url": "https://paulmillr.com/funding/"
} }
}, },
"node_modules/@nostr-dev-kit/ndk/node_modules/@noble/hashes": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.1.tgz",
"integrity": "sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==",
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/@nostr-dev-kit/ndk/node_modules/nostr-tools": { "node_modules/@nostr-dev-kit/ndk/node_modules/nostr-tools": {
"version": "1.17.0", "version": "1.17.0",
"resolved": "https://registry.npmjs.org/nostr-tools/-/nostr-tools-1.17.0.tgz", "resolved": "https://registry.npmjs.org/nostr-tools/-/nostr-tools-1.17.0.tgz",
@ -1628,6 +1644,21 @@
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/@react-dnd/asap": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
"integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
},
"node_modules/@react-dnd/invariant": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
"integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
},
"node_modules/@react-dnd/shallowequal": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
},
"node_modules/@reduxjs/toolkit": { "node_modules/@reduxjs/toolkit": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz",
@ -1863,6 +1894,28 @@
"url": "https://paulmillr.com/funding/" "url": "https://paulmillr.com/funding/"
} }
}, },
"node_modules/@scure/bip32/node_modules/@noble/curves/node_modules/@noble/hashes": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.1.tgz",
"integrity": "sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==",
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/@scure/bip32/node_modules/@noble/hashes": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.3.tgz",
"integrity": "sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==",
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/@scure/bip39": { "node_modules/@scure/bip39": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.2.1.tgz", "resolved": "https://registry.npmjs.org/@scure/bip39/-/bip39-1.2.1.tgz",
@ -1875,6 +1928,17 @@
"url": "https://paulmillr.com/funding/" "url": "https://paulmillr.com/funding/"
} }
}, },
"node_modules/@scure/bip39/node_modules/@noble/hashes": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.3.tgz",
"integrity": "sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==",
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/@tsconfig/node10": { "node_modules/@tsconfig/node10": {
"version": "1.0.9", "version": "1.0.9",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@ -1974,7 +2038,7 @@
"version": "20.11.20", "version": "20.11.20",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.20.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.20.tgz",
"integrity": "sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==", "integrity": "sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==",
"dev": true, "devOptional": true,
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"undici-types": "~5.26.4" "undici-types": "~5.26.4"
@ -2716,6 +2780,24 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/dnd-core": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
"integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
"dependencies": {
"@react-dnd/asap": "^5.0.1",
"@react-dnd/invariant": "^4.0.1",
"redux": "^4.2.0"
}
},
"node_modules/dnd-core/node_modules/redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/doctrine": { "node_modules/doctrine": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@ -3166,8 +3248,7 @@
"node_modules/fast-deep-equal": { "node_modules/fast-deep-equal": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
"dev": true
}, },
"node_modules/fast-glob": { "node_modules/fast-glob": {
"version": "3.3.2", "version": "3.3.2",
@ -4027,6 +4108,17 @@
} }
} }
}, },
"node_modules/nostr-tools/node_modules/@noble/hashes": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.1.tgz",
"integrity": "sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==",
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/nostr-wasm": { "node_modules/nostr-wasm": {
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/nostr-wasm/-/nostr-wasm-0.1.0.tgz", "resolved": "https://registry.npmjs.org/nostr-wasm/-/nostr-wasm-0.1.0.tgz",
@ -4244,6 +4336,21 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/prettier": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
"integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
"dev": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-bytes": { "node_modules/pretty-bytes": {
"version": "6.1.1", "version": "6.1.1",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
@ -4320,6 +4427,43 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-dnd": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
"dependencies": {
"@react-dnd/invariant": "^4.0.1",
"@react-dnd/shallowequal": "^4.0.1",
"dnd-core": "^16.0.1",
"fast-deep-equal": "^3.1.3",
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"@types/hoist-non-react-statics": ">= 3.3.1",
"@types/node": ">= 12",
"@types/react": ">= 16",
"react": ">= 16.14"
},
"peerDependenciesMeta": {
"@types/hoist-non-react-statics": {
"optional": true
},
"@types/node": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/react-dnd-html5-backend": {
"version": "16.0.1",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
"dependencies": {
"dnd-core": "^16.0.1"
}
},
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "18.2.0", "version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -4917,7 +5061,7 @@
"version": "5.26.5", "version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
"dev": true, "devOptional": true,
"peer": true "peer": true
}, },
"node_modules/update-browserslist-db": { "node_modules/update-browserslist-db": {

9
package.json
View File

@ -9,8 +9,8 @@
"build": "tsc && vite build", "build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"formatter:check": "npx prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"", "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
"formatter:fix": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"", "formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
@ -19,17 +19,21 @@
"@mui/icons-material": "5.15.11", "@mui/icons-material": "5.15.11",
"@mui/lab": "5.0.0-alpha.166", "@mui/lab": "5.0.0-alpha.166",
"@mui/material": "5.15.11", "@mui/material": "5.15.11",
"@noble/hashes": "^1.4.0",
"@nostr-dev-kit/ndk": "2.5.0", "@nostr-dev-kit/ndk": "2.5.0",
"@reduxjs/toolkit": "2.2.1", "@reduxjs/toolkit": "2.2.1",
"axios": "1.6.7", "axios": "1.6.7",
"crypto-hash": "3.0.0", "crypto-hash": "3.0.0",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"dnd-core": "16.0.1",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"jszip": "3.10.1", "jszip": "3.10.1",
"lodash": "4.17.21", "lodash": "4.17.21",
"mui-file-input": "4.0.4", "mui-file-input": "4.0.4",
"nostr-tools": "2.3.1", "nostr-tools": "2.3.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dnd": "16.0.1",
"react-dnd-html5-backend": "16.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "9.1.0", "react-redux": "9.1.0",
"react-router-dom": "6.22.1", "react-router-dom": "6.22.1",
@ -49,6 +53,7 @@
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5", "eslint-plugin-react-refresh": "^0.4.5",
"prettier": "3.2.5",
"ts-css-modules-vite-plugin": "1.0.20", "ts-css-modules-vite-plugin": "1.0.20",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^5.1.4" "vite": "^5.1.4"

21
src/App.tsx
View File

@ -33,6 +33,14 @@ const App = () => {
} }
} }
const handleRootRedirect = () => {
if (authState.loggedIn) return appPrivateRoutes.homePage
const callbackPathEncoded = btoa(
window.location.href.split(`${window.location.origin}/#`)[1]
)
return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
}
return ( return (
<Routes> <Routes>
<Route element={<MainLayout />}> <Route element={<MainLayout />}>
@ -66,18 +74,7 @@ const App = () => {
} }
})} })}
<Route <Route path="*" element={<Navigate to={handleRootRedirect()} />} />
path="*"
element={
<Navigate
to={
authState.loggedIn
? appPrivateRoutes.homePage
: appPublicRoutes.login
}
/>
}
/>
</Route> </Route>
</Routes> </Routes>
) )

51
src/components/AppBar/AppBar.tsx
View File

@ -10,21 +10,28 @@ import {
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { setAuthState } from '../../store/actions' import { setAuthState, setMetadataEvent } from '../../store/actions'
import { State } from '../../store/rootReducer' import { State } from '../../store/rootReducer'
import { Dispatch } from '../../store/store' import { Dispatch } from '../../store/store'
import Username from '../username' import Username from '../username'
import { Link, useNavigate } from 'react-router-dom' import { Link, useNavigate } from 'react-router-dom'
import nostrichAvatar from '../../assets/images/avatar.png' import {
import { NostrController } from '../../controllers' appPrivateRoutes,
import { appPublicRoutes, getProfileRoute } from '../../routes' appPublicRoutes,
getProfileRoute
} from '../../routes'
import { MetadataController, NostrController } from '../../controllers'
import { import {
clearAuthToken, clearAuthToken,
clearState,
saveNsecBunkerDelegatedKey, saveNsecBunkerDelegatedKey,
shorten shorten
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { setUserRobotImage } from '../../store/userRobotImage/action'
const metadataController = new MetadataController()
export const AppBar = () => { export const AppBar = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -32,21 +39,31 @@ export const AppBar = () => {
const dispatch: Dispatch = useDispatch() const dispatch: Dispatch = useDispatch()
const [username, setUsername] = useState('') const [username, setUsername] = useState('')
const [userAvatar, setUserAvatar] = useState(nostrichAvatar) const [userAvatar, setUserAvatar] = useState('')
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null) const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
const authState = useSelector((state: State) => state.auth) const authState = useSelector((state: State) => state.auth)
const metadataState = useSelector((state: State) => state.metadata) const metadataState = useSelector((state: State) => state.metadata)
const userRobotImage = useSelector((state: State) => state.userRobotImage)
useEffect(() => { useEffect(() => {
if (metadataState && metadataState.content) { if (metadataState) {
const { picture, display_name, name } = JSON.parse(metadataState.content) if (metadataState.content) {
const { picture, display_name, name } = JSON.parse(
metadataState.content
)
if (picture) setUserAvatar(picture) if (picture || userRobotImage) {
setUserAvatar(picture || userRobotImage)
}
setUsername(shorten(display_name || name || '', 7)) setUsername(shorten(display_name || name || '', 7))
} else {
setUserAvatar(userRobotImage || '')
setUsername('')
}
} }
}, [metadataState]) }, [metadataState, userRobotImage])
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => { const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget) setAnchorElUser(event.currentTarget)
@ -67,15 +84,19 @@ export const AppBar = () => {
handleCloseUserMenu() handleCloseUserMenu()
dispatch( dispatch(
setAuthState({ setAuthState({
keyPair: undefined,
loggedIn: false, loggedIn: false,
usersPubkey: undefined, usersPubkey: undefined,
loginMethod: undefined, loginMethod: undefined,
nsecBunkerPubkey: undefined nsecBunkerPubkey: undefined
}) })
) )
dispatch(setMetadataEvent(metadataController.getEmptyMetadataEvent()))
dispatch(setUserRobotImage(null))
// clear authToken saved in local storage // clear authToken saved in local storage
clearAuthToken() clearAuthToken()
clearState()
// update nsecBunker delegated key after logout // update nsecBunker delegated key after logout
const nostrController = NostrController.getInstance() const nostrController = NostrController.getInstance()
@ -143,6 +164,16 @@ export const AppBar = () => {
> >
Profile Profile
</MenuItem> </MenuItem>
<MenuItem
onClick={() => {
navigate(appPrivateRoutes.relays)
}}
sx={{
justifyContent: 'center'
}}
>
Relays
</MenuItem>
<Link <Link
to={appPublicRoutes.help} to={appPublicRoutes.help}
target="_blank" target="_blank"

49
src/components/username.tsx
View File

@ -1,6 +1,9 @@
import { Typography, IconButton } from '@mui/material' import { Typography, IconButton, Box, useTheme } from '@mui/material'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
import { State } from '../store/rootReducer' import { State } from '../store/rootReducer'
import { hexToNpub } from '../utils'
import { Link } from 'react-router-dom'
import { getProfileRoute } from '../routes'
type Props = { type Props = {
username: string username: string
@ -44,3 +47,47 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
} }
export default Username export default Username
type UserProps = {
pubkey: string
name: string
image?: string
}
/**
* This component will be used for the displaying username and profile picture.
* If image is not available, robohash image will be displayed
*/
export const UserComponent = ({ pubkey, name, image }: UserProps) => {
const theme = useTheme()
const npub = hexToNpub(pubkey)
const roboImage = `https://robohash.org/${npub}.png?set=set3`
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<img
src={image || roboImage}
alt="User Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${pubkey.substring(0, 6)}`
}}
/>
<Link to={getProfileRoute(pubkey)}>
<Typography
component="label"
sx={{
textAlign: 'center',
cursor: 'pointer',
color: theme.palette.text.primary
}}
>
{name}
</Typography>
</Link>
</Box>
)
}

44
src/controllers/AuthController.ts
View File

@ -1,13 +1,18 @@
import { EventTemplate } from 'nostr-tools' import { EventTemplate } from 'nostr-tools'
import { MetadataController, NostrController } from '.' import { MetadataController, NostrController } from '.'
import { setAuthState, setMetadataEvent } from '../store/actions' import {
setAuthState,
setMetadataEvent,
setRelayMapAction
} from '../store/actions'
import store from '../store/store' import store from '../store/store'
import { import {
base64DecodeAuthToken, base64DecodeAuthToken,
base64EncodeSignedEvent, base64EncodeSignedEvent,
getAuthToken, getAuthToken,
getVisitedLink, getVisitedLink,
saveAuthToken saveAuthToken,
compareObjects
} from '../utils' } from '../utils'
import { appPrivateRoutes } from '../routes' import { appPrivateRoutes } from '../routes'
import { SignedEvent } from '../types' import { SignedEvent } from '../types'
@ -30,14 +35,22 @@ export class AuthController {
* @returns url to redirect if authentication successfull * @returns url to redirect if authentication successfull
* or error if otherwise * or error if otherwise
*/ */
async authenticateAndFindMetadata(pubkey: string) { async authAndGetMetadataAndRelaysMap(pubkey: string) {
const emptyMetadata = this.metadataController.getEmptyMetadataEvent()
this.metadataController this.metadataController
.findMetadata(pubkey) .findMetadata(pubkey)
.then((event) => { .then((event) => {
store.dispatch(setMetadataEvent(event)) if (event) {
store.dispatch(setMetadataEvent(event))
} else {
store.dispatch(setMetadataEvent(emptyMetadata))
}
}) })
.catch((err) => { .catch((err) => {
console.error('Error occurred while finding metadata', err) console.warn('Error occurred while finding metadata', err)
store.dispatch(setMetadataEvent(emptyMetadata))
}) })
// Nostr uses unix timestamps // Nostr uses unix timestamps
@ -61,6 +74,27 @@ export class AuthController {
}) })
) )
const relaysState = store.getState().relays
if (relaysState) {
// Relays state is defined and there is no need to await for the latest relay map
this.nostrController.getRelayMap(pubkey).then((relayMap) => {
if (!compareObjects(relaysState?.map, relayMap)) {
store.dispatch(setRelayMapAction(relayMap.map))
}
})
} else {
// Relays state is not defined, await for the latest relay map
const relayMap = await this.nostrController.getRelayMap(pubkey)
if (Object.keys(relayMap).length < 1) {
// Navigate user to relays page
return Promise.resolve(appPrivateRoutes.relays)
}
store.dispatch(setRelayMapAction(relayMap.map))
}
const visitedLink = getVisitedLink() const visitedLink = getVisitedLink()
if (visitedLink) { if (visitedLink) {

13
src/controllers/MetadataController.ts
View File

@ -23,6 +23,18 @@ export class MetadataController {
this.nostrController = NostrController.getInstance() this.nostrController = NostrController.getInstance()
} }
public getEmptyMetadataEvent = (): Event => {
return {
content: '',
created_at: new Date().valueOf(),
id: '',
kind: 0,
pubkey: '',
sig: '',
tags: []
}
}
public findMetadata = async (hexKey: string) => { public findMetadata = async (hexKey: string) => {
const eventFilter: Filter = { const eventFilter: Filter = {
kinds: [kinds.Metadata], kinds: [kinds.Metadata],
@ -130,6 +142,7 @@ export class MetadataController {
public extractProfileMetadataContent = (event: VerifiedEvent) => { public extractProfileMetadataContent = (event: VerifiedEvent) => {
try { try {
if (!event.content) return {}
return JSON.parse(event.content) as ProfileMetadata return JSON.parse(event.content) as ProfileMetadata
} catch (error) { } catch (error) {
console.log('error in parsing metadata event content :>> ', error) console.log('error in parsing metadata event content :>> ', error)

126
src/controllers/NostrController.ts
View File

@ -9,20 +9,23 @@ import {
Event, Event,
EventTemplate, EventTemplate,
SimplePool, SimplePool,
Filter,
UnsignedEvent, UnsignedEvent,
finalizeEvent, finalizeEvent,
nip04, nip04,
nip19 nip19,
kinds
} from 'nostr-tools' } from 'nostr-tools'
import { EventEmitter } from 'tseep' import { EventEmitter } from 'tseep'
import { updateNsecbunkerPubkey } from '../store/actions' import { updateNsecbunkerPubkey } from '../store/actions'
import { AuthState, LoginMethods } from '../store/auth/types' import { AuthState, LoginMethods } from '../store/auth/types'
import store from '../store/store' import store from '../store/store'
import { SignedEvent } from '../types' import { SignedEvent, RelayMap } from '../types'
import { getNsecBunkerDelegatedKey, verifySignedEvent } from '../utils' import { getNsecBunkerDelegatedKey, verifySignedEvent } from '../utils'
export class NostrController extends EventEmitter { export class NostrController extends EventEmitter {
private static instance: NostrController private static instance: NostrController
private specialMetadataRelay = 'wss://purplepag.es'
private bunkerNDK: NDK | undefined private bunkerNDK: NDK | undefined
private remoteSigner: NDKNip46Signer | undefined private remoteSigner: NDKNip46Signer | undefined
@ -216,12 +219,16 @@ export class NostrController extends EventEmitter {
if (publishedRelays.length === 0) { if (publishedRelays.length === 0) {
const failedPublishes: any[] = [] const failedPublishes: any[] = []
const fallbackRejectionReason =
'Attempt to publish an event has been rejected with unknown reason.'
results.forEach((res, index) => { results.forEach((res, index) => {
if (res.status === 'rejected') { if (res.status === 'rejected') {
failedPublishes.push({ failedPublishes.push({
relay: relays[index], relay: relays[index],
error: res.reason.message error: res.reason
? res.reason.message || fallbackRejectionReason
: fallbackRejectionReason
}) })
} }
}) })
@ -319,15 +326,18 @@ export class NostrController extends EventEmitter {
} }
if (loginMethod === LoginMethods.privateKey) { if (loginMethod === LoginMethods.privateKey) {
const keyPair = (store.getState().auth as AuthState).keyPair const keys = (store.getState().auth as AuthState).keyPair
if (!keyPair) { if (!keys) {
throw new Error( throw new Error(
`Login method is ${LoginMethods.privateKey} but private & public key pair is not found.` `Login method is ${LoginMethods.privateKey} but private & public key pair is not found.`
) )
} }
const encrypted = await nip04.encrypt(keyPair.private, receiver, content) const { private: nsec } = keys
const privateKey = nip19.decode(nsec).data as Uint8Array
const encrypted = await nip04.encrypt(privateKey, receiver, content)
return encrypted return encrypted
} }
@ -364,6 +374,110 @@ export class NostrController extends EventEmitter {
return Promise.resolve(pubKey) return Promise.resolve(pubKey)
} }
/**
* Provides relay map.
* @param npub - user's npub
* @returns - promise that resolves into relay map and a timestamp when it has been updated.
*/
getRelayMap = async (
npub: string
): Promise<{ map: RelayMap; mapUpdated: number }> => {
const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
const popularRelayURIs = [
this.specialMetadataRelay,
...hardcodedPopularRelays
]
const pool = new SimplePool()
// More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
const eventFilter: Filter = {
kinds: [kinds.RelayList],
authors: [npub]
}
const event = await pool.get(popularRelayURIs, eventFilter).catch((err) => {
return Promise.reject(err)
})
if (event) {
// Handle founded 10002 event
const relaysMap: RelayMap = {}
// 'r' stands for 'relay'
const relayTags = event.tags.filter((tag) => tag[0] === 'r')
relayTags.forEach((tag) => {
const uri = tag[1]
const relayType = tag[2]
// if 3rd element of relay tag is undefined, relay is WRITE and READ
relaysMap[uri] = {
write: relayType ? relayType === 'write' : true,
read: relayType ? relayType === 'read' : true
}
})
return Promise.resolve({ map: relaysMap, mapUpdated: event.created_at })
} else {
return Promise.reject('User relays were not found.')
}
}
/**
* Publishes relay map.
* @param relayMap - relay map.
* @param npub - user's npub.
* @returns - promise that resolves into a string representing publishing result.
*/
publishRelayMap = async (
relayMap: RelayMap,
npub: string
): Promise<string> => {
const timestamp = Math.floor(Date.now() / 1000)
const relayURIs = Object.keys(relayMap)
// More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
const tags: string[][] = relayURIs.map((relayURI) =>
[
'r',
relayURI,
relayMap[relayURI].read && relayMap[relayURI].write
? ''
: relayMap[relayURI].write
? 'write'
: 'read'
].filter((value) => value !== '')
)
const newRelayMapEvent: UnsignedEvent = {
kind: kinds.RelayList,
tags,
content: '',
pubkey: npub,
created_at: timestamp
}
const signedEvent = await this.signEvent(newRelayMapEvent)
let relaysToPublish = relayURIs
// If relay map is empty, use most popular relay URIs
if (!relaysToPublish.length) {
const mostPopularRelays = import.meta.env.VITE_MOST_POPULAR_RELAYS
const hardcodedPopularRelays = (mostPopularRelays || '').split(' ')
relaysToPublish = [this.specialMetadataRelay, ...hardcodedPopularRelays]
}
await this.publishEvent(signedEvent, relaysToPublish)
return Promise.resolve(
`Relay Map published on: ${relaysToPublish.join('\n')}`
)
}
/** /**
* Generates NDK Private Signer * Generates NDK Private Signer
* @returns nSecBunker delegated key * @returns nSecBunker delegated key

1
src/hooks/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './store'

6
src/hooks/store.ts Normal file
View File

@ -0,0 +1,6 @@
import { useDispatch, useSelector } from 'react-redux'
import type { Dispatch, RootState } from '../store/store'
// Use instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = useDispatch.withTypes<Dispatch>()
export const useAppSelector = useSelector.withTypes<RootState>()

38
src/layouts/Main.tsx
View File

@ -1,24 +1,36 @@
import { Box } from '@mui/material' import { Box } from '@mui/material'
import Container from '@mui/material/Container' import Container from '@mui/material/Container'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom'
import { AppBar } from '../components/AppBar/AppBar' import { AppBar } from '../components/AppBar/AppBar'
import { restoreState, setAuthState } from '../store/actions' import { restoreState, setAuthState, setMetadataEvent } from '../store/actions'
import { clearAuthToken, loadState, saveNsecBunkerDelegatedKey } from '../utils' import {
clearAuthToken,
clearState,
getRoboHashPicture,
loadState,
saveNsecBunkerDelegatedKey
} from '../utils'
import { LoadingSpinner } from '../components/LoadingSpinner' import { LoadingSpinner } from '../components/LoadingSpinner'
import { Dispatch } from '../store/store' import { Dispatch } from '../store/store'
import { NostrController } from '../controllers' import { MetadataController, NostrController } from '../controllers'
import { LoginMethods } from '../store/auth/types' import { LoginMethods } from '../store/auth/types'
import { setUserRobotImage } from '../store/userRobotImage/action'
import { State } from '../store/rootReducer'
const metadataController = new MetadataController()
export const MainLayout = () => { export const MainLayout = () => {
const dispatch: Dispatch = useDispatch() const dispatch: Dispatch = useDispatch()
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const authState = useSelector((state: State) => state.auth)
useEffect(() => { useEffect(() => {
const logout = () => { const logout = () => {
dispatch( dispatch(
setAuthState({ setAuthState({
keyPair: undefined,
loggedIn: false, loggedIn: false,
usersPubkey: undefined, usersPubkey: undefined,
loginMethod: undefined, loginMethod: undefined,
@ -26,8 +38,11 @@ export const MainLayout = () => {
}) })
) )
dispatch(setMetadataEvent(metadataController.getEmptyMetadataEvent()))
// clear authToken saved in local storage // clear authToken saved in local storage
clearAuthToken() clearAuthToken()
clearState()
// update nsecBunker delegated key // update nsecBunker delegated key
const newDelegatedKey = const newDelegatedKey =
@ -59,6 +74,21 @@ export const MainLayout = () => {
setIsLoading(false) setIsLoading(false)
}, [dispatch]) }, [dispatch])
/**
* When authState change user logged in / or app reloaded
* we set robohash avatar in the global state based on user npub
* so that avatar will be consistent across the app when kind 0 is empty
*/
useEffect(() => {
if (authState && authState.loggedIn) {
const pubkey = authState.usersPubkey || authState.keyPair?.public
if (pubkey) {
dispatch(setUserRobotImage(getRoboHashPicture(pubkey)))
}
}
}, [authState])
if (isLoading) return <LoadingSpinner desc="Loading App" /> if (isLoading) return <LoadingSpinner desc="Loading App" />
return ( return (

4
src/main.tsx
View File

@ -14,7 +14,9 @@ store.subscribe(
_.throttle(() => { _.throttle(() => {
saveState({ saveState({
auth: store.getState().auth, auth: store.getState().auth,
metadata: store.getState().metadata metadata: store.getState().metadata,
userRobotImage: store.getState().userRobotImage,
relays: store.getState().relays
}) })
}, 1000) }, 1000)
) )

374
src/pages/create/index.tsx
View File

@ -1,4 +1,4 @@
import { Clear } from '@mui/icons-material' import { Clear, DragHandle } from '@mui/icons-material'
import { import {
Box, Box,
Button, Button,
@ -18,20 +18,24 @@ import {
Tooltip, Tooltip,
Typography Typography
} from '@mui/material' } from '@mui/material'
import JSZip from 'jszip'
import { MuiFileInput } from 'mui-file-input' import { MuiFileInput } from 'mui-file-input'
import { useEffect, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom' import { useSelector } from 'react-redux'
import placeholderAvatar from '../../assets/images/nostr-logo.jpg' import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserComponent } from '../../components/username'
import { MetadataController, NostrController } from '../../controllers' import { MetadataController, NostrController } from '../../controllers'
import { appPrivateRoutes, getProfileRoute } from '../../routes' import { appPrivateRoutes } from '../../routes'
import { ProfileMetadata, User, UserRole } from '../../types' import { State } from '../../store/rootReducer'
import { Meta, ProfileMetadata, User, UserRole } from '../../types'
import { import {
encryptArrayBuffer, encryptArrayBuffer,
generateEncryptionKey, generateEncryptionKey,
getHash, getHash,
hexToNpub, hexToNpub,
pubToHex, npubToHex,
queryNip05, queryNip05,
sendDM, sendDM,
shorten, shorten,
@ -39,10 +43,10 @@ import {
uploadToFileStorage uploadToFileStorage
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { toast } from 'react-toastify' import { DndProvider } from 'react-dnd'
import JSZip from 'jszip' import { HTML5Backend } from 'react-dnd-html5-backend'
import { useSelector } from 'react-redux' import type { Identifier, XYCoord } from 'dnd-core'
import { State } from '../../store/rootReducer' import { useDrag, useDrop } from 'react-dnd'
export const CreatePage = () => { export const CreatePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -85,13 +89,21 @@ export const CreatePage = () => {
const addUser = (pubkey: string) => { const addUser = (pubkey: string) => {
setUsers((prev) => { setUsers((prev) => {
const signers = prev.filter((user) => user.role === UserRole.signer)
const viewers = prev.filter((user) => user.role === UserRole.viewer)
const existingUserIndex = prev.findIndex( const existingUserIndex = prev.findIndex(
(user) => user.pubkey === pubkey (user) => user.pubkey === pubkey
) )
// add new // add new
if (existingUserIndex === -1) if (existingUserIndex === -1) {
return [...prev, { pubkey, role: userRole }] if (userRole === UserRole.signer) {
return [...signers, { pubkey, role: userRole }, ...viewers]
} else {
return [...signers, ...viewers, { pubkey, role: userRole }]
}
}
const existingUser = prev[existingUserIndex] const existingUser = prev[existingUserIndex]
@ -104,12 +116,16 @@ export const CreatePage = () => {
updatedUser.role = userRole updatedUser.role = userRole
updatedUsers[existingUserIndex] = updatedUser updatedUsers[existingUserIndex] = updatedUser
return updatedUsers // signers should be placed at the start of the array
return [
...updatedUsers.filter((user) => user.role === UserRole.signer),
...updatedUsers.filter((user) => user.role === UserRole.viewer)
]
}) })
} }
if (userInput.startsWith('npub')) { if (userInput.startsWith('npub')) {
const pubkey = await pubToHex(userInput) const pubkey = npubToHex(userInput)
if (pubkey) { if (pubkey) {
addUser(pubkey) addUser(pubkey)
setUserInput('') setUserInput('')
@ -132,7 +148,7 @@ export const CreatePage = () => {
setLoadingSpinnerDesc('') setLoadingSpinnerDesc('')
}) })
if (nip05Profile) { if (nip05Profile && nip05Profile.pubkey) {
const pubkey = nip05Profile.pubkey const pubkey = nip05Profile.pubkey
addUser(pubkey) addUser(pubkey)
setUserInput('') setUserInput('')
@ -145,25 +161,40 @@ export const CreatePage = () => {
setError('Invalid input! Make sure to provide correct npub or nip05.') setError('Invalid input! Make sure to provide correct npub or nip05.')
} }
const handleUserRoleChange = (role: UserRole, index: number) => { const handleUserRoleChange = (role: UserRole, pubkey: string) => {
setUsers((prevUsers) => { setUsers((prevUsers) =>
// Create a shallow copy of the previous state prevUsers.map((user) => {
const updatedUsers = [...prevUsers] if (user.pubkey === pubkey) {
// Create a shallow copy of the user object at the specified index return {
const updatedUser = { ...updatedUsers[index] } ...user,
// Update the role property of the copied user object role
updatedUser.role = role }
// Update the user object at the specified index in the copied array }
updatedUsers[index] = updatedUser
// Return the updated array return user
return updatedUsers })
}) )
} }
const handleRemoveUser = (pubkey: string) => { const handleRemoveUser = (pubkey: string) => {
setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey)) setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey))
} }
/**
* changes the position of signer in the signers list
*
* @param dragIndex represents the current position of user
* @param hoverIndex represents the target position of user
*/
const moveSigner = (dragIndex: number, hoverIndex: number) => {
setUsers((prevUsers) => {
const updatedUsers = [...prevUsers]
const [draggedUser] = updatedUsers.splice(dragIndex, 1)
updatedUsers.splice(hoverIndex, 0, draggedUser)
return updatedUsers
})
}
const handleSelectFiles = (files: File[]) => { const handleSelectFiles = (files: File[]) => {
setDisplayUserInput(true) setDisplayUserInput(true)
setSelectedFiles((prev) => { setSelectedFiles((prev) => {
@ -246,13 +277,13 @@ export const CreatePage = () => {
if (!signedEvent) return if (!signedEvent) return
// create content for meta file // create content for meta file
const meta = { const meta: Meta = {
signers: signers.map((signer) => signer.pubkey), signers: signers.map((signer) => hexToNpub(signer.pubkey)),
viewers: viewers.map((viewer) => viewer.pubkey), viewers: viewers.map((viewer) => hexToNpub(viewer.pubkey)),
fileHashes, fileHashes,
submittedBy: usersPubkey, submittedBy: hexToNpub(usersPubkey!),
signedEvents: { signedEvents: {
[signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2) [hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
} }
} }
@ -351,7 +382,7 @@ export const CreatePage = () => {
setIsLoading(false) setIsLoading(false)
navigate( navigate(
`${appPrivateRoutes.verify}?file=${encodeURIComponent( `${appPrivateRoutes.sign}?file=${encodeURIComponent(
fileUrl fileUrl
)}&key=${encodeURIComponent(encryptionKey)}` )}&key=${encodeURIComponent(encryptionKey)}`
) )
@ -397,7 +428,7 @@ export const CreatePage = () => {
{displayUserInput && ( {displayUserInput && (
<> <>
<Typography component="label" variant="h6"> <Typography component="label" variant="h6">
Select signers and viewers Add Counterparties
</Typography> </Typography>
<Box className={styles.inputBlock}> <Box className={styles.inputBlock}>
<TextField <TextField
@ -435,6 +466,7 @@ export const CreatePage = () => {
users={users} users={users}
handleUserRoleChange={handleUserRoleChange} handleUserRoleChange={handleUserRoleChange}
handleRemoveUser={handleRemoveUser} handleRemoveUser={handleRemoveUser}
moveSigner={moveSigner}
/> />
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}> <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleCreate} variant="contained"> <Button onClick={handleCreate} variant="contained">
@ -450,14 +482,16 @@ export const CreatePage = () => {
type DisplayUsersProps = { type DisplayUsersProps = {
users: User[] users: User[]
handleUserRoleChange: (role: UserRole, index: number) => void handleUserRoleChange: (role: UserRole, pubkey: string) => void
handleRemoveUser: (pubkey: string) => void handleRemoveUser: (pubkey: string) => void
moveSigner: (dragIndex: number, hoverIndex: number) => void
} }
const DisplayUser = ({ const DisplayUser = ({
users, users,
handleUserRoleChange, handleUserRoleChange,
handleRemoveUser handleRemoveUser,
moveSigner
}: DisplayUsersProps) => { }: DisplayUsersProps) => {
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>( const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
{} {}
@ -489,77 +523,223 @@ const DisplayUser = ({
}) })
}, [users]) }, [users])
const imageLoadError = (event: any) => {
event.target.src = placeholderAvatar
}
return ( return (
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}> <TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell className={styles.tableCell}>User</TableCell> <TableCell className={styles.tableHeaderCell}>User</TableCell>
<TableCell className={styles.tableCell}>Role</TableCell> <TableCell className={styles.tableHeaderCell}>Role</TableCell>
<TableCell>Action</TableCell> <TableCell>Action</TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{users.map((user, index) => { <DndProvider backend={HTML5Backend}>
const userMeta = metadata[user.pubkey] {users
const npub = hexToNpub(user.pubkey) .filter((user) => user.role === UserRole.signer)
const roboUrl = `https://robohash.org/${npub}.png?set=set3` .map((user, index) => (
return ( <SignerRow
<TableRow key={index}> key={`signer-${index}`}
<TableCell className={styles.tableCell}> userMeta={metadata[user.pubkey]}
<Box className={styles.user}> user={user}
<img index={index}
onError={imageLoadError} moveSigner={moveSigner}
src={userMeta?.picture || roboUrl} handleUserRoleChange={handleUserRoleChange}
alt="Profile Image" handleRemoveUser={handleRemoveUser}
className="profile-image" />
style={{ ))}
borderWidth: '3px', </DndProvider>
borderStyle: 'solid', {users
borderColor: `#${user.pubkey.substring(0, 6)}` .filter((user) => user.role === UserRole.viewer)
}} .map((user, index) => {
const userMeta = metadata[user.pubkey]
return (
<TableRow key={index}>
<TableCell className={styles.tableCell}>
<UserComponent
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/> />
<Link to={getProfileRoute(user.pubkey)}> </TableCell>
<Typography component="label" className={styles.name}> <TableCell className={styles.tableCell}>
{userMeta?.display_name || <Select
userMeta?.name || fullWidth
shorten(npub)} value={user.role}
</Typography> onChange={(e) =>
</Link> handleUserRoleChange(
</Box> e.target.value as UserRole,
</TableCell> user.pubkey
<TableCell className={styles.tableCell}> )
<Select }
fullWidth >
value={user.role} <MenuItem value={UserRole.signer}>
onChange={(e) => {UserRole.signer}
handleUserRoleChange(e.target.value as UserRole, index) </MenuItem>
} <MenuItem value={UserRole.viewer}>
> {UserRole.viewer}
<MenuItem value={UserRole.signer}> </MenuItem>
{UserRole.signer} </Select>
</MenuItem> </TableCell>
<MenuItem value={UserRole.viewer}> <TableCell>
{UserRole.viewer} <Tooltip title="Remove User" arrow>
</MenuItem> <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
</Select> <Clear style={{ color: 'red' }} />
</TableCell> </IconButton>
<TableCell> </Tooltip>
<Tooltip title="Remove User" arrow> </TableCell>
<IconButton onClick={() => handleRemoveUser(user.pubkey)}> </TableRow>
<Clear style={{ color: 'red' }} /> )
</IconButton> })}
</Tooltip>
</TableCell>
</TableRow>
)
})}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
) )
} }
interface DragItem {
index: number
id: string
type: string
}
type SignerRowProps = {
userMeta: ProfileMetadata
user: User
index: number
moveSigner: (dragIndex: number, hoverIndex: number) => void
handleUserRoleChange: (role: UserRole, pubkey: string) => void
handleRemoveUser: (pubkey: string) => void
}
const SignerRow = ({
userMeta,
user,
index,
moveSigner,
handleUserRoleChange,
handleRemoveUser
}: SignerRowProps) => {
const ref = useRef<HTMLTableRowElement>(null)
const [{ handlerId }, drop] = useDrop<
DragItem,
void,
{ handlerId: Identifier | null }
>({
accept: 'row',
collect(monitor) {
return {
handlerId: monitor.getHandlerId()
}
},
hover(item: DragItem, monitor) {
if (!ref.current) {
return
}
const dragIndex = item.index
const hoverIndex = index
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return
}
// Determine rectangle on screen
const hoverBoundingRect = ref.current?.getBoundingClientRect()
// Get vertical middle
const hoverMiddleY =
(hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
// Determine mouse position
const clientOffset = monitor.getClientOffset()
// Get pixels to the top
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return
}
// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return
}
// Time to actually perform the action
moveSigner(dragIndex, hoverIndex)
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
item.index = hoverIndex
}
})
const [{ isDragging }, drag] = useDrag({
type: 'row',
item: () => {
return { id: user.pubkey, index }
},
collect: (monitor: any) => ({
isDragging: monitor.isDragging()
})
})
const opacity = isDragging ? 0 : 1
drag(drop(ref))
return (
<TableRow
sx={{ cursor: 'move', opacity }}
data-handler-id={handlerId}
ref={ref}
>
<TableCell
className={styles.tableCell}
sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
>
<DragHandle />
<UserComponent
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/>
</TableCell>
<TableCell className={styles.tableCell}>
<Select
fullWidth
value={user.role}
onChange={(e) =>
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
}
>
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
</Select>
</TableCell>
<TableCell>
<Tooltip title="Remove User" arrow>
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
<Clear style={{ color: 'red' }} />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
)
}

5
src/pages/create/style.module.scss
View File

@ -17,8 +17,13 @@
border-bottom: 0.5px solid; border-bottom: 0.5px solid;
} }
.tableHeaderCell {
border-right: 1px solid rgba(224, 224, 224, 1);
}
.tableCell { .tableCell {
border-right: 1px solid rgba(224, 224, 224, 1); border-right: 1px solid rgba(224, 224, 224, 1);
height: 56px;
.user { .user {
display: flex; display: flex;

141
src/pages/decrypt/index.tsx
View File

@ -1,141 +0,0 @@
import { Box, Button, TextField, Typography } from '@mui/material'
import saveAs from 'file-saver'
import { MuiFileInput } from 'mui-file-input'
import { useEffect, useState } from 'react'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { decryptArrayBuffer } from '../../utils'
import styles from './style.module.scss'
import { toast } from 'react-toastify'
import { useSearchParams } from 'react-router-dom'
import axios from 'axios'
import { DecryptionError } from '../../types/errors/DecryptionError'
export const DecryptZip = () => {
const [searchParams] = useSearchParams()
const [selectedFile, setSelectedFile] = useState<File | null>(null)
const [encryptionKey, setEncryptionKey] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
const [isDraggingOver, setIsDraggingOver] = useState(false)
useEffect(() => {
const fileUrl = searchParams.get('file')
if (fileUrl) {
setIsLoading(true)
setLoadingSpinnerDesc('Fetching zip file')
axios
.get(fileUrl, {
responseType: 'arraybuffer'
})
.then((res) => {
const fileName = fileUrl.split('/').pop()
const file = new File([res.data], fileName!)
setSelectedFile(file)
})
.catch((err) => {
console.error(
`error occurred in getting zip file from ${fileUrl}`,
err
)
})
.finally(() => {
setIsLoading(false)
})
}
const key = searchParams.get('key')
if (key) setEncryptionKey(key)
}, [searchParams])
const handleDecrypt = async () => {
if (!selectedFile || !encryptionKey) return
setIsLoading(true)
setLoadingSpinnerDesc('Decrypting zip file')
const encryptedArrayBuffer = await selectedFile.arrayBuffer()
const arrayBuffer = await decryptArrayBuffer(
encryptedArrayBuffer,
encryptionKey
).catch((err: DecryptionError) => {
console.log('err in decryption:>> ', err)
toast.error(err.message)
setIsLoading(false)
return null
})
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, 'decrypted.zip')
setIsLoading(false)
}
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault()
setIsDraggingOver(false)
const file = event.dataTransfer.files[0]
if (file.type === 'application/zip') setSelectedFile(file)
}
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault()
setIsDraggingOver(true)
}
return (
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Box className={styles.container}>
<Typography component="label" variant="h6">
Select encrypted zip file
</Typography>
<Box
className={styles.inputBlock}
onDrop={handleDrop}
onDragOver={handleDragOver}
>
{isDraggingOver && (
<Box className={styles.fileDragOver}>
<Typography variant="body1">Drop file here</Typography>
</Box>
)}
<MuiFileInput
placeholder="Drop file here, or click to select"
value={selectedFile}
onChange={(value) => setSelectedFile(value)}
InputProps={{
inputProps: {
accept: '.zip'
}
}}
/>
<TextField
label="Encryption Key"
variant="outlined"
value={encryptionKey}
onChange={(e) => setEncryptionKey(e.target.value)}
/>
</Box>
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button
onClick={handleDecrypt}
variant="contained"
disabled={!selectedFile || !encryptionKey}
>
Decrypt
</Button>
</Box>
</Box>
</>
)
}

27
src/pages/decrypt/style.module.scss
View File

@ -1,27 +0,0 @@
@import '../../colors.scss';
.container {
display: flex;
flex-direction: column;
color: $text-color;
.inputBlock {
position: relative;
display: flex;
flex-direction: column;
gap: 25px;
}
.fileDragOver {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
}

6
src/pages/home/index.tsx
View File

@ -14,6 +14,12 @@ export const HomePage = () => {
> >
Create Create
</Button> </Button>
<Button
onClick={() => navigate(appPrivateRoutes.sign)}
variant="contained"
>
Sign
</Button>
<Button <Button
onClick={() => navigate(appPrivateRoutes.verify)} onClick={() => navigate(appPrivateRoutes.verify)}
variant="contained" variant="contained"

25
src/pages/landing/LandingPage.tsx
View File

@ -59,7 +59,7 @@ export const LandingPage = () => {
}} }}
variant="h4" variant="h4"
> >
What is Nostr? Secure Document Signing
</Typography> </Typography>
<Typography <Typography
sx={{ sx={{
@ -69,24 +69,31 @@ export const LandingPage = () => {
}} }}
variant="body1" variant="body1"
> >
Nostr is a decentralised messaging protocol where YOU own your SIGit is an open-source and self-hostable solution for secure
identity. To get started, you must have an existing{' '} document signing and verification. Code is MIT licenced and
available at{' '}
<a <a
className="bold-link" className="bold-link"
target="_blank" target="_blank"
href="https://nostr.com/" href="https://git.sigit.io/sig/it"
> >
Nostr account https://git.sigit.io/sig/it
</a> </a>
. .
<br /> <br />
<br /> <br />
No email required - all notifications are made using the nQuiz SIGit lets you Create, Sign and Verify signature packs from any
relay. device with a browser.
<br /> <br />
<br /> <br />
If you no longer wish to hear from us, simply remove Unlike other solutions, SIGit is totally private - files are
relay.nquiz.io from your list of relays. encrypted locally, and valid packs can only be exported by named
recipients.
<br />
<br />
IMPORTANT - please note that SIGit is currently ALPHA software and
should only be used for testing purposes until we have finalised
the signature / verification process.
</Typography> </Typography>
</Box> </Box>
</Box> </Box>

50
src/pages/login/index.tsx
View File

@ -2,7 +2,7 @@ import { Box, Button, TextField, Typography } from '@mui/material'
import { getPublicKey, nip19 } from 'nostr-tools' import { getPublicKey, nip19 } from 'nostr-tools'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom' import { useNavigate, useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
import { import {
@ -18,10 +18,12 @@ import {
} from '../../store/actions' } from '../../store/actions'
import { LoginMethods } from '../../store/auth/types' import { LoginMethods } from '../../store/auth/types'
import { Dispatch } from '../../store/store' import { Dispatch } from '../../store/store'
import { pubToHex, queryNip05 } from '../../utils' import { npubToHex, queryNip05 } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
export const Login = () => { export const Login = () => {
const [searchParams] = useSearchParams()
const dispatch: Dispatch = useDispatch() const dispatch: Dispatch = useDispatch()
const navigate = useNavigate() const navigate = useNavigate()
@ -43,6 +45,29 @@ export const Login = () => {
}, 500) }, 500)
}, []) }, [])
/**
* Call login function when enter is pressed
*/
const handleInputKeyDown = (event: any) => {
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
event.preventDefault()
login()
}
}
const navigateAfterLogin = (path: string) => {
const callbackPath = searchParams.get('callbackPath')
if (callbackPath) {
// base64 decoded path
const path = atob(callbackPath)
navigate(path)
return
}
navigate(path)
}
const loginWithExtension = async () => { const loginWithExtension = async () => {
setIsLoading(true) setIsLoading(true)
setLoadingSpinnerDesc('Capturing pubkey from nostr extension') setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
@ -54,9 +79,9 @@ export const Login = () => {
setLoadingSpinnerDesc('Authenticating and finding metadata') setLoadingSpinnerDesc('Authenticating and finding metadata')
const redirectPath = const redirectPath =
await authController.authenticateAndFindMetadata(pubkey) await authController.authAndGetMetadataAndRelaysMap(pubkey)
navigate(redirectPath) navigateAfterLogin(redirectPath)
}) })
.catch((err) => { .catch((err) => {
toast.error('Error capturing public key from nostr extension: ' + err) toast.error('Error capturing public key from nostr extension: ' + err)
@ -93,13 +118,13 @@ export const Login = () => {
setLoadingSpinnerDesc('Authenticating and finding metadata') setLoadingSpinnerDesc('Authenticating and finding metadata')
const redirectPath = await authController const redirectPath = await authController
.authenticateAndFindMetadata(publickey) .authAndGetMetadataAndRelaysMap(publickey)
.catch((err) => { .catch((err) => {
toast.error('Error occurred in authentication: ' + err) toast.error('Error occurred in authentication: ' + err)
return null return null
}) })
if (redirectPath) navigate(redirectPath) if (redirectPath) navigateAfterLogin(redirectPath)
setIsLoading(false) setIsLoading(false)
setLoadingSpinnerDesc('') setLoadingSpinnerDesc('')
@ -188,13 +213,13 @@ export const Login = () => {
setLoadingSpinnerDesc('Authenticating and finding metadata') setLoadingSpinnerDesc('Authenticating and finding metadata')
const redirectPath = await authController const redirectPath = await authController
.authenticateAndFindMetadata(pubkey!) .authAndGetMetadataAndRelaysMap(pubkey!)
.catch((err) => { .catch((err) => {
toast.error('Error occurred in authentication: ' + err) toast.error('Error occurred in authentication: ' + err)
return null return null
}) })
if (redirectPath) navigate(redirectPath) if (redirectPath) navigateAfterLogin(redirectPath)
}) })
.catch((err) => { .catch((err) => {
toast.error( toast.error(
@ -213,7 +238,7 @@ export const Login = () => {
const keyEndIndex = inputValue.indexOf('?relay=') const keyEndIndex = inputValue.indexOf('?relay=')
const key = inputValue.substring(keyStartIndex, keyEndIndex) const key = inputValue.substring(keyStartIndex, keyEndIndex)
const pubkey = await pubToHex(key) const pubkey = npubToHex(key)
if (!pubkey) { if (!pubkey) {
toast.error('Invalid pubkey in bunker connection string.') toast.error('Invalid pubkey in bunker connection string.')
@ -248,13 +273,13 @@ export const Login = () => {
setLoadingSpinnerDesc('Authenticating and finding metadata') setLoadingSpinnerDesc('Authenticating and finding metadata')
const redirectPath = await authController const redirectPath = await authController
.authenticateAndFindMetadata(pubkey!) .authAndGetMetadataAndRelaysMap(pubkey!)
.catch((err) => { .catch((err) => {
toast.error('Error occurred in authentication: ' + err) toast.error('Error occurred in authentication: ' + err)
return null return null
}) })
if (redirectPath) navigate(redirectPath) if (redirectPath) navigateAfterLogin(redirectPath)
}) })
.catch((err) => { .catch((err) => {
toast.error( toast.error(
@ -303,7 +328,8 @@ export const Login = () => {
<div className={styles.loginPage}> <div className={styles.loginPage}>
<Typography variant="h4">Welcome to Sigit</Typography> <Typography variant="h4">Welcome to Sigit</Typography>
<TextField <TextField
label="nip05 / npub / nsec / bunker connx string" onKeyDown={handleInputKeyDown}
label="nip05 login / nip46 bunker string / nsec"
value={inputValue} value={inputValue}
onChange={(e) => setInputValue(e.target.value)} onChange={(e) => setInputValue(e.target.value)}
sx={{ width: '100%', mt: 2 }} sx={{ width: '100%', mt: 2 }}

65
src/pages/profile/index.tsx
View File

@ -1,6 +1,5 @@
import ContentCopyIcon from '@mui/icons-material/ContentCopy' import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import { import {
CircularProgress,
IconButton, IconButton,
InputProps, InputProps,
List, List,
@ -12,10 +11,9 @@ import {
useTheme useTheme
} from '@mui/material' } from '@mui/material'
import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools' import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useRef, useState } from 'react'
import { Link, useParams } from 'react-router-dom' import { Link, useParams } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
import { MetadataController, NostrController } from '../../controllers' import { MetadataController, NostrController } from '../../controllers'
import { NostrJoiningBlock, ProfileMetadata } from '../../types' import { NostrJoiningBlock, ProfileMetadata } from '../../types'
import styles from './style.module.scss' import styles from './style.module.scss'
@ -27,6 +25,7 @@ import { setMetadataEvent } from '../../store/actions'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
import { LoginMethods } from '../../store/auth/types' import { LoginMethods } from '../../store/auth/types'
import { SmartToy } from '@mui/icons-material' import { SmartToy } from '@mui/icons-material'
import { getRoboHashPicture } from '../../utils'
export const ProfilePage = () => { export const ProfilePage = () => {
const theme = useTheme() const theme = useTheme()
@ -43,16 +42,18 @@ export const ProfilePage = () => {
useState<NostrJoiningBlock | null>(null) useState<NostrJoiningBlock | null>(null)
const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>() const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false) const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
const [avatarLoading, setAvatarLoading] = useState(false)
const metadataState = useSelector((state: State) => state.metadata) const metadataState = useSelector((state: State) => state.metadata)
const keys = useSelector((state: State) => state.auth?.keyPair) const keys = useSelector((state: State) => state.auth?.keyPair)
const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth) const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth)
const userRobotImage = useSelector((state: State) => state.userRobotImage)
const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false) const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const [loadingSpinnerDesc] = useState('Fetching metadata') const [loadingSpinnerDesc] = useState('Fetching metadata')
const robotSet = useRef(1)
useEffect(() => { useEffect(() => {
if (npub) { if (npub) {
try { try {
@ -211,22 +212,21 @@ export const ProfilePage = () => {
setSavingProfileMetadata(false) setSavingProfileMetadata(false)
} }
/**
* Called by clicking on the robot icon inside Picture URL input
* On every click, next robohash set will be generated.
* There are 5 sets at the moment, after 5th set function will start over from set 1.
*/
const generateRobotAvatar = () => { const generateRobotAvatar = () => {
setAvatarLoading(true) robotSet.current++
if (robotSet.current > 5) robotSet.current = 1
const robotAvatarLink = `https://robohash.org/${npub}.png?set=set3` const robotAvatarLink = getRoboHashPicture(npub!, robotSet.current)
setProfileMetadata((prev) => ({ setProfileMetadata((prev) => ({
...prev, ...prev,
picture: '' picture: robotAvatarLink
})) }))
setTimeout(() => {
setProfileMetadata((prev) => ({
...prev,
picture: robotAvatarLink
}))
})
} }
/** /**
@ -234,21 +234,31 @@ export const ProfilePage = () => {
* @returns robohash generate button, loading spinner or no button * @returns robohash generate button, loading spinner or no button
*/ */
const robohashButton = () => { const robohashButton = () => {
if (profileMetadata?.picture?.includes('robohash')) return null
return ( return (
<Tooltip title="Generate a robohash avatar"> <Tooltip title="Generate a robohash avatar">
{avatarLoading ? ( <IconButton onClick={generateRobotAvatar}>
<CircularProgress style={{ padding: 8 }} size={22} /> <SmartToy />
) : ( </IconButton>
<IconButton onClick={generateRobotAvatar}>
<SmartToy />
</IconButton>
)}
</Tooltip> </Tooltip>
) )
} }
/**
* Handles the logic for Image URL.
* If no picture in kind 0 found - use robohash avatar
*
* @returns robohash image url
*/
const getProfileImage = (metadata: ProfileMetadata) => {
if (!isUsersOwnProfile) {
return metadata.picture || getRoboHashPicture(npub!)
}
// userRobotImage is used only when visiting own profile
// while kind 0 picture is not set
return metadata.picture || userRobotImage || getRoboHashPicture(npub!)
}
return ( return (
<> <>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />} {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
@ -282,13 +292,10 @@ export const ProfilePage = () => {
> >
<img <img
onError={(event: any) => { onError={(event: any) => {
event.target.src = placeholderAvatar event.target.src = getRoboHashPicture(npub!)
}}
onLoad={() => {
setAvatarLoading(false)
}} }}
className={styles.img} className={styles.img}
src={profileMetadata.picture || placeholderAvatar} src={getProfileImage(profileMetadata)}
alt="Profile Image" alt="Profile Image"
/> />
@ -309,7 +316,7 @@ export const ProfilePage = () => {
</ListItem> </ListItem>
{editItem('picture', 'Picture URL', undefined, undefined, { {editItem('picture', 'Picture URL', undefined, undefined, {
endAdornment: robohashButton() endAdornment: isUsersOwnProfile ? robohashButton() : undefined
})} })}
{editItem('name', 'Username')} {editItem('name', 'Username')}

234
src/pages/relays/index.tsx Normal file
View File

@ -0,0 +1,234 @@
import { useEffect, useState } from 'react'
import { Box, List, ListItem, TextField } from '@mui/material'
import RouterIcon from '@mui/icons-material/Router'
import styles from './style.module.scss'
import Switch from '@mui/material/Switch'
import ListItemText from '@mui/material/ListItemText'
import Divider from '@mui/material/Divider'
import { NostrController } from '../../controllers'
import { RelayMap } from '../../types'
import LogoutIcon from '@mui/icons-material/Logout'
import { useAppSelector, useAppDispatch } from '../../hooks'
import { compareObjects } from '../../utils'
import { setRelayMapAction } from '../../store/actions'
import { toast } from 'react-toastify'
export const RelaysPage = () => {
const nostrController = NostrController.getInstance()
const relaysState = useAppSelector((state) => state.relays)
const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
const dispatch = useAppDispatch()
const [newRelayURI, setNewRelayURI] = useState<string>()
const [newRelayURIerror, setNewRelayURIerror] = useState<string>()
const [relayMap, setRelayMap] = useState<RelayMap | undefined>(
relaysState?.map
)
useEffect(() => {
let isMounted = false
const fetchData = async () => {
if (usersPubkey) {
isMounted = true
// call async func to fetch relay map
const newRelayMap = await nostrController.getRelayMap(usersPubkey)
// handle fetched relay map
if (isMounted) {
if (
!relaysState?.mapUpdated ||
newRelayMap.mapUpdated > relaysState?.mapUpdated
)
if (
!relaysState?.map ||
!compareObjects(relaysState.map, newRelayMap)
) {
setRelayMap(newRelayMap.map)
dispatch(setRelayMapAction(newRelayMap.map))
}
}
}
}
// Publishing relay map can take some time.
// This is why data fetch should happen only if relay map was received more than 5 minutes ago.
if (
usersPubkey &&
(!relaysState?.mapUpdated ||
Date.now() - relaysState?.mapUpdated > 5 * 60 * 1000) // 5 minutes
) {
fetchData()
}
// cleanup func
return () => {
isMounted = false
}
}, [dispatch, usersPubkey, relaysState, nostrController])
const relayRequirementWarning = () =>
toast.warning('At least one write relay is needed for SIGit to work.')
const handleLeaveRelay = async (relay: string) => {
if (relayMap) {
if (Object.keys(relayMap).length === 1) {
relayRequirementWarning()
} else {
const relayMapCopy = JSON.parse(JSON.stringify(relayMap))
// Remove relay from relay map
delete relayMapCopy[relay]
setRelayMap(relayMapCopy)
dispatch(setRelayMapAction(relayMapCopy))
if (usersPubkey) {
// Publish updated relay map.
const relayMapPublishingRes = await nostrController
.publishRelayMap(relayMapCopy, usersPubkey)
.catch((err) => handlePublishRelayMapError(err))
if (relayMapPublishingRes) toast.success(relayMapPublishingRes)
}
}
}
}
const handlePublishRelayMapError = (err: any) => {
const errorPrefix = 'Error while publishing Relay Map'
if (Array.isArray(err)) {
err.forEach((errorObj: { relay: string; error: string }) => {
toast.error(
`${errorPrefix} to ${errorObj.relay}. Error: ${errorObj.error || 'Unknown'}`
)
})
} else {
toast.error(`${errorPrefix}. Error: ${err.message || 'Unknown'}`)
}
}
const handleRelayWriteChange = async (
relay: string,
event: React.ChangeEvent<HTMLInputElement>
) => {
if (relayMap && relayMap[relay]) {
if (
!event.target.checked &&
Object.keys(relayMap).filter((relay) => relayMap[relay].write)
.length === 1
) {
relayRequirementWarning()
} else {
const relayMapCopy = JSON.parse(JSON.stringify(relayMap))
relayMapCopy[relay].write = event.target.checked
setRelayMap(relayMapCopy)
dispatch(setRelayMapAction(relayMapCopy))
if (usersPubkey) {
// Publish updated relay map
const relayMapPublishingRes = await nostrController
.publishRelayMap(relayMapCopy, usersPubkey)
.catch((err) => handlePublishRelayMapError(err))
if (relayMapPublishingRes) toast.success(relayMapPublishingRes)
}
}
}
}
const handleTextFieldChange = async () => {
// Check if new relay URI is a valid string
if (
newRelayURI &&
!/^wss:\/\/[-a-zA-Z0-9@:%._\\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}/.test(
newRelayURI
)
) {
setNewRelayURIerror(
'New relay URI is not valid. Example of valid relay URI: wss://sigit.relay.io'
)
} else if (newRelayURI) {
const relayMapCopy = JSON.parse(JSON.stringify(relayMap))
relayMapCopy[newRelayURI.trim()] = { write: true, read: true }
setRelayMap(relayMapCopy)
setNewRelayURI('')
dispatch(setRelayMapAction(relayMapCopy))
if (usersPubkey) {
// Publish updated relay map
const relayMapPublishingRes = await nostrController
.publishRelayMap(relayMapCopy, usersPubkey)
.catch((err) => handlePublishRelayMapError(err))
if (relayMapPublishingRes) toast.success(relayMapPublishingRes)
}
}
}
useEffect(() => {
// Display notification if an empty relay map has been received
if (relayMap && Object.keys(relayMap).length === 0) {
relayRequirementWarning()
}
}, [relayMap])
return (
<Box className={styles.container}>
<Box>
<TextField
label="Add new relay"
value={newRelayURI}
onBlur={() => handleTextFieldChange()}
onChange={(e) => setNewRelayURI(e.target.value)}
helperText={newRelayURIerror}
error={!!newRelayURIerror}
placeholder="wss://"
className={styles.relayURItextfield}
/>
</Box>
<Box className={styles.sectionTitle}>
<RouterIcon className={styles.sectionIcon} />
<span>YOUR RELAYS</span>
</Box>
{relayMap && (
<Box className={styles.relaysContainer}>
{Object.keys(relayMap).map((relay, i) => (
<Box className={styles.relay} key={`relay_${i}`}>
<List>
<ListItem>
<ListItemText primary={relay} />
<Box
className={styles.leaveRelayContainer}
onClick={() => handleLeaveRelay(relay)}
>
<LogoutIcon />
<span>Leave</span>
</Box>
</ListItem>
<Divider className={styles.relayDivider} />
<ListItem>
<ListItemText primary="Publish to this relay?" />
<Switch
checked={relayMap[relay].write}
onChange={(event) => handleRelayWriteChange(relay, event)}
/>
</ListItem>
</List>
</Box>
))}
</Box>
)}
</Box>
)
}

47
src/pages/relays/style.module.scss Normal file
View File

@ -0,0 +1,47 @@
@import '../../colors.scss';
.container {
margin-top: 25px;
.relayURItextfield {
width: 100%;
}
.sectionIcon {
font-size: 30px;
}
.sectionTitle {
margin-top: 35px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
gap: 5px;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
}
.relaysContainer {
display: flex;
flex-direction: column;
gap: 15px;
}
.relay {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
.relayDivider {
margin-left: 10px;
margin-right: 10px;
}
.leaveRelayContainer {
display: flex;
flex-direction: row;
gap: 10px;
cursor: pointer;
}
}
}

747
src/pages/sign/index.tsx Normal file
View File

@ -0,0 +1,747 @@
import {
Box,
Button,
List,
ListItem,
ListSubheader,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TextField,
Typography,
useTheme
} from '@mui/material'
import axios from 'axios'
import saveAs from 'file-saver'
import JSZip from 'jszip'
import _ from 'lodash'
import { MuiFileInput } from 'mui-file-input'
import { EventTemplate } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify'
import { LoadingSpinner } from '../../components/LoadingSpinner'
import { UserComponent } from '../../components/username'
import { MetadataController, NostrController } from '../../controllers'
import { appPrivateRoutes } from '../../routes'
import { State } from '../../store/rootReducer'
import { Meta, ProfileMetadata, User, UserRole } from '../../types'
import {
decryptArrayBuffer,
encryptArrayBuffer,
generateEncryptionKey,
getHash,
getRoboHashPicture,
hexToNpub,
parseJson,
npubToHex,
readContentOfZipEntry,
sendDM,
shorten,
signEventForMetaFile,
uploadToFileStorage
} from '../../utils'
import styles from './style.module.scss'
enum SignedStatus {
Fully_Signed,
User_Is_Next_Signer,
User_Is_Not_Next_Signer
}
export const SignPage = () => {
const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams()
const [displayInput, setDisplayInput] = useState(false)
const [selectedFile, setSelectedFile] = useState<File | null>(null)
const [encryptionKey, setEncryptionKey] = useState('')
const [zip, setZip] = useState<JSZip>()
const [isLoading, setIsLoading] = useState(true)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
const [meta, setMeta] = useState<Meta | null>(null)
const [signedStatus, setSignedStatus] = useState<SignedStatus>()
const [nextSinger, setNextSinger] = useState<string>()
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
const [authUrl, setAuthUrl] = useState<string>()
const nostrController = NostrController.getInstance()
useEffect(() => {
if (meta) {
setDisplayInput(false)
// get list of users who have signed
const signedBy = Object.keys(meta.signedEvents)
if (meta.signers.length > 0) {
// check if all signers have signed then its fully signed
if (meta.signers.every((signer) => signedBy.includes(signer))) {
setSignedStatus(SignedStatus.Fully_Signed)
} else {
for (const signer of meta.signers) {
if (!signedBy.includes(signer)) {
// signers in meta.json are in npub1 format
// so, convert it to hex before setting to nextSigner
setNextSinger(npubToHex(signer)!)
const usersNpub = hexToNpub(usersPubkey!)
if (signer === usersNpub) {
// logged in user is the next signer
setSignedStatus(SignedStatus.User_Is_Next_Signer)
} else {
setSignedStatus(SignedStatus.User_Is_Not_Next_Signer)
}
break
}
}
}
} else {
// there's no signer just viewers. So its fully signed
setSignedStatus(SignedStatus.Fully_Signed)
}
}
}, [meta, usersPubkey])
useEffect(() => {
const fileUrl = searchParams.get('file')
const key = searchParams.get('key')
if (fileUrl && key) {
setIsLoading(true)
setLoadingSpinnerDesc('Fetching file from file server')
axios
.get(fileUrl, {
responseType: 'arraybuffer'
})
.then((res) => {
const fileName = fileUrl.split('/').pop()
const file = new File([res.data], fileName!)
decrypt(file, decodeURIComponent(key)).then((arrayBuffer) => {
if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
})
})
.catch((err) => {
console.error(`error occurred in getting file from ${fileUrl}`, err)
toast.error(
err.message || `error occurred in getting file from ${fileUrl}`
)
})
.finally(() => {
setIsLoading(false)
})
} else {
setIsLoading(false)
setDisplayInput(true)
}
}, [searchParams])
const decrypt = async (file: File, key: string) => {
setLoadingSpinnerDesc('Decrypting file')
const encryptedArrayBuffer = await file.arrayBuffer()
const arrayBuffer = await decryptArrayBuffer(encryptedArrayBuffer, key)
.catch((err) => {
console.log('err in decryption:>> ', err)
toast.error(err.message || 'An error occurred in decrypting file.')
return null
})
.finally(() => {
setIsLoading(false)
})
return arrayBuffer
}
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
setLoadingSpinnerDesc('Parsing zip file')
const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
console.log('err in loading zip file :>> ', err)
toast.error(err.message || 'An error occurred in loading zip file.')
return null
})
if (!zip) return
setZip(zip)
setLoadingSpinnerDesc('Parsing meta.json')
const metaFileContent = await readContentOfZipEntry(
zip,
'meta.json',
'string'
)
if (!metaFileContent) {
setIsLoading(false)
return
}
const parsedMetaJson = await parseJson<Meta>(metaFileContent).catch(
(err) => {
console.log('err in parsing the content of meta.json :>> ', err)
toast.error(
err.message || 'error occurred in parsing the content of meta.json'
)
setIsLoading(false)
return null
}
)
setMeta(parsedMetaJson)
}
const handleDecrypt = async () => {
if (!selectedFile || !encryptionKey) return
setIsLoading(true)
const arrayBuffer = await decrypt(
selectedFile,
decodeURIComponent(encryptionKey)
)
if (!arrayBuffer) return
handleDecryptedArrayBuffer(arrayBuffer)
}
const handleSign = async () => {
if (!zip || !meta) return
setIsLoading(true)
setLoadingSpinnerDesc('parsing hashes.json file')
const hashesFileContent = await readContentOfZipEntry(
zip,
'hashes.json',
'string'
)
if (!hashesFileContent) {
setIsLoading(false)
return
}
let hashes = await parseJson(hashesFileContent).catch((err) => {
console.log('err in parsing the content of hashes.json :>> ', err)
toast.error(
err.message || 'error occurred in parsing the content of hashes.json'
)
setIsLoading(false)
return null
})
if (!hashes) return
setLoadingSpinnerDesc('Generating hashes for files')
const fileHashes: { [key: string]: string } = {}
const fileNames = Object.keys(meta.fileHashes)
// generate hashes for all entries in files folder of zipArchive
// these hashes can be used to verify the originality of files
for (const fileName of fileNames) {
const filePath = `files/${fileName}`
const arrayBuffer = await readContentOfZipEntry(
zip,
filePath,
'arraybuffer'
)
if (!arrayBuffer) {
setIsLoading(false)
return
}
const hash = await getHash(arrayBuffer)
if (!hash) {
setIsLoading(false)
return
}
fileHashes[fileName] = hash
}
setLoadingSpinnerDesc('Signing nostr event')
const signedEvent = await signEventForMetaFile(
fileHashes,
nostrController,
setIsLoading
)
if (!signedEvent) return
const metaCopy = _.cloneDeep(meta)
metaCopy.signedEvents = {
...metaCopy.signedEvents,
[hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
}
const stringifiedMeta = JSON.stringify(metaCopy, null, 2)
zip.file('meta.json', stringifiedMeta)
const metaHash = await getHash(stringifiedMeta)
if (!metaHash) return
hashes = {
...hashes,
[usersPubkey!]: metaHash
}
zip.file('hashes.json', JSON.stringify(hashes, null, 2))
const arrayBuffer = await zip
.generateAsync({
type: 'arraybuffer',
compression: 'DEFLATE',
compressionOptions: {
level: 6
}
})
.catch((err) => {
console.log('err in zip:>> ', err)
setIsLoading(false)
toast.error(err.message || 'Error occurred in generating zip file')
return null
})
if (!arrayBuffer) return
const key = await generateEncryptionKey()
setLoadingSpinnerDesc('Encrypting zip file')
const encryptedArrayBuffer = await encryptArrayBuffer(arrayBuffer, key)
const blob = new Blob([encryptedArrayBuffer])
setLoadingSpinnerDesc('Uploading zip file to file storage.')
const fileUrl = await uploadToFileStorage(blob, nostrController)
.then((url) => {
toast.success('zip file uploaded to file storage')
return url
})
.catch((err) => {
console.log('err in upload:>> ', err)
setIsLoading(false)
toast.error(err.message || 'Error occurred in uploading zip file')
return null
})
if (!fileUrl) return
// check if the current user is the last signer
const usersNpub = hexToNpub(usersPubkey!)
const lastSignerIndex = meta.signers.length - 1
const signerIndex = meta.signers.indexOf(usersNpub)
const isLastSigner = signerIndex === lastSignerIndex
// if current user is the last signer, then send DMs to all signers and viewers
if (isLastSigner) {
const userSet = new Set<`npub1${string}`>()
userSet.add(meta.submittedBy)
meta.signers.forEach((signer) => {
userSet.add(signer)
})
meta.viewers.forEach((viewer) => {
userSet.add(viewer)
})
const users = Array.from(userSet)
for (const user of users) {
// todo: execute in parallel
await sendDM(
fileUrl,
key,
npubToHex(user)!,
nostrController,
false,
setAuthUrl
)
}
} else {
const nextSigner = meta.signers[signerIndex + 1]
await sendDM(
fileUrl,
key,
npubToHex(nextSigner)!,
nostrController,
false,
setAuthUrl
)
}
setIsLoading(false)
// update search params with updated file url and encryption key
setSearchParams({
file: fileUrl,
key: key
})
}
/**
*
* @returns exported.zip including signed files and meta info (about signers and viewers)
*/
const handleExport = async () => {
if (!meta || !zip || !usersPubkey) return
const usersNpub = hexToNpub(usersPubkey)
if (
!meta.signers.includes(usersNpub) &&
!meta.viewers.includes(usersNpub) &&
meta.submittedBy !== usersNpub
)
return
setIsLoading(true)
setLoadingSpinnerDesc('Signing nostr event')
const event: EventTemplate = {
kind: 1,
content: '',
created_at: Math.floor(Date.now() / 1000), // Current timestamp
tags: []
}
// Sign the event
const signedEvent = await nostrController.signEvent(event).catch((err) => {
console.error(err)
toast.error(err.message || 'Error occurred in signing nostr event')
setIsLoading(false) // Set loading state to false
return null
})
if (!signedEvent) return
const exportSignature = JSON.stringify(signedEvent, null, 2)
const stringifiedMeta = JSON.stringify(
{
...meta,
exportSignature
},
null,
2
)
zip.file('meta.json', stringifiedMeta)
const arrayBuffer = await zip
.generateAsync({
type: 'arraybuffer',
compression: 'DEFLATE',
compressionOptions: {
level: 6
}
})
.catch((err) => {
console.log('err in zip:>> ', err)
setIsLoading(false)
toast.error(err.message || 'Error occurred in generating zip file')
return null
})
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, 'exported.zip')
setIsLoading(false)
navigate(appPrivateRoutes.verify)
}
if (authUrl) {
return (
<iframe
title="Nsecbunker auth"
src={authUrl}
width="100%"
height="500px"
/>
)
}
return (
<>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Box className={styles.container}>
{displayInput && (
<>
<Typography component="label" variant="h6">
Select sigit file
</Typography>
<Box className={styles.inputBlock}>
<MuiFileInput
placeholder="Select file"
value={selectedFile}
onChange={(value) => setSelectedFile(value)}
/>
{selectedFile && (
<TextField
label="Encryption Key"
variant="outlined"
value={encryptionKey}
onChange={(e) => setEncryptionKey(e.target.value)}
/>
)}
</Box>
{selectedFile && encryptionKey && (
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleDecrypt} variant="contained">
Decrypt
</Button>
</Box>
)}
</>
)}
{meta && signedStatus === SignedStatus.Fully_Signed && (
<>
<DisplayMeta meta={meta} nextSigner={nextSinger} />
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleExport} variant="contained">
Export
</Button>
</Box>
</>
)}
{meta && signedStatus === SignedStatus.User_Is_Not_Next_Signer && (
<DisplayMeta meta={meta} nextSigner={nextSinger} />
)}
{meta && signedStatus === SignedStatus.User_Is_Next_Signer && (
<>
<DisplayMeta meta={meta} nextSigner={nextSinger} />
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleSign} variant="contained">
Sign
</Button>
</Box>
</>
)}
</Box>
</>
)
}
type DisplayMetaProps = {
meta: Meta
nextSigner?: string
}
const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
const theme = useTheme()
const textColor = theme.palette.getContrastText(
theme.palette.background.paper
)
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
{}
)
const [users, setUsers] = useState<User[]>([])
useEffect(() => {
meta.signers.forEach((signer) => {
const hexKey = npubToHex(signer)
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === hexKey) !== -1) return prev
return [
...prev,
{
pubkey: hexKey!,
role: UserRole.signer
}
]
})
})
meta.viewers.forEach((viewer) => {
const hexKey = npubToHex(viewer)
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === hexKey) !== -1) return prev
return [
...prev,
{
pubkey: hexKey!,
role: UserRole.viewer
}
]
})
})
}, [meta])
useEffect(() => {
const metadataController = new MetadataController()
const hexKeys: string[] = [
npubToHex(meta.submittedBy)!,
...users.map((user) => user.pubkey)
]
hexKeys.forEach((key) => {
if (!(key in metadata)) {
metadataController
.findMetadata(key)
.then((metadataEvent) => {
const metadataContent =
metadataController.extractProfileMetadataContent(metadataEvent)
if (metadataContent)
setMetadata((prev) => ({
...prev,
[key]: metadataContent
}))
})
.catch((err) => {
console.error(`error occurred in finding metadata for: ${key}`, err)
})
}
})
}, [users, meta.submittedBy])
return (
<List
sx={{
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader
sx={{
borderBottom: '0.5px solid',
paddingBottom: 1,
paddingTop: 1,
fontSize: '1.5rem'
}}
className={styles.subHeader}
>
Meta Info
</ListSubheader>
}
>
<ListItem
sx={{
marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Submitted By
</Typography>
{(function () {
const pubkey = npubToHex(meta.submittedBy)
const profile = metadata[pubkey!]
return (
<UserComponent
pubkey={pubkey!}
name={
profile?.display_name ||
profile?.name ||
shorten(meta.submittedBy)
}
image={metadata[meta.submittedBy]?.picture}
/>
)
})()}
</ListItem>
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Files
</Typography>
<ul>
{Object.keys(meta.fileHashes).map((file, index) => (
<li key={index} style={{ color: textColor }}>
{file}
</li>
))}
</ul>
</ListItem>
<ListItem sx={{ marginTop: 1 }}>
<Table>
<TableHead>
<TableRow>
<TableCell className={styles.tableCell}>User</TableCell>
<TableCell className={styles.tableCell}>Role</TableCell>
<TableCell>Signed Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map((user, index) => {
const userMeta = metadata[user.pubkey]
let signedStatus = '-'
if (user.role === UserRole.signer) {
// check if user has signed the document
const usersNpub = hexToNpub(user.pubkey)
if (usersNpub in meta.signedEvents) {
signedStatus = 'Signed'
}
// check if user is the next signer
else if (user.pubkey === nextSigner) {
signedStatus = 'Awaiting Signature'
}
}
return (
<TableRow key={index}>
<TableCell className={styles.tableCell}>
<UserComponent
pubkey={user.pubkey}
name={
userMeta?.display_name ||
userMeta?.name ||
shorten(hexToNpub(user.pubkey))
}
image={userMeta?.picture}
/>
</TableCell>
<TableCell className={styles.tableCell}>
{user.role}
</TableCell>
<TableCell>{signedStatus}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</ListItem>
</List>
)
}

31
src/pages/sign/style.module.scss Normal file
View File

@ -0,0 +1,31 @@
@import '../../colors.scss';
.container {
color: $text-color;
.inputBlock {
position: relative;
display: flex;
flex-direction: column;
gap: 25px;
}
.user {
display: flex;
align-items: center;
gap: 10px;
.name {
text-align: center;
cursor: pointer;
}
}
.tableCell {
border-right: 1px solid rgba(224, 224, 224, 1);
.user {
@extend .user;
}
}
}

879
src/pages/verify/index.tsx
View File

@ -4,168 +4,81 @@ import {
List, List,
ListItem, ListItem,
ListSubheader, ListSubheader,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TextField,
Typography, Typography,
useTheme useTheme
} from '@mui/material' } from '@mui/material'
import axios from 'axios'
import saveAs from 'file-saver'
import JSZip from 'jszip' import JSZip from 'jszip'
import _ from 'lodash'
import { MuiFileInput } from 'mui-file-input' import { MuiFileInput } from 'mui-file-input'
import { EventTemplate } from 'nostr-tools' import { Event, verifyEvent } from 'nostr-tools'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { Link, useSearchParams } from 'react-router-dom'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
import { MetadataController, NostrController } from '../../controllers' import { UserComponent } from '../../components/username'
import { getProfileRoute } from '../../routes' import { MetadataController } from '../../controllers'
import { State } from '../../store/rootReducer' import { Meta, ProfileMetadata } from '../../types'
import { Meta, ProfileMetadata, User, UserRole } from '../../types'
import { import {
decryptArrayBuffer,
encryptArrayBuffer,
generateEncryptionKey,
getHash,
hexToNpub, hexToNpub,
npubToHex,
parseJson, parseJson,
readContentOfZipEntry, readContentOfZipEntry,
sendDM, shorten
shorten,
signEventForMetaFile,
uploadToFileStorage
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
enum SignedStatus {
Fully_Signed,
User_Is_Next_Signer,
User_Is_Not_Next_Signer
}
export const VerifyPage = () => { export const VerifyPage = () => {
const [searchParams] = useSearchParams() const theme = useTheme()
const [displayInput, setDisplayInput] = useState(false) const textColor = theme.palette.getContrastText(
theme.palette.background.paper
)
const [selectedFile, setSelectedFile] = useState<File | null>(null) const [isLoading, setIsLoading] = useState(false)
const [encryptionKey, setEncryptionKey] = useState('')
const [zip, setZip] = useState<JSZip>()
const [isLoading, setIsLoading] = useState(true)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('') const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
const [selectedFile, setSelectedFile] = useState<File | null>(null)
const [meta, setMeta] = useState<Meta | null>(null) const [meta, setMeta] = useState<Meta | null>(null)
const [signedStatus, setSignedStatus] = useState<SignedStatus>()
const [nextSinger, setNextSinger] = useState<string>() const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
{}
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey) )
const [authUrl, setAuthUrl] = useState<string>()
const nostrController = NostrController.getInstance()
useEffect(() => { useEffect(() => {
if (meta) { if (meta) {
setDisplayInput(false) const metadataController = new MetadataController()
// get list of users who have signed const users = [meta.submittedBy, ...meta.signers, ...meta.viewers]
const signedBy = Object.keys(meta.signedEvents)
if (meta.signers.length > 0) { users.forEach((user) => {
// check if all signers have signed then its fully signed const pubkey = npubToHex(user)!
if (meta.signers.every((signer) => signedBy.includes(signer))) {
setSignedStatus(SignedStatus.Fully_Signed)
} else {
for (const signer of meta.signers) {
if (!signedBy.includes(signer)) {
setNextSinger(signer)
if (signer === usersPubkey) { if (!(pubkey in metadata)) {
// logged in user is the next signer metadataController
setSignedStatus(SignedStatus.User_Is_Next_Signer) .findMetadata(pubkey)
} else { .then((metadataEvent) => {
setSignedStatus(SignedStatus.User_Is_Not_Next_Signer) const metadataContent =
} metadataController.extractProfileMetadataContent(metadataEvent)
if (metadataContent)
break setMetadata((prev) => ({
} ...prev,
} [pubkey]: metadataContent
}))
})
.catch((err) => {
console.error(
`error occurred in finding metadata for: ${user}`,
err
)
})
} }
} else {
// there's no signer just viewers. So its fully signed
setSignedStatus(SignedStatus.Fully_Signed)
}
}
}, [meta, usersPubkey])
useEffect(() => {
const fileUrl = searchParams.get('file')
const key = searchParams.get('key')
if (fileUrl && key) {
setIsLoading(true)
setLoadingSpinnerDesc('Fetching file from file server')
axios
.get(fileUrl, {
responseType: 'arraybuffer'
})
.then((res) => {
const fileName = fileUrl.split('/').pop()
const file = new File([res.data], fileName!)
decrypt(file, key).then((arrayBuffer) => {
if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
})
})
.catch((err) => {
console.error(`error occurred in getting file from ${fileUrl}`, err)
toast.error(
err.message || `error occurred in getting file from ${fileUrl}`
)
})
.finally(() => {
setIsLoading(false)
})
} else {
setIsLoading(false)
setDisplayInput(true)
}
}, [searchParams])
const decrypt = async (file: File, key: string) => {
setLoadingSpinnerDesc('Decrypting file')
const encryptedArrayBuffer = await file.arrayBuffer()
const arrayBuffer = await decryptArrayBuffer(encryptedArrayBuffer, key)
.catch((err) => {
console.log('err in decryption:>> ', err)
toast.error(err.message || 'An error occurred in decrypting file.')
return null
})
.finally(() => {
setIsLoading(false)
}) })
}
}, [meta])
return arrayBuffer const handleVerify = async () => {
} if (!selectedFile) return
setIsLoading(true)
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => { const zip = await JSZip.loadAsync(selectedFile).catch((err) => {
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
setLoadingSpinnerDesc('Parsing zip file')
const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
console.log('err in loading zip file :>> ', err) console.log('err in loading zip file :>> ', err)
toast.error(err.message || 'An error occurred in loading zip file.') toast.error(err.message || 'An error occurred in loading zip file.')
return null return null
@ -173,8 +86,6 @@ export const VerifyPage = () => {
if (!zip) return if (!zip) return
setZip(zip)
setLoadingSpinnerDesc('Parsing meta.json') setLoadingSpinnerDesc('Parsing meta.json')
const metaFileContent = await readContentOfZipEntry( const metaFileContent = await readContentOfZipEntry(
@ -200,574 +111,220 @@ export const VerifyPage = () => {
) )
setMeta(parsedMetaJson) setMeta(parsedMetaJson)
setIsLoading(false)
} }
const handleDecrypt = async () => { const displayUser = (pubkey: string, verifySignature = false) => {
if (!selectedFile || !encryptionKey) return const profile = metadata[pubkey]
setIsLoading(true) let isValidSignature = false
const arrayBuffer = await decrypt(selectedFile, encryptionKey)
if (!arrayBuffer) return if (verifySignature) {
const npub = hexToNpub(pubkey)
handleDecryptedArrayBuffer(arrayBuffer) const signedEventString = meta ? meta.signedEvents[npub] : null
} if (signedEventString) {
try {
const handleSign = async () => { const signedEvent = JSON.parse(signedEventString)
if (!zip || !meta) return isValidSignature = verifyEvent(signedEvent)
} catch (error) {
setIsLoading(true) console.error(
setLoadingSpinnerDesc('parsing hashes.json file') `An error occurred in parsing and verifying the signature event for ${pubkey}`,
error
const hashesFileContent = await readContentOfZipEntry( )
zip,
'hashes.json',
'string'
)
if (!hashesFileContent) {
setIsLoading(false)
return
}
let hashes = await parseJson(hashesFileContent).catch((err) => {
console.log('err in parsing the content of hashes.json :>> ', err)
toast.error(
err.message || 'error occurred in parsing the content of hashes.json'
)
setIsLoading(false)
return null
})
if (!hashes) return
setLoadingSpinnerDesc('Generating hashes for files')
const fileHashes: { [key: string]: string } = {}
const fileNames = Object.keys(meta.fileHashes)
// generate hashes for all entries in files folder of zipArchive
// these hashes can be used to verify the originality of files
for (const fileName of fileNames) {
const filePath = `files/${fileName}`
const arrayBuffer = await readContentOfZipEntry(
zip,
filePath,
'arraybuffer'
)
if (!arrayBuffer) {
setIsLoading(false)
return
}
const hash = await getHash(arrayBuffer)
if (!hash) {
setIsLoading(false)
return
}
fileHashes[fileName] = hash
}
setLoadingSpinnerDesc('Signing nostr event')
const signedEvent = await signEventForMetaFile(
fileHashes,
nostrController,
setIsLoading
)
if (!signedEvent) return
const metaCopy = _.cloneDeep(meta)
metaCopy.signedEvents = {
...metaCopy.signedEvents,
[signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
}
const stringifiedMeta = JSON.stringify(metaCopy, null, 2)
zip.file('meta.json', stringifiedMeta)
const metaHash = await getHash(stringifiedMeta)
if (!metaHash) return
hashes = {
...hashes,
[usersPubkey!]: metaHash
}
zip.file('hashes.json', JSON.stringify(hashes, null, 2))
const arrayBuffer = await zip
.generateAsync({
type: 'arraybuffer',
compression: 'DEFLATE',
compressionOptions: {
level: 6
} }
}) }
.catch((err) => { }
console.log('err in zip:>> ', err)
setIsLoading(false)
toast.error(err.message || 'Error occurred in generating zip file')
return null
})
if (!arrayBuffer) return return (
<>
<UserComponent
pubkey={pubkey}
name={
profile?.display_name || profile?.name || shorten(hexToNpub(pubkey))
}
image={profile?.picture}
/>
const encryptionKey = await generateEncryptionKey() {verifySignature && (
<Typography
setLoadingSpinnerDesc('Encrypting zip file') component="label"
const encryptedArrayBuffer = await encryptArrayBuffer( sx={{
arrayBuffer, color: isValidSignature
encryptionKey ? theme.palette.text.primary
: theme.palette.error.main
}}
>
({isValidSignature ? 'Valid' : 'Invalid'} Signature)
</Typography>
)}
</>
) )
}
const blob = new Blob([encryptedArrayBuffer]) const displayExportedBy = () => {
if (!meta || !meta.exportSignature) return null
setLoadingSpinnerDesc('Uploading zip file to file storage.') const exportSignatureString = meta.exportSignature
const fileUrl = await uploadToFileStorage(blob, nostrController)
.then((url) => {
toast.success('zip file uploaded to file storage')
return url
})
.catch((err) => {
console.log('err in upload:>> ', err)
setIsLoading(false)
toast.error(err.message || 'Error occurred in uploading zip file')
return null
})
if (!fileUrl) return try {
const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
// check if the current user is the last signer if (verifyEvent(exportSignatureEvent)) {
const lastSignerIndex = meta.signers.length - 1 return displayUser(exportSignatureEvent.pubkey)
const signerIndex = meta.signers.indexOf(usersPubkey!) } else {
const isLastSigner = signerIndex === lastSignerIndex toast.error(`Invalid export signature!`)
return (
// if current user is the last signer, then send DMs to all signers and viewers <Typography component="label" sx={{ color: 'red' }}>
if (isLastSigner) { Invalid export signature
const userSet = new Set<string>() </Typography>
userSet.add(meta.submittedBy)
meta.signers.forEach((signer) => {
userSet.add(signer)
})
meta.viewers.forEach((viewer) => {
userSet.add(viewer)
})
const users = Array.from(userSet)
for (const user of users) {
// todo: execute in parallel
await sendDM(
fileUrl,
encryptionKey,
user,
nostrController,
false,
setAuthUrl
) )
} }
} else { } catch (error) {
const nextSigner = meta.signers[signerIndex + 1] console.error(`An error occurred wile parsing exportSignature`, error)
await sendDM(
fileUrl,
encryptionKey,
nextSigner,
nostrController,
false,
setAuthUrl
)
}
setIsLoading(false)
}
const handleExport = async () => {
if (!meta || !zip || !usersPubkey) return
if (
!meta.signers.includes(usersPubkey) &&
!meta.viewers.includes(usersPubkey) &&
meta.submittedBy !== usersPubkey
)
return
setIsLoading(true)
setLoadingSpinnerDesc('Signing nostr event')
const event: EventTemplate = {
kind: 1,
content: '',
created_at: Math.floor(Date.now() / 1000), // Current timestamp
tags: []
}
// Sign the event
const signedEvent = await nostrController.signEvent(event).catch((err) => {
console.error(err)
toast.error(err.message || 'Error occurred in signing nostr event')
setIsLoading(false) // Set loading state to false
return null return null
}) }
if (!signedEvent) return
const exportSignature = JSON.stringify(signedEvent, null, 2)
const stringifiedMeta = JSON.stringify(
{
...meta,
exportSignature
},
null,
2
)
zip.file('meta.json', stringifiedMeta)
const arrayBuffer = await zip
.generateAsync({
type: 'arraybuffer',
compression: 'DEFLATE',
compressionOptions: {
level: 6
}
})
.catch((err) => {
console.log('err in zip:>> ', err)
setIsLoading(false)
toast.error(err.message || 'Error occurred in generating zip file')
return null
})
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, 'exported.zip')
setIsLoading(false)
}
if (authUrl) {
return (
<iframe
title="Nsecbunker auth"
src={authUrl}
width="100%"
height="500px"
/>
)
} }
return ( return (
<> <>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />} {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Box className={styles.container}> <Box className={styles.container}>
{displayInput && ( {!meta && (
<> <>
<Typography component="label" variant="h6"> <Typography component="label" variant="h6">
Select sigit file Select exported zip file
</Typography> </Typography>
<Box className={styles.inputBlock}> <MuiFileInput
<MuiFileInput placeholder="Select file"
placeholder="Select file" value={selectedFile}
value={selectedFile} onChange={(value) => setSelectedFile(value)}
onChange={(value) => setSelectedFile(value)} InputProps={{
InputProps={{ inputProps: {
inputProps: { accept: '.zip'
accept: '.zip' }
} }}
}} />
/>
{selectedFile && ( {selectedFile && (
<TextField
label="Encryption Key"
variant="outlined"
value={encryptionKey}
onChange={(e) => setEncryptionKey(e.target.value)}
/>
)}
</Box>
{selectedFile && encryptionKey && (
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}> <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
<Button onClick={handleDecrypt} variant="contained"> <Button onClick={handleVerify} variant="contained">
Decrypt Verify
</Button> </Button>
</Box> </Box>
)} )}
</> </>
)} )}
{meta && signedStatus === SignedStatus.Fully_Signed && ( {meta && (
<> <>
<DisplayMeta meta={meta} nextSigner={nextSinger} /> <List
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}> sx={{
<Button onClick={handleExport} variant="contained"> bgcolor: 'background.paper',
Export marginTop: 2
</Button> }}
</Box> subheader={
</> <ListSubheader className={styles.subHeader}>
)} Meta Info
</ListSubheader>
}
>
<ListItem
sx={{
marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Submitted By
</Typography>
{displayUser(npubToHex(meta.submittedBy)!)}
</ListItem>
{meta && signedStatus === SignedStatus.User_Is_Not_Next_Signer && ( <ListItem
<DisplayMeta meta={meta} nextSigner={nextSinger} /> sx={{
)} marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Exported By
</Typography>
{displayExportedBy()}
</ListItem>
{meta && signedStatus === SignedStatus.User_Is_Next_Signer && ( {meta.signers.length > 0 && (
<> <ListItem
<DisplayMeta meta={meta} nextSigner={nextSinger} /> sx={{
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}> marginTop: 1,
<Button onClick={handleSign} variant="contained"> flexDirection: 'column',
Sign alignItems: 'flex-start'
</Button> }}
</Box> >
<Typography variant="h6" sx={{ color: textColor }}>
Signers
</Typography>
<ul className={styles.usersList}>
{meta.signers.map((signer) => (
<li
key={signer}
style={{
color: textColor,
display: 'flex',
alignItems: 'center',
gap: '15px'
}}
>
{displayUser(npubToHex(signer)!, true)}
</li>
))}
</ul>
</ListItem>
)}
{meta.viewers.length > 0 && (
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Viewers
</Typography>
<ul className={styles.usersList}>
{meta.viewers.map((viewer) => (
<li key={viewer} style={{ color: textColor }}>
{displayUser(npubToHex(viewer)!)}
</li>
))}
</ul>
</ListItem>
)}
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Files
</Typography>
<ul>
{Object.keys(meta.fileHashes).map((file, index) => (
<li key={index} style={{ color: textColor }}>
{file}
</li>
))}
</ul>
</ListItem>
</List>
</> </>
)} )}
</Box> </Box>
</> </>
) )
} }
type DisplayMetaProps = {
meta: Meta
nextSigner?: string
}
const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
const theme = useTheme()
const textColor = theme.palette.getContrastText(
theme.palette.background.paper
)
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
{}
)
const [users, setUsers] = useState<User[]>([])
useEffect(() => {
meta.signers.forEach((signer) => {
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === signer) !== -1) return prev
return [
...prev,
{
pubkey: signer,
role: UserRole.signer
}
]
})
})
meta.viewers.forEach((viewer) => {
setUsers((prev) => {
if (prev.findIndex((user) => user.pubkey === viewer) !== -1) return prev
return [
...prev,
{
pubkey: viewer,
role: UserRole.viewer
}
]
})
})
}, [meta])
useEffect(() => {
const metadataController = new MetadataController()
metadataController
.findMetadata(meta.submittedBy)
.then((metadataEvent) => {
const metadataContent =
metadataController.extractProfileMetadataContent(metadataEvent)
if (metadataContent)
setMetadata((prev) => ({
...prev,
[meta.submittedBy]: metadataContent
}))
})
.catch((err) => {
console.error(
`error occurred in finding metadata for: ${meta.submittedBy}`,
err
)
})
users.forEach((user) => {
if (!(user.pubkey in metadata)) {
metadataController
.findMetadata(user.pubkey)
.then((metadataEvent) => {
const metadataContent =
metadataController.extractProfileMetadataContent(metadataEvent)
if (metadataContent)
setMetadata((prev) => ({
...prev,
[user.pubkey]: metadataContent
}))
})
.catch((err) => {
console.error(
`error occurred in finding metadata for: ${user.pubkey}`,
err
)
})
}
})
}, [users, meta.submittedBy])
const imageLoadError = (event: any) => {
event.target.src = placeholderAvatar
}
const getRoboImageUrl = (pubkey: string) => {
const npub = hexToNpub(pubkey)
return `https://robohash.org/${npub}.png?set=set3`
}
return (
<List
sx={{
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader
sx={{
borderBottom: '0.5px solid',
paddingBottom: 1,
paddingTop: 1,
fontSize: '1.5rem'
}}
className={styles.subHeader}
>
Meta Info
</ListSubheader>
}
>
<ListItem
sx={{
marginTop: 1,
gap: '15px'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Submitted By
</Typography>
<Box className={styles.user}>
<img
onError={imageLoadError}
src={
metadata[meta.submittedBy]?.picture ||
getRoboImageUrl(meta.submittedBy)
}
alt="Profile Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${meta.submittedBy.substring(0, 6)}`
}}
/>
<Link to={getProfileRoute(meta.submittedBy)}>
<Typography component="label" className={styles.name}>
{metadata[meta.submittedBy]?.display_name ||
metadata[meta.submittedBy]?.name ||
shorten(hexToNpub(meta.submittedBy))}
</Typography>
</Link>
</Box>
</ListItem>
<ListItem
sx={{
marginTop: 1,
flexDirection: 'column',
alignItems: 'flex-start'
}}
>
<Typography variant="h6" sx={{ color: textColor }}>
Files
</Typography>
<ul>
{Object.keys(meta.fileHashes).map((file, index) => (
<li key={index} style={{ color: textColor }}>
{file}
</li>
))}
</ul>
</ListItem>
<ListItem sx={{ marginTop: 1 }}>
<Table>
<TableHead>
<TableRow>
<TableCell className={styles.tableCell}>User</TableCell>
<TableCell className={styles.tableCell}>Role</TableCell>
<TableCell>Signed Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.map((user, index) => {
const userMeta = metadata[user.pubkey]
const npub = hexToNpub(user.pubkey)
const roboUrl = `https://robohash.org/${npub}.png?set=set3`
let signedStatus = '-'
if (user.role === UserRole.signer) {
// check if user has signed the document
if (user.pubkey in meta.signedEvents) {
signedStatus = 'Signed'
}
// check if user is the next signer
else if (user.pubkey === nextSigner) {
signedStatus = 'Awaiting Signature'
}
}
return (
<TableRow key={index}>
<TableCell className={styles.tableCell}>
<Box className={styles.user}>
<img
onError={imageLoadError}
src={userMeta?.picture || roboUrl}
alt="Profile Image"
className="profile-image"
style={{
borderWidth: '3px',
borderStyle: 'solid',
borderColor: `#${user.pubkey.substring(0, 6)}`
}}
/>
<Link to={getProfileRoute(user.pubkey)}>
<Typography component="label" className={styles.name}>
{userMeta?.display_name ||
userMeta?.name ||
shorten(npub)}
</Typography>
</Link>
</Box>
</TableCell>
<TableCell className={styles.tableCell}>
{user.role}
</TableCell>
<TableCell>{signedStatus}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</ListItem>
</List>
)
}

14
src/pages/verify/style.module.scss
View File

@ -2,12 +2,20 @@
.container { .container {
color: $text-color; color: $text-color;
display: flex;
flex-direction: column;
.inputBlock { .subHeader {
position: relative; border-bottom: 0.5px solid;
font-size: 1.5rem;
}
.usersList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 25px; gap: 10px;
list-style: none;
margin-top: 10px;
} }
.user { .user {

18
src/routes/index.tsx
View File

@ -4,12 +4,16 @@ import { LandingPage } from '../pages/landing/LandingPage'
import { Login } from '../pages/login' import { Login } from '../pages/login'
import { ProfilePage } from '../pages/profile' import { ProfilePage } from '../pages/profile'
import { hexToNpub } from '../utils' import { hexToNpub } from '../utils'
import { RelaysPage } from '../pages/relays'
import { SignPage } from '../pages/sign'
import { VerifyPage } from '../pages/verify' import { VerifyPage } from '../pages/verify'
export const appPrivateRoutes = { export const appPrivateRoutes = {
homePage: '/', homePage: '/',
create: '/create', create: '/create',
verify: '/verify' sign: '/sign',
verify: '/verify',
relays: '/relays'
} }
export const appPublicRoutes = { export const appPublicRoutes = {
@ -48,8 +52,20 @@ export const privateRoutes = [
path: appPrivateRoutes.create, path: appPrivateRoutes.create,
element: <CreatePage /> element: <CreatePage />
}, },
{
path: appPrivateRoutes.relays,
element: <RelaysPage />
},
{
path: appPrivateRoutes.sign,
element: <SignPage />
},
{ {
path: appPrivateRoutes.verify, path: appPrivateRoutes.verify,
element: <VerifyPage /> element: <VerifyPage />
},
{
path: appPrivateRoutes.relays,
element: <RelaysPage />
} }
] ]

6
src/store/actionTypes.ts
View File

@ -7,3 +7,9 @@ export const UPDATE_NSECBUNKER_PUBKEY = 'UPDATE_NSECBUNKER_PUBKEY'
export const UPDATE_NSECBUNKER_RELAYS = 'UPDATE_NSECBUNKER_RELAYS' export const UPDATE_NSECBUNKER_RELAYS = 'UPDATE_NSECBUNKER_RELAYS'
export const SET_METADATA_EVENT = 'SET_METADATA_EVENT' export const SET_METADATA_EVENT = 'SET_METADATA_EVENT'
export const SET_RELAY_MAP = 'SET_RELAY_MAP'
export const SET_USER_ROBOT_IMAGE = 'SET_USER_ROBOT_IMAGE'
export const SET_RELAY_MAP = 'SET_RELAY_MAP'

1
src/store/actions.ts
View File

@ -3,6 +3,7 @@ import { State } from './rootReducer'
export * from './auth/action' export * from './auth/action'
export * from './metadata/action' export * from './metadata/action'
export * from './relays/action'
export const restoreState = (payload: State) => { export const restoreState = (payload: State) => {
return { return {

8
src/store/relays/action.ts Normal file
View File

@ -0,0 +1,8 @@
import * as ActionTypes from '../actionTypes'
import { SetRelayMapAction } from './types'
import { RelayMap } from '../../types'
export const setRelayMapAction = (payload: RelayMap): SetRelayMapAction => ({
type: ActionTypes.SET_RELAY_MAP,
payload
})

22
src/store/relays/reducer.ts Normal file
View File

@ -0,0 +1,22 @@
import * as ActionTypes from '../actionTypes'
import { RelaysDispatchTypes, RelaysState } from './types'
const initialState: RelaysState | null = null
const reducer = (
state = initialState,
action: RelaysDispatchTypes
): RelaysState | null => {
switch (action.type) {
case ActionTypes.SET_RELAY_MAP:
return { map: action.payload, mapUpdated: Date.now() }
case ActionTypes.RESTORE_STATE:
return action.payload.relays
default:
return state
}
}
export default reducer

12
src/store/relays/types.ts Normal file
View File

@ -0,0 +1,12 @@
import * as ActionTypes from '../actionTypes'
import { RestoreState } from '../actions'
import { RelayMap } from '../../types'
export type RelaysState = { map: RelayMap; mapUpdated: number }
export interface SetRelayMapAction {
type: typeof ActionTypes.SET_RELAY_MAP
payload: RelayMap
}
export type RelaysDispatchTypes = SetRelayMapAction | RestoreState

9
src/store/rootReducer.ts
View File

@ -3,13 +3,20 @@ import { combineReducers } from 'redux'
import authReducer from './auth/reducer' import authReducer from './auth/reducer'
import { AuthState } from './auth/types' import { AuthState } from './auth/types'
import metadataReducer from './metadata/reducer' import metadataReducer from './metadata/reducer'
import userRobotImageReducer from './userRobotImage/reducer'
import { RelaysState } from './relays/types'
import relaysReducer from './relays/reducer'
export interface State { export interface State {
auth: AuthState auth: AuthState
relays: RelaysState
metadata?: Event metadata?: Event
userRobotImage?: string
} }
export default combineReducers({ export default combineReducers({
auth: authReducer, auth: authReducer,
metadata: metadataReducer metadata: metadataReducer,
relays: relaysReducer,
userRobotImage: userRobotImageReducer
}) })

5
src/store/store.ts
View File

@ -1,8 +1,11 @@
import { configureStore } from '@reduxjs/toolkit' import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './rootReducer' import rootReducer from './rootReducer'
const store = configureStore({ reducer: rootReducer }) const store = configureStore({
reducer: rootReducer
})
export default store export default store
export type Dispatch = typeof store.dispatch export type Dispatch = typeof store.dispatch
export type RootState = ReturnType<typeof store.getState>

9
src/store/userRobotImage/action.ts Normal file
View File

@ -0,0 +1,9 @@
import * as ActionTypes from '../actionTypes'
import { SetUserRobotImage } from './types'
export const setUserRobotImage = (
payload: string | null
): SetUserRobotImage => ({
type: ActionTypes.SET_USER_ROBOT_IMAGE,
payload
})

22
src/store/userRobotImage/reducer.ts Normal file
View File

@ -0,0 +1,22 @@
import * as ActionTypes from '../actionTypes'
import { MetadataDispatchTypes } from './types'
const initialState: string | null = null
const reducer = (
state = initialState,
action: MetadataDispatchTypes
): string | null | undefined => {
switch (action.type) {
case ActionTypes.SET_USER_ROBOT_IMAGE:
return action.payload
case ActionTypes.RESTORE_STATE:
return action.payload.userRobotImage
default:
return state
}
}
export default reducer

9
src/store/userRobotImage/types.ts Normal file
View File

@ -0,0 +1,9 @@
import * as ActionTypes from '../actionTypes'
import { RestoreState } from '../actions'
export interface SetUserRobotImage {
type: typeof ActionTypes.SET_USER_ROBOT_IMAGE
payload: string | null
}
export type MetadataDispatchTypes = SetUserRobotImage | RestoreState

9
src/types/core.ts
View File

@ -9,9 +9,10 @@ export interface User {
} }
export interface Meta { export interface Meta {
signers: string[] signers: `npub1${string}`[]
viewers: string[] viewers: `npub1${string}`[]
fileHashes: { [key: string]: string } fileHashes: { [key: string]: string }
submittedBy: string submittedBy: `npub1${string}`
signedEvents: { [key: string]: string } signedEvents: { [key: `npub1${string}`]: string }
exportSignature?: string
} }

7
src/types/nostr.ts
View File

@ -17,3 +17,10 @@ export interface NostrJoiningBlock {
block: number block: number
encodedEventPointer: string encodedEventPointer: string
} }
export type RelayMap = {
[key: string]: {
read: boolean
write: boolean
}
}

1
src/utils/index.ts
View File

@ -5,3 +5,4 @@ export * from './misc'
export * from './nostr' export * from './nostr'
export * from './string' export * from './string'
export * from './zip' export * from './zip'
export * from './utils'

4
src/utils/localStorage.ts
View File

@ -22,6 +22,10 @@ export const loadState = (): State | undefined => {
} }
} }
export const clearState = () => {
localStorage.removeItem('state')
}
export const saveNsecBunkerDelegatedKey = (privateKey: string) => { export const saveNsecBunkerDelegatedKey = (privateKey: string) => {
localStorage.setItem('nsecbunker-delegated-key', privateKey) localStorage.setItem('nsecbunker-delegated-key', privateKey)
} }

4
src/utils/misc.ts
View File

@ -76,12 +76,12 @@ export const sendDM = async (
: 'You have received a signed document.' : 'You have received a signed document.'
const decryptionUrl = `${window.location.origin}/#${ const decryptionUrl = `${window.location.origin}/#${
appPrivateRoutes.verify appPrivateRoutes.sign
}?file=${encodeURIComponent(fileUrl)}&key=${encodeURIComponent( }?file=${encodeURIComponent(fileUrl)}&key=${encodeURIComponent(
encryptionKey encryptionKey
)}` )}`
const content = `${initialLine}\n\n${decryptionUrl}\n\nDirect download${fileUrl}` const content = `${initialLine}\n\n${decryptionUrl}`
// Set up event listener for authentication event // Set up event listener for authentication event
nostrController.on('nsecbunker-auth', (url) => { nostrController.on('nsecbunker-auth', (url) => {

27
src/utils/nostr.ts
View File

@ -17,21 +17,21 @@ const validateHex = (hexKey: string) => {
* @param pubKey in NPUB, HEX format * @param pubKey in NPUB, HEX format
* @returns HEX format * @returns HEX format
*/ */
export const pubToHex = async (pubKey: string): Promise<string | null> => { export const npubToHex = (pubKey: string): string | null => {
// If key is NPUB // If key is NPUB
if (pubKey.startsWith('npub')) { if (pubKey.startsWith('npub1')) {
try { try {
return nip19.decode(pubKey).data as string return nip19.decode(pubKey).data as string
} catch (error) { } catch (error) {
return Promise.resolve(null) return null
} }
} }
// valid hex key // valid hex key
if (validateHex(pubKey)) return Promise.resolve(pubKey) if (validateHex(pubKey)) return pubKey
// Not a valid hex key // Not a valid hex key
return Promise.resolve(null) return null
} }
/** /**
@ -56,8 +56,8 @@ export const nsecToHex = (nsec: string): string | null => {
return null return null
} }
export const hexToNpub = (hexPubkey: string | undefined): string => { export const hexToNpub = (hexPubkey: string): `npub1${string}` => {
if (!hexPubkey) return 'n/a' if (hexPubkey.startsWith('npub1')) return hexPubkey as `npub1${string}`
return nip19.npubEncode(hexPubkey) return nip19.npubEncode(hexPubkey)
} }
@ -138,3 +138,16 @@ export const base64DecodeAuthToken = (authToken: string): SignedEvent => {
throw new Error('An error occurred in JSON.parse of the auth token') throw new Error('An error occurred in JSON.parse of the auth token')
} }
} }
/**
* @param pubkey in hex or npub format
* @returns robohash.org url for the avatar
*/
export const getRoboHashPicture = (
pubkey?: string,
set: number = 1
): string => {
if (!pubkey) return ''
const npub = hexToNpub(pubkey)
return `https://robohash.org/${npub}.png?set=set${set}`
}

13
src/utils/utils.ts Normal file
View File

@ -0,0 +1,13 @@
export const compareObjects = (
obj1: object | null | undefined,
obj2: object | null | undefined
): boolean => {
if (Array.isArray(obj1) && Array.isArray(obj2)) {
const obj1Copy = [...obj1].sort()
const obj2Copy = [...obj2].sort()
return JSON.stringify(obj1Copy) === JSON.stringify(obj2Copy)
}
return JSON.stringify(obj1) === JSON.stringify(obj2)
}

5
src/utils/zip.ts
View File

@ -17,6 +17,11 @@ export const readContentOfZipEntry = async <T extends OutputType>(
// Get the zip entry corresponding to the specified file path // Get the zip entry corresponding to the specified file path
const zipEntry = zip.files[filePath] const zipEntry = zip.files[filePath]
if (!zipEntry) {
toast.error(`Couldn't find file in zip archive at ${filePath}`)
return null
}
// Read the content of the zip entry asynchronously // Read the content of the zip entry asynchronously
const fileContent = await zipEntry.async(outputType).catch((err) => { const fileContent = await zipEntry.async(outputType).catch((err) => {
// Handle any errors that occur during the read operation // Handle any errors that occur during the read operation