75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { MarginAccount } from '@blockworks-foundation/mango-client'
|
|
import { useEffect, useState } from 'react'
|
|
import useMangoStore from '../stores/useMangoStore'
|
|
import Select from './Select'
|
|
import { abbreviateAddress } from '../utils'
|
|
|
|
type MarginAccountSelectProps = {
|
|
className?: string
|
|
onChange?: (x) => void
|
|
value?: MarginAccount | null
|
|
disabled?: boolean
|
|
}
|
|
|
|
const MarginAccountSelect = ({
|
|
onChange,
|
|
value,
|
|
disabled = false,
|
|
className = '',
|
|
}: MarginAccountSelectProps) => {
|
|
const marginAccounts = useMangoStore((s) => s.marginAccounts)
|
|
const [selectedMarginAccount, setSelectedMarginAccount] = useState(
|
|
value || marginAccounts[0]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (value) {
|
|
setSelectedMarginAccount(value)
|
|
}
|
|
}, [value])
|
|
|
|
const handleSelectMarginAccount = (value) => {
|
|
const marginAccount = marginAccounts.find(
|
|
(ma) => ma.publicKey.toString() === value
|
|
)
|
|
setSelectedMarginAccount(marginAccount)
|
|
if (onChange) {
|
|
onChange(marginAccount)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Select
|
|
disabled={disabled}
|
|
value={
|
|
<div className="text-left">
|
|
{abbreviateAddress(selectedMarginAccount?.publicKey)}
|
|
</div>
|
|
}
|
|
onChange={handleSelectMarginAccount}
|
|
placeholder="Select Margin Account"
|
|
className={className}
|
|
>
|
|
{marginAccounts.length ? (
|
|
marginAccounts
|
|
.slice()
|
|
.sort(
|
|
(a, b) =>
|
|
(a.publicKey.toBase58() > b.publicKey.toBase58() && 1) || -1
|
|
)
|
|
.map((ma, index) => (
|
|
<Select.Option key={index} value={ma.publicKey.toString()}>
|
|
{abbreviateAddress(ma.publicKey)}
|
|
</Select.Option>
|
|
))
|
|
) : (
|
|
<Select.Option value className="text-th-fgd-4">
|
|
No Margin Accounts Found
|
|
</Select.Option>
|
|
)}
|
|
</Select>
|
|
)
|
|
}
|
|
|
|
export default MarginAccountSelect
|