improve nwc

This commit is contained in:
Ren Amamiya 2023-09-19 15:06:12 +07:00
parent c1bddeb6ed
commit 4fa8f40e6a
5 changed files with 30 additions and 18 deletions

2
src-tauri/Cargo.lock generated
View File

@ -2627,7 +2627,7 @@ dependencies = [
[[package]] [[package]]
name = "lume" name = "lume"
version = "1.2.4" version = "1.2.5"
dependencies = [ dependencies = [
"rust-argon2 1.0.0", "rust-argon2 1.0.0",
"serde", "serde",

View File

@ -38,7 +38,7 @@ export function NWCScreen() {
<NWCOther /> <NWCOther />
</div> </div>
) : ( ) : (
<div className="flex w-full flex-col rounded-xl bg-white/10 p-3"> <div className="flex w-full flex-col rounded-xl border-t border-white/10 bg-white/20 p-3">
<div className="mb-1 inline-flex items-center gap-1.5 text-sm text-green-500"> <div className="mb-1 inline-flex items-center gap-1.5 text-sm text-green-500">
<CheckCircleIcon className="h-4 w-4" /> <CheckCircleIcon className="h-4 w-4" />
<p>You&apos;re using nostr wallet connect</p> <p>You&apos;re using nostr wallet connect</p>
@ -47,12 +47,12 @@ export function NWCScreen() {
<textarea <textarea
readOnly readOnly
value={walletConnectURL.substring(0, 120) + '****'} value={walletConnectURL.substring(0, 120) + '****'}
className="relative h-40 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50" className="relative h-40 w-full resize-none rounded-lg bg-white/20 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
/> />
<button <button
type="button" type="button"
onClick={() => remove()} onClick={() => remove()}
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/5 px-6 font-medium leading-none text-red-500 hover:bg-white/10 focus:outline-none disabled:opacity-50" className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-red-500 hover:bg-white/20 focus:outline-none disabled:opacity-50"
> >
Remove connection Remove connection
</button> </button>

View File

@ -27,6 +27,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
const [invoice, setInvoice] = useState<null | string>(null); const [invoice, setInvoice] = useState<null | string>(null);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isCompleted, setIsCompleted] = useState(false); const [isCompleted, setIsCompleted] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const walletConnectURL = useStronghold((state) => state.walletConnectURL); const walletConnectURL = useStronghold((state) => state.walletConnectURL);
const nwc = useRef(null); const nwc = useRef(null);
@ -51,7 +52,11 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
}); });
await nwc.current.enable(); await nwc.current.enable();
// start loading
setIsLoading(true);
// send payment via nwc
const send: SendPaymentResponse = await nwc.current.sendPayment(res); const send: SendPaymentResponse = await nwc.current.sendPayment(res);
if (send) { if (send) {
await sendNativeNotification( await sendNativeNotification(
`You've tipped ${compactNumber.format(send.amount)} sats to ${ `You've tipped ${compactNumber.format(send.amount)} sats to ${
@ -62,6 +67,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
// eose // eose
nwc.current.close(); nwc.current.close();
setIsCompleted(true); setIsCompleted(true);
setIsLoading(false);
// reset after 3 secs // reset after 3 secs
const timeout = setTimeout(() => setIsCompleted(false), 3000); const timeout = setTimeout(() => setIsCompleted(false), 3000);
@ -69,15 +75,17 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
} }
} catch (e) { } catch (e) {
nwc.current.close(); nwc.current.close();
setIsLoading(false);
await message(JSON.stringify(e), { title: 'Zap', type: 'error' }); await message(JSON.stringify(e), { title: 'Zap', type: 'error' });
} }
}; };
useEffect(() => { useEffect(() => {
return () => { return () => {
setAmount(''); setAmount('21');
setZapMessage(''); setZapMessage('');
setIsCompleted(false); setIsCompleted(false);
setIsLoading(false);
}; };
}, []); }, []);
@ -183,6 +191,13 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
> >
{isCompleted ? ( {isCompleted ? (
<p>Successfully tipped</p> <p>Successfully tipped</p>
) : isLoading ? (
<span className="flex flex-col">
<p className="mb-px leading-none">Waiting for approval</p>
<p className="text-xs leading-none text-white/70">
Go to your wallet and approve payment request
</p>
</span>
) : ( ) : (
<span className="flex flex-col"> <span className="flex flex-col">
<p className="mb-px leading-none">Send tip</p> <p className="mb-px leading-none">Send tip</p>

View File

@ -34,18 +34,15 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
key={index} key={index}
type="button" type="button"
onClick={() => open(item.id)} onClick={() => open(item.id)}
className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3 hover:bg-white/20" className="flex items-center justify-between rounded-xl bg-white/10 px-4 py-3 hover:bg-white/20"
> >
<div className="inline-flex items-center gap-2.5"> <div className="flex flex-col items-start gap-1">
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" /> <h5 className="font-semibold leading-none">{item.title}</h5>
<div className="flex flex-col items-start gap-1"> {seens.has(item.id) ? (
<h5 className="font-semibold leading-none">{item.title}</h5> <p className="text-sm leading-none text-green-500">Readed</p>
{seens.has(item.id) ? ( ) : (
<p className="text-sm leading-none text-green-500">Readed</p> <p className="text-sm leading-none text-white/70">Unread</p>
) : ( )}
<p className="text-sm leading-none text-white/70">Unread</p>
)}
</div>
</div> </div>
<ArrowRightIcon className="h-5 w-5 text-white" /> <ArrowRightIcon className="h-5 w-5 text-white" />
</button> </button>

View File

@ -13,10 +13,10 @@ export const useActivities = create<ActivitiesState>((set) => ({
activities: null, activities: null,
totalNewActivities: 0, totalNewActivities: 0,
setActivities: (events: NDKEvent[], lastLogin: number) => { setActivities: (events: NDKEvent[], lastLogin: number) => {
const latest = events.filter((ev) => ev.created_at > lastLogin); const totalLatest = events.filter((ev) => ev.created_at > lastLogin)?.length ?? 0;
set(() => ({ set(() => ({
activities: events, activities: events,
totalNewActivities: latest.length > 0 ? latest.length : 0, totalNewActivities: totalLatest,
})); }));
}, },
addActivity: (event: NDKEvent) => { addActivity: (event: NDKEvent) => {