diff --git a/package.json b/package.json index 7a785244..727a7912 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@noble/secp256k1": "^1.7.0", "@reduxjs/toolkit": "^1.9.1", "bech32": "^2.0.0", diff --git a/src/index.css b/src/index.css index f5b2abf8..1ca688b4 100644 --- a/src/index.css +++ b/src/index.css @@ -39,12 +39,17 @@ code { user-select: none; background-color: #000; border: 1px solid; + display: inline-block; } .btn:hover { background-color: #333; } +.btn-sm { + padding: 5px; +} + input[type="text"], input[type="password"] { padding: 10px; border-radius: 5px; @@ -93,6 +98,7 @@ div.form-group { div.form-group > div { padding: 3px 5px; + word-break: break-word; } div.form-group > div:first-child { diff --git a/src/pages/Login.js b/src/pages/Login.js index 35b82014..7175b183 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { setPrivateKey, setPublicKey } from "../state/Login"; +import { setPrivateKey, setNip07PubKey } from "../state/Login"; import * as secp from '@noble/secp256k1'; import { bech32 } from "bech32"; import { useNavigate } from "react-router-dom"; @@ -32,12 +32,11 @@ export default function LoginPage() { async function doNip07Login() { let pubKey = await window.nostr.getPublicKey(); - dispatch(setPublicKey(pubKey)); + dispatch(setNip07PubKey(pubKey)); } function altLogins() { let nip07 = 'nostr' in window; - if (!nip07) { return null; } diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index fcc84d7d..a806d757 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -8,8 +8,8 @@ } .profile .avatar { - width: 256px; - height: 256px; + width: 128px; + height: 128px; background-size: contain; cursor: pointer; } @@ -26,4 +26,15 @@ .profile .avatar .edit:hover { opacity: 0.5; -} \ No newline at end of file +} + +@media(max-width: 720px) { + .profile { + flex-direction: column; + align-items: center; + } + .profile > div:last-child { + margin: 0; + width: 100%; + } +} diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 4bb7c54c..f58e3fda 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -8,6 +8,9 @@ import Nostrich from "../nostrich.jpg"; import useEventPublisher from "./feed/EventPublisher"; import useTimelineFeed from "./feed/TimelineFeed"; import Note from "../element/Note"; +import { bech32 } from "bech32"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faQrcode } from "@fortawesome/free-solid-svg-icons"; export default function ProfilePage() { const dispatch = useDispatch(); @@ -37,6 +40,23 @@ export default function ProfilePage() { } }, [user]); + useEffect(() => { + // some clients incorrectly set this to LNURL service, patch this + if (lud16.toLowerCase().startsWith("lnurl")) { + let decoded = bech32.decode(lud16, 1000); + let url = new TextDecoder().decode(Uint8Array.from(bech32.fromWords(decoded.words))); + if (url.startsWith("http")) { + let parsedUri = new URL(url); + // is lightning address + if (parsedUri.pathname.startsWith("/.well-known/lnurlp/")) { + let pathParts = parsedUri.pathname.split('/'); + let username = pathParts[pathParts.length - 1]; + setLud16(`${username}@${parsedUri.hostname}`); + } + } + } + }, [lud16]); + async function saveProfile() { let ev = await publisher.metadata({ name, @@ -79,7 +99,7 @@ export default function ProfilePage() {