mobile mint flow

Kryha · Dec 8, 2023 · 8088045 · 8088045
1 parent 38cbf8a
commit 8088045
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 131 deletions.
diff --git a/frontend/src/components/atoms/button.ts b/frontend/src/components/atoms/button.ts
@@ -9,6 +9,7 @@ interface ButtonProps {
   borderColor?: string;
   visible?: boolean;
   disabled?: boolean;
+  mobileWidth?: string;
 }
 
 export const KeplerIconWrapper = styled.div``;
@@ -88,6 +89,7 @@ export const PrimaryButton = styled.button<ButtonProps>`
 
   @media (max-width: ${breakpoints.mobile}) {
     font-size: 12px;
+    max-width: ${(props): string => props.mobileWidth || "none"};
   }
 `;
 

diff --git a/frontend/src/components/base-route-mobile/base-route-mobile.tsx b/frontend/src/components/base-route-mobile/base-route-mobile.tsx
@@ -52,11 +52,11 @@ export const BaseRouteMobile: FC<BaseRouteProps> = ({ children, sideNavigation,
     <>
       {interactionMode === MAIN_MODE && (
         <TopbarContainer isLanding={isLanding}>
-          <Box>
+          {/* <Box>
             <NavigationSection route={isOnboarding}>
               <NavigationTab title={text.navigation.character} route={isOnboarding} />
             </NavigationSection>
-          </Box>
+          </Box> */}
           <KreadContainerMobile onClick={home}>
             <KreadIcon />
           </KreadContainerMobile>

diff --git a/frontend/src/components/base-route-mobile/styles.ts b/frontend/src/components/base-route-mobile/styles.ts
@@ -16,7 +16,9 @@ export const TopbarContainer = styled.header<AnimationProps>`
   width: 100vw;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-end;
+  margin-top: 12px;
+  margin-bottom: -65px;
   align-items: flex-end;
   z-index: 100;
   top: 0;

diff --git a/frontend/src/pages/create-character-mobile/confirmation.tsx b/frontend/src/pages/create-character-mobile/confirmation.tsx
@@ -42,7 +42,7 @@ export const Confirmation: FC<ConfirmationProps> = ({ character }) => {
         <MenuItemName>{getDatefromEpoch(Date.now())}</MenuItemName>
       </InfoContainer>
       <ButtonContainer>
-        <PrimaryButton onClick={handleConfirm}>
+        <PrimaryButton onClick={handleConfirm} mobileWidth="100px">
           <ButtonText customColor={color.white}>{text.mint.goToCharacter}</ButtonText>
           <ArrowUp />
         </PrimaryButton>

diff --git a/frontend/src/pages/create-character-mobile/styles.ts b/frontend/src/pages/create-character-mobile/styles.ts
@@ -43,6 +43,7 @@ export const FormCard = styled.div`
     margin: auto;
     height: 100%;
     border-radius: 0;
+    max-width: 100vw;
   }
 
   animation: ${fadeUp} 1.2s ease-out 0s forwards;
@@ -290,6 +291,7 @@ export const ButtonWrapper = styled.div`
   flex-direction: row;
   justify-content: space-between;
   height: 100%;
+  max-width: 100vw;
   align-items: flex-end;
   align-content: flex-end;
 `;
@@ -302,4 +304,8 @@ export const Step = styled.div`
 
 export const RedButtonText = styled(ButtonText)`
   color: red;
-`
+`;
+
+export const PrimaryButtonMobile = styled(PrimaryButton)`
+  max-width: 100px;
+`;
diff --git a/frontend/src/pages/landing-mobile/landing-mobile.tsx b/frontend/src/pages/landing-mobile/landing-mobile.tsx
@@ -6,7 +6,6 @@ import {
   BaseRouteMobile,
   BoldLabel,
   ButtonText,
-  ContentLoader,
   ErrorView,
   FadeInOut,
   LevelBoldLabel,
@@ -17,8 +16,7 @@ import {
   PageSubTitle,
   SecondaryButton,
 } from "../../components";
-import { ButtonContainer, CharacterCardWrapper, DetailContainer, ItemCardWrapper } from "./styles";
-import { CharacterDetailSection, ItemDetailSection } from "../../containers/detail-section";
+import { ButtonContainer, DetailContainer, MarginTop } from "./styles";
 import { useEquipItem, useGetItemInInventoryByNameAndCategory, useSelectedCharacter, useUnequipItem } from "../../service";
 import { routes } from "../../navigation";
 import { NotificationWrapper } from "../../components/notification-detail/styles";
@@ -34,78 +32,28 @@ import { MainMode } from "../../containers/canvas/main-mode/main-mode";
 import { calculateCharacterLevels } from "../../util";
 import { AssetTag } from "../../components/asset-card/styles";
 import { color } from "../../design";
-import { ButtonInfoWrap } from "../../components/button-info/styles";
 
 export const LandingMobile: FC = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
   const [selectedCharacter, isLoading] = useSelectedCharacter();
-  const [closeDetail, setCloseDetail] = useState(false);
   const [showToast, setShowToast] = useState(false);
   const { width, height } = useViewport();
   const {
-    selectedAsset,
-    selectedAssetCategory,
-    showDetails,
-    setShowDetails,
-    characterName,
-    showItemDetails,
-    setShowItemDetails,
     interactionMode,
     setInteractionMode,
   } = useCharacterBuilder();
 
-  const [item] = useGetItemInInventoryByNameAndCategory(selectedAsset, selectedAssetCategory, characterName);
-
   const equipItem = useEquipItem();
   const unequipItem = useUnequipItem();
 
   if (equipItem.isError || unequipItem.isError) return <ErrorView />;
-  const equipAsset = () => {
-    setShowToast(!showToast);
-    if (item) {
-      equipItem.mutate({ item, callback: {} });
-    }
-  };
-
-  const unequipAsset = () => {
-    setShowToast(!showToast);
-    if (item) {
-      unequipItem.mutate({ item, callback: {} });
-    }
-  };
-
-  const sell = (characterId: number) => {
-    navigate(`${routes.sellCharacter}/${characterId}`, { state: location });
-  };
-
-  const sellAsset = () => {
-    navigate(`${routes.sellItem}/${item?.category}/${item?.name}`, {
-      state: location,
-    });
-  };
-
-  const assetDetailActions = () => {
-    if (item?.equippedTo !== "") {
-      return { primary: { text: text.item.unequip, onClick: unequipAsset } };
-    } else {
-      return {
-        primary: { text: text.item.equip, onClick: equipAsset },
-        secondary: { text: text.item.sell, onClick: sellAsset },
-      };
-    }
-  };
-
-  const displayToast = () => {
-    setShowToast(true);
-  };
+
 
   let level = 0;
   if (selectedCharacter) {
     const { totalLevel } = calculateCharacterLevels(selectedCharacter);
     level = totalLevel;
   }
-  
+
   return (
     <BaseRouteMobile
       isLanding
@@ -124,80 +72,27 @@ export const LandingMobile: FC = () => {
       {isLoading ? (
         <LoadingPage spinner={false} />
       ) : !selectedCharacter ? (
-        <OverviewEmpty
-          headingText={text.character.youDoNotHave}
-          descriptionText={text.character.youDoNotOwnACharacter}
-          buttonText={text.character.createANewCharacter}
-          redirectRoute={routes.createCharacter}
-        />
+        <MarginTop >
+          <OverviewEmpty
+            headingText={text.character.youDoNotHave}
+            descriptionText={text.character.youDoNotOwnACharacter}
+            buttonText={text.character.createANewCharacter}
+            redirectRoute={routes.createCharacter}
+          />
+        </MarginTop>
       ) : (
         <>
           {/* character info */}
-          {interactionMode === MAIN_MODE ? (
-            <DetailContainer>
-              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
-              <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
-              <ButtonContainer>
-                <ButtonInfoWrap onClick={() => setShowDetails(true)}>
-                  <SecondaryButton>{text.general.info}</SecondaryButton>
-                </ButtonInfoWrap>
-                <AssetTag>
-                  <BoldLabel customColor={color.black}>lvl. </BoldLabel>
-                  <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
-                </AssetTag>
-              </ButtonContainer>
-            </DetailContainer>
-          ) : (
-            <DetailContainer>
-              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
-              <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
-              <ButtonContainer>
-                <AssetTag>
-                  <BoldLabel customColor={color.black}>lvl. </BoldLabel>
-                  <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
-                </AssetTag>
-              </ButtonContainer>
-            </DetailContainer>
-          )}
-
-          <ItemCardWrapper>
-            {showItemDetails && (
-              <ItemDetailSection
-                item={item}
-                actions={{
-                  onClose: () => {
-                    setShowItemDetails(false);
-                  },
-                  primary: assetDetailActions()?.primary,
-                  secondary: assetDetailActions()?.secondary,
-                }}
-              />
-            )}
-          </ItemCardWrapper>
-          <CharacterCardWrapper>
-            {interactionMode !== ITEM_MODE && (
-              <FadeInOut show={showDetails} exiting={closeDetail}>
-                <CharacterDetailSection
-                  character={selectedCharacter}
-                  actions={{
-                    secondary: {
-                      text: text.character.sell,
-                      onClick: () => sell(Number(selectedCharacter.nft.id)),
-                    },
-                    onClose: () => {
-                      setShowDetails(false);
-                      setCloseDetail(true);
-                    },
-                  }}
-                  showToast={displayToast}
-                />
-              </FadeInOut>
-            )}
-          </CharacterCardWrapper>
-
-          <FadeInOut show={showDetails} exiting={closeDetail}>
-            <Overlay />
-          </FadeInOut>
+          <DetailContainer>
+            <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
+            <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
+            <ButtonContainer>
+              <AssetTag>
+                <BoldLabel customColor={color.black}>lvl. </BoldLabel>
+                <LevelBoldLabel customColor={color.black}>{level}</LevelBoldLabel>
+              </AssetTag>
+            </ButtonContainer>
+          </DetailContainer>
           <FadeInOut show={showToast} exiting={!showToast}>
             {showToast && <Overlay isOnTop={true} />}
             <NotificationWrapper showNotification={showToast}>

diff --git a/frontend/src/pages/landing-mobile/styles.ts b/frontend/src/pages/landing-mobile/styles.ts
@@ -102,3 +102,7 @@ export const CharacterTitle = styled.h1`
   font-size: 32px;
   line-height: 52px;
 `;
+
+export const MarginTop = styled.div`
+  margin-top: 100px;
+`;