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,45 +4,51 @@
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">
{#if zapPurchase.ZapReceipt.content} <div class="">
<div>{zapPurchase.ZapReceipt.content}</div> {#if zapPurchase.ZapReceipt.content}
{:else} <h1 class="scroll-m-20 text-center text-lg font-normal md:text-xl">
<!-- Sometimes ZapReceipt.content is empty --> NEW {zapPurchase.ZapReceipt.content.toUpperCase()}!
{#await fetchEvent(zapPurchase.ProductID, $ndk)} </h1>
<div>New purchase</div> {:else}
{:then product} <!-- Sometimes ZapReceipt.content is empty -->
<div>{`Purchase of ${new Product(product).Name()} from ${rocket.Name()}.`}</div> {#await fetchEvent(zapPurchase.ProductID, $ndk)}
{/await} <div>New purchase!</div>
{/if} {:then product}
<div>{`Purchase of ${new Product(product).Name()} from ${rocket.Name()}.`}</div>
{/await}
{/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">
<Avatar {#if zapPurchase.Amount}
ndk={$ndk} <div class="flex-col content-center items-center gap-1">
pubkey={zapPurchase.BuyerPubkey} <h1 class="scroll-m-20 text-center font-mono text-3xl">
class="h-10 w-10 flex-none rounded-full object-cover" {Math.floor(zapPurchase.Amount / 1000).toLocaleString()}
/> </h1>
<Name <span class="flex">Sats paid to Merit holders</span>
ndk={$ndk} </div>
pubkey={zapPurchase.BuyerPubkey} {/if}
class="hidden max-w-32 truncate p-2 md:inline-block" <div class="ml-4 flex flex-col content-center items-center gap-1 rounded-sm bg-black p-2">
/> BUYER
</div> <Avatar
{/if} ndk={$ndk}
{#if zapPurchase.Amount} pubkey={zapPurchase.BuyerPubkey}
<div> class="h-20 w-20 flex-none rounded-none object-cover"
Amount: {(zapPurchase.Amount / 1000).toFixed(0)} />
{(zapPurchase.Amount / 1000).toFixed(0) === '1' ? 'sat' : 'sats'} <Name
</div> ndk={$ndk}
{/if} pubkey={zapPurchase.BuyerPubkey}
{#if zapPurchase.ZapReceipt.created_at} class="hidden max-w-32 truncate p-2 md:inline-block"
<div> />
{unixToRelativeTime(zapPurchase.ZapReceipt.created_at * 1000)} </div>
</div> </div>
{/if} {/if}
</div> </div>