chore: rename margin

README.md

@@ -12,5 +12,10 @@ Any content produced by Solana, or developer resources that Solana provides, are
 * add slider to borrow that shows risk/collateral usage
 * integrate fees
 * ephemeral keys
-* merge margin PR and apply swap like style to borrow/repay
 * add values to bar chart labels
+* apply swap like style to borrow/repay
+* combine deposit/borrow into one action if user doesnt have enough collateral
+
+--- margin trading
+
+* dont show collateral below zero on the chart

src/components/CollateralInput/index.tsx

@@ -101,7 +101,7 @@ export default function CollateralInput(props: {
             <Select
               size='large'
               showSearch
-              style={{ minWidth: 150 }}
+              style={{ width: 80 }}
               placeholder='CCY'
               value={props.leverage}
               onChange={(item: number) => {

src/components/Layout/index.tsx

@@ -9,7 +9,7 @@ import {
   ShoppingOutlined,
   HomeOutlined,
   RocketOutlined,
-  LineChartOutlined
+  // LineChartOutlined
 } from "@ant-design/icons";
 
 import BasicLayout from "@ant-design/pro-layout";
@@ -27,7 +27,8 @@ export const AppLayout = (props: any) => {
     "/deposit": "3",
     "/borrow": "4",
     "/liquidate": "5",
-    "/faucet": "6",
+    "/margin": "6",
+    "/faucet": "7",
   };
 
   const current =
@@ -105,7 +106,8 @@ export const AppLayout = (props: any) => {
                   {LABELS.MENU_LIQUIDATE}
                 </Link>
               </Menu.Item>
-              <Menu.Item key="6" icon={< LineChartOutlined/>}>
+              {/* Hide margin option for now  */}
+              {/* <Menu.Item key="6" icon={< LineChartOutlined/>}>
                 <Link
                   to={{
                     pathname: "/margin",
@@ -113,7 +115,7 @@ export const AppLayout = (props: any) => {
                 >
                   {LABELS.MARGIN_TRADING}
                 </Link>
-              </Menu.Item>
+              </Menu.Item> */}
               {env !== "mainnet-beta" && (
                 <Menu.Item key="7" icon={<RocketOutlined />}>
                   <Link

src/routes.tsx

@@ -22,7 +22,7 @@ import {
   LiquidateReserveView,
   MarginTrading,
 } from './views';
-import { NewPosition } from './views/marginTrading/newPosition';
+import { NewPosition } from './views/margin/newPosition';
 
 export function Routes() {
   return (

src/views/index.tsx

@@ -10,4 +10,4 @@ export { FaucetView } from "./faucet";
 export { RepayReserveView } from "./repayReserve";
 export { LiquidateView } from "./liquidate";
 export { LiquidateReserveView } from "./liquidateReserve";
-export { MarginTrading } from "./marginTrading";
+export { MarginTrading } from "./margin";

src/views/margin/item.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTokenName } from '../../hooks';
+import { useBorrowingPower, useTokenName } from '../../hooks';
 import { calculateBorrowAPY, LendingReserve } from '../../models/lending';
 import { TokenIcon } from '../../components/TokenIcon';
 import { formatNumber, formatPct } from '../../utils/utils';
@@ -15,6 +15,9 @@ export const MarginTradeItem = (props: { reserve: LendingReserve; address: Publi
 
   const apr = calculateBorrowAPY(props.reserve);
 
+  // TODO: specifc max leverage
+  const { totalInQuote, borrowingPower } = useBorrowingPower(props.address, false, false);
+
   return (
     <Link to={`/margin/${props.address.toBase58()}`}>
       <div className='choose-margin-item'>
@@ -26,9 +29,9 @@ export const MarginTradeItem = (props: { reserve: LendingReserve; address: Publi
         <div>
           <div>
             <div>
-              <em>{formatNumber.format(200)}</em> {name}
+              <em>{formatNumber.format(borrowingPower)}</em> {name}
             </div>
-            <div className='dashboard-amount-quote'>${formatNumber.format(300)}</div>
+            <div className='dashboard-amount-quote'>${formatNumber.format(totalInQuote)}</div>
           </div>
         </div>
         <div>{formatPct.format(apr)}</div>