clean up

Kryha · Dec 11, 2023 · 9f507c0 · 9f507c0
1 parent 8088045
commit 9f507c0
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 30 deletions.
diff --git a/frontend/src/pages/create-character-mobile/confirmation.tsx b/frontend/src/pages/create-character-mobile/confirmation.tsx
@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { text } from "../../assets";
-import { ButtonText, ErrorView, MenuItemName, PrimaryButton, TitleText } from "../../components";
+import { ButtonText, ErrorView, MenuItemName, TitleText } from "../../components";
 import { color } from "../../design";
 import { Character } from "../../interfaces";
 import { getDatefromEpoch } from "../../util";
-import { ArrowUp, ButtonContainer, ContentWrapper, InfoContainer, Tick, TickContainer } from "./styles";
+import { ArrowUp, ButtonContainer, ContentWrapper, InfoContainer, PrimaryButtonMobile, Tick, TickContainer } from "./styles";
 import { useUserStateDispatch } from "../../context/user";
 import { useNavigate } from "react-router-dom";
 import { routes } from "../../navigation";
@@ -42,10 +42,10 @@ export const Confirmation: FC<ConfirmationProps> = ({ character }) => {
         <MenuItemName>{getDatefromEpoch(Date.now())}</MenuItemName>
       </InfoContainer>
       <ButtonContainer>
-        <PrimaryButton onClick={handleConfirm} mobileWidth="100px">
+        <PrimaryButtonMobile onClick={handleConfirm} mobileWidth="100px">
           <ButtonText customColor={color.white}>{text.mint.goToCharacter}</ButtonText>
           <ArrowUp />
-        </PrimaryButton>
+        </PrimaryButtonMobile>
       </ButtonContainer>
     </ContentWrapper>
   );

diff --git a/frontend/src/pages/create-character-mobile/create-character-mobile.tsx b/frontend/src/pages/create-character-mobile/create-character-mobile.tsx
@@ -1,24 +1,21 @@
 import React, { FC, useEffect, useMemo, useState } from "react";
-import { ElephiaCitizen, text } from "../../assets";
+import { text } from "../../assets";
 import { ErrorView, FadeInOut, FormHeader, LoadingPage, NotificationDetail, Overlay } from "../../components";
 import { PageContainer } from "../../components/page-container";
 import { MINTING_COST, MINT_CHARACTER_FLOW_STEPS, WALLET_INTERACTION_STEP } from "../../constants";
-import { useIsMobile, useViewport } from "../../hooks";
 import { Character, CharacterCreation, MakeOfferCallback } from "../../interfaces";
 import { routes } from "../../navigation";
 import { useCreateCharacter } from "../../service";
 import { Confirmation } from "./confirmation";
 import { Information } from "./information";
 import { Payment } from "./payment";
-import { DefaultImage, FormCard } from "./styles";
-import { breakpoints } from "../../design";
+import { FormCard } from "./styles";
 import { useUserState } from "../../context/user";
 import { useWalletState } from "../../context/wallet";
 import { NotificationWrapper } from "../../components/notification-detail/styles";
 
 export const CreateCharacterMobile: FC = () => {
   const createCharacter = useCreateCharacter();
-  const { width, height } = useViewport();
   const [currentStep, setCurrentStep] = useState<number>(0);
   const [mintedCharacter, setMintedCharacter] = useState<Character>();
   const [error, setError] = useState<string>();
@@ -30,7 +27,6 @@ export const CreateCharacterMobile: FC = () => {
   const isLoadingCharacters = !fetched;
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isOfferAccepted, setIsOfferAccepted] = useState<boolean>(false);
-  const mobile = useIsMobile(breakpoints.desktop);
   const { ist } = useWalletState();
 
   const notEnoughIST = useMemo(() => {
@@ -47,6 +43,8 @@ export const CreateCharacterMobile: FC = () => {
       setMintedCharacter(newCharacter.nft);
       setIsLoading(false);
     }
+    if(error) console.error(`Error in create-character-mobile: ${error}`);
+
   }, [characters, characterData, notEnoughIST]);
 
   const changeStep = async (step: number): Promise<void> => {
@@ -119,7 +117,6 @@ export const CreateCharacterMobile: FC = () => {
           />
         </NotificationWrapper>
       </FadeInOut>
-      {!mobile && <DefaultImage src={ElephiaCitizen} alt={text.character.defaultCharacter} height={height} width={width} />}
     </PageContainer>
   );
 };
diff --git a/frontend/src/pages/create-character-mobile/information.tsx b/frontend/src/pages/create-character-mobile/information.tsx
@@ -1,5 +1,5 @@
 import { CharacterCreation } from "../../interfaces";
-import { FC, useEffect, useMemo } from "react";
+import { FC, useMemo } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import {
   ArrowUp,
@@ -10,10 +10,11 @@ import {
   FormContainer,
   FormFields,
   InputWrapper,
+  PrimaryButtonMobile,
   Tick,
   Warning,
 } from "./styles";
-import { ButtonText, FormText, Input, Label, PrimaryButton } from "../../components";
+import { ButtonText, FormText, Input, Label } from "../../components";
 import { text } from "../../assets";
 import { MAX_CHARACTER_LENGTH, MINTING_COST } from "../../constants";
 import { ButtonInfo } from "../../components/button-info";
@@ -103,10 +104,10 @@ export const Information: FC<InformationProps> = ({ setData, disabled }) => {
         <FormText>{text.mint.theCostsOfMinting}</FormText>
         <ButtonWrapper>
           <ButtonContainer>
-            <PrimaryButton type="submit" disabled={!isValid || disabled || notEnoughIST || nameTaken}>
+            <PrimaryButtonMobile mobileWidth="100px" type="submit" disabled={!isValid || disabled || notEnoughIST || nameTaken}>
               <ButtonText customColor={color.white}>{text.mint.next}</ButtonText>
               <ArrowUp />
-            </PrimaryButton>
+            </PrimaryButtonMobile>
           </ButtonContainer>
         </ButtonWrapper>
       </FormContainer>

diff --git a/frontend/src/pages/create-character-mobile/payment.tsx b/frontend/src/pages/create-character-mobile/payment.tsx
@@ -8,13 +8,14 @@ import {
   NumberContainer,
   PreviousButtonContainer,
   PricingContainer,
+  PrimaryButtonMobile,
   Step,
   StepContainer,
   StepText,
   StepWrapper,
   Tick,
 } from "./styles";
-import { Badge, ButtonText, FormText, LoadingPage, PriceInIst, PrimaryButton, SecondaryButton } from "../../components";
+import { Badge, ButtonText, FormText, LoadingPage, PriceInIst, SecondaryButton } from "../../components";
 import { text } from "../../assets";
 import { CONFIRMATION_STEP, INFORMATION_STEP, MINTING_COST } from "../../constants";
 import { color } from "../../design";
@@ -49,9 +50,9 @@ export const Payment: FC<PaymentProps> = ({ submit, sendOfferHandler, isOfferAcc
             {!sendOffer && (
               <>
                 <PriceInIst price={MINTING_COST} />
-                <PrimaryButton onClick={sendOfferToWallet} disabled={disable}>
+                <PrimaryButtonMobile mobileWidth="100px" onClick={sendOfferToWallet} disabled={disable}>
                   <ButtonText customColor={color.white}>{text.mint.sendOffer}</ButtonText>
-                </PrimaryButton>
+                </PrimaryButtonMobile>
               </>
             )}
           </PricingContainer>
@@ -80,10 +81,10 @@ export const Payment: FC<PaymentProps> = ({ submit, sendOfferHandler, isOfferAcc
           </PreviousButtonContainer>
         )}
         <ButtonContainer>
-          <PrimaryButton onClick={() => submit(CONFIRMATION_STEP)} disabled={!isOfferAccepted}>
+          <PrimaryButtonMobile mobileWidth="100px" onClick={() => submit(CONFIRMATION_STEP)} disabled={!isOfferAccepted}>
             <ButtonText customColor={color.white}>{text.mint.confirm}</ButtonText>
             {isLoading ? <LoadingPage /> : <ArrowUp />}
-          </PrimaryButton>
+          </PrimaryButtonMobile>
         </ButtonContainer>
       </ButtonWrapper>
     </ContentWrapper>

diff --git a/frontend/src/pages/landing-mobile/landing-mobile.tsx b/frontend/src/pages/landing-mobile/landing-mobile.tsx
@@ -1,12 +1,10 @@
 import React, { FC, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import { text } from "../../assets";
 import { CharacterTitle } from './styles'
 import {
   BaseRouteMobile,
   BoldLabel,
   ButtonText,
-  ErrorView,
   FadeInOut,
   LevelBoldLabel,
   LoadingPage,
@@ -17,7 +15,7 @@ import {
   SecondaryButton,
 } from "../../components";
 import { ButtonContainer, DetailContainer, MarginTop } from "./styles";
-import { useEquipItem, useGetItemInInventoryByNameAndCategory, useSelectedCharacter, useUnequipItem } from "../../service";
+import { useSelectedCharacter } from "../../service";
 import { routes } from "../../navigation";
 import { NotificationWrapper } from "../../components/notification-detail/styles";
 import { Layout } from "../../containers/canvas/character-canvas/styles";
@@ -40,13 +38,7 @@ export const LandingMobile: FC = () => {
   const {
     interactionMode,
     setInteractionMode,
-  } = useCharacterBuilder();
-
-  const equipItem = useEquipItem();
-  const unequipItem = useUnequipItem();
-
-  if (equipItem.isError || unequipItem.isError) return <ErrorView />;
-
+  } = useCharacterBuilder();  
 
   let level = 0;
   if (selectedCharacter) {