feat: broad strokes just adding dummy new row type stuff and playing around with ux

src/components/Input/numeric.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
-import { Input } from "antd";
+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("-.")) {
+    if (value.startsWith('.') || value.startsWith('-.')) {
-      valueTemp = valueTemp.replace(".", "0.");
+      valueTemp = valueTemp.replace('.', '0.');
     }
-    onChange(valueTemp.replace(/0*(\d+)/, "$1"));
+    onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
     if (onBlur) {
       onBlur();
     }
   };
 
   render() {
-    return (
+    return <Input {...this.props} onChange={this.onChange} onBlur={this.onBlur} maxLength={25} />;
-      <Input
-        {...this.props}
-        onChange={this.onChange}
-        onBlur={this.onBlur}
-        maxLength={25}
-      />
-    );
   }
 }

src/constants/labels.ts

@@ -1,56 +1,63 @@
 export const LABELS = {
-  CONNECT_LABEL: "Connect Wallet",
+  CONNECT_LABEL: 'Connect Wallet',
-  GIVE_SOL: "Give me SOL",
+  GIVE_SOL: 'Give me SOL',
-  FAUCET_INFO:
+  FAUCET_INFO: 'This faucet will help you fund your accounts outside of Solana main network.',
-    "This faucet will help you fund your accounts outside of Solana main network.",
+  ACCOUNT_FUNDED: 'Account funded.',
-  ACCOUNT_FUNDED: "Account funded.",
+  REPAY_QUESTION: 'How much would you like to repay?',
-  REPAY_QUESTION: "How much would you like to repay?",
+  REPAY_ACTION: 'Repay',
-  REPAY_ACTION: "Repay",
+  RESERVE_STATUS_TITLE: 'Reserve Status & Configuration',
-  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_HOME: 'Home',
-  MENU_DASHBOARD: "Dashboard",
+  MENU_DASHBOARD: 'Dashboard',
-  DASHBOARD_INFO: "Connect to a wallet to view your deposits/loans.",
+  DASHBOARD_INFO: 'Connect to a wallet to view your deposits/loans.',
-  NO_LOANS_NO_DEPOSITS: "No loans or deposits.",
+  NO_LOANS_NO_DEPOSITS: 'No loans or deposits.',
-  MENU_DEPOSIT: "Deposit",
+  MENU_DEPOSIT: 'Deposit',
-  MENU_BORROW: "Borrow",
+  MENU_BORROW: 'Borrow',
-  MENU_LIQUIDATE: "Liquidate",
+  MENU_LIQUIDATE: 'Liquidate',
-  MENU_FAUCET: "Faucet",
+  MENU_FAUCET: 'Faucet',
-  MARGIN_TRADING: "Margin Trading",
+  MARGIN_TRADING: 'Margin Trading',
-  APP_TITLE: "Oyster Lending",
+  APP_TITLE: 'Oyster Lending',
-  CONNECT_BUTTON: "Connect",
+  CONNECT_BUTTON: 'Connect',
-  WALLET_TOOLTIP: "Wallet public key",
+  WALLET_TOOLTIP: 'Wallet public key',
-  SETTINGS_TOOLTIP: "Settings",
+  SETTINGS_TOOLTIP: 'Settings',
-  SELECT_COLLATERAL: "Select collateral",
+  SELECT_COLLATERAL: 'Select collateral',
-  COLLATERAL: "Collateral",
+  COLLATERAL: 'Collateral',
-  BORROW_QUESTION: "How much would you like to borrow?",
+  BORROW_QUESTION: 'How much would you like to borrow?',
-  BORROW_ACTION: "Borrow",
+  BORROW_ACTION: 'Borrow',
-  LIQUIDATE_ACTION: "Liquidate",
+  LIQUIDATE_ACTION: 'Liquidate',
-  LIQUIDATE_NO_LOANS: "There are no loans to liquidate.",
+  LIQUIDATE_NO_LOANS: 'There are no loans to liquidate.',
-  TABLE_TITLE_ASSET: "Asset",
+  TABLE_TITLE_ASSET: 'Asset',
-  TABLE_TITLE_YOUR_LOAN_BALANCE: "Loan balance",
+  TABLE_TITLE_YOUR_LOAN_BALANCE: 'Loan balance',
-  TABLE_TITLE_LOAN_BALANCE: "Loan balance",
+  TABLE_TITLE_LOAN_BALANCE: 'Loan balance',
-  TABLE_TITLE_COLLATERAL_BALANCE: "Collateral",
+  TABLE_TITLE_COLLATERAL_BALANCE: 'Collateral',
-  TABLE_TITLE_DEPOSIT_BALANCE: "Your deposits",
+  TABLE_TITLE_DEPOSIT_BALANCE: 'Your deposits',
-  TABLE_TITLE_APY: "APY",
+  TABLE_TITLE_APY: 'APY',
-  TABLE_TITLE_LTV: "LTV",
+  TABLE_TITLE_LTV: 'LTV',
-  TABLE_TITLE_HEALTH: "Health Factor",
+  TABLE_TITLE_HEALTH: 'Health Factor',
-  TABLE_TITLE_BORROW_APY: "Borrow APY",
+  TABLE_TITLE_BORROW_APY: 'Borrow APY',
-  TABLE_TITLE_DEPOSIT_APY: "Deposit APY",
+  TABLE_TITLE_DEPOSIT_APY: 'Deposit APY',
-  TABLE_TITLE_TOTAL_BORROWED: "Total Borrowed",
+  TABLE_TITLE_TOTAL_BORROWED: 'Total Borrowed',
-  TABLE_TITLE_MARKET_SIZE: "Market Size",
+  TABLE_TITLE_MARKET_SIZE: 'Market Size',
-  TABLE_TITLE_ACTION: "Action",
+  TABLE_TITLE_ACTION: 'Action',
-  TABLE_TITLE_MAX_BORROW: "Available for you",
+  TABLE_TITLE_MAX_BORROW: 'Available for you',
-  DASHBOARD_TITLE_LOANS: "Loans",
+  DASHBOARD_TITLE_LOANS: 'Loans',
-  DASHBOARD_TITLE_DEPOSITS: "Deposits",
+  DASHBOARD_TITLE_DEPOSITS: 'Deposits',
-  DEPOSIT_QUESTION: "How much would you like to deposit?",
+  DEPOSIT_QUESTION: 'How much would you like to deposit?',
-  WITHDRAW_ACTION: "Withdraw",
+  WITHDRAW_ACTION: 'Withdraw',
-  WITHDRAW_QUESTION: "How much would you like to withdraw?",
+  WITHDRAW_QUESTION: 'How much would you like to withdraw?',
-  DASHBOARD_ACTION: "Go to dashboard",
+  DASHBOARD_ACTION: 'Go to dashboard',
-  GO_BACK_ACTION: "Go back",
+  GO_BACK_ACTION: 'Go back',
-  DEPOSIT_ACTION: "Deposit",
+  DEPOSIT_ACTION: 'Deposit',
-  TOTAL_TITLE: "Total",
+  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',
 };

src/views/marginTrading/MarginTradePosition.tsx

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

src/views/marginTrading/index.tsx

@@ -1,13 +1,32 @@
-import React from "react";
+import React, { useState } from 'react';
-import { LABELS } from "../../constants";
+import { LABELS } from '../../constants';
-import "./style.less";
+import './style.less';
-import { Card } from "antd";
+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>
   );
 };

src/views/marginTrading/style.less

@@ -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;
+}