Skip to content

Commit

Permalink
Merge branch 'polkadot-redesign-1401' into treasury-detail-mythos-1423
Browse files Browse the repository at this point in the history
  • Loading branch information
@leocs2417
leocs2417 committed Nov 14, 2024
2 parents 15f3d1b + 0008dfd commit 26e2a14
Show file tree
Hide file tree
Showing 8 changed files with 120 additions and 54 deletions.
9 changes: 8 additions & 1 deletion site/src/components/ValueDisplay.jsx
View file
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
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
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
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
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
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
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

0 comments on commit 26e2a14

Please sign in to comment.