-
Notifications
You must be signed in to change notification settings - Fork 10
/
ActivityExport.tsx
80 lines (77 loc) · 2.16 KB
/
ActivityExport.tsx
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
import { Activity } from 'libs/queries/extApi/activity';
import { FC, useMemo } from 'react';
import { activityActionName } from './utils';
import { getLowestBits } from 'utils/helpers';
import { ReactComponent as IconDownloadFile } from 'assets/icons/download-file.svg';
const getCSV = (activities: Activity[]) => {
const header = [
'ID',
'Strategy NFT ID',
'Base',
'Quote',
'Action',
'Buy Min',
'Buy Max',
'Buy Budget',
'Sell Min',
'Sell Max',
'Sell Budget',
'Buy Min Changes',
'Buy Max Changes',
'Buy Budget Changes',
'Sell Min Changes',
'Sell Max Changes',
'Sell Budget Changes',
'Block Number',
'Transaction Hash',
'Date',
].join(',');
const body = activities.map((activity) => {
const { strategy, changes, blockNumber, txHash } = activity;
const { base, quote } = strategy;
const date = new Date(activity.date).toLocaleDateString();
return [
getLowestBits(strategy.id),
strategy.id,
base.symbol,
quote.symbol,
activityActionName[activity.action],
strategy.buy.min,
strategy.buy.max,
strategy.buy.budget,
strategy.sell.min,
strategy.sell.max,
strategy.sell.budget,
changes?.buy?.min ?? '',
changes?.buy?.max ?? '',
changes?.buy?.budget ?? '',
changes?.sell?.min ?? '',
changes?.sell?.max ?? '',
changes?.sell?.budget ?? '',
blockNumber,
txHash,
date,
]
.map((v) => `"${v}"`) // Ignore inner comma
.join(',');
});
const csv = [header].concat(body).join('\n');
const csvContent = `data:text/csv;charset=utf-8,${csv}`;
return encodeURI(csvContent);
};
interface Props {
activities: Activity[];
}
export const ActivityExport: FC<Props> = ({ activities }) => {
const csvURI = useMemo(() => getCSV(activities), [activities]);
return (
<a
href={csvURI}
className="border-background-800 text-12 hover:border-background-700 hover:bg-background-800 flex items-center gap-8 rounded-full border-2 px-12 py-8"
download="activities.csv"
>
<IconDownloadFile className="text-primary size-14" />
<span>Export</span>
</a>
);
};