Untitled

import {
  ActionIcon,
  AppShell,
  Box,
  createTheme,
  Group,
  HoverCard,
  MantineProvider,
  Skeleton,
  Text,
  Tooltip,
} from "@mantine/core";
import { FaCopy, FaEthereum, FaSquareCheck } from "react-icons/fa6";
import { MdAccountCircle } from "react-icons/md";
import { getIns } from "./utils/utils.js";
import data from "./assets/mockdata.json";
import { useState } from "react";
import { useEffect } from "react";
import { getEthereumAddress } from "@injectivelabs/sdk-ts";
import InjectiveIcon from "./utils/InjectiveIcon.jsx";
import { IoSearch } from "react-icons/io5";
import { IoMdExpand } from "react-icons/io";
import { LuSettings } from "react-icons/lu";
import { FaGlobeAmericas } from "react-icons/fa";

const theme = createTheme({
  primaryColor: "orange",
  fontFamily: `"Inter Variable", "Roboto", system-ui, sans-serif`,
});

export default function App() {
  const [account, setAccount] = useState({
    ins: null,
    name: null,
    inj: null,
    evm: null,
  });
  const [copy, setCopy] = useState(null);

  useEffect(() => {
    (async () => {
      setAccount({
        ins: await getIns(data.address),
        name: "Account 1",
        inj: data.address,
        evm: getEthereumAddress(data.address),
      });
    })();
  }, []);

  return (
    <MantineProvider defaultColorScheme="dark" theme={theme}>
      <AppShell className="w-full flex flex-col items-center">
        <AppShell.Header
          className="w-full h-14 flex items-center justify-center px-4"
          bg={"dark.8"}
          pos={"sticky"}
        >
          <Box className="w-full max-w-screen-2xl justify-between h-full flex items-center">
            <Group>
              <ActionIcon size={"lg"} radius={"xl"} variant="light">
                <MdAccountCircle size={"1.25rem"} />
              </ActionIcon>
              {account.ins ? (
                // <Tooltip
                //   label={`${account.inj.substring(0, 5)}..${account.inj.slice(
                //     -5
                //   )}`}
                //   withArrow
                //   arrowSize={8}
                // >
                <HoverCard position="bottom-start" shadow="md">
                  <HoverCard.Target>
                    <Group className="select-none" gap={"0.25rem"}>
                      <Text className="font-semibold text-sm">
                        {account.ins
                          ? `${account.ins[0].toUpperCase()}${account.ins.slice(
                              1
                            )}.inj`
                          : account.name}
                      </Text>
                      <FaCopy size={"0.75rem"} />
                    </Group>
                  </HoverCard.Target>
                  <HoverCard.Dropdown>
                    <Group className="flex-col items-start select-none">
                      <Group
                        gap={"xs"}
                        className="hover:brightness-150 cursor-pointer items-center"
                        onClick={() => {
                          setCopy("ins");
                          // Reset to null after 3 seconds
                          const timer = setTimeout(() => {
                            setCopy(null);
                          }, 3000);

                          return () => clearTimeout(timer);
                        }}
                      >
                        <FaGlobeAmericas size={"0.75rem"} />
                        <Text className="font-semibold uppercase text-[0.7rem]">
                          {account.ins.length > 16
                            ? `${account.inj.substring(
                                0,
                                6
                              )}. . .${account.inj.slice(-6)}.inj`
                            : `${account.ins}.inj`}
                        </Text>
                        {copy === "ins" ? (
                          <FaSquareCheck size={"0.75rem"} />
                        ) : (
                          <FaCopy size={"0.75rem"} />
                        )}
                      </Group>
                      <Group
                        gap={"xs"}
                        className="hover:brightness-150 cursor-pointer items-center"
                        onClick={() => {
                          setCopy("inj");
                          // Reset to null after 3 seconds
                          const timer = setTimeout(() => {
                            setCopy(null);
                          }, 3000);

                          return () => clearTimeout(timer);
                        }}
                      >
                        <InjectiveIcon
                          size={"0.75rem"}
                          color={"var(--mantine-color-text)"}
                        />
                        <Text className="font-semibold uppercase text-[0.7rem]">{`${account.inj.substring(
                          0,
                          6
                        )}. . .${account.inj.slice(-6)}`}</Text>
                        {copy === "inj" ? (
                          <FaSquareCheck size={"0.75rem"} />
                        ) : (
                          <FaCopy size={"0.75rem"} />
                        )}
                      </Group>
                      <Group
                        gap={"xs"}
                        className="hover:brightness-150 cursor-pointer items-center"
                        onClick={() => {
                          setCopy("evm");
                          // Reset to null after 3 seconds
                          const timer = setTimeout(() => {
                            setCopy(null);
                          }, 3000);

                          return () => clearTimeout(timer);
                        }}
                      >
                        <FaEthereum size={"0.75rem"} />
                        <Text className="font-semibold uppercase text-[0.7rem]">{`${account.evm.substring(
                          0,
                          6
                        )}. . .${account.evm.slice(-6)}`}</Text>
                        {copy === "evm" ? (
                          <FaSquareCheck size={"0.75rem"} />
                        ) : (
                          <FaCopy size={"0.75rem"} />
                        )}
                      </Group>
                    </Group>
                  </HoverCard.Dropdown>
                </HoverCard>
              ) : (
                // </Tooltip>
                <Skeleton height={12} radius={"xl"} width={72} />
              )}
            </Group>
            <Group gap={"xs"}>
              <ActionIcon variant="subtle" radius={"xl"} size={"md"}>
                <IoSearch />
              </ActionIcon>
              <ActionIcon variant="subtle" radius={"xl"} size={"md"}>
                <IoMdExpand />
              </ActionIcon>
              <ActionIcon variant="subtle" radius={"xl"} size={"md"}>
                <LuSettings />
              </ActionIcon>
            </Group>
          </Box>
        </AppShell.Header>
        <AppShell.Main className="w-full max-w-screen-2xl p-4 min-h-max">
          <Box className="w-full h-72 rounded-xl" bg={"dark.8"}></Box>
        </AppShell.Main>
      </AppShell>
    </MantineProvider>
  );
}