2023-05-28 03:50:27 -07:00
|
|
|
import { OPENBOOK_PROGRAM_ID } from '@blockworks-foundation/mango-v4'
|
2023-05-23 13:00:02 -07:00
|
|
|
import Input from '@components/forms/Input'
|
2023-05-22 12:47:47 -07:00
|
|
|
import Label from '@components/forms/Label'
|
|
|
|
import Select from '@components/forms/Select'
|
2023-05-23 13:00:02 -07:00
|
|
|
import CreateOpenbookMarketModal from '@components/modals/CreateOpenbookMarketModal'
|
2023-05-28 22:43:01 -07:00
|
|
|
import Button, { IconButton } from '@components/shared/Button'
|
2023-05-22 12:47:47 -07:00
|
|
|
import Loading from '@components/shared/Loading'
|
2023-05-23 13:00:02 -07:00
|
|
|
import { Disclosure } from '@headlessui/react'
|
|
|
|
import {
|
2023-05-28 22:43:01 -07:00
|
|
|
ArrowLeftIcon,
|
2023-05-23 13:00:02 -07:00
|
|
|
ChevronDownIcon,
|
|
|
|
ExclamationCircleIcon,
|
2023-05-28 22:43:01 -07:00
|
|
|
ExclamationTriangleIcon,
|
2023-05-23 13:00:02 -07:00
|
|
|
} from '@heroicons/react/20/solid'
|
2023-05-28 03:50:27 -07:00
|
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
|
|
|
import { PublicKey } from '@solana/web3.js'
|
|
|
|
import GovernanceStore from '@store/governanceStore'
|
2023-05-22 16:39:06 -07:00
|
|
|
import mangoStore, { CLUSTER } from '@store/mangoStore'
|
2023-05-22 12:47:47 -07:00
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
|
|
|
import { useTranslation } from 'next-i18next'
|
2023-05-28 22:43:01 -07:00
|
|
|
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
|
2023-05-28 03:50:27 -07:00
|
|
|
import {
|
|
|
|
MANGO_DAO_WALLET,
|
|
|
|
MANGO_DAO_WALLET_GOVERNANCE,
|
|
|
|
} from 'utils/governance/constants'
|
|
|
|
import { createProposal } from 'utils/governance/instructions/createProposal'
|
2023-05-24 04:53:12 -07:00
|
|
|
import { getBestMarket } from 'utils/governance/listingTools'
|
2023-05-28 03:50:27 -07:00
|
|
|
import { notify } from 'utils/notifications'
|
2023-05-28 13:44:26 -07:00
|
|
|
import ListTokenSuccess from '../ListToken/ListTokenSuccess'
|
2023-05-28 22:43:01 -07:00
|
|
|
import { formatTokenSymbol } from 'utils/tokens'
|
|
|
|
import OnBoarding from '../OnBoarding'
|
|
|
|
import { calculateTradingParameters } from 'utils/governance/listingTools'
|
|
|
|
import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
|
2023-05-29 05:29:43 -07:00
|
|
|
import { tryGetPubKey } from 'utils/governance/tools'
|
2023-05-23 13:00:02 -07:00
|
|
|
|
|
|
|
type FormErrors = Partial<Record<keyof ListMarketForm, string>>
|
|
|
|
|
|
|
|
type ListMarketForm = {
|
|
|
|
openBookMarketExternalPk: string
|
|
|
|
proposalTitle: string
|
|
|
|
proposalDescription: string
|
2023-05-28 05:45:19 -07:00
|
|
|
marketIndex: number
|
|
|
|
marketName: string
|
2023-05-23 13:00:02 -07:00
|
|
|
}
|
2023-05-22 12:47:47 -07:00
|
|
|
|
|
|
|
enum VIEWS {
|
|
|
|
BASE_TOKEN,
|
|
|
|
PROPS,
|
|
|
|
SUCCESS,
|
|
|
|
}
|
|
|
|
|
2023-05-23 13:00:02 -07:00
|
|
|
const defaultFormValues: ListMarketForm = {
|
|
|
|
openBookMarketExternalPk: '',
|
|
|
|
proposalDescription: '',
|
|
|
|
proposalTitle: '',
|
2023-05-28 05:45:19 -07:00
|
|
|
marketIndex: 0,
|
|
|
|
marketName: '',
|
2023-05-23 13:00:02 -07:00
|
|
|
}
|
|
|
|
|
2023-05-28 22:43:01 -07:00
|
|
|
const ListMarket = ({ goBack }: { goBack: () => void }) => {
|
2023-05-28 03:50:27 -07:00
|
|
|
const wallet = useWallet()
|
2023-05-28 22:43:01 -07:00
|
|
|
const { handleConnect } = useEnhancedWallet()
|
2023-05-22 12:47:47 -07:00
|
|
|
const { t } = useTranslation(['governance'])
|
|
|
|
const { group } = useMangoGroup()
|
2023-05-22 16:39:06 -07:00
|
|
|
const connection = mangoStore((s) => s.connection)
|
2023-05-28 03:50:27 -07:00
|
|
|
const client = mangoStore((s) => s.client)
|
|
|
|
const voter = GovernanceStore((s) => s.voter)
|
2023-05-28 13:44:26 -07:00
|
|
|
|
2023-05-28 03:50:27 -07:00
|
|
|
const vsrClient = GovernanceStore((s) => s.vsrClient)
|
|
|
|
const proposals = GovernanceStore((s) => s.proposals)
|
2023-05-22 12:47:47 -07:00
|
|
|
|
2023-05-23 13:00:02 -07:00
|
|
|
const [advForm, setAdvForm] = useState<ListMarketForm>({
|
|
|
|
...defaultFormValues,
|
|
|
|
})
|
2023-05-28 13:44:26 -07:00
|
|
|
const [proposalPk, setProposalPk] = useState<string | null>(null)
|
2023-05-23 13:00:02 -07:00
|
|
|
const [formErrors, setFormErrors] = useState<FormErrors>({})
|
2023-05-22 12:47:47 -07:00
|
|
|
const [baseToken, setBaseToken] = useState<null | string>(null)
|
|
|
|
const [quoteToken, setQuoteToken] = useState<null | string>(null)
|
|
|
|
const [loadingMarketProps, setLoadingMarketProps] = useState(false)
|
2023-05-23 13:00:02 -07:00
|
|
|
const [proposing, setProposing] = useState(false)
|
|
|
|
const [marketPk, setMarketPk] = useState('')
|
2023-05-28 05:45:19 -07:00
|
|
|
const [currentView, setCurrentView] = useState(VIEWS.BASE_TOKEN)
|
2023-05-23 13:00:02 -07:00
|
|
|
const [createOpenbookMarketModal, setCreateOpenbookMarket] = useState(false)
|
2023-05-28 03:50:27 -07:00
|
|
|
const baseBank =
|
|
|
|
group && baseToken ? group.banksMapByName.get(baseToken) : null
|
|
|
|
const quoteBank =
|
|
|
|
group && quoteToken ? group.banksMapByName.get(quoteToken) : null
|
2023-05-28 05:45:19 -07:00
|
|
|
const marketName = `${baseToken?.toUpperCase()}/${quoteToken?.toUpperCase()}`
|
2023-05-22 12:47:47 -07:00
|
|
|
|
2023-05-28 22:43:01 -07:00
|
|
|
const [baseTokens, quoteTokens] = useMemo(() => {
|
|
|
|
if (!group) return [[], []]
|
|
|
|
const allTokens = [...group.banksMapByName.keys()].sort((a, b) =>
|
|
|
|
a.localeCompare(b)
|
|
|
|
)
|
|
|
|
return [
|
|
|
|
allTokens.filter((t) => t !== quoteToken),
|
|
|
|
allTokens.filter((t) => t !== baseToken),
|
|
|
|
]
|
|
|
|
}, [baseToken, group, quoteToken])
|
|
|
|
|
2023-05-23 13:00:02 -07:00
|
|
|
const handleSetAdvForm = (propertyName: string, value: string | number) => {
|
|
|
|
setFormErrors({})
|
|
|
|
setAdvForm({ ...advForm, [propertyName]: value })
|
|
|
|
}
|
|
|
|
const openCreateOpenbookMarket = () => {
|
|
|
|
setCreateOpenbookMarket(true)
|
|
|
|
}
|
2023-05-28 03:50:27 -07:00
|
|
|
const closeCreateOpenBookMarketModal = () => {
|
2023-05-25 13:34:29 -07:00
|
|
|
setCreateOpenbookMarket(false)
|
2023-05-28 03:50:27 -07:00
|
|
|
handleGetMarketProps()
|
2023-05-25 13:34:29 -07:00
|
|
|
}
|
2023-05-23 13:00:02 -07:00
|
|
|
const goToHomePage = async () => {
|
2023-05-29 05:29:43 -07:00
|
|
|
setFormErrors({})
|
2023-05-23 13:00:02 -07:00
|
|
|
setCurrentView(VIEWS.BASE_TOKEN)
|
|
|
|
setMarketPk('')
|
2023-05-28 13:44:26 -07:00
|
|
|
setProposalPk('')
|
2023-05-23 13:00:02 -07:00
|
|
|
setAdvForm({
|
|
|
|
...defaultFormValues,
|
|
|
|
})
|
|
|
|
}
|
2023-05-29 05:29:43 -07:00
|
|
|
|
|
|
|
const isFormValid = useCallback(
|
|
|
|
(advForm: ListMarketForm) => {
|
|
|
|
const invalidFields: FormErrors = {}
|
|
|
|
setFormErrors({})
|
|
|
|
const pubkeyFields: (keyof ListMarketForm)[] = [
|
|
|
|
'openBookMarketExternalPk',
|
|
|
|
]
|
|
|
|
const numberFields: (keyof ListMarketForm)[] = ['marketIndex']
|
|
|
|
const textFields: (keyof ListMarketForm)[] = [
|
|
|
|
'marketName',
|
|
|
|
'proposalTitle',
|
|
|
|
]
|
|
|
|
|
|
|
|
for (const key of pubkeyFields) {
|
|
|
|
if (!tryGetPubKey(advForm[key] as string)) {
|
|
|
|
invalidFields[key] = t('invalid-pk')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for (const key of numberFields) {
|
|
|
|
if (isNaN(advForm[key] as number) || advForm[key] === '') {
|
|
|
|
invalidFields[key] = t('invalid-num')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for (const key of textFields) {
|
|
|
|
if (!advForm[key]) {
|
|
|
|
invalidFields[key] = t('field-req')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (Object.keys(invalidFields).length) {
|
|
|
|
setFormErrors(invalidFields)
|
|
|
|
}
|
|
|
|
return invalidFields
|
|
|
|
},
|
|
|
|
[t]
|
|
|
|
)
|
2023-05-28 03:50:27 -07:00
|
|
|
const handlePropose = useCallback(async () => {
|
2023-05-29 05:29:43 -07:00
|
|
|
const invalidFields = isFormValid(advForm)
|
|
|
|
if (Object.keys(invalidFields).length) {
|
|
|
|
return
|
|
|
|
}
|
2023-05-23 13:00:02 -07:00
|
|
|
setProposing(true)
|
2023-05-28 03:50:27 -07:00
|
|
|
const index = proposals ? Object.values(proposals).length : 0
|
|
|
|
const proposalTx = []
|
2023-05-28 13:44:26 -07:00
|
|
|
|
2023-05-28 03:50:27 -07:00
|
|
|
const registerMarketix = await client!.program.methods
|
2023-05-28 05:45:19 -07:00
|
|
|
.serum3RegisterMarket(advForm.marketIndex, advForm.marketName)
|
2023-05-28 03:50:27 -07:00
|
|
|
.accounts({
|
|
|
|
group: group!.publicKey,
|
|
|
|
admin: MANGO_DAO_WALLET,
|
|
|
|
serumProgram: OPENBOOK_PROGRAM_ID[CLUSTER],
|
|
|
|
serumMarketExternal: new PublicKey(advForm.openBookMarketExternalPk),
|
|
|
|
baseBank: baseBank![0]!.publicKey,
|
|
|
|
quoteBank: quoteBank![0]!.publicKey,
|
|
|
|
payer: MANGO_DAO_WALLET,
|
|
|
|
})
|
|
|
|
.instruction()
|
2023-05-28 13:44:26 -07:00
|
|
|
|
2023-05-28 03:50:27 -07:00
|
|
|
proposalTx.push(registerMarketix)
|
|
|
|
|
|
|
|
const walletSigner = wallet as never
|
|
|
|
try {
|
|
|
|
const proposalAddress = await createProposal(
|
|
|
|
connection,
|
|
|
|
walletSigner,
|
|
|
|
MANGO_DAO_WALLET_GOVERNANCE,
|
|
|
|
voter.tokenOwnerRecord!,
|
|
|
|
advForm.proposalTitle,
|
|
|
|
advForm.proposalDescription,
|
|
|
|
index,
|
|
|
|
proposalTx,
|
|
|
|
vsrClient!
|
|
|
|
)
|
2023-05-28 13:44:26 -07:00
|
|
|
setProposalPk(proposalAddress.toBase58())
|
|
|
|
setCurrentView(VIEWS.SUCCESS)
|
2023-05-28 03:50:27 -07:00
|
|
|
} catch (e) {
|
|
|
|
notify({
|
|
|
|
title: t('error-proposal-creation'),
|
|
|
|
description: `${e}`,
|
|
|
|
type: 'error',
|
|
|
|
})
|
|
|
|
}
|
2023-05-23 13:00:02 -07:00
|
|
|
setProposing(false)
|
2023-05-28 03:50:27 -07:00
|
|
|
}, [
|
|
|
|
advForm,
|
|
|
|
baseBank,
|
|
|
|
client,
|
|
|
|
connection,
|
|
|
|
group,
|
2023-05-29 05:29:43 -07:00
|
|
|
isFormValid,
|
2023-05-28 03:50:27 -07:00
|
|
|
proposals,
|
|
|
|
quoteBank,
|
|
|
|
t,
|
2023-05-29 05:29:43 -07:00
|
|
|
voter.tokenOwnerRecord,
|
2023-05-28 03:50:27 -07:00
|
|
|
vsrClient,
|
|
|
|
wallet,
|
|
|
|
])
|
|
|
|
|
2023-05-22 12:47:47 -07:00
|
|
|
const goToPropsPage = async () => {
|
|
|
|
await handleGetMarketProps()
|
|
|
|
setCurrentView(VIEWS.PROPS)
|
|
|
|
}
|
2023-05-22 16:39:06 -07:00
|
|
|
const handleGetMarketProps = useCallback(async () => {
|
|
|
|
if (!baseBank?.length || !quoteBank?.length) {
|
|
|
|
return
|
|
|
|
}
|
2023-05-22 12:47:47 -07:00
|
|
|
setLoadingMarketProps(true)
|
2023-05-24 04:53:12 -07:00
|
|
|
const [bestMarketPk] = await Promise.all([
|
2023-05-22 16:39:06 -07:00
|
|
|
getBestMarket({
|
|
|
|
baseMint: baseBank[0].mint.toBase58(),
|
|
|
|
quoteMint: quoteBank[0].mint.toBase58(),
|
|
|
|
cluster: CLUSTER,
|
|
|
|
connection,
|
|
|
|
}),
|
|
|
|
])
|
2023-05-23 13:00:02 -07:00
|
|
|
setMarketPk(bestMarketPk?.toBase58() || '')
|
2023-05-22 12:47:47 -07:00
|
|
|
setLoadingMarketProps(false)
|
2023-05-28 03:50:27 -07:00
|
|
|
}, [baseBank, quoteBank, connection])
|
2023-05-22 12:47:47 -07:00
|
|
|
|
2023-05-28 05:45:19 -07:00
|
|
|
useEffect(() => {
|
|
|
|
const index = proposals ? Object.values(proposals).length : 0
|
|
|
|
|
|
|
|
setAdvForm((prevForm) => ({
|
|
|
|
...prevForm,
|
|
|
|
marketIndex: Number(index),
|
|
|
|
marketName: marketName,
|
|
|
|
proposalTitle: `List market ${marketName}`,
|
2023-05-28 13:44:26 -07:00
|
|
|
openBookMarketExternalPk: marketPk,
|
2023-05-28 05:45:19 -07:00
|
|
|
}))
|
2023-05-28 13:44:26 -07:00
|
|
|
}, [marketName, proposals, marketPk])
|
2023-05-28 05:45:19 -07:00
|
|
|
|
2023-05-28 22:43:01 -07:00
|
|
|
const tradingParams = useMemo(() => {
|
|
|
|
if (baseBank && quoteBank) {
|
|
|
|
return calculateTradingParameters(
|
|
|
|
baseBank[0].uiPrice,
|
|
|
|
quoteBank[0].uiPrice,
|
|
|
|
baseBank[0].mintDecimals,
|
|
|
|
quoteBank[0].mintDecimals
|
|
|
|
)
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
baseLots: 0,
|
|
|
|
quoteLots: 0,
|
|
|
|
minOrderValue: 0,
|
|
|
|
baseLotExponent: 0,
|
|
|
|
quoteLotExponent: 0,
|
|
|
|
minOrderSize: 0,
|
|
|
|
priceIncrement: 0,
|
|
|
|
priceIncrementRelative: 0,
|
|
|
|
}
|
|
|
|
}, [baseBank, quoteBank])
|
|
|
|
|
2023-05-22 12:47:47 -07:00
|
|
|
return (
|
2023-05-28 22:43:01 -07:00
|
|
|
<div>
|
|
|
|
<div className="mb-6 flex items-center">
|
|
|
|
<IconButton className="mr-4" onClick={goBack} size="medium">
|
|
|
|
<ArrowLeftIcon className="h-5 w-5" />
|
|
|
|
</IconButton>
|
2023-05-29 03:24:11 -07:00
|
|
|
<h1 className="flex items-center">{t('list-spot-market')}</h1>
|
2023-05-28 22:43:01 -07:00
|
|
|
</div>
|
|
|
|
<OnBoarding />
|
|
|
|
{proposalPk && currentView === VIEWS.SUCCESS ? (
|
|
|
|
<ListTokenSuccess proposalPk={proposalPk} token={advForm?.marketName} />
|
|
|
|
) : null}
|
|
|
|
{currentView === VIEWS.BASE_TOKEN ? (
|
2023-05-22 12:47:47 -07:00
|
|
|
<div className="mb-6">
|
2023-05-28 22:43:01 -07:00
|
|
|
<div className="rounded-lg border border-th-bkg-3 px-4 pt-6 pb-2">
|
|
|
|
<h2 className="mb-3 px-2 text-base">
|
2023-05-29 02:41:39 -07:00
|
|
|
{t('market-pair')}{' '}
|
2023-05-28 22:43:01 -07:00
|
|
|
{baseToken && quoteToken
|
|
|
|
? `- ${formatTokenSymbol(baseToken)}/${formatTokenSymbol(
|
|
|
|
quoteToken
|
|
|
|
)}`
|
|
|
|
: null}
|
|
|
|
</h2>
|
|
|
|
<div className="flex flex-wrap">
|
|
|
|
<div className="w-1/2 px-2 pb-4">
|
|
|
|
<Label text={t('base-token')} />
|
|
|
|
<Select
|
|
|
|
value={baseToken}
|
|
|
|
onChange={(token) => setBaseToken(token)}
|
|
|
|
className="w-full"
|
2023-05-22 12:47:47 -07:00
|
|
|
>
|
2023-05-28 22:43:01 -07:00
|
|
|
{baseTokens.map((token) => (
|
|
|
|
<Select.Option key={token} value={token}>
|
|
|
|
<div className="flex w-full items-center justify-between">
|
|
|
|
{token}
|
|
|
|
</div>
|
|
|
|
</Select.Option>
|
|
|
|
))}
|
|
|
|
</Select>
|
|
|
|
</div>
|
|
|
|
<div className="w-1/2 px-2 pb-4">
|
|
|
|
<Label text={t('quote-token')} />
|
|
|
|
<Select
|
|
|
|
value={quoteToken}
|
|
|
|
onChange={(token) => setQuoteToken(token)}
|
|
|
|
className="w-full"
|
|
|
|
>
|
|
|
|
{quoteTokens.map((token) => (
|
|
|
|
<Select.Option key={token} value={token}>
|
|
|
|
<div className="flex w-full items-center justify-between">
|
|
|
|
{token}
|
|
|
|
</div>
|
|
|
|
</Select.Option>
|
|
|
|
))}
|
|
|
|
</Select>
|
|
|
|
</div>
|
2023-05-22 12:47:47 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<Button
|
|
|
|
className="float-right mt-6 flex w-36 items-center justify-center"
|
|
|
|
onClick={goToPropsPage}
|
2023-05-23 13:00:02 -07:00
|
|
|
disabled={loadingMarketProps || !quoteToken || !baseToken}
|
2023-05-22 12:47:47 -07:00
|
|
|
size="large"
|
|
|
|
>
|
|
|
|
{loadingMarketProps ? (
|
|
|
|
<Loading className="w-4"></Loading>
|
|
|
|
) : (
|
|
|
|
t('next')
|
|
|
|
)}
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-05-28 22:43:01 -07:00
|
|
|
) : null}
|
|
|
|
{currentView === VIEWS.PROPS ? (
|
2023-05-23 13:00:02 -07:00
|
|
|
<div>
|
2023-05-28 22:43:01 -07:00
|
|
|
{!marketPk ? (
|
|
|
|
<>
|
|
|
|
<div className="rounded-lg border border-th-bkg-3 p-4 md:p-6">
|
|
|
|
<div className="mb-2 flex items-center">
|
|
|
|
<ExclamationTriangleIcon className="mr-2 h-5 w-5 text-th-warning" />
|
|
|
|
<h2 className="text-base">
|
|
|
|
{t('no-openbook-found', {
|
|
|
|
market: `${baseToken}/${quoteToken}`,
|
|
|
|
})}
|
|
|
|
</h2>
|
|
|
|
</div>
|
|
|
|
<p className="mb-6">{t('no-openbook-found-desc')}</p>
|
2023-05-23 13:00:02 -07:00
|
|
|
<Button onClick={openCreateOpenbookMarket}>
|
2023-05-28 22:43:01 -07:00
|
|
|
{t('create-openbook')}
|
2023-05-23 13:00:02 -07:00
|
|
|
</Button>
|
2023-05-28 22:43:01 -07:00
|
|
|
</div>
|
|
|
|
{createOpenbookMarketModal ? (
|
|
|
|
<CreateOpenbookMarketModal
|
|
|
|
quoteSymbol={quoteToken!}
|
|
|
|
baseSymbol={baseToken!}
|
|
|
|
isOpen={createOpenbookMarketModal}
|
|
|
|
onClose={closeCreateOpenBookMarketModal}
|
|
|
|
tradingParams={tradingParams}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<div className="rounded-md bg-th-bkg-2 p-4">
|
|
|
|
<h3 className="mb-2">{t('market-details')}</h3>
|
|
|
|
<div className="flex items-center justify-between">
|
|
|
|
<p>{t('market-name')}</p>
|
|
|
|
<p className="text-th-fgd-2">{`${baseToken}/${quoteToken}`}</p>
|
|
|
|
</div>
|
|
|
|
{tradingParams.minOrderSize ? (
|
|
|
|
<div className="mt-2 flex items-center justify-between">
|
|
|
|
<p>{t('min-order')}</p>
|
|
|
|
<p className="text-th-fgd-2">{tradingParams.minOrderSize}</p>
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
{tradingParams.minOrderSize ? (
|
|
|
|
<div className="mt-2 flex items-center justify-between">
|
|
|
|
<p>{t('price-tick')}</p>
|
|
|
|
<p className="text-th-fgd-2">
|
|
|
|
{tradingParams.priceIncrement}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{marketPk ? (
|
2023-05-23 13:00:02 -07:00
|
|
|
<Disclosure>
|
|
|
|
{({ open }) => (
|
|
|
|
<>
|
|
|
|
<Disclosure.Button
|
|
|
|
className={`mt-4 w-full rounded-md bg-th-bkg-2 p-4 md:hover:bg-th-bkg-3 ${
|
|
|
|
open ? 'rounded-b-none' : ''
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className={`flex items-center justify-between ${
|
|
|
|
Object.values(formErrors).length
|
|
|
|
? 'text-th-warning'
|
|
|
|
: ''
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
{t('adv-fields')}
|
|
|
|
<ChevronDownIcon
|
|
|
|
className={`h-5 w-5 text-th-fgd-3 ${
|
|
|
|
open ? 'rotate-180' : 'rotate-360'
|
|
|
|
}`}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</Disclosure.Button>
|
|
|
|
<Disclosure.Panel>
|
|
|
|
<div className="space-y-4 rounded-md rounded-t-none bg-th-bkg-2 p-4">
|
2023-05-28 05:45:19 -07:00
|
|
|
<div>
|
|
|
|
<Label text={t('market-name')} />
|
|
|
|
<Input
|
|
|
|
hasError={formErrors.marketName !== undefined}
|
|
|
|
type="text"
|
|
|
|
value={advForm.marketName.toString()}
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
|
|
handleSetAdvForm('marketName', e.target.value)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
{formErrors.marketName && (
|
|
|
|
<div className="mt-1.5 flex items-center space-x-1">
|
|
|
|
<ExclamationCircleIcon className="h-4 w-4 text-th-down" />
|
|
|
|
<p className="mb-0 text-xs text-th-down">
|
|
|
|
{formErrors.marketName}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<Label text={t('market-index')} />
|
|
|
|
<Input
|
|
|
|
hasError={formErrors.marketIndex !== undefined}
|
2023-05-29 05:29:43 -07:00
|
|
|
type="number"
|
2023-05-28 05:45:19 -07:00
|
|
|
value={advForm.marketIndex.toString()}
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
|
|
handleSetAdvForm('marketIndex', e.target.value)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
{formErrors.marketIndex && (
|
|
|
|
<div className="mt-1.5 flex items-center space-x-1">
|
|
|
|
<ExclamationCircleIcon className="h-4 w-4 text-th-down" />
|
|
|
|
<p className="mb-0 text-xs text-th-down">
|
|
|
|
{formErrors.marketIndex}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
2023-05-23 13:00:02 -07:00
|
|
|
<div>
|
|
|
|
<Label text={t('openbook-market-external')} />
|
|
|
|
<Input
|
|
|
|
hasError={
|
|
|
|
formErrors.openBookMarketExternalPk !== undefined
|
|
|
|
}
|
|
|
|
type="text"
|
|
|
|
value={advForm.openBookMarketExternalPk.toString()}
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
|
|
handleSetAdvForm(
|
|
|
|
'openBookMarketExternalPk',
|
|
|
|
e.target.value
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
{formErrors.openBookMarketExternalPk && (
|
|
|
|
<div className="mt-1.5 flex items-center space-x-1">
|
|
|
|
<ExclamationCircleIcon className="h-4 w-4 text-th-down" />
|
|
|
|
<p className="mb-0 text-xs text-th-down">
|
|
|
|
{formErrors.openBookMarketExternalPk}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<Label text={t('proposal-title')} />
|
|
|
|
<Input
|
|
|
|
hasError={formErrors.proposalTitle !== undefined}
|
|
|
|
type="text"
|
|
|
|
value={advForm.proposalTitle.toString()}
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
|
|
handleSetAdvForm('proposalTitle', e.target.value)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
{formErrors.proposalTitle && (
|
|
|
|
<div className="mt-1.5 flex items-center space-x-1">
|
|
|
|
<ExclamationCircleIcon className="h-4 w-4 text-th-down" />
|
|
|
|
<p className="mb-0 text-xs text-th-down">
|
|
|
|
{formErrors.proposalTitle}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<Label text={t('proposal-des')} />
|
|
|
|
<Input
|
|
|
|
hasError={
|
|
|
|
formErrors.proposalDescription !== undefined
|
|
|
|
}
|
|
|
|
type="text"
|
|
|
|
value={advForm.proposalDescription.toString()}
|
|
|
|
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
|
|
|
handleSetAdvForm(
|
|
|
|
'proposalDescription',
|
|
|
|
e.target.value
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
{formErrors.proposalDescription && (
|
|
|
|
<div className="mt-1.5 flex items-center space-x-1">
|
|
|
|
<ExclamationCircleIcon className="h-4 w-4 text-th-down" />
|
|
|
|
<p className="mb-0 text-xs text-th-down">
|
|
|
|
{formErrors.proposalDescription}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Disclosure.Panel>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Disclosure>
|
2023-05-28 22:43:01 -07:00
|
|
|
) : null}
|
|
|
|
<div className="mt-6">
|
2023-05-23 13:00:02 -07:00
|
|
|
<Button
|
2023-05-28 22:43:01 -07:00
|
|
|
className="mr-4"
|
2023-05-23 13:00:02 -07:00
|
|
|
onClick={goToHomePage}
|
|
|
|
disabled={proposing}
|
2023-05-28 22:43:01 -07:00
|
|
|
secondary
|
2023-05-23 13:00:02 -07:00
|
|
|
size="large"
|
|
|
|
>
|
2023-05-28 22:43:01 -07:00
|
|
|
{t('cancel')}
|
2023-05-23 13:00:02 -07:00
|
|
|
</Button>
|
2023-05-28 22:43:01 -07:00
|
|
|
{wallet.connected ? (
|
|
|
|
<Button
|
|
|
|
onClick={handlePropose}
|
|
|
|
disabled={proposing || !marketPk}
|
|
|
|
size="large"
|
|
|
|
>
|
|
|
|
{proposing ? (
|
|
|
|
<Loading className="w-4"></Loading>
|
|
|
|
) : (
|
|
|
|
t('propose-listing')
|
|
|
|
)}
|
|
|
|
</Button>
|
|
|
|
) : (
|
|
|
|
<Button onClick={handleConnect} size="large">
|
|
|
|
{t('connect-wallet')}
|
|
|
|
</Button>
|
|
|
|
)}
|
2023-05-23 13:00:02 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-05-28 22:43:01 -07:00
|
|
|
) : null}
|
2023-05-22 12:47:47 -07:00
|
|
|
</div>
|
|
|
|
)
|
2023-05-22 05:41:27 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
export default ListMarket
|