101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import Positions from '@components/Positions'
|
|
import Stake from '@components/Stake'
|
|
import TransactionHistory from '@components/TransactionHistory'
|
|
import mangoStore from '@store/mangoStore'
|
|
import type { NextPage } from 'next'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import { useEffect, useState } from 'react'
|
|
import { BOOST_ACCOUNT_PREFIX } from 'utils/constants'
|
|
|
|
const set = mangoStore.getState().set
|
|
|
|
export async function getStaticProps({ locale }: { locale: string }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, ['common'])),
|
|
},
|
|
}
|
|
}
|
|
|
|
const Index: NextPage = () => {
|
|
const [activeTab, setActiveTab] = useState('Stake')
|
|
const selectedToken = mangoStore((s) => s.selectedToken)
|
|
|
|
useEffect(() => {
|
|
const mangoAccounts = mangoStore.getState().mangoAccounts
|
|
const selectedMangoAccount = mangoAccounts.find(
|
|
(ma) =>
|
|
ma.name.toLowerCase() ===
|
|
`${(BOOST_ACCOUNT_PREFIX + selectedToken).toLowerCase()}`,
|
|
)
|
|
console.log(
|
|
'selectedMangoAccount',
|
|
(BOOST_ACCOUNT_PREFIX + selectedToken).toLowerCase(),
|
|
selectedMangoAccount,
|
|
)
|
|
|
|
set((s) => {
|
|
s.mangoAccount.current = selectedMangoAccount
|
|
})
|
|
}, [selectedToken])
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl px-6 pb-12 md:pb-20 lg:px-12">
|
|
<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')}
|
|
>
|
|
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')}
|
|
>
|
|
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')}
|
|
>
|
|
History
|
|
</button>
|
|
</div>
|
|
<TabContent activeTab={activeTab} setActiveTab={setActiveTab} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Index
|
|
|
|
const TabContent = ({
|
|
activeTab,
|
|
setActiveTab,
|
|
}: {
|
|
activeTab: string
|
|
setActiveTab: (tab: string) => void
|
|
}) => {
|
|
switch (activeTab) {
|
|
case 'Stake':
|
|
return <Stake />
|
|
case 'Positions':
|
|
return <Positions setActiveTab={setActiveTab} />
|
|
case 'History':
|
|
return <TransactionHistory />
|
|
default:
|
|
return <Stake />
|
|
}
|
|
}
|