Merge pull request #286 from hackdays-io/staging

Release v1.1.0
hackdays-io · Jul 3, 2023 · 07ca53e · 07ca53e · vercel · Jul 3, 2023
2 parents 06a5cdf + bc45663
commit 07ca53e
Show file tree

Hide file tree

Showing 39 changed files with 1,279 additions and 731 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/docs/devenv_mac.md b/docs/devenv_mac.md
@@ -31,6 +31,13 @@ Node.jsは、JavaScriptランタイム環境であり、サーバーサイドで
    ```
    MintRallyではversion16と18にて動作確認をとっています。
    そのためVersion18を指定してインストールしています。
+
+2. Nodeのバージョン指定しているので"keg-only"となっており、PATHが通されていないはずなので以下のコマンドを実行する。
+
+   ```shell
+   'export PATH="/opt/homebrew/opt/node@18/bin:$PATH"' >> ~/.zshrc"
+   ```
+
    
 3. インストール確認
    ```shell

diff --git a/frontend/src/components/atoms/LocaleSelector.tsx b/frontend/src/components/atoms/LocaleSelector.tsx
@@ -2,7 +2,7 @@ import { ChevronDownIcon } from "@chakra-ui/icons";
 import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLanguage } from "@fortawesome/free-solid-svg-icons";
+import { faGlobe } from "@fortawesome/free-solid-svg-icons";
 
 const LocaleSelector = () => {
   const router = useRouter();
@@ -11,7 +11,7 @@ const LocaleSelector = () => {
     <>
       <Menu>
         <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
-          <FontAwesomeIcon icon={faLanguage} />
+          <FontAwesomeIcon icon={faGlobe} />
         </MenuButton>
         <MenuList>
           {otherLocales.map((locale) => {

diff --git a/frontend/src/components/atoms/icons/opensea/OpenseaIcon.tsx b/frontend/src/components/atoms/icons/opensea/OpenseaIcon.tsx
@@ -0,0 +1,11 @@
+import { Icon } from '@chakra-ui/react'
+import { FC } from 'react';
+
+export const OpenseaIcon: FC = () =>
+  <Icon height="100%" width="100%" maxWidth="20px">
+    <svg height="100%" width="100%" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M90 45C90 69.8514 69.8514 90 45 90C20.1486 90 0 69.8514 0 45C0 20.1486 20.1486 0 45 0C69.8566 0 90 20.1486 90 45Z" fill="#2081E2" />
+      <path d="M22.2011 46.512L22.3953 46.2069L34.1016 27.8939C34.2726 27.6257 34.6749 27.6535 34.8043 27.9447C36.76 32.3277 38.4475 37.7786 37.6569 41.1721C37.3194 42.5683 36.3948 44.4593 35.3545 46.2069C35.2204 46.4612 35.0725 46.7109 34.9153 46.9513C34.8413 47.0622 34.7165 47.127 34.5824 47.127H22.5432C22.2196 47.127 22.0301 46.7756 22.2011 46.512Z" fill="white" />
+      <path d="M74.38 49.9149V52.8137C74.38 52.9801 74.2783 53.1281 74.1304 53.1928C73.2242 53.5812 70.1219 55.0052 68.832 56.799C65.5402 61.3807 63.0251 67.932 57.4031 67.932H33.949C25.6362 67.932 18.9 61.1727 18.9 52.8322V52.564C18.9 52.3421 19.0803 52.1618 19.3023 52.1618H32.377C32.6359 52.1618 32.8255 52.4022 32.8024 52.6565C32.7099 53.5072 32.8671 54.3764 33.2693 55.167C34.0461 56.7435 35.655 57.7283 37.3934 57.7283H43.866V52.675H37.4673C37.1391 52.675 36.9449 52.2959 37.1345 52.0277C37.2038 51.9214 37.2824 51.8104 37.3656 51.6856C37.9713 50.8257 38.8358 49.4895 39.6958 47.9684C40.2829 46.9421 40.8516 45.8463 41.3093 44.746C41.4018 44.5472 41.4758 44.3438 41.5497 44.1449C41.6746 43.7936 41.804 43.4653 41.8965 43.1371C41.9889 42.8597 42.0629 42.5684 42.1369 42.2956C42.3542 41.3617 42.4467 40.3723 42.4467 39.3459C42.4467 38.9437 42.4282 38.523 42.3912 38.1207C42.3727 37.6815 42.3172 37.2423 42.2617 36.8031C42.2247 36.4147 42.1554 36.031 42.0814 35.6288C41.9889 35.0416 41.8595 34.4591 41.7115 33.8719L41.6607 33.65C41.5497 33.2478 41.4573 32.864 41.3278 32.4618C40.9626 31.1996 40.5418 29.9698 40.098 28.8186C39.9362 28.3609 39.7512 27.9217 39.5663 27.4825C39.2935 26.8213 39.0161 26.2203 38.7619 25.6516C38.6324 25.3927 38.5214 25.1569 38.4105 24.9165C38.2857 24.6437 38.1562 24.371 38.0268 24.112C37.9343 23.9132 37.8279 23.7283 37.754 23.5434L36.9634 22.0824C36.8524 21.8836 37.0374 21.6478 37.2546 21.7079L42.2016 23.0487H42.2155C42.2247 23.0487 42.2294 23.0533 42.234 23.0533L42.8859 23.2336L43.6025 23.437L43.866 23.511V20.5706C43.866 19.1512 45.0034 18 46.4089 18C47.1116 18 47.7496 18.2866 48.2073 18.7536C48.665 19.2206 48.9517 19.8586 48.9517 20.5706V24.935L49.4787 25.0829C49.5204 25.0968 49.562 25.1153 49.599 25.143C49.7284 25.2401 49.9133 25.3835 50.1491 25.5591C50.3341 25.7071 50.5329 25.8874 50.7733 26.0723C51.2495 26.4561 51.8181 26.9508 52.4423 27.5194C52.6087 27.6628 52.7706 27.8107 52.9185 27.9587C53.723 28.7076 54.6245 29.5861 55.4845 30.557C55.7249 30.8297 55.9607 31.1071 56.2011 31.3984C56.4415 31.6943 56.6958 31.9856 56.9177 32.2769C57.209 32.6652 57.5233 33.0674 57.7961 33.4882C57.9256 33.687 58.0735 33.8904 58.1984 34.0892C58.5497 34.6209 58.8595 35.1711 59.1554 35.7212C59.2802 35.9755 59.4097 36.2529 59.5206 36.5257C59.8489 37.2608 60.1078 38.0098 60.2742 38.7588C60.3251 38.9206 60.3621 39.0963 60.3806 39.2535V39.2904C60.436 39.5124 60.4545 39.7482 60.473 39.9886C60.547 40.756 60.51 41.5235 60.3436 42.2956C60.2742 42.6239 60.1818 42.9336 60.0708 43.2619C59.9598 43.5763 59.8489 43.9045 59.7056 44.2143C59.4282 44.8569 59.0999 45.4996 58.7115 46.1006C58.5867 46.3225 58.4388 46.5583 58.2908 46.7802C58.129 47.016 57.9626 47.238 57.8146 47.4553C57.6112 47.7327 57.3939 48.0239 57.172 48.2828C56.9732 48.5556 56.7697 48.8284 56.5478 49.0688C56.2381 49.434 55.9422 49.7808 55.6324 50.1137C55.4475 50.331 55.2487 50.5529 55.0452 50.7517C54.8464 50.9736 54.643 51.1724 54.4581 51.3573C54.1483 51.6671 53.8894 51.9075 53.6721 52.1063L53.1635 52.5733C53.0896 52.638 52.9925 52.675 52.8908 52.675H48.9517V57.7283H53.9079C55.0175 57.7283 56.0716 57.3353 56.9223 56.6141C57.2136 56.3598 58.485 55.2594 59.9876 53.5997C60.0384 53.5442 60.1032 53.5026 60.1771 53.4841L73.8668 49.5265C74.1211 49.4525 74.38 49.6467 74.38 49.9149Z" fill="white" />
+    </svg>
+  </Icon >
diff --git a/frontend/src/components/molecules/user/TokenModal.tsx b/frontend/src/components/molecules/user/TokenModal.tsx
@@ -3,7 +3,7 @@ import {
   Button,
   Divider,
   Image,
-  Input,
+  Link,
   Text,
   Textarea,
 } from "@chakra-ui/react";
@@ -13,6 +13,7 @@ import { FC } from "react";
 import { ipfs2http } from "../../../../utils/ipfs2http";
 import ModalBase from "../common/ModalBase";
 import { NFT } from "types/NFT";
+import { OpenseaIcon } from "../../atoms/icons/opensea/OpenseaIcon";
 
 type Props = {
   isOpen: boolean;
@@ -31,6 +32,15 @@ const TokenModal: FC<Props> = ({ isOpen, onClose, nft, shareURL, tokenId }) => {
     document.execCommand("copy");
   };
 
+  const openseaLinkByChainId = () => {
+    const chainId = process.env.NEXT_PUBLIC_CHAIN_ID!;
+    return chainId === "80001"
+      ? "https://testnets.opensea.io/assets/mumbai"
+      : chainId === "137"
+      ? "https://opensea.io/assets/matic"
+      : "localhost";
+  };
+
   return (
     <ModalBase isOpen={isOpen} onClose={onClose}>
       {nft && (
@@ -83,6 +93,24 @@ const TokenModal: FC<Props> = ({ isOpen, onClose, nft, shareURL, tokenId }) => {
               </Button>
             </Box>
           )}
+          <Box>
+            <Link
+              href={`${openseaLinkByChainId()}/${
+                process.env.NEXT_PUBLIC_CONTRACT_MINT_NFT_MANAGER
+              }/${tokenId}`}
+              target="_blank"
+            >
+              <Button
+                size="small"
+                p={2}
+                width="full"
+                mt={3}
+                leftIcon={<OpenseaIcon />}
+              >
+                OpenSea
+              </Button>
+            </Link>
+          </Box>
         </Box>
       )}
     </ModalBase>

diff --git a/frontend/src/components/organisms/CreateEventForm.tsx b/frontend/src/components/organisms/CreateEventForm.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import {
   Alert,
   AlertDescription,
@@ -20,18 +20,18 @@ import {
   Input,
   Button,
 } from "@chakra-ui/react";
-import {
-  ICreateEventRecordParams,
-  IEventGroup,
-  INFTImage,
-  useCreateEventRecord,
-  useOwnEventGroups,
-} from "../../hooks/useEventManager";
 import ErrorMessage from "../../components/atoms/form/ErrorMessage";
 import { useLocale } from "../../hooks/useLocale";
 import Link from "next/link";
 import NFTAttributesForm from "./NFTAttributesForm";
 import { useIpfs } from "src/hooks/useIpfs";
+import { useCreateEvent, useOwnEventGroups } from "src/hooks/useEvent";
+import { Event } from "types/Event";
+import { NFT } from "types/NFT";
+
+type Props = {
+  address: string;
+};
 
 interface EventFormData {
   eventGroupId: string;
@@ -43,19 +43,24 @@ interface EventFormData {
   secretPhrase: string;
   mintLimit: number;
   useMtx: "true" | "false";
-  nfts: INFTImage[];
+  nfts: NFT.NFTImage[];
 }
 
-const CreateEventForm: FC = () => {
+const CreateEventForm: FC<Props> = ({ address }) => {
   const { t } = useLocale();
-  const { loading, errors, nftAttributes, saveNFTMetadataOnIPFS } = useIpfs();
+  const {
+    loading: isUploadingMetadata,
+    errors,
+    nftAttributes,
+    saveNFTMetadataOnIPFS,
+  } = useIpfs();
   const [formData, setFormData] = useState<EventFormData | null>(null);
+
   const {
     control,
     handleSubmit,
     formState: { isSubmitting },
     watch,
-    setValue,
   } = useForm<EventFormData>({
     mode: "all",
     defaultValues: {
@@ -68,74 +73,71 @@ const CreateEventForm: FC = () => {
       secretPhrase: "",
       mintLimit: 10,
       useMtx: undefined,
-      nfts: [],
+      nfts: [
+        { name: "", requiredParticipateCount: 0, description: "", image: "" },
+      ],
     },
   });
 
   const { remove, append } = useFieldArray({ control, name: "nfts" });
 
-  useEffect(() => {
-    const groupNFTAttributes = window.localStorage.getItem(
-      `group${watch("eventGroupId")}`
-    );
-    if (!groupNFTAttributes) {
-      console.log("dont has group");
-      setValue("nfts", [
-        { name: "", requiredParticipateCount: 0, description: "", image: "" },
-      ]);
-    } else {
-      console.log("has group", groupNFTAttributes);
-      const baseNFTAttributes: INFTImage[] = JSON.parse(groupNFTAttributes);
-      console.log(baseNFTAttributes);
-      setValue("nfts", baseNFTAttributes);
-    }
-  }, [watch("eventGroupId")]);
-
   // state for loading event groups
-  const { groups } = useOwnEventGroups();
-  const {
-    status,
-    errors: createError,
-    loading: createLoading,
-    createEventRecord,
-  } = useCreateEventRecord();
+  const { groups, isLoading: isLoadingEventGroups } = useOwnEventGroups();
+  const { createEvent, isCreating, createError, createStatus, createdEventId } =
+    useCreateEvent(address);
 
   const onSubmit = async (data: EventFormData) => {
     setFormData(data);
     saveNFTMetadataOnIPFS(data.eventGroupId, data.eventName, data.nfts);
   };
 
   useEffect(() => {
-    console.log("nftAttributes", nftAttributes);
-    if (nftAttributes.length > 0 && formData) {
-      console.log("ok", formData);
-      const params: ICreateEventRecordParams = {
-        groupId: formData.eventGroupId,
-        eventName: formData.eventName,
-        description: formData.description,
-        date: new Date(formData.date),
-        startTime: formData.startTime,
-        endTime: formData.endTime,
-        secretPhrase: formData.secretPhrase,
-        mintLimit: Number(formData.mintLimit),
-        useMtx: formData.useMtx === "true",
-        attributes: nftAttributes,
-      };
-      try {
-        console.log(params);
-        createEventRecord(params);
-      } catch (error: any) {
-        alert(error);
+    const create = async () => {
+      if (nftAttributes.length > 0 && formData) {
+        const params = {
+          groupId: formData.eventGroupId,
+          eventName: formData.eventName,
+          description: formData.description,
+          date: new Date(formData.date),
+          startTime: formData.startTime,
+          endTime: formData.endTime,
+          secretPhrase: formData.secretPhrase,
+          mintLimit: Number(formData.mintLimit),
+          useMtx: formData.useMtx === "true",
+          attributes: nftAttributes,
+        };
+        await createEvent(params);
       }
-    }
+    };
+    create();
   }, [nftAttributes]);
 
+  const errorMessage = useMemo(() => {
+    if (createError || errors) {
+      return (createError || errors) as any;
+    }
+  }, [createError, errors]);
+
+  const isLoading = useMemo(() => {
+    if (isCreating || isUploadingMetadata) return true;
+  }, [isCreating, isUploadingMetadata]);
+
   return (
     <>
-      {groups.length === 0 ? (
+      {isLoadingEventGroups || typeof groups == "undefined" ? (
+        <Spinner />
+      ) : groups?.length === 0 ? (
         <Link href="/event-groups/new">please create event group first</Link>
-      ) : status ? (
-        "Your Event Created!🎉"
+      ) : createdEventId ? (
+        <Box>
+          <Text>Your Event Created🎉</Text>
+
+          <Link href={`/events/${createdEventId}`}>
+            <Button mt={10} backgroundColor="mint.bg" size="md">
+              Go to Event Page
+            </Button>
+          </Link>
+        </Box>
       ) : (
         <form onSubmit={handleSubmit(onSubmit)}>
           <FormControl mb={5}>
@@ -150,7 +152,7 @@ const CreateEventForm: FC = () => {
                   value={value}
                   onChange={onChange}
                 >
-                  {groups.map((item: IEventGroup) => {
+                  {groups.map((item: Event.EventGroup) => {
                     return (
                       <option
                         value={item.groupId.toNumber()}
@@ -398,20 +400,22 @@ const CreateEventForm: FC = () => {
               <Button
                 mt={10}
                 type="submit"
-                isLoading={isSubmitting}
+                isLoading={isLoading || isSubmitting}
                 backgroundColor="mint.bg"
                 size="lg"
                 width="full"
-                disabled={isSubmitting || status}
+                disabled={isLoading || isSubmitting}
               >
-                {createLoading ? <Spinner /> : status ? "Success" : "Create"}
+                {t.CREATE_NEW_EVENT}
               </Button>
 
-              {createError && (
+              {errorMessage && (
                 <Alert status="error" mt={2}>
                   <AlertIcon />
                   <AlertTitle>Error occurred</AlertTitle>
-                  <AlertDescription>{createError.message}</AlertDescription>
+                  <AlertDescription>
+                    {errorMessage?.reason || errorMessage?.message}
+                  </AlertDescription>
                 </Alert>
               )}
             </>