Merge pull request #7 from hypercerts-org/feature/auth-using-message-…

…signing

Feature/auth using message signing

chakra-theme.ts

@@ -0,0 +1,31 @@
+import { extendTheme, ThemeOverride } from "@chakra-ui/react";
+
+export const chakraTheme: ThemeOverride = extendTheme({
+  fonts: {
+    heading: `'Director-regular', sans-serif`,
+    body: `'Switzer', sans-serif`,
+  },
+  fontSizes: {
+    lg: "24px",
+  },
+  lineHeights: {
+    base: "1",
+  },
+  components: {
+    Button: {
+      baseStyle: {
+        borderRadius: "0",
+      },
+    },
+    Input: {
+      baseStyle: {
+        field: {
+          borderRadius: "0",
+        },
+        addon: {
+          borderRadius: "0",
+        },
+      },
+    },
+  },
+} as ThemeOverride);

components/GenericModal.tsx

@@ -0,0 +1,28 @@
+import {
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+} from "@chakra-ui/modal";
+import { Flex, Modal } from "@chakra-ui/react";
+
+export const GenericModal = ({
+  title,
+  children,
+  ...modalProps
+}: ModalProps & { title: string }) => {
+  return (
+    <Modal {...modalProps}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Flex>{children}</Flex>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

components/Layout.tsx

@@ -3,6 +3,8 @@ import { Box, Flex, Heading, HStack, Text } from "@chakra-ui/react";
 import Link from "next/link";
 import { ConnectButton } from "@/components/ConnectButton";
 
+export const headerHeight = "80px";
+
 export const Layout = ({ children }: PropsWithChildren) => {
   return (
     <Flex
@@ -13,7 +15,7 @@ export const Layout = ({ children }: PropsWithChildren) => {
     >
       <Header />
       {children}
-      <Footer />
+      {/*<Footer />*/}
     </Flex>
   );
 };
@@ -22,7 +24,7 @@ const Header = () => {
   return (
     <Flex
       width={"100%"}
-      height={"80px"}
+      height={headerHeight}
       alignItems={"center"}
       paddingX={"40px"}
       backgroundColor={"grey.300"}
@@ -50,10 +52,10 @@ const Header = () => {
   );
 };
 
-const Footer = () => {
-  return (
-    <Flex width={"100%"} marginTop={"auto"}>
-      Footer
-    </Flex>
-  );
-};
+// const Footer = () => {
+//   return (
+//     <Flex width={"100%"} marginTop={"auto"}>
+//       Footer
+//     </Flex>
+//   );
+// };

components/admin/create-hyperboard-modal.tsx

@@ -0,0 +1,113 @@
+import { ModalProps } from "@chakra-ui/modal";
+import { useToast } from "@chakra-ui/react";
+import { useGetAuthenticatedClient } from "@/hooks/useGetAuthenticatedClient";
+import { useAddress } from "@/hooks/useAddress";
+import {
+  CreateOrUpdateHyperboardForm,
+  CreateOrUpdateHyperboardFormValues,
+} from "@/components/forms/create-or-update-hyperboard-form";
+import { GenericModal } from "@/components/GenericModal";
+import { useMyHyperboards } from "@/hooks/useMyHyperboards";
+import { useAddRegistriesToHyperboard } from "@/hooks/useAddRegistriesToHyperboard";
+import { useChainId } from "wagmi";
+
+export const CreateHyperboardModal = ({
+  ...modalProps
+}: Omit<ModalProps, "children">) => {
+  const getClient = useGetAuthenticatedClient();
+  const address = useAddress();
+  const toast = useToast();
+  const chainId = useChainId();
+
+  const { refetch } = useMyHyperboards();
+  const { mutateAsync: addRegistriesToHyperboard } =
+    useAddRegistriesToHyperboard();
+
+  const onConfirm = async (values: CreateOrUpdateHyperboardFormValues) => {
+    if (!address) {
+      toast({
+        title: "Error",
+        description: "You must be connected to create a hyperboard",
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
+      return;
+    }
+    const supabase = await getClient();
+
+    if (!supabase) {
+      return;
+    }
+
+    if (!chainId) {
+      return;
+    }
+
+    const { data: insertedHyperboard, error } = await supabase
+      .from("hyperboards")
+      .insert({
+        name: values.name,
+        chain_id: chainId,
+        admin_id: address,
+      })
+      .select();
+
+    if (error) {
+      toast({
+        title: "Error",
+        description: error.message,
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    const insertedHyperboardId = insertedHyperboard?.[0]?.id;
+    if (!insertedHyperboardId) {
+      toast({
+        title: "Error",
+        description: "Could not create hyperboard",
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    if (values.registries?.length) {
+      try {
+        await addRegistriesToHyperboard({
+          hyperboardId: insertedHyperboardId,
+          registryIds: values.registries.map(({ id }) => id),
+        });
+      } catch (e) {
+        console.error(e);
+        toast({
+          title: "Error",
+          description: "Could not add registries to hyperboard",
+          status: "error",
+          duration: 9000,
+          isClosable: true,
+        });
+        return;
+      }
+    }
+
+    toast({
+      title: "Success",
+      description: "Hyperboard created",
+      status: "success",
+    });
+
+    await refetch();
+    modalProps.onClose();
+  };
+
+  return (
+    <GenericModal title="Create Hyperboard" {...modalProps}>
+      <CreateOrUpdateHyperboardForm onSubmitted={onConfirm} />
+    </GenericModal>
+  );
+};

components/admin/create-registry-modal.tsx

@@ -0,0 +1,121 @@
+import { ModalProps } from "@chakra-ui/modal";
+import { useToast } from "@chakra-ui/react";
+import { useGetAuthenticatedClient } from "@/hooks/useGetAuthenticatedClient";
+import { useAddress } from "@/hooks/useAddress";
+import { GenericModal } from "@/components/GenericModal";
+import { useMyRegistries } from "@/hooks/useMyRegistries";
+import { ClaimInsert } from "@/types/database-entities";
+import {
+  CreateOrUpdateRegistryForm,
+  CreateUpdateRegistryFormValues,
+} from "@/components/forms/create-or-update-registry-form";
+import { useChainId } from "wagmi";
+
+export const CreateRegistryModal = ({
+  initialValues,
+  ...modalProps
+}: Omit<ModalProps, "children"> & {
+  initialValues: CreateUpdateRegistryFormValues | undefined;
+}) => {
+  const getClient = useGetAuthenticatedClient();
+  const address = useAddress();
+  const toast = useToast();
+  const chainId = useChainId();
+
+  const { refetch } = useMyRegistries();
+
+  const onConfirm = async ({
+    claims,
+    ...registry
+  }: CreateUpdateRegistryFormValues) => {
+    if (!address) {
+      toast({
+        title: "Error",
+        description: "You must be connected to create a registry",
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    const supabase = await getClient();
+
+    if (!supabase) {
+      return;
+    }
+
+    const admin_id = registry.admin_id || address;
+    const chain_id = registry.chain_id || chainId;
+
+    const { error, data } = await supabase
+      .from("registries")
+      .upsert([{ ...registry, admin_id, chain_id }])
+      .select();
+
+    if (error) {
+      toast({
+        title: "Error",
+        description: error.message,
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    const insertedRegistry = data[0];
+
+    if (!insertedRegistry) {
+      toast({
+        title: "Error",
+        description: "Something went wrong with inserting a registry",
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    toast({
+      title: "Success",
+      description: "Registry created",
+      status: "success",
+    });
+
+    const claimInserts: ClaimInsert[] = claims.map(({ hypercert_id }) => ({
+      registry_id: insertedRegistry.id,
+      hypercert_id,
+      chain_id: chainId,
+      admin_id: address,
+    }));
+
+    const { error: insertClaimsError } = await supabase
+      .from("claims")
+      .insert(claimInserts)
+      .select();
+
+    if (insertClaimsError) {
+      toast({
+        title: "Error",
+        description: insertClaimsError.message,
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
+      return;
+    }
+
+    await refetch();
+    modalProps.onClose();
+  };
+
+  return (
+    <GenericModal title="Create registry" {...modalProps}>
+      <CreateOrUpdateRegistryForm
+        initialValues={initialValues}
+        onSubmitted={onConfirm}
+      />
+    </GenericModal>
+  );
+};