Rework auction end blockNumber (#4833)

This commit is contained in:
Jaco Greeff 2021-03-12 20:02:57 +01:00 committed by GitHub
parent 79d5a73692
commit ad913ef880
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 57 additions and 23 deletions

View File

@ -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}
/>
))}

View File

@ -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>

View File

@ -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}
/>
))}

View File

@ -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>
)}

View File

@ -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>

View File

@ -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 &&

View File

@ -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)

View File

@ -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'
/>

View File

@ -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
];
},

View File

@ -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;
}