-
Notifications
You must be signed in to change notification settings - Fork 103
/
AsyncActivityTileFooter.svelte
73 lines (68 loc) · 2.98 KB
/
AsyncActivityTileFooter.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script lang="ts">
import features from '@features/features'
import { ActivityAsyncStatus, ActivityDirection, getTimeDifference, Activity } from '@core/wallet'
import { ActivityAsyncStatusPill, TooltipIcon, Text, Button, TileFooter, FontWeight, ButtonSize } from '@ui'
import { time } from '@core/app'
import { Icon as IconEnum } from '@lib/auxiliary/icon'
import { Position } from '@ui/enums'
import { localize } from '@core/i18n'
export let onClaim: () => unknown = () => {}
export let onReject: () => unknown = () => {}
export let activity: Activity
$: shouldShowActions =
activity.direction === ActivityDirection.Incoming &&
activity.asyncData?.asyncStatus === ActivityAsyncStatus.Unclaimed &&
features.dashboard.activity.actions.enabled
$: shouldShowAsyncFooter = activity.asyncData?.asyncStatus !== ActivityAsyncStatus.Claimed
$: timeDiff = getTimeDiff(activity)
function getTimeDiff(activity: Activity): string {
if (activity.asyncData) {
const { asyncStatus, expirationDate, timelockDate } = activity.asyncData
if (asyncStatus === ActivityAsyncStatus.Timelocked) {
return getTimeDifference(timelockDate, $time)
}
if (asyncStatus !== ActivityAsyncStatus.Claimed && expirationDate) {
return getTimeDifference(expirationDate, $time)
}
}
return localize('general.none')
}
</script>
{#if shouldShowAsyncFooter}
<TileFooter>
<svelte:fragment slot="left">
<TooltipIcon
icon={IconEnum.ExpirationTime}
iconClasses="text-gray-600 dark:text-gray-200"
title={localize('general.expirationTime')}
text={localize(`tooltips.transactionDetails.${activity.direction}.expirationTime`)}
position={Position.Top}
/>
<Text fontSize="13" color="gray-600" fontWeight={FontWeight.semibold}>{timeDiff}</Text>
</svelte:fragment>
<svelte:fragment slot="right">
{#if shouldShowActions}
<Button
onClick={onReject}
disabled={activity.asyncData?.isClaiming || activity.asyncData?.isRejected}
inlineStyle="min-width: 4rem;"
size={ButtonSize.Small}
outline
>
{localize('actions.reject')}
</Button>
<Button
onClick={onClaim}
disabled={activity.asyncData?.isClaiming}
isBusy={activity.asyncData?.isClaiming}
inlineStyle="min-width: 4rem;"
size={ButtonSize.Small}
>
{localize('actions.claim')}
</Button>
{:else}
<ActivityAsyncStatusPill asyncStatus={activity.asyncData?.asyncStatus} />
{/if}
</svelte:fragment>
</TileFooter>
{/if}