Implementing Hideo's feedback

.gitignore

@@ -1,6 +1,5 @@
 # dependencies
 /node_modules
-package-lock.json
 /.pnp
 .pnp.js
 

src/components/MintingButton.tsx

@@ -3,6 +3,7 @@ import { usePrepareContractWrite, useContractWrite, useWaitForTransaction } from
 import { utils, BigNumber } from "ethers"
 import {
   Box,
+  Link,
   Typography,
   Modal
 } from "@mui/material"
@@ -59,13 +60,11 @@ const MintingInteraction = ({
     value: config.request?.value
   } : undefined
 
-  const { data, isError, isLoading, write } = useContractWrite({
+  const { data, error, isError, isLoading, isSuccess, write } = useContractWrite({
     ...config,
     request: customRequest,
-    onSuccess(data) {
-      setDialog("Transaction pending...")
-    }
   })
+
   const waitForTransaction = useWaitForTransaction({
     hash: data?.hash,
     confirmations: 1,
@@ -108,9 +107,9 @@ const MintingInteraction = ({
         )
       }
       <Box marginTop={1}>
-        <Typography fontStyle="italic">
-          {dialog}
-        </Typography>
+          {isLoading && <Typography fontStyle="italic">Check Wallet</Typography>}
+          {isSuccess && <Typography fontStyle="italic">Transaction: <span><Link target="_blank" href={`https://etherscan.io/tx/${data?.hash}`}>{"View transaction on Etherscan"}</Link></span></Typography>}
+          {isError && <Typography fontStyle="italic">Error while minting: {error?.message}</Typography>}
       </Box>
       <Modal
         open={mintingPreview}

src/components/ProjectPreview.tsx

@@ -8,6 +8,7 @@ import { parseAspectRatio } from "utils/scriptJSON"
 import Collapsible from "components/Collapsible"
 import ProjectDate from "components/ProjectDate"
 import TokenView from "components/TokenView"
+import ProjectStatusBadge from "./ProjectStatusBadge"
 
 interface Props {
   project: Project
@@ -40,7 +41,9 @@ const ProjectPreview = ({project, width=280, showDescription=false}: Props) => {
         aspectRatio={parseAspectRatio(project.scriptJSON)}
       />
       <Box>
-        <Box>
+        <Box sx={{display: "flex", alignItems:"center"}}>
+
+          <ProjectStatusBadge complete={project.complete} paused={project.paused} startTime={project?.minterConfiguration?.startTime} />
           <ProjectDate
             startTime={project.minterConfiguration?.startTime}
           />

src/components/ProjectStatusBadge.tsx

@@ -0,0 +1,56 @@
+import moment from 'moment';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+
+interface Props {
+  complete: boolean;
+  paused: boolean;
+  startTime?: BigInt;
+}
+
+const ProjectStatusBadge = ({ complete, paused, startTime }: Props) => {
+  const startDate = startTime ? moment.unix(parseInt(startTime.toString())) : null;
+
+  return (
+    <Box sx={{
+      display: 'flex',
+      alignItems: 'center',
+    }}>
+      {
+        startDate?.isAfter() ? 
+        <Chip
+          label="Upcoming"
+          color="upcoming"
+          size="small"
+          sx={{ color: 'white', marginRight: 2, }}
+        />
+        : paused ? (
+          <Chip
+            label="Paused"
+            color="info"
+            size="small"
+            sx={{ color: 'white', marginRight: 2, }}
+          />
+        ) : !complete ? (
+          <Chip 
+            label="Live"
+            color="success"
+            size="small"
+            sx={{ color: 'white', marginRight: 2 }}
+          />
+        ) : null
+      }
+
+      {
+        startDate && (
+          <Typography>
+            <br />
+          </Typography>
+        )
+      }
+    </Box>
+  )
+}
+
+export default ProjectStatusBadge;