Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

treasury detail add fiat value prefix and tooltip #1401 #1424

Merged
merged 1 commit into from
Nov 14, 2024
Merged

treasury detail add fiat value prefix and tooltip #1401 #1424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion site/src/components/ValueDisplay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ function checkApproximateEqual(value, rawValue) {
return getEffectiveNumbers(value) !== getEffectiveNumbers(rawValue);
}

export default function ValueDisplay({ value, precision, fixed = 2 }) {
export default function ValueDisplay({
value,
precision = 0,
fixed = 2,
prefix = "",
}) {
const balance = toPrecision(value, precision);

if (Number(balance) > 100000) {
Expand All @@ -21,6 +26,7 @@ export default function ValueDisplay({ value, precision, fixed = 2 }) {
return (
<>
<span>{isApproximateEqual ? "≈ " : ""}</span>
{prefix}
<span>{abbreviateNum}</span>
</>
);
Expand All @@ -32,6 +38,7 @@ export default function ValueDisplay({ value, precision, fixed = 2 }) {
return (
<>
<span>{isApproximateEqual ? "≈ " : ""}</span>
{prefix}
<span>{fixedNum.toLocaleString()}</span>
</>
);
Expand Down
56 changes: 36 additions & 20 deletions site/src/pages/Overview/polkadot/totalTreasury.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { MYTH } from "../../../constants/foreignAssets";
import { MYTH_TOKEN_ACCOUNT } from "../../../constants/foreignAssets";
import useFiatPrice from "../../../hooks/useFiatPrice";
import useQueryRelayChainFree from "../../../hooks/treasury/useQueryRelayChainFree";
import Tooltip from "../../../components/Tooltip";

const Wrapper = styled(Card)`
padding: 24px;
Expand Down Expand Up @@ -110,6 +111,10 @@ export default function OverviewTotalTreasury() {
loansBifrostDotBalance.balance,
loansPendulumDotBalance.balance,
);
const totalDotValue = BigNumber(
toPrecision(totalDot, polkadot.decimals),
).multipliedBy(dotPrice);

const totalUSDt = BigNumber.sum(
hydration.usdt || 0,
fellowshipSalaryUsdtBalance.balance || 0,
Expand All @@ -119,14 +124,15 @@ export default function OverviewTotalTreasury() {
loansCentrifugeUsdcBalance.balance,
);
const totalMythToken = mythTokenAssetsBalance.balance;
const totalMythTokenValue = BigNumber(
toPrecision(totalMythToken, MYTH.decimals),
).multipliedBy(mythTokenPrice);

const total = BigNumber.sum(
BigNumber(toPrecision(totalDot, polkadot.decimals)).multipliedBy(dotPrice),
totalDotValue,
toPrecision(totalUSDt, USDt.decimals),
toPrecision(totalUSDC, USDC.decimals),
BigNumber(toPrecision(totalMythToken, MYTH.decimals)).multipliedBy(
mythTokenPrice,
),
totalMythTokenValue,
).toString();

const isLoading =
Expand All @@ -143,25 +149,29 @@ export default function OverviewTotalTreasury() {

return (
<Wrapper>
<div>
<div style={{ padding: "0 12px" }}>
<Title>Total Treasury</Title>
<TotalPrice>
{isLoading ? (
<SkeletonBar width={120} height={36} />
) : (
<ValueDisplay value={total} precision={0} />
<ValueDisplay value={total} prefix="$" />
)}
</TotalPrice>
</div>

<TokenGroup>
<TokenItem
icon="asset-dot.svg"
isLoading={isLoading}
totalValue={totalDot}
precision={polkadot.decimals}
symbol={polkadot.symbol}
/>
<Tooltip
tooltipContent={<ValueDisplay value={totalDotValue} prefix="$" />}
>
<TokenItem
icon="asset-dot.svg"
isLoading={isLoading}
totalValue={totalDot}
precision={polkadot.decimals}
symbol={polkadot.symbol}
/>
</Tooltip>
<TokenItem
icon="asset-usdt.svg"
isLoading={isLoading}
Expand All @@ -176,13 +186,19 @@ export default function OverviewTotalTreasury() {
precision={USDC.decimals}
symbol={USDC.symbol}
/>
<TokenItem
icon="asset-myth.svg"
isLoading={isLoading}
totalValue={totalMythToken}
precision={MYTH.decimals}
symbol={MYTH.symbol}
/>
<Tooltip
tooltipContent={
<ValueDisplay value={totalMythTokenValue} prefix="$" />
}
>
<TokenItem
icon="asset-myth.svg"
isLoading={isLoading}
totalValue={totalMythToken}
precision={MYTH.decimals}
symbol={MYTH.symbol}
/>
</Tooltip>
</TokenGroup>
</Wrapper>
);
Expand Down
26 changes: 18 additions & 8 deletions site/src/pages/Overview/polkadot/treasuryDetail/assets.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,23 @@ const AssetGroup = styled.div`
`;

export default function TreasuryDetailAssets() {
const overview = useSelector(overviewSelector);
const dotPrice = overview?.latestSymbolPrice ?? 0;

const relayChainFree = useQueryRelayChainFree();
const totalRelayChainFreeValue = BigNumber(
toPrecision(relayChainFree.balance, polkadot.decimals),
).multipliedBy(dotPrice);
const [dotValue, dotLoading] = useAssetHubDot();
const totalDotValue = BigNumber(
toPrecision(dotValue, polkadot.decimals),
).multipliedBy(dotPrice);
const [usdtValue, usdtLoading] = useAssetHubAsset(ASSET_HUB_USDT_ASSET_ID);
const [usdcValue, usdcLoading] = useAssetHubAsset(ASSET_HUB_USDC_ASSET_ID);

const overview = useSelector(overviewSelector);
const dotPrice = overview?.latestSymbolPrice ?? 0;

const total = BigNumber.sum(
BigNumber(
toPrecision(relayChainFree.balance, polkadot.decimals),
).multipliedBy(dotPrice),
BigNumber(toPrecision(dotValue, polkadot.decimals)).multipliedBy(dotPrice),
totalRelayChainFreeValue,
totalDotValue,
toPrecision(usdtValue, USDt.decimals),
toPrecision(usdcValue, USDC.decimals),
).toString();
Expand All @@ -50,7 +54,7 @@ export default function TreasuryDetailAssets() {
title="Assets"
titleTooltipContent="Funds of DOT & stablecoin"
iconSrc="/imgs/data-asset-1.svg"
content={<ValueDisplay value={total} precision={0} />}
content={<ValueDisplay value={total} prefix="$" />}
isLoading={isLoading}
footer={
<AssetGroup>
Expand All @@ -63,6 +67,9 @@ export default function TreasuryDetailAssets() {
value={relayChainFree.balance}
precision={polkadot.decimals}
isLoading={relayChainFree.isLoading}
valueTooltipContent={
<ValueDisplay value={totalRelayChainFreeValue} prefix="$" />
}
/>
</AssetItem>

Expand All @@ -75,6 +82,9 @@ export default function TreasuryDetailAssets() {
value={dotValue}
precision={polkadot.decimals}
isLoading={dotLoading}
valueTooltipContent={
<ValueDisplay value={totalDotValue} prefix="$" />
}
/>
<AssetValueDisplay
symbol="usdt"
Expand Down
6 changes: 3 additions & 3 deletions site/src/pages/Overview/polkadot/treasuryDetail/bounties.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,13 @@ const Link = styled(LinkOrigin)`
}
`;

// TODO: overview, loading effects
export default function TreasuryDetailBounties() {
const { bounties, bountiesCount } = useBountiesData();
const { balance, isLoading } = useBountiesTotalBalance(bounties);
const overview = useSelector(overviewSelector);
const dotPrice = overview?.latestSymbolPrice ?? 0;

const total = toPrecision(
const totalValue = toPrecision(
BigNumber(balance).multipliedBy(dotPrice),
polkadot.decimals,
);
Expand All @@ -41,7 +40,7 @@ export default function TreasuryDetailBounties() {
}
titleTooltipContent="Funds for bounty programs"
iconSrc="/imgs/data-bounties.svg"
content={<ValueDisplay value={total} precision={0} />}
content={<ValueDisplay value={totalValue} prefix="$" />}
isLoading={isLoading}
footer={
<AssetWrapper>
Expand All @@ -50,6 +49,7 @@ export default function TreasuryDetailBounties() {
value={balance}
precision={polkadot.decimals}
isLoading={isLoading}
valueTooltipContent={<ValueDisplay value={totalValue} prefix="$" />}
/>
</AssetWrapper>
}
Expand Down
19 changes: 16 additions & 3 deletions site/src/pages/Overview/polkadot/treasuryDetail/common/assetValueDisplay.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import styled from "styled-components";
import ValueDisplay from "../../../../../components/ValueDisplay";
import { p_14_medium, p_14_semibold } from "../../../../../styles/text";
import SkeletonBar from "../../../../../components/skeleton/bar";
import TooltipOrigin from "../../../../../components/Tooltip";

const Wrapper = styled.div`
display: flex;
Expand All @@ -25,13 +26,27 @@ const ValueWrapper = styled.div`
${p_14_medium}
`;

const Tooltip = styled(TooltipOrigin)`
display: inline-block;
`;

export default function AssetValueDisplay({
symbol = "",
value,
precision,
fixed = 2,
isLoading,
valueTooltipContent,
}) {
let valueContent = (
<ValueDisplay value={value} precision={precision} fixed={fixed} />
);
if (valueTooltipContent) {
valueContent = (
<Tooltip tooltipContent={valueTooltipContent}>{valueContent}</Tooltip>
);
}

return (
<Wrapper>
<SymbolWrapper>
Expand All @@ -43,9 +58,7 @@ export default function AssetValueDisplay({
{isLoading ? (
<SkeletonBar width={80} height={16} />
) : (
<div>
<ValueDisplay value={value} precision={precision} fixed={fixed} />
</div>
<div>{valueContent}</div>
)}
</ValueWrapper>
</Wrapper>
Expand Down
17 changes: 11 additions & 6 deletions site/src/pages/Overview/polkadot/treasuryDetail/fellowship.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,19 @@ const AssetGroup = styled.div`
`;

export default function TreasuryDetailFellowship() {
const overview = useSelector(overviewSelector);
const dotPrice = overview?.latestSymbolPrice ?? 0;

const usdt = useQueryFellowshipSalaryBalance("USDt");
const treasury = useQueryAssetHubTreasuryFree(
STATEMINT_FELLOWSHIP_TREASURY_ACCOUNT,
);
const overview = useSelector(overviewSelector);
const dotPrice = overview?.latestSymbolPrice ?? 0;
const totalTreasuryValue = BigNumber(
toPrecision(treasury.balance, polkadot.decimals),
).multipliedBy(dotPrice);

const total = BigNumber.sum(
BigNumber(toPrecision(treasury.balance, polkadot.decimals)).multipliedBy(
dotPrice,
),
totalTreasuryValue,
toPrecision(usdt.balance, USDt.decimals),
).toString();

Expand All @@ -44,7 +46,7 @@ export default function TreasuryDetailFellowship() {
title="Fellowship"
titleTooltipContent="Fellowship spending account & salary treasury"
iconSrc="/imgs/data-collectives.svg"
content={<ValueDisplay value={total} precision={0} />}
content={<ValueDisplay value={total} prefix="$" />}
isLoading={isLoading}
footer={
<AssetGroup>
Expand All @@ -57,6 +59,9 @@ export default function TreasuryDetailFellowship() {
value={treasury.balance}
precision={currentChainSettings.decimals}
isLoading={treasury.isLoading}
valueTooltipContent={
<ValueDisplay value={totalTreasuryValue} prefix="$" />
}
/>
</AssetItem>

Expand Down
13 changes: 10 additions & 3 deletions site/src/pages/Overview/polkadot/treasuryDetail/hydration.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,16 @@ const ExplorerLink = styled(ExplorerLinkOrigin)`
`;

export default function TreasuryDetailHydration() {
const { usdc, usdt, dot, isLoading } = useHydrationTreasuryBalances();
const overview = useSelector(overviewSelector);
const dotPrice = overview?.latestSymbolPrice ?? 0;

const { usdc, usdt, dot, isLoading } = useHydrationTreasuryBalances();
const totalDotValue = BigNumber(
toPrecision(dot, polkadot.decimals),
).multipliedBy(dotPrice);

const total = BigNumber.sum(
BigNumber(toPrecision(dot, polkadot.decimals)).multipliedBy(dotPrice),
totalDotValue,
toPrecision(usdt, USDt.decimals),
toPrecision(usdc, USDC.decimals),
).toString();
Expand All @@ -49,7 +53,7 @@ export default function TreasuryDetailHydration() {
title="Hydration"
titleTooltipContent="Treasury stablecoin acquisition"
iconSrc="/imgs/data-hydration.svg"
content={<ValueDisplay value={total} precision={0} />}
content={<ValueDisplay value={total} prefix="$" />}
isLoading={isLoading}
footer={
<AssetWrapper>
Expand All @@ -70,6 +74,9 @@ export default function TreasuryDetailHydration() {
value={dot}
precision={polkadot.decimals}
isLoading={isLoading}
valueTooltipContent={
<ValueDisplay value={totalDotValue} prefix="$" />
}
/>
<AssetValueDisplay
symbol="usdt"
Expand Down
Loading