WIP first quest

apps/dapp/src/components/Button/Button.tsx

@@ -5,12 +5,10 @@ import styled, { css } from 'styled-components';
 import Loader from '../Loader/Loader';
 import useIsMounted from 'hooks/use-is-mounted';
 
-export interface ButtonProps
-  extends ButtonStyledProps,
-    HTMLProps<HTMLButtonElement> {
+export interface ButtonProps extends ButtonStyledProps, HTMLProps<HTMLButtonElement> {
   type?: 'submit' | 'reset' | 'button' | undefined;
   label?: string;
-  loading?: boolean; 
+  loading?: boolean;
 
   onClick?(): Promise<void> | void;
 }
@@ -107,7 +105,7 @@ interface ButtonStyledProps {
 
 const ButtonLeadingIcon = styled(Image)`
   margin: 0 0.3rem 0;
-`
+`;
 
 export const ButtonStyled = styled.button<ButtonStyledProps>`
   // common

apps/dapp/src/components/Layouts/CoreLayout/index.tsx

@@ -7,8 +7,6 @@ import { theme } from 'styles/theme';
 import { useRefreshWalletState } from 'hooks/use-refresh-wallet-state';
 import { useWallet } from 'providers/WalletProvider';
 
-import env from 'constants/env';
-
 import Header from './Header';
 import { NexusSoundscape } from 'components/Pages/Nexus/NexusSoundscape';
 
@@ -31,7 +29,7 @@ const CoreLayout: FC<{ mode: 'dapp' | 'nexus' }> = (props) => {
   return (
     <>
       <Header mode={props.mode} />
-      {env.featureFlags.nexusOnlyMode && <NexusSoundscape />}
+      {props.mode === 'nexus' && <NexusSoundscape />}
       <Main>
         <Outlet />
       </Main>

apps/dapp/src/components/Pages/Nexus/NexusSoundscape.tsx

@@ -33,8 +33,6 @@ const FullScreenContainer = styled.div`
   position: absolute;
   top: 0;
   left: 0;
-  height: 100%;
-  width: 100%;
   z-index: 9;
 `;
 

apps/dapp/src/components/Pages/Nexus/Quest/QuestAccordionItem.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 interface ListItemProps {
@@ -7,6 +7,7 @@ interface ListItemProps {
   id: string | number;
   isOpen: boolean;
 }
+
 const QuestAccordionItem = ({ id, isOpen, SummaryComponent, DetailComponent, ...rest }: ListItemProps) => {
   return (
     <AccItem
@@ -43,9 +44,13 @@ const AccItem = styled.li`
     pointer-events: none;
   }
 
+  a {
+    pointer-events: auto;
+  }
+
   > div:first-of-type {
     cursor: pointer;
   }
 `;
 
-export default memo(QuestAccordionItem);
+export default QuestAccordionItem;

apps/dapp/src/components/Pages/Nexus/Quest/QuestCell.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import Image from '../../../Image/Image';
 import { QuestData, RARITY_TYPE } from '../types';
 
-
 export interface QuestCellProps {
   quest: QuestData;
 }
@@ -22,7 +21,9 @@ const QuestCell = ({ quest }: QuestCellProps) => {
       <CellRow>
         <RowText>{`Origin: ${quest.origin}`}</RowText>
         <RowText align={'right'}>
-          <TravelLink href={quest.linkUrl}>Travel</TravelLink>
+          <TravelLink target="_blank" href={quest.linkUrl}>
+            Travel
+          </TravelLink>
         </RowText>
       </CellRow>
       <CellRow>

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

@@ -0,0 +1,110 @@
+import styled from 'styled-components';
+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';
+
+type CollectSlideProps = {
+  passed: boolean;
+  tryAgainButtonClickHandler?: () => void;
+  collectShardButtonClickHandler?: () => 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, collectShardButtonClickHandler }: CollectSlideProps) => {
+  return (
+    <Slide headerText={''}>
+      {passed && (
+        <>
+          <TextContainer>
+            <CollectShardContainer>
+              TEMPLAR, YOU ARE DESERVING. <br />
+              AS A SCHOLAR OF THE TEMPLE, <br />
+              YOU ARE REWARDED FOR YOUR PERSEVERANCE IN <br />
+              THE QUEST FOR KNOWLEDGE.
+              <ImageContainer>
+                <Image width={100} src={nexusCloseBook} />
+              </ImageContainer>
+            </CollectShardContainer>
+          </TextContainer>
+          <ButtonsContainer>
+            <StyledButton onClick={collectShardButtonClickHandler}>COLLECT SHARD</StyledButton>
+          </ButtonsContainer>
+        </>
+      )}
+      {!passed && (
+        <>
+          <TextContainer>
+            TEMPLAR, YOU ARE ARE NOT READY. <br />
+            FRET NOT, ALL ARE GIVEN ANOTHER CHANCE <br />
+            TO PROVE THEY ARE DESERVING. <br />
+            GO BACK AND TRY AGAIN. <br />
+          </TextContainer>
+          <ButtonsContainer>
+            <StyledButton onClick={tryAgainButtonClickHandler}>TRY AGAIN</StyledButton>
+          </ButtonsContainer>
+        </>
+      )}
+    </Slide>
+  );
+};
+
+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-radius: 10px;
+`;
+
+const CollectShardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+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 StyledButton = styled(Button)`
+  width: 224px;
+  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 CollectSlide;

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

@@ -0,0 +1,65 @@
+import styled from 'styled-components';
+import { Button } from 'components/Button/Button';
+import Slide from './Slide';
+
+type FinalSlideProps = {
+  backButtonClickHandler: () => void;
+  submitButtonClickHandler: () => void;
+};
+const FinalSlide = ({ backButtonClickHandler, submitButtonClickHandler }: FinalSlideProps) => {
+  return (
+    <Slide headerText={'End Quiz'}>
+      <TextContainer>
+        YOU HAVE REACHED THE END OF THE QUIZ. <br />
+        CLICK SUBMIT TO FINALISE YOUR SCORE.
+        <br />
+        GO BACK IF YOU ARE NOT READY TO ASCEND. <br />
+      </TextContainer>
+      <ButtonsContainer>
+        <StyledButton onClick={backButtonClickHandler}>BACK</StyledButton>
+        <StyledButton onClick={submitButtonClickHandler}>SUBMIT</StyledButton>
+      </ButtonsContainer>
+    </Slide>
+  );
+};
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+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 StyledButton = styled(Button)`
+  width: 174px;
+  height: 61px;
+  background: linear-gradient(180deg, #504f4f 45.31%, #0c0b0b 100%);
+  border: 1px solid #bd7b4f;
+  border-radius: 25px;
+  color: #ffffff;
+  margin-right: 20px;
+  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 FinalSlide;

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

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { Button } from 'components/Button/Button';
+import Slide from './Slide';
+
+type FirstSlideProps = {
+  startButtonClickHandler: () => void;
+};
+
+const FirstSlide = ({ startButtonClickHandler }: FirstSlideProps) => {
+  return (
+    <Slide headerText={"Start Quiz"}>
+        <TextContainer>
+          Templar, you’ve made it this far. <br />
+          Your journey has only just begun through the hallways of Temple. <br />
+          The Library is but the first step in a lifetime of learning. <br />
+          But, first, answer these riddles so we know you truly are one of us. <br />
+          The Temple rewards its Scholars.
+        </TextContainer>
+        <SlideStartButton onClick={startButtonClickHandler}>Start</SlideStartButton>
+    </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 SlideStartButton = styled(Button)`
+  width: 174px;
+  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 FirstSlide;

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

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+type QuestionSlideProps = {
+  questionNumber: number;
+  totalQuestions: number;
+};
+
+const ProgressBar = ({ questionNumber, totalQuestions }: QuestionSlideProps) => {
+  const percentProgress = questionNumber / totalQuestions;
+  console.log(percentProgress);
+  return (
+    <ParentContainer>
+      <ProgressContainer>
+        <ProgressIndicator percentProgress={percentProgress} />
+      </ProgressContainer>
+      <QuestionStatus>
+        {questionNumber}/{totalQuestions}
+      </QuestionStatus>
+    </ParentContainer>
+  );
+};
+
+const ParentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 1000px;
+  position: relative;
+`;
+
+const QuestionStatus = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 25px;
+  font-size: 24px;
+  line-height: 30px;
+`;
+
+const ProgressContainer = styled.div`
+  box-sizing: border-box;
+  width: 1000px;
+  height: 10px;
+  border: 1px solid #bd7b4f;
+  border-radius: 20px;
+`;
+
+interface ProgressIndicatorProps {
+  percentProgress: number;
+}
+
+const ProgressIndicator = styled.div<ProgressIndicatorProps>`
+  width: ${props => (props.percentProgress * 1000)}px;
+  height: 10px;
+  background: #bd7b4f;
+  border-radius: 20px;
+`;
+
+export default ProgressBar;