From d9952b10eaef8c32e464c489154da68e04e5e767 Mon Sep 17 00:00:00 2001
From: Pandelis Symeonidis <pandelis@kryha.io>
Date: Mon, 11 Dec 2023 15:44:27 +0100
Subject: [PATCH] fix animation and connect-wallet page

---
 .../src/components/main-container/styles.ts   |   2 +-
 .../components/notification-detail/styles.ts  |   6 +-
 frontend/src/navigation/routes.tsx            |   3 +-
 .../connect-wallet-mobile.tsx                 | 110 +++++++
 .../src/pages/connect-wallet-mobile/index.ts  |   1 +
 .../src/pages/connect-wallet-mobile/styles.ts | 286 ++++++++++++++++++
 .../onboarding-mobile/onboarding-mobile.tsx   |   4 +-
 .../src/pages/onboarding-mobile/styles.ts     |  39 ++-
 8 files changed, 432 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
 create mode 100644 frontend/src/pages/connect-wallet-mobile/index.ts
 create mode 100644 frontend/src/pages/connect-wallet-mobile/styles.ts

diff --git a/frontend/src/components/main-container/styles.ts b/frontend/src/components/main-container/styles.ts
index ee618229f..3c694f220 100644
--- a/frontend/src/components/main-container/styles.ts
+++ b/frontend/src/components/main-container/styles.ts
@@ -6,7 +6,7 @@ interface MainProps {
 
 export const MainWrap = styled.div<MainProps>`
   display: flex;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   flex-direction: column;
   overflow: hidden;
diff --git a/frontend/src/components/notification-detail/styles.ts b/frontend/src/components/notification-detail/styles.ts
index 39bfae8c2..e22ff95d6 100644
--- a/frontend/src/components/notification-detail/styles.ts
+++ b/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)`
diff --git a/frontend/src/navigation/routes.tsx b/frontend/src/navigation/routes.tsx
index 76886d4a4..7659fd66e 100644
--- a/frontend/src/navigation/routes.tsx
+++ b/frontend/src/navigation/routes.tsx
@@ -11,6 +11,7 @@ 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";
 
 export const InternalAppWrapper = () => {
   return (
@@ -45,7 +46,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 />} />
diff --git a/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx b/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
new file mode 100644
index 000000000..eabee90cc
--- /dev/null
+++ b/frontend/src/pages/connect-wallet-mobile/connect-wallet-mobile.tsx
@@ -0,0 +1,110 @@
+import React, { FC, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { KeplerIcon, text } from "../../assets";
+import { breakpoints, color } from "../../design";
+import {
+  ButtonText,
+  FadeInOut,
+  Footer,
+  Kado,
+  KeplerIconWrapper,
+  LoadingPage,
+  MenuText,
+  NotificationDetail,
+  OnboardingCharacter,
+  Overlay,
+  PrimaryButton,
+  TitleText,
+} from "../../components";
+import {
+  ArrowUp,
+  ButtonContainer,
+  FooterContainer,
+  InfoText,
+  KreadLogo,
+  LogoContainer,
+  OnboardingContainer,
+  OnboardingWrapper,
+  SectionContainer,
+  TextContainer,
+} from "./styles";
+import { useIsMobile, useOnScreen, useViewport } from "../../hooks";
+import { useAgoricContext } from "../../context/agoric";
+import { routes } from "../../navigation";
+import { ButtonRow } from "../onboarding/styles";
+import { NotificationWrapper } from "../../components/notification-detail/styles";
+
+export const ConnectWalletMobile: FC = () => {
+  const [service, _] = useAgoricContext();
+  const navigate = useNavigate();
+  const { width, height } = useViewport();
+  const [isLoading, setIsLoading] = useState(false);
+  const ref = useRef<HTMLDivElement>(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);
+    try {
+      await service.walletConnection.provisionSmartWallet();
+    } catch (e) {
+      setIsLoading(false);
+      setShowToast(true);
+    }
+  };
+
+  if (!service.walletConnection.address) return <LoadingPage spinner={false} />;
+  if (service.status.walletProvisioned) navigate(routes.character);
+
+  return (
+    <OnboardingWrapper>
+      <LogoContainer>
+        <KreadLogo />
+      </LogoContainer>
+      <OnboardingContainer height={height} width={width} showAnimation={showAnimation}>
+        <InfoText height={height}>
+          <SectionContainer>
+            <MenuText>{text.general.activateSmartWallet}</MenuText>
+            <TextContainer customColor={color.darkGrey}>{text.general.activateSmartWalletDescription}</TextContainer>
+          </SectionContainer>
+        </InfoText>
+        <ButtonContainer isVisible={isConnectButtonVisible}>
+          <PrimaryButton onClick={() => provisionWallet()}>
+            <KeplerIconWrapper>
+              <KeplerIcon />
+            </KeplerIconWrapper>
+            <ButtonText customColor={color.white}>{text.general.activateWallet}</ButtonText>
+            {isLoading ? <LoadingPage /> : <ArrowUp />}
+          </PrimaryButton>
+          <PrimaryButton onClick={toggleWidget}>
+            <ButtonText customColor={color.white}>{text.store.buyAssets}</ButtonText>
+            <ArrowUp />
+          </PrimaryButton>
+        </ButtonContainer>
+      </OnboardingContainer>
+      <Footer />
+      <FadeInOut show={showWidget}>
+        <Kado show={showWidget} toggleWidget={toggleWidget} />
+        <Overlay />
+      </FadeInOut>
+      <FadeInOut show={showToast} exiting={!showToast}>
+        {showToast && <Overlay isOnTop={true} />}
+        <NotificationWrapper showNotification={showToast}>
+          <NotificationDetail
+            title={text.error.provisionError}
+            info={text.error.notEnoughBLD}
+            closeToast={() => setShowToast(false)}
+            isError
+          />
+        </NotificationWrapper>
+      </FadeInOut>
+    </OnboardingWrapper>
+  );
+};
diff --git a/frontend/src/pages/connect-wallet-mobile/index.ts b/frontend/src/pages/connect-wallet-mobile/index.ts
new file mode 100644
index 000000000..3c5ccb427
--- /dev/null
+++ b/frontend/src/pages/connect-wallet-mobile/index.ts
@@ -0,0 +1 @@
+export * from "./connect-wallet";
diff --git a/frontend/src/pages/connect-wallet-mobile/styles.ts b/frontend/src/pages/connect-wallet-mobile/styles.ts
new file mode 100644
index 000000000..e7e24880f
--- /dev/null
+++ b/frontend/src/pages/connect-wallet-mobile/styles.ts
@@ -0,0 +1,286 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ArrowDownIcon, ArrowUpRightIcon } from "../../assets";
+import { bounce, changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
+import { KreadIcon } from "../../components/logo/styles";
+import { color, fontWeight, zIndex } from "../../design";
+import { ButtonRow } from "../onboarding/styles";
+
+interface HeightProps {
+  height: number;
+}
+
+export const OnboardingWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+`;
+
+export const InfoText = styled.div<HeightProps>`
+${TitleText} {
+  margin-top: 8px;
+}
+width: 100%;
+margin-bottom: 200px;
+background-size: cover;
+scroll-snap-align: start;
+transition: all 0.4s;
+`;
+
+export const ArrowUp = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+  path {
+    stroke: ${color.white};
+  }
+`;
+
+interface ButtonProps {
+  isVisible: boolean;
+}
+
+export const ButtonContainer = styled.div<ButtonProps>`
+ display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  gap: 16px;
+  z-index: 100;
+  align-items: center;
+  ${PrimaryButton} {
+    gap: 8px;
+    &:hover {
+      ${ArrowUp} {
+        path {
+          stroke: ${color.black};
+        }
+      }
+    }
+  }
+  ${({ isVisible }): string => {
+    return isVisible
+      ? `
+      ${ButtonRow} {
+        -webkit-transition: 0.3s ease-out;
+        transition: 0.3s ease-out;
+        will-change: transform;
+      };
+      background: rgba(255, 255, 255, 0.46);
+      backdrop-filter: blur(4px);
+        `
+      : `
+      ${ButtonRow} {
+        z-index: 100;
+      }
+      `;
+  }};
+
+  ${({ isVisible }) =>
+    isVisible === true
+      ? css``
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.5s, 0.5s;
+          animation-delay: 0s, 0.5s;
+        `};
+`;
+
+export const ArrowUpRight = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+`;
+
+export const EndContent = styled.div<HeightProps>`
+  ${({ height }): string => `height: ${height - 100}px; min-height: ${height - 100}px;`};
+  ${TitleText} {
+    margin-top: 16px;
+  }
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  scroll-snap-align: start;
+  padding-top: 110px;
+`;
+
+export const MiddleContent = styled.div<HeightProps>`
+  ${({ height }): string => `height: ${height}px; min-height: ${height}px;`};
+  ${TitleText} {
+    margin-top: 16px;
+  }
+  width: 100%;
+  height: 100vh;
+  background-size: cover;
+  scroll-snap-align: start;
+  padding-top: 110px;
+`;
+
+interface ViewProps {
+  height: number;
+  width: number;
+  showSlider?: boolean;
+  showAnimation?: boolean;
+}
+export const OnboardingContainer = styled.div<ViewProps>`
+  height: 100%;
+  scroll-snap-type: y mandatory;
+  padding: 10px 10px 10px 10px;
+  transition: all 0.4s;
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 5s, 0.5s;
+  animation-delay: 0s, 5s;
+  ${({ showAnimation }) =>
+    showAnimation
+      ? css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 5s, 0.5s;
+          animation-delay: 0s, 5s;
+        `
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.8s, 0.5s;
+          animation-delay: 0s, 0.8s;
+        `};
+`;
+
+export const DefaultImage = styled(CharacterImgs)<ViewProps>`
+  position: absolute;
+  right: 358px;
+  top: 0;
+`;
+
+export const Link = styled.a`
+  text-decoration: underline;
+  font-weight: ${fontWeight.light};
+  font-size: 24px;
+  line-height: 31px;
+  :first-letter {
+    text-transform: capitalize;
+  }
+  color: ${color.darkGrey};
+  display: inline;
+  margin-left: 5px;
+`;
+
+export const KryhaLink = styled(Link)`
+  margin-left: 0;
+`;
+
+export const TextContainer = styled.span`
+  font-weight: ${fontWeight.light};
+  font-size: 16px;
+  line-height: 22px;
+  :first-letter {
+    text-transform: capitalize;
+  }
+  display: inline-block;
+  color: ${color.darkGrey};
+  margin-top: 8px;
+`;
+
+export const KreadLogo = styled(KreadIcon)`
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 0.8s, 0.5s;
+  animation-delay: 0s, 0.8s;
+`;
+
+export const LogoContainer = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  margin-top: 30px;
+  ${KreadLogo} {
+    width: 100px;
+    height: 24px;
+  }
+`;
+
+export const KreadContainer = styled.div<ViewProps>`
+  ${KreadIcon} {
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 500px;
+    height: 150px;
+    animation: ${changeSize} 4s 1;
+    animation-fill-mode: forwards;
+    animation-delay: 3.8s;
+  }
+  ${({ showSlider }) =>
+    showSlider &&
+    css`
+      animation: ${slideUp};
+      animation-duration: 0.7s;
+      animation-delay: 0s;
+      animation-fill-mode: forwards;
+      ${KreadIcon} {
+        position: absolute;
+        left: 0;
+        transform: translate(-45%, 0);
+        top: 50%;
+        bottom: 50%;
+        width: 100px;
+        height: 24px;
+      }
+    `};
+`;
+
+export const ArrowDown = styled(ArrowDownIcon)`
+  position: absolute;
+  left: 40px;
+  bottom: -2px;
+  -webkit-animation: ${bounce} 2s;
+  animation: ${bounce} 2s;
+  -webkit-animation-iteration-count: 2;
+  animation-iteration-count: 2;
+  animation-fill-mode: backwords;
+  -webkit-animation-fill-mode: backwords;
+  animation-delay: 6s;
+  -webkit-animation-delay: 6s;
+  path {
+    stroke: ${color.black};
+  }
+  width: 24px;
+  height: 24px;
+`;
+
+export const SectionContainer = styled.div`
+  padding-left: 20px;
+  padding-top: 4%;
+`;
+
+export const ScrollContainer = styled.div`
+  position: absolute;
+  left: 40px;
+  bottom: 73px;
+`;
+
+export const GeneralSectionContainer = styled.div`
+  padding-left: 40px;
+  width: 460px;
+`;
+
+export const ConnectContainer = styled.div<ButtonProps>`
+  ${({ isVisible }): string => {
+    return isVisible
+      ? `
+        background: rgba(255, 255, 255, 0.46);
+        backdrop-filter: blur(4px);
+        z-index: 100;
+        width: 460px;
+        padding-top: 40px;
+        padding-bottom: 40px;
+        position: relative;
+      `
+      : "";
+  }};
+  ${({ isVisible }) =>
+    isVisible === true
+      ? css``
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.5s, 0.5s;
+          animation-delay: 0s, 0.5s;
+        `};
+`;
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
index 35b320acc..05f908ff1 100644
--- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
+++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -63,7 +63,7 @@ export const OnboardingMobile: FC = () => {
     localStorage.setItem(FIRST_TIME, "false");
     setShowAnimation(false);
   };
-
+  console.log(showSlider)
   return (
     <OnboardingWrapper>
       {showAnimation ? (
@@ -75,7 +75,7 @@ export const OnboardingMobile: FC = () => {
           <KreadLogo />
         </LogoContainer>
       )}
-      <OnboardingContainer>
+      <OnboardingContainer showAnimation={showAnimation}>
         <InfoText>
           <SectionContainer>
             <TextContainer customColor={color.darkGrey}>{text.general.aCharcterBuilderApp}</TextContainer>
diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
index 2ef90ca12..4b2829916 100644
--- a/frontend/src/pages/onboarding-mobile/styles.ts
+++ b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -16,12 +16,28 @@ export const OnboardingWrapper = styled.div`
   height: 100vh;
 `;
 
-export const OnboardingContainer = styled.div`
+export const OnboardingContainer = styled.div<ViewProps>`
   height: 100%;
   scroll-behavior: smooth;
   overflow: auto;
   scroll-snap-type: y mandatory;
   padding: 10px 10px 10px 10px;
+  transition: all 0.4s;
+  animation: ${disappear}, ${fadeIn};
+  animation-duration: 5s, 0.5s;
+  animation-delay: 0s, 5s;
+  ${({ showAnimation }) =>
+    showAnimation
+      ? css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 5s, 0.5s;
+          animation-delay: 0s, 5s;
+        `
+      : css`
+          animation: ${disappear}, ${fadeIn};
+          animation-duration: 0.8s, 0.5s;
+          animation-delay: 0s, 0.8s;
+        `};
 `;
 
 export const OnboardingCharacterWrapper = styled.div`
@@ -68,8 +84,8 @@ export const EndContent = styled.div<HeightProps>`
 `;
 
 interface ViewProps {
-  height: number;
-  width: number;
+  height?: number;
+  width?: number;
   showSlider?: boolean;
   showAnimation?: boolean;
 }
@@ -143,8 +159,7 @@ export const KreadContainer = styled.div<ViewProps>`
     position: absolute;
     left: 0;
     right: 0;
-    width: 500px;
-    height: 150px;
+    width: 80%;
     animation: ${changeSize} 4s 1;
     animation-fill-mode: forwards;
     animation-delay: 3.8s;
@@ -152,16 +167,12 @@ export const KreadContainer = styled.div<ViewProps>`
   ${({ showSlider }) =>
     showSlider &&
     css`
-      animation: ${slideUp};
-      animation-duration: 0.7s;
-      animation-delay: 0s;
-      animation-fill-mode: forwards;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    margin-top: 30px;
       ${KreadIcon} {
-        position: absolute;
-        left: 0;
-        transform: translate(-45%, 0);
-        top: 50%;
-        bottom: 50%;
+        position: relative;
         width: 100px;
         height: 24px;
       }