forked from friedger/stacks-send-many
-
Notifications
You must be signed in to change notification settings - Fork 13
/
Tx.js
91 lines (89 loc) · 2.72 KB
/
Tx.js
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
import React from 'react';
import { chainSuffix } from '../lib/constants';
import { Address } from './Address';
import { Amount } from './Amount';
import { AmountFiat } from './AmountFiat';
import { AmountStx } from './AmountStx';
export function Tx({ tx, onDetailsPage, hideEvents, hideHeader }) {
const apiData = tx.apiData;
const txId = apiData.tx_id;
const copyToClipboard = () => {
navigator.clipboard.writeText(txId);
};
const openTxInExplorer = () => {
window.open(`https://explorer.stacks.co/txid/${txId}`, '_blank');
};
const openTx = () => {
window.location.href = `/txid/${txId}`;
};
const txEvents =
tx &&
tx.apiData &&
tx.apiData.events.filter(event => {
return event.event_type === 'stx_asset';
});
const total = txEvents.reduce((sum, e) => sum + parseInt(e.asset.amount), 0);
return (
<div className="small container">
{!hideHeader && (
<div className="row">
<div className="col-lg-7 col-xs-12">
<span title={txId}>
{txId.substr(0, 7)}...{txId.substr(58)}
</span>
<i
className="p-1 bi bi-clipboard"
role="button"
title="copy"
onClick={copyToClipboard}
></i>
<i
className={`${onDetailsPage ? 'd-none' : ''} p-1 bi bi-link`}
role="button"
title="details"
onClick={openTx}
></i>
<i
className="p-1 bi bi-link-45deg"
role="button"
title="explorer"
onClick={openTxInExplorer}
></i>
</div>
{total > 0 ? (
<div className="col-lg-5 col-xs-12 text-danger text-right small">
<Amount ustx={-1 * total} />
</div>
) : (
<div className="col-lg-5 col-xs-12 text-right small">
{(tx.apiData && tx.apiData.tx_status) || ''}
</div>
)}
</div>
)}
{!hideEvents &&
txEvents &&
txEvents.map((event, key) => {
return (
<div
onClick={() =>
(window.location.href = `/txid/${tx.apiData.tx_id}/${event.event_index}${chainSuffix}`)
}
key={key}
className="row"
role="button"
>
<div className="col-8">
<Address addr={event.asset.recipient} />
</div>
<div className="col-4 text-right small">
<AmountStx ustx={event.asset.amount} />
<br />
(<AmountFiat ustx={event.asset.amount} />)
</div>
</div>
);
})}
</div>
);
}