Merge remote-tracking branch 'origin/develop' into mobile/landing

frontend/src/assets/text/general.ts

@@ -34,15 +34,15 @@ export const general = {
   aCharcterBuilderApp:
     "KREAd is a character builder dApp, where all the characters and their items are dynamic NFTs. You have the freedom to build your character and the ownership of all the equipment attached to it. So feel free to sell them, trade them, or even burn them!",
   sagesBy: "SAGES by KREAd",
-  sagesIsTheFirst: "SAGES is the first collection\nlaunched on the KREAd dApp.\nStart collecting SAGES NFTs to\nshape your own saga.",
+  sagesIsTheFirst: "SAGES is the first collection launched on the KREAd dApp.\nStart collecting SAGES NFTs to\nshape your own saga.",
   explore: "explore",
   connectWallet: "connect Keplr Wallet",
   activateWallet: "activate Wallet",
   whoWeAre: "who we are",
   ourLeadership: "Our leadership includes some of\nthe most inventive and\nexperienced executives in the technology industry.",
   isPartOfAgoric: "KREAd is a decentralized application deployed on ",
   anOpenSource:
-    ", an open-source development company launching an interoperable Proof-\nof-Stake chain and economy. The dApp is imagined, built, and\ndesigned by ",
+    ", an open-source development company launching an interoperable Proof-of-Stake chain and economy. The dApp is imagined, built, and designed by ",
   agoric: "Agoric",
   theSagesArt: "The SAGES art and comic is\ncreated by Enmanuel Heredia.",
   kryha: "Kryha",

frontend/src/components/atoms/image.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { EXTRA_LARGE_SCREEN_SIZE, LARGE_SCREEN_SIZE, MEDIUM_SCREEN_SIZE, SMALL_SCREEN_SIZE } from "../../constants";
+import { breakpoints } from "../../design";
 
 export interface ImageProps {
   src?: string;
@@ -46,4 +47,19 @@ export const CharacterImgs = styled.img<CharacterImageProps>`
       return "width: 742px; ";
     }
   }};
+  }
 `;
+
+export interface CharacterImageMobileProps {
+  zIndex?: number;
+  src?: string;
+}
+
+export const CharacterImgsMobile = styled.img<CharacterImageMobileProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;  
+`;

frontend/src/components/atoms/text.ts

@@ -86,6 +86,7 @@ export const TitleText = styled.h3<TextProps>`
 
   @media screen and (max-width: ${breakpoints.tablet}) {
     font-size: 16px;
+    line-height: 23px;
   }
 `;
 

frontend/src/components/footer/footer.tsx

@@ -1,13 +1,14 @@
 import React, { FC, useState } from "react";
 import { useLocation, useMatch, useResolvedPath } from "react-router-dom";
 import { text } from "../../assets";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 import { routes } from "../../navigation";
 import { AgoricText, FooterContainer, FooterWrapper, Link, PrivacyText } from "./styles";
 import { NetworkSelect } from "../network-selector/network-select";
 import { useNetworkConfig } from "../../hooks/useNetwork";
 import { getLabelForNetwork, NetworkSelector } from "../network-selector/network-selector";
 import { networkOptions } from "../../constants";
+import { useIsMobile } from "../../hooks";
 
 export const Footer: FC = () => {
   const resolvedShop = useResolvedPath(routes.shop);
@@ -25,9 +26,11 @@ export const Footer: FC = () => {
     setFilterId(id !== filterId ? id : "");
   };
 
+  const isMobile = useIsMobile(breakpoints.tablet);
+
   return (
     <FooterWrapper isShop={!!matchShop}>
-      { pathsWithNetworkSelector.includes(location.pathname as any) && 
+      { pathsWithNetworkSelector.includes(location.pathname as any) && !isMobile &&
         <NetworkSelector label={label} openNetworkSelector={openFilter} id={filterId} hasValue={!!network}>
           <NetworkSelect label={network} onChange={setNetworkValue} options={networkOptions} />
         </NetworkSelector>

frontend/src/components/footer/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { NavLink } from "react-router-dom";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 import { ButtonText } from "../atoms";
 
 interface FooterProps {
@@ -17,6 +17,11 @@ export const FooterWrapper = styled.div<FooterProps>`
   width: 100%;
   z-index: 1000;
   border-radius: 100px;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    margin-left: 0px;
+    justify-content: center;
+  }
 `;
 
 export const FooterContainer = styled.div`

frontend/src/components/index.ts

@@ -27,6 +27,7 @@ export * from "./notification-detail";
 export * from "./footer";
 export * from "./fade-in-out";
 export * from "./onboarding-character";
+export * from "./onboarding-character-mobile";
 export * from "./logo";
 export * from "./load-more";
 export * from "./kado-on-ramp";

frontend/src/components/kado-on-ramp/styles.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 
 export const KadoContainer = styled.div`
   display: flex;
@@ -12,6 +12,11 @@ export const KadoContainer = styled.div`
     border-radius: 24px;
     width: 500px;
     height: 700px;
+
+    @media (max-width: ${breakpoints.tablet}) {
+      width: 100vw;
+      height: 80vh;
+    }
   }
 `;
 

frontend/src/components/notification-detail/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { CloseIcon, ExclamationIcon, TickIcon } from "../../assets";
-import { color, margins } from "../../design";
+import { breakpoints, color, margins } from "../../design";
 import { HeaderHorizontalDivider, NavigationTitle } from "../atoms";
 
 export const ToastContainer = styled.div`
@@ -18,6 +18,10 @@ export const ToastContainer = styled.div`
   position: absolute;
   left: 40px;
   height: fit-content;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 100vw;
+  }
 `;
 
 export const Tick = styled(TickIcon)`

frontend/src/components/onboarding-character-mobile/index.ts

@@ -0,0 +1 @@
+export * from "./onboarding-character-mobile";

frontend/src/components/onboarding-character-mobile/onboarding-character-mobile.tsx

@@ -0,0 +1,51 @@
+import { FC, useEffect, useState } from "react";
+
+import { CharacterContainer, CharacterSwitchIcon, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles";
+import { useViewport } from "../../hooks";
+import {
+  ArmaCitizen,
+  ArmaPerk_I6,
+  ArmaPerk_I7,
+  ElephiaCitizen,
+  Empty,
+  Headpiece_Arma_3,
+  Headpiece_Arma_5,
+  Headpiece_Farma_4,
+  Legendary_Garment_Arma_7,
+  Mask_Elephia_24,
+  Mask_Elephia_32,
+  Mask_Mount_3,
+  Rare_Garment_Arma_2,
+  text,
+  Uncommon_Garment_Arma_1,
+} from "../../assets";
+import { zIndex } from "../../design";
+
+const characterImages = [ArmaCitizen, ElephiaCitizen];
+const headPieceImages = [Headpiece_Arma_3, Headpiece_Farma_4, Headpiece_Arma_5, Empty];
+const perk1Images = [ArmaPerk_I6, ArmaPerk_I7, Empty];
+const maskImages = [Mask_Mount_3, Mask_Elephia_24, Mask_Elephia_32];
+const garmentImages = [Legendary_Garment_Arma_7, Rare_Garment_Arma_2, Uncommon_Garment_Arma_1];
+
+export const OnboardingCharacterMobile: FC = () => {
+  const { width, height } = useViewport();
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentIndex(Math.floor(Math.random() * 3.5));
+    }, 5000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <CharacterContainer>
+      <CharacterSwitchIcon src={characterImages[currentIndex] || ArmaCitizen} />
+      <FourthIcon src={perk1Images[currentIndex] || Empty} alt={text.character.perk1} width={width} height={height} zIndex={zIndex.perk1} />
+      <ThirdIcon src={headPieceImages[currentIndex] || Empty} alt={text.character.headPiece} zIndex={zIndex.headPiece} />
+      <FifthIcon src={maskImages[currentIndex] || Empty} alt={text.character.mask} width={width} height={height} zIndex={zIndex.mask} />
+      <FirstIcon src={garmentImages[currentIndex] || Empty} alt={text.character.garment} zIndex={zIndex.garment} />
+    </CharacterContainer>
+  );
+};

frontend/src/components/onboarding-character-mobile/styles.ts

@@ -0,0 +1,56 @@
+import styled from "@emotion/styled";
+import { CharacterImgsMobile, sequentialFadeIn } from "../atoms";
+import { zIndex as zIndexProps } from "../../design/spacing";
+import { breakpoints } from "../../design";
+
+export const CharacterContainer = styled.div`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+  @media (max-width: ${breakpoints.tablet}) {
+    opacity: 0.5;
+  }
+`;
+
+export const CharacterSwitchIcon = styled(CharacterImgsMobile)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 1.5s;
+`;
+export const FirstIcon = styled(CharacterImgsMobile)`
+  ${({ zIndex }): string => `z-index: ${zIndex || zIndexProps.mid};`};
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 500ms;
+`;
+
+export const SecondIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 1s;
+`;
+
+export const ThirdIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 1.5s;
+`;
+
+export const FourthIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 2s;
+`;
+
+export const FifthIcon = styled(FirstIcon)`
+  opacity: 0;
+  animation: ${sequentialFadeIn} 5s ease-in-out;
+  animation-iteration-count: infinite;
+  animation-delay: 2.5s;
+`;

frontend/src/components/onboarding-character/onboarding-character.tsx

@@ -72,4 +72,4 @@ export const OnboardingCharacter: FC<Props> = ({ size, isZoomed }) => {
       </CharacterContainer>
     </CharacterWrapper>
   );
-};
+};

frontend/src/components/onboarding-character/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-import { margins } from "../../design";
+import { breakpoints, margins } from "../../design";
 import { CharacterImgs, SecondaryButton, sequentialFadeIn, zoomClothing, zoomIn } from "../atoms";
 import { zIndex as zIndexProps } from "../../design/spacing";
 import { EXTRA_LARGE_SCREEN_SIZE, LARGE_SCREEN_SIZE, MEDIUM_SCREEN_SIZE, SMALL_SCREEN_SIZE } from "../../constants";
@@ -153,6 +153,11 @@ export const CharacterContainer = styled.div<ImageProps>`
           animation: ${zoomClothing} 5s ease-out 1 forwards;
         `
       : css``};
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 100%;
+    height: 100%;
+  }
 `;
 
 export const CharacterSwitchIcon = styled(CharacterImgs)`
@@ -198,4 +203,4 @@ export const FifthIcon = styled(FirstIcon)`
   animation: ${sequentialFadeIn} 5s ease-in-out;
   animation-iteration-count: infinite;
   animation-delay: 2.5s;
-`;
+`;

frontend/src/navigation/routes.tsx

@@ -10,6 +10,9 @@ import { UseWithContext } from "../context/wrapper";
 import { MobileNotAvailable } from "../pages/mobile-not-available";
 import { useIsMobile } from "../hooks";
 import { breakpoints } from "../design";
+import { OnboardingMobile } from "../pages/onboarding-mobile/onboarding-mobile";
+import { ConnectWalletMobile } from "../pages/connect-wallet-mobile/connect-wallet-mobile";
+import { PrivacyMobile } from "../pages/content-mobile";
 
 export const InternalAppWrapper = () => {
   return (
@@ -44,7 +47,7 @@ export const InternalAppRoutes: FC = () => {
   </>
   const mobileRoutes = <>
     {Object.values(desktopOnlyPaths).map((path, index) => <Route path={path} element={<MobileNotAvailable />} key={index} />)}
-    <Route path={routes.connectWallet} element={<ConnectWallet />} />
+    <Route path={routes.connectWallet} element={<ConnectWalletMobile />} />
     <Route path={routes.character} element={<LandingMobile />} />
     <Route path={routes.createCharacter} element={<CreateCharacterMobile />} />
     <Route path="*" element={<ErrorView />} />
@@ -66,8 +69,8 @@ export const ExternalAppRoutes: FC = () => {
     <ErrorBoundary FallbackComponent={ErrorFallback} onError={() => navigate(routes.character)}>
       <MainContainer>
         <Routes>
-          <Route path={routes.root} element={isMobile ? <Onboarding /> : <Onboarding />} />
-          <Route path={routes.privacy} element={<Privacy />} />
+          <Route path={routes.root} element={isMobile ? <OnboardingMobile /> : <Onboarding />} />
+          <Route path={routes.privacy} element={isMobile ? <PrivacyMobile /> : <Privacy />} />
           <Route path="*" element={<InternalAppWrapper />} />
         </Routes>
       </MainContainer>