Rework auction end blockNumber (#4833)
This commit is contained in:
parent
79d5a73692
commit
ad913ef880
@ -6,6 +6,7 @@ import type { AuctionIndex, BlockNumber, LeasePeriodOf } from '@polkadot/types/i
|
||||
import React, { useRef } from 'react';
|
||||
|
||||
import { Table } from '@polkadot/react-components';
|
||||
import { BN_ZERO } from '@polkadot/util';
|
||||
|
||||
import { useTranslation } from '../translate';
|
||||
import useWinningData from './useWinningData';
|
||||
@ -13,11 +14,12 @@ import WinBlock from './WinBlock';
|
||||
|
||||
interface Props {
|
||||
auctionInfo: [LeasePeriodOf, BlockNumber] | null;
|
||||
bestNumber?: BlockNumber;
|
||||
className?: string;
|
||||
numAuctions: AuctionIndex | null;
|
||||
}
|
||||
|
||||
function Auction ({ auctionInfo, className, numAuctions }: Props): React.ReactElement<Props> {
|
||||
function Auction ({ auctionInfo, bestNumber, className, numAuctions }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const winningData = useWinningData();
|
||||
|
||||
@ -27,6 +29,10 @@ function Auction ({ auctionInfo, className, numAuctions }: Props): React.ReactEl
|
||||
[t('value'), 'number']
|
||||
]);
|
||||
|
||||
const offset = auctionInfo && bestNumber && bestNumber.gt(auctionInfo[1])
|
||||
? bestNumber.sub(auctionInfo[1])
|
||||
: BN_ZERO;
|
||||
|
||||
return (
|
||||
<Table
|
||||
className={className}
|
||||
@ -36,11 +42,13 @@ function Auction ({ auctionInfo, className, numAuctions }: Props): React.ReactEl
|
||||
}
|
||||
header={headerRef.current}
|
||||
>
|
||||
{winningData?.map((value, count) => (
|
||||
{offset && bestNumber && winningData?.map((value, count) => (
|
||||
<WinBlock
|
||||
bestNumber={bestNumber}
|
||||
isEven={!!(count % 2)}
|
||||
isLatest={count === 0}
|
||||
key={value.blockNumber.toString()}
|
||||
latestBlockNumber={winningData[0].blockNumber}
|
||||
offset={offset}
|
||||
value={value}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -12,12 +12,14 @@ import { useTranslation } from '../translate';
|
||||
|
||||
interface Props {
|
||||
auctionInfo: [LeasePeriodOf, BlockNumber] | null;
|
||||
bestNumber?: BlockNumber;
|
||||
className?: string;
|
||||
numAuctions?: AuctionIndex | null;
|
||||
}
|
||||
|
||||
function Summary ({ auctionInfo, className, numAuctions }: Props): React.ReactElement<Props> {
|
||||
function Summary ({ auctionInfo, bestNumber, className, numAuctions }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const [period, ending] = auctionInfo || [];
|
||||
|
||||
return (
|
||||
<SummaryBox className={className}>
|
||||
@ -27,11 +29,17 @@ function Summary ({ auctionInfo, className, numAuctions }: Props): React.ReactEl
|
||||
{auctionInfo && (
|
||||
<section>
|
||||
<CardSummary label={t<string>('period')}>
|
||||
{formatNumber(auctionInfo[0])}
|
||||
</CardSummary>
|
||||
<CardSummary label={t<string>('duration')}>
|
||||
{formatNumber(auctionInfo[1])}
|
||||
{formatNumber(period)}
|
||||
</CardSummary>
|
||||
<CardSummary
|
||||
label={t<string>('ending')}
|
||||
progress={{
|
||||
total: ending,
|
||||
value: bestNumber,
|
||||
withTime: true,
|
||||
withTimeNumber: true
|
||||
}}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
</SummaryBox>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// Copyright 2017-2021 @polkadot/app-crowdloan authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type BN from 'bn.js';
|
||||
import type { BlockNumber } from '@polkadot/types/interfaces';
|
||||
import type { Winning } from './types';
|
||||
|
||||
@ -9,22 +10,26 @@ import React from 'react';
|
||||
import WinRange from './WinRange';
|
||||
|
||||
interface Props {
|
||||
bestNumber: BlockNumber;
|
||||
className?: string;
|
||||
isEven: boolean;
|
||||
latestBlockNumber: BlockNumber;
|
||||
isLatest: boolean;
|
||||
offset: BN;
|
||||
value: Winning;
|
||||
}
|
||||
|
||||
function WinBlock ({ className = '', isEven, latestBlockNumber, value: { blockNumber, winners } }: Props): React.ReactElement<Props> {
|
||||
function WinBlock ({ bestNumber, className = '', isEven, isLatest, offset, value: { blockNumber, winners } }: Props): React.ReactElement<Props> {
|
||||
return (
|
||||
<>
|
||||
{winners.map((value, index) => (
|
||||
<WinRange
|
||||
bestNumber={bestNumber}
|
||||
blockNumber={blockNumber}
|
||||
className={`${className} ${isEven ? 'isEven' : 'isOdd'} ${index === (winners.length - 1) ? '' : 'noBorder'}`}
|
||||
isFirst={index === 0}
|
||||
isLatest={isLatest}
|
||||
key={index}
|
||||
latestBlockNumber={latestBlockNumber}
|
||||
offset={offset}
|
||||
value={value}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// Copyright 2017-2021 @polkadot/app-crowdloan authors & contributors
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type BN from 'bn.js';
|
||||
import type { BlockNumber } from '@polkadot/types/interfaces';
|
||||
import type { WinnerData } from './types';
|
||||
|
||||
@ -13,14 +14,16 @@ import { formatNumber } from '@polkadot/util';
|
||||
import { useTranslation } from '../translate';
|
||||
|
||||
interface Props {
|
||||
bestNumber: BlockNumber;
|
||||
blockNumber: BlockNumber;
|
||||
className?: string;
|
||||
isFirst: boolean;
|
||||
latestBlockNumber: BlockNumber;
|
||||
isLatest: boolean;
|
||||
offset: BN;
|
||||
value: WinnerData;
|
||||
}
|
||||
|
||||
function WinRanges ({ blockNumber, className = '', isFirst, latestBlockNumber, value: { accountId, paraId, range, value } }: Props): React.ReactElement<Props> {
|
||||
function WinRanges ({ bestNumber, blockNumber, className = '', isFirst, isLatest, offset, value: { accountId, paraId, range, value } }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
@ -28,9 +31,9 @@ function WinRanges ({ blockNumber, className = '', isFirst, latestBlockNumber, v
|
||||
<td>
|
||||
{isFirst && (
|
||||
<h1>
|
||||
{blockNumber.eq(latestBlockNumber)
|
||||
{isLatest
|
||||
? t<string>('latest')
|
||||
: <>-{formatNumber(latestBlockNumber.sub(blockNumber))}</>
|
||||
: <>#{formatNumber(bestNumber.sub(offset).iadd(blockNumber))}</>
|
||||
}
|
||||
</h1>
|
||||
)}
|
||||
|
||||
@ -8,7 +8,7 @@ import type { ITuple } from '@polkadot/types/types';
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '@polkadot/react-components';
|
||||
import { useApi, useCallMulti } from '@polkadot/react-hooks';
|
||||
import { useApi, useCall, useCallMulti } from '@polkadot/react-hooks';
|
||||
|
||||
import Auction from './Auction';
|
||||
import Bid from './Bid';
|
||||
@ -36,6 +36,7 @@ const optionsMulti = {
|
||||
|
||||
function Auctions ({ className }: Props): React.ReactElement<Props> {
|
||||
const { api } = useApi();
|
||||
const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
|
||||
const { auctionInfo, numAuctions } = useCallMulti<QueryState>([
|
||||
api.query.auctions.auctionCounter,
|
||||
api.query.auctions.auctionInfo
|
||||
@ -45,6 +46,7 @@ function Auctions ({ className }: Props): React.ReactElement<Props> {
|
||||
<div className={className}>
|
||||
<Summary
|
||||
auctionInfo={auctionInfo}
|
||||
bestNumber={bestNumber}
|
||||
numAuctions={numAuctions}
|
||||
/>
|
||||
<Button.Group>
|
||||
@ -52,6 +54,7 @@ function Auctions ({ className }: Props): React.ReactElement<Props> {
|
||||
</Button.Group>
|
||||
<Auction
|
||||
auctionInfo={auctionInfo}
|
||||
bestNumber={bestNumber}
|
||||
numAuctions={numAuctions}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ import type { WinnerData, Winning } from './types';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { useApi, useExtrinsicTrigger } from '@polkadot/react-hooks';
|
||||
import { useApi, useEventTrigger } from '@polkadot/react-hooks';
|
||||
|
||||
const RANGES = [
|
||||
'0-0', '0-1', '0-2', '0-3',
|
||||
@ -52,7 +52,7 @@ function extractData (values: [StorageKey<[BlockNumber]>, Option<WinningData>][]
|
||||
export default function useWinningData (): Winning[] | null {
|
||||
const { api } = useApi();
|
||||
const [winning, setWinning] = useState<Winning[] | null>(null);
|
||||
const trigger = useExtrinsicTrigger([api.tx.auctions.bid]);
|
||||
const trigger = useEventTrigger([api.events.auctions.BidAccepted]);
|
||||
|
||||
useEffect((): void => {
|
||||
trigger &&
|
||||
|
||||
@ -19,6 +19,7 @@ interface ProgressProps {
|
||||
total?: BN | UInt;
|
||||
value?: BN | UInt;
|
||||
withTime?: boolean;
|
||||
withTimeNumber?: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@ -65,7 +66,9 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
|
||||
progress && !progress.hideValue && (
|
||||
<>
|
||||
{isTimed && (
|
||||
<BlockToTime blocks={progress.total} />
|
||||
progress.withTimeNumber
|
||||
? formatNumber(progress.total)
|
||||
: <BlockToTime blocks={progress.total} />
|
||||
)}
|
||||
<div className={isTimed ? 'isSecondary' : 'isPrimary'}>
|
||||
{!left || isUndefined(progress.total)
|
||||
|
||||
@ -60,7 +60,9 @@ function Progress ({ className = '', isDisabled, size = 'normal', total, value }
|
||||
angle={
|
||||
angle <= 180
|
||||
? '0'
|
||||
: (angle - 180).toFixed(1)
|
||||
: angle >= 360
|
||||
? '180'
|
||||
: (angle - 180).toFixed(1)
|
||||
}
|
||||
type='second'
|
||||
/>
|
||||
|
||||
@ -29,7 +29,9 @@ export function useBlockTime (blocks = BN_ONE, apiOverride?: ApiPromise): Result
|
||||
a.consts.timestamp?.minimumPeriod.muln(2) ||
|
||||
DEFAULT_TIME
|
||||
);
|
||||
const time = extractTime(blockTime.mul(blocks).toNumber());
|
||||
const value = blockTime.mul(blocks).toNumber();
|
||||
const prefix = value < 0 ? '+' : '';
|
||||
const time = extractTime(Math.abs(value));
|
||||
const { days, hours, minutes, seconds } = time;
|
||||
const timeStr = [
|
||||
days ? (days > 1) ? t<string>('{{days}} days', { replace: { days } }) : t<string>('1 day') : null,
|
||||
@ -43,7 +45,7 @@ export function useBlockTime (blocks = BN_ONE, apiOverride?: ApiPromise): Result
|
||||
|
||||
return [
|
||||
blockTime.toNumber(),
|
||||
timeStr,
|
||||
`${prefix}${timeStr}`,
|
||||
time
|
||||
];
|
||||
},
|
||||
|
||||
@ -21,7 +21,7 @@ interface Props {
|
||||
function BlockToTime ({ api, blocks, children, className = '', isInline, label }: Props): React.ReactElement<Props> | null {
|
||||
const [, text] = useBlockTime(blocks, api);
|
||||
|
||||
if (blocks?.ltn(0)) {
|
||||
if (!blocks || blocks.isZero()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user