Differential D19604 Diff 58919 cashtab/src/components/Agora/OrderBook/index.tsx

Changeset View

Standalone View

cashtab/src/components/Agora/OrderBook/index.tsx

Show First 20 Lines • Show All 53 Lines • ▼ Show 20 Lines	import {
OrderbookPrice,		OrderbookPrice,
OrderBookLoading,		OrderBookLoading,
OfferWrapper,		OfferWrapper,
OfferHeader,		OfferHeader,
OfferTitleCtn,		OfferTitleCtn,
OfferTitleLink,		OfferTitleLink,
OfferDetailsCtn,		OfferDetailsCtn,
BuyOrderCtn,		BuyOrderCtn,
		BuyOrderSummaryRow,
		BuyOrderSummaryLabel,
		BuyOrderSummaryValue,
		BuyOrderSummaryValueEmphasis,
MintIconSpotWrapper,		MintIconSpotWrapper,
DeltaSpan,		DeltaSpan,
AgoraWarningParagraph,		AgoraWarningParagraph,
OfferHeaderRow,		OfferHeaderRow,
		QuantityLabel,
SliderContainer,		SliderContainer,
SliderInputRow,		SliderInputRow,
PercentageButton,		PercentageButton,
PercentageButtonsRow,		PercentageButtonsRow,
} from './styled';		} from './styled';
import {		import {
AgoraPreviewParagraph,		AgoraPreviewParagraph,
AgoraPreviewTable,		AgoraPreviewTable,
▲ Show 20 Lines • Show All 1,327 Lines • ▼ Show 20 Lines	return (
<SliderContainer>		<SliderContainer>
<Alert noWordBreak>		<Alert noWordBreak>
This offer requires a minimum purchase		This offer requires a minimum purchase
that exceeds your available balance.		that exceeds your available balance.
</Alert>		</Alert>
</SliderContainer>		</SliderContainer>
) : (		) : (
<SliderContainer>		<SliderContainer>
<SliderInputRow>		<QuantityLabel>Quantity</QuantityLabel>
<Slider
name={`Select buy qty ${tokenId}`}
value={takeTokenDecimalizedQty}
error={takeTokenDecimalizedQtyError}
handleSlide={
handleTakeTokenDecimalizedQtySlide
}
// Note that we can only be here if canRenderOrderbook
min={
decimalizedTokenQtyMin as string
}
max={
decimalizedTokenQtyMax as string
}
step={parseFloat(`1e-${decimals}`)}
allowTypedInput
/>
</SliderInputRow>
{!isMaker && (		{!isMaker && (
<PercentageButtonsRow>		<PercentageButtonsRow>
<PercentageButton		<PercentageButton
onClick={() =>		onClick={() =>
handlePercentageButtonClick(		handlePercentageButtonClick(
25,		25,
)		)
}		}
▲ Show 20 Lines • Show All 97 Lines • ▼ Show 20 Lines	return (
? 'Set to 99% of maximum affordable amount'		? 'Set to 99% of maximum affordable amount'
: 'Set to maximum available amount';		: 'Set to maximum available amount';
})()}		})()}
>		>
Max		Max
</PercentageButton>		</PercentageButton>
</PercentageButtonsRow>		</PercentageButtonsRow>
)}		)}
		<SliderInputRow>
		<Slider
		name={`Select buy qty ${tokenId}`}
		value={takeTokenDecimalizedQty}
		error={takeTokenDecimalizedQtyError}
		handleSlide={
		handleTakeTokenDecimalizedQtySlide
		}
		// Note that we can only be here if canRenderOrderbook
		min={
		decimalizedTokenQtyMin as string
		}
		max={
		decimalizedTokenQtyMax as string
		}
		step={parseFloat(`1e-${decimals}`)}
		allowTypedInput
		/>
		</SliderInputRow>
</SliderContainer>		</SliderContainer>
)}		)}
<BuyOrderCtn>		<BuyOrderCtn>
<div>		<BuyOrderSummaryRow>
		<BuyOrderSummaryLabel>
		Buying
		</BuyOrderSummaryLabel>
		<BuyOrderSummaryValue>
{decimalizedTokenQtyToLocaleFormat(		{decimalizedTokenQtyToLocaleFormat(
takeTokenDecimalizedQty,		takeTokenDecimalizedQty,
userLocale,		userLocale,
)}{' '}		)}{' '}
{tokenTicker !== ''		{tokenTicker !== ''
? `${tokenTicker}`		? `${tokenTicker}`
: `${tokenName}`}		: `${tokenName}`}
</div>		</BuyOrderSummaryValue>
		</BuyOrderSummaryRow>
		<BuyOrderSummaryRow>
		<BuyOrderSummaryLabel>
		For
		</BuyOrderSummaryLabel>
{!displaySpotPricesInFiat \|\|		{!displaySpotPricesInFiat \|\|
fiatPrice === null ? (		fiatPrice === null ? (
<h3>		<BuyOrderSummaryValueEmphasis>
{toFormattedXec(askedSats, userLocale)}{' '}		{toFormattedXec(
		askedSats,
		userLocale,
		)}{' '}
XEC		XEC
</h3>		</BuyOrderSummaryValueEmphasis>
) : (		) : (
<h3>		<BuyOrderSummaryValueEmphasis>
{getFormattedFiatPrice(		{getFormattedFiatPrice(
settings.fiatCurrency,		settings.fiatCurrency,
userLocale,		userLocale,
toXec(askedSats),		toXec(askedSats),
fiatPrice,		fiatPrice,
)}		)}
</h3>		</BuyOrderSummaryValueEmphasis>
)}		)}
		</BuyOrderSummaryRow>
{isMaker ? (		{isMaker ? (
<SecondaryButton		<SecondaryButton
onClick={() =>		onClick={() =>
setShowConfirmCancelModal(true)		setShowConfirmCancelModal(true)
}		}
>		>
Cancel your offer		Cancel your offer
</SecondaryButton>		</SecondaryButton>
▲ Show 20 Lines • Show All 45 Lines • Show Last 20 Lines