feat: add back button after opening chest (#495)

* feat: add back button after opening chest

* adding confirmation modal

* adding animation

* updating redirect urls

app/quest-boost/claim/[boostId]/page.tsx

@@ -16,6 +16,9 @@ import { boostClaimCall } from "@utils/callData";
 import { getTokenName } from "@utils/tokenService";
 import useBoost from "@hooks/useBoost";
 import { TOKEN_DECIMAL_MAP } from "@utils/constants";
+import { useRouter } from "next/navigation";
+import ModalMessage from "@components/UI/modalMessage";
+import verifiedLottie from "@public/visuals/verifiedLottie.json";
 
 type BoostQuestPageProps = {
   params: {
@@ -35,6 +38,8 @@ export default function Page({ params }: BoostQuestPageProps) {
   const [winnerList, setWinnerList] = useState<string[]>([]);
   const { updateBoostClaimStatus } = useBoost();
   const [displayAmount, setDisplayAmount] = useState<number>(0);
+  const [modalTxOpen, setModalTxOpen] = useState(false);
+  const router = useRouter();
 
   const fetchPageData = async () => {
     try {
@@ -109,6 +114,7 @@ export default function Page({ params }: BoostQuestPageProps) {
         updateBoostClaimStatus(address, boost?.id, true);
       }
       setTransactionHash(transaction_hash);
+      setModalTxOpen(true);
     };
 
     callContract();
@@ -198,16 +204,22 @@ export default function Page({ params }: BoostQuestPageProps) {
               )}
             </div>
 
-            {isUserWinner ? (
-              <div className={styles.claim_button_animation}>
+            <div className={styles.claim_button_animation}>
+              {isUserWinner ? (
                 <Button
                   disabled={(boost?.claimed && isUserWinner) || !isUserWinner}
                   onClick={handleClaimClick}
                 >
                   Collect my reward
                 </Button>
-              </div>
-            ) : null}
+              ) : (
+                <div className="block ml-auto mr-auto">
+                  <Button onClick={() => router.push("/quest-boost")}>
+                    Back on boosts quest
+                  </Button>
+                </div>
+              )}
+            </div>
           </>
         ) : null}
       </div>
@@ -222,6 +234,28 @@ export default function Page({ params }: BoostQuestPageProps) {
           />
         </div>
       ) : null}
+      <ModalMessage
+        open={modalTxOpen}
+        title="Your NFT is on it's way !"
+        closeModal={() => {
+          setModalTxOpen(false);
+          router.push("/quest-boost");
+        }}
+        message={
+          <div className="mt-7 flex flex-col items-center justify-center text-center">
+            <Lottie
+              className="w-52"
+              animationData={verifiedLottie}
+              loop={false}
+            />
+            <div className="mt-4">
+              <Button onClick={() => router.push("/quest-boost")}>
+                Complete another quest !
+              </Button>
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 }