From b941cf56eab60ee95529d0250924d7b7037fd2e1 Mon Sep 17 00:00:00 2001
From: Ape Fede <75544302+ape-fede@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:16:25 -0300
Subject: [PATCH] chore: Partial progress

---
 .../TutorialModal/TutorialModal.stories.tsx    |  1 +
 src/widgets/TutorialModal/TutorialModal.tsx    | 18 ++++++++++++++----
 src/widgets/TutorialModal/styles.ts            |  4 ++--
 src/widgets/TutorialModal/types.ts             |  3 ++-
 src/widgets/TutorialModal/useTutorialModal.tsx |  2 ++
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/widgets/TutorialModal/TutorialModal.stories.tsx b/src/widgets/TutorialModal/TutorialModal.stories.tsx
index fe3d0092..f137fcb8 100644
--- a/src/widgets/TutorialModal/TutorialModal.stories.tsx
+++ b/src/widgets/TutorialModal/TutorialModal.stories.tsx
@@ -84,6 +84,7 @@ export const WithUseModalNavbar: React.FC = (args: any) => {
     children: [<>this is the slide content</>, <>fede is hot</>],
     readyText: "I'm Ready",
     type: TutorialModals.BNB_DEX,
+    isConnected: true,
   });
   return (
     <StorybookLayout {...args}>
diff --git a/src/widgets/TutorialModal/TutorialModal.tsx b/src/widgets/TutorialModal/TutorialModal.tsx
index f61055ae..9732cfae 100644
--- a/src/widgets/TutorialModal/TutorialModal.tsx
+++ b/src/widgets/TutorialModal/TutorialModal.tsx
@@ -19,8 +19,18 @@ const Circle: React.FC<CountProps> = ({ index, goToStep, isActive }) => {
     />
   );
 };
-const TutorialModal: React.FC<TModalProps> = ({ type, title, description, children, onDismiss, readyText, t }) => {
-  const [step, setStep] = useState(0);
+const TutorialModal: React.FC<TModalProps> = ({
+  type,
+  title,
+  description,
+  children,
+  onDismiss,
+  readyText,
+  t,
+  isConnected,
+}) => {
+  const [step, setStep] = useState<number>(0);
+  const slideNumber = isConnected ? step + 1 : step;
 
   const handleNext = () => {
     setStep(step + 1);
@@ -30,7 +40,7 @@ const TutorialModal: React.FC<TModalProps> = ({ type, title, description, childr
     return children?.map((element, i) => (
       <Flex>
         {step === i && (
-          <Flex sx={{ width: "100%", flexWrap: "wrap", mt: 30 }}>
+          <Flex sx={{ width: "100%", flexWrap: "wrap", mt: ["15px", "15px", "30px"] }}>
             <Flex sx={{ width: "100%" }}>
               <Text
                 sx={{
@@ -62,7 +72,7 @@ const TutorialModal: React.FC<TModalProps> = ({ type, title, description, childr
       <Flex className="tutorial-modal" sx={styles.modalCon}>
         <CloseIcon width={22} onClick={onDismiss} sx={{ cursor: "pointer", position: "absolute", right: "20px" }} />
         <Flex sx={styles.contentBody}>
-          <Box sx={dynamicStyles.showApe({ step, type })} />
+          <Box sx={dynamicStyles.showApe({ slideNumber, type })} />
           <Flex sx={styles.rightCon}>
             <Flex sx={styles.right}>
               <Flex sx={styles.modalHeader}>
diff --git a/src/widgets/TutorialModal/styles.ts b/src/widgets/TutorialModal/styles.ts
index 7f36413f..99ed1c00 100644
--- a/src/widgets/TutorialModal/styles.ts
+++ b/src/widgets/TutorialModal/styles.ts
@@ -11,12 +11,12 @@ export const modalProps = {
 };
 
 export const dynamicStyles: Record<string, (props: any) => ThemeUIStyleObject> = {
-  showApe: ({ step, type }: ShowApeType) => ({
+  showApe: ({ slideNumber, type }: ShowApeType) => ({
     alignSelf: ["center", "center", ""],
     width: ["200px", "200px", "340px"],
     height: ["200px", "200px", "340px"],
     marginTop: "20px",
-    background: `url(images/tutorial-modals/${type}-${step}.svg)`,
+    background: `url(images/tutorial-modals/${type}-${slideNumber}.svg)`,
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
     backgroundSize: "cover",
diff --git a/src/widgets/TutorialModal/types.ts b/src/widgets/TutorialModal/types.ts
index 46f0861e..a91ef7b5 100644
--- a/src/widgets/TutorialModal/types.ts
+++ b/src/widgets/TutorialModal/types.ts
@@ -10,6 +10,7 @@ export interface TModalProps {
   readyText: string;
   description?: string;
   children: React.ReactNode[];
+  isConnected: boolean;
 }
 
 export interface CountProps {
@@ -41,7 +42,7 @@ export enum TutorialModals {
 export type TutorialModalTypes = `${TutorialModals}`;
 
 export interface ShowApeType {
-  step: number;
+  slideNumber: number;
   type: TutorialModalTypes | string;
   isDark: boolean;
 }
diff --git a/src/widgets/TutorialModal/useTutorialModal.tsx b/src/widgets/TutorialModal/useTutorialModal.tsx
index 6985bbf5..91f56b7e 100644
--- a/src/widgets/TutorialModal/useTutorialModal.tsx
+++ b/src/widgets/TutorialModal/useTutorialModal.tsx
@@ -15,6 +15,7 @@ const useTutorialModal = ({
   onDismiss,
   readyText,
   t,
+  isConnected,
 }: TModalProps): ReturnType => {
   const [onPresentTutorialModal] = useModal(
     <TutorialModal
@@ -24,6 +25,7 @@ const useTutorialModal = ({
       onDismiss={onDismiss}
       readyText={readyText}
       t={t}
+      isConnected={isConnected}
     >
       {children}
     </TutorialModal>,