/
GenericActivityInformation.svelte
89 lines (82 loc) · 3.9 KB
/
GenericActivityInformation.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
<script lang="ts">
import { KeyValueBox } from 'shared/components'
import { getFormattedTimeStamp, localize } from '@core/i18n'
import { activeProfile } from '@core/profile'
import { Activity, formatTokenAmountPrecise } from '@core/wallet'
import { BASE_TOKEN, ExplorerEndpoint } from '@core/network'
import { getOfficialExplorerUrl } from '@core/network/utils'
import { openUrlInBrowser } from '@core/app'
import { IKeyValueBoxList, truncateString } from '@core/utils'
import { setClipboard } from '@core/utils'
export let activity: Activity
const explorerUrl = getOfficialExplorerUrl($activeProfile?.networkProtocol, $activeProfile?.networkType)
$: expirationTime = getFormattedTimeStamp(activity.asyncData?.expirationDate)
$: claimedTime = getFormattedTimeStamp(activity.asyncData?.claimedDate)
$: hasStorageDeposit =
activity.storageDeposit || (activity.storageDeposit === 0 && activity.giftedStorageDeposit === 0)
$: gasBudget = activity?.parsedLayer2Metadata?.gasBudget
$: formattedTransactionTime = getFormattedTimeStamp(activity.time)
$: formattedTimelockDate = getFormattedTimeStamp(activity.asyncData?.timelockDate)
$: baseToken = BASE_TOKEN[$activeProfile?.networkProtocol]
$: formattedStorageDeposit = formatTokenAmountPrecise(activity.storageDeposit ?? 0, baseToken)
$: formattedGiftedStorageDeposit = formatTokenAmountPrecise(activity.giftedStorageDeposit ?? 0, baseToken)
$: formattedGasBudget = formatTokenAmountPrecise(Number(gasBudget ?? 0), baseToken)
let transactionDetailsList: IKeyValueBoxList
$: transactionDetailsList = {
...(activity?.destinationNetwork && {
destinationNetwork: { data: activity?.destinationNetwork },
}),
...(activity?.time && {
transactionTime: { data: formattedTransactionTime },
}),
...(activity?.metadata && {
metadata: { data: activity.metadata, isTooltipVisible: true },
}),
...(activity?.tag && {
tag: { data: activity.tag, isTooltipVisible: true },
}),
...(hasStorageDeposit && {
storageDeposit: { data: formattedStorageDeposit, isTooltipVisible: true },
}),
...(activity?.giftedStorageDeposit && {
giftedStorageDeposit: { data: formattedGiftedStorageDeposit, isTooltipVisible: true },
}),
...(gasBudget && {
gasBudget: { data: formattedGasBudget, isTooltipVisible: true },
}),
...(expirationTime && {
expirationTime: { data: expirationTime, isTooltipVisible: true },
}),
...(activity?.asyncData?.timelockDate && {
timelockDate: { data: formattedTimelockDate, isTooltipVisible: true },
}),
...(claimedTime && { claimedTime: { data: claimedTime } }),
}
function handleTransactionIdClick(): void {
explorerUrl
? openUrlInBrowser(
`${explorerUrl}/${ExplorerEndpoint.Transaction}/${activity?.asyncData?.claimingTransactionId}`
)
: setClipboard(activity?.asyncData?.claimingTransactionId)
}
</script>
{#each Object.entries(transactionDetailsList) as [key, value]}
<KeyValueBox
keyText={localize(`general.${key}`)}
valueText={value.data}
tooltipText={value.isTooltipVisible
? localize(`tooltips.transactionDetails.${activity?.direction}.${key}`)
: undefined}
/>
{/each}
{#if activity?.asyncData?.claimingTransactionId}
<KeyValueBox keyText={localize(activity.asyncData?.isClaiming ? 'general.claimingIn' : 'general.claimedIn')}>
<button
slot="value"
class="action w-fit flex justify-start text-center font-medium text-14 text-blue-500"
on:click={handleTransactionIdClick}
>
{truncateString(activity.asyncData?.claimingTransactionId, 12, 12)}
</button>
</KeyValueBox>
{/if}