add components for positions and transaction history

components/AccountStats.tsx

@@ -1,19 +1,4 @@
-// import useMangoGroup from 'hooks/useMangoGroup'
-// import { useMemo } from 'react'
-// import FormatNumericValue from './shared/FormatNumericValue'
-// import useMangoAccount from 'hooks/useMangoAccount'
-
 const AccountStats = ({ token }: { token: string }) => {
-  // const { mangoAccount } = useMangoAccount()
-  // const { group } = useMangoGroup()
-
-  // const bank = useMemo(() => {
-  //   if (!group) return undefined
-  //   return group.banksMapByName.get(token)?.[0]
-  // }, [group, token])
-
-  // const position = bank ? mangoAccount?.getTokenBalanceUi(bank) || 0.0 : 0.0
-
   return (
     <>
       <h2 className="mb-4 text-2xl">{`Boosted ${token}`}</h2>
@@ -34,12 +19,6 @@ const AccountStats = ({ token }: { token: string }) => {
           <p className="mb-1">Total Staked</p>
           <span className="text-2xl font-bold">{`100,000 ${token}`}</span>
         </div>
-        {/* <div>
-          <div>Your position</div>
-          <div className="text-2xl font-bold">
-            {bank ? <FormatNumericValue value={position} decimals={6} /> : 0.0}
-          </div>
-        </div> */}
       </div>
     </>
   )

components/Positions.tsx

@@ -0,0 +1,46 @@
+import useMangoGroup from 'hooks/useMangoGroup'
+import { useMemo } from 'react'
+import useMangoAccount from 'hooks/useMangoAccount'
+import { STAKEABLE_TOKENS } from 'pages'
+
+const Positions = () => {
+  const { mangoAccount } = useMangoAccount()
+  const { group } = useMangoGroup()
+
+  const banks = useMemo(() => {
+    if (!group) return []
+    const positionBanks = []
+    for (const token of STAKEABLE_TOKENS) {
+      const tokenName = token === 'mSOL' ? 'MSOL' : token
+      const bank = group.banksMapByName.get(tokenName)?.[0]
+      positionBanks.push(bank)
+    }
+    return positionBanks
+  }, [group])
+
+  const positions = useMemo(() => {
+    if (!banks.length || !mangoAccount) return []
+    const positions = []
+    for (const bank of banks) {
+      let balance = 0
+      if (bank) {
+        balance = mangoAccount.getTokenBalanceUi(bank)
+      }
+      positions.push({ balance, bank })
+    }
+    return positions
+  }, [banks, mangoAccount])
+
+  console.log(banks)
+  console.log(positions)
+
+  return positions.length ? (
+    <div></div>
+  ) : (
+    <div className="flex justify-center rounded-2xl border border-th-fgd-1 p-6">
+      <span>No positions found</span>
+    </div>
+  )
+}
+
+export default Positions

components/Stake.tsx

@@ -0,0 +1,79 @@
+import { STAKEABLE_TOKENS } from 'pages'
+import TokenButton from './TokenButton'
+import { useCallback, useEffect, useState } from 'react'
+import mangoStore from '@store/mangoStore'
+import { ACCOUNT_PREFIX } from 'utils/transactions'
+import TabUnderline from './shared/TabUnderline'
+import StakeForm from '@components/StakeForm'
+import UnstakeForm from '@components/UnstakeForm'
+import AccountStats from './AccountStats'
+
+const set = mangoStore.getState().set
+
+const Stake = () => {
+  const [activeFormTab, setActiveFormTab] = useState('Add')
+  const [selectedToken, setSelectedToken] = useState(STAKEABLE_TOKENS[0])
+
+  useEffect(() => {
+    const mangoAccounts = mangoStore.getState().mangoAccounts
+    const selectedMangoAccount = mangoAccounts.find(
+      (ma) => ma.name === `${ACCOUNT_PREFIX}${selectedToken}`,
+    )
+    console.log('selectedMangoAccount', selectedMangoAccount)
+
+    set((s) => {
+      s.mangoAccount.current = selectedMangoAccount
+    })
+  }, [selectedToken])
+
+  const onClose = useCallback(() => {
+    console.log('StakeForm onSuccess')
+  }, [])
+
+  const handleTokenSelect = useCallback((token: string) => {
+    setSelectedToken(token)
+  }, [])
+
+  return (
+    <>
+      <div className="grid grid-cols-5 rounded-t-2xl border border-b-0 border-th-fgd-1">
+        {STAKEABLE_TOKENS.map((token) => (
+          <TokenButton
+            key={token}
+            handleTokenSelect={handleTokenSelect}
+            selectedToken={selectedToken}
+            tokenName={token}
+          />
+        ))}
+      </div>
+      <div className="grid max-w-4xl grid-cols-12">
+        <div
+          className={`col-span-7 rounded-bl-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
+        >
+          <div className={`p-8 pt-6`}>
+            <div className="pb-2">
+              <TabUnderline
+                activeValue={activeFormTab}
+                values={['Add', 'Remove']}
+                onChange={(v) => setActiveFormTab(v)}
+              />
+            </div>
+            {activeFormTab === 'Add' ? (
+              <StakeForm onSuccess={onClose} token={selectedToken} />
+            ) : null}
+            {activeFormTab === 'Remove' ? (
+              <UnstakeForm onSuccess={onClose} token={selectedToken} />
+            ) : null}
+          </div>
+        </div>
+        <div
+          className={`col-span-5 rounded-br-2xl border-y border-r border-th-fgd-1 bg-th-bkg-2 p-8 pt-6`}
+        >
+          <AccountStats token={selectedToken} />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Stake

components/TransactionHistory.tsx

@@ -0,0 +1,9 @@
+const TransactionHistory = () => {
+  return (
+    <div className="flex justify-center rounded-2xl border border-th-fgd-1 p-6">
+      <span>No transaction history found</span>
+    </div>
+  )
+}
+
+export default TransactionHistory

pages/index.tsx

@@ -1,15 +1,11 @@
-import AccountStats from '@components/AccountStats'
-import StakeForm from '@components/StakeForm'
-import TokenButton from '@components/TokenButton'
-import UnstakeForm from '@components/UnstakeForm'
-import TabUnderline from '@components/shared/TabUnderline'
-import mangoStore from '@store/mangoStore'
+import Positions from '@components/Positions'
+import Stake from '@components/Stake'
+import TransactionHistory from '@components/TransactionHistory'
 import type { NextPage } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { useCallback, useEffect, useState } from 'react'
-import { ACCOUNT_PREFIX } from 'utils/transactions'
+import { useState } from 'react'
 
-const STAKEABLE_TOKENS = ['mSOL', 'JitoSOL', 'stSOL', 'LDO']
+export const STAKEABLE_TOKENS = ['mSOL', 'JitoSOL', 'stSOL', 'bSOL', 'LDO']
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -19,101 +15,59 @@ export async function getStaticProps({ locale }: { locale: string }) {
   }
 }
 
-const set = mangoStore.getState().set
-
 const Index: NextPage = () => {
   const [activeTab, setActiveTab] = useState('Stake')
-  const [activeFormTab, setActiveFormTab] = useState('Add')
-  const [selectedToken, setSelectedToken] = useState(STAKEABLE_TOKENS[0])
-
-  useEffect(() => {
-    const mangoAccounts = mangoStore.getState().mangoAccounts
-    const selectedMangoAccount = mangoAccounts.find(
-      (ma) => ma.name === `${ACCOUNT_PREFIX}${selectedToken}`,
-    )
-    console.log('selectedMangoAccount', selectedMangoAccount)
-
-    set((s) => {
-      s.mangoAccount.current = selectedMangoAccount
-    })
-  }, [selectedToken])
-
-  const onClose = useCallback(() => {
-    console.log('StakeForm onSuccess')
-  }, [])
-
-  const handleTokenSelect = useCallback((token: string) => {
-    setSelectedToken(token)
-  }, [])
 
   return (
     <div className="mx-auto max-w-4xl flex-col pb-20">
-      <div className="flex-col">
-        {/* <div className="mb-4 text-center text-5xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl">
-          LEVERAGE STAKE SOL
-        </div> */}
-        <div className="mb-6 grid grid-cols-2 rounded-xl border border-th-fgd-1">
-          <button
-            className={`col-span-1 mx-auto w-full rounded-l-xl border-r border-th-fgd-1 py-4 font-bold ${
-              activeTab === 'Stake'
-                ? 'bg-th-bkg-2 text-th-fgd-1'
-                : 'text-th-fgd-3'
-            }`}
-            onClick={() => setActiveTab('Stake')}
-          >
-            Stake
-          </button>
-          <button
-            className={`col-span-1 mx-auto w-full rounded-r-xl py-4 font-bold ${
-              activeTab === 'Positions'
-                ? 'bg-th-bkg-2 text-th-fgd-1'
-                : 'text-th-fgd-3'
-            }`}
-            onClick={() => setActiveTab('Positions')}
-          >
-            Your Positions
-          </button>
-        </div>
-        {/* <h2 className="mb-4 text-xl">Tokens</h2> */}
-        <div className="grid grid-cols-4 rounded-t-2xl border border-b-0 border-th-fgd-1">
-          {STAKEABLE_TOKENS.map((token) => (
-            <TokenButton
-              key={token}
-              handleTokenSelect={handleTokenSelect}
-              selectedToken={selectedToken}
-              tokenName={token}
-            />
-          ))}
-        </div>
-      </div>
-      <div className="grid max-w-4xl grid-cols-12">
-        <div
-          className={`col-span-7 rounded-bl-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
+      <div className="mb-6 grid grid-cols-3 rounded-xl border border-th-fgd-1">
+        <button
+          className={`col-span-1 mx-auto w-full rounded-l-xl border-r border-th-fgd-1 py-4 font-bold ${
+            activeTab === 'Stake'
+              ? 'bg-th-bkg-2 text-th-fgd-1'
+              : 'text-th-fgd-3'
+          }`}
+          onClick={() => setActiveTab('Stake')}
         >
-          <div className={`p-8 pt-6`}>
-            <div className="pb-2">
-              <TabUnderline
-                activeValue={activeFormTab}
-                values={['Add', 'Remove']}
-                onChange={(v) => setActiveFormTab(v)}
-              />
-            </div>
-            {activeFormTab === 'Add' ? (
-              <StakeForm onSuccess={onClose} token={selectedToken} />
-            ) : null}
-            {activeFormTab === 'Remove' ? (
-              <UnstakeForm onSuccess={onClose} token={selectedToken} />
-            ) : null}
-          </div>
-        </div>
-        <div
-          className={`col-span-5 rounded-br-2xl border-y border-r border-th-fgd-1 bg-th-bkg-2 p-8 pt-6`}
+          Stake
+        </button>
+        <button
+          className={`col-span-1 mx-auto w-full border-r border-th-fgd-1 py-4 font-bold ${
+            activeTab === 'Positions'
+              ? 'bg-th-bkg-2 text-th-fgd-1'
+              : 'text-th-fgd-3'
+          }`}
+          onClick={() => setActiveTab('Positions')}
         >
-          <AccountStats token={selectedToken} />
-        </div>
+          Your Positions
+        </button>
+        <button
+          className={`col-span-1 mx-auto w-full rounded-r-xl py-4 font-bold ${
+            activeTab === 'History'
+              ? 'bg-th-bkg-2 text-th-fgd-1'
+              : 'text-th-fgd-3'
+          }`}
+          onClick={() => setActiveTab('History')}
+        >
+          Transaction History
+        </button>
       </div>
+      <TabContent activeTab={activeTab} />
     </div>
   )
 }
 
 export default Index
+
+const TabContent = ({ activeTab }: { activeTab: string }) => {
+  switch (activeTab) {
+    case 'Stake':
+      return <Stake />
+    case 'Positions':
+      return <Positions />
+    case 'History':
+      return <TransactionHistory />
+    default:
+      return <Stake />
+  }
+}