-
Notifications
You must be signed in to change notification settings - Fork 10
/
ActivityList.tsx
116 lines (113 loc) · 3.57 KB
/
ActivityList.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
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
import { FC } from 'react';
import { Activity } from 'libs/queries/extApi/activity';
import {
activityActionName,
activityDateFormatter,
activityDescription,
activityKey,
} from './utils';
import {
ActivityIcon,
ActivityId,
BudgetChange,
TransactionLink,
} from './ActivityTable';
import { tokenAmount } from 'utils/helpers';
import { usePagination } from 'hooks/useList';
import { Button } from 'components/common/button';
import { useActivity } from './ActivityProvider';
export interface ActivityListProps {
activities: Activity[];
hideIds?: boolean;
}
export const ActivityList: FC<ActivityListProps> = (props) => {
const { activities, hideIds = false } = props;
const { size, limit, setLimit } = usePagination();
return (
<>
<ul className="flex flex-col gap-16 p-16">
{activities.map((activity, i) => (
<ActivityItem
key={activityKey(activity, i)}
activity={activity}
hideIds={hideIds}
/>
))}
</ul>
{limit < size && (
<>
<p className="text-12 mb-16 text-center text-white/60">
{limit} / {size}
</p>
<Button
fullWidth
variant="success"
onClick={() => setLimit(limit + 10)}
>
Show 10 More
</Button>
</>
)}
</>
);
};
interface ActivityItemProps {
activity: Activity;
hideIds: boolean;
}
const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
const { searchParams, setSearchParams } = useActivity();
const { strategy, changes } = activity;
const { base, quote } = strategy;
const setAction = () => {
const actions = searchParams.actions.includes(activity.action)
? []
: [activity.action];
setSearchParams({ actions });
};
return (
<li className="border-background-800 flex flex-col gap-16 rounded border-2">
<header className="flex px-16 pt-16">
{!hideIds && <ActivityId activity={activity} size={12} />}
<p className="text-12 flex flex-1 items-center justify-end gap-8 font-mono text-white/60">
{activityDateFormatter.format(activity.date)}
<TransactionLink txHash={activity.txHash} className="h-16" />
</p>
</header>
<section className="px-16">
<button onClick={setAction} className="text-start">
<h3 className="mb-8 flex items-center gap-8">
<ActivityIcon activity={activity} size={24} />
{activityActionName[activity.action]}
</h3>
<p className="text-12 font-mono text-white/60">
{activityDescription(activity)}
</p>
</button>
</section>
<hr className="border-background-800" />
<table className="w-full table-fixed">
<thead>
<tr className="text-12 font-mono text-white/60">
<th className="font-weight-400 px-16">Buy Budget</th>
<th className="font-weight-400 px-16">Sell Budget</th>
</tr>
</thead>
<tbody>
<tr className="text-14">
<td className="px-16">{tokenAmount(strategy.buy.budget, quote)}</td>
<td className="px-16">{tokenAmount(strategy.sell.budget, base)}</td>
</tr>
<tr className="text-12">
<td className="px-16 pb-16">
<BudgetChange budget={changes?.buy?.budget} token={quote} />
</td>
<td className="px-16 pb-16">
<BudgetChange budget={changes?.sell?.budget} token={base} />
</td>
</tr>
</tbody>
</table>
</li>
);
};