96 lines
3.6 KiB
TypeScript
96 lines
3.6 KiB
TypeScript
import dynamic from 'next/dynamic'
|
|
import GovernancePageWrapper from './GovernancePageWrapper'
|
|
import { useState } from 'react'
|
|
import Button from '@components/shared/Button'
|
|
import ListMarket from './ListMarket/ListMarket'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { InformationCircleIcon } from '@heroicons/react/20/solid'
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
|
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
|
|
|
|
const ListToken = dynamic(() => import('./ListToken/ListToken'))
|
|
|
|
enum LIST_OPTIONS {
|
|
MARKET,
|
|
TOKEN,
|
|
}
|
|
|
|
const BUTTON_WRAPPER_CLASSES =
|
|
'col-span-2 rounded-lg border border-th-bkg-3 md:col-span-1 p-6'
|
|
|
|
const ListMarketOrTokenPage = () => {
|
|
const { t } = useTranslation(['governance'])
|
|
const { connected } = useWallet()
|
|
const [listOptions, setListOption] = useState<LIST_OPTIONS | null>(null)
|
|
|
|
return (
|
|
<div className="min-h-[calc(100vh-64px)] p-8 pb-20 md:pb-16 lg:p-10">
|
|
<GovernancePageWrapper>
|
|
{listOptions === LIST_OPTIONS.MARKET ? (
|
|
<ListMarket goBack={() => setListOption(null)} />
|
|
) : listOptions === LIST_OPTIONS.TOKEN ? (
|
|
<ListToken goBack={() => setListOption(null)} />
|
|
) : (
|
|
<>
|
|
<h1 className="mb-4 flex items-center">{t('new-listing')}</h1>
|
|
<ul className="mb-6">
|
|
<li className="mb-2 flex items-center text-base">
|
|
<InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
|
|
<span>
|
|
{t('before-listing-1')}{' '}
|
|
<a
|
|
href="https://dao.mango.markets"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
{t('mango-governance')}
|
|
</a>
|
|
</span>
|
|
</li>
|
|
<li className="mb-2 flex items-center text-base">
|
|
<InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
|
|
{t('before-listing-3')}
|
|
</li>
|
|
<li className="mb-2 flex items-center text-base">
|
|
<InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0 text-th-fgd-4" />
|
|
{t('before-listing-4')}
|
|
</li>
|
|
</ul>
|
|
{connected ? (
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className={BUTTON_WRAPPER_CLASSES}>
|
|
<img
|
|
src="/images/list-market.png"
|
|
className="mb-2 h-10 w-auto"
|
|
/>
|
|
<h2 className="mb-2">{t('list-spot-market')}</h2>
|
|
<p className="mb-4">{t('list-spot-market-desc')}</p>
|
|
<Button onClick={() => setListOption(LIST_OPTIONS.MARKET)}>
|
|
{t('list-spot-market')}
|
|
</Button>
|
|
</div>
|
|
<div className={BUTTON_WRAPPER_CLASSES}>
|
|
<img
|
|
src="/images/list-token.png"
|
|
className="mb-2 h-10 w-auto"
|
|
/>
|
|
<h2 className="mb-2">{t('list-token')}</h2>
|
|
<p className="mb-4">{t('list-token-desc')}</p>
|
|
<Button onClick={() => setListOption(LIST_OPTIONS.TOKEN)}>
|
|
{t('list-token')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-th-bkg-3 p-6">
|
|
<ConnectEmptyState text={t('connect-to-list')} />
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</GovernancePageWrapper>
|
|
</div>
|
|
)
|
|
}
|
|
export default ListMarketOrTokenPage
|