From b91702b9bc7a3dbde11b04effb0578b901fcebc6 Mon Sep 17 00:00:00 2001
From: dysbulic <dys@dhappy.org>
Date: Tue, 9 Jul 2024 07:33:12 -0400
Subject: [PATCH] =?UTF-8?q?adding=20`onComplete`=20handler=20for=20uploadi?=
 =?UTF-8?q?ng=20=F0=9F=A5=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .nvmrc                                        |  2 +-
 .../web/components/QuestChain/MintNFTTile.tsx | 15 +++++++++-----
 .../web/components/QuestChain/QuestTile.tsx   | 20 +++++++++----------
 .../web/components/QuestChain/UploadProof.tsx | 13 +++++++-----
 .../QuestChain/UploadProofButton.tsx          |  6 +++---
 5 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/.nvmrc b/.nvmrc
index 53d838af..9de22568 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-lts/gallium
+lts/iron
diff --git a/packages/web/components/QuestChain/MintNFTTile.tsx b/packages/web/components/QuestChain/MintNFTTile.tsx
index 1f5f0b31..b60a6b96 100644
--- a/packages/web/components/QuestChain/MintNFTTile.tsx
+++ b/packages/web/components/QuestChain/MintNFTTile.tsx
@@ -17,6 +17,8 @@ import {
   useQuestChainContract,
 } from 'utils/questChains';
 
+import { ToastInfo } from './UploadProof';
+
 type MintNFTTileProps = {
   name: QuestChainType;
   questChain: graphql.QuestChainInfoFragment;
@@ -33,16 +35,19 @@ export const MintNFTTile: React.FC<MintNFTTileProps> = ({
   const { viemClients, chainId, address } = useWeb3();
 
   const toast = useToast({ isClosable: true });
-  const toastIdRef = useRef<ToastId>();
+  const lastToast = useRef<ToastInfo>();
 
   const addToast = useCallback(
     (options: UseToastOptions) => {
-      if (toastIdRef.current) {
-        toast.close(toastIdRef.current);
+      if (lastToast.current?.close) {
+        toast.close(lastToast.current.id);
       }
-      toastIdRef.current = toast(options);
+      lastToast.current = {
+        close: options.duration === null,
+        id: toast(options),
+      };
     },
-    [toast, toastIdRef],
+    [toast],
   );
 
   const [isMinting, setMinting] = useState(false);
diff --git a/packages/web/components/QuestChain/QuestTile.tsx b/packages/web/components/QuestChain/QuestTile.tsx
index 2f247643..4724559d 100644
--- a/packages/web/components/QuestChain/QuestTile.tsx
+++ b/packages/web/components/QuestChain/QuestTile.tsx
@@ -47,11 +47,11 @@ export const QuestTile: React.FC<{
     }
   };
 
-  const onNextStep = () => {
+  const gotoNextStep = () => {
     setActiveItem(Math.min(activeItem + 1, lastIndex));
   };
 
-  const onPrevStep = () => {
+  const gotoPrevStep = () => {
     setActiveItem(Math.max(0, activeItem - 1));
   };
 
@@ -128,7 +128,11 @@ export const QuestTile: React.FC<{
             </Box>
             <Box w="100%">
               <UploadProofButton
-                {...{ questId, name, questChain, questStatus, refresh }}
+                onComplete={() => {
+                  gotoNextStep();
+                  refresh();
+                }}
+                {...{ questId, name, questChain, questStatus }}
               />
               {isMobile && (
                 <HStack
@@ -138,10 +142,7 @@ export const QuestTile: React.FC<{
                 >
                   <Box>
                     <MetaButton
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onPrevStep();
-                      }}
+                      onClick={gotoPrevStep}
                       size="sm"
                       borderRadius="full"
                       aria-label="Previous Step"
@@ -153,10 +154,7 @@ export const QuestTile: React.FC<{
                   </Box>
                   <Box>
                     <MetaButton
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onNextStep();
-                      }}
+                      onClick={gotoNextStep}
                       size="sm"
                       borderRadius="full"
                       aria-label="Next Step"
diff --git a/packages/web/components/QuestChain/UploadProof.tsx b/packages/web/components/QuestChain/UploadProof.tsx
index 66206199..9e26f65b 100644
--- a/packages/web/components/QuestChain/UploadProof.tsx
+++ b/packages/web/components/QuestChain/UploadProof.tsx
@@ -26,17 +26,17 @@ import {
 } from 'utils/questChains';
 import { useAccount } from 'wagmi';
 
-type ToastInfo = {
+export type ToastInfo = {
   close: boolean;
   id: ToastId;
 };
 
 export const UploadProof: React.FC<{
-  refresh: () => void;
   questId: string;
   name: string;
   questChain: graphql.QuestChainInfoFragment;
-}> = ({ refresh, questId, name, questChain }) => {
+  onComplete?: (successful: boolean) => void;
+}> = ({ questId, name, questChain, onComplete }) => {
   const { clients: viemClients } = useEthersProvider();
   const { onClose } = useDisclosure();
   const { chainId, address, chain } = useAccount();
@@ -158,7 +158,7 @@ export const UploadProof: React.FC<{
         duration: 5000,
       });
       onModalClose();
-      refresh();
+      onComplete?.(true);
     } catch (error) {
       addToast({
         description:
@@ -169,6 +169,7 @@ export const UploadProof: React.FC<{
       });
       console.error({ error });
       errorHandler(error as Error);
+      onComplete?.(false);
     }
 
     setSubmitting(false);
@@ -187,7 +188,7 @@ export const UploadProof: React.FC<{
     contract.write,
     viemClients.public,
     onModalClose,
-    refresh,
+    onComplete,
   ]);
 
   return (
@@ -214,11 +215,13 @@ export const UploadProof: React.FC<{
                 description: `Wrong chain, please switch to ${
                   NETWORK_INFO[questChain.chainId].label
                 }.`,
+                status: 'warning',
                 duration: 8_000,
               });
             } else if (!proofDescRef.current) {
               addToast({
                 description: 'Proof description cannot be empty.',
+                status: 'error',
                 duration: 8_000,
               });
             } else {
diff --git a/packages/web/components/QuestChain/UploadProofButton.tsx b/packages/web/components/QuestChain/UploadProofButton.tsx
index 71d8afdb..408c3e96 100644
--- a/packages/web/components/QuestChain/UploadProofButton.tsx
+++ b/packages/web/components/QuestChain/UploadProofButton.tsx
@@ -9,7 +9,7 @@ type UploadProofButtonProps = {
   name: string;
   questId: string;
   questStatus: graphql.Status | null;
-  refresh: () => void;
+  onComplete?: (successful: boolean) => void;
 };
 
 export const UploadProofButton: React.FC<UploadProofButtonProps> = ({
@@ -17,7 +17,7 @@ export const UploadProofButton: React.FC<UploadProofButtonProps> = ({
   questId,
   name,
   questChain,
-  refresh,
+  onComplete,
 }) => {
   const bgColor = useMemo(() => {
     switch (questStatus) {
@@ -45,7 +45,7 @@ export const UploadProofButton: React.FC<UploadProofButtonProps> = ({
     <Flex mt={5}>
       {!questStatus ||
       [graphql.Status.Init, graphql.Status.Fail].includes(questStatus) ? (
-        <UploadProof {...{ questId, name, questChain, refresh }} />
+        <UploadProof {...{ questId, name, questChain, onComplete }} />
       ) : (
         <Box>
           <Box