problem: payment notification doesn't look good

This commit is contained in:
gsovereignty
2024-08-18 16:45:42 +08:00
parent 1e8dbfce90
commit d9c09d1de8

View File

@@ -4,28 +4,44 @@
import { unixToRelativeTime } from '@/helpers'; import { unixToRelativeTime } from '@/helpers';
import { fetchEvent } from '@/event_helpers/products'; import { fetchEvent } from '@/event_helpers/products';
import { Product, Rocket, type ZapPurchase } from '@/event_helpers/rockets'; import { Product, Rocket, type ZapPurchase } from '@/event_helpers/rockets';
import Heading from './Heading.svelte';
import Separator from '@/components/ui/separator/separator.svelte';
export let zapPurchase: ZapPurchase; export let zapPurchase: ZapPurchase;
export let rocket: Rocket; export let rocket: Rocket;
</script> </script>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1 rounded-md bg-orange-500 p-4">
<div class="">
{#if zapPurchase.ZapReceipt.content} {#if zapPurchase.ZapReceipt.content}
<div>{zapPurchase.ZapReceipt.content}</div> <h1 class="scroll-m-20 text-center text-lg font-normal md:text-xl">
NEW {zapPurchase.ZapReceipt.content.toUpperCase()}!
</h1>
{:else} {:else}
<!-- Sometimes ZapReceipt.content is empty --> <!-- Sometimes ZapReceipt.content is empty -->
{#await fetchEvent(zapPurchase.ProductID, $ndk)} {#await fetchEvent(zapPurchase.ProductID, $ndk)}
<div>New purchase</div> <div>New purchase!</div>
{:then product} {:then product}
<div>{`Purchase of ${new Product(product).Name()} from ${rocket.Name()}.`}</div> <div>{`Purchase of ${new Product(product).Name()} from ${rocket.Name()}.`}</div>
{/await} {/await}
{/if} {/if}
</div>
{#if zapPurchase.BuyerPubkey} {#if zapPurchase.BuyerPubkey}
<div class="flex flex-nowrap gap-1"> <div class="ml-auto mr-auto mt-4 flex content-center items-center">
{#if zapPurchase.Amount}
<div class="flex-col content-center items-center gap-1">
<h1 class="scroll-m-20 text-center font-mono text-3xl">
{Math.floor(zapPurchase.Amount / 1000).toLocaleString()}
</h1>
<span class="flex">Sats paid to Merit holders</span>
</div>
{/if}
<div class="ml-4 flex flex-col content-center items-center gap-1 rounded-sm bg-black p-2">
BUYER
<Avatar <Avatar
ndk={$ndk} ndk={$ndk}
pubkey={zapPurchase.BuyerPubkey} pubkey={zapPurchase.BuyerPubkey}
class="h-10 w-10 flex-none rounded-full object-cover" class="h-20 w-20 flex-none rounded-none object-cover"
/> />
<Name <Name
ndk={$ndk} ndk={$ndk}
@@ -33,16 +49,6 @@
class="hidden max-w-32 truncate p-2 md:inline-block" class="hidden max-w-32 truncate p-2 md:inline-block"
/> />
</div> </div>
{/if}
{#if zapPurchase.Amount}
<div>
Amount: {(zapPurchase.Amount / 1000).toFixed(0)}
{(zapPurchase.Amount / 1000).toFixed(0) === '1' ? 'sat' : 'sats'}
</div>
{/if}
{#if zapPurchase.ZapReceipt.created_at}
<div>
{unixToRelativeTime(zapPurchase.ZapReceipt.created_at * 1000)}
</div> </div>
{/if} {/if}
</div> </div>