69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import TokenButton from './TokenButton'
|
|
import { useCallback, useState } from 'react'
|
|
import TabUnderline from './shared/TabUnderline'
|
|
import StakeForm from '@components/StakeForm'
|
|
import UnstakeForm from '@components/UnstakeForm'
|
|
import AccountStats from './AccountStats'
|
|
import mangoStore from '@store/mangoStore'
|
|
import { STAKEABLE_TOKENS } from 'utils/constants'
|
|
|
|
const set = mangoStore.getState().set
|
|
|
|
const Stake = () => {
|
|
const [activeFormTab, setActiveFormTab] = useState('Add')
|
|
const selectedToken = mangoStore((s) => s.selectedToken)
|
|
|
|
const onClose = useCallback(() => {
|
|
console.log('StakeForm onSuccess')
|
|
}, [])
|
|
|
|
const handleTokenSelect = useCallback((token: string) => {
|
|
set((state) => {
|
|
state.selectedToken = token
|
|
})
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<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 className="grid grid-cols-12">
|
|
<div
|
|
className={`order-2 col-span-12 rounded-b-2xl border border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1 md:order-2 md:col-span-7 md:rounded-br-none`}
|
|
>
|
|
<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={`order-1 col-span-12 border-x border-t border-th-fgd-1 bg-th-bkg-2 p-8 pt-6 md:order-2 md:col-span-5 md:rounded-br-2xl md:border-b md:border-l-0`}
|
|
>
|
|
<AccountStats token={selectedToken} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Stake
|