90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import { AccountBase } from "@/app/providers/AccountProvider/AccountProvider";
|
|
import { useAccountProvider } from "@/app/providers/AccountProvider/useAccountProvider";
|
|
import { Avatar, Box, Flex, Popover, Text } from "@mantine/core";
|
|
import { UserAccountSelect } from "../UserAccountSelect/UserAccountSelect";
|
|
import { IconPlus } from "@tabler/icons-react";
|
|
import { modals } from "@mantine/modals";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useState } from "react";
|
|
|
|
interface DiceDropdownProps {
|
|
children: React.ReactNode;
|
|
onClick?: (accountBase: AccountBase) => void;
|
|
selectedPublicKey?: string;
|
|
}
|
|
|
|
export function DiceDropdown(props: DiceDropdownProps) {
|
|
const { allAccounts } = useAccountProvider();
|
|
const navigate = useNavigate();
|
|
const [opened, setOpened] = useState(false);
|
|
|
|
const createAccount = () => {
|
|
modals.openConfirmModal({
|
|
title: 'Create account',
|
|
centered: true,
|
|
children: (
|
|
<Text size="sm">
|
|
You may be create new account or import existing
|
|
</Text>
|
|
),
|
|
withCloseButton: false,
|
|
labels: { confirm: 'Create new', cancel: "Import" },
|
|
cancelProps: {
|
|
autoFocus: false,
|
|
style: {
|
|
outline: 'none'
|
|
}
|
|
},
|
|
onCancel: () => {
|
|
navigate("/exists-seed");
|
|
},
|
|
onConfirm: () => {
|
|
navigate("/create-seed");
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Popover transitionProps={{
|
|
transition: 'pop-top-right'
|
|
}} withArrow opened={opened} onChange={setOpened} closeOnEscape closeOnClickOutside width={150}>
|
|
<Popover.Target>
|
|
<Box onClick={() => setOpened(!opened)}>
|
|
{props.children}
|
|
</Box>
|
|
</Popover.Target>
|
|
<Popover.Dropdown p={0}>
|
|
<Box style={{
|
|
maxHeight: 300,
|
|
overflowY: 'auto'
|
|
}}>
|
|
{allAccounts.map((accountBase: AccountBase) => {
|
|
return (<UserAccountSelect
|
|
key={accountBase.publicKey}
|
|
accountBase={accountBase}
|
|
selected={props.selectedPublicKey == accountBase.publicKey}
|
|
onClick={() => {
|
|
if (props.onClick) {
|
|
props.onClick(accountBase);
|
|
}
|
|
setOpened(false);
|
|
}}></UserAccountSelect>)
|
|
})}
|
|
<Flex direction={'row'} style={{
|
|
cursor: 'pointer'
|
|
}} onClick={() => {
|
|
createAccount();
|
|
setOpened(false);
|
|
}} pl={'xs'} pr={'xs'} pt={10} pb={10} gap={'xs'} align={'center'}>
|
|
<Avatar size={20} color="green">
|
|
<IconPlus size={14} />
|
|
</Avatar>
|
|
<Flex direction={'column'}>
|
|
<Text fw={500} size="xs">New account</Text>
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
</Popover.Dropdown>
|
|
</Popover>
|
|
);
|
|
} |