mirror of https://github.com/certusone/oyster.git
feat: broad strokes just adding dummy new row type stuff and playing around with ux
This commit is contained in:
Mr. Dummy Tester
parent
f75eba1b57
commit
18ee623ef5
|
|
@ -1,11 +1,11 @@
|
|||
import React from "react";
|
||||
import { Input } from "antd";
|
||||
import React from 'react';
|
||||
import { Input } from 'antd';
|
||||
|
||||
export class NumericInput extends React.Component<any, any> {
|
||||
onChange = (e: any) => {
|
||||
const { value } = e.target;
|
||||
const reg = /^-?\d*(\.\d*)?$/;
|
||||
if (reg.test(value) || value === "" || value === "-") {
|
||||
if (reg.test(value) || value === '' || value === '-') {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
};
|
||||
|
|
@ -14,26 +14,19 @@ export class NumericInput extends React.Component<any, any> {
|
|||
onBlur = () => {
|
||||
const { value, onBlur, onChange } = this.props;
|
||||
let valueTemp = value;
|
||||
if (value.charAt(value.length - 1) === "." || value === "-") {
|
||||
if (value.charAt(value.length - 1) === '.' || value === '-') {
|
||||
valueTemp = value.slice(0, -1);
|
||||
}
|
||||
if (value.startsWith(".") || value.startsWith("-.")) {
|
||||
valueTemp = valueTemp.replace(".", "0.");
|
||||
if (value.startsWith('.') || value.startsWith('-.')) {
|
||||
valueTemp = valueTemp.replace('.', '0.');
|
||||
}
|
||||
onChange(valueTemp.replace(/0*(\d+)/, "$1"));
|
||||
onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
|
||||
if (onBlur) {
|
||||
onBlur();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Input
|
||||
{...this.props}
|
||||
onChange={this.onChange}
|
||||
onBlur={this.onBlur}
|
||||
maxLength={25}
|
||||
/>
|
||||
);
|
||||
return <Input {...this.props} onChange={this.onChange} onBlur={this.onBlur} maxLength={25} />;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,63 @@
|
|||
export const LABELS = {
|
||||
CONNECT_LABEL: "Connect Wallet",
|
||||
GIVE_SOL: "Give me SOL",
|
||||
FAUCET_INFO:
|
||||
"This faucet will help you fund your accounts outside of Solana main network.",
|
||||
ACCOUNT_FUNDED: "Account funded.",
|
||||
REPAY_QUESTION: "How much would you like to repay?",
|
||||
REPAY_ACTION: "Repay",
|
||||
RESERVE_STATUS_TITLE: "Reserve Status & Configuration",
|
||||
CONNECT_LABEL: 'Connect Wallet',
|
||||
GIVE_SOL: 'Give me SOL',
|
||||
FAUCET_INFO: 'This faucet will help you fund your accounts outside of Solana main network.',
|
||||
ACCOUNT_FUNDED: 'Account funded.',
|
||||
REPAY_QUESTION: 'How much would you like to repay?',
|
||||
REPAY_ACTION: 'Repay',
|
||||
RESERVE_STATUS_TITLE: 'Reserve Status & Configuration',
|
||||
AUDIT_WARNING:
|
||||
"Oyster is an unaudited software project used for internal purposes at the Solana Foundation. This app is not for public use.",
|
||||
'Oyster is an unaudited software project used for internal purposes at the Solana Foundation. This app is not for public use.',
|
||||
FOOTER:
|
||||
'This page was produced by the Solana Foundation ("SF") for internal educational and inspiration purposes only. SF does not encourage, induce or sanction the deployment, integration or use of Oyster or any similar application (including its code) in violation of applicable laws or regulations and hereby prohibits any such deployment, integration or use. Anyone using this code or a derivation thereof must comply with applicable laws and regulations when releasing related software.',
|
||||
MENU_HOME: "Home",
|
||||
MENU_DASHBOARD: "Dashboard",
|
||||
DASHBOARD_INFO: "Connect to a wallet to view your deposits/loans.",
|
||||
NO_LOANS_NO_DEPOSITS: "No loans or deposits.",
|
||||
MENU_DEPOSIT: "Deposit",
|
||||
MENU_BORROW: "Borrow",
|
||||
MENU_LIQUIDATE: "Liquidate",
|
||||
MENU_FAUCET: "Faucet",
|
||||
MARGIN_TRADING: "Margin Trading",
|
||||
APP_TITLE: "Oyster Lending",
|
||||
CONNECT_BUTTON: "Connect",
|
||||
WALLET_TOOLTIP: "Wallet public key",
|
||||
SETTINGS_TOOLTIP: "Settings",
|
||||
SELECT_COLLATERAL: "Select collateral",
|
||||
COLLATERAL: "Collateral",
|
||||
BORROW_QUESTION: "How much would you like to borrow?",
|
||||
BORROW_ACTION: "Borrow",
|
||||
LIQUIDATE_ACTION: "Liquidate",
|
||||
LIQUIDATE_NO_LOANS: "There are no loans to liquidate.",
|
||||
TABLE_TITLE_ASSET: "Asset",
|
||||
TABLE_TITLE_YOUR_LOAN_BALANCE: "Loan balance",
|
||||
TABLE_TITLE_LOAN_BALANCE: "Loan balance",
|
||||
TABLE_TITLE_COLLATERAL_BALANCE: "Collateral",
|
||||
TABLE_TITLE_DEPOSIT_BALANCE: "Your deposits",
|
||||
TABLE_TITLE_APY: "APY",
|
||||
TABLE_TITLE_LTV: "LTV",
|
||||
TABLE_TITLE_HEALTH: "Health Factor",
|
||||
TABLE_TITLE_BORROW_APY: "Borrow APY",
|
||||
TABLE_TITLE_DEPOSIT_APY: "Deposit APY",
|
||||
TABLE_TITLE_TOTAL_BORROWED: "Total Borrowed",
|
||||
TABLE_TITLE_MARKET_SIZE: "Market Size",
|
||||
TABLE_TITLE_ACTION: "Action",
|
||||
TABLE_TITLE_MAX_BORROW: "Available for you",
|
||||
DASHBOARD_TITLE_LOANS: "Loans",
|
||||
DASHBOARD_TITLE_DEPOSITS: "Deposits",
|
||||
DEPOSIT_QUESTION: "How much would you like to deposit?",
|
||||
WITHDRAW_ACTION: "Withdraw",
|
||||
WITHDRAW_QUESTION: "How much would you like to withdraw?",
|
||||
DASHBOARD_ACTION: "Go to dashboard",
|
||||
GO_BACK_ACTION: "Go back",
|
||||
DEPOSIT_ACTION: "Deposit",
|
||||
TOTAL_TITLE: "Total",
|
||||
MENU_HOME: 'Home',
|
||||
MENU_DASHBOARD: 'Dashboard',
|
||||
DASHBOARD_INFO: 'Connect to a wallet to view your deposits/loans.',
|
||||
NO_LOANS_NO_DEPOSITS: 'No loans or deposits.',
|
||||
MENU_DEPOSIT: 'Deposit',
|
||||
MENU_BORROW: 'Borrow',
|
||||
MENU_LIQUIDATE: 'Liquidate',
|
||||
MENU_FAUCET: 'Faucet',
|
||||
MARGIN_TRADING: 'Margin Trading',
|
||||
APP_TITLE: 'Oyster Lending',
|
||||
CONNECT_BUTTON: 'Connect',
|
||||
WALLET_TOOLTIP: 'Wallet public key',
|
||||
SETTINGS_TOOLTIP: 'Settings',
|
||||
SELECT_COLLATERAL: 'Select collateral',
|
||||
COLLATERAL: 'Collateral',
|
||||
BORROW_QUESTION: 'How much would you like to borrow?',
|
||||
BORROW_ACTION: 'Borrow',
|
||||
LIQUIDATE_ACTION: 'Liquidate',
|
||||
LIQUIDATE_NO_LOANS: 'There are no loans to liquidate.',
|
||||
TABLE_TITLE_ASSET: 'Asset',
|
||||
TABLE_TITLE_YOUR_LOAN_BALANCE: 'Loan balance',
|
||||
TABLE_TITLE_LOAN_BALANCE: 'Loan balance',
|
||||
TABLE_TITLE_COLLATERAL_BALANCE: 'Collateral',
|
||||
TABLE_TITLE_DEPOSIT_BALANCE: 'Your deposits',
|
||||
TABLE_TITLE_APY: 'APY',
|
||||
TABLE_TITLE_LTV: 'LTV',
|
||||
TABLE_TITLE_HEALTH: 'Health Factor',
|
||||
TABLE_TITLE_BORROW_APY: 'Borrow APY',
|
||||
TABLE_TITLE_DEPOSIT_APY: 'Deposit APY',
|
||||
TABLE_TITLE_TOTAL_BORROWED: 'Total Borrowed',
|
||||
TABLE_TITLE_MARKET_SIZE: 'Market Size',
|
||||
TABLE_TITLE_ACTION: 'Action',
|
||||
TABLE_TITLE_MAX_BORROW: 'Available for you',
|
||||
DASHBOARD_TITLE_LOANS: 'Loans',
|
||||
DASHBOARD_TITLE_DEPOSITS: 'Deposits',
|
||||
DEPOSIT_QUESTION: 'How much would you like to deposit?',
|
||||
WITHDRAW_ACTION: 'Withdraw',
|
||||
WITHDRAW_QUESTION: 'How much would you like to withdraw?',
|
||||
DASHBOARD_ACTION: 'Go to dashboard',
|
||||
GO_BACK_ACTION: 'Go back',
|
||||
DEPOSIT_ACTION: 'Deposit',
|
||||
TOTAL_TITLE: 'Total',
|
||||
TRADING_TABLE_TITLE_MY_COLLATERAL: 'Chosen Collateral',
|
||||
TRADING_TABLE_TITLE_DESIRED_ASSET: 'Desired Asset',
|
||||
TRADING_TABLE_TITLE_MULTIPLIER: 'Leverage',
|
||||
TRADING_TABLE_TITLE_ASSET_PRICE: 'Asset Price',
|
||||
TRADING_TABLE_TITLE_LIQUIDATION_PRICE: 'Liquidation Price',
|
||||
TRADING_TABLE_TITLE_APY: 'APY',
|
||||
TRADING_TABLE_TITLE_ACTIONS: 'Action',
|
||||
TRADING_ADD_POSITION: 'Add Position',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
import { Button, Select, Slider } from 'antd';
|
||||
import React from 'react';
|
||||
import { NumericInput } from '../../components/Input/numeric';
|
||||
import { TokenIcon } from '../../components/TokenIcon';
|
||||
import tokens from '../../config/tokens.json';
|
||||
import { LABELS } from '../../constants/labels';
|
||||
const { Option } = Select;
|
||||
|
||||
interface EditableAssetProps {
|
||||
label: string;
|
||||
itemAssetKey: string;
|
||||
itemAssetValueKey: string;
|
||||
setItem: (item: any) => void;
|
||||
item: any;
|
||||
}
|
||||
function EditableAsset({ label, itemAssetKey, itemAssetValueKey, setItem, item }: EditableAssetProps) {
|
||||
console.log('Now looking at', item);
|
||||
if (!item[itemAssetKey]) {
|
||||
return (
|
||||
<Select
|
||||
size='large'
|
||||
showSearch
|
||||
style={{ margin: '5px 0px' }}
|
||||
placeholder={label}
|
||||
onChange={(v) => setItem({ ...item, [itemAssetKey]: tokens.find((t) => t.mintAddress === v) })}
|
||||
>
|
||||
{tokens.map((token) => (
|
||||
<Option key={token.mintAddress} value={token.mintAddress} name={token.tokenName} title={token.tokenName}>
|
||||
<div key={token.mintAddress} style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<TokenIcon mintAddress={token.mintAddress} />
|
||||
{token.tokenName}
|
||||
</div>
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
|
||||
<NumericInput
|
||||
value={item[itemAssetValueKey]}
|
||||
style={{
|
||||
fontSize: 20,
|
||||
boxShadow: 'none',
|
||||
borderColor: 'transparent',
|
||||
outline: 'transparent',
|
||||
}}
|
||||
placeholder='0.00'
|
||||
/>
|
||||
<TokenIcon mintAddress={item[itemAssetKey]?.mintAddress} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function MarginTradePosition({ item, setItem }: { item: any; setItem?: (item: any) => void }) {
|
||||
return (
|
||||
<div className='trading-item'>
|
||||
<div>
|
||||
{setItem && (
|
||||
<EditableAsset
|
||||
item={item}
|
||||
setItem={setItem}
|
||||
label={LABELS.TRADING_TABLE_TITLE_MY_COLLATERAL}
|
||||
itemAssetKey={'collateralType'}
|
||||
itemAssetValueKey={'collateralValue'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{setItem && (
|
||||
<EditableAsset
|
||||
item={item}
|
||||
setItem={setItem}
|
||||
label={LABELS.TRADING_TABLE_TITLE_MY_COLLATERAL}
|
||||
itemAssetKey={'assetType'}
|
||||
itemAssetValueKey={'assetValue'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Slider tooltipVisible={true} defaultValue={1} dots={true} max={5} min={1} step={1} tooltipPlacement={'top'} />
|
||||
</div>
|
||||
<div>123</div>
|
||||
<div>123</div>
|
||||
<div>123</div>
|
||||
<div>
|
||||
<Button type='primary'>
|
||||
<span>{LABELS.TRADING_ADD_POSITION}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +1,32 @@
|
|||
import React from "react";
|
||||
import { LABELS } from "../../constants";
|
||||
import "./style.less";
|
||||
import { Card } from "antd";
|
||||
import React, { useState } from 'react';
|
||||
import { LABELS } from '../../constants';
|
||||
import './style.less';
|
||||
import { Card } from 'antd';
|
||||
import MarginTradePosition from './MarginTradePosition';
|
||||
|
||||
export const MarginTrading = () => {
|
||||
const [newPosition, setNewPosition] = useState<any>({ id: null });
|
||||
|
||||
const positions: any[] = [];
|
||||
return (
|
||||
<div className="liquidate-container">
|
||||
|
||||
<div className='trading-container'>
|
||||
<div className='flexColumn'>
|
||||
<Card>
|
||||
<div className='trading-item trading-header'>
|
||||
<div>{LABELS.TRADING_TABLE_TITLE_MY_COLLATERAL}</div>
|
||||
<div>{LABELS.TRADING_TABLE_TITLE_DESIRED_ASSET}</div>
|
||||
<div>{LABELS.TRADING_TABLE_TITLE_MULTIPLIER}</div>
|
||||
<div>{LABELS.TRADING_TABLE_TITLE_ASSET_PRICE}</div>
|
||||
<div>{LABELS.TRADING_TABLE_TITLE_LIQUIDATION_PRICE}</div>
|
||||
<div>{LABELS.TRADING_TABLE_TITLE_APY}</div>
|
||||
<div>{LABELS.TRADING_TABLE_TITLE_ACTIONS}</div>
|
||||
</div>
|
||||
<MarginTradePosition key={newPosition.id} item={newPosition} setItem={setNewPosition} />
|
||||
{positions.map((item) => (
|
||||
<MarginTradePosition key={item.id} item={item} />
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1 +1,46 @@
|
|||
@import '~antd/es/style/themes/default.less';
|
||||
.trading-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: @text-color;
|
||||
|
||||
& > :nth-child(n) {
|
||||
flex: 20%;
|
||||
text-align: left;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
flex: 300px;
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
flex: 300px;
|
||||
}
|
||||
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.trading-header {
|
||||
justify-content: space-between;
|
||||
& > div {
|
||||
flex: 20%;
|
||||
margin: 10px 0px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.trading-info {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trading-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue