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('-.'))) {
|
||||
valueTemp = valueTemp.replace('.', '0.');
|
||||
}
|
||||
onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
|
||||
if (valueTemp.replace) onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
|
||||
if (onBlur) {
|
||||
onBlur();
|
||||
}
|
||||
|
|
|
@ -61,7 +61,8 @@ export const LABELS = {
|
|||
TRADING_TABLE_TITLE_ACTIONS: 'Action',
|
||||
TRADING_ADD_POSITION: 'Add Position',
|
||||
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',
|
||||
NOT_ENOUGH_MARGIN_MESSAGE: 'Not enough buying power in oyster to make this trade at this leverage.',
|
||||
LEVERAGE_LIMIT_MESSAGE:
|
||||
|
|
|
@ -42,72 +42,73 @@ export default function NewPositionForm({ lendingReserve, newPosition, setNewPos
|
|||
justifyContent: 'space-around',
|
||||
}}
|
||||
>
|
||||
<div className='borrow-input-title'>{LABELS.SELECT_COLLATERAL}</div>
|
||||
<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 });
|
||||
}}
|
||||
/>
|
||||
<p>{newPosition.error}</p>
|
||||
|
||||
<div className='borrow-input-title'>{LABELS.MARGIN_TRADE_QUESTION}</div>
|
||||
<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',
|
||||
<p>{LABELS.MARGIN_TRADE_CHOOSE_COLLATERAL_AND_LEVERAGE}</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
||||
<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 });
|
||||
}}
|
||||
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 style={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<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={{
|
||||
maxWidth: '75px',
|
||||
}}
|
||||
onChange={(leverage: number) => {
|
||||
setNewPosition({ ...newPosition, leverage });
|
||||
}}
|
||||
/>
|
||||
</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'>
|
||||
<span>{LABELS.TRADING_ADD_POSITION}</span>
|
||||
</Button>
|
||||
|
|
Loading…
Reference in New Issue