/
AsyncActivityTileFooter.svelte
116 lines (109 loc) · 4.08 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<script lang="ts">
import {
ActivityAsyncStatus,
ActivityDirection,
claimActivity,
rejectActivity,
getTimeDifference,
Activity,
} from '@core/wallet'
import {
ActivityAsyncStatusPill,
TooltipIcon,
Text,
Button,
TileFooter,
FontWeight,
ButtonSize,
} from 'shared/components'
import { time } from '@core/app'
import { Icon as IconEnum } from '@lib/auxiliary/icon'
import { Position } from 'shared/components/enums'
import { localize } from '@core/i18n'
import { showInternalVerificationPopup } from '@core/ledger'
import { checkActiveProfileAuth, isActiveLedgerProfile } from '@core/profile'
import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
export let activity: Activity
$: shouldShowActions =
(activity.direction === ActivityDirection.Incoming ||
activity.direction === ActivityDirection.SelfTransaction) &&
activity.asyncData?.asyncStatus === ActivityAsyncStatus.Unclaimed
$: timeDiff = getTimeDiff(activity)
$: hasExpirationTime = !!activity.asyncData?.expirationDate
function handleRejectClick(): void {
openPopup({
id: PopupId.Confirmation,
props: {
title: localize('actions.confirmRejection.title'),
description: localize('actions.confirmRejection.description'),
hint: localize('actions.confirmRejection.node'),
warning: true,
confirmText: localize('actions.reject'),
onConfirm: () => {
rejectActivity(activity.id)
closePopup()
},
},
})
}
function handleClaimClick(): void {
if ($isActiveLedgerProfile) {
$showInternalVerificationPopup = true
}
checkActiveProfileAuth(() => claimActivity(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 undefined
}
</script>
<TileFooter>
<svelte:fragment slot="left">
{#if timeDiff}
<TooltipIcon
icon={hasExpirationTime ? IconEnum.ExpirationTime : IconEnum.Timelock}
iconClasses="text-gray-600 dark:text-gray-200"
title={localize(`general.${hasExpirationTime ? 'expirationTime' : 'timelockDate'}`)}
text={localize(
`tooltips.transactionDetails.${activity.direction}.${
hasExpirationTime ? 'expirationTime' : 'timelockDate'
}`
)}
position={Position.Top}
/>
<Text fontSize="13" color="gray-600" fontWeight={FontWeight.semibold}>{timeDiff}</Text>
{/if}
</svelte:fragment>
<svelte:fragment slot="right">
{#if shouldShowActions}
<Button
onClick={handleRejectClick}
disabled={activity.asyncData?.isClaiming || activity.asyncData?.isRejected}
inlineStyle="min-width: 4rem;"
size={ButtonSize.Small}
outline
>
{localize('actions.reject')}
</Button>
<Button
onClick={handleClaimClick}
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>