/
MyActivityCard.tsx
56 lines (48 loc) · 1.71 KB
/
MyActivityCard.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
import "./MyActivityCard.scss"
import React, { ReactElement } from "react"
import { HistoricalPoolDataType } from "../hooks/useHistoricalPoolData"
import { commify } from "@ethersproject/units"
import { formatBNToString } from "../utils"
import { useTranslation } from "react-i18next"
interface Props {
historicalPoolData: HistoricalPoolDataType | null
}
function MyActivityCard({ historicalPoolData }: Props): ReactElement | null {
const { t } = useTranslation()
if (!historicalPoolData) return null
const historicalFormattedData = historicalPoolData
? {
totalDepositsUSD: commify(
formatBNToString(historicalPoolData.totalDepositsUSD, 36, 2),
),
totalWithdrawalsUSD: commify(
formatBNToString(historicalPoolData.totalWithdrawalsUSD, 36, 2),
),
totalProfitUSD: commify(
formatBNToString(historicalPoolData.totalProfitUSD, 36, 2),
),
}
: null
return (
<div className="myActivityCard">
<h4>{t("myActivity")}</h4>
{historicalFormattedData ? (
<div className="activityTable">
<div key="deposits-usd">
<span className="label">USD {t("deposit")}</span>
<span>{`$${historicalFormattedData.totalDepositsUSD}`}</span>
</div>
<div key="withdrawals-usd">
<span className="label">USD {t("withdrawal")}</span>
<span>{`$${historicalFormattedData.totalWithdrawalsUSD}`}</span>
</div>
<div key="profit-usd">
<span className="label">USD {t("profit")}</span>
<span>{`$${historicalFormattedData.totalProfitUSD}`}</span>
</div>
</div>
) : null}
</div>
)
}
export default MyActivityCard