spencer/dsnt-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add support for mobile (non-webln) zaps

Browse source
This commit is contained in:
pablof7z 2023-04-09 15:08:15 +03:00
parent ddba968541
commit f65474a8ed
2 changed files with 48 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/NostrNote.svelte
View file

@ -14,6 +14,7 @@
let npub; let npub;
let zappingIt; let zappingIt;
let hovering; let hovering;
let mobilePR;
let zappedAmount = 0; let zappedAmount = 0;
@ -114,27 +115,36 @@
} }
flex items-center absolute ml-5 mt-10 z-10"> flex items-center absolute ml-5 mt-10 z-10">
{#if zappingIt} {#if zappingIt}
{#if mobilePR}
<div class="flex flex-col gap-3 w-full">
<a href={`lightning:${mobilePR}`} class="text-center w-full p-3 bg-black text-white rounded-t-xl">Open in wallet</a>
<button class="bg-white rounder-b-xl p-3" on:click={() => { $zappingMessage = null; }}>
Cancel
</button>
</div>
{:else}
<div class="flex flex-row items-stretch justify-between w-full"> <div class="flex flex-row items-stretch justify-between w-full">
<div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer"> <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
<ZapAmountButton icon="👍" amount={500} {event} /> <ZapAmountButton icon="👍" amount={500} {event} bind:mobilePR={mobilePR} />
</div> </div>
<div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer"> <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
<ZapAmountButton icon="🤙" amount={2500} amountDisplay={'2.5k'} {event} /> <ZapAmountButton icon="🤙" amount={2500} amountDisplay={'2.5k'} {event} bind:mobilePR={mobilePR} />
</div> </div>
<div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer"> <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
<ZapAmountButton icon="🙌" amount={5000} amountDisplay={'5k'} {event} /> <ZapAmountButton icon="🙌" amount={5000} amountDisplay={'5k'} {event} bind:mobilePR={mobilePR} />
</div> </div>
<div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer"> <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
<ZapAmountButton icon="🧡" amount={10000} amountDisplay={'10k'} {event} /> <ZapAmountButton icon="🧡" amount={10000} amountDisplay={'10k'} {event} bind:mobilePR={mobilePR} />
</div> </div>
<div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer"> <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
<ZapAmountButton icon="🤯" amount={100000} amountDisplay={'100k'} {event} /> <ZapAmountButton icon="🤯" amount={100000} amountDisplay={'100k'} {event} bind:mobilePR={mobilePR} />
</div> </div>
<div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer"> <div class="flex flex-col hover:bg-orange-500 text-white rounded-full w-12 h-12 items-center justify-center cursor-pointer">
<ZapAmountButton icon="😎" amount={1000000} amountDisplay={'1M'} {event} /> <ZapAmountButton icon="😎" amount={1000000} amountDisplay={'1M'} {event} bind:mobilePR={mobilePR} />
</div> </div>
</div> </div>
{/if} {/if}
{/if}
</div> </div>
<!-- <span class="text-base font-semibold text-clip">{displayName}</span> <!-- <span class="text-base font-semibold text-clip">{displayName}</span>

24
src/ZapAmountButton.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
export let icon, amount, amountDisplay, event; export let icon, amount, amountDisplay, event, mobilePR;
import { zappingMessage } from './lib/store'; import { zappingMessage } from './lib/store';
import NDK, { NDKEvent, NDKNip07Signer } from 'nostr-dev-kit'; import NDK, { NDKEvent, NDKNip07Signer } from 'nostr-dev-kit';
import { requestProvider } from 'webln'; import { requestProvider } from 'webln';
@ -12,16 +12,30 @@
const ndk = new NDK({ explicitRelayUrls: ['wss://nos.lol', 'wss://relay.nostr.band', 'wss://relay.damus.io', 'wss://nostr.mom', 'wss://no.str.cr'] }); const ndk = new NDK({ explicitRelayUrls: ['wss://nos.lol', 'wss://relay.nostr.band', 'wss://relay.damus.io', 'wss://nostr.mom', 'wss://no.str.cr'] });
ndk.signer = signer; ndk.signer = signer;
await ndk.connect(); await ndk.connect();
let pr;
try {
const ndkEvent = new NDKEvent(ndk, event); const ndkEvent = new NDKEvent(ndk, event);
const pr = await ndkEvent.zap(amount * 1000); pr = await ndkEvent.zap(amount * 1000);
} catch (e) {
alert(e)
return;
}
let webln;
try {
webln = await requestProvider();
} catch (err) {
mobilePR = pr;
return;
}
try { try {
const webln = await requestProvider();
await webln.sendPayment(pr); await webln.sendPayment(pr);
$zappingMessage = null; $zappingMessage = null;
} catch (err) { } catch (err) {
$zappingMessage = null; mobilePR = pr;
console.log(err);
} }
} }
</script> </script>