Add mintShard and additional tweaks

apps/dapp/src/components/Pages/Nexus/Quests/FirstQuest/Quiz/CollectSlide.tsx

@@ -3,17 +3,44 @@ import { Button } from 'components/Button/Button';
 import Image from 'components/Image/Image';
 import Slide from './Slide';
 import nexusCloseBook from 'assets/images/nexus/nexusicons_closebook.png';
+import { useRelic } from 'providers/RelicProvider';
+import { useEffect } from 'react';
 
 type CollectSlideProps = {
   passed: boolean;
   tryAgainButtonClickHandler?: () => void;
-  collectShardButtonClickHandler?: () => void;
+  onSuccessCallback?: (() => Promise<void>) | (() => void);
 };
 
-// TODO: Try again should go back to the beginning and reset the entire state
-// TODO: Collect shard should handle the actual claiming of the shard
+const CollectSlide = ({ passed, tryAgainButtonClickHandler, onSuccessCallback }: CollectSlideProps) => {
+  const { mintShard } = useRelic();
+  const { handler: mintShardHandler, isLoading: mintShardLoading, error: mintShardError } = mintShard;
 
-const CollectSlide = ({ passed, tryAgainButtonClickHandler, collectShardButtonClickHandler }: CollectSlideProps) => {
+  const collectShardHandler = async () => {
+    console.debug('Going to mint shard');
+    await mintShardHandler();
+    if (onSuccessCallback) {
+      onSuccessCallback();
+    }
+  };
+
+  const friendlyErrorMessage = (maybeError: any) => {
+    let message = '';
+    if (maybeError.message) {
+      const boundary = maybeError.message.indexOf('(');
+      if (boundary > 0) {
+        message = maybeError.message.substring(0, boundary - 1);
+      } else {
+        maybeError.message.substring(0, 20).concat('...');
+      }
+    }
+
+    if (maybeError.reason) {
+      message = maybeError.reason;
+    }
+    return message;
+
+  };
   return (
     <Slide headerText={''}>
       {passed && (
@@ -30,8 +57,15 @@ const CollectSlide = ({ passed, tryAgainButtonClickHandler, collectShardButtonCl
             </CollectShardContainer>
           </TextContainer>
           <ButtonsContainer>
-            <StyledButton onClick={collectShardButtonClickHandler}>COLLECT SHARD</StyledButton>
+            <StyledButton loading={mintShardLoading} onClick={collectShardHandler}>
+              COLLECT SHARD
+            </StyledButton>
           </ButtonsContainer>
+          {mintShardError && (
+            <ErrorContainer>
+              {friendlyErrorMessage(mintShardError)}
+            </ErrorContainer>
+          )}
         </>
       )}
       {!passed && (
@@ -51,14 +85,18 @@ const CollectSlide = ({ passed, tryAgainButtonClickHandler, collectShardButtonCl
   );
 };
 
+const ErrorContainer = styled.div`
+  color: red;
+`;
+
 const ImageContainer = styled.div`
   border: 2px solid;
   border-radius: 10px;
   display: flex;
   padding: 10px;
   align-items: center;
   margin-top: 10px;
-  border: 1.5px solid #BD7B4F;;
+  border: 1.5px solid #bd7b4f;
   border-radius: 10px;
 `;
 

apps/dapp/src/components/Pages/Nexus/Quests/FirstQuest/Quiz/ConnectWalletSlide.tsx

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { Button } from 'components/Button/Button';
+import Slide from './Slide';
+import { Account } from 'components/Layouts/CoreLayout/Account';
+
+const ConnectWalletSlide = () => {
+  return (
+    <Slide headerText={''}>
+      <Container>
+        Connect wallet to continue
+        <br /><br />
+        <ConnectButtonWrapper>
+          <Account />
+        </ConnectButtonWrapper>
+      </Container>
+    </Slide>
+  );
+};
+
+const ConnectButtonWrapper = styled.div`
+  width: 300px;
+  margin: auto;
+`;
+
+const Container = styled.div`
+  border: 0.0625rem solid ${(props) => props.color ?? props.theme.palette.brand};
+  border-radius: 16px;
+  padding: 4rem;
+  width: 1056px;
+  text-align: center;
+  line-height: 40px;
+  margin-top: 200px;
+  font-size: 20px;
+`;
+
+export default ConnectWalletSlide;

apps/dapp/src/components/Pages/Nexus/Quests/FirstQuest/Quiz/SuccessSlide.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { Button } from 'components/Button/Button';
+import Slide from './Slide';
+import { Link } from 'react-router-dom';
+
+const SuccessSlide = () => {
+  return (
+    <Slide headerText={''}>
+      <TextContainer>
+        YOU MUST BE WEARY, TEMPLAR.
+        <br />
+        THIS QUEST HAS ENDED. <br />
+        RETURN TO THE NEXUS <br />
+        TO REST FROM YOUR PILGRIMAGE.
+      </TextContainer>
+      <Link to={'/nexus'}>
+        <ReturnToNexusButton>RETURN TO THE NEXUS</ReturnToNexusButton>
+      </Link>
+    </Slide>
+  );
+};
+
+const TextContainer = styled.div`
+  border: 0.0625rem solid ${(props) => props.color ?? props.theme.palette.brand};
+  border-radius: 16px;
+  padding: 4rem;
+  width: 1056px;
+  text-align: center;
+  line-height: 40px;
+  margin-top: 200px;
+  background: radial-gradient(
+    58.56% 58.56% at 50% 49.88%,
+    rgba(193, 177, 177, 0.12) 38.54%,
+    rgba(193, 177, 177, 0) 100%
+  );
+  font-size: 20px;
+`;
+
+const ReturnToNexusButton = styled(Button)`
+  width: 400px;
+  height: 61px;
+  background: linear-gradient(180deg, #504f4f 45.31%, #0c0b0b 100%);
+  border: 1px solid #bd7b4f;
+  border-radius: 25px;
+  color: #ffffff;
+  margin-top: 80px;
+  margin-bottom: 20px;
+
+  &:hover {
+    border: 1px solid;
+    border-image-source: linear-gradient(0deg, #ffdec9, #ffdec9), linear-gradient(0deg, #d9a37d, #d9a37d);
+  }
+`;
+
+export default SuccessSlide;

apps/dapp/src/components/Pages/Nexus/Quests/FirstQuest/Quiz/index.tsx

@@ -2,11 +2,15 @@ import { useEffect, useState } from 'react';
 import CollectSlide from './CollectSlide';
 import FinalSlide from './FinalSlide';
 import FirstSlide from './FirstSlide';
-import { QuizQuestion, pickQuestions, QUIZ_QUESTIONS, QuizAnswer } from './questions';
+import { QuizQuestion, pickQuestions, QuizAnswer } from './questions';
 import QuestionSlide from './QuestionSlide';
+import { useWallet } from 'providers/WalletProvider';
+import { useAccount } from 'wagmi';
+import ConnectWalletSlide from './ConnectWalletSlide';
+import SuccessSlide from './SuccessSlide';
 
+// TODO: Move to env?
 const NUMBER_OF_QUESTIONS = 10;
-
 const PASSING_SCORE = 0.7;
 
 type QuizAnswerState = {
@@ -19,13 +23,24 @@ type QuizAnswerState = {
 const EMPTY_QUIZ_ANSWER_STATE: QuizAnswerState = {};
 
 const Quiz = () => {
+  const { isConnected } = useWallet();
+  const { address } = useAccount();
+
   const [questionNumber, setQuestionNumber] = useState(0);
   const [questions, setQuestions] = useState([] as QuizQuestion[]);
   const [passed, setPassed] = useState(false);
   const [complete, setComplete] = useState(false);
-  const [score, setScore] = useState(0);
-
+  const [mintSuccess, setMintSuccess] = useState(false);
   const [answers, setAnswers] = useState<QuizAnswerState>(EMPTY_QUIZ_ANSWER_STATE);
+  const [showConnect, setShowConnect] = useState(false);
+
+  useEffect(() => {
+    if (address && isConnected) {
+      setShowConnect(false);
+      return;
+    }
+    setShowConnect(true);
+  }, [address, isConnected]);
 
   useEffect(() => {
     setQuestions(pickQuestions(NUMBER_OF_QUESTIONS));
@@ -46,7 +61,16 @@ const Quiz = () => {
   const submitButtonHandler = () => {
     console.debug(`---> Submit button clicked, calculating score`);
     const correctAnswers = Object.values(answers).filter((answer) => answer.answer.correct === true);
-    setScore(correctAnswers.length / NUMBER_OF_QUESTIONS);
+    const score = correctAnswers.length / NUMBER_OF_QUESTIONS;
+
+    console.debug(`---> User score: ${score}`);
+    if (score >= PASSING_SCORE) {
+      setPassed(true);
+      setComplete(true);
+    } else {
+      setPassed(false);
+      setComplete(true);
+    }
   };
 
   const quizAnswerHandler = (questionNumber: number, answer: QuizAnswer, selectedAnswerIndex: number) => {
@@ -67,21 +91,22 @@ const Quiz = () => {
     setAnswers(EMPTY_QUIZ_ANSWER_STATE);
   };
 
-  useEffect(() => {
-    console.debug(`---> User score: ${score}`);
-    if (score >= PASSING_SCORE) {
-      setPassed(true);
-      setComplete(true);
-    } else {
-      setPassed(false);
-      setComplete(true);
-    }
-  }, [score]);
+  const onMintSuccess = () => {
+    setMintSuccess(true);
+  };
 
   useEffect(() => {
     setComplete(false);
   }, []);
 
+  if (showConnect) {
+    return <ConnectWalletSlide />;
+  }
+
+  if (mintSuccess) {
+    return <SuccessSlide />;
+  }
+
   return (
     <>
       {questionNumber === 0 && <FirstSlide startButtonClickHandler={startQuizHandler} />}
@@ -100,7 +125,7 @@ const Quiz = () => {
       {!complete && questionNumber > NUMBER_OF_QUESTIONS && (
         <FinalSlide backButtonClickHandler={prevButtonHandler} submitButtonClickHandler={submitButtonHandler} />
       )}
-      {complete && <CollectSlide passed={passed} tryAgainButtonClickHandler={tryAgainButtonClickHandler} />}
+      {complete && <CollectSlide passed={passed} tryAgainButtonClickHandler={tryAgainButtonClickHandler} onSuccessCallback={onMintSuccess} />}
     </>
   );
 };

apps/dapp/src/components/Pages/Nexus/Relic/RelicPages.tsx

@@ -7,7 +7,7 @@ import { FC } from 'react';
 import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 import BufferedItemGrid from './BufferedItemGrid';
-import RelicStatsPanel, { getEnclavePalette, getRarityPalette } from './RelicStatsPanel';
+import RelicStatsPanel, { getEnclavePalette } from './RelicStatsPanel';
 import { NexusPanelRow } from './styles';
 
 import bagImage from 'assets/icons/bagicon.png';

apps/dapp/src/constants/env/local.tsx

@@ -108,6 +108,7 @@ const env: Environment = {
     templeRelicAddress: '',
     templeShardsAddress: '',
     templeSacrificeAddress: '',
+    templePartnerMinterAddress: '',
     templeToken: '',
     recipes: [],
     shardMetadata: {},

apps/dapp/src/constants/env/preview-nexus.tsx

@@ -119,6 +119,7 @@ const env: Environment = {
     templeShardsAddress: '0xaBf139511C381f7804EdD6E4c78383b775d8CeeF',
     templeSacrificeAddress: '0xD0A07fc8Bfe7e2846A67B8C34C6b573Aff5e2511',
     templeToken: '0xB8FeDaCB1780b3936251b1b0169b4E11A5bA8277',
+    templePartnerMinterAddress: '0x7ED0F069f34Be49B736b5b52dEE019035AeB534f',
     recipes: [
       { id: 0, required_ids: [0, 1], required_amounts: [1, 1], reward_ids: [2], reward_amounts: [1] },
       { id: 2, required_ids: [0, 1], required_amounts: [2, 3], reward_ids: [2], reward_amounts: [1] },
@@ -155,7 +156,7 @@ const env: Environment = {
         id: '1',
         title: 'First Quest TBD',
         origin: 'TempleDAO',
-        linkUrl: 'https://pr-637-preview.templedao.link/nexus/quests/library',
+        linkUrl: 'https://www.voxels.com/spaces/ecd16631-9db3-49d7-b8d6-08e28556a734/play',
         description:
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan libero sed placerat viverra. Praesent ac vehicula mauris, non ullamcorper metus. Vestibulum ultricies odio at libero pulvinar dapibus sed vel leo.',
         logoUrl: 'https://myst.mypinata.cloud/ipfs/QmaTErwf7sV9WzfP86GjDfnRBwKL74y2j9H4vUwNr7jMhE/0.png',

apps/dapp/src/constants/env/preview.tsx

@@ -119,6 +119,7 @@ const env: Environment = {
     templeShardsAddress: '0xaBf139511C381f7804EdD6E4c78383b775d8CeeF',
     templeSacrificeAddress: '0xD0A07fc8Bfe7e2846A67B8C34C6b573Aff5e2511',
     templeToken: '0xB8FeDaCB1780b3936251b1b0169b4E11A5bA8277',
+    templePartnerMinterAddress: '0x7ED0F069f34Be49B736b5b52dEE019035AeB534f',
     recipes: [
       { id: 0, required_ids: [0, 1], required_amounts: [1, 1], reward_ids: [2], reward_amounts: [1] },
       { id: 2, required_ids: [0, 1], required_amounts: [2, 3], reward_ids: [2], reward_amounts: [1] },
@@ -155,7 +156,7 @@ const env: Environment = {
         id: '1',
         title: 'First Quest TBD',
         origin: 'TempleDAO',
-        linkUrl: 'https://pr-637-preview.templedao.link/nexus/quests/library',
+        linkUrl: 'https://www.voxels.com/spaces/ecd16631-9db3-49d7-b8d6-08e28556a734/play',
         description:
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan libero sed placerat viverra. Praesent ac vehicula mauris, non ullamcorper metus. Vestibulum ultricies odio at libero pulvinar dapibus sed vel leo.',
         logoUrl: 'https://myst.mypinata.cloud/ipfs/QmaTErwf7sV9WzfP86GjDfnRBwKL74y2j9H4vUwNr7jMhE/0.png',

apps/dapp/src/constants/env/production-nexus.tsx

@@ -118,6 +118,7 @@ const env: Environment = {
     templeShardsAddress: '0xd641b65438206A33a0832D0CD38be8e5Bdc6D935',
     templeSacrificeAddress: '0x300d96730c70bA3430eE413515B4016427946Ed0',
     templeToken: '0x6d2caf65163ff290ec2a362d6e413fae4643f90e',
+    templePartnerMinterAddress: '',
     recipes: [
       { id: 0, required_ids: [0, 1], required_amounts: [1, 1], reward_ids: [2], reward_amounts: [1] },
       { id: 2, required_ids: [0, 1], required_amounts: [2, 3], reward_ids: [2], reward_amounts: [1] },

apps/dapp/src/constants/env/production.tsx

@@ -135,6 +135,7 @@ const env: Environment = {
     templeShardsAddress: '',
     templeSacrificeAddress: '',
     templeToken: '',
+    templePartnerMinterAddress: '',
     recipes: [],
     shardMetadata: {},
     quests: [],

apps/dapp/src/constants/env/types.ts

@@ -78,6 +78,7 @@ interface Nexus {
   templeShardsAddress: string;
   templeSacrificeAddress: string;
   templeToken: string;
+  templePartnerMinterAddress: string;
   recipes: Recipe[];
   shardMetadata: {
     [key: number]: Shard;