diff --git a/components/AccountStats.tsx b/components/AccountStats.tsx
index 69637c1..f326f1b 100644
--- a/components/AccountStats.tsx
+++ b/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 (
<>
{`Boosted ${token}`}
@@ -34,12 +19,6 @@ const AccountStats = ({ token }: { token: string }) => {
Total Staked
{`100,000 ${token}`}
- {/*
-
Your position
-
- {bank ? : 0.0}
-
-
*/}
>
)
diff --git a/components/Positions.tsx b/components/Positions.tsx
new file mode 100644
index 0000000..4a64453
--- /dev/null
+++ b/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 ? (
+
+ ) : (
+
+ No positions found
+
+ )
+}
+
+export default Positions
diff --git a/components/Stake.tsx b/components/Stake.tsx
new file mode 100644
index 0000000..685bf7a
--- /dev/null
+++ b/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 (
+ <>
+
+ {STAKEABLE_TOKENS.map((token) => (
+
+ ))}
+
+
+
+
+
+ setActiveFormTab(v)}
+ />
+
+ {activeFormTab === 'Add' ? (
+
+ ) : null}
+ {activeFormTab === 'Remove' ? (
+
+ ) : null}
+
+
+
+
+ >
+ )
+}
+
+export default Stake
diff --git a/components/TransactionHistory.tsx b/components/TransactionHistory.tsx
new file mode 100644
index 0000000..5950e26
--- /dev/null
+++ b/components/TransactionHistory.tsx
@@ -0,0 +1,9 @@
+const TransactionHistory = () => {
+ return (
+
+ No transaction history found
+
+ )
+}
+
+export default TransactionHistory
diff --git a/pages/index.tsx b/pages/index.tsx
index fddeb13..7eb4cb6 100644
--- a/pages/index.tsx
+++ b/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 (
-
- {/*
- LEVERAGE STAKE SOL
-
*/}
-
-
-
-
- {/*
Tokens
*/}
-
- {STAKEABLE_TOKENS.map((token) => (
-
- ))}
-
-
-
-
+
-
+
+ Your Positions
+
+
+
)
}
export default Index
+
+const TabContent = ({ activeTab }: { activeTab: string }) => {
+ switch (activeTab) {
+ case 'Stake':
+ return
+ case 'Positions':
+ return
+ case 'History':
+ return
+ default:
+ return
+ }
+}