diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx index 8ea838f7..2059c0aa 100644 --- a/components/account/AccountPage.tsx +++ b/components/account/AccountPage.tsx @@ -459,100 +459,98 @@ const AccountPage = () => { ))} -
- {activeTab === 'account-value' ? ( -
-
-
- {animationSettings['number-scroll'] ? ( - group && mangoAccount ? ( - - ) : ( - - ) + {activeTab === 'account-value' ? ( +
+
+
+ {animationSettings['number-scroll'] ? ( + group && mangoAccount ? ( + ) : ( - - )} -
-
- -

- {t('rolling-change')} -

-
+ ) + ) : ( + + )} +
+
+ +

{t('rolling-change')}

- {!performanceLoading ? ( - oneDayPerformanceData.length ? ( -
- onHoverMenu(showExpandChart, 'onMouseEnter') - } - onMouseLeave={() => - onHoverMenu(showExpandChart, 'onMouseLeave') - } - > - = 0 - ? COLORS.UP[theme] - : COLORS.DOWN[theme] - } - data={oneDayPerformanceData.concat(latestAccountData)} - name="accountValue" - xKey="time" - yKey="account_equity" - /> - - handleShowAccountValueChart()} - > - - - -
- ) : null - ) : mangoAccountAddress ? ( - -
- - ) : null}
- ) : null} - {activeTab === 'account:assets-liabilities' ? ( + {!performanceLoading ? ( + oneDayPerformanceData.length ? ( +
+ onHoverMenu(showExpandChart, 'onMouseEnter') + } + onMouseLeave={() => + onHoverMenu(showExpandChart, 'onMouseLeave') + } + > + = 0 + ? COLORS.UP[theme] + : COLORS.DOWN[theme] + } + data={oneDayPerformanceData.concat(latestAccountData)} + name="accountValue" + xKey="time" + yKey="account_equity" + /> + + handleShowAccountValueChart()} + > + + + +
+ ) : null + ) : mangoAccountAddress ? ( + +
+ + ) : null} +
+ ) : null} + {activeTab === 'account:assets-liabilities' ? ( +
- ) : null} -
+
+ ) : null}
diff --git a/components/account/HealthContributions.tsx b/components/account/HealthContributions.tsx new file mode 100644 index 00000000..c6993721 --- /dev/null +++ b/components/account/HealthContributions.tsx @@ -0,0 +1,73 @@ +// import { useTranslation } from 'next-i18next' +import HealthContributionsChart from './HealthContributionsChart' +import useMangoGroup from 'hooks/useMangoGroup' +import useMangoAccount from 'hooks/useMangoAccount' +import { useMemo } from 'react' +import { HealthType } from '@blockworks-foundation/mango-v4' +import { ArrowLeftIcon } from '@heroicons/react/20/solid' + +export interface HealthContribution { + asset: string + contribution: number + isAsset: boolean +} + +const HealthContributions = ({ hideView }: { hideView: () => void }) => { + // const { t } = useTranslation('account') + const { group } = useMangoGroup() + const { mangoAccount } = useMangoAccount() + + const [initHealthContributions, maintHealthContributions] = useMemo(() => { + if (!group || !mangoAccount) return [[], []] + const init = mangoAccount + .getHealthContributionPerAssetUi(group, HealthType.init) + .filter((asset) => Math.abs(asset.contribution) > 0.01) + .map((item) => ({ + ...item, + contribution: Math.abs(item.contribution), + isAsset: item.contribution > 0 ? true : false, + })) + const maint = mangoAccount + .getHealthContributionPerAssetUi(group, HealthType.maint) + .filter((asset) => Math.abs(asset.contribution) > 0.01) + .map((item) => ({ + ...item, + contribution: Math.abs(item.contribution), + isAsset: item.contribution > 0 ? true : false, + })) + return [init, maint] + }, [group, mangoAccount]) + + console.log(initHealthContributions) + + return ( + <> +
+ + {/*
+ {CHART_TABS.map((tab) => ( + + ))} +
*/} +
+ + + ) +} + +export default HealthContributions diff --git a/components/account/HealthContributionsChart.tsx b/components/account/HealthContributionsChart.tsx new file mode 100644 index 00000000..66d82e12 --- /dev/null +++ b/components/account/HealthContributionsChart.tsx @@ -0,0 +1,126 @@ +import { useTranslation } from 'next-i18next' +import { useTheme } from 'next-themes' +import { Cell, Pie, PieChart, Tooltip } from 'recharts' +import { COLORS } from 'styles/colors' +import { formatCurrencyValue } from 'utils/numbers' +import { formatTokenSymbol } from 'utils/tokens' +import { HealthContribution } from './HealthContributions' + +interface CustomTooltipProps { + active?: boolean + contributions: HealthContribution[] + payload?: { payload: HealthContribution }[] + label?: string | number +} + +const HealthContributionsChart = ({ data }: { data: HealthContribution[] }) => { + const { t } = useTranslation('account') + const { theme } = useTheme() + + const pieSizes = { size: 160, outerRadius: 80, innerRadius: 64 } + const { size, outerRadius, innerRadius } = pieSizes + + const CustomTooltip = ({ + active, + contributions, + payload, + }: CustomTooltipProps) => { + if (active && payload) { + const isActivePayload = payload[0].payload.asset + const total = contributions.reduce((a, c) => { + const assetOrLiability = c.isAsset ? 1 : -1 + return a + c.contribution * assetOrLiability + }, 0) + + return ( +
+
+ {contributions + .sort((a, b) => b.contribution - a.contribution) + .map((asset) => { + const assetOrLiability = asset.isAsset ? 1 : -1 + return ( +
+

+ {formatTokenSymbol(asset.asset)} +

+

+ {formatCurrencyValue( + asset.contribution * assetOrLiability + )} +

+
+ ) + })} +
+
+

{t('total')}

+

+ {formatCurrencyValue(total)} +

+
+
+ ) + } + + return null + } + + return ( +
+ {data.length ? ( + + } + position={{ x: 88, y: 0 }} + /> + + {data.map((entry, index) => { + const fillColor = entry.isAsset + ? COLORS.UP[theme] + : COLORS.DOWN[theme] + return ( + + ) + })} + + + ) : ( +
+ )} +
+ ) +} + +export default HealthContributionsChart diff --git a/public/icons/hnt.svg b/public/icons/hnt.svg new file mode 100644 index 00000000..1666ca8c --- /dev/null +++ b/public/icons/hnt.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/utils/constants.ts b/utils/constants.ts index 36fb3960..86ddda77 100644 --- a/utils/constants.ts +++ b/utils/constants.ts @@ -110,6 +110,7 @@ export const CUSTOM_TOKEN_ICONS: { [key: string]: boolean } = { dual: true, eth: true, 'eth (portal)': true, + hnt: true, jitosol: true, ldo: true, mngo: true,