add support for mobile (non-webln) zaps

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

View file

@ -14,6 +14,7 @@
let npub;
let zappingIt;
let hovering;
let mobilePR;
let zappedAmount = 0;
@ -114,26 +115,35 @@
}
flex items-center absolute ml-5 mt-10 z-10">
{#if zappingIt}
<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">
<ZapAmountButton icon="👍" amount={500} {event} />
{#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>
<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} />
{:else}
<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">
<ZapAmountButton icon="👍" amount={500} {event} bind:mobilePR={mobilePR} />
</div>
<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} bind:mobilePR={mobilePR} />
</div>
<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} bind:mobilePR={mobilePR} />
</div>
<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} bind:mobilePR={mobilePR} />
</div>
<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} bind:mobilePR={mobilePR} />
</div>
<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} 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">
<ZapAmountButton icon="🙌" amount={5000} amountDisplay={'5k'} {event} />
</div>
<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} />
</div>
<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} />
</div>
<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} />
</div>
</div>
{/if}
{/if}
</div>

View file

@ -1,5 +1,5 @@
<script>
export let icon, amount, amountDisplay, event;
export let icon, amount, amountDisplay, event, mobilePR;
import { zappingMessage } from './lib/store';
import NDK, { NDKEvent, NDKNip07Signer } from 'nostr-dev-kit';
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'] });
ndk.signer = signer;
await ndk.connect();
const ndkEvent = new NDKEvent(ndk, event);
const pr = await ndkEvent.zap(amount * 1000);
let pr;
try {
const ndkEvent = new NDKEvent(ndk, event);
pr = await ndkEvent.zap(amount * 1000);
} catch (e) {
alert(e)
return;
}
let webln;
try {
webln = await requestProvider();
} catch (err) {
mobilePR = pr;
return;
}
try {
const webln = await requestProvider();
await webln.sendPayment(pr);
$zappingMessage = null;
} catch (err) {
$zappingMessage = null;
console.log(err);
mobilePR = pr;
}
}
</script>