89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
import { MangoAccount } from '@blockworks-foundation/mango-client'
|
|
import { RadioGroup } from '@headlessui/react'
|
|
import { CheckCircleIcon } from '@heroicons/react/outline'
|
|
import useLocalStorageState from 'hooks/useLocalStorageState'
|
|
import { useTranslation } from 'next-i18next'
|
|
import useMangoStore, { LAST_ACCOUNT_KEY } from 'stores/useMangoStore'
|
|
import MangoAccountCard from './MangoAccountCard'
|
|
|
|
const SelectMangoAccount = ({
|
|
onClose,
|
|
className,
|
|
}: {
|
|
onClose?: () => void
|
|
className?: string
|
|
}) => {
|
|
const { t } = useTranslation('common')
|
|
const selectedMangoAccount = useMangoStore(
|
|
(s) => s.selectedMangoAccount.current
|
|
)
|
|
const mangoAccounts = useMangoStore((s) => s.mangoAccounts)
|
|
const actions = useMangoStore((s) => s.actions)
|
|
const setMangoStore = useMangoStore((s) => s.set)
|
|
const [, setLastAccountViewed] = useLocalStorageState(LAST_ACCOUNT_KEY)
|
|
|
|
const handleMangoAccountChange = (mangoAccount: MangoAccount) => {
|
|
setLastAccountViewed(mangoAccount.publicKey.toString())
|
|
setMangoStore((state) => {
|
|
state.selectedMangoAccount.current = mangoAccount
|
|
})
|
|
|
|
actions.fetchTradeHistory()
|
|
if (onClose) {
|
|
onClose()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<RadioGroup
|
|
value={selectedMangoAccount}
|
|
onChange={(acc) => {
|
|
if (acc) {
|
|
handleMangoAccountChange(acc)
|
|
}
|
|
}}
|
|
>
|
|
<RadioGroup.Label className="sr-only">
|
|
{t('select-account')}
|
|
</RadioGroup.Label>
|
|
<div className={`${className} space-y-2`}>
|
|
{mangoAccounts.map((account) => (
|
|
<RadioGroup.Option
|
|
key={account.publicKey.toString()}
|
|
value={account}
|
|
className={({ checked }) =>
|
|
`${
|
|
checked
|
|
? 'ring-1 ring-inset ring-th-green'
|
|
: 'ring-1 ring-inset ring-th-fgd-4 hover:ring-th-fgd-2'
|
|
}
|
|
default-transition relative flex w-full cursor-pointer rounded-md px-3 py-3 focus:outline-none`
|
|
}
|
|
>
|
|
{({ checked }) => (
|
|
<>
|
|
<div className="flex w-full items-center justify-between">
|
|
<div className="flex items-center">
|
|
<div className="text-sm">
|
|
<RadioGroup.Label className="flex cursor-pointer items-center text-th-fgd-1">
|
|
<MangoAccountCard mangoAccount={account} />
|
|
</RadioGroup.Label>
|
|
</div>
|
|
</div>
|
|
{checked && (
|
|
<div className="flex-shrink-0 text-th-green">
|
|
<CheckCircleIcon className="h-5 w-5" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</RadioGroup.Option>
|
|
))}
|
|
</div>
|
|
</RadioGroup>
|
|
)
|
|
}
|
|
|
|
export default SelectMangoAccount
|