6db09974d6
* chore(ui-toolkit): add aria label to icon for a11y (#621) * chore(ui-toolkit): add labels for form-groups for a11y (#621) * fix(ui-toolkit): fix form inputs storybook for a11y (#621) * feat(ui-toolkit): add strict eslint a11y and components config (#621) * chore(ui-toolkit): add translate t to form labels
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { FormGroup, Input } from '@vegaprotocol/ui-toolkit';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
import { validateSize } from '../utils/validate-size';
|
|
import type { DealTicketAmountProps } from './deal-ticket-amount';
|
|
|
|
export type DealTicketMarketAmountProps = Omit<
|
|
DealTicketAmountProps,
|
|
'orderType'
|
|
>;
|
|
|
|
export const DealTicketMarketAmount = ({
|
|
register,
|
|
price,
|
|
step,
|
|
quoteName,
|
|
}: DealTicketMarketAmountProps) => {
|
|
return (
|
|
<div className="flex items-center gap-8">
|
|
<div className="flex-1">
|
|
<FormGroup label={t('Amount')} labelFor="input-order-size-market">
|
|
<Input
|
|
id="input-order-size-market"
|
|
className="w-full"
|
|
type="number"
|
|
step={step}
|
|
min={step}
|
|
data-testid="order-size"
|
|
{...register('size', {
|
|
required: true,
|
|
min: step,
|
|
validate: validateSize(step),
|
|
})}
|
|
/>
|
|
</FormGroup>
|
|
</div>
|
|
<div className="pt-4">@</div>
|
|
<div className="flex-1 pt-4" data-testid="last-price">
|
|
{price && quoteName ? (
|
|
<>
|
|
~{price} {quoteName}
|
|
</>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|