certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: Pause point for first part of form

This commit is contained in:
Mr. Dummy Tester 2020-12-26 20:28:14 -06:00
parent 8a7b2b377c
commit a0530957d5
3 changed files with 64 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Input/numeric.tsx
View File

@ -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();
} }

3
src/constants/labels.ts
View File

@ -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:

121
src/views/marginTrading/newPosition/NewPositionForm.tsx
View File

@ -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>