'init'

app/components/DiceDropdown/DiceDropdown.tsx

@@ -0,0 +1,90 @@
+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>
+    );
+}