diff --git a/frontend/package.json b/frontend/package.json index 03d9bf632..de1382696 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ "axios": "^1.6.0", "crypto-browserify": "^3.12.0", "eslint": "^8.48.0", + "framer-motion": "^10.16.4", "json5": "^2.2.1", "konva": "^9.2.0", "react": "^18.1.0", diff --git a/frontend/src/assets/icons/arrow-up.svg b/frontend/src/assets/icons/arrow-up.svg new file mode 100644 index 000000000..fb4eaeb93 --- /dev/null +++ b/frontend/src/assets/icons/arrow-up.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts index 4ac3ec4a4..8d16d202b 100644 --- a/frontend/src/assets/icons/index.ts +++ b/frontend/src/assets/icons/index.ts @@ -1,6 +1,7 @@ import { ReactComponent as ErrorIcon } from "./error.svg"; import { ReactComponent as SelectArrowIcon } from "./select-arrow.svg"; import { ReactComponent as ArrowUpRightIcon } from "./arrow-up-right.svg"; +import { ReactComponent as ArrowUpIcon } from "./arrow-up.svg"; import { ReactComponent as MenuIcon } from "./menu.svg"; import { ReactComponent as CloseIcon } from "./close.svg"; import { ReactComponent as ExpandIcon } from "./expand.svg"; @@ -46,6 +47,7 @@ import { ReactComponent as StoreIcon } from "./store.svg"; export { StoreIcon, + ArrowUpIcon, ISTIcon, KeplerIcon, DiagonalIcon, diff --git a/frontend/src/assets/text/general.ts b/frontend/src/assets/text/general.ts index a7ebda237..5216f3213 100644 --- a/frontend/src/assets/text/general.ts +++ b/frontend/src/assets/text/general.ts @@ -26,7 +26,7 @@ export const general = { toolTipTitle: "tool tip title", toolTipInfo: "maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.", thisFieldIsRequired: "this field is required", - mintNew: `mint new (IST)`, + mintNew: "mint new (IST)", theMinimiumAmountIs: "the minimum amount is IST 1", moreInfo: "more info", thereAreNoAssetsAvailable: "there are no assets available", @@ -34,7 +34,7 @@ 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. Start collecting SAGES NFTs to shape your own saga.", explore: "explore", connectWallet: "connect Keplr Wallet", activateWallet: "activate Wallet", @@ -48,7 +48,7 @@ export const general = { kryha: "Kryha", contactUs: "contact us", questionsBug: "questions, bug reports, \nfeedback... ? We are here for it all.", - sendEmailTo: "send an email to", + sendEmailTo: "send an email to ", contactEmail: "kread@kryha.io", followUs: "Follow us", discord: "Discord", diff --git a/frontend/src/components/atoms/image.ts b/frontend/src/components/atoms/image.ts index c9761e60d..dc408f28f 100644 --- a/frontend/src/components/atoms/image.ts +++ b/frontend/src/components/atoms/image.ts @@ -1,5 +1,4 @@ import styled from "@emotion/styled"; -import { EXTRA_LARGE_SCREEN_SIZE, LARGE_SCREEN_SIZE, MEDIUM_SCREEN_SIZE, SMALL_SCREEN_SIZE } from "../../constants"; export interface ImageProps { src?: string; @@ -22,28 +21,15 @@ export const Img = styled.img` `; export interface CharacterImageProps { - width: number; - height: number; zIndex?: number; src?: string; } export const CharacterImgs = styled.img` - ${({ height }): string => `height: ${height}px;`}; - ${({ width }): string => { - if (width <= SMALL_SCREEN_SIZE) { - return "width: 600px;"; - } - if (width <= MEDIUM_SCREEN_SIZE && width >= SMALL_SCREEN_SIZE) { - return "width: 742px; "; - } - if (width <= LARGE_SCREEN_SIZE && width >= MEDIUM_SCREEN_SIZE) { - return "width: 764px; "; - } - if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) { - return "width: 1018px; "; - } else { - return "width: 742px; "; - } - }}; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: contain; `; diff --git a/frontend/src/components/footer/styles.ts b/frontend/src/components/footer/styles.ts index 28250d0eb..bc8772271 100644 --- a/frontend/src/components/footer/styles.ts +++ b/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 { @@ -9,14 +9,17 @@ interface FooterProps { export const FooterWrapper = styled.div` display: flex; + position: relative; flex-direction: row; - justify-content: space-between; - margin-left: 16px; - margin-top: 16px; - align-items: flex-start; - width: 100%; + justify-content: flex-end; + align-items: center; z-index: 1000; - border-radius: 100px; + flex-grow: 1; + + @media (max-width: ${breakpoints.tablet}) { + align-items: center; + justify-content: center; + } `; export const FooterContainer = styled.div` diff --git a/frontend/src/components/main-container/styles.ts b/frontend/src/components/main-container/styles.ts index 3c694f220..0bdd875dd 100644 --- a/frontend/src/components/main-container/styles.ts +++ b/frontend/src/components/main-container/styles.ts @@ -6,10 +6,9 @@ interface MainProps { export const MainWrap = styled.div` display: flex; - width: 100%; + width: 100vw; height: 100vh; flex-direction: column; overflow: hidden; position: relative; - // ${({ height }): string => `height: ${height}px;`}; `; diff --git a/frontend/src/components/onboarding-character/onboarding-character.tsx b/frontend/src/components/onboarding-character/onboarding-character.tsx index 5d625a5b0..2e0cf8e8c 100644 --- a/frontend/src/components/onboarding-character/onboarding-character.tsx +++ b/frontend/src/components/onboarding-character/onboarding-character.tsx @@ -1,6 +1,6 @@ import { FC, useEffect, useState } from "react"; -import { CharacterContainer, CharacterSwitchIcon, CharacterWrapper, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles"; +import { CharacterContainer, CharacterSwitchIcon, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles"; import { useViewport } from "../../hooks"; import { ArmaCitizen, @@ -27,11 +27,7 @@ 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]; -interface Props { - size?: "mini" | "medium" | "half" | "normal" | "large" | "extraLarge"; - isZoomed?: boolean; -} -export const OnboardingCharacter: FC = ({ size, isZoomed }) => { +export const OnboardingCharacter: FC = () => { const { width, height } = useViewport(); const [currentIndex, setCurrentIndex] = useState(0); @@ -44,32 +40,12 @@ export const OnboardingCharacter: FC = ({ size, isZoomed }) => { }, []); return ( - - - - - - - - - + + + + + + + ); }; diff --git a/frontend/src/components/onboarding-character/styles.ts b/frontend/src/components/onboarding-character/styles.ts index 48a12738a..9c8fee010 100644 --- a/frontend/src/components/onboarding-character/styles.ts +++ b/frontend/src/components/onboarding-character/styles.ts @@ -1,160 +1,18 @@ import styled from "@emotion/styled"; - -import { margins } from "../../design"; -import { CharacterImgs, SecondaryButton, sequentialFadeIn, zoomClothing, zoomIn } from "../atoms"; +import { CharacterImgs, sequentialFadeIn } 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"; -import { css } from "@emotion/react"; - -interface ImageProps { - width: number; - height: number; - zIndex?: number; - isZoomed?: boolean; - size?: "mini" | "medium" | "half" | "normal" | "large" | "extraLarge"; - isClothing?: boolean; -} +import { breakpoints } from "../../design"; -interface ViewProps { - width: number; -} - -export const ExpandButton = styled(SecondaryButton)` +export const CharacterContainer = styled.div` position: absolute; - z-index: 300; - ${({ width }): string => { - if (width <= SMALL_SCREEN_SIZE) { - return "left: 45%;"; - } - if (width <= MEDIUM_SCREEN_SIZE && width >= SMALL_SCREEN_SIZE) { - return "left: 48%;"; - } - if (width <= LARGE_SCREEN_SIZE && width >= MEDIUM_SCREEN_SIZE) { - return "left: 46%;"; - } - if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) { - return "left: 47%;"; - } else { - return "left: 48%;"; - } - }}; - bottom: ${margins.big}; - padding: 8px 16px; - > svg { - margin-left: 0; + height: 100%; + width: 100%; + z-index: -1; + @media (max-width: ${breakpoints.tablet}) { + opacity: 0.5; } `; -export const CharacterIcon = styled(CharacterImgs)` - position: absolute; - top: 0; - ${({ zIndex }): string => `z-index: ${zIndex || zIndexProps.character};`}; -`; - -export const CharacterWrapper = styled.div` - position: absolute; - right: 0; - top: 0; - margin: 0; - pointer-events: none; - ${({ isZoomed }) => - isZoomed - ? css` - right: -45%; - ` - : css` - right: 0; - `}; -`; - -export const CharacterContainer = styled.div` - ${({ size, width, height }): string => { - if (size === "mini") { - if (width <= SMALL_SCREEN_SIZE) { - return `zoom: 0.18; - -moz-transform: scale(0.18); - -moz-transform-origin: 0 0; - `; - } - if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) { - return `zoom: 0.055; - -moz-transform: scale(0.055); - -moz-transform-origin: 0 0; - `; - } - return `zoom:0.075; - -moz-transform: scale(0.1); - -moz-transform-origin: 0 0; - `; - } else if (size === "medium") { - if (width <= SMALL_SCREEN_SIZE) { - return `zoom: 0.36; - -moz-transform: scale(0.36); - -moz-transform-origin: 0 0; - `; - } - if (width <= MEDIUM_SCREEN_SIZE && width >= SMALL_SCREEN_SIZE) { - return `zoom: 0.304; - -moz-transform: scale(0.304); - -moz-transform-origin: 0 0; - `; - } - if (width <= LARGE_SCREEN_SIZE && width >= MEDIUM_SCREEN_SIZE) { - return `zoom: 0.295; - -moz-transform: scale(0.295); - -moz-transform-origin: 0 0; - `; - } - if (width >= EXTRA_LARGE_SCREEN_SIZE && width >= LARGE_SCREEN_SIZE) { - return `zoom: 0.222; - -moz-transform: scale(0.222); - -moz-transform-origin: 0 0; - `; - } else { - return `zoom: 0.304; - -moz-transform: scale(0.304); - -moz-transform-origin: 0 0; - `; - } - } else if (size === "half") { - return `zoom: 0.5; - -moz-transform: scale(0.5); - -moz-transform-origin: 0 0; - `; - } else if (size === "normal") { - return `width: ${width * 0.4}px; height: ${height}px;`; - } else if (size === "large") { - return `zoom: 2.5; - -moz-transform: scale(2.5); - -moz-transform-origin: 0 0; - transform: translateY(-40vh); - - `; - } else if (size === "extraLarge") { - return ` - zoom: 2.5; - -moz-transform: scale(2.5); - -moz-transform-origin: 0 0; - - `; - } else { - return `width: ${width * 0.4}px; height: ${height}px;`; - } - }}; - ${({ size, isClothing }) => - size === "extraLarge" && !isClothing - ? css` - animation: ${zoomIn} 5s ease-out 1 forwards; - ` - : css``}; - ${({ size, isClothing }) => - size === "extraLarge" && isClothing - ? css` - animation: ${zoomClothing} 5s ease-out 1 forwards; - ` - : css``}; -`; - export const CharacterSwitchIcon = styled(CharacterImgs)` opacity: 0; animation: ${sequentialFadeIn} 5s ease-in-out; @@ -162,9 +20,6 @@ export const CharacterSwitchIcon = styled(CharacterImgs)` animation-delay: 1.5s; `; export const FirstIcon = styled(CharacterImgs)` - position: absolute; - top: 0; - left: 0; ${({ zIndex }): string => `z-index: ${zIndex || zIndexProps.mid};`}; opacity: 0; animation: ${sequentialFadeIn} 5s ease-in-out; diff --git a/frontend/src/design/sizes.ts b/frontend/src/design/sizes.ts index 4170ecb81..2def28e22 100644 --- a/frontend/src/design/sizes.ts +++ b/frontend/src/design/sizes.ts @@ -4,4 +4,4 @@ export const breakpoints = { desktop: "1024px", desktopLarge: "1440px", desktopWide: "1920px", -}; +} as const; diff --git a/frontend/src/navigation/routes.tsx b/frontend/src/navigation/routes.tsx index 57686291b..312d9504c 100644 --- a/frontend/src/navigation/routes.tsx +++ b/frontend/src/navigation/routes.tsx @@ -30,20 +30,22 @@ export const InternalAppRoutes: FC = () => { if (service.isLoading) return ; return ( - navigate(routes.character)}> - - } /> - } /> - } /> - : } /> - : } /> - } /> - } /> - } /> - } /> - } /> - - + + navigate(routes.character)}> + + } /> + } /> + } /> + : } /> + : } /> + } /> + } /> + } /> + } /> + } /> + + + ); }; @@ -52,13 +54,11 @@ export const ExternalAppRoutes: FC = () => { return ( navigate(routes.character)}> - - - } /> - } /> - } /> - - + + } /> + } /> + } /> + ); }; diff --git a/frontend/src/pages/connect-wallet/connect-wallet.tsx b/frontend/src/pages/connect-wallet/connect-wallet.tsx index c99ea39ad..567ad4a64 100644 --- a/frontend/src/pages/connect-wallet/connect-wallet.tsx +++ b/frontend/src/pages/connect-wallet/connect-wallet.tsx @@ -1,7 +1,7 @@ -import React, { FC, useRef, useState } from "react"; +import React, { FC, useState } from "react"; import { useNavigate } from "react-router-dom"; import { KeplerIcon, text } from "../../assets"; -import { breakpoints, color } from "../../design"; +import { color } from "../../design"; import { ButtonText, FadeInOut, @@ -9,45 +9,40 @@ import { Kado, KeplerIconWrapper, LoadingPage, - MenuText, NotificationDetail, OnboardingCharacter, Overlay, PrimaryButton, - TitleText, } from "../../components"; +import { ArrowUp, FooterContainer } from "./styles"; +import { useViewport } from "../../hooks"; +import { useAgoricContext } from "../../context/agoric"; import { - ArrowUp, - ButtonContainer, - FooterContainer, - InfoText, + ButtonRow, KreadLogo, + LeftContent, LogoContainer, OnboardingContainer, OnboardingWrapper, - SectionContainer, -} from "./styles"; -import { useIsMobile, useOnScreen, useViewport } from "../../hooks"; -import { useAgoricContext } from "../../context/agoric"; -import { routes } from "../../navigation"; -import { ButtonRow } from "../onboarding/styles"; + RightContent, + SectionHeading, + SectionText, +} from "../onboarding/styles"; import { NotificationWrapper } from "../../components/notification-detail/styles"; +import { Section } from "../onboarding"; +import { routes } from "../../navigation"; export const ConnectWallet: FC = () => { const [service, _] = useAgoricContext(); const navigate = useNavigate(); - const { width, height } = useViewport(); + const { height } = useViewport(); const [isLoading, setIsLoading] = useState(false); - const ref = useRef(null); - const isConnectButtonVisible = useOnScreen(ref); - const isMobile = useIsMobile(breakpoints.tablet); const [showWidget, setShowWidget] = useState(false); const [showToast, setShowToast] = useState(false); const toggleWidget = () => { setShowWidget(!showWidget); }; - const showAnimation = false; const provisionWallet = async () => { setIsLoading(true); @@ -63,9 +58,19 @@ export const ConnectWallet: FC = () => { if (service.status.walletProvisioned) navigate(routes.character); return ( - <> - - + + + + + +
+ + {text.general.activateSmartWallet} + {text.general.activateSmartWalletDescription} + + + + provisionWallet()}> @@ -79,23 +84,11 @@ export const ConnectWallet: FC = () => { - - - - - {text.general.activateSmartWallet} - {text.general.activateSmartWalletDescription} - - - - {!isMobile && } +