71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { MangoAccount } from '@blockworks-foundation/mango-client'
|
|
import { useEffect, useState } from 'react'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import Select from './Select'
|
|
import { abbreviateAddress } from '../utils'
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
type MangoAccountSelectProps = {
|
|
className?: string
|
|
onChange?: (x) => void
|
|
value?: MangoAccount | null
|
|
disabled?: boolean
|
|
}
|
|
|
|
const MangoAccountSelect = ({
|
|
onChange,
|
|
value,
|
|
disabled = false,
|
|
className = '',
|
|
}: MangoAccountSelectProps) => {
|
|
const { t } = useTranslation('common')
|
|
const mangoAccounts = useMangoStore((s) => s.mangoAccounts)
|
|
const [selectedMangoAccount, setSelectedMangoAccount] = useState(
|
|
value || mangoAccounts[0]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (value) {
|
|
setSelectedMangoAccount(value)
|
|
}
|
|
}, [value])
|
|
|
|
const handleSelectMangoAccount = (value) => {
|
|
const mangoAccount = mangoAccounts.find(
|
|
(ma) => ma.publicKey.toString() === value
|
|
)
|
|
setSelectedMangoAccount(mangoAccount)
|
|
if (onChange) {
|
|
onChange(mangoAccount)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Select
|
|
disabled={disabled}
|
|
value={
|
|
<div className="text-left">
|
|
{abbreviateAddress(selectedMangoAccount?.publicKey)}
|
|
</div>
|
|
}
|
|
onChange={handleSelectMangoAccount}
|
|
placeholder={t('select-margin')}
|
|
className={className}
|
|
>
|
|
{mangoAccounts.length ? (
|
|
mangoAccounts.map((ma, index) => (
|
|
<Select.Option key={index} value={ma.publicKey.toString()}>
|
|
{abbreviateAddress(ma.publicKey)}
|
|
</Select.Option>
|
|
))
|
|
) : (
|
|
<Select.Option value className="text-th-fgd-4">
|
|
{t('no-margin')}
|
|
</Select.Option>
|
|
)}
|
|
</Select>
|
|
)
|
|
}
|
|
|
|
export default MangoAccountSelect
|