8000 chore: display prices as full number on sales page by rajk93 · Pull Request #11554 · polkadot-js/apps · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

chore: display prices as 8000 full number on sales page #11554

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

Merged
merged 3 commits into from
May 20, 2025
Merged

chore: display prices as full number on sales page #11554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
722c020
chore: display prices as full number on sales page
rajk93 May 14, 2025
404698b
fix: requested changes and ui fixes
rajk93 May 15, 2025
ad590ab
refactor: simplify layout structure in Timeline component
ap211unitech May 19, 2025
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: 6 additions & 3 deletions packages/page-coretime/src/Sale/boxes/Cores.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ import React, { useMemo } from 'react';

import { styled } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
import { formatBalance } from '@polkadot/util';

import { PhaseName } from '../../constants.js';
import { useTranslation } from '../../translate.js';
import { getCorePriceAt } from '../../utils/sale.js';
import { formatBNToBalance, getCorePriceAt } from '../../utils/sale.js';
import { WhiteBox } from '../../WhiteBox.js';

export const Cores = ({ color, phaseName, salesInfo }: { phaseName: string, salesInfo: CoretimeInformation['salesInfo'], color: string }) => {
Expand All @@ -21,6 +20,10 @@ export const Cores = ({ color, phaseName, salesInfo }: { phaseName: string, sale
const bestNumberFinalized = useCall<BlockNumber>(apiCoretime?.derive.chain.bestNumberFinalized);
const coretimePrice = useMemo(() => bestNumberFinalized && salesInfo && getCorePriceAt(bestNumberFinalized.toNumber(), salesInfo), [salesInfo, bestNumberFinalized]);

const formattedCoretimePrice = useMemo(() => {
return !coretimePrice ? null : formatBNToBalance(coretimePrice);
}, [coretimePrice]);

const CoresWrapper = styled(WhiteBox)`
justify-self: flex-end;

Expand All @@ -42,7 +45,7 @@ export const Cores = ({ color, phaseName, salesInfo }: { phaseName: string, sale
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<div>
<p style={{ fontSize: '14px', marginBottom: '0.15rem', opacity: '0.8' }}>{t('current price')}</p>
<p style={{ color: `${color}`, fontSize: '20px' }}> {coretimePrice && formatBalance(coretimePrice)}</p>
<p style={{ color: `${color}`, fontSize: '20px' }}>{formattedCoretimePrice}</p>
</div>
<div>
<p style={{ fontSize: '14px', marginBottom: '0.15rem', opacity: '0.8' }}>{t('available cores')}</p>
Expand Down
60 changes: 39 additions & 21 deletions packages/page-coretime/src/Sale/boxes/Timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,12 @@ import type { CoretimeInformation } from '@polkadot/react-hooks/types';
import React, { useMemo } from 'react';

import { CardSummary, ProgressBar, styled, SummaryBox } from '@polkadot/react-components';
import { formatBalance, formatNumber } from '@polkadot/util';
import { formatNumber } from '@polkadot/util';

import { useTranslation } from '../../translate.js';
import { getCorePriceAt, getSaleProgress } from '../../utils/sale.js';
import { formatBNToBalance, getCorePriceAt, getSaleProgress } from '../../utils/sale.js';
import { WhiteBox } from '../../WhiteBox.js';

const TimelineWrapper = styled(WhiteBox)`
justify-self: flex-start;

@media (min-width: 769px) and (max-width: 1024px) {
width: 100%;
}
`;

interface TimelineProps {
phaseName: string;
saleParams: SaleParameters;
Expand All @@ -45,31 +37,57 @@ export const Timeline = ({ color, coretimeInfo: { salesInfo, status }, phaseName

const coretimePriceStart = useMemo(() => salesInfo && getCorePriceAt(salesInfo.saleStart, salesInfo), [salesInfo]);

const endPrice = useMemo(() => salesInfo.endPrice.toNumber() < 10 ** formatBalance.getDefaults().decimals
? `${salesInfo.endPrice.toNumber() / 10 ** formatBalance.getDefaults().decimals} ${formatBalance.getDefaults().unit}`
: formatBalance(salesInfo.endPrice), [salesInfo.endPrice]);
const startPrice = useMemo(() => coretimePriceStart && formatBNToBalance(coretimePriceStart), [coretimePriceStart]);
const endPrice = useMemo(() => salesInfo?.endPrice && formatBNToBalance(salesInfo.endPrice), [salesInfo?.endPrice]);

return (
<TimelineWrapper>
<p style={{ fontSize: '16px', fontWeight: 'bold' }}>{t('Sale timeline')}</p>
<SummaryBox>
<section>
<StyledSummaryBox>
<GridLayout>
{phaseName && <>
<CardSummary label='current phase'>{phaseName}</CardSummary>
<CardSummary label='current phase end'>{saleParams?.phaseConfig?.config[phaseName as keyof typeof saleParams.phaseConfig.config].end.date}</CardSummary>
<CardSummary label='last phase block'>{formatNumber(saleParams?.phaseConfig?.config[phaseName as keyof typeof saleParams.phaseConfig.config].end.blocks.relay)}</CardSummary>
</>}
<CardSummary label='start price'>{formatBalance(coretimePriceStart)}</CardSummary>
<CardSummary label='start price'>{startPrice}</CardSummary>
<CardSummary label='fixed price'>{endPrice}</CardSummary>
</section>
<section>

</section>
</SummaryBox>
</GridLayout>
</StyledSummaryBox>
<ProgressBar
color={color}
sections={progressValues as ProgressBarSection[] ?? []}
/>
</TimelineWrapper>
);
};

const TimelineWrapper = styled(WhiteBox)`
justify-self: flex-start;

@media (min-width: 769px) and (max-width: 1024px) {
width: 100%;
}
`;

const StyledSummaryBox = styled(SummaryBox)`
margin-top: 0;
`;

const GridLayout = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 0.5rem;
row-gap: 1rem;
width: 100%;

/* Override CardSummary styling to align text left and remove padding */
article {
justify-content: flex-start;
padding: 0;

> .ui--Labelled {
text-align: left;
}
}
`;
10 changes: 9 additions & 1 deletion packages/page-coretime/src/utils/sale.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,22 @@ import type { ChainConstants, PalletBrokerConfigRecord, PalletBrokerSaleInfoReco
import type { GetResponse, PhaseConfig, RegionInfo, RelayName, SaleParameters } from '../types.js';

import { type ProgressBarSection } from '@polkadot/react-components/types';
import { BN } from '@polkadot/util';
import { BN, formatBalance } from '@polkadot/util';

import { PhaseName } from '../constants.js';
import { createGet, estimateTime, FirstCycleStart, getCurrentRegionStartEndTs } from './index.js';

// We are scaling everything to avoid floating point precision issues.
const SCALE = new BN(10000);

/**
* Formats a BN value to a human-readable balance string with proper units
*
* @param num - The BN value to format
* @returns A formatted string with the balance value and unit
*/
export const formatBNToBalance = (num: BN) => formatBalance(num, { forceUnit: formatBalance.getDefaults().unit, withAll: true, withUnit: true });

export const leadinFactorAt = (scaledWhen: BN): BN => {
const scaledHalf = SCALE.div(new BN(2)); // 0.5 scaled to 10000

Expand Down
0