/
NftActivityDetails.svelte
49 lines (44 loc) · 1.98 KB
/
NftActivityDetails.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script lang="typescript">
import { ActivityAsyncStatusPill, Icon, Pill, SubjectBox, TransactionActivityStatusPill } from 'shared/components'
import { time } from '@core/app'
import { localize } from '@core/i18n'
import { Activity } from '@core/wallet'
import { Icon as IconEnum } from '@lib/auxiliary/icon'
export let activity: Partial<Activity> = {}
$: isTimelocked = activity?.asyncData?.timelockDate > $time
</script>
<nft-transaction-details class="w-full h-full space-y-6 flex flex-auto flex-col flex-shrink-0">
<div class="flex w-full items-center justify-center">
<div class="rounded-full flex justify-center items-center transition-none p-2 w-16 h-16 bg-gray-500">
<Icon
icon={IconEnum.Collectibles}
width="100%"
height="100%"
classes="text-white dark:text-gray-800 text-center"
/>
</div>
</div>
<main-content class="flex flex-auto w-full flex-col items-center justify-center space-y-3">
<transaction-status class="flex flex-row w-full space-x-2 justify-center">
{#if activity?.inclusionState && activity?.direction}
<TransactionActivityStatusPill
type={activity?.type}
direction={activity?.direction}
isInternal={activity?.isInternal}
inclusionState={activity?.inclusionState}
/>
{/if}
{#if activity?.asyncData?.asyncStatus}
<ActivityAsyncStatusPill asyncStatus={activity?.asyncData?.asyncStatus} />
{/if}
{#if isTimelocked}
<Pill backgroundColor="gray-200" darkBackgroundColor="gray-200">
{localize('pills.locked')}
</Pill>
{/if}
</transaction-status>
{#if activity?.subject}
<SubjectBox subject={activity?.subject} />
{/if}
</main-content>
</nft-transaction-details>