add lev

components/Positions.tsx

@@ -14,6 +14,13 @@ import FormatNumericValue from './shared/FormatNumericValue'
 
 const set = mangoStore.getState().set
 
+const BORROW_TOKEN = 'SOL'
+
+const getLeverage = (stakeBalance: number, borrowBalance: number) => {
+  if (stakeBalance === 0) return 0
+  return borrowBalance / stakeBalance
+}
+
 const Positions = ({
   setActiveTab,
 }: {
@@ -25,6 +32,10 @@ const Positions = ({
     useLocalStorageState(SHOW_INACTIVE_POSITIONS_KEY, true)
   const { stakeAccounts } = useStakeAccounts()
 
+  const borrowBank = useMemo(() => {
+    return group?.banksMapByMint.get(BORROW_TOKEN)?.[0]
+  }, [group])
+
   const banks = useMemo(() => {
     if (!group) return []
     const positionBanks = []
@@ -41,20 +52,22 @@ const Positions = ({
     for (const bank of banks) {
       if (!bank) continue
       const acct = stakeAccounts.find((acc) => acc.getTokenBalanceUi(bank) > 0)
-      const balance = acct ? acct.getTokenBalanceUi(bank) : 0
-      positions.push({ balance, bank })
+      const stakeBalance = acct ? acct.getTokenBalanceUi(bank) : 0
+      const borrowBalance =
+        acct && borrowBank ? acct.getTokenBalanceUi(borrowBank) : 0
+      positions.push({ borrowBalance, stakeBalance, bank })
     }
-    const sortedPositions = positions.sort((a, b) => b.balance - a.balance)
+    const sortedPositions = positions.sort(
+      (a, b) => b.stakeBalance - a.stakeBalance,
+    )
     return showInactivePositions
       ? sortedPositions
-      : sortedPositions.filter((pos) => pos.balance > 0)
+      : sortedPositions.filter((pos) => pos.stakeBalance > 0)
   }, [banks, showInactivePositions, stakeAccounts])
 
-  console.log('positions', positions)
-
   const numberOfPositions = useMemo(() => {
     if (!positions.length) return 0
-    return positions.filter((pos) => pos.balance > 0).length
+    return positions.filter((pos) => pos.stakeBalance > 0).length
   }, [positions])
 
   const handleAddOrManagePosition = (token: string) => {
@@ -79,11 +92,11 @@ const Positions = ({
       </div>
       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
         {positions.map((position, i) => {
-          const { balance, bank } = position
+          const { stakeBalance, borrowBalance, bank } = position
           return bank ? (
             <div
               className="rounded-2xl border border-th-fgd-1 p-6"
-              key={i + balance}
+              key={i + stakeBalance}
             >
               <div className="mb-6 flex flex-col border-b border-th-bkg-4 pb-6 md:flex-row md:items-center md:justify-between">
                 <div className="mb-4 flex items-center space-x-3 md:mb-0">
@@ -92,25 +105,25 @@ const Positions = ({
                     <h3>{formatTokenSymbol(bank.name)}</h3>
                     <span
                       className={`text-sm ${
-                        balance ? 'text-th-fgd-1' : 'text-th-fgd-4'
+                        stakeBalance ? 'text-th-fgd-1' : 'text-th-fgd-4'
                       }`}
                     >
-                      {balance ? 'Opened 2 weeks ago' : 'No Position'}
+                      {stakeBalance ? 'Opened 2 weeks ago' : 'No Position'}
                     </span>
                   </div>
                 </div>
                 <Button
                   onClick={() => handleAddOrManagePosition(bank.name)}
                   secondary
                 >
-                  {balance ? 'Manage' : 'Add Position'}
+                  {stakeBalance ? 'Manage' : 'Add Position'}
                 </Button>
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div>
                   <p className="mb-1">Position Size</p>
                   <span className="text-xl font-bold">
-                    <FormatNumericValue value={balance} decimals={6} />{' '}
+                    <FormatNumericValue value={stakeBalance} decimals={6} />{' '}
                     {formatTokenSymbol(bank.name)}
                   </span>
                 </div>
@@ -131,19 +144,17 @@ const Positions = ({
                 <div>
                   <p className="mb-1">Leverage</p>
                   <span className="text-xl font-bold">
-                    {balance ? '3x' : '0x'}
+                    {getLeverage(stakeBalance, borrowBalance)}x
                   </span>
                 </div>
                 <div>
                   <p className="mb-1">Earned</p>
-                  <span className="text-xl font-bold">
-                    {balance ? '3.321 SOL' : '0 SOL'}
-                  </span>
+                  <span className="text-xl font-bold">0 {bank.name}</span>
                 </div>
                 <div>
                   <p className="mb-1">Liquidation Price</p>
                   <span className="whitespace-nowrap text-xl font-bold">
-                    {balance ? '1.234' : '0'}{' '}
+                    {stakeBalance ? '1.234' : '0'}{' '}
                     {`${formatTokenSymbol(bank.name)}/SOL`}
                   </span>
                 </div>