chore: Changed tutorial models children

ApeSwapFinance · Dec 16, 2022 · 0051583 · 0051583
1 parent 27ae085
commit 0051583
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 70 deletions.
diff --git a/src/widgets/TutorialModal/TutorialModal.stories.tsx b/src/widgets/TutorialModal/TutorialModal.stories.tsx
@@ -77,20 +77,11 @@ const Body2 = () => {
 export const WithUseModalNavbar: React.FC = (args: any) => {
   const [visible, setVisible] = useState(true);
   const { onPresentTutorialModal } = useTutorialModal({
-    title: "Welcome to ApeSwap's Dex",
-    description: "Easily trade ANY token on BNB Chain!",
+    title: "This is the tutorial {title}",
+    description: "This is the tutorial {description}",
     t: translate,
     onDismiss: () => setVisible(!visible),
-    children: [
-      {
-        title: "title1",
-        description: <>slide content 1</>,
-      },
-      {
-        title: "title2",
-        description: <>slide content 2</>,
-      },
-    ],
+    children: [<>this is the slide content</>, <>fede is hot</>],
     readyText: "I'm Ready",
     type: TutorialModals.BNB_DEX,
   });
@@ -101,31 +92,3 @@ export const WithUseModalNavbar: React.FC = (args: any) => {
     </StorybookLayout>
   );
 };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const WithNavbar: React.FC = (args: any) => {
-  const [visible, setVisible] = useState(true);
-
-  return (
-    <StorybookLayout {...args}>
-      <>
-        {visible && (
-          <TutorialModal
-            title="Welcome to ApeSwap's Dex"
-            description="Easily trade ANY token on BNB Chain!"
-            t={translate}
-            onDismiss={() => setVisible(!visible)}
-            readyText="I'm Ready"
-            type={TutorialModals.BNB_DEX}
-          >
-            {[
-              { title: "title1", description: <>content1</> },
-              { title: "title2", description: <>content2</> },
-            ]}
-          </TutorialModal>
-        )}
-        <Connected />
-      </>
-    </StorybookLayout>
-  );
-};
diff --git a/src/widgets/TutorialModal/TutorialModal.tsx b/src/widgets/TutorialModal/TutorialModal.tsx
@@ -1,7 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React, { useState } from "react";
 import { Box } from "theme-ui";
-
 import { CloseIcon } from "../../components/Svg";
 import { Flex } from "../../components/Flex";
 import { Modal } from "../Modal";
@@ -28,9 +27,9 @@ const TutorialModal: React.FC<TModalProps> = ({ type, title, description, childr
   };
 
   const renderChildren = () => {
-    return children.map((element, index) => (
-      <Flex key={`${element.title + index}`}>
-        {step === index && (
+    return children?.map((element, i) => (
+      <Flex>
+        {step === i && (
           <Flex sx={{ width: "100%", flexWrap: "wrap", mt: 30 }}>
             <Flex sx={{ width: "100%" }}>
               <Text
@@ -45,28 +44,15 @@ const TutorialModal: React.FC<TModalProps> = ({ type, title, description, childr
                 {t(`Step ${step + 1}`)}
               </Text>
             </Flex>
-            <Flex sx={{ width: "100%" }}>
-              <Text
-                sx={{
-                  fontSize: ["12px", "12px", "22px"],
-                  lineHeight: ["12px", "12px", "22px"],
-                  fontWeight: 700,
-                  textTransform: ["uppercase", "uppercase", "capitalize"],
-                  mb: [0, 0, "10px"],
-                }}
-              >
-                {element.title}
-              </Text>
-            </Flex>
-            <Flex sx={{ width: "100%" }}>{element.description}</Flex>
+            <Flex sx={{ width: "100%" }}>{element}</Flex>
           </Flex>
         )}
       </Flex>
     ));
   };
 
   const renderDots = () => {
-    return [...Array(children.length)].map((_, index) => (
+    return [...Array(children?.length)].map((_, index) => (
       <Circle index={index} goToStep={() => setStep(index)} isActive={index === step} />
     ));
   };
@@ -83,15 +69,12 @@ const TutorialModal: React.FC<TModalProps> = ({ type, title, description, childr
                 <Text sx={styles.title}>{t(`${title}`)}</Text>
                 <Text sx={styles.description}>{t(`${description}`)}</Text>
               </Flex>
-              {/* If mobile wrap the children in a higher order component */}
-              {/* {renderChildren()} */}
-              {/* step, setStep, goNext */}
               {renderChildren()}
             </Flex>
             <Flex sx={styles.modalFooter}>
               <Flex sx={styles.circles}>{renderDots()}</Flex>
-              <Button onClick={step === children.length - 1 ? onDismiss : handleNext} sx={styles.readyBtn}>
-                {step === children.length - 1 ? t(`${readyText}`) : t("Next")}
+              <Button onClick={step >= (children?.length || 0) - 1 ? onDismiss : handleNext} sx={styles.readyBtn}>
+                {step >= (children?.length || 0) - 1 ? t(`${readyText}`) : t("Next")}
               </Button>
             </Flex>
           </Flex>

diff --git a/src/widgets/TutorialModal/types.ts b/src/widgets/TutorialModal/types.ts
@@ -9,12 +9,7 @@ export interface TModalProps {
   title: string;
   readyText: string;
   description?: string;
-  children: Slide[];
-}
-
-export interface Slide {
-  title: string;
-  description: React.ReactNode;
+  children: React.ReactNode[];
 }
 
 export interface CountProps {