Merge pull request #9 from hypercerts-org/feature/sponsor-metadata

create single migration file and add support for hyperboard sponsor m…

components/admin/create-or-update-default-sponsor-metadata-modal.tsx

@@ -0,0 +1,13 @@
+import { GenericModal } from "@/components/GenericModal";
+import { ModalProps } from "@chakra-ui/modal";
+import { CreateOrUpdateDefaultSponsorMetadataForm } from "@/components/forms/create-or-update-default-sponsor-metadata-form";
+
+export const CreateOrUpdateDefaultSponsorMetadataModal = ({
+  ...modalProps
+}: Omit<ModalProps, "children">) => {
+  return (
+    <GenericModal title="Create default sponsor metadata" {...modalProps}>
+      <CreateOrUpdateDefaultSponsorMetadataForm />
+    </GenericModal>
+  );
+};

components/admin/default-sponsor-metadata-admin.tsx

@@ -0,0 +1,88 @@
+import { useFetchDefaultSponsorMetadata } from "@/hooks/useFetchDefaultSponsorMetadata";
+import {
+  Button,
+  Card,
+  Center,
+  Flex,
+  Heading,
+  Spinner,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import { formatAddress } from "@/utils/formatting";
+import { CreateOrUpdateDefaultSponsorMetadataModal } from "@/components/admin/create-or-update-default-sponsor-metadata-modal";
+
+export const DefaultSponsorMetadataAdmin = () => {
+  const { data, isLoading } = useFetchDefaultSponsorMetadata();
+  const {
+    isOpen: isOpenCreate,
+    onClose: onCloseCreate,
+    onOpen: onOpenCreate,
+  } = useDisclosure();
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <Flex direction="column" width={"100%"}>
+      <VStack alignItems={"flex-start"}>
+        <Button onClick={onOpenCreate} colorScheme="blue">
+          Create
+        </Button>
+        <Card width={"100%"}>
+          {data?.data?.length ? (
+            <TableContainer width={"100%"} height={"100%"}>
+              <Table variant={"striped"} colorScheme="blue" size={"sm"}>
+                <Thead>
+                  <Tr>
+                    <Th>Address</Th>
+                    <Th>Type</Th>
+                    <Th>Company name</Th>
+                    <Th>First name</Th>
+                    <Th>Last name</Th>
+                    <Th>Image</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {data.data.map((defaultSponsorMetadata) => (
+                    <Tr key={defaultSponsorMetadata.address}>
+                      <Td>{formatAddress(defaultSponsorMetadata.address)}</Td>
+                      <Td>{defaultSponsorMetadata.type}</Td>
+                      <Td>{defaultSponsorMetadata.companyName}</Td>
+                      <Td>{defaultSponsorMetadata.firstName}</Td>
+                      <Td>{defaultSponsorMetadata.lastName}</Td>
+                      <Td>
+                        <a
+                          href={defaultSponsorMetadata.image}
+                          target={"_blank"}
+                        >
+                          {defaultSponsorMetadata.image}
+                        </a>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <Center p={4}>
+              <Heading>No default sponsor metadata found</Heading>
+            </Center>
+          )}
+        </Card>
+      </VStack>
+      <CreateOrUpdateDefaultSponsorMetadataModal
+        isOpen={isOpenCreate}
+        onClose={onCloseCreate}
+      />
+    </Flex>
+  );
+};

components/forms/create-or-update-default-sponsor-metadata-form.tsx

@@ -0,0 +1,125 @@
+import { useForm } from "react-hook-form";
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  useToast,
+  VStack,
+} from "@chakra-ui/react";
+import { useCreateDefaultSponsorMetadata } from "@/hooks/useCreateDefaultSponsorMetadata";
+
+interface CreateOrUpdateDefaultSponsorMetadataFormValues {
+  address: string;
+  type: string;
+  companyName: string;
+  firstName: string;
+  lastName: string;
+  image: string;
+}
+export const CreateOrUpdateDefaultSponsorMetadataForm = ({
+  initialValues,
+  onCompleted,
+}: {
+  initialValues?: CreateOrUpdateDefaultSponsorMetadataFormValues;
+  onCompleted?: () => void;
+}) => {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm({
+    defaultValues: initialValues,
+  });
+
+  const { mutateAsync: createDefaultSponsorMetadata } =
+    useCreateDefaultSponsorMetadata();
+  const toast = useToast();
+
+  const onSubmitted = async (
+    values: CreateOrUpdateDefaultSponsorMetadataFormValues,
+  ) => {
+    try {
+      await createDefaultSponsorMetadata({ data: values });
+      toast({
+        title: "Success",
+        description: "Default sponsor metadata created",
+        status: "success",
+        duration: 9000,
+        isClosable: true,
+      });
+      onCompleted?.();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmitted)}>
+      <VStack spacing={4}>
+        <FormControl>
+          <FormLabel htmlFor="address">Address</FormLabel>
+          <Input
+            id="address"
+            placeholder="Address"
+            {...register("address", {
+              required: "This is required",
+            })}
+          />
+          <FormErrorMessage>{errors.address?.message}</FormErrorMessage>
+        </FormControl>
+        <FormControl>
+          <FormLabel htmlFor="type">Type</FormLabel>
+          <Input
+            id="type"
+            placeholder="Type"
+            {...register("type", {
+              required: "This is required",
+            })}
+          />
+          <FormErrorMessage>{errors.type?.message}</FormErrorMessage>
+        </FormControl>
+        <FormControl>
+          <FormLabel htmlFor="companyName">Company name</FormLabel>
+          <Input
+            id="companyName"
+            placeholder="Company name"
+            {...register("companyName")}
+          />
+          <FormErrorMessage>{errors.companyName?.message}</FormErrorMessage>
+        </FormControl>
+        <FormControl>
+          <FormLabel htmlFor="firstName">First name</FormLabel>
+          <Input
+            id="firstName"
+            placeholder="First name"
+            {...register("firstName")}
+          />
+          <FormErrorMessage>{errors.firstName?.message}</FormErrorMessage>
+        </FormControl>
+        <FormControl>
+          <FormLabel htmlFor="lastName">Last name</FormLabel>
+          <Input
+            id="lastName"
+            placeholder="Last name"
+            {...register("lastName")}
+          />
+          <FormErrorMessage>{errors.lastName?.message}</FormErrorMessage>
+        </FormControl>
+        <FormControl>
+          <FormLabel htmlFor="image">Image</FormLabel>
+          <Input
+            id="image"
+            placeholder="Image"
+            {...register("image", {
+              required: "This is required",
+            })}
+          />
+          <FormErrorMessage>{errors.image?.message}</FormErrorMessage>
+        </FormControl>
+      </VStack>
+      <Button type={"submit"}>Submit</Button>
+    </form>
+  );
+};

hooks/useCreateDefaultSponsorMetadata.ts

@@ -0,0 +1,29 @@
+import { useGetAuthenticatedClient } from "@/hooks/useGetAuthenticatedClient";
+import { useMutation } from "wagmi";
+import { useToast } from "@chakra-ui/react";
+import { DefaultSponsorMetadataInsert } from "@/types/database-entities";
+
+export const useCreateDefaultSponsorMetadata = () => {
+  const getClient = useGetAuthenticatedClient();
+  const toast = useToast();
+
+  return useMutation(
+    async ({ data }: { data: DefaultSponsorMetadataInsert }) => {
+      const client = await getClient();
+
+      if (!client) {
+        toast({
+          title: "Error",
+          description:
+            "You must be logged in to create default sponsor metadata",
+          status: "error",
+          duration: 5000,
+          isClosable: true,
+        });
+        return null;
+      }
+
+      return client.from("sponsor_metadata").insert([data]);
+    },
+  );
+};

hooks/useFetchDefaultSponsorMetadata.tsx

@@ -0,0 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
+import { supabase } from "@/lib/supabase";
+
+export const useFetchDefaultSponsorMetadata = () => {
+  return useQuery(["default-sponsor-metadata"], async () => {
+    return supabase.from("default_sponsor_metadata").select("*");
+  });
+};

pages/admin/[page].tsx

@@ -7,12 +7,18 @@ import { RegistriesAdmin } from "@/components/admin/registries-admin";
 import { headerHeight } from "@/components/Layout";
 import { MyBlueprintsAdmin } from "@/components/admin/my-blueprints-admin";
 import { MyClaimsAdmin } from "@/components/admin/my-claims-admin";
+import { DefaultSponsorMetadataAdmin } from "@/components/admin/default-sponsor-metadata-admin";
 
 const SIDEBAR_ITEMS = [
   { name: "Hyperboards", icon: FiHome, href: "/admin/hyperboards/" },
   { name: "Registries", icon: FiTrendingUp, href: "/admin/registries/" },
   { name: "My claims", icon: FiCompass, href: "/admin/my-claims/" },
   { name: "My blueprints", icon: FiCompass, href: "/admin/my-blueprints/" },
+  {
+    name: "Default metadata",
+    icon: FiCompass,
+    href: "/admin/default-sponsor-metadata/",
+  },
 ];
 
 const Admin = () => {
@@ -28,6 +34,7 @@ const Admin = () => {
         {page === "registries" && <RegistriesAdmin />}
         {page === "my-claims" && <MyClaimsAdmin />}
         {page === "my-blueprints" && <MyBlueprintsAdmin />}
+        {page === "default-sponsor-metadata" && <DefaultSponsorMetadataAdmin />}
       </Flex>
     </Flex>
   );