chore(deal-ticket): make margin warning more subtle (#4732)
This commit is contained in:
parent
a868f6d2f5
commit
84e40ccb2b
@ -1,6 +1,12 @@
|
||||
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
|
||||
import { t } from '@vegaprotocol/i18n';
|
||||
import { Notification, Intent } from '@vegaprotocol/ui-toolkit';
|
||||
import {
|
||||
Intent,
|
||||
VegaIcon,
|
||||
VegaIconNames,
|
||||
Tooltip,
|
||||
TradingButton,
|
||||
} from '@vegaprotocol/ui-toolkit';
|
||||
|
||||
interface Props {
|
||||
margin: string;
|
||||
@ -14,24 +20,43 @@ interface Props {
|
||||
}
|
||||
|
||||
export const MarginWarning = ({ margin, balance, asset, onDeposit }: Props) => {
|
||||
const description = (
|
||||
<div className="flex flex-col items-start gap-2 p-2">
|
||||
<p className="text-sm">
|
||||
{t('%s %s is currently required.', [
|
||||
addDecimalsFormatNumber(margin, asset.decimals),
|
||||
asset.symbol,
|
||||
])}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
{t('You have only %s.', [
|
||||
addDecimalsFormatNumber(balance, asset.decimals),
|
||||
])}
|
||||
</p>
|
||||
|
||||
<TradingButton
|
||||
intent={Intent.Warning}
|
||||
size="small"
|
||||
onClick={() => onDeposit(asset.id)}
|
||||
data-testid="deal-ticket-deposit-dialog-button"
|
||||
type="button"
|
||||
>
|
||||
{t('Deposit %s', [asset.symbol])}
|
||||
</TradingButton>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Notification
|
||||
intent={Intent.Warning}
|
||||
testId="deal-ticket-warning-margin"
|
||||
message={`You may not have enough margin available to open this position. ${addDecimalsFormatNumber(
|
||||
margin,
|
||||
asset.decimals
|
||||
)} ${asset.symbol} ${t(
|
||||
'is currently required. You have only'
|
||||
)} ${addDecimalsFormatNumber(balance, asset.decimals)} ${
|
||||
asset.symbol
|
||||
} ${t('available.')}`}
|
||||
buttonProps={{
|
||||
text: t(`Deposit ${asset.symbol}`),
|
||||
action: () => onDeposit(asset.id),
|
||||
dataTestId: 'deal-ticket-deposit-dialog-button',
|
||||
size: 'small',
|
||||
}}
|
||||
/>
|
||||
<Tooltip description={description}>
|
||||
<div
|
||||
className="flex text-xs items-center"
|
||||
data-testid="deal-ticket-warning-margin"
|
||||
>
|
||||
<span className="text-yellow-500 mr-2">
|
||||
<VegaIcon name={VegaIconNames.WARNING} />
|
||||
</span>
|
||||
{t('You may not have enough margin available to open this position.')}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,7 @@
|
||||
export const IconWarning = ({ size = 16 }: { size: number }) => {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 16 16">
|
||||
<path d="M15.84 13.5l.01-.01-7-12-.01.01c-.17-.3-.48-.5-.85-.5s-.67.2-.85.5l-.01-.01-7 12 .01.01c-.09.15-.15.31-.15.5 0 .55.45 1 1 1h14c.55 0 1-.45 1-1 0-.19-.06-.35-.15-.5zm-6.85-.51h-2v-2h2v2zm0-3h-2v-5h2v5z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
@ -36,6 +36,7 @@ import { IconTrendDown } from './svg-icons/icon-trend-down';
|
||||
import { IconTrendUp } from './svg-icons/icon-trend-up';
|
||||
import { IconTwitter } from './svg-icons/icon-twitter';
|
||||
import { IconVote } from './svg-icons/icon-vote';
|
||||
import { IconWarning } from './svg-icons/icon-warning';
|
||||
import { IconWithdraw } from './svg-icons/icon-withdraw';
|
||||
|
||||
export enum VegaIconNames {
|
||||
@ -78,6 +79,7 @@ export enum VegaIconNames {
|
||||
TWITTER = 'twitter',
|
||||
VOTE = 'vote',
|
||||
WITHDRAW = 'withdraw',
|
||||
WARNING = 'warning',
|
||||
}
|
||||
|
||||
export const VegaIconNameMap: Record<
|
||||
@ -123,4 +125,5 @@ export const VegaIconNameMap: Record<
|
||||
twitter: IconTwitter,
|
||||
vote: IconVote,
|
||||
withdraw: IconWithdraw,
|
||||
warning: IconWarning,
|
||||
};
|
||||
|
@ -4,7 +4,7 @@ import { TradingCheckbox } from './checkbox';
|
||||
|
||||
export default {
|
||||
component: TradingCheckbox,
|
||||
title: 'Checkbox',
|
||||
title: 'Checkbox - trading',
|
||||
} as Meta<typeof TradingCheckbox>;
|
||||
|
||||
const Template: StoryFn<TradingCheckboxProps> = (args) => (
|
||||
|
@ -4,7 +4,7 @@ import type { TradingFormGroupProps } from './form-group';
|
||||
import { TradingFormGroup } from './form-group';
|
||||
export default {
|
||||
component: TradingFormGroup,
|
||||
title: 'FormGroup',
|
||||
title: 'FormGroup trading',
|
||||
argTypes: {
|
||||
label: {
|
||||
type: 'string',
|
||||
|
@ -3,7 +3,7 @@ import { TradingInputError } from './input-error';
|
||||
|
||||
export default {
|
||||
component: TradingInputError,
|
||||
title: 'InputError',
|
||||
title: 'InputError trading',
|
||||
} as Meta;
|
||||
|
||||
const Template: StoryFn = (args) => <TradingInputError {...args} />;
|
||||
|
@ -3,7 +3,7 @@ import { TradingInput } from './input';
|
||||
import { FormGroup } from '../form-group';
|
||||
export default {
|
||||
component: TradingInput,
|
||||
title: 'Input',
|
||||
title: 'Input trading',
|
||||
} as Meta;
|
||||
|
||||
const Template: StoryFn = (args) => (
|
||||
|
@ -4,7 +4,7 @@ import { TradingRadioGroup, TradingRadio } from './radio-group';
|
||||
|
||||
export default {
|
||||
component: TradingRadioGroup,
|
||||
title: 'RadioGroup',
|
||||
title: 'RadioGroup trading',
|
||||
} as Meta;
|
||||
|
||||
const Template: StoryFn<TradingRadioGroupProps> = (args) => (
|
||||
|
@ -4,7 +4,7 @@ import { FormGroup } from '../form-group';
|
||||
|
||||
export default {
|
||||
component: TradingSelect,
|
||||
title: 'Select',
|
||||
title: 'Select trading',
|
||||
} as Meta;
|
||||
|
||||
const Template: StoryFn = (args) => (
|
||||
|
Loading…
Reference in New Issue
Block a user