Merge pull request #284 from fukaoi/feature/modify

Feature/modify

.github/workflows/lint.yml

@@ -0,0 +1,35 @@
+name: Lint
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - "README.md"
+      - ".github/workflows/*.yml"
+
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+          run_install: |
+            - recursive: true
+              args: [--frozen-lockfile, --strict-peer-dependencies]
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+      - name: pnpm install
+        run: pnpm install
+      - name: fix prettier
+        run: pnpm lint

.github/workflows/tag.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v3
       - uses: Klemensas/action-autotag@stable

app/components/animation/BackgroundBlur.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { type ReactNode, useEffect, useState } from 'react';
 import { theme } from '~/utils/colorTheme';
 
 const styles = {

app/components/animation/Loading.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 import CircularProgress from "@mui/material/CircularProgress";
 import Backdrop from "@mui/material/Backdrop";
 import ProcessingTypography from "../typography/ProcessingTypography";

app/components/button/AddCreatorButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import { IconButton } from '@mui/material';
 

app/components/button/OptionalButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
 import { IconButton } from '@mui/material';

app/components/button/SubmitButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 import { styled } from "@mui/system";
 import Button from "@mui/material/Button";
 import { theme } from "~/utils/colorTheme";

app/components/button/UploadButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 import { styled } from "@mui/system";
 import Button from "@mui/material/Button";
 import { theme } from "~/utils/colorTheme";
@@ -26,7 +26,7 @@ const UploadButton: FC<{
   isDisabled?: boolean;
 }> = ({ title, callbackFunc, isDisabled = false }) => {
   return (
-    <label htmlFor={`upload-button`}>
+    <label htmlFor={"upload-button"}>
       <input
         accept="image/*"
         name={"upload-button"}

app/components/button/WalletConnectButton.tsx

@@ -1,7 +1,7 @@
 import { ListItemButton, ListItemText } from "@mui/material";
-import { useWallet, Wallet } from "@solana/wallet-adapter-react";
+import { useWallet, type Wallet } from "@solana/wallet-adapter-react";
 import Typography from "@mui/material/Typography";
-import { FC } from "react";
+import type { FC } from "react";
 
 const WalletConnectButton: FC<{ onClick: (selectedWallet: Wallet) => void }> = (
   { onClick },

app/components/modal/CompletedMintModal.tsx

@@ -1,16 +1,22 @@
-import { FC } from "react";
+import type { FC } from "react";
 import Modal from "@mui/material/Modal";
 import Box from "@mui/material/Box";
 import { Alert } from "@mui/material";
 import { useStorage } from "~/utils/storage";
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
 
 const CompletedMintModal: FC<{ open: boolean; onClose: any; mint: string }> = ({
   open,
   onClose,
   mint,
 }) => {
   const [storage] = useStorage("network");
-  const explorerUrl = `https://explorer.solana.com/address/${mint}/metadata?cluster=${storage.cluster}`;
+  console.info("# setted storage: ", storage.cluster);
+
+  let explorerUrl = `https://explorer.solana.com/address/${mint}/metadata?cluster=devnet`;
+  if (storage.cluster === WalletAdapterNetwork.Mainnet) {
+    explorerUrl = `https://solscan.io/token/${mint}`;
+  }
   return (
     <>
       <Modal
@@ -31,12 +37,7 @@ const CompletedMintModal: FC<{ open: boolean; onClose: any; mint: string }> = ({
             p: 1,
           }}
         >
-          <Alert
-            sx={{ fontSize: "1.2em" }}
-            variant="filled"
-            severity="success"
-            color="primary"
-          >
+          <Alert sx={{ fontSize: "1.2em" }} variant="filled" severity="success">
             Mint Completed
             <br />
             <a

app/components/modal/ErrorModal.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import { Alert } from '@mui/material';

app/components/modal/FaucetCompleteModal.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import { Alert } from '@mui/material';

app/components/modal/WarningModal.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import { Alert } from '@mui/material';

app/components/number-input/DecimalsInput.tsx

@@ -1,13 +1,13 @@
 import * as React from "react";
 import {
-  NumberInputProps,
+  type NumberInputProps,
   Unstable_NumberInput as BaseNumberInput,
 } from "@mui/base/Unstable_NumberInput";
 import { styled } from "@mui/system";
 import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { UserConfig, UserConfigFnPromise } from "vite";
-import { useController, UseControllerProps } from "react-hook-form";
+import { useController, type UseControllerProps } from "react-hook-form";
 import { useControlled } from "@mui/material";
 import SugbHeadlineTypography from "~/components/typography/HeadlineTypography";
 import UsageTypography from "~/components/typography/UsageTypography";

app/components/number-input/TotalSupplyTextField.tsx

@@ -1,7 +1,7 @@
 import { Box, TextField } from "@mui/material";
 import HeadlineTypography from "~/components/typography/HeadlineTypography";
-import { TokenMetadata } from "~/types";
-import { useController, UseControllerProps } from "react-hook-form";
+import type { TokenMetadata } from "~/types";
+import { useController, type UseControllerProps } from "react-hook-form";
 
 const TotalSupplyTextField = (props: UseControllerProps<TokenMetadata>) => {
   const { field } = useController(props);

app/components/parts/CreatorUI.tsx

@@ -1,12 +1,12 @@
 import { Box } from "@mui/material";
-import { FC } from "react";
-import { Control } from "react-hook-form";
+import type { FC } from "react";
+import type { Control } from "react-hook-form";
 import { Divider } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import HeadlineTypography from "../typography/HeadlineTypography";
 import WalletAddressTextField from "../textField/WalletAddressTextField";
 import ShareTextField from "../textField/ShareTextField";
-import { NFTMetadata } from "~/types";
+import type { NFTMetadata } from "~/types";
 import { validationRules } from "~/utils/validation";
 
 export type CreatorUIProps = {

app/components/parts/Header.tsx

@@ -80,8 +80,7 @@ const Header = () => {
             </>
           )}
         </Box>
-
-        <Box style={{ flexBasis: "25%" }}></Box>
+        <Box style={{ flexBasis: "25%" }} />
       </Box>
     </Box>
   );

app/components/parts/ImageFileUploadUI.tsx

@@ -6,14 +6,14 @@ import {
   ImageList,
   ImageListItem,
 } from "@mui/material";
-import { FC, useState } from "react";
+import { type FC, useState } from "react";
 import { Validation } from "~/utils/validation";
 import UsageTypography from "~/components/typography/UsageTypography";
 import ExampleTypography from "~/components/typography/ExampleTypography";
 import Card from "@mui/material/Card";
 import { Alert } from "@mui/material";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import { createGenericFile, GenericFile } from "@metaplex-foundation/umi";
+import { createGenericFile, type GenericFile } from "@metaplex-foundation/umi";
 
 const styles = {
   card: {
@@ -52,7 +52,7 @@ const ImageFileUploadUI: FC<ImageFileUploadUIProps> = ({
     setImagePreview(undefined);
 
     const reader = new FileReader();
-    const file = e.target.files![0];
+    const file = e.target.files?.[0];
     file.arrayBuffer().then((buffer) => {
       const genericFile = createGenericFile(new Uint8Array(buffer), file.name);
       setGenericFileBuffer(genericFile);

app/components/parts/MediaFileUploadUI.tsx

@@ -6,7 +6,7 @@ import {
   ImageList,
   ImageListItem,
 } from "@mui/material";
-import { FC, useContext, useState } from "react";
+import { type FC, useContext, useState } from "react";
 import UsageTypography from "~/components/typography/UsageTypography";
 import NoImage from "~/assets/no-image-available.jpg";
 import { Validation } from "~/utils/validation";
@@ -86,7 +86,7 @@ const MediaFileUploadUI: FC<MediaFileUploadUIProps> = ({
       <UsageTypography message={message} />
       {mediaFilesPreview.map((element: string, i: number) => {
         return (
-          <Card style={styles.card} key={i}>
+          <Card style={styles.card} key={element}>
             <CardMedia>
               <ImageList sx={styles.image} variant="woven" cols={1} gap={1}>
                 <ImageListItem>
@@ -107,7 +107,7 @@ const MediaFileUploadUI: FC<MediaFileUploadUIProps> = ({
                     success: <CheckCircleOutlineIcon fontSize="inherit" />,
                   }}
                 >
-                  {mediaFiles[i] && mediaFiles[i].fileName}
+                  {mediaFiles[i]?.fileName}
                 </Alert>
               </CardContent>
             </CardMedia>

app/components/parts/OptionalUI.tsx

@@ -1,10 +1,10 @@
 import { Box } from "@mui/material";
-import { FC, useState } from "react";
-import { Control, useFieldArray } from "react-hook-form";
-import RoyaltyTextField from "~/components/textField/RoyaltyTextField";
+import { type FC, useState } from "react";
+import { type Control, useFieldArray } from "react-hook-form";
+import RoyaltyTextField from "~/components/text-field/RoyaltyTextField";
 import CreatorUI from "./CreatorUI";
 import AddCreatorButton from "../button/AddCreatorButton";
-import { NFTMetadata } from "~/types";
+import type { NFTMetadata } from "~/types";
 import HeadlineTypography from "~/components/typography/HeadlineTypography";
 import MediaFileUploadUI from "~/components/parts/MediaFileUploadUI";
 import { validationRules } from "~/utils/validation";
@@ -18,7 +18,7 @@ export type OptionalUIProps = {
 
 const OptionalUI: FC<OptionalUIProps> = ({ isShow, control }) => {
   const { fields, append, remove } = useFieldArray({
-    name: `creators`,
+    name: "creators",
     control,
   });
   const [mediaFilesPreview, setMediaFilesPreview] = useState<
@@ -35,38 +35,36 @@ const OptionalUI: FC<OptionalUIProps> = ({ isShow, control }) => {
     setErrorModal({ open: false, message: "" });
   };
 
-  return isShow
-    ? (
-      <>
-        <BackgroundBlur>
-          <Box sx={{ mb: 4 }} />
-          <RoyaltyTextField
-            control={control}
-            name="royalty"
-            rules={validationRules.royalty}
-          />
-          <Box sx={{ mb: 4 }} />
-          <HeadlineTypography message="Optional media Upload" />
-          <Box sx={{ mb: 4 }} />
-          <MediaFileUploadUI
-            {...{
-              mediaFilesPreview,
-              setMediaFilesPreview,
-            }}
-          />
-          <CreatorUI {...{ control, fields, remove }} />
-          <Box sx={{ mb: 4 }} />
-          <AddCreatorButton callbackFunc={handleAddButton} />
-          <Box sx={{ mb: 4 }} />
-        </BackgroundBlur>
-        <ErrorModal
-          open={errorModal.open}
-          onClose={handleClose}
-          message={errorModal.message}
+  return isShow ? (
+    <>
+      <BackgroundBlur>
+        <Box sx={{ mb: 4 }} />
+        <RoyaltyTextField
+          control={control}
+          name="royalty"
+          rules={validationRules.royalty}
         />
-      </>
-    )
-    : null;
+        <Box sx={{ mb: 4 }} />
+        <HeadlineTypography message="Optional media Upload" />
+        <Box sx={{ mb: 4 }} />
+        <MediaFileUploadUI
+          {...{
+            mediaFilesPreview,
+            setMediaFilesPreview,
+          }}
+        />
+        <CreatorUI {...{ control, fields, remove }} />
+        <Box sx={{ mb: 4 }} />
+        <AddCreatorButton callbackFunc={handleAddButton} />
+        <Box sx={{ mb: 4 }} />
+      </BackgroundBlur>
+      <ErrorModal
+        open={errorModal.open}
+        onClose={handleClose}
+        message={errorModal.message}
+      />
+    </>
+  ) : null;
 };
 
 export default OptionalUI;

app/components/provider/AppWalletProvider.tsx

@@ -18,7 +18,7 @@ const AppWalletProvider = ({ children }: { children: React.ReactNode }) => {
     setStorage({ cluster: network });
   }
 
-  const wallets = useMemo(() => [], [network]);
+  const wallets = useMemo(() => [], []);
 
   return (
     <ConnectionProvider endpoint={endpoint}>

app/components/radio/ClusterRadio.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import HeadlineTypography from "~/components/typography/HeadlineTypography";
-import { useController, UseControllerProps } from "react-hook-form";
+import { useController, type UseControllerProps } from "react-hook-form";
 import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
 import {
   Box,

app/components/radio/VerifiedRadio.tsx

@@ -1,8 +1,8 @@
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { NFTFormValues } from '~/types';
-import { useController, UseControllerProps } from 'react-hook-form';
+import type { NFTFormValues } from '~/types';
+import { useController, type UseControllerProps } from 'react-hook-form';
 
 const VerifiedRadio = (props: UseControllerProps<NFTFormValues>) => {
   const { field } = useController(props);

app/components/text-field/DescriptionTextField.tsx

@@ -1,7 +1,7 @@
 import { Box, TextField } from "@mui/material";
 import SugbHeadlineTypography from "../typography/HeadlineTypography";
-import { NFTMetadata } from "~/types";
-import { useController, UseControllerProps } from "react-hook-form";
+import type { NFTMetadata } from "~/types";
+import { useController, type UseControllerProps } from "react-hook-form";
 
 const DescriptionTextField = (props: UseControllerProps<NFTMetadata>) => {
   const { field, fieldState } = useController(props);