mirror of https://github.com/certusone/oyster.git
feat: Pause point for first part of form
This commit is contained in:
parent
8a7b2b377c
commit
a0530957d5
|
@ -21,7 +21,7 @@ export class NumericInput extends React.Component<any, any> {
|
||||||
if (value.startsWith && (value.startsWith('.') || value.startsWith('-.'))) {
|
if (value.startsWith && (value.startsWith('.') || value.startsWith('-.'))) {
|
||||||
valueTemp = valueTemp.replace('.', '0.');
|
valueTemp = valueTemp.replace('.', '0.');
|
||||||
}
|
}
|
||||||
onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
|
if (valueTemp.replace) onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
|
||||||
if (onBlur) {
|
if (onBlur) {
|
||||||
onBlur();
|
onBlur();
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,7 +61,8 @@ export const LABELS = {
|
||||||
TRADING_TABLE_TITLE_ACTIONS: 'Action',
|
TRADING_TABLE_TITLE_ACTIONS: 'Action',
|
||||||
TRADING_ADD_POSITION: 'Add Position',
|
TRADING_ADD_POSITION: 'Add Position',
|
||||||
MARGIN_TRADE_ACTION: 'Margin Trade',
|
MARGIN_TRADE_ACTION: 'Margin Trade',
|
||||||
MARGIN_TRADE_QUESTION: 'How much of this asset would you like?',
|
MARGIN_TRADE_CHOOSE_COLLATERAL_AND_LEVERAGE: 'Please choose your collateral and leverage.',
|
||||||
|
MARGIN_TRADE_QUESTION: 'Please choose how much of this asset you wish to purchase.',
|
||||||
TABLE_TITLE_BUYING_POWER: 'Total Buying Power',
|
TABLE_TITLE_BUYING_POWER: 'Total Buying Power',
|
||||||
NOT_ENOUGH_MARGIN_MESSAGE: 'Not enough buying power in oyster to make this trade at this leverage.',
|
NOT_ENOUGH_MARGIN_MESSAGE: 'Not enough buying power in oyster to make this trade at this leverage.',
|
||||||
LEVERAGE_LIMIT_MESSAGE:
|
LEVERAGE_LIMIT_MESSAGE:
|
||||||
|
|
|
@ -42,72 +42,73 @@ export default function NewPositionForm({ lendingReserve, newPosition, setNewPos
|
||||||
justifyContent: 'space-around',
|
justifyContent: 'space-around',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='borrow-input-title'>{LABELS.SELECT_COLLATERAL}</div>
|
<p>{newPosition.error}</p>
|
||||||
<CollateralSelector
|
|
||||||
reserve={lendingReserve.info}
|
|
||||||
onCollateralReserve={(key) => {
|
|
||||||
const id: string = cache.byParser(LendingReserveParser).find((acc) => acc === key) || '';
|
|
||||||
const parser = cache.get(id) as ParsedAccount<LendingReserve>;
|
|
||||||
setNewPosition({ ...newPosition, collateral: parser });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className='borrow-input-title'>{LABELS.MARGIN_TRADE_QUESTION}</div>
|
<p>{LABELS.MARGIN_TRADE_CHOOSE_COLLATERAL_AND_LEVERAGE}</p>
|
||||||
<div className='token-input'>
|
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
||||||
<TokenIcon mintAddress={newPosition.asset.type?.info?.liquidityMint?.toBase58()} />
|
<CollateralSelector
|
||||||
<NumericInput
|
reserve={lendingReserve.info}
|
||||||
value={newPosition.asset.value}
|
onCollateralReserve={(key) => {
|
||||||
style={{
|
const id: string = cache.byParser(LendingReserveParser).find((acc) => acc === key) || '';
|
||||||
fontSize: 20,
|
const parser = cache.get(id) as ParsedAccount<LendingReserve>;
|
||||||
boxShadow: 'none',
|
setNewPosition({ ...newPosition, collateral: parser });
|
||||||
borderColor: 'transparent',
|
|
||||||
outline: 'transparent',
|
|
||||||
}}
|
}}
|
||||||
onChange={(v: string) => {
|
|
||||||
setNewPosition({
|
|
||||||
...newPosition,
|
|
||||||
asset: { ...newPosition.asset, value: v },
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
placeholder='0.00'
|
|
||||||
/>
|
/>
|
||||||
<div>
|
<div style={{ display: 'flex', flexDirection: 'row' }}>
|
||||||
{
|
<Radio.Group
|
||||||
tokens.find((t) => t.mintAddress === newPosition.asset.type?.info?.liquidityMint?.toBase58())
|
defaultValue={newPosition.leverage}
|
||||||
?.tokenSymbol
|
size='large'
|
||||||
}
|
onChange={(e) => {
|
||||||
|
setNewPosition({ ...newPosition, leverage: e.target.value });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Radio.Button value={1}>1x</Radio.Button>
|
||||||
|
<Radio.Button value={2}>2x</Radio.Button>
|
||||||
|
<Radio.Button value={3}>3x</Radio.Button>
|
||||||
|
<Radio.Button value={4}>4x</Radio.Button>
|
||||||
|
<Radio.Button value={5}>5x</Radio.Button>
|
||||||
|
</Radio.Group>
|
||||||
|
<NumericInput
|
||||||
|
value={newPosition.leverage}
|
||||||
|
style={{
|
||||||
|
maxWidth: '75px',
|
||||||
|
}}
|
||||||
|
onChange={(leverage: number) => {
|
||||||
|
setNewPosition({ ...newPosition, leverage });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<br />
|
||||||
|
<p>{LABELS.MARGIN_TRADE_QUESTION}</p>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch' }}>
|
||||||
|
<div className='token-input'>
|
||||||
|
<TokenIcon mintAddress={newPosition.asset.type?.info?.liquidityMint?.toBase58()} />
|
||||||
|
<NumericInput
|
||||||
|
value={newPosition.asset.value}
|
||||||
|
style={{
|
||||||
|
fontSize: 20,
|
||||||
|
boxShadow: 'none',
|
||||||
|
borderColor: 'transparent',
|
||||||
|
outline: 'transparent',
|
||||||
|
}}
|
||||||
|
onChange={(v: string) => {
|
||||||
|
setNewPosition({
|
||||||
|
...newPosition,
|
||||||
|
asset: { ...newPosition.asset, value: v },
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
placeholder='0.00'
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
{
|
||||||
|
tokens.find((t) => t.mintAddress === newPosition.asset.type?.info?.liquidityMint?.toBase58())
|
||||||
|
?.tokenSymbol
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
|
||||||
<Radio.Group
|
|
||||||
defaultValue={newPosition.leverage}
|
|
||||||
size='large'
|
|
||||||
onChange={(e) => {
|
|
||||||
setNewPosition({ ...newPosition, leverage: e.target.value });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Radio.Button value={1}>1x</Radio.Button>
|
|
||||||
<Radio.Button value={2}>2x</Radio.Button>
|
|
||||||
<Radio.Button value={3}>3x</Radio.Button>
|
|
||||||
<Radio.Button value={4}>4x</Radio.Button>
|
|
||||||
<Radio.Button value={5}>5x</Radio.Button>
|
|
||||||
</Radio.Group>
|
|
||||||
<NumericInput
|
|
||||||
value={newPosition.leverage}
|
|
||||||
style={{
|
|
||||||
fontSize: 20,
|
|
||||||
boxShadow: 'none',
|
|
||||||
borderColor: 'transparent',
|
|
||||||
outline: 'transparent',
|
|
||||||
}}
|
|
||||||
onChange={(leverage: number) => {
|
|
||||||
setNewPosition({ ...newPosition, leverage });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<p>{newPosition.error}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button type='primary'>
|
<Button type='primary'>
|
||||||
<span>{LABELS.TRADING_ADD_POSITION}</span>
|
<span>{LABELS.TRADING_ADD_POSITION}</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
Loading…
Reference in New Issue