-
setCustomAmount(parseInt(e.target.value))} />
-
selectAmount(customAmount!)}>Confirm
+
+ setCustomAmount(parseInt(e.target.value))}
+ />
+
);
}
@@ -182,22 +215,36 @@ export default function LNURLTip(props: LNURLTipProps) {
if (invoice) return null;
return (
<>
-
{metadata?.description ?? service}
+
Zap amount in sats
+
+ {serviceAmounts.map(a =>
+ selectAmount(a)}>
+ {emojis[a] && <>{emojis[a]} }
+ {formatShort(a)}
+
+ )}
+
+ {payService && custom()}
- {(payService?.commentAllowed ?? 0) > 0 ?
- setComment(e.target.value)} /> : null}
+ {(payService?.commentAllowed ?? 0) > 0 &&
+ setComment(e.target.value)}
+ />
+ }
-
- {serviceAmounts.map(a => selectAmount(a)}>
- {a.toLocaleString()}
- )}
- {payService ?
- selectAmount(-1)}>
- Custom
- : null}
-
- {amount === -1 ? custom() : null}
- {(amount ?? 0) > 0 &&
}
+ {(amount ?? 0) > 0 && (
+
+ )}
)
}
@@ -208,22 +255,20 @@ export default function LNURLTip(props: LNURLTipProps) {
return (
<>
- {props.notice &&
{props.notice}}
-
-
- {pr && (
- <>
-
-
-
-
-
-
-
- )}
-
+ {props.notice &&
{props.notice}}
+
+
+ {pr && (
+ <>
+
+
+
+
+
+ )}
+
)
@@ -232,24 +277,46 @@ export default function LNURLTip(props: LNURLTipProps) {
function successAction() {
if (!success) return null;
return (
- <>
-
{success?.description ?? "Paid!"}
- {success.url ?
{success.url} : null}
-
+
+
+
+ {success?.description ?? "Paid!"}
+
+ {success.url &&
+
+
+ {success.url}
+
+
+ }
+
)
}
- const defaultTitle = payService?.nostrPubkey ? "⚡️ Send Zap!" : "⚡️ Send sats";
+ const defaultTitle = payService?.nostrPubkey ? "Send zap" : "Send sats";
+ const title = target ? `${defaultTitle} to ${target}` : defaultTitle
if (!show) return null;
return (
-
- e.stopPropagation()}>
-
{props.title || defaultTitle}
- {invoiceForm()}
- {error ?
{error}
: null}
- {payInvoice()}
- {successAction()}
-
e.stopPropagation()}>
+
+
+
+
+ {author &&
}
+
+ {props.title || title}
+
+
+ {invoiceForm()}
+ {error &&
{error}
}
+ {payInvoice()}
+ {successAction()}
+
setZap(true)}>
- setZap(false)} author={pubkey} />
+ setZap(false)} author={pubkey} />
)
}
diff --git a/src/Hooks/useHorizontalScroll.tsx b/src/Hooks/useHorizontalScroll.tsx
new file mode 100644
index 00000000..88009ce0
--- /dev/null
+++ b/src/Hooks/useHorizontalScroll.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useRef, WheelEvent, LegacyRef } from "react";
+
+function useHorizontalScroll() {
+ const elRef = useRef();
+ useEffect(() => {
+ const el = elRef.current;
+ if (el) {
+ const onWheel = (ev: WheelEvent) => {
+ if (ev.deltaY == 0) return;
+ ev.preventDefault();
+ el.scrollTo({ left: el.scrollLeft + ev.deltaY, behavior: "smooth" });
+ };
+ // @ts-ignore
+ el.addEventListener("wheel", onWheel);
+ // @ts-ignore
+ return () => el.removeEventListener("wheel", onWheel);
+ }
+ }, []);
+ return elRef as LegacyRef | undefined
+}
+
+export default useHorizontalScroll;
diff --git a/src/Icons/Close.tsx b/src/Icons/Close.tsx
new file mode 100644
index 00000000..0c038328
--- /dev/null
+++ b/src/Icons/Close.tsx
@@ -0,0 +1,11 @@
+import IconProps from "./IconProps";
+
+const Close = (props: IconProps) => {
+ return (
+
+ )
+}
+
+export default Close
diff --git a/src/Icons/Reply.tsx b/src/Icons/Reply.tsx
index fa57e467..3d9cf0ba 100644
--- a/src/Icons/Reply.tsx
+++ b/src/Icons/Reply.tsx
@@ -1,8 +1,10 @@
+import IconProps from "./IconProps";
+
const Reply = () => {
return (
-
+
)
}
diff --git a/src/Number.ts b/src/Number.ts
index eb6c4aeb..a961556a 100644
--- a/src/Number.ts
+++ b/src/Number.ts
@@ -6,7 +6,7 @@ const intl = new Intl.NumberFormat("en", {
export function formatShort(n: number) {
if (n < 2e3) {
return n
- } else if (n < 1e8) {
+ } else if (n < 1e6) {
return `${intl.format(n / 1e3)}K`
} else {
return `${intl.format(n / 1e6)}M`
diff --git a/src/Pages/ProfilePage.css b/src/Pages/ProfilePage.css
index 0666ea0f..3e88372d 100644
--- a/src/Pages/ProfilePage.css
+++ b/src/Pages/ProfilePage.css
@@ -62,7 +62,7 @@
white-space: pre-wrap;
}
-.profile .name h2 {
+.details-wrapper > .name > h2 {
margin: 12px 0 0 0;
font-weight: 600;
font-size: 19px;
@@ -75,11 +75,11 @@
margin: 0 0 12px 0;
}
-.profile .avatar-wrapper {
+.profile-wrapper > .avatar-wrapper {
z-index: 1;
}
-.profile .avatar-wrapper .avatar {
+.profile-wrapper > .avatar-wrapper .avatar {
width: 120px;
height: 120px;
background-image: var(--img-url);
diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx
index 2310c079..120fc74b 100644
--- a/src/Pages/ProfilePage.tsx
+++ b/src/Pages/ProfilePage.tsx
@@ -19,7 +19,7 @@ import Avatar from "Element/Avatar";
import LogoutButton from "Element/LogoutButton";
import Timeline from "Element/Timeline";
import Text from 'Element/Text'
-import LNURLTip from "Element/LNURLTip";
+import SendSats from "Element/SendSats";
import Nip05 from "Element/Nip05";
import Copy from "Element/Copy";
import ProfilePreview from "Element/ProfilePreview";
@@ -35,6 +35,7 @@ import FollowsYou from "Element/FollowsYou"
import QrCode from "Element/QrCode";
import Modal from "Element/Modal";
import { ProxyImg } from "Element/ProxyImg"
+import useHorizontalScroll from "Hooks/useHorizontalScroll";
const ProfileTab = {
Notes: { text: "Notes", value: 0 },
@@ -71,6 +72,7 @@ export default function ProfilePage() {
return profileZaps
}, [zapFeed.store, id])
const zapsTotal = zaps.reduce((acc, z) => acc + z.amount, 0)
+ const horizontalScroll = useHorizontalScroll()
useEffect(() => {
setTab(ProfileTab.Notes);
@@ -111,7 +113,13 @@ export default function ProfilePage() {